:root { --arsb-blue: #2563eb; --arsb-blue-dark: #1746a2; --arsb-ink: #172033; --arsb-muted: #667085; --arsb-bg: #f5f7fb; --arsb-border: #e5eaf2; --arsb-green: #138a55; }
.arsb-app { max-width: 1180px; margin: 0 auto; padding: 34px 18px; color: var(--arsb-ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.arsb-list-view, .arsb-player { position: relative; }
.arsb-list-view::before { content: ""; position: absolute; top: -34px; right: -18px; left: -18px; height: 210px; z-index: -1; border-radius: 0 0 38px 38px; background: linear-gradient(135deg, #eaf1ff 0%, #f8fbff 62%, #eefbf5 100%); }
.arsb-app button { font: inherit; }
.arsb-app-kicker, .arsb-step-tag { color: var(--arsb-blue); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.arsb-list-view h1, .arsb-complete-view h1 { margin: 6px 0 22px; font-size: clamp(28px, 5vw, 46px); }
.arsb-scenario-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.arsb-scenario-card { position: relative; display: grid; gap: 9px; min-height: 158px; padding: 24px; overflow: hidden; border: 1px solid var(--arsb-border); border-radius: 22px; background: rgba(255, 255, 255, .94); color: var(--arsb-ink); text-align: left; cursor: pointer; box-shadow: 0 12px 30px rgba(15, 23, 42, .07); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.arsb-scenario-card::after { content: "→"; position: absolute; right: 22px; bottom: 18px; color: var(--arsb-blue); font-size: 24px; font-weight: 800; }
.arsb-scenario-card:hover, .arsb-scenario-card:focus-visible { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(15, 23, 42, .12); }
.arsb-scenario-card:hover { border-color: #a9c1f7; }
.arsb-scenario-card:focus-visible, .arsb-button:focus-visible, .arsb-back:focus-visible { outline: 3px solid #f59e0b; outline-offset: 3px; }
.arsb-scenario-card strong { font-size: 20px; }
.arsb-scenario-card small { color: var(--arsb-muted); }
.arsb-scenario-icon, .arsb-success-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 16px; background: linear-gradient(135deg, #e5edff, #dff8ed); color: var(--arsb-blue); font-size: 24px; font-weight: 800; }
.arsb-player-head { display: flex; align-items: center; gap: 18px; margin-bottom: 12px; padding: 16px 18px; border: 1px solid var(--arsb-border); border-radius: 18px; background: #fff; box-shadow: 0 8px 24px rgba(15, 23, 42, .05); }
.arsb-back { border: 0; border-radius: 10px; background: #eef3fb; color: var(--arsb-blue-dark); cursor: pointer; padding: 9px 12px; font-weight: 700; }
.arsb-progress-label { margin-top: 3px; color: var(--arsb-muted); font-size: 13px; }
.arsb-progress { height: 7px; margin-bottom: 24px; overflow: hidden; border-radius: 99px; background: #e7ebf2; }
.arsb-progress span { display: block; height: 100%; border-radius: inherit; background: var(--arsb-blue); transition: width .2s ease; }
.arsb-scenario-intro { margin: -8px 0 22px; padding: 14px 16px; border-radius: 12px; background: #eef4ff; color: #344054; line-height: 1.5; }
.arsb-player-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); gap: 20px; align-items: start; }
.arsb-ar-panel, .arsb-guide-panel { min-width: 0; padding: 20px; border: 1px solid var(--arsb-border); border-radius: 22px; background: #fff; box-shadow: 0 12px 30px rgba(15, 23, 42, .06); }
.arsb-ar-viewport { display: grid; place-items: center; min-height: 420px; overflow: hidden; border-radius: 14px; background: #101828; color: #fff; text-align: center; }
.arsb-camera-hint { max-width: 250px; color: #cbd5e1; line-height: 1.5; }
.arsb-camera-hint strong { display: block; margin-top: 8px; color: #fff; font-size: 21px; }
.arsb-ar-viewport a-scene { width: 100%; height: 420px; }
.arsb-ar-actions, .arsb-guide-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.arsb-button { display: inline-flex; justify-content: center; align-items: center; min-height: 46px; padding: 11px 17px; border: 0; border-radius: 12px; background: linear-gradient(135deg, var(--arsb-blue), #3e7cf1); color: #fff; font-weight: 750; cursor: pointer; box-shadow: 0 7px 15px rgba(37, 99, 235, .2); transition: transform .15s ease, box-shadow .15s ease; }
.arsb-button:hover { transform: translateY(-1px); box-shadow: 0 10px 20px rgba(37, 99, 235, .25); }
.arsb-button:disabled { opacity: .5; cursor: not-allowed; }
.arsb-button-secondary, .arsb-help { background: #eef2f7; color: #344054; box-shadow: none; }
.arsb-complete { flex: 1; }
.arsb-ar-status { min-height: 21px; margin-top: 12px; color: var(--arsb-muted); font-size: 13px; }
.arsb-ar-status.is-success { color: var(--arsb-green); font-weight: 750; }
.arsb-guide-panel { transition: box-shadow .2s ease, border-color .2s ease; }
.arsb-guide-panel.is-active { border-color: #80aaff; box-shadow: 0 0 0 4px #e8efff; }
.arsb-guide-panel h2 { margin: 7px 0 12px; font-size: 28px; }
.arsb-guide-text { color: #475467; font-size: 17px; line-height: 1.55; white-space: pre-wrap; }
.arsb-auto-progress { flex: 1; min-height: 46px; display: flex; align-items: center; padding: 10px 14px; border-radius: 12px; background: #eef8f3; color: var(--arsb-green); font-size: 14px; font-weight: 750; }
.arsb-caa-image { display: block; width: min(180px, 100%); margin: 14px 0; border-radius: 12px; }
.arsb-caa-text { margin: 14px 0; padding: 14px; border-radius: 12px; background: #fff7d6; font-size: 20px; font-weight: 800; }
.arsb-media { display: block; width: 100%; margin: 14px 0; border-radius: 10px; }
.arsb-empty, .arsb-error, .arsb-complete-view { padding: 42px 20px; border-radius: 18px; background: #fff; text-align: center; }
.arsb-success-icon { margin: 0 auto 16px; background: #dcfce7; color: #138a55; font-size: 26px; }
.arsb-login-required { padding: 20px; border: 1px solid #e2e8f0; border-radius: 12px; text-align: center; }
.arsb-login-required form { max-width: 360px; margin: 20px auto 0; text-align: left; }
.arsb-login-required label { display: block; margin: 0 0 6px; font-weight: 700; }
.arsb-login-required input[type="text"], .arsb-login-required input[type="password"] { width: 100%; min-height: 42px; margin: 0 0 14px; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 8px; }
.arsb-login-required input[type="submit"] { width: 100%; min-height: 44px; border: 0; border-radius: 9px; background: var(--arsb-blue); color: #fff; font-weight: 800; cursor: pointer; }
.arsb-ar-exit { display: none; }
body.arsb-body-ar-active { overflow: hidden; }
.arsb-app.arsb-is-ar-active { position: fixed; inset: 0; z-index: 99999; max-width: none; margin: 0; padding: 0; background: #000; }
.arsb-is-ar-active .arsb-player { min-height: 100dvh; }
.arsb-is-ar-active .arsb-player-head, .arsb-is-ar-active .arsb-progress, .arsb-is-ar-active .arsb-scenario-intro, .arsb-is-ar-active .arsb-ar-actions { display: none; }
.arsb-is-ar-active .arsb-player-grid { display: block; }
.arsb-is-ar-active .arsb-ar-panel { position: fixed; inset: 0; z-index: 1; padding: 0; border: 0; border-radius: 0; background: #000; box-shadow: none; }
.arsb-is-ar-active .arsb-ar-viewport { position: fixed; inset: 0; z-index: 1; width: 100vw; height: 100dvh; min-height: 0; border-radius: 0; }
.arsb-is-ar-active .arsb-ar-viewport a-scene { width: 100vw; height: 100dvh; }
.arsb-is-ar-active .arsb-camera-video, body.arsb-body-ar-active #arjs-video { position: absolute !important; inset: 0 !important; z-index: 1 !important; display: block !important; visibility: visible !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; margin: 0 !important; object-fit: cover !important; background: #000 !important; }
.arsb-is-ar-active .a-canvas { position: fixed !important; inset: 0 !important; z-index: 2 !important; width: 100vw !important; height: 100dvh !important; }
.arsb-is-ar-active .a-enter-vr, .arsb-is-ar-active .a-orientation-modal, .arsb-is-ar-active #arjsDebugUIContainer { display: none !important; }
.arsb-is-ar-active .arsb-camera-hint { display: none; }
.arsb-is-ar-active .arsb-ar-status { display: none; }
.arsb-is-ar-active .arsb-ar-exit { display: block; position: fixed; top: max(14px, env(safe-area-inset-top)); right: 14px; z-index: 10004; min-height: 40px; padding: 8px 12px; border: 0; border-radius: 999px; background: rgba(0, 0, 0, .62); color: #fff; font-weight: 700; cursor: pointer; }
.arsb-is-ar-active .arsb-guide-panel { display: none; }
.arsb-is-ar-active.arsb-target-found .arsb-guide-panel { display: block; position: fixed; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); left: 12px; z-index: 10003; max-height: 46dvh; overflow: auto; margin: 0; padding: 16px; border: 0; border-radius: 18px; box-shadow: 0 -8px 30px rgba(0, 0, 0, .35); }
.arsb-is-ar-active.arsb-target-found .arsb-ar-status { display: block; position: fixed; top: max(14px, env(safe-area-inset-top)); left: 14px; z-index: 10004; max-width: calc(100vw - 190px); padding: 9px 12px; border-radius: 999px; background: rgba(11, 112, 67, .88); color: #fff; }
@media (max-width: 780px) { .arsb-player-grid { grid-template-columns: 1fr; } .arsb-ar-viewport, .arsb-ar-viewport a-scene { min-height: 320px; height: 320px; } }