:root{--font-sans:"Outfit", "Segoe UI", system-ui, -apple-system, sans-serif;--font-mono:"JetBrains Mono", "SF Mono", ui-monospace, Menlo, Monaco, monospace;--bg:oklch(98.5% .004 250);--bg-elevated:oklch(100% 0 0);--bg-soft:oklch(95.7% .006 250);--bg-mist:oklch(97.2% .01 265);--fg:oklch(18% .015 250);--fg-muted:oklch(52% .012 250);--fg-subtle:oklch(62% .01 250);--primary:oklch(51.1% .234 264.4);--primary-hover:oklch(48% .22 264);--primary-soft:oklch(94.5% .025 265);--primary-ink:oklch(42% .15 265);--primary-fg:oklch(98% 0 0);--border:oklch(90.4% .008 250);--border-strong:oklch(86% .012 250);--ring:oklch(51.1% .234 264.4);--success:oklch(52% .12 155);--success-soft:oklch(96% .03 155);--danger:oklch(55% .2 28);--danger-soft:oklch(96% .02 28);--danger-border:oklch(90% .04 28);--radius-sm:.5rem;--radius-md:.75rem;--radius-lg:1rem;--radius-xl:1.25rem;--shadow-xs:0 1px 2px #0f172a0a;--shadow-sm:0 8px 24px #0f172a0d;--shadow-md:0 18px 48px #0f172a14;--shadow-glow:0 12px 40px color-mix(in oklch, var(--primary) 18%, transparent);color:var(--fg);background:var(--bg);font-family:var(--font-sans);font-feature-settings:"ss01" on, "cv11" on;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;line-height:1.5}*,:before,:after{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{background:radial-gradient(1200px 520px at 8% -10%, color-mix(in oklch, var(--primary) 10%, transparent), transparent 58%), radial-gradient(900px 420px at 100% 0%, color-mix(in oklch, var(--primary) 7%, transparent), transparent 52%), radial-gradient(700px 360px at 70% 100%, color-mix(in oklch, var(--primary) 5%, transparent), transparent 55%), var(--bg);min-height:100vh;color:var(--fg)}button,input,a{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.6}.app-shell{width:min(1120px,100% - 2rem);margin:0 auto;padding:1.5rem 0 2.5rem;animation:.45s both rise-in}.topbar{border:1px solid color-mix(in oklch, var(--border) 88%, white);border-radius:var(--radius-xl);background:color-mix(in oklch, var(--bg-elevated) 92%, transparent);min-height:4.25rem;box-shadow:var(--shadow-sm);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);justify-content:space-between;align-items:center;gap:1rem;padding:.85rem 1.1rem;display:flex}.brand{align-items:center;gap:.85rem;min-width:0;display:flex}.brand-mark,.auth-mark{color:var(--primary-fg);background:linear-gradient(145deg, color-mix(in oklch, var(--primary) 92%, white), var(--primary));box-shadow:var(--shadow-glow);place-items:center;display:grid}.brand-mark{border-radius:.85rem;flex-shrink:0;width:2.5rem;height:2.5rem}.brand h1{letter-spacing:-.02em;margin:0;font-size:.98rem;font-weight:700}.brand p,.panel-header p{color:var(--fg-muted);margin:.15rem 0 0;font-size:.78rem}.content-grid{grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:1rem;margin-top:1rem;display:grid}.panel,.auth-panel{border:1px solid color-mix(in oklch, var(--border) 90%, white);background:color-mix(in oklch, var(--bg-elevated) 96%, transparent);box-shadow:var(--shadow-sm);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.panel{border-radius:var(--radius-xl);min-width:0;padding:1.15rem;animation:.5s both rise-in}.panel:nth-child(2){animation-delay:70ms}.panel-header{justify-content:space-between;align-items:flex-start;gap:.85rem;margin-bottom:1.1rem;display:flex}.panel-header h2,.auth-panel h1{letter-spacing:-.02em;margin:0;font-size:.98rem;font-weight:700}.icon-button,.danger-button{border:1px solid var(--border);border-radius:var(--radius-sm);min-width:2.25rem;height:2.25rem;color:var(--fg-muted);background:var(--bg-elevated);justify-content:center;align-items:center;gap:.35rem;padding:0 .65rem;transition:color .15s,background .15s,border-color .15s,transform .15s;display:inline-flex}.icon-button:hover{color:var(--fg);border-color:var(--border-strong);background:var(--bg-soft)}.icon-button:focus-visible,.danger-button:focus-visible,.primary-button:focus-visible,.segmented button:focus-visible,.studio-link:focus-visible,input:focus-visible{outline:2px solid color-mix(in oklch, var(--ring) 45%, transparent);outline-offset:2px}.danger-button:hover{color:var(--danger);border-color:var(--danger-border);background:var(--danger-soft)}.primary-button,.studio-link{border-radius:var(--radius-sm);width:100%;height:2.5rem;color:var(--primary-fg);background:var(--primary);letter-spacing:-.01em;box-shadow:0 8px 20px color-mix(in oklch, var(--primary) 22%, transparent);border:0;justify-content:center;align-items:center;gap:.4rem;padding:0 1rem;font-size:.875rem;font-weight:700;text-decoration:none;transition:background .15s,transform .15s,box-shadow .15s;display:inline-flex}.primary-button:hover,.studio-link:hover{background:var(--primary-hover);box-shadow:0 10px 24px color-mix(in oklch, var(--primary) 28%, transparent)}.primary-button:active,.studio-link:active,.icon-button:active,.danger-button:active{transform:translateY(1px)}.primary-button.compact{width:auto;min-width:5.5rem;height:2.5rem;padding:0 .95rem}.studio-link{width:100%;margin-bottom:.9rem}.studio-link.inline-link{width:auto;height:2.1rem;box-shadow:none;margin-bottom:0;padding:0 .8rem;font-size:.75rem}.auth-page{place-items:center;min-height:100vh;padding:1.5rem;display:grid;position:relative;overflow:hidden}.auth-page:before,.auth-page:after{content:"";filter:blur(8px);pointer-events:none;border-radius:999px;position:absolute}.auth-page:before{background:radial-gradient(circle, color-mix(in oklch, var(--primary) 18%, transparent), transparent 68%);width:28rem;height:28rem;top:-8rem;left:-6rem}.auth-page:after{background:radial-gradient(circle, color-mix(in oklch, var(--primary) 12%, transparent), transparent 70%);width:24rem;height:24rem;bottom:-8rem;right:-4rem}.auth-panel{z-index:1;border-radius:calc(var(--radius-xl) + .15rem);width:min(420px,100%);padding:1.6rem 1.45rem 1.45rem;animation:.45s both rise-in;position:relative}.auth-mark{border-radius:.95rem;width:2.85rem;height:2.85rem;margin-bottom:1rem}.auth-kicker{border:1px solid color-mix(in oklch, var(--primary) 18%, var(--border));color:var(--primary-ink);background:color-mix(in oklch, var(--primary-soft) 88%, white);letter-spacing:.08em;text-transform:uppercase;border-radius:999px;align-items:center;gap:.4rem;margin-bottom:.65rem;padding:.28rem .65rem;font-size:.68rem;font-weight:700;display:inline-flex}.auth-panel h1{margin-bottom:.35rem;font-size:1.35rem}.auth-lead{color:var(--fg-muted);margin:0 0 1.15rem;font-size:.86rem;line-height:1.55}.segmented{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-soft);grid-template-columns:1fr 1fr;gap:.25rem;margin-bottom:1.15rem;padding:.25rem;display:grid}.segmented button{border-radius:calc(var(--radius-sm) + .05rem);height:2.15rem;color:var(--fg-muted);background:0 0;border:0;font-size:.84rem;font-weight:650;transition:background .15s,color .15s,box-shadow .15s}.segmented .active{color:var(--fg);background:var(--bg-elevated);box-shadow:var(--shadow-xs)}label{color:var(--fg-muted);letter-spacing:.04em;text-transform:uppercase;gap:.45rem;margin-bottom:.9rem;font-size:.72rem;font-weight:700;display:grid}input{border:1px solid var(--border);border-radius:var(--radius-sm);width:100%;height:2.55rem;color:var(--fg);background:color-mix(in oklch, var(--bg-elevated) 90%, var(--bg-soft));padding:0 .85rem;transition:border-color .15s,box-shadow .15s,background .15s}input::placeholder{color:var(--fg-subtle)}input:hover{border-color:var(--border-strong)}input:focus{border-color:color-mix(in oklch, var(--primary) 55%, var(--border));background:var(--bg-elevated);box-shadow:0 0 0 3px color-mix(in oklch, var(--primary) 14%, transparent);outline:none}.token-form{grid-template-columns:minmax(0,1fr) auto;gap:.65rem;margin-bottom:.95rem;display:grid}.token-list{gap:.65rem;display:grid}.token-card{border:1px solid var(--border);border-radius:var(--radius-md);background:linear-gradient(180deg, color-mix(in oklch, var(--bg-elevated) 96%, var(--primary-soft)), var(--bg-elevated));gap:.75rem;padding:.9rem;transition:border-color .15s,box-shadow .15s,transform .15s;display:grid}.token-card:hover{border-color:color-mix(in oklch, var(--primary) 22%, var(--border));box-shadow:var(--shadow-xs)}.token-card-header{justify-content:space-between;align-items:center;gap:.75rem;display:flex}.token-card strong{letter-spacing:-.01em;font-size:.86rem;display:block}.token-card-header span{color:var(--fg-subtle);font-family:var(--font-mono);font-size:.7rem;display:block}.token-card code{overflow-wrap:anywhere;border:1px solid color-mix(in oklch, var(--border) 80%, transparent);border-radius:var(--radius-sm);color:var(--success);background:color-mix(in oklch, var(--success-soft) 70%, white);font-family:var(--font-mono);padding:.65rem .75rem;font-size:.75rem;line-height:1.5;display:block}.token-actions{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:.5rem;display:flex}.revoked{opacity:.58;filter:grayscale(.15)}.empty,.form-error,.toast,.hint{border-radius:var(--radius-md);font-size:.84rem}.empty{color:var(--fg-muted);background:linear-gradient(180deg, var(--bg-mist), var(--bg-soft));border:1px dashed var(--border);text-align:center;padding:1.1rem}.form-error,.toast{color:var(--danger);border:1px solid var(--danger-border);background:var(--danger-soft);padding:.8rem .9rem}.form-error{margin-bottom:.95rem}.toast{z-index:40;box-shadow:var(--shadow-md);animation:.25s both rise-in;position:fixed;bottom:1.25rem;right:1.25rem}.hint{border:1px solid var(--border);color:var(--fg-muted);background:var(--bg-mist);margin-bottom:.9rem;padding:.85rem .9rem;line-height:1.55}.compact-hint{margin-bottom:0;padding:.65rem .75rem;font-size:.78rem}.snippet{gap:.5rem;margin-top:.85rem;display:grid}.snippet span{color:var(--fg-muted);letter-spacing:.04em;text-transform:uppercase;font-size:.72rem;font-weight:700}pre{border:1px solid var(--border);border-radius:var(--radius-md);color:var(--fg);background:linear-gradient(180deg, color-mix(in oklch, var(--bg-soft) 70%, white), var(--bg-soft));font-family:var(--font-mono);margin:0;padding:.9rem;font-size:.75rem;line-height:1.65;overflow-x:auto}.usage-panel{align-self:start}@keyframes rise-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}@media (width<=860px){.app-shell{width:min(100% - 1.25rem,1120px);padding-top:1rem}.content-grid,.token-form{grid-template-columns:1fr}.primary-button.compact{width:100%}.token-actions{justify-content:stretch}.token-actions>*{flex:auto}}