/* miku Studio v7 — rounded, grouped, animated, deeply configurable */

:root {
  --bg: #050507;
  --panel: #0a0a0f;
  --panel-2: #0d0d13;
  --ink: #f2f3f7;
  --dim: rgba(242, 243, 247, 0.55);
  --faint: rgba(242, 243, 247, 0.26);
  --line: rgba(242, 243, 247, 0.13);
  --line-soft: rgba(242, 243, 247, 0.08);
  --blue: #39c5bb;
  --violet: #69e6dc;
  --deep: #0c4f52;
  --green: #73d6a2;
  --red: #e96d9f;
  --amber: #ffcf7d;
  --display: 'Space Grotesk', system-ui, sans-serif;
  --font: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --r-lg: 16px; --r-md: 12px; --r-sm: 9px;
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --liquid: cubic-bezier(0.22, 1, 0.36, 1);
  --rail: 72px; --side: 252px;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  min-height: 100vh;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }
::selection { background: var(--violet); color: var(--bg); }
:focus-visible { outline: 1px solid var(--violet); outline-offset: 2px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #1d1c26; border: 2px solid var(--bg); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--deep); }

.hidden { display: none !important; }
.wrap { width: min(1180px, calc(100% - 48px)); margin: auto; position: relative; z-index: 2; }
.section-label { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--faint); }

/* ambient */
.grain {
  position: fixed; inset: -6%; z-index: 60; pointer-events: none;
  background-image: var(--noise); opacity: 0.05;
  animation: grain-shift 1.4s steps(4) infinite; will-change: transform;
}
@keyframes grain-shift {
  0% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(-1.5%, 2%, 0); }
  50% { transform: translate3d(2%, -1.5%, 0); }
  75% { transform: translate3d(-2%, -2%, 0); }
  100% { transform: translate3d(1.5%, 1.5%, 0); }
}
.gridbg {
  position: fixed; inset: -32px; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(242, 243, 247, 0.12) 1px, transparent 1.6px);
  background-size: 32px 32px; animation: grid-drift 40s linear infinite; will-change: transform;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 20%, transparent 75%);
}
@keyframes grid-drift { to { transform: translate3d(32px, 32px, 0); } }
.orb { position: fixed; z-index: 0; pointer-events: none; border-radius: 50%; will-change: transform; }
.orb.one { width: 55vw; height: 55vw; left: -18vw; top: -22vw; background: radial-gradient(circle, rgba(57,197,187,0.13) 0%, rgba(57,197,187,0.07) 30%, transparent 64%); animation: drift-a 46s ease-in-out infinite alternate; }
.orb.two { width: 60vw; height: 60vw; right: -22vw; top: 12vh; background: radial-gradient(circle, rgba(105,230,220,0.10) 0%, transparent 64%); animation: drift-b 58s ease-in-out infinite alternate; }
.orb.three { width: 48vw; height: 48vw; left: 22vw; bottom: -30vh; background: radial-gradient(circle, rgba(12,79,82,0.35) 0%, transparent 66%); animation: drift-c 52s ease-in-out infinite alternate; }
@keyframes drift-a { to { transform: translate(14vw, 12vh) scale(1.15); } }
@keyframes drift-b { to { transform: translate(-12vw, -10vh) scale(1.2); } }
@keyframes drift-c { to { transform: translate(-10vw, -8vh) scale(1.1); } }

/* cursor */
.cur-dot, .cur-ring { position: fixed; top: 0; left: 0; z-index: 120; pointer-events: none; border-radius: 50%; opacity: 0; will-change: transform; }
body.ready .cur-dot, body.ready .cur-ring { opacity: 1; }
.cur-dot { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; background: #fff; }
.cur-ring { width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1px solid rgba(255,255,255,0.4); transition: width .22s ease, height .22s ease, margin .22s ease, border-color .22s ease, opacity .2s ease; }
.cur-ring.big { width: 54px; height: 54px; margin: -27px 0 0 -27px; border-color: rgba(105,230,220,0.9); }
.cur-ring.hide { opacity: 0; }
html.fancy-cursor, html.fancy-cursor body, html.fancy-cursor body *, html.fancy-cursor body *::before, html.fancy-cursor body *::after { cursor: none !important; }
@media (pointer: coarse) { .cur-dot, .cur-ring { display: none; } }

/* boot */
#boot { position: fixed; inset: 0; z-index: 200; background: var(--bg); display: flex; align-items: center; justify-content: center; transition: transform 0.7s cubic-bezier(0.76,0,0.24,1); }
#boot.done { transform: translateY(-101%); }
.boot-inner { width: min(520px, 84vw); }
.boot-logo { font: 800 26px var(--font); letter-spacing: -0.02em; margin-bottom: 26px; }
.boot-logo span { color: var(--violet); animation: blink 1s steps(2,start) infinite; }
@keyframes blink { 50% { opacity: 0; } }
#bootLines { min-height: 104px; font-size: 12px; color: var(--dim); display: grid; gap: 8px; margin-bottom: 26px; letter-spacing: 0.04em; }
#bootLines b { color: var(--green); font-weight: 500; }
.boot-bar { height: 2px; background: rgba(255,255,255,0.12); margin-bottom: 14px; overflow: hidden; border-radius: 1px; }
#bootFill { height: 100%; width: 0%; background: linear-gradient(90deg, #fff, var(--violet)); transition: width 0.15s linear; }
.boot-pct { font-size: 11px; color: var(--faint); letter-spacing: 0.3em; }

/* toast */
#toast {
  position: fixed; bottom: 34px; left: 50%; z-index: 90;
  transform: translate(-50%, 20px);
  max-width: min(90vw, 560px); padding: 13px 26px;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink); background: rgba(10,10,15,0.88);
  border: 1px solid rgba(105,230,220,0.55); border-radius: var(--r-md);
  box-shadow: 0 0 30px rgba(105,230,220,0.15); backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none; transition: opacity .35s ease, transform .35s var(--liquid);
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.error { border-color: rgba(255,113,129,0.65); box-shadow: 0 0 30px rgba(255,113,129,0.18); }

/* buttons */
.btn-magnetic {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bg); background: var(--ink); border: 0; border-radius: var(--r-md);
  padding: 17px 30px; box-shadow: 0 0 0 1px rgba(242,243,247,0.4), 0 10px 40px rgba(0,0,0,0.6);
  transition: transform .18s ease-out, box-shadow .3s ease, background .2s ease;
}
.btn-magnetic:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(242,243,247,0.7), 0 16px 60px rgba(105,230,220,0.45); background: #fff; }
.btn-magnetic:active { transform: translateY(0) scale(0.97); }
.btn-magnetic .arrow { transition: transform .25s ease; color: var(--deep); }
.btn-magnetic:hover .arrow { transform: translateX(6px); }
.btn-ghost {
  display: inline-flex; align-items: center;
  font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--dim); padding: 17px 26px; border: 1px solid var(--line); border-radius: var(--r-md);
  transition: color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .35s var(--spring);
}
.btn-ghost:hover { color: var(--ink); border-color: rgba(105,230,220,0.7); box-shadow: 0 0 30px rgba(105,230,220,0.2); transform: translateY(-3px); }
.btn-ghost:active { transform: translateY(0) scale(0.97); }
.button {
  font-family: var(--font); font-weight: 800; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  border: 0; border-radius: var(--r-sm); background: var(--ink); color: var(--bg); padding: 12px 20px;
  transition: background .2s ease, box-shadow .25s ease, transform .18s ease;
}
.button:hover { background: #fff; box-shadow: 0 0 26px rgba(105,230,220,0.4); transform: translateY(-1px); }
.button:active { transform: scale(0.97); }
.button:disabled { opacity: 0.5; pointer-events: none; }
.button-small { padding: 9px 15px; font-size: 11px; }

/* ——— landing ——— */
.landing { position: relative; z-index: 1; }
.topbar { height: 88px; display: flex; align-items: center; justify-content: space-between; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 800; font-size: 16px; letter-spacing: 0.02em; }
.brand-mark { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 9px; font-size: 15px; font-weight: 800; color: var(--violet); border: 1px solid rgba(105,230,220,0.55); background: rgba(105,230,220,0.09); box-shadow: 0 0 18px rgba(105,230,220,0.25), inset 0 0 12px rgba(105,230,220,0.12); animation: mark-breathe 5s ease-in-out infinite; }
@keyframes mark-breathe { 50% { box-shadow: 0 0 30px rgba(105,230,220,0.45), inset 0 0 16px rgba(105,230,220,0.2); } }
.brand em { font-style: normal; color: var(--faint); font-size: 10px; letter-spacing: 0.28em; margin-left: 2px; }
.top-links { display: flex; align-items: center; gap: 30px; }
.top-links > a { color: var(--dim); transition: color .25s ease, text-shadow .25s ease; }
.top-links > a:hover { color: var(--ink); text-shadow: 0 0 18px rgba(105,230,220,0.8); }
.nav-cta { font-family: var(--font); font-weight: 700; font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; padding: 10px 18px; border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink); background: transparent; transition: border-color .25s ease, box-shadow .25s ease, background .25s ease; }
.nav-cta:hover { border-color: rgba(105,230,220,0.7); box-shadow: 0 0 24px rgba(105,230,220,0.25); background: rgba(105,230,220,0.08); }

.hero { position: relative; display: grid; grid-template-columns: 0.82fr 1.18fr; align-items: center; gap: 64px; padding: 96px 0 130px; min-height: 92svh; }
.kicker { position: absolute; top: 46px; left: 0; font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--dim); }
.hero h1 { font-family: var(--display); font-size: clamp(44px, 5.4vw, 78px); line-height: 0.94; letter-spacing: -0.04em; margin: 0 0 30px; }
.lede { color: var(--dim); font-size: 13.5px; line-height: 2; letter-spacing: 0.03em; margin-bottom: 40px; }
.hero-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.fineprint { margin-top: 26px; color: var(--faint); font-size: 11px; line-height: 1.9; letter-spacing: 0.04em; }
.fineprint b { color: var(--violet); font-weight: 700; }

.glint {
  background-image:
    linear-gradient(100deg, transparent 0%, transparent 45%, rgba(105,230,220,0.55) 47%, rgba(56,211,199,0.95) 49%, rgba(12,79,82,1) 50%, rgba(18,145,139,0.95) 51%, rgba(105,230,220,0.55) 53%, transparent 55%, transparent 100%),
    linear-gradient(#ffffff, #ffffff);
  background-size: 300% 100%, 100% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  animation: glint-sweep 5.5s linear infinite; will-change: background-position;
}
@keyframes glint-sweep { from { background-position: 100% 50%, 0 0; } to { background-position: 0% 50%, 0 0; } }

.hero-card {
  position: relative; height: 430px;
  border: 1px solid var(--line); border-radius: 22px;
  background: linear-gradient(150deg, #0c0c13, #08080c);
  box-shadow: 0 40px 90px rgba(0,0,0,0.65), 0 0 60px rgba(105,230,220,0.07);
  overflow: hidden; transform: perspective(1200px) rotateY(-4deg) rotateX(1.5deg);
  transition: transform .6s var(--liquid), box-shadow .6s ease;
}
.hero-card:hover { transform: perspective(1200px) rotateY(0) rotateX(0); box-shadow: 0 40px 90px rgba(0,0,0,0.7), 0 0 90px rgba(105,230,220,0.16); }
.window-bar { height: 42px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 7px; padding: 0 16px; color: var(--faint); font-size: 10px; letter-spacing: 0.14em; background: rgba(255,255,255,0.015); }
.window-bar i { width: 8px; height: 8px; border-radius: 50%; background: #262330; }
.win-cursor { margin-left: auto; color: var(--violet); animation: blink 1.1s steps(2,start) infinite; font-style: normal; }
.preview-layout { height: calc(100% - 42px); display: flex; }
.preview-rail { width: 52px; background: rgba(0,0,0,0.35); border-right: 1px solid var(--line-soft); padding: 14px 10px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.preview-rail b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: var(--violet); font-size: 13px; border: 1px solid rgba(105,230,220,0.5); background: rgba(105,230,220,0.1); }
.preview-rail i { width: 24px; height: 24px; border-radius: 8px; background: #14121b; border: 1px solid var(--line-soft); }
.preview-main { flex: 1; padding: 30px; min-width: 0; }
.preview-title span { display: block; font-family: var(--display); font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
.preview-title small { display: block; margin-top: 6px; color: var(--faint); font-size: 10px; letter-spacing: 0.1em; }
.preview-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 28px 0; }
.preview-stats div { padding: 14px; background: rgba(255,255,255,0.02); border: 1px solid var(--line-soft); border-radius: var(--r-sm); }
.preview-stats small, .preview-stats strong, .preview-stats em { display: block; }
.preview-stats small { color: var(--faint); font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.18em; }
.preview-stats strong { font-family: var(--display); font-size: 19px; margin: 8px 0 6px; }
.preview-stats em { font-size: 9px; color: var(--green); font-style: normal; }
.preview-chart { display: flex; align-items: flex-end; gap: 7px; height: 118px; }
.preview-chart span {
  flex: 1; height: var(--h, 40%);
  background: linear-gradient(180deg, rgba(105,230,220,0.85), rgba(57,197,187,0.25)); border-radius: 3px;
  animation: bar-breathe 3.4s ease-in-out infinite; animation-delay: calc(var(--i,0) * 0.12s); transform-origin: bottom;
}
.preview-chart span:nth-child(n) { --i: 1; }
@keyframes bar-breathe { 50% { transform: scaleY(0.86); filter: brightness(1.35); } }

.tag {
  position: absolute; z-index: 3; font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--dim); border: 1px solid var(--line); border-radius: 999px; padding: 8px 13px;
  background: rgba(10,10,15,0.6); backdrop-filter: blur(6px);
  opacity: 0; transform: scale(0.6); transition: opacity .6s ease, transform .6s var(--spring);
}
body.ready .tag { opacity: 1; transform: scale(1); }
body.ready .t1 { transition-delay: .8s; animation: float-a 7s ease-in-out 1.6s infinite; }
body.ready .t2 { transition-delay: .95s; animation: float-b 8s ease-in-out 1.8s infinite; }
body.ready .t3 { transition-delay: 1.1s; animation: float-b 7.5s ease-in-out 2s infinite; }
body.ready .t4 { transition-delay: 1.25s; animation: float-a 8.5s ease-in-out 2.2s infinite; }
.t1 { top: 12%; right: 2%; } .t2 { bottom: 24%; right: -1%; } .t3 { top: 46%; left: -2%; } .t4 { bottom: 9%; left: 8%; }
@keyframes float-a { 50% { translate: 0 -12px; } }
@keyframes float-b { 50% { translate: 0 10px; } }

.mq { position: relative; z-index: 2; overflow: hidden; white-space: nowrap; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); padding: 22px 0; background: rgba(10,10,15,0.4); }
.mq-track { display: inline-block; will-change: transform; animation: mq-scroll 28s linear infinite; }
@keyframes mq-scroll { to { transform: translate3d(-50%,0,0); } }
.mq span { font-family: var(--display); font-size: clamp(2rem, 5vw, 4.4rem); font-weight: 700; color: transparent; -webkit-text-stroke: 1.5px rgba(242,243,247,0.55); }
.mq i { font-style: normal; font-size: clamp(1rem, 2.6vw, 2.4rem); color: var(--violet); margin: 0 clamp(0.8rem,2vw,1.8rem); vertical-align: middle; }

.features { position: relative; z-index: 2; padding: 110px 0; }
.features h2 { font-family: var(--display); font-size: clamp(30px,3.6vw,48px); line-height: 1.08; letter-spacing: -0.03em; margin-bottom: 60px; }
.feature-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--r-lg); overflow: hidden; }
.feature-grid article { position: relative; background: var(--bg); padding: 38px 36px; transition: background .4s ease, transform .4s var(--liquid); }
.feature-grid article:hover { background: #0a0910; transform: translateY(-2px); }
.feature-grid article::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(105,230,220,0.07), transparent 55%); opacity: 0; transition: opacity .4s ease; pointer-events: none; }
.feature-grid article:hover::before { opacity: 1; }
.feature-grid article > span { color: var(--violet); font-size: 11px; letter-spacing: 0.2em; }
.feature-grid h3 { font-family: var(--display); font-size: 19px; margin: 30px 0 12px; }
.feature-grid p { color: var(--dim); line-height: 1.85; font-size: 12.5px; max-width: 430px; }
.cap-arrow { position: absolute; right: 30px; bottom: 30px; color: var(--faint); font-size: 18px; transition: transform .35s var(--liquid), color .3s ease; }
.feature-grid article:hover .cap-arrow { transform: rotate(-45deg) scale(1.15); color: var(--violet); }

.privacy { position: relative; z-index: 2; text-align: center; padding: 120px 0; }
.privacy h2 { font-family: var(--display); font-size: clamp(28px,4vw,52px); line-height: 1.1; letter-spacing: -0.03em; max-width: 800px; margin: 18px auto 44px; }
.privacy .section-label { color: var(--violet); }

.foot { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 26px; padding-bottom: 26px; border-top: 1px solid var(--line-soft); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); }

.reveal { opacity: 0; transform: translateY(36px) scale(0.98); transition: opacity .8s ease, transform .9s var(--spring); }
.reveal.in { opacity: 1; transform: none; }
.rise { opacity: 0; transform: translateY(22px) scale(0.985); transition: opacity .7s var(--liquid), transform .7s var(--liquid); transition-delay: calc(var(--d,0) * 50ms); }
.rise.seen { opacity: 1; transform: none; }

/* ——— app shell ——— */
.studio { position: relative; z-index: 1; min-height: 100vh; }

.rail {
  position: fixed; inset: 0 auto 0 0; width: var(--rail);
  border-right: 1px solid var(--line); background: rgba(6,6,9,0.92);
  display: flex; flex-direction: column; align-items: center; padding: 16px 0; z-index: 4; backdrop-filter: blur(8px);
}
.rail-brand { width: 40px; height: 40px; flex: none; display: grid; place-items: center; margin-bottom: 20px; font-size: 19px; font-weight: 800; border-radius: 11px; color: var(--violet); border: 1px solid rgba(105,230,220,0.5); background: rgba(105,230,220,0.09); box-shadow: 0 0 16px rgba(105,230,220,0.2); transition: box-shadow .3s ease; }
.rail-brand:hover { box-shadow: 0 0 28px rgba(105,230,220,0.45); }
.guild-rail { display: flex; flex-direction: column; align-items: center; gap: 10px; overflow-y: auto; width: 100%; padding: 2px 0; scrollbar-width: none; }
.guild-rail::-webkit-scrollbar { display: none; }
.guild-button, .rail-button {
  width: 40px; height: 40px; flex: none;
  border: 1px solid var(--line); border-radius: 12px; background: #100e16; color: var(--dim);
  display: grid; place-items: center; font-weight: 700; font-size: 12px;
  background-position: center; background-size: cover;
  transition: border-radius .2s ease, border-color .2s ease, box-shadow .25s ease, color .2s ease, transform .2s ease;
}
.guild-button:hover, .guild-button.active { border-color: rgba(105,230,220,0.7); border-radius: 9px; color: #fff; box-shadow: -12px 0 0 -10px var(--violet), 0 0 18px rgba(105,230,220,0.25); transform: translateY(-1px); }
.rail-button { margin-top: auto; font-size: 16px; color: var(--faint); }
.rail-button:hover { color: var(--red); border-color: rgba(255,113,129,0.5); box-shadow: 0 0 16px rgba(255,113,129,0.2); }

.sidebar {
  position: fixed; inset: 0 auto 0 var(--rail); width: var(--side);
  border-right: 1px solid var(--line); background: rgba(8,8,11,0.92); padding: 24px 18px; z-index: 3;
  display: flex; flex-direction: column; backdrop-filter: blur(8px);
}
.side-brand { font-weight: 800; font-size: 19px; letter-spacing: 0.01em; display: flex; gap: 8px; align-items: baseline; }
.side-brand small { color: var(--violet); font-size: 9px; text-transform: uppercase; letter-spacing: 0.26em; }
.guild-identity { margin: 24px 0 26px; padding: 13px 14px; background: rgba(255,255,255,0.02); border: 1px solid var(--line-soft); border-radius: var(--r-sm); }
.guild-identity strong, .guild-identity span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guild-identity strong { font-family: var(--display); font-size: 14px; }
.guild-identity span { color: var(--faint); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 5px; }
.sidebar nav > p { color: var(--faint); font-size: 9px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; margin: 0 10px 10px; }
.sidebar nav button {
  position: relative; width: 100%; height: 42px;
  background: transparent; color: var(--dim); border: 0; border-radius: 10px;
  display: flex; align-items: center; gap: 12px; padding: 0 12px;
  text-align: left; margin: 2px 0; font-size: 12.5px; letter-spacing: 0.06em;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.sidebar nav button span { font-size: 15px; color: var(--faint); transition: color .2s ease; }
.sidebar nav button:hover { background: rgba(105,230,220,0.06); color: var(--ink); }
.sidebar nav button:hover span { color: var(--violet); }
.sidebar nav button.active { background: rgba(105,230,220,0.1); color: var(--ink); box-shadow: inset 2px 0 var(--violet); }
.sidebar nav button.active span { color: var(--violet); text-shadow: 0 0 12px rgba(105,230,220,0.8); }
.sidebar nav button:active { transform: scale(0.97); }
.privacy-note { margin-top: auto; padding: 13px 14px; border: 1px dashed var(--line); border-radius: var(--r-sm); color: var(--faint); font-size: 10px; line-height: 1.8; letter-spacing: 0.04em; }
.privacy-note b { display: block; color: var(--violet); letter-spacing: 0.2em; text-transform: uppercase; font-size: 9px; margin-bottom: 4px; }

.workspace { margin-left: calc(var(--rail) + var(--side)); padding: 38px 46px 80px; max-width: 1560px; }
.workspace-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 40px; }
.workspace-header h1 { font-family: var(--display); font-size: clamp(26px,3vw,36px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; }
.user-chip { display: flex; align-items: center; gap: 10px; color: var(--dim); font-size: 11px; letter-spacing: 0.08em; border: 1px solid var(--line-soft); border-radius: 999px; padding: 8px 12px; background: rgba(255,255,255,0.02); }
.user-chip img { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); }

/* loading skeletons */
.loading { height: auto; min-height: 400px; display: grid; place-content: center; gap: 0; color: var(--faint); text-align: center; padding: 60px 20px; }
.skel { height: 18px; border-radius: 999px; background: linear-gradient(90deg, #121118 25%, #1c1a26 50%, #121118 75%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.skel.w40 { width: 56%; height: 12px; margin: 12px auto 34px; }
.skel-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 12px; }
.skel.h90 { height: 92px; border-radius: var(--r-lg); }
.skel.h70 { height: 72px; border-radius: var(--r-lg); margin-top: 4px; }
.skel-text { font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; margin-top: 24px; }
.skel-bar { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 12px 16px; background: rgba(255,255,255,0.02); }
.skel-bar span { width: 13px; height: 20px; background: var(--violet); border-radius: 2px; animation: blink 0.9s steps(2,start) infinite; box-shadow: 0 0 14px rgba(105,230,220,0.6); }
.skel-bar b { color: transparent; }
.skel-bar i { font-style: normal; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--faint); }
.load-msg { font-size: 12px; color: var(--faint); line-height: 2; letter-spacing: 0.08em; }
@keyframes shimmer { to { background-position: -200% 0; } }

.view { animation: view-in .45s var(--liquid); }
@keyframes view-in { from { opacity: 0; transform: translateY(14px); } }

.period-row, .view-intro, .command-tools { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.period-row > span:first-child, .view-intro p { font-size: 11px; color: var(--faint); letter-spacing: 0.14em; text-transform: uppercase; }

.status-pill { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(105,212,156,0.35); color: var(--green); background: rgba(105,212,156,0.06); border-radius: 999px; padding: 5px 12px; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; }
.status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; animation: ping 1.6s ease-in-out infinite; }
@keyframes ping { 50% { opacity: 0.35; } }
.status-pill.off { color: var(--red); border-color: rgba(255,113,129,0.4); background: rgba(255,113,129,0.06); }

.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 12px; }
.stat-card, .panel, .command-card, .feature-card {
  position: relative;
  background: linear-gradient(165deg, var(--panel), #07070a 70%);
  border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.stat-card:hover, .panel:hover, .command-card:hover { border-color: rgba(105,230,220,0.35); box-shadow: 0 0 0 1px rgba(105,230,220,0.08), 0 12px 44px rgba(0,0,0,0.5); }
.stat-card { padding: 20px 20px 18px; overflow: hidden; }
.stat-card::after { content: ""; position: absolute; top: 0; left: 0; width: 44%; height: 1px; background: linear-gradient(90deg, rgba(105,230,220,0.6), transparent); }
.stat-card p { color: var(--faint); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.2em; margin: 0; }
.stat-card strong { display: block; font-family: var(--display); font-size: clamp(26px,2.4vw,34px); font-weight: 700; letter-spacing: -0.02em; margin: 12px 0 5px; color: var(--ink); text-shadow: 0 0 30px rgba(105,230,220,0.25); font-variant-numeric: tabular-nums; }
.stat-card span { font-size: 10px; color: var(--faint); }

.dashboard-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 12px; margin-bottom: 12px; }
.panel { padding: 22px; margin-bottom: 12px; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 20px; }
.panel-head p { font-size: 9.5px; color: var(--violet); text-transform: uppercase; letter-spacing: 0.24em; margin: 0 0 6px; }
.panel-head h2 { font-family: var(--display); font-size: 16px; margin: 0; }
.panel-head > span { color: var(--faint); font-size: 10.5px; letter-spacing: 0.1em; font-variant-numeric: tabular-nums; }

.activity-chart { display: flex; align-items: stretch; gap: 8px; height: 210px; }
.chart-column { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 8px; min-width: 0; }
.chart-column .val { font-size: 9.5px; color: var(--dim); opacity: 0; transform: translateY(4px); transition: opacity .25s ease, transform .25s ease; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chart-column:hover .val { opacity: 1; transform: none; }
.chart-column i { width: 100%; max-width: 42px; background: linear-gradient(180deg, rgba(105,230,220,0.9), rgba(57,197,187,0.18)); border-radius: 6px 6px 3px 3px; box-shadow: 0 0 14px rgba(105,230,220,0.18); transform-origin: bottom; animation: bar-grow .7s var(--liquid) both; animation-delay: calc(var(--d) * 55ms); transition: filter .2s ease, box-shadow .2s ease; }
@keyframes bar-grow { from { transform: scaleY(0.15); } }
.chart-column:hover i { filter: brightness(1.35); box-shadow: 0 0 22px rgba(105,230,220,0.45); }
.chart-column small { font-size: 9px; color: var(--faint); letter-spacing: 0.2em; text-transform: uppercase; }

.pulse-list { display: flex; flex-direction: column; }
.pulse-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--line-soft); font-size: 12px; }
.pulse-item:last-child { border-bottom: 0; }
.pulse-item > span { color: var(--faint); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; }
.pulse-item > strong { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.pulse-item > strong.on { color: var(--green); text-shadow: 0 0 12px rgba(105,212,156,0.5); }
.pulse-item > strong.down { color: var(--red); text-shadow: 0 0 12px rgba(255,113,129,0.5); }

.settings-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field.span-2 { grid-column: 1 / -1; }
.field label { color: var(--faint); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.2em; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.field label em { font-style: normal; text-transform: lowercase; letter-spacing: 0.02em; font-size: 10px; color: var(--faint); }
.field input, .field select, .prompt-box input, .field textarea {
  background: rgba(0,0,0,0.35); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 11px 12px; font-size: 12.5px; letter-spacing: 0.03em;
  transition: border-color .2s ease, box-shadow .2s ease; width: 100%;
}
.field textarea { resize: vertical; line-height: 1.6; min-height: 74px; font-family: var(--font); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(242,243,247,0.24); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: rgba(105,230,220,0.65); box-shadow: 0 0 0 1px rgba(105,230,220,0.25), 0 0 20px rgba(105,230,220,0.12); }
.field select { appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a7bff' stroke-width='1.4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }
.field select option { background: var(--panel); color: var(--ink); }
.row-switch { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; background: rgba(255,255,255,0.02); border: 1px solid var(--line-soft); border-radius: var(--r-sm); color: var(--ink); font-size: 12.5px; cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.row-switch small { display: block; color: var(--faint); font-size: 10px; letter-spacing: 0.06em; margin-top: 4px; }
.row-switch:hover { border-color: rgba(105,230,220,0.35); }
.token-help { margin-top: 8px; font-size: 10px; color: var(--faint); }
.token-help summary { cursor: pointer; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--violet); list-style: none; }
.token-help summary::before { content: "▸ "; }
.token-help[open] summary::before { content: "▾ "; }
.token-help code { display: inline-block; font-family: var(--font); font-size: 10px; color: var(--violet); background: rgba(105,230,220,0.08); border: 1px solid rgba(105,230,220,0.18); border-radius: 6px; padding: 2px 6px; margin: 4px 4px 0 0; }
.field-note { font-size: 11px; color: var(--faint); line-height: 1.6; padding: 12px 16px; background: rgba(255,255,255,0.02); border-radius: var(--r-sm); border: 1px dashed var(--line-soft); }

/* feature cards */
.feature-panel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); grid-auto-flow: dense; align-items: start; gap: 12px; }
.feature-card { align-self: start; min-width: 0; overflow: hidden; background: linear-gradient(165deg, var(--panel), #07070a 70%); border: 1px solid var(--line-soft); border-radius: var(--r-lg); transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease; }
.feature-card:hover { border-color: rgba(105,230,220,0.28); box-shadow: 0 12px 44px rgba(0,0,0,0.45); }
.feature-card.live { border-color: rgba(105,212,156,0.22); }
.feature-card[open] { border-color: rgba(105,230,220,0.34); box-shadow: 0 18px 56px rgba(0,0,0,0.42); }
.feature-card.wide { grid-column: 1 / -1; }
.acc-head { width: 100%; min-height: 92px; display: flex; align-items: center; gap: 14px; padding: 17px 18px 17px 16px; background: transparent; border: 0; text-align: left; cursor: pointer; color: inherit; }
.fc-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.fc-copy h3 { font-family: var(--display); color: var(--ink); font-size: 16px; font-weight: 700; line-height: 1.25; letter-spacing: 0.005em; margin: 0; }
.fc-copy p { color: var(--faint); font-size: 11px; font-weight: 400; line-height: 1.5; margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.fc-copy p small { color: var(--violet); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.fc-status { flex: none; display: inline-flex; align-items: center; gap: 6px; color: var(--faint); background: rgba(255,255,255,0.025); border: 1px solid var(--line-soft); border-radius: 999px; padding: 5px 8px; font-size: 8.5px; line-height: 1; letter-spacing: 0.13em; text-transform: uppercase; }
.fc-status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .45; }
.fc-status.on { color: var(--green); border-color: rgba(105,212,156,0.22); background: rgba(105,212,156,0.055); }
.fc-status.on i { opacity: 1; box-shadow: 0 0 8px currentColor; }
.acc-head .chev { font-size: 16px; color: var(--faint); transition: transform .45s var(--spring); }
.feature-card.open .chev { transform: rotate(180deg); }
.toggle { position: relative; display: inline-block; flex: none; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle i { display: block; width: 40px; height: 20px; border: 1px solid var(--line); border-radius: 999px; background: rgba(0,0,0,0.4); transition: border-color .25s ease, background .25s ease, box-shadow .25s ease; }
.toggle i::after { content: ""; position: absolute; top: 4px; left: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--faint); transition: transform .35s var(--spring), background .25s ease, box-shadow .25s ease; }
.toggle:hover i { border-color: rgba(105,230,220,0.5); }
.toggle input:checked + i { border-color: rgba(105,230,220,0.8); background: rgba(105,230,220,0.14); box-shadow: 0 0 16px rgba(105,230,220,0.25); }
.toggle input:checked + i::after { transform: translateX(20px); background: #fff; box-shadow: 0 0 10px rgba(255,255,255,0.8); }
.toggle.mini i { width: 34px; height: 18px; }
.toggle.mini i::after { width: 10px; height: 10px; top: 3px; left: 3px; }
.toggle.mini input:checked + i::after { transform: translateX(16px); }
.acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--liquid); }
.feature-card.open .acc-body { grid-template-rows: 1fr; }
.acc-body > .cfg { overflow: hidden; }
.cfg { padding: 16px; border-top: 1px solid var(--line-soft); background: rgba(0,0,0,0.12); }
.fields-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-bottom: 14px; }
.feature-card.wide .fields-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cfg-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.dirty { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); animation: blink 1.1s steps(2,start) infinite; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.seg-btn { font-family: var(--font); font-size: 11px; letter-spacing: 0.06em; text-transform: lowercase; border: 1px solid var(--line); border-radius: 999px; background: rgba(0,0,0,0.3); color: var(--faint); padding: 8px 14px; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease; }
.seg-btn:hover { border-color: rgba(105,230,220,0.45); color: var(--ink); transform: translateY(-1px); }
.seg-btn.active { background: rgba(105,230,220,0.16); border-color: rgba(105,230,220,0.6); color: #fff; box-shadow: 0 0 18px rgba(105,230,220,0.2); }
.chip-box { display: flex; flex-wrap: wrap; gap: 7px; padding: 10px; border: 1px dashed var(--line); border-radius: var(--r-sm); background: rgba(0,0,0,0.2); max-height: 190px; overflow: auto; }
.role-chip, .channel-chip { font-family: var(--font); font-size: 11px; border: 1px solid var(--line); border-radius: 999px; background: #0d0c12; color: var(--dim); padding: 6px 12px; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .18s var(--spring); }
.role-chip:hover, .channel-chip:hover { border-color: rgba(105,230,220,0.5); color: var(--ink); transform: translateY(-1px); }
.role-chip.picked, .channel-chip.picked { background: rgba(105,230,220,0.16); border-color: rgba(105,230,220,0.7); color: #fff; box-shadow: 0 0 14px rgba(105,230,220,0.22); }

/* commands — one card per root */
.command-tools { margin-bottom: 22px; }
.prompt-box { flex: 1; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: rgba(0,0,0,0.35); padding: 0 12px; max-width: 620px; transition: border-color .2s ease, box-shadow .2s ease; }
.prompt-box b { color: var(--violet); font-weight: 700; }
.prompt-box input { border: 0; background: transparent; padding: 13px 0; width: 100%; border-radius: 0; }
.prompt-box input:focus { outline: none; box-shadow: none; }
.prompt-box kbd { flex: none; font-family: var(--font); font-size: 10px; color: var(--faint); border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px; }
.prompt-box:focus-within { border-color: rgba(105,230,220,0.65); box-shadow: 0 0 0 1px rgba(105,230,220,0.25), 0 0 24px rgba(105,230,220,0.12); }
.prompt-box:focus-within b { animation: blink 1.1s steps(2,start) infinite; }
#commandCount { color: var(--faint); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; font-variant-numeric: tabular-nums; flex: none; }

.command-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1px; gap: 12px; align-items: start; }
.command-card { position: relative; align-self: start; width: 100%; padding: 18px; border-radius: var(--r-lg); }
.command-card .cc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding-right: 34px; }
.command-card .cc-head h3 { font-family: var(--display); font-size: 17px; letter-spacing: 0.01em; color: var(--ink); }
.command-card .cc-head h3::before { content: "/"; color: var(--violet); }
.type-chip { margin-left: auto; font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); border: 1px solid var(--line-soft); border-radius: 999px; padding: 3px 8px; }
.copy-btn { position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; display: grid; place-items: center; background: transparent; color: var(--faint); border: 1px solid transparent; border-radius: 8px; font-size: 12px; opacity: 0; transition: opacity .2s ease, color .2s ease, border-color .2s ease; }
.command-card:hover .copy-btn { opacity: 1; }
.copy-btn:hover { color: var(--violet); border-color: rgba(105,230,220,0.5); }
.copy-btn.ok { color: var(--green); opacity: 1; }
.cc-desc { color: var(--dim); font-size: 11.5px; line-height: 1.7; margin: 0 0 12px; }
.cc-aliases { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin: -3px 0 12px; color: var(--faint); font-size: 9px; }
.cc-aliases span { margin-right: 3px; text-transform: uppercase; letter-spacing: .12em; }
.cc-aliases code { padding: 2px 6px; border: 1px solid var(--line-soft); border-radius: 999px; background: rgba(105,230,220,.045); color: var(--dim); font-size: 10px; }
.cc-aliases small { color: var(--violet); }
.subs { list-style: none; display: grid; gap: 6px; }
.subs li { display: flex; gap: 10px; align-items: baseline; padding: 8px 10px; border-radius: var(--r-sm); background: rgba(255,255,255,0.015); border: 1px solid transparent; transition: background .22s ease, border-color .22s ease, transform .22s ease; }
.subs li:hover { background: rgba(105,230,220,0.06); border-color: rgba(105,230,220,0.14); transform: translateX(3px); }
.subs li b { font-family: var(--font); font-size: 11px; font-weight: 700; color: var(--violet); white-space: nowrap; flex: none; }
.subs li span { font-size: 11px; color: var(--faint); line-height: 1.6; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.empty { display: block; break-inside: avoid; border: 1px dashed var(--line); border-radius: var(--r-lg); padding: 44px 20px; text-align: center; color: var(--faint); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; }

/* ——— details accordion fix + overflow guards ——— */
details.feature-card { display: block; }
details.feature-card > summary { list-style: none; cursor: pointer; }
details.feature-card > summary::-webkit-details-marker { display: none; }
details.feature-card[open] .acc-body { grid-template-rows: 1fr; }
details.feature-card[open] .chev { transform: rotate(180deg); }
.acc-body { min-height: 0; }
.cfg { min-height: 0; }
.feature-card summary.acc-head { user-select: none; -webkit-user-select: none; }
.feature-card summary.acc-head:focus-visible { outline: 1px solid var(--violet); outline-offset: 2px; border-radius: var(--r-sm); }

/* overflow containment — commands */
.command-card { overflow: hidden; min-width: 0; overflow-wrap: anywhere; }
.command-grid { min-width: 0; }
.command-card .cc-head { min-width: 0; overflow: hidden; }
.command-card .cc-head h3 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: break-all; }
.subs { overflow: hidden; min-width: 0; }
.subs li { min-width: 0; overflow: hidden; }
.subs li b, .subs li span { overflow-wrap: anywhere; word-break: break-word; min-width: 0; }
.subs li span { white-space: normal; }

/* category pills + docs-style command details */
.cat-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.cat-pill { font-family: var(--font); font-size: 11px; letter-spacing: 0.06em; text-transform: lowercase; border: 1px solid var(--line); border-radius: 999px; background: rgba(0,0,0,0.2); color: var(--faint); padding: 7px 14px; transition: all .2s ease; }
.cat-pill:hover { border-color: rgba(105,230,220,0.4); color: var(--ink); transform: translateY(-1px); }
.cat-pill.active { background: rgba(105,230,220,0.16); border-color: rgba(105,230,220,0.6); color: #fff; box-shadow: 0 0 14px rgba(105,230,220,0.18); }
.cat-pill span { margin-left: 6px; font-size: 10px; opacity: 0.6; }
.cat-badge { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); border: 1px solid var(--line-soft); border-radius: 999px; padding: 3px 8px; }
.sub-detail { border: 1px solid var(--line-soft); border-radius: var(--r-sm); background: rgba(255,255,255,0.015); overflow: hidden; transition: border-color .28s ease, background .28s ease, box-shadow .28s ease; }
.sub-detail.open { border-color: rgba(105,230,220,0.22); background: rgba(105,230,220,0.04); box-shadow: inset 0 1px rgba(105,230,220,0.04); }
.sub-summary { width: 100%; display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: baseline; padding: 10px 12px; cursor: pointer; border: 0; background: transparent; color: inherit; text-align: left; font-size: 11px; }
.sub-summary:focus-visible { outline: 1px solid var(--violet); outline-offset: -2px; }
.sub-summary b { color: var(--violet); font-weight: 700; overflow-wrap: anywhere; }
.sub-summary span { color: var(--faint); flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }
.sub-chev { flex: none; color: var(--violet); font-style: normal; font-size: 15px; line-height: 1; transform-origin: center; transition: transform .32s var(--spring), color .22s ease; }
.sub-detail.open .sub-chev { transform: rotate(90deg); color: var(--ink); }
.sub-reveal { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows .34s var(--liquid), opacity .24s ease, visibility 0s linear .34s; }
.sub-reveal > .sub-body { min-height: 0; overflow: hidden; padding-top: 0; padding-bottom: 0; transition: padding-bottom .34s var(--liquid); }
.sub-detail.open .sub-reveal { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition: grid-template-rows .34s var(--liquid), opacity .28s ease, visibility 0s; }
.sub-detail.open .sub-reveal > .sub-body { padding-bottom: 12px; }
.mini-usage { font-family: var(--font); font-size: 10px; color: var(--dim); background: rgba(0,0,0,0.25); border: 1px solid var(--line-soft); border-radius: 6px; padding: 2px 6px; overflow-wrap: anywhere; word-break: break-all; max-width: 100%; }
.sub-body { padding: 0 12px 12px; display: grid; gap: 12px; }
.sub-desc { font-size: 11px; color: var(--dim); line-height: 1.6; }
.opt-wrap { overflow-x: auto; border: 1px solid var(--line-soft); border-radius: var(--r-sm); background: rgba(0,0,0,0.2); }
.opt-table { width: 100%; border-collapse: collapse; font-size: 11px; min-width: 420px; }
.opt-table th { text-align: left; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); padding: 10px 12px; border-bottom: 1px solid var(--line-soft); background: rgba(255,255,255,0.02); }
.opt-table td { padding: 9px 12px; border-bottom: 1px solid var(--line-soft); color: var(--dim); vertical-align: top; overflow-wrap: anywhere; }
.opt-table tr:last-child td { border-bottom: 0; }
.opt-table code { font-family: var(--font); font-size: 11px; color: var(--ink); background: rgba(105,230,220,0.08); border: 1px solid rgba(105,230,220,0.14); border-radius: 6px; padding: 1px 6px; overflow-wrap: anywhere; }
.type-pill { font-size: 10px; letter-spacing: 0.06em; text-transform: lowercase; border: 1px solid var(--line); border-radius: 999px; padding: 2px 7px; color: var(--faint); background: rgba(0,0,0,0.2); }
.req.yes { color: var(--green); font-weight: 700; } .req { color: var(--faint); }
.choices { display: block; margin-top: 6px; font-size: 10px; color: var(--faint); }
.choices code { margin-right: 4px; }
.code-block { position: relative; display: flex; align-items: center; gap: 10px; background: #08080c; border: 1px solid var(--line-soft); border-radius: var(--r-sm); padding: 10px 12px; overflow: hidden; }
.code-block pre { flex: 1; min-width: 0; margin: 0; overflow-x: auto; }
.code-block code { font-family: var(--font); font-size: 11px; color: var(--violet); white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-all; }
.code-block.usage code { color: var(--dim); }
.command-snippet { display: grid; gap: 6px; min-width: 0; }
.snippet-label { color: var(--faint); font-size: 9px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.copy-btn.inline { position: static; opacity: 1; flex: none; }
.check-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }
.check-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; background: rgba(255,255,255,0.02); border: 1px solid var(--line-soft); border-radius: var(--r-sm); font-size: 11px; text-transform: capitalize; color: var(--dim); }
@media (max-width: 520px) { .check-grid { grid-template-columns: 1fr; } }
.list-editor { display: grid; gap: 8px; }
.list-row { display: grid; grid-template-columns: 160px 1fr auto; gap: 8px; align-items: center; background: rgba(255,255,255,0.02); border: 1px solid var(--line-soft); border-radius: var(--r-sm); padding: 10px; }
.list-row select, .list-row input, .list-row textarea { font-size: 12px; min-width: 0; }
.list-row textarea { resize: vertical; min-height: 48px; }
.vanity-row { grid-template-columns: 1fr 1fr auto auto; }
.reward-row { grid-template-columns: 80px 1fr auto; }
@media (max-width: 600px) { .list-row, .vanity-row, .reward-row { grid-template-columns: 1fr; } }
.invite-board { display: grid; gap: 0; }
.invite-leaderboard { display: grid; gap: 6px; }
.invite-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: rgba(255,255,255,0.02); border: 1px solid var(--line-soft); border-radius: var(--r-sm); overflow: hidden; }
.invite-row .rank { font-weight: 800; color: var(--violet); min-width: 32px; font-variant-numeric: tabular-nums; }
.invite-row .who { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invite-row .uses { color: var(--dim); font-size: 11px; white-space: nowrap; }
.check-mini { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--faint); cursor: pointer; white-space: nowrap; }
.button.ghost { background: transparent; border: 1px solid var(--line); color: var(--faint); }
.button.ghost:hover { border-color: rgba(255,113,129,0.5); color: var(--red); background: rgba(255,113,129,0.08); }

/* responsive */
@media (max-width: 1180px) { .settings-grid { grid-template-columns: repeat(2,1fr); } }

/* Recovery workspace */
.recovery-hero { display:flex; justify-content:space-between; align-items:flex-end; gap:28px; overflow:hidden; position:relative; }
.recovery-hero::after { content:'↺'; position:absolute; right:28px; top:-52px; font:800 180px/1 var(--mono); color:rgba(105,230,220,.055); pointer-events:none; }
.recovery-hero h2 { margin:7px 0 10px; font-size:clamp(28px,4vw,46px); letter-spacing:-.045em; }
.recovery-hero p:not(.section-label) { max-width:680px; color:var(--muted); margin:0; line-height:1.65; }
.recovery-badge { display:flex; align-items:center; gap:9px; border:1px solid var(--line); border-radius:999px; padding:9px 13px; font:700 10px var(--mono); letter-spacing:.09em; text-transform:uppercase; white-space:nowrap; position:relative; z-index:1; }
.recovery-badge i { width:8px; height:8px; border-radius:50%; background:var(--faint); box-shadow:0 0 14px currentColor; }
.recovery-badge.on { color:#65e59a; border-color:rgba(101,229,154,.25); background:rgba(101,229,154,.06); }
.recovery-badge.on i { background:#65e59a; }
.recovery-badge.warn { color:#f6c768; border-color:rgba(246,199,104,.25); background:rgba(246,199,104,.06); }
.recovery-badge.warn i { background:#f6c768; }
.recovery-stats { margin-top:14px; }
.recovery-setup-note { display:grid; grid-template-columns:minmax(170px,.45fr) minmax(280px,1fr); gap:7px 24px; margin-top:14px; padding:17px 20px; border:1px solid rgba(246,199,104,.23); border-radius:13px; background:rgba(246,199,104,.055); color:#e8d4a5; }
.recovery-setup-note b { font-size:12px; }
.recovery-setup-note span { color:#b7a98a; font-size:11px; line-height:1.55; }
.recovery-setup-note > code { grid-column:1/-1; padding:9px 11px; border:1px solid rgba(246,199,104,.16); border-radius:8px; background:rgba(0,0,0,.2); color:#f6c768; font:600 10px var(--mono); overflow:auto; }
.recovery-layout { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(280px,.75fr); gap:14px; margin-top:14px; align-items:start; }
.recovery-layout.equal { grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:14px; }
.recovery-config-panel { min-height:100%; }
.recovery-action { width:100%; margin-top:16px; min-height:45px; }
.danger-soft { background:rgba(255,99,111,.1)!important; color:#ff9da5!important; border-color:rgba(255,99,111,.26)!important; }
.danger-soft:hover { background:rgba(255,99,111,.16)!important; }
.recovery-link { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:42px; padding:0 12px; border:1px solid var(--line); background:rgba(255,255,255,.025); border-radius:var(--r-sm); color:var(--ink); font:500 11px var(--mono); text-decoration:none; overflow:hidden; }
.recovery-link span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.recovery-link b { color:var(--violet); }
.migration-panel { margin:14px 0; }
.migration-panel .settings-grid { margin-top:20px; }
.mini-search { width:min(180px,42vw); height:36px; border:1px solid var(--line); border-radius:9px; background:rgba(255,255,255,.025); color:var(--ink); padding:0 11px; font:500 11px var(--mono); outline:none; }
.mini-search:focus { border-color:rgba(105,230,220,.55); box-shadow:0 0 0 3px rgba(105,230,220,.08); }
.data-list { display:grid; gap:8px; max-height:430px; overflow:auto; padding-right:3px; }
.data-item { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:12px 13px; border:1px solid rgba(255,255,255,.075); background:rgba(255,255,255,.018); border-radius:11px; }
.data-item-main { min-width:0; }
.data-item-main b { display:block; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.data-item-main span { display:block; margin-top:4px; color:var(--faint); font:500 9.5px var(--mono); }
.data-item-actions { display:flex; align-items:center; gap:7px; flex:none; }
.tiny-button { border:1px solid var(--line); border-radius:8px; background:transparent; color:var(--muted); min-width:32px; height:30px; padding:0 9px; font:700 9px var(--mono); cursor:pointer; transition:.18s; }
.tiny-button:hover { color:var(--ink); border-color:rgba(105,230,220,.45); background:rgba(105,230,220,.07); }
.tiny-button.danger:hover { color:#ff9da5; border-color:rgba(255,99,111,.4); background:rgba(255,99,111,.07); }
.progress-line { width:112px; height:4px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; margin-top:7px; }
.progress-line i { display:block; height:100%; background:linear-gradient(90deg,var(--violet),#b97aff); border-radius:inherit; }
.audit-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; max-height:320px; overflow:auto; }
.audit-item { border:1px solid rgba(255,255,255,.07); border-radius:11px; padding:12px; background:rgba(255,255,255,.018); min-width:0; }
.audit-item b { display:block; color:var(--ink); font:700 10px var(--mono); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.audit-item span { display:block; color:var(--faint); font:500 9px var(--mono); margin-top:6px; }
.empty-data { padding:30px 12px; color:var(--faint); text-align:center; font:500 10px var(--mono); border:1px dashed var(--line); border-radius:11px; }
.field small.security-note { display:block; color:var(--faint); margin-top:7px; font:500 9px/1.5 var(--mono); }

@media(max-width:1000px){.recovery-layout,.recovery-layout.equal{grid-template-columns:1fr}.audit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.recovery-hero{align-items:flex-start;flex-direction:column}.recovery-setup-note{grid-template-columns:1fr}.audit-grid{grid-template-columns:1fr}.recovery-hero::after{display:none}}
@media (max-width: 1050px) {
  .hero { grid-template-columns: 1fr; gap: 46px; padding-top: 110px; min-height: auto; }
  .hero-card { transform: none; } .stats-grid { grid-template-columns: repeat(2,1fr); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .tag { display: none; } .kicker { position: static; margin-bottom: 18px; }
  .feature-panel-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  .feature-card.wide .fields-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .wrap { width: min(100% - 28px, 1180px); }
  .topbar { height: 72px; } .top-links > a { display: none; }
  .hero { padding: 60px 0 70px; } .hero h1 { font-size: clamp(38px, 11vw, 55px); }
  .hero-card { height: 340px; } .preview-main { padding: 20px; }
  .preview-stats div:nth-child(3) { display: none; } .preview-stats { grid-template-columns: repeat(2,1fr); }
  .preview-chart { height: 84px; } .feature-grid { grid-template-columns: 1fr; } .feature-grid article { padding: 28px 24px; }
  .rail { width: 56px; padding: 12px 0; }
  .rail-brand { width: 36px; height: 36px; font-size: 17px; }
  .guild-button, .rail-button { width: 36px; height: 36px; }
  .sidebar { left: 56px; right: 0; top: 0; bottom: auto; width: auto; flex-direction: row; align-items: center; gap: 14px; border-right: 0; border-bottom: 1px solid var(--line); padding: 10px 12px; }
  .side-brand, .privacy-note { display: none; }
  .guild-identity { margin: 0; padding: 6px 10px; max-width: 34vw; border: 0; background: transparent; }
  .guild-identity span { display: none; } .guild-identity strong { font-size: 12px; }
  #studioNav { display: flex; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  #studioNav::-webkit-scrollbar { display: none; } #studioNav > p { display: none; }
  .sidebar nav button { width: auto; height: 36px; margin: 0; padding: 0 12px; white-space: nowrap; flex: none; }
  .sidebar nav button.active { box-shadow: inset 0 -2px var(--violet); }
  .workspace { margin-left: 56px; padding: 74px 16px 60px; }
  .workspace-header { margin-bottom: 24px; } .user-chip span { display: none; }
  .stats-grid, .settings-grid { grid-template-columns: 1fr; }
  .feature-panel-grid { grid-template-columns: 1fr; }
  .command-grid { grid-template-columns: 1fr; }
  .period-row, .view-intro, .command-tools { flex-wrap: wrap; } .prompt-box { max-width: none; width: 100%; }
  .activity-chart { height: 160px; gap: 5px; } .stat-card strong { font-size: 26px; }
  .fields-grid { grid-template-columns: 1fr; }
  .feature-card.wide .fields-grid { grid-template-columns: 1fr; }
  .skel-row { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 430px) {
  .brand-text, .brand em { display: none; }
  .hero-actions .btn-ghost { padding: 14px 18px; }
  .foot { flex-direction: column; gap: 8px; text-align: center; }
  .acc-head { gap: 10px; padding-inline: 12px; }
  .fc-status { display: none; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .grain, .gridbg, .orb, .glint, .win-cursor, .loading span, .mq-track, .preview-chart span, .status-pill::before, .skel, .tag, .stat-card, .feature-card { animation: none !important; }
  .glint { background-image: none; -webkit-text-fill-color: var(--ink); color: var(--ink); }
  .reveal, .rise { opacity: 1; transform: none; } .view, .stat-card, .feature-card, .command-card { animation: none !important; }
  #boot.done { transition-duration: 0.01ms; }
  .sub-chev, .sub-reveal, .sub-reveal > .sub-body { transition-duration: 0.01ms !important; }
  .cur-dot, .cur-ring { display: none !important; }
  * { transition-duration: 0.01ms !important; }
}