.app-shell[data-v-1ee4c516]{min-height:100vh}.impersonation-banner[data-v-1ee4c516]{display:flex;align-items:center;justify-content:center;gap:var(--space-2);background-color:#d97706;color:#fff;padding:var(--space-2) var(--space-4);font-size:.85rem;font-weight:500;position:sticky;top:0;z-index:30;box-shadow:0 2px 4px #0000004d}.banner-icon[data-v-1ee4c516]{font-size:1rem}.revert-btn[data-v-1ee4c516]{margin-left:var(--space-3);padding:2px 12px;background:#fff3;color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:var(--radius-sm);font-size:.8rem;font-weight:500;cursor:pointer;transition:background .2s}.revert-btn[data-v-1ee4c516]:hover{background:#ffffff59}.impersonating-btn[data-v-1ee4c516]{border-color:#d97706!important;color:#d97706!important}.topbar[data-v-1ee4c516]{position:sticky;top:0;z-index:20;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(180deg,#2d2622eb,#2d2622cc);border-bottom:1px solid var(--color-border)}.topbar-inner[data-v-1ee4c516]{min-height:68px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}.brand-title[data-v-1ee4c516]{margin:0;color:var(--color-accent);font-size:clamp(1.2rem,2vw,1.5rem);letter-spacing:.02em}.brand-link[data-v-1ee4c516]{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;color:inherit}.brand-logo[data-v-1ee4c516]{width:32px;height:32px;object-fit:contain;border-radius:4px}.topbar-nav[data-v-1ee4c516]{display:flex;align-items:center;gap:var(--space-5);position:relative}.nav-link[data-v-1ee4c516]{position:relative;color:var(--color-text-secondary);text-decoration:none;font-size:.875rem;font-weight:500;letter-spacing:.02em;padding:4px 0;transition:color .2s;white-space:nowrap}.nav-link[data-v-1ee4c516]:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:1.5px;background:var(--color-accent);transform:scaleX(0);transform-origin:left;transition:transform .2s ease}.nav-link[data-v-1ee4c516]:hover{color:var(--color-text-primary)}.nav-link[data-v-1ee4c516]:hover:after,.nav-link.router-link-active[data-v-1ee4c516]:after{transform:scaleX(1)}.nav-link.router-link-active[data-v-1ee4c516]{color:var(--color-accent-light)}.nav-link-cta[data-v-1ee4c516]{color:var(--color-accent);border:1px solid color-mix(in srgb,var(--color-accent) 55%,transparent);padding:4px 14px;border-radius:20px;transition:background .2s,color .2s,border-color .2s}.nav-link-cta[data-v-1ee4c516]:after{display:none}.nav-link-cta[data-v-1ee4c516]:hover,.nav-link-cta.router-link-active[data-v-1ee4c516]{background:var(--color-accent);color:var(--color-background);border-color:var(--color-accent)}.nav-link-admin[data-v-1ee4c516]{color:var(--color-accent);font-weight:600}.nav-link-admin[data-v-1ee4c516]:after{background:var(--color-accent)}.nav-link-admin[data-v-1ee4c516]:hover{color:var(--color-accent-light)}.nav-link-login[data-v-1ee4c516]{color:var(--color-text-primary);border:1px solid var(--color-border);padding:4px 14px;border-radius:20px;transition:border-color .2s,color .2s}.nav-link-login[data-v-1ee4c516]:after{display:none}.nav-link-login[data-v-1ee4c516]:hover{border-color:var(--color-accent);color:var(--color-accent)}.nav-profile-btn[data-v-1ee4c516]{display:inline-flex;align-items:center;gap:4px;background:none;border:1px solid var(--color-border);border-radius:20px;padding:4px 12px;color:var(--color-text-secondary);font-size:.875rem;font-weight:500;cursor:pointer;transition:border-color .2s,color .2s;white-space:nowrap}.nav-profile-btn[data-v-1ee4c516]:hover{border-color:var(--color-accent);color:var(--color-text-primary)}.chevron[data-v-1ee4c516]{font-size:.7em;opacity:.7}.profile-dropdown[data-v-1ee4c516]{position:relative}.dropdown-menu[data-v-1ee4c516]{position:absolute;right:0;top:calc(100% + 8px);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:0 8px 24px #00000047;list-style:none;padding:4px 0;margin:0;min-width:150px;z-index:100}.dropdown-item[data-v-1ee4c516]{display:block;width:100%;padding:8px 16px;text-align:left;color:var(--color-text-secondary);background:none;border:none;text-decoration:none;font-size:.875rem;cursor:pointer;transition:color .15s,background .15s}.dropdown-item[data-v-1ee4c516]:hover{color:var(--color-text-primary);background:var(--color-surface-light)}.content-area[data-v-1ee4c516]{padding-top:var(--space-6);height:calc(100vh - 68px)}@media(max-width:640px){.topbar-inner[data-v-1ee4c516]{min-height:62px}.brand-title[data-v-1ee4c516]{font-size:1.1rem}.topbar-nav[data-v-1ee4c516]{gap:var(--space-3)}}:root{color-scheme:dark;--color-primary: #6b5344;--color-primary-light: #8b7355;--color-primary-dark: #4a3728;--color-accent: #c9a66b;--color-accent-light: #e0c99a;--color-background: #231f1c;--color-surface: #2d2622;--color-surface-light: #3a3430;--color-surface-elevated: #423b35;--color-surface-raised: #3a3430;--color-text-primary: rgba(255, 255, 255, .9);--color-text-secondary: rgba(255, 255, 255, .66);--color-text-muted: rgba(255, 255, 255, .5);--color-text: var(--color-text-primary);--color-border: rgba(255, 255, 255, .16);--color-symbol-border: rgba(255, 255, 255, .16);--color-focus-ring: rgba(201, 166, 107, .28);--color-danger: #e05252;--color-error: #e57373;--color-error-bg: rgba(229, 115, 115, .15);--color-success: #81c784;--color-success-bg: rgba(129, 199, 132, .15);--color-warning: #ffb74d;--color-warning-bg: rgba(255, 183, 77, .15);--color-btn-primary-bg: var(--color-primary);--color-btn-primary-bg-hover: var(--color-primary-light);--color-btn-primary-text: #ffffff;--color-btn-secondary-bg: var(--color-surface-light);--color-btn-secondary-bg-hover: var(--color-surface-elevated);--color-btn-secondary-text: var(--color-text-primary);--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-md: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.5rem;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-12: 3rem;--radius-sm: .25rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--transition-fast: .15s ease}*{box-sizing:border-box}:root{font-family:Inter,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color:var(--color-text-primary);background-color:var(--color-background);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at 15% 15%,rgba(201,166,107,.14) 0%,transparent 40%),radial-gradient(circle at 80% -10%,rgba(107,83,68,.28) 0%,transparent 45%),var(--color-background);color:var(--color-text-primary)}a{color:var(--color-accent-light)}a:hover{color:#f6dfb4}#app{min-height:100vh}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);border:1px solid transparent;border-radius:var(--radius-md);padding:var(--space-2) var(--space-4);font-size:var(--font-size-sm);font-weight:500;line-height:1;text-decoration:none;cursor:pointer;transition:all var(--transition-fast)}.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--color-focus-ring)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-sm{padding:var(--space-2) var(--space-3);font-size:.8rem}.btn-xs{padding:var(--space-1) var(--space-2);font-size:.75rem}.btn-lg{padding:var(--space-3) var(--space-5);font-size:var(--font-size-md)}.btn-primary{background:var(--color-btn-primary-bg);color:var(--color-btn-primary-text);border-color:var(--color-primary-dark)}.btn-primary:hover:not(:disabled){background:var(--color-btn-primary-bg-hover)}.btn-secondary{background:var(--color-btn-secondary-bg);color:var(--color-btn-secondary-text);border-color:var(--color-border)}.btn-secondary:hover:not(:disabled){background:var(--color-btn-secondary-bg-hover)}.btn-danger{background:#8a1d28;color:#fff;border-color:#8a1d28}.btn-danger:hover:not(:disabled){background:#a52733;border-color:#a52733}.btn-ghost{background:transparent;color:var(--color-text-secondary);border-color:transparent}.btn-ghost:hover:not(:disabled){background:var(--color-surface-light);color:var(--color-text-primary)}.btn-approve{background:#22c55e24;color:#59e48c;border-color:#22c55e59}.btn-accent{background:transparent;color:var(--color-accent);border-color:var(--color-accent)}.btn-accent:hover:not(:disabled){background:var(--color-accent);color:#1a1512}.btn-icon{width:2rem;height:2rem;padding:0;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-secondary)}.btn-icon:hover:not(:disabled){background:var(--color-surface-light);color:var(--color-text-primary)}.btn-info{background:#38bdf81f;color:#7dd3fc;border-color:#38bdf84d}.btn-info:hover:not(:disabled){background:#38bdf838}.main-container{width:min(1100px,calc(100% - 2rem));margin:0 auto;padding:var(--space-1) 0}.page-header-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}.page-title{margin:0;font-size:clamp(1.5rem,3vw,2rem);color:var(--color-accent)}.demo-mode .step-desc,.demo-mode .demo-hint{display:none}.coding-nav-row,.coding-nav-btns{display:flex;gap:var(--space-2)}.coding-nav-row{justify-content:space-between;position:sticky;bottom:12px;z-index:4}.step-tag-panel{display:flex;flex-wrap:wrap;gap:var(--space-2)}.step-tag{padding:var(--space-1) var(--space-3);border-radius:var(--radius-sm);border:1px solid var(--color-border);background:transparent;color:var(--color-text-secondary);font-size:.78rem;font-family:Fira Code,Cascadia Code,Consolas,monospace;cursor:pointer;transition:all var(--transition-fast);line-height:1.4}.step-tag:hover{border-color:var(--color-accent);color:var(--color-accent)}.step-tag--active{border-color:var(--color-accent);color:var(--color-accent);background:#c9a66b1a}.coding-nav-btns{margin-left:auto;justify-content:flex-end}.shortcut-key{text-decoration:underline;text-underline-offset:2px}