:root{--bg: #f4f4f4;--surface: #f7f8f8;--surface-alt: #c9d3d4;--surface-nav: #e6ecec;--primary: #013148;--secondary: #96a8a8;--success: #25d366;--warning: #f4b740;--error: #d64545;--info: #4a90a4;--text-primary: var(--primary);--text-secondary: color-mix(in srgb, var(--primary) 60%, var(--secondary) 40%);--border: color-mix(in srgb, var(--secondary) 45%, var(--bg) 55%);--accent: var(--primary);--accent-hover: color-mix(in srgb, var(--primary) 88%, black 12%);--shadow-soft: 0 8px 24px color-mix(in oklch, var(--text-primary) 10%, transparent);--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.5rem;--space-6: 2rem;--radius-sm: .5rem;--radius-md: .75rem;--radius-lg: 1rem;--font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif}*,*:before,*:after{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;font-family:var(--font-ui);background:var(--bg);color:var(--text-primary);line-height:1.5}a,button,input{font:inherit}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid color-mix(in oklch,var(--accent) 80%,white 20%);outline-offset:2px}.skip-link{position:absolute;left:var(--space-4);top:-100%;padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);background:var(--text-primary);color:var(--bg)}.skip-link:focus{top:var(--space-4)}.login-layout{min-height:100vh;display:grid;place-items:center;padding:var(--space-6) var(--space-4)}.login-card{width:min(100%,30rem);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);padding:clamp(1.5rem,1rem + 1vw,2rem);box-shadow:var(--shadow-soft)}.login-card h1{margin:0;font-size:1.625rem;line-height:1.2}.login-help,.login-tip{color:var(--text-secondary);margin:var(--space-3) 0 0}.login-tip{margin-top:var(--space-4);font-size:.9rem}.login-form{margin-top:var(--space-5);display:grid;gap:var(--space-3)}.login-form label{font-size:.92rem;color:var(--text-secondary)}.login-form input{border:1px solid var(--border);border-radius:var(--radius-sm);min-height:2.75rem;padding:0 var(--space-3);background:var(--bg);color:var(--text-primary)}.login-form button{margin-top:var(--space-2);min-height:2.75rem;border:none;border-radius:var(--radius-sm);background:var(--accent);color:#f9fcfe;font-weight:600;cursor:pointer;transition:background-color .18s ease-out}.login-form button:hover{background:var(--accent-hover)}.login-form button:disabled{cursor:not-allowed;opacity:.7}.form-error{margin:0;color:var(--error);font-size:.9rem}.home-layout{min-height:100vh;display:flex;flex-direction:column}.app-header{border-bottom:1px solid var(--border);background:var(--surface-alt);display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4)}.logo-block{display:flex;align-items:center;gap:var(--space-3)}.logo-mark{width:2.5rem;aspect-ratio:1;border-radius:.75rem;background:color-mix(in srgb,var(--primary) 14%,var(--surface));color:var(--accent-hover);display:grid;place-items:center;font-weight:700;letter-spacing:.02em}.logo-title{margin:0;font-weight:600}.logo-subtitle{margin:0;color:var(--text-secondary);font-size:.9rem}.header-user{position:relative;display:flex;align-items:center;gap:var(--space-2)}.user-name{color:var(--text-secondary);font-size:.9rem}.avatar-trigger{border:none;background:transparent;padding:0;display:inline-flex;border-radius:999px;cursor:pointer}.avatar{width:2rem;height:2rem;border-radius:999px;object-fit:cover}.avatar--fallback{display:inline-grid;place-items:center;border:1px solid color-mix(in srgb,var(--primary) 24%,var(--border));background:color-mix(in srgb,var(--primary) 10%,var(--surface));color:var(--accent-hover);font-size:.78rem;font-weight:700}.user-menu{position:absolute;top:calc(100% + var(--space-2));right:0;min-width:10rem;border:1px solid color-mix(in srgb,var(--border) 65%,transparent);border-radius:var(--radius-sm);background:var(--surface);box-shadow:var(--shadow-soft);padding:var(--space-2);z-index:20}.user-menu-logout{width:100%;min-height:2.5rem;border:none;border-radius:var(--radius-sm);background:transparent;color:color-mix(in srgb,var(--error) 82%,var(--text-primary));text-align:left;padding:0 var(--space-2);cursor:pointer}.user-menu-logout:hover{background:color-mix(in srgb,var(--error) 10%,transparent)}.home-shell{flex:1;display:flex;min-height:0}.side-nav{position:relative;width:10.5rem;border-right:1px solid color-mix(in srgb,var(--border) 40%,transparent);background:var(--surface-nav);padding:var(--space-5) var(--space-3) var(--space-3);display:flex;flex-direction:column;gap:var(--space-4)}.side-nav--collapsed{width:.75rem;padding:0;background:var(--surface-nav);border-right:1px solid color-mix(in srgb,var(--border) 55%,transparent);cursor:pointer}.side-toggle{position:absolute;top:.35rem;right:.25rem;border:none;border-radius:.25rem;background:transparent;color:var(--text-secondary);width:1.25rem;height:1.25rem;cursor:pointer;font-size:.72rem;line-height:1}.side-toggle:hover{background:color-mix(in srgb,var(--primary) 10%,transparent);color:var(--text-primary)}.side-collapsed-icon{position:absolute;top:.3rem;left:50%;transform:translate(-50%);font-size:.58rem;line-height:1;color:color-mix(in srgb,var(--text-secondary) 75%,transparent);pointer-events:none}.side-menu{display:grid;gap:var(--space-1)}.side-item{border:none;border-radius:0;background:transparent;min-height:2.75rem;padding:0;display:inline-flex;align-items:center;color:var(--text-primary);cursor:pointer;font-size:.95rem}.side-item:hover{background:color-mix(in srgb,var(--primary) 6%,transparent)}.side-item--active{background:transparent;color:var(--text-primary);font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.24rem}.side-item--logout{color:var(--text-secondary)}.side-item--logout:hover{color:color-mix(in srgb,var(--error) 82%,var(--text-primary));background:color-mix(in srgb,var(--error) 8%,transparent)}.home-main{flex:1;padding:clamp(1rem,.7rem + 1vw,2rem)}.home-main--blank{padding:0}.home-content{max-width:65ch}.home-content h1{margin:0;font-size:1.5rem}.home-content p{margin-top:var(--space-3);color:var(--text-secondary)}.palette-reference{margin-top:var(--space-6);padding-top:var(--space-5);border-top:1px solid color-mix(in srgb,var(--border) 55%,transparent)}.palette-reference h2{margin:0;font-size:1.2rem}.palette-reference p{margin-top:var(--space-2)}.palette-grid{margin-top:var(--space-4);display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--space-3)}.palette-card{border:1px solid color-mix(in srgb,var(--border) 55%,transparent);border-radius:var(--radius-sm);background:var(--surface);padding:var(--space-3)}.palette-swatch{display:block;width:100%;height:1.5rem;border-radius:.35rem;border:1px solid color-mix(in srgb,var(--border) 65%,transparent)}.swatch-bg{background:var(--bg)}.swatch-primary{background:var(--primary)}.swatch-secondary{background:var(--secondary)}.swatch-success{background:var(--success)}.swatch-warning{background:var(--warning)}.swatch-error{background:var(--error)}.swatch-info{background:var(--info)}.palette-label{margin:var(--space-2) 0 0;font-size:.86rem;color:var(--text-secondary)}.palette-value{margin:0;font-size:.84rem;font-weight:600}.tone-preview{margin-top:var(--space-4);display:flex;flex-wrap:wrap;gap:var(--space-2)}.tone-chip{border:none;border-radius:999px;min-height:2.25rem;padding:0 var(--space-4);font-size:.85rem;font-weight:600;cursor:pointer}.tone-chip--primary{background:var(--primary);color:#f4f4f4}.tone-chip--secondary{background:var(--secondary);color:#11394d}.tone-chip--success{background:var(--success);color:#06321b}.tone-chip--warning{background:var(--warning);color:#513300}.tone-chip--error{background:var(--error);color:#fff1f1}.tone-chip--info{background:var(--info);color:#ecf6f9}@media (max-width: 48rem){.app-header{flex-direction:column;align-items:flex-start}.header-user{width:100%;justify-content:space-between}.home-shell{flex-direction:column}.side-nav,.side-nav--collapsed{width:100%;border-right:none;border-bottom:1px solid color-mix(in srgb,var(--border) 40%,transparent)}.side-menu{grid-template-columns:repeat(2,minmax(0,1fr))}}