@import "https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap";*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--font-sans:"Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-display:"Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono:"SF Mono", "JetBrains Mono", "Fira Code", monospace;--text-xs:.6875rem;--text-sm:.8125rem;--text-base:.875rem;--text-md:.9375rem;--text-lg:1rem;--text-xl:1.125rem;--text-2xl:1.375rem;--text-3xl:1.75rem;--text-4xl:2.5rem;--weight-light:300;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--tracking-tight:-.015em;--tracking-tighter:-.025em;--tracking-tightest:-.04em;--leading-none:1;--leading-tight:1.15;--leading-snug:1.35;--leading-normal:1.55;--leading-relaxed:1.65;--color-primary:#000;--color-primary-hover:#1a1a1a;--color-bg:#fff;--color-surface:#fff;--color-text:#1a1a1a;--color-text-secondary:#666;--color-text-tertiary:#a3a3a3;--color-placeholder:#c8c8c8;--color-gray-50:#fafafa;--color-gray-100:#f5f5f5;--color-gray-150:#efefef;--color-gray-200:#e8e8e8;--color-gray-300:#d4d4d4;--color-gray-400:#a3a3a3;--color-gray-500:#737373;--color-gray-600:#525252;--color-gray-700:#404040;--color-gray-800:#262626;--color-gray-900:#171717;--color-border:#e8e8e8;--color-border-light:#f0f0f0;--color-success:#22c55e;--color-success-bg:#f0fdf4;--color-warning:#f59e0b;--color-warning-bg:#fffbeb;--color-danger:#ef4444;--color-danger-bg:#fef2f2;--color-info:#3b82f6;--color-info-bg:#eff6ff;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:20px;--radius-full:9999px;--shadow-clay:0 1px 2px #0000000a, 0 2px 4px #00000005, inset 0 1px 0 #fffc;--shadow-clay-hover:0 1px 3px #0000000f, 0 3px 8px #0000000a, inset 0 1px 0 #fffc;--shadow-clay-active:0 1px 2px #0000000a, inset 0 1px 0 #fffc;--shadow-card:0 0 0 1px #00000008, 0 2px 4px #00000005, 0 8px 24px #0000000a, 0 24px 48px #00000008;--clay-border:#0000000a;--clay-border-hover:#0000000f;--clay-inset:#fffc;--clay-inset-subtle:#ffffffb3;--clay-shadow-sm:#00000008;--clay-shadow-md:#0000000a;--clay-shadow-lg:#0000000f;--clay-dark-inset:#ffffff1a;--overlay-scrim:#00000026;--overlay-scrim-heavy:#0000008c;--color-on-overlay:#fff;--z-dropdown:200;--z-sidebar:300;--z-modal:400;--z-detail:500;--z-toast:1100;--ease-spring:cubic-bezier(.16, 1, .3, 1);--ease-out-expo:cubic-bezier(.19, 1, .22, 1);--duration-fast:.1s;--duration-normal:.18s;--duration-slow:.3s;--duration-entrance:.4s}[data-theme=dark]{--color-primary:#fff;--color-primary-hover:#e0e0e0;--color-bg:#161616;--color-surface:#1e1e1e;--color-text:#ebebeb;--color-text-secondary:#a8a8a8;--color-text-tertiary:#727272;--color-placeholder:#505050;--color-gray-50:#1c1c1c;--color-gray-100:#252525;--color-gray-150:#2c2c2c;--color-gray-200:#353535;--color-gray-300:#454545;--color-gray-400:#5e5e5e;--color-gray-500:#787878;--color-gray-600:#969696;--color-gray-700:#b4b4b4;--color-gray-800:#d2d2d2;--color-gray-900:#ebebeb;--color-border:#303030;--color-border-light:#282828;--color-success:#34d399;--color-success-bg:#0c1f17;--color-warning:#fbbf24;--color-warning-bg:#1f1a0c;--color-danger:#f87171;--color-danger-bg:#1f0f0f;--color-info:#60a5fa;--color-info-bg:#0f1729;--shadow-clay:0 1px 2px #0000004d, 0 2px 4px #00000026, inset 0 1px 0 #ffffff0d;--shadow-clay-hover:0 1px 3px #0006, 0 3px 8px #0003, inset 0 1px 0 #ffffff0f;--shadow-clay-active:0 1px 2px #0000004d, inset 0 1px 0 #ffffff0d;--shadow-card:0 0 0 1px #ffffff0d, 0 2px 4px #00000040, 0 8px 24px #00000059;--clay-border:#ffffff14;--clay-border-hover:#ffffff1f;--clay-inset:#ffffff0d;--clay-inset-subtle:#ffffff08;--clay-shadow-sm:#00000040;--clay-shadow-md:#0000004d;--clay-shadow-lg:#00000059;--clay-dark-inset:#ffffff12;--overlay-scrim:#0006;--overlay-scrim-heavy:#000000b3;--color-on-overlay:#fff;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}:focus{outline:none}:focus-visible{outline:2px solid var(--color-gray-400);outline-offset:2px}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--color-gray-200);border-radius:3px}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}body{font-family:var(--font-sans);font-weight:var(--weight-regular);font-size:var(--text-base);color:var(--color-text);background:var(--color-gray-100);letter-spacing:var(--tracking-tight);line-height:var(--leading-normal)}#root{height:100dvh;padding:var(--space-2)}.app-frame{background:var(--color-bg);border-radius:var(--radius-lg);border:1px solid var(--clay-border,#0000000f);height:100%;overflow:hidden}.app-layout{height:100%;display:flex}.app-main{flex-direction:column;flex:1;min-width:0;display:flex;overflow:hidden}.sync-error-bar{align-items:center;gap:var(--space-2);padding:6px var(--space-5);background:var(--color-danger-bg,#fef2f2);color:var(--color-danger);font-family:var(--font-sans);font-size:var(--text-xs);font-weight:var(--weight-medium);border-bottom:1px solid var(--color-danger);flex-shrink:0;display:flex}[data-theme=dark] .sync-error-bar{background:#ef44441a}.app-header{align-items:center;gap:var(--space-3);padding:0 var(--space-5);border-bottom:1px solid var(--color-border-light);background:var(--color-bg);flex-shrink:0;height:48px;display:flex}.app-content{--app-main-pad-x:var(--space-4);--app-main-pad-t:var(--space-3);--app-main-pad-b:var(--space-3);--app-canvas-radius:20px;flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}.app-content>.page-scroll{-webkit-overflow-scrolling:touch;flex:1;min-height:0;overflow-y:auto}.topbar-page-title{font-size:var(--text-sm);font-weight:var(--weight-medium);letter-spacing:var(--tracking-tight);color:var(--color-text-secondary)}.topbar-title-cluster{align-items:center;gap:var(--space-2);flex-wrap:wrap;flex:1;min-width:0;display:flex}.topbar-page-title--cluster{flex-shrink:0;margin:0}.topbar-breadcrumb-sep{color:var(--color-text-tertiary);font-size:var(--text-sm);font-weight:var(--weight-light);-webkit-user-select:none;user-select:none}.topbar-breadcrumb-sub{font-size:var(--text-xs);font-weight:var(--weight-regular);letter-spacing:var(--tracking-tight);color:var(--color-text-tertiary);line-height:var(--leading-snug);min-width:0}.topbar-back{border-radius:var(--radius-full);border:1px solid var(--color-gray-200);background:var(--color-surface);width:32px;height:32px;color:var(--color-text-tertiary);cursor:pointer;box-shadow:0 1px 2px var(--clay-shadow-sm), inset 0 1px 0 var(--clay-inset);transition:background var(--duration-fast) ease, border-color var(--duration-fast) ease, color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;flex-shrink:0;justify-content:center;align-items:center;display:flex}.topbar-back:hover{background:var(--color-gray-50);border-color:var(--color-gray-300);color:var(--color-text);box-shadow:0 1px 3px var(--clay-shadow-lg), inset 0 1px 0 var(--clay-inset)}.topbar-client-name{font-size:var(--text-md);font-weight:var(--weight-medium);letter-spacing:var(--tracking-tight);color:var(--color-text);white-space:nowrap;flex-shrink:0}.topbar-title-cluster .topbar-client-name.topbar-page-title--cluster{text-overflow:ellipsis;flex-shrink:1;min-width:0;overflow:hidden}.editable-title{cursor:text;border-radius:var(--radius-sm);transition:background var(--duration-fast) ease;padding:0 2px}.editable-title:hover{background:var(--color-gray-100)}.editable-title-input{border:1px solid var(--color-gray-300);border-radius:var(--radius-sm);background:var(--color-surface);font:inherit;color:inherit;letter-spacing:inherit;outline:none;width:auto;min-width:80px;padding:1px 4px}.editable-title-input:focus{border-color:var(--color-gray-400);box-shadow:0 0 0 2px #0000000d}[data-theme=dark] .editable-title:hover{background:var(--color-gray-100)}[data-theme=dark] .editable-title-input{border-color:var(--color-gray-300);background:var(--color-gray-100)}[data-theme=dark] .editable-title-input:focus{border-color:var(--color-gray-400);box-shadow:0 0 0 2px #ffffff0d}.topbar-right{align-items:center;gap:var(--space-2);margin-left:auto;display:flex}.topbar-new{border-radius:var(--radius-full);border:1px solid var(--color-gray-200);background:var(--color-surface);width:32px;height:32px;color:var(--color-text-secondary);cursor:pointer;box-shadow:0 1px 2px var(--clay-shadow-sm), inset 0 1px 0 var(--clay-inset);transition:background var(--duration-fast) ease, border-color var(--duration-fast) ease, color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;justify-content:center;align-items:center;display:flex}.topbar-new:hover{background:var(--color-gray-50);border-color:var(--color-gray-300);color:var(--color-text);box-shadow:0 1px 3px var(--clay-shadow-lg), inset 0 1px 0 var(--clay-inset)}.topbar-new:active{background:var(--color-gray-100);box-shadow:0 1px 1px var(--clay-shadow-sm), inset 0 1px 0 var(--clay-inset)}[data-theme=dark] .topbar-new{background:var(--color-gray-100);border-color:var(--color-gray-200);box-shadow:0 1px 2px #0003,inset 0 1px #ffffff0a}[data-theme=dark] .topbar-new:hover{background:var(--color-gray-200);border-color:var(--color-gray-300)}.topbar-ref-wrap{position:relative}.topbar-ref-btn{border-radius:var(--radius-full);border:1px solid var(--color-gray-200);background:var(--color-gray-100);height:32px;color:var(--color-text-secondary);font-family:var(--font-sans);font-size:var(--text-xs);font-weight:var(--weight-medium);cursor:pointer;box-shadow:0 1px 2px var(--clay-shadow-sm), inset 0 1px 0 var(--clay-inset);transition:background var(--duration-fast) ease, border-color var(--duration-fast) ease, color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;white-space:nowrap;flex-shrink:0;align-items:center;gap:5px;padding:0 14px;display:inline-flex;position:relative}.topbar-ref-btn:hover{background:var(--color-gray-150,#e8e8e8);border-color:var(--color-gray-300);color:var(--color-text);box-shadow:0 1px 3px var(--clay-shadow-lg), inset 0 1px 0 var(--clay-inset)}.topbar-ref-btn--has{color:var(--color-text)}.topbar-ref-count{background:var(--color-text);min-width:16px;height:16px;color:var(--color-bg);font-size:9px;font-weight:var(--weight-medium);border-radius:8px;justify-content:center;align-items:center;padding:0 4px;line-height:1;display:flex;position:absolute;top:-4px;right:-4px}[data-theme=dark] .topbar-ref-btn{background:var(--color-gray-100);border-color:var(--color-gray-200);box-shadow:0 1px 2px #0003,inset 0 1px #ffffff0a}[data-theme=dark] .topbar-ref-btn:hover{background:var(--color-gray-200);border-color:var(--color-gray-300)}[data-theme=dark] .topbar-ref-count{background:var(--color-gray-200);color:var(--color-gray-900)}.topbar-ref-dropdown{min-width:220px;padding:var(--space-3);background:var(--color-surface);border:1px solid var(--color-gray-200);border-radius:var(--radius-lg);z-index:50;animation:dropdownIn var(--duration-normal) var(--ease-spring);position:absolute;top:calc(100% + 6px);right:0;box-shadow:0 8px 24px #0000001f}[data-theme=dark] .topbar-ref-dropdown{background:var(--color-gray-100);border-color:var(--color-gray-200)}.topbar-ref-grid{flex-wrap:wrap;gap:6px;display:flex}.topbar-ref-thumb{border-radius:var(--radius-md);border:1px solid var(--color-gray-200);width:48px;height:48px;position:relative;overflow:hidden}.topbar-ref-thumb img{object-fit:cover;width:100%;height:100%}.topbar-ref-remove{color:#fff;cursor:pointer;opacity:0;width:14px;height:14px;transition:opacity var(--duration-fast) ease;background:#0000008c;border:none;border-radius:50%;justify-content:center;align-items:center;padding:0;display:flex;position:absolute;top:2px;right:2px}.topbar-ref-thumb:hover .topbar-ref-remove{opacity:1}.topbar-ref-add{border-radius:var(--radius-md);border:1.5px dashed var(--color-gray-300);width:48px;height:48px;color:var(--color-gray-400);cursor:pointer;background:0 0;justify-content:center;align-items:center;display:flex}.topbar-ref-add:hover{border-color:var(--color-gray-500);color:var(--color-gray-600)}.topbar-ref-hint{font-size:var(--text-xs);color:var(--color-text-tertiary);margin:var(--space-2) 0 0;text-align:center}.app-content>*{min-width:0;min-height:0;animation:pageIn var(--duration-entrance) var(--ease-out-expo);flex:1}@media (width<=768px){.app-content{--app-main-pad-x:var(--space-4);--app-main-pad-t:var(--space-3)}}.topbar-mobile-menu{border-radius:var(--radius-full);width:32px;height:32px;color:var(--color-text-tertiary);cursor:pointer;transition:color var(--duration-fast) ease, background var(--duration-fast) ease;background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;display:none}.topbar-mobile-menu:hover{color:var(--color-text);background:var(--color-gray-50)}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideUpFadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes slideDownFadeOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(6px)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes cardIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes dropdownIn{0%{opacity:0;transform:translateY(-4px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes pageIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media (width<=768px){#root{padding:var(--space-1)}.app-frame{border-radius:var(--radius-md)}.topbar-mobile-menu{display:flex}.app-header{padding:0 var(--space-3);gap:var(--space-2)}.topbar-client-name{font-size:var(--text-sm)}}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.app-loading-gate{padding:var(--space-8);flex:1;justify-content:center;align-items:center;display:flex}.studio-spinner-dot{background:var(--color-text-tertiary);border-radius:50%;width:6px;height:6px;animation:1.4s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:.25;transform:scale(.85)}50%{opacity:.7;transform:scale(1)}}@media (width>=1920px){#root{padding:var(--space-3)}.app-header{height:54px;padding:0 var(--space-6)}.app-content{--app-main-pad-x:var(--space-6);--app-main-pad-t:var(--space-4);--app-main-pad-b:var(--space-4)}.topbar-page-title{font-size:var(--text-base)}.topbar-client-name{font-size:var(--text-lg)}.topbar-back,.topbar-new{width:36px;height:36px}.topbar-ref-btn{height:36px;font-size:var(--text-sm)}}@media (width>=2560px){#root{padding:var(--space-4)}.app-frame{border-radius:var(--radius-xl)}.app-header{height:60px;padding:0 var(--space-8);gap:var(--space-4)}.app-content{--app-main-pad-x:var(--space-8);--app-main-pad-t:var(--space-5);--app-main-pad-b:var(--space-5)}.topbar-page-title{font-size:var(--text-md)}.topbar-back,.topbar-new{width:40px;height:40px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.btn{justify-content:center;align-items:center;gap:var(--space-2);font-family:var(--font-sans);font-weight:var(--weight-medium);font-size:var(--text-sm);letter-spacing:var(--tracking-tight);border-radius:var(--radius-full);height:36px;padding:0 var(--space-5);border:1px solid var(--color-gray-200);background:var(--color-surface);color:var(--color-text-secondary);cursor:pointer;box-shadow:0 1px 2px var(--clay-shadow-sm), inset 0 1px 0 var(--clay-inset);transition:background var(--duration-fast) ease, border-color var(--duration-fast) ease, color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;white-space:nowrap;line-height:1;text-decoration:none;display:inline-flex}.btn:hover{background:var(--color-gray-50);border-color:var(--color-gray-300);color:var(--color-text);box-shadow:0 1px 3px var(--clay-shadow-lg), inset 0 1px 0 var(--clay-inset)}.btn:active{background:var(--color-gray-100);box-shadow:0 1px 1px var(--clay-shadow-sm), inset 0 1px 0 var(--clay-inset)}.btn-primary{background:var(--color-primary);color:var(--color-bg);border-color:var(--color-primary);box-shadow:0 1px 3px var(--clay-shadow-lg), inset 0 1px 0 var(--clay-dark-inset)}.btn-primary:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover);color:var(--color-bg);box-shadow:0 2px 6px var(--clay-shadow-lg), inset 0 1px 0 var(--clay-dark-inset)}.btn-primary:active{box-shadow:0 1px 2px var(--clay-shadow-md), inset 0 1px 0 var(--clay-dark-inset)}.btn-dark{background:var(--color-primary);color:var(--color-bg);border-color:var(--color-primary);box-shadow:0 1px 3px var(--clay-shadow-lg), inset 0 1px 0 var(--clay-dark-inset)}.btn-dark:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover);color:var(--color-bg);box-shadow:0 2px 6px var(--clay-shadow-lg), inset 0 1px 0 var(--clay-dark-inset)}.btn-dark:active{box-shadow:0 1px 2px var(--clay-shadow-md), inset 0 1px 0 var(--clay-dark-inset)}.btn-ghost{color:var(--color-text-tertiary);background:0 0;border-color:#0000}.btn-ghost:hover{color:var(--color-text);background:var(--color-gray-50);border-color:#0000}.btn-danger{background:var(--color-danger);color:#fff;border-color:var(--color-danger)}.btn-danger:hover{opacity:.9;background:var(--color-danger);border-color:var(--color-danger);color:#fff}.btn-sm{height:30px;font-size:var(--text-xs);padding:0 var(--space-4)}.btn:disabled{opacity:.3;cursor:not-allowed;pointer-events:none}.chat-empty-state{text-align:center;padding:var(--space-12) var(--space-6);color:var(--color-text-tertiary)}.chat-empty-state h3{font-size:var(--text-lg);font-weight:var(--weight-medium);letter-spacing:var(--tracking-tight);color:var(--color-text-secondary);margin-bottom:var(--space-2)}.chat-empty-state p{font-size:var(--text-sm);max-width:360px;margin:0 auto var(--space-5);line-height:var(--leading-relaxed)}.not-found-code{font-size:var(--text-4xl);font-weight:var(--weight-medium);letter-spacing:var(--tracking-tight);color:var(--color-gray-200);line-height:var(--leading-none);margin-bottom:var(--space-4)}.studio-text-input{width:100%;font-family:var(--font-sans);font-size:var(--text-sm);border:1px solid var(--color-gray-200);border-radius:var(--radius-md);background:var(--color-bg);color:var(--color-text);transition:border-color var(--duration-fast) ease;box-sizing:border-box;outline:none;padding:10px 14px}.studio-text-input:focus{border-color:var(--color-gray-400)}.studio-text-input::placeholder{color:var(--color-text-tertiary)}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:var(--z-modal);animation:fadeIn var(--duration-slow) ease;background:#00000040;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-panel{background:var(--color-surface);border-radius:var(--radius-xl);width:90%;max-width:440px;padding:var(--space-8);border:1px solid var(--clay-border);box-shadow:0 4px 12px var(--clay-shadow-md), 0 16px 48px var(--clay-shadow-lg), inset 0 1px 0 var(--clay-inset);animation:scaleIn var(--duration-entrance) var(--ease-spring)}.modal-title{font-size:var(--text-xl);font-weight:var(--weight-medium);letter-spacing:var(--tracking-tight);color:var(--color-text);margin-bottom:var(--space-2)}.auth-gate{min-height:100vh;padding:var(--space-6);background:var(--color-bg);justify-content:center;align-items:center;display:flex}.auth-gate-card{border-radius:var(--radius-xl);border:1px solid var(--clay-border);background:var(--color-surface);width:min(420px,100%);box-shadow:0 8px 28px var(--clay-shadow-md), inset 0 1px 0 var(--clay-inset);padding:var(--space-6);gap:var(--space-3);flex-direction:column;align-items:flex-start;display:flex}.auth-gate-icon{border-radius:var(--radius-md);border:1px solid var(--color-gray-200);width:34px;height:34px;color:var(--color-text-tertiary);justify-content:center;align-items:center;display:inline-flex}.auth-gate-title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);margin:0}.auth-gate-sub{font-family:var(--font-sans);font-size:var(--text-sm);color:var(--color-text-tertiary);line-height:var(--leading-relaxed);margin:0}.auth-gate-form{gap:var(--space-2);flex-direction:column;width:100%;display:flex}.auth-gate-form .studio-text-input{font-family:var(--font-sans)}.auth-gate-form .btn{font-family:var(--font-display);font-weight:var(--weight-medium);letter-spacing:var(--tracking-tight)}.auth-gate-toggle{font-size:var(--text-sm);color:var(--color-text-tertiary);text-align:center;margin:0}.auth-gate-toggle-btn{color:var(--color-text);font-weight:var(--weight-medium);cursor:pointer;font-size:inherit;background:0 0;border:none;padding:0}.auth-gate-toggle-btn:hover{text-decoration:underline}.auth-gate-links{align-items:center;gap:var(--space-1);flex-direction:column;width:100%;display:flex}.auth-forgot-btn{font-size:var(--text-xs);color:var(--color-text-tertiary)}.auth-password-wrap{width:100%;position:relative}.auth-password-hint{font-size:var(--text-xs);color:var(--color-text-tertiary);margin-top:4px;display:block}.auth-reset-sent{align-items:center;gap:var(--space-3);padding:var(--space-6) 0;color:var(--color-text-secondary);text-align:center;font-size:var(--text-sm);flex-direction:column;display:flex}.auth-legal-links{font-size:var(--text-xs);color:var(--color-text-tertiary);text-align:center;line-height:var(--leading-relaxed);width:100%;margin:0}.auth-legal-links a{color:var(--color-text-secondary);text-underline-offset:2px;text-decoration:underline}.auth-legal-links a:hover{color:var(--color-text)}.legal-page{max-width:680px;padding:var(--space-8) var(--space-6) var(--space-12);font-family:var(--font-sans);color:var(--color-text);line-height:var(--leading-relaxed);margin:0 auto}.legal-page h1{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);margin:0 0 var(--space-1)}.legal-page h2{font-size:var(--text-md);font-weight:var(--weight-medium);margin:var(--space-6) 0 var(--space-2)}.legal-page p{font-size:var(--text-sm);color:var(--color-text-secondary);margin:0 0 var(--space-3)}.legal-page ul{margin:0 0 var(--space-3);padding-left:var(--space-5)}.legal-page li{font-size:var(--text-sm);color:var(--color-text-secondary);margin-bottom:var(--space-1)}.legal-page a{color:var(--color-text);text-underline-offset:2px;text-decoration:underline}.legal-updated{color:var(--color-text-tertiary)!important;font-size:var(--text-xs)!important}.legal-back{font-family:var(--font-sans);font-size:var(--text-sm);color:var(--color-text-tertiary);cursor:pointer;margin-bottom:var(--space-6);background:0 0;border:none;align-items:center;gap:6px;padding:0;display:inline-flex}.legal-back:hover{color:var(--color-text)}.onboarding-card{text-align:center;align-items:center!important}.onboarding-avatar-section{align-items:center;gap:var(--space-2);margin:var(--space-2) 0;flex-direction:column;display:flex}.onboarding-avatar-btn{border-radius:var(--radius-full);border:2px dashed var(--color-gray-300);background:var(--color-gray-50);cursor:pointer;width:80px;height:80px;transition:border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.onboarding-avatar-btn:hover{border-color:var(--color-gray-400);box-shadow:0 4px 16px var(--clay-shadow-md)}.onboarding-avatar-img{object-fit:cover;width:100%;height:100%}.onboarding-avatar-initial{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:var(--weight-semibold);color:var(--color-text-tertiary)}.onboarding-avatar-overlay{color:#fff;opacity:0;transition:opacity var(--duration-fast) ease;border-radius:var(--radius-full);background:#00000059;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.onboarding-avatar-btn:hover .onboarding-avatar-overlay{opacity:1}.onboarding-avatar-hint{font-size:var(--text-xs);color:var(--color-text-tertiary)}.onboarding-form{gap:var(--space-2);flex-direction:column;width:100%;display:flex}.onboarding-label{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-secondary);text-align:left}.onboarding-continue{justify-content:center;align-items:center;gap:var(--space-2);width:100%;display:flex}.onboarding-skip{font-size:var(--text-sm);color:var(--color-text-tertiary);cursor:pointer;transition:color var(--duration-fast) ease;background:0 0;border:none;padding:0}.onboarding-skip:hover{color:var(--color-text-secondary)}.onboarding-dots{margin-top:var(--space-2);align-items:center;gap:6px;display:flex}.onboarding-dot{border-radius:var(--radius-full);background:var(--color-gray-200);width:6px;height:6px;transition:background var(--duration-fast) ease, width var(--duration-fast) ease}.onboarding-dot--active{background:var(--color-text);border-radius:3px;width:18px}.settings-page{width:100%;max-width:720px;padding:var(--app-main-pad-t) var(--app-main-pad-x) var(--space-12);box-sizing:border-box;-webkit-overflow-scrolling:touch;flex:1;margin:0 auto;overflow-y:auto}.profile-card{align-items:center;gap:var(--space-5);display:flex}.profile-avatar-wrap{flex-shrink:0}.profile-avatar-btn{border-radius:var(--radius-full);border:2px solid var(--color-gray-200);background:var(--color-gray-50);cursor:pointer;width:64px;height:64px;transition:border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.profile-avatar-btn:hover{border-color:var(--color-gray-400);box-shadow:0 4px 16px var(--clay-shadow-md)}.profile-avatar-img{object-fit:cover;width:100%;height:100%}.profile-avatar-initial{font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--weight-semibold);color:var(--color-text-tertiary)}.profile-avatar-overlay{color:#fff;opacity:0;transition:opacity var(--duration-fast) ease;border-radius:var(--radius-full);background:#00000059;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.profile-avatar-btn:hover .profile-avatar-overlay{opacity:1}.profile-details{flex-direction:column;gap:2px;min-width:0;display:flex}.profile-display-name{font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--weight-medium);letter-spacing:var(--tracking-tight);color:var(--color-text)}.profile-email{font-size:var(--text-sm);color:var(--color-text-secondary)}.profile-meta{font-size:var(--text-xs);color:var(--color-text-tertiary);margin-top:2px}.profile-name-row,.profile-name-edit{align-items:center;gap:var(--space-2);display:flex}.profile-name-input{width:200px;font-size:var(--text-sm)!important;padding:4px 10px!important}.btn-icon-xs{color:var(--color-text-tertiary);cursor:pointer;border-radius:var(--radius-sm);transition:color var(--duration-fast) ease;background:0 0;border:none;justify-content:center;align-items:center;padding:2px;display:inline-flex}.btn-icon-xs:hover{color:var(--color-text)}.settings-sections{gap:var(--space-8);flex-direction:column;display:flex}.settings-section{flex-direction:column;display:flex}.settings-label{font-size:var(--text-xs);font-weight:var(--weight-medium);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-tertiary)}.settings-row{justify-content:space-between;align-items:center;gap:var(--space-4);display:flex}@media (width<=768px){.settings-page{padding:var(--app-main-pad-t) var(--app-main-pad-x) var(--app-main-pad-b)}.settings-row{flex-direction:column;align-items:stretch}}.settings-health-list{margin-top:var(--space-3);gap:var(--space-2);flex-direction:column;display:flex}.settings-health-item{align-items:flex-start;gap:var(--space-2);padding:var(--space-2) 0;border-top:1px solid var(--color-border-light);display:flex}.settings-health-dot{border-radius:var(--radius-full);flex-shrink:0;width:8px;height:8px;margin-top:6px}.settings-health-ok{background:var(--color-success)}.settings-health-bad{background:var(--color-danger)}.modal-desc{font-size:var(--text-sm);color:var(--color-text-secondary);line-height:var(--leading-relaxed);margin-bottom:var(--space-6)}.modal-actions{gap:var(--space-2);justify-content:flex-end;display:flex}.card{padding:var(--space-6);border-radius:var(--radius-xl);border:1px solid var(--clay-border);background:var(--color-surface);box-shadow:var(--shadow-card)}.text-sm{font-size:var(--text-sm)}.text-tertiary{color:var(--color-text-tertiary)}.font-medium{font-weight:var(--weight-medium)}.flex{display:flex}.items-center{align-items:center}.gap-3{gap:var(--space-3)}.mt-2{margin-top:var(--space-2)}.mt-4{margin-top:var(--space-4)}.error-boundary-fallback{text-align:center;min-height:50vh;padding:var(--space-12) var(--space-6);color:var(--color-text-tertiary);justify-content:center;align-items:center;gap:var(--space-3);flex-direction:column;display:flex}.error-boundary-fallback h3{font-size:var(--text-lg);font-weight:var(--weight-medium);letter-spacing:var(--tracking-tight);color:var(--color-text-secondary)}.error-boundary-fallback p{font-size:var(--text-sm);max-width:360px;line-height:var(--leading-relaxed)}.error-boundary-actions{align-items:center;gap:var(--space-2);display:flex}.page-loading{min-height:50vh;color:var(--color-text-tertiary);font-size:var(--text-sm);justify-content:center;align-items:center;display:flex}[data-theme=dark] .modal-overlay{background:#00000080}[data-theme=dark] .btn-ghost{color:var(--color-text-secondary)}[data-theme=dark] .btn-ghost:hover{background:var(--color-gray-100)}[data-theme=dark] .btn-dark{background:var(--color-gray-200);color:var(--color-gray-900)}@media (width>=1920px){.settings-page{max-width:860px}.legal-page{max-width:780px}.modal-panel{max-width:500px;padding:var(--space-10)}}@media (width>=2560px){.settings-page{max-width:960px}.legal-page{max-width:860px}}.toast-container{bottom:var(--space-6);right:var(--space-6);z-index:var(--z-toast);gap:var(--space-2);pointer-events:none;flex-direction:column;display:flex;position:fixed}.toast{align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--color-text);color:var(--color-bg);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);font-size:var(--text-sm);font-weight:var(--weight-medium);letter-spacing:var(--tracking-tight);pointer-events:auto;animation:slideUpFadeIn var(--duration-entrance) var(--ease-spring);min-width:200px;max-width:360px;display:flex}.toast--exiting{animation:slideDownFadeOut var(--duration-slow) var(--ease-spring) forwards}.toast-success{background:var(--color-text)}.toast-error{background:var(--color-danger);color:#fff}.toast-info{background:var(--color-info);color:#fff}.toast-message{flex:1}.toast-close{color:color-mix(in srgb, var(--color-bg) 50%, transparent);cursor:pointer;border-radius:var(--radius-sm);transition:color var(--duration-fast) ease;background:0 0;border:none;align-items:center;padding:2px;display:flex}.toast-close:hover{color:var(--color-bg)}.toast-error .toast-close,.toast-info .toast-close{color:#ffffff80}.toast-error .toast-close:hover,.toast-info .toast-close:hover{color:#fff}@media (width<=768px){.toast-container{bottom:var(--space-4);right:var(--space-4);left:var(--space-4)}.toast{max-width:100%}}.sidebar{background:var(--color-bg);border-right:1px solid var(--color-border-light);flex-direction:column;flex-shrink:0;width:200px;height:100%;display:flex}.sidebar-top{height:48px;padding:0 var(--space-4);border-bottom:1px solid var(--color-border-light);flex-shrink:0;align-items:center;display:flex}.sidebar-logo-mark{background:var(--color-surface);border:1px solid var(--clay-border);border-radius:var(--radius-md);width:32px;height:32px;box-shadow:0 1px 3px var(--clay-shadow-md), inset 0 1px 0 var(--clay-inset);color:var(--color-text-tertiary);transition:color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;flex-shrink:0;justify-content:center;align-items:center;text-decoration:none;display:flex}.sidebar-logo-mark:hover{color:var(--color-text-secondary);box-shadow:0 2px 6px var(--clay-shadow-lg), inset 0 1px 0 var(--clay-inset)}.sidebar-close-btn{display:none}.sidebar-nav{padding:var(--space-2) var(--space-2);flex-direction:column;flex:1;gap:2px;display:flex;overflow:hidden auto}.sidebar-nav::-webkit-scrollbar{width:0}.sidebar-link{align-items:center;gap:var(--space-3);height:36px;padding:0 var(--space-3);border-radius:var(--radius-md);color:var(--color-text-tertiary);font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--weight-regular);letter-spacing:var(--tracking-tight);cursor:pointer;transition:background var(--duration-fast) ease, color var(--duration-fast) ease, border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;background:0 0;border:1px solid #0000;width:100%;text-decoration:none;display:flex}.sidebar-link:hover{background:var(--color-gray-50);border-color:var(--color-gray-200);color:var(--color-text);box-shadow:0 1px 3px var(--clay-shadow-md), inset 0 1px 0 var(--clay-inset)}.sidebar-link.active{background:var(--color-surface);border-color:var(--color-gray-200);color:var(--color-text);box-shadow:0 1px 2px var(--clay-shadow-md), inset 0 1px 0 var(--clay-inset)}.sidebar-divider{background:var(--color-border-light);height:1px;margin:var(--space-2) var(--space-3);flex-shrink:0}.sidebar-bottom{padding:var(--space-2);border-top:1px solid var(--color-border-light);flex-direction:column;gap:2px;display:flex}[data-theme=dark] .sidebar{border-right-color:var(--color-border-light)}[data-theme=dark] .sidebar-top{border-bottom-color:var(--color-border-light)}[data-theme=dark] .sidebar-bottom{border-top-color:var(--color-border-light)}[data-theme=dark] .sidebar-logo-mark{border-color:var(--color-gray-300)}[data-theme=dark] .sidebar-link:hover{background:var(--color-gray-50);border-color:var(--color-gray-200)}[data-theme=dark] .sidebar-link.active{background:var(--color-gray-100);border-color:var(--color-gray-200)}@media (width<=768px){.sidebar{z-index:var(--z-sidebar);transition:transform var(--duration-normal) var(--ease-spring);box-shadow:none;width:220px;position:fixed;top:0;bottom:0;left:0;transform:translate(-100%)}.sidebar-open{box-shadow:var(--shadow-card);transform:translate(0)}.sidebar-close-btn{border-radius:var(--radius-md);border:1px solid var(--color-gray-200);background:var(--color-surface);width:28px;height:28px;color:var(--color-text-tertiary);cursor:pointer;justify-content:center;align-items:center;margin-left:auto;display:flex}}@media (width>=1920px){.sidebar{width:224px}.sidebar-link{height:40px;font-size:var(--text-base)}.sidebar-logo-mark{width:36px;height:36px}}@media (width>=2560px){.sidebar{width:256px}.sidebar-link{height:44px}.sidebar-top{height:56px}}.sidebar-overlay{display:none}@media (width<=768px){.sidebar-overlay{z-index:calc(var(--z-sidebar) - 1);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:fadeIn var(--duration-normal) ease;background:#0000004d;display:block;position:fixed;inset:0}}