:root{--chrome:#eceae6;--bar:#faf9f7;--fg:#1d1b1a;--muted:#77716c;--line:#d9d5cf;--card:#fff;--accent:#e8436b;--accent2:#ff8a5c;--ok:#1f9d6a;--warn:#d88a12}
.dark{--chrome:#17181c;--bar:#24262c;--fg:#ecebe8;--muted:#8f8c88;--line:#34363d;--card:#1d1f24}
*{box-sizing:border-box}
html,body,#root{height:100%;margin:0}
body{font-family:'Bricolage Grotesque',sans-serif;background:var(--chrome);color:var(--fg);overflow:hidden}
.mono{font-family:'JetBrains Mono',monospace}
.ibtn{width:32px;height:32px;border-radius:999px;display:grid;place-items:center;color:var(--fg);transition:.15s;flex-shrink:0;position:relative}
.ibtn:hover:not(:disabled){background:color-mix(in srgb,var(--fg) 10%,transparent)}
.ibtn:disabled{opacity:.3}
.omni{background:var(--chrome);border:1px solid transparent;border-radius:999px;transition:.15s}
.omni:focus-within{border-color:var(--accent);background:var(--card);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
.tab{background:transparent;border-radius:10px 10px 0 0;transition:background .15s;animation:tabin .2s ease-out;min-width:0}
.tab:hover{background:color-mix(in srgb,var(--bar) 60%,transparent)}
.tab.active{background:var(--bar)}
@keyframes tabin{from{transform:scaleX(.6);opacity:0}to{transform:none;opacity:1}}
.progress{height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2),var(--accent));background-size:200% 100%;animation:shimmer 1s linear infinite;transition:width .4s ease,opacity .4s}
@keyframes shimmer{to{background-position:-200% 0}}
.toast{animation:slidein .25s ease-out}
@keyframes slidein{from{transform:translateX(40px);opacity:0}}
.menu{background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.22);animation:pop .12s ease-out;z-index:100}
@keyframes pop{from{transform:scale(.96);opacity:0}}
.menu button{display:block;width:100%;text-align:left;padding:6px 14px;font-size:13px}
.menu button:hover{background:color-mix(in srgb,var(--accent) 14%,transparent)}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px}
.btn{padding:7px 14px;border-radius:8px;font-size:13px;font-weight:500;border:1px solid var(--line);background:var(--card);color:var(--fg);transition:.15s}
.btn:hover{border-color:var(--accent)}
.btn.pri{background:var(--accent);color:#fff;border-color:var(--accent)}
.inp{background:var(--chrome);border:1px solid var(--line);border-radius:8px;padding:7px 10px;color:var(--fg);font-size:13px;outline:none;width:100%}
.inp:focus{border-color:var(--accent)}
.page{background:radial-gradient(circle at 15% 0%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 40%),radial-gradient(circle at 90% 100%,color-mix(in srgb,var(--accent2) 10%,transparent),transparent 45%),var(--chrome);animation:fade .3s}
@keyframes fade{from{opacity:0;transform:translateY(6px)}}
.berry{animation:spin 1.2s cubic-bezier(.6,.1,.4,.9) infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.stag>*{animation:fade .4s both}
.stag>*:nth-child(2){animation-delay:.05s}.stag>*:nth-child(3){animation-delay:.1s}.stag>*:nth-child(4){animation-delay:.15s}.stag>*:nth-child(5){animation-delay:.2s}.stag>*:nth-child(6){animation-delay:.25s}
.scrollx::-webkit-scrollbar{height:0}
.bezel{border:10px solid #111;border-radius:36px;box-shadow:0 20px 50px rgba(0,0,0,.3)}