/* NexaCore HQ — glass on NexaCore dark. Mobile first: top bar + bottom tabs; sidebar from 900px. */
:root {
  --bg: #070B14;
  --glass: rgba(255, 255, 255, .065);
  --glass-2: rgba(255, 255, 255, .04);
  --glass-3: rgba(255, 255, 255, .1);
  --line: rgba(255, 255, 255, .12);
  --line-2: rgba(255, 255, 255, .07);
  --text: #F5F8FC;
  --muted: rgba(226, 232, 240, .66);
  --faint: rgba(226, 232, 240, .42);
  --cyan: #22D3EE;
  --violet: #7C3AED;
  --violet-text: #B39CFA;
  --ok: #34D399;
  --warn: #FBBF24;
  --bad: #F87171;
  --r-xl: 28px;
  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 12px;
  --blur: blur(18px) saturate(150%);
  --side: 252px;
  --tabs-h: 64px;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.bg {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60vmax 50vmax at 8% -6%, rgba(34, 211, 238, .16), transparent 60%),
    radial-gradient(55vmax 45vmax at 100% 18%, rgba(124, 58, 237, .2), transparent 62%),
    radial-gradient(50vmax 40vmax at 30% 110%, rgba(34, 211, 238, .08), transparent 60%),
    var(--bg);
}
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 8px; }
img { max-width: 100%; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.01em; margin: 0; }
h1 { font-size: 30px; line-height: 1.1; }
h2 { font-size: 19px; line-height: 1.25; }
h3 { font-size: 17px; line-height: 1.3; font-weight: 500; }
h4 { margin: 0; font-size: 14px; font-weight: 600; }
p { margin: 0; }
code { font: 12.5px/1.4 var(--mono); background: var(--glass-3); padding: 1px 6px; border-radius: 6px; overflow-wrap: anywhere; }
pre { margin: 0; font: 13px/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- shell ---------- */
.top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: rgba(7, 11, 20, .72);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--line-2);
}
.top img { width: 30px; height: 30px; border-radius: 9px; }
.top .t { font-family: var(--serif); font-size: 18px; font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top .sync { font-size: 12px; color: var(--faint); }
main { padding: 18px 16px calc(var(--tabs-h) + 28px + env(safe-area-inset-bottom)); max-width: 1320px; margin: 0 auto; outline: none; }
.side { display: none; }
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--tabs-h) + env(safe-area-inset-bottom));
  padding: 6px 6px env(safe-area-inset-bottom);
  background: rgba(10, 14, 26, .78);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border-top: 1px solid var(--line);
}
.tabs a, .tabs button {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 0; background: none; color: var(--muted); font-size: 11px; font-weight: 500; text-decoration: none; cursor: pointer; border-radius: 14px;
}
.tabs .on { color: var(--text); }
.tabs .on svg { color: var(--cyan); }
.tabs .add { color: var(--text); }
.tabs .add .plus {
  width: 44px; height: 44px; margin-top: -2px; border-radius: 16px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--cyan), var(--violet)); box-shadow: 0 8px 24px -8px rgba(34, 211, 238, .6);
}
.tabs .add .plus svg { color: #071018; }
.tabs .add span:last-child { display: none; }
.ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center;
  background: var(--cyan); color: #04111a;
}
.tabs .badge { position: absolute; top: 4px; left: calc(50% + 6px); }

@media (min-width: 900px) {
  .top, .tabs { display: none; }
  main { margin-left: var(--side); padding: 32px 36px 48px; max-width: calc(1320px + var(--side)); }
  .side {
    display: flex; flex-direction: column; position: fixed; inset: 16px auto 16px 16px; width: calc(var(--side) - 32px); z-index: 20;
    padding: 20px 14px; border-radius: var(--r-xl);
    background: var(--glass); border: 1px solid var(--line);
    backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  }
  .side .logo { display: block; margin: 0 2px 14px; padding: 14px 16px; border-radius: 18px; background: #070B14; border: 1px solid var(--line-2); }
  .side .logo img { display: block; width: 100%; max-width: 176px; height: auto; }
  .side .hq { font-size: 11px; font-weight: 600; letter-spacing: .18em; color: var(--faint); padding: 0 12px 10px; }
  .side nav { display: flex; flex-direction: column; gap: 2px; }
  .side nav a {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; color: var(--muted); font-weight: 500; text-decoration: none;
  }
  .side nav a:hover { background: var(--glass-2); color: var(--text); }
  .side nav a.on { background: var(--glass-3); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
  .side nav a.on .ico { color: var(--cyan); }
  .side nav a .badge { margin-left: auto; }
  .side .foot { margin-top: auto; padding: 14px 12px 2px; border-top: 1px solid var(--line-2); font-size: 12px; color: var(--faint); display: grid; gap: 4px; }
  .side .foot a { color: var(--muted); }
}

/* ---------- page scaffolding ---------- */
.ph { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin-bottom: 18px; }
.ph .eyebrow { margin-bottom: 6px; }
.ph p { color: var(--muted); margin-top: 6px; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 500;
  background: var(--glass); border: 1px solid var(--line); color: var(--text); text-decoration: none;
}
a.chip:hover, button.chip:hover { text-decoration: none; background: var(--glass-3); }
button.chip { cursor: pointer; }
.chip b { font-weight: 700; }
.grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1100px) {
  .grid.two { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
  .grid.halves { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid .span { grid-column: 1 / -1; }
}
.stack { display: grid; gap: 16px; align-content: start; min-width: 0; }
.glass, .card {
  background: var(--glass); border: 1px solid var(--line); border-radius: var(--r-lg);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 24px 48px -32px rgba(0, 0, 0, .7);
  min-width: 0;
}
.card { padding: 18px; }
.card > h2 { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.card > h2 .count { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--muted); }
.card > .sub { color: var(--muted); font-size: 13px; margin-bottom: 14px; }
.card > h2 + :not(.sub) { margin-top: 12px; }
.section-t { display: flex; align-items: baseline; gap: 10px; margin: 26px 2px 12px; }
.section-t:first-child { margin-top: 0; }
.section-t .count { color: var(--muted); font-weight: 600; font-size: 14px; }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
@media (min-width: 700px) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpi { padding: 14px 16px; }
.kpi .l { font-size: 12px; color: var(--muted); font-weight: 500; }
.kpi .v { font-family: var(--serif); font-size: 26px; font-weight: 600; margin-top: 2px; }
.kpi .f { font-size: 12px; color: var(--faint); margin-top: 2px; }
.kpi.bad .v { color: var(--bad); }
.kpi.go .v { color: var(--cyan); }

/* ---------- pills, buttons, inputs ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap;
  background: var(--glass-3); color: var(--muted); border: 1px solid var(--line-2);
}
.pill.ok { color: var(--ok); background: rgba(52, 211, 153, .12); border-color: rgba(52, 211, 153, .25); }
.pill.warn { color: var(--warn); background: rgba(251, 191, 36, .12); border-color: rgba(251, 191, 36, .25); }
.pill.bad { color: var(--bad); background: rgba(248, 113, 113, .12); border-color: rgba(248, 113, 113, .28); }
.pill.go { color: var(--cyan); background: rgba(34, 211, 238, .12); border-color: rgba(34, 211, 238, .28); }
.pill.vio { color: var(--violet-text); background: rgba(124, 58, 237, .18); border-color: rgba(124, 58, 237, .35); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; background: var(--muted); }
.dot.snowball { background: #22D3EE; } .dot.void { background: #A78BFA; } .dot.products { background: #34D399; }
.dot.kdp { background: #FBBF24; } .dot.fiverr { background: #F472B6; } .dot.agency { background: #60A5FA; } .dot.website { background: #E2E8F0; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--glass-3); color: var(--text); font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s, transform .1s;
}
.btn:hover { background: rgba(255, 255, 255, .14); text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn .ico { width: 18px; height: 18px; }
.btn.primary { background: linear-gradient(135deg, var(--cyan), #38BDF8 45%, var(--violet)); border-color: transparent; color: #061019; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { color: var(--bad); border-color: rgba(248, 113, 113, .35); background: rgba(248, 113, 113, .08); }
.btn.ghost { background: transparent; }
.btn.sm { min-height: 34px; padding: 0 12px; font-size: 13px; border-radius: 11px; }
.btn.confirm { background: var(--warn); color: #1a1200; border-color: transparent; }
.btn[disabled], .btn.busy { opacity: .55; pointer-events: none; }
.btn.primary[disabled] { filter: grayscale(1); opacity: .4; }
.btn.busy::after { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.actions .grow { flex: 1 1 auto; }
@media (max-width: 520px) { .actions .btn { flex: 1 1 calc(50% - 4px); } .actions .btn.primary { flex-basis: 100%; } }
.iconbtn {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line-2);
  background: var(--glass-2); color: var(--muted); cursor: pointer;
}
.iconbtn:hover { color: var(--text); background: var(--glass-3); }
.iconbtn .ico { width: 18px; height: 18px; }
label.f { display: grid; gap: 6px; font-size: 13px; font-weight: 500; color: var(--muted); }
.in {
  width: 100%; min-width: 0; min-height: 46px; padding: 11px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(3, 6, 14, .45);
  color: var(--text); font-size: 16px; outline: none; transition: border-color .15s, box-shadow .15s;
}
.in:focus { border-color: rgba(34, 211, 238, .6); box-shadow: 0 0 0 3px rgba(34, 211, 238, .15); }
textarea.in { min-height: 110px; resize: vertical; line-height: 1.45; }
select.in { appearance: none; -webkit-appearance: none; padding-right: 38px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
select.in option { background: #0d1322; }
.form { display: grid; gap: 12px; }
.form .row2 { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.form .row2 > *, label.f { min-width: 0; }
input[type="date"].in { -webkit-appearance: none; appearance: none; display: block; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--muted); }
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--cyan); }

/* ---------- lists ---------- */
.list { list-style: none; margin: 0; padding: 0; display: grid; }
.list > li { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-top: 1px solid var(--line-2); min-width: 0; }
.list > li:first-child { border-top: 0; padding-top: 2px; }
.list .main { flex: 1; min-width: 0; }
.list .main > div:first-child { overflow-wrap: anywhere; }
.list .meta { font-size: 12.5px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; margin-top: 2px; }
.list .side-r { display: flex; gap: 6px; align-items: center; flex: none; }
.tick {
  width: 26px; height: 26px; flex: none; margin-top: -1px; border-radius: 50%; border: 1.5px solid var(--line); background: transparent; cursor: pointer;
  display: grid; place-items: center; color: transparent;
}
.tick:hover { border-color: var(--ok); color: var(--ok); }
.tick.done { background: var(--ok); border-color: var(--ok); color: #04130d; }
.tick .ico { width: 15px; height: 15px; stroke-width: 2.6; }
.empty { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: var(--r-md); background: var(--glass-2); border: 1px dashed var(--line); color: var(--muted); font-size: 14px; }
.empty .ico { color: var(--faint); }
.note { font-size: 13px; color: var(--muted); }
.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
details > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; font-weight: 600; padding: 6px 0; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; margin: 0 2px; }
details[open] > summary::before { transform: rotate(45deg); }
details.fold { margin-top: 10px; }
details.fold > summary { font-size: 15px; color: var(--text); font-family: var(--serif); font-weight: 600; }

/* ---------- post cards ---------- */
.posts { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1280px) { .posts.wide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.post .head { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.post .head h3 { margin-top: 4px; }
.post .when { flex: none; }
@media (max-width: 520px) { .post .head { flex-direction: column; gap: 8px; } }
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 12px; background: rgba(3, 6, 14, .45); border: 1px solid var(--line-2); margin: 14px 0 10px; }
.seg button { border: 0; background: none; color: var(--muted); font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 9px; cursor: pointer; }
.seg button[aria-selected="true"] { background: var(--glass-3); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.strip { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: thin; margin: 0 -2px; }
.strip .slide { position: relative; flex: none; scroll-snap-align: start; padding: 0; border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.03); cursor: zoom-in; }
.strip.r45 .slide { width: 132px; aspect-ratio: 4 / 5; }
.strip.r916 .slide { width: 104px; aspect-ratio: 9 / 16; }
@media (min-width: 900px) { .strip.r45 .slide { width: 150px; } .strip.r916 .slide { width: 118px; } }
.strip img { display: block; width: 100%; height: 100%; object-fit: cover; }
.strip .n { position: absolute; left: 6px; bottom: 6px; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 8px; background: rgba(7, 11, 20, .78); color: var(--text); }
.post [data-ratio-panel] { display: none; }
.post[data-ratio="45"] [data-ratio-panel="45"], .post[data-ratio="916"] [data-ratio-panel="916"] { display: block; }
.cap { margin-top: 10px; padding: 12px 14px; border-radius: var(--r-sm); background: rgba(3, 6, 14, .4); border: 1px solid var(--line-2); font: 13.5px/1.5 var(--sans); white-space: pre-wrap; max-height: 9.5em; overflow: auto; color: rgba(245, 248, 252, .86); }
.post.leaving { animation: leave .35s ease forwards; }
@keyframes leave { to { opacity: 0; transform: translateY(-6px) scale(.98); } }

/* ---------- PR cards ---------- */
.pr .title-row { display: flex; gap: 10px; justify-content: space-between; align-items: flex-start; }
.pr h3 { margin-top: 6px; font-size: 18px; }
.banner { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 12px 14px; border-radius: var(--r-sm); font-size: 14px; }
.banner.bad { background: rgba(248, 113, 113, .1); border: 1px solid rgba(248, 113, 113, .35); color: #FECACA; }
.banner.warn { background: rgba(251, 191, 36, .08); border: 1px solid rgba(251, 191, 36, .3); color: #FDE68A; }
.banner.go { background: rgba(34, 211, 238, .08); border: 1px solid rgba(34, 211, 238, .28); color: #CFFAFE; }
.banner .ico { width: 18px; height: 18px; margin-top: 1px; }
.md { font-size: 14px; color: rgba(245, 248, 252, .86); overflow-wrap: anywhere; }
.md > * + * { margin-top: 8px; }
.md h4, .md h5 { font-family: var(--sans); font-size: 14px; font-weight: 700; color: var(--text); margin-top: 14px; }
.md ul, .md ol { margin: 6px 0 0; padding-left: 20px; }
.md li + li { margin-top: 3px; }
.md table { border-collapse: collapse; font-size: 13px; display: block; overflow-x: auto; }
.md th, .md td { border: 1px solid var(--line-2); padding: 5px 8px; text-align: left; vertical-align: top; }
.md blockquote { margin: 0; padding-left: 12px; border-left: 3px solid var(--line); color: var(--muted); }
.md pre { padding: 10px 12px; border-radius: 10px; background: rgba(3, 6, 14, .5); }
.summary { position: relative; margin-top: 12px; }
.summary.clipped { max-height: 168px; overflow: hidden; }
.summary.clipped::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: linear-gradient(transparent, rgba(16, 21, 34, .95)); pointer-events: none; }
.more { border: 0; background: none; color: var(--cyan); font-weight: 600; font-size: 13px; padding: 6px 0; cursor: pointer; }
.files { list-style: none; margin: 6px 0 0; padding: 0; font-size: 13px; display: grid; gap: 4px; }
.files li { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.files code { background: none; padding: 0; color: rgba(245, 248, 252, .82); flex: 1; min-width: 0; }
.files .st { width: 14px; flex: none; font-weight: 700; font-family: var(--mono); }
.files .st.added { color: var(--ok); } .files .st.removed { color: var(--bad); } .files .st.modified, .files .st.renamed { color: var(--warn); }
.files .diff { flex: none; font-family: var(--mono); font-size: 12px; color: var(--faint); }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 8px; }
.thumbs a { display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qprev { margin-top: 12px; padding: 14px; border-radius: var(--r-md); background: rgba(3, 6, 14, .32); border: 1px solid var(--line-2); }
.qprev .seg { margin-top: 10px; }
.reply { margin-top: 12px; display: grid; gap: 8px; }
.skel { border-radius: var(--r-lg); height: 220px; background: linear-gradient(100deg, var(--glass-2) 20%, var(--glass) 40%, var(--glass-2) 60%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border: 1px solid var(--line-2); }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- businesses ---------- */
.btabs { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; margin: 0 -16px 10px; padding-left: 16px; padding-right: 16px; scrollbar-width: none; }
.btabs::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .btabs { margin: 0 0 10px; padding-left: 2px; padding-right: 2px; flex-wrap: wrap; } }
.btabs a { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: var(--glass-2); border: 1px solid var(--line-2); color: var(--muted); font-weight: 600; font-size: 14px; text-decoration: none; }
.btabs a.on { background: var(--glass-3); color: var(--text); border-color: var(--line); box-shadow: 0 6px 18px -10px rgba(34, 211, 238, .5); }
.prod { display: grid; gap: 6px; }
.prod .links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.price { font-family: var(--serif); font-weight: 600; font-size: 18px; }
.bars { display: grid; gap: 10px; }
.bar { display: grid; grid-template-columns: 74px 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.bar .track { height: 10px; border-radius: 6px; background: var(--glass-2); overflow: hidden; }
.bar .fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--cyan), var(--violet)); }
.bar b { font-weight: 600; font-variant-numeric: tabular-nums; }
.stages { display: flex; gap: 4px; margin: 8px 0 4px; }
.stages i { flex: 1; height: 8px; border-radius: 4px; background: var(--glass-3); }
.stages i.on { background: linear-gradient(90deg, var(--cyan), var(--violet)); }
.stagelab { display: flex; justify-content: space-between; font-size: 11px; color: var(--faint); }

/* ---------- files ---------- */
.tree { display: grid; gap: 2px; }
.tree details > summary { color: var(--text); font-size: 14px; font-weight: 500; padding: 8px 4px; border-radius: 10px; }
.tree details > summary:hover { background: var(--glass-2); }
.tree details > summary .ico { width: 18px; height: 18px; color: var(--violet-text); }
.tree details > summary .n { margin-left: auto; color: var(--faint); font-size: 12px; font-weight: 500; }
.tree .kids { padding-left: 14px; margin-left: 9px; border-left: 1px solid var(--line-2); }
.frow { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-radius: 10px; min-width: 0; }
.frow:hover { background: var(--glass-2); }
.frow > .ico { width: 18px; height: 18px; color: var(--muted); }
.frow .nm { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.frow .nm small { display: block; color: var(--faint); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.frow .sz { font-size: 12px; color: var(--faint); flex: none; font-variant-numeric: tabular-nums; }
.search { position: relative; margin-bottom: 14px; }
.search .ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--faint); width: 18px; height: 18px; }
.search .in { padding-left: 42px; }

/* ---------- agents ---------- */
.routine { display: grid; gap: 4px; }
.routine .top-r { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.routine .top-r h4 { font-size: 15px; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; font-size: 13px; margin-top: 6px; }
.kv dt { color: var(--faint); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; color: rgba(245, 248, 252, .86); }
.agents { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .agents { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .agents { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.agent { padding: 14px; border-radius: var(--r-md); background: var(--glass-2); border: 1px solid var(--line-2); display: grid; gap: 6px; align-content: start; }
.agent .nm { font-family: var(--mono); font-size: 13.5px; font-weight: 600; color: var(--cyan); }
.agent p { font-size: 13px; color: var(--muted); }
.tags { display: flex; flex-wrap: wrap; gap: 5px; }
.prompt { margin-top: 8px; padding: 12px 14px; border-radius: var(--r-sm); background: rgba(3, 6, 14, .5); border: 1px solid var(--line-2); max-height: 220px; overflow: auto; font-size: 12.5px; }

/* ---------- overlays ---------- */
#toast {
  position: fixed; left: 50%; bottom: calc(var(--tabs-h) + 16px + env(safe-area-inset-bottom)); z-index: 60;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  max-width: min(92vw, 520px); padding: 12px 16px; border-radius: 16px; font-size: 14px;
  background: rgba(16, 22, 38, .92); border: 1px solid var(--line); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .8);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}
#toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
#toast.bad { border-color: rgba(248, 113, 113, .5); }
#toast.ok { border-color: rgba(52, 211, 153, .45); }
#toast a { margin-left: 8px; font-weight: 600; }
@media (min-width: 900px) { #toast { bottom: 28px; left: calc(50% + var(--side) / 2); } }
.dlg {
  width: min(92vw, 480px); padding: 22px; border-radius: var(--r-xl); border: 1px solid var(--line); color: var(--text);
  background: rgba(14, 19, 34, .9); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8);
}
.dlg::backdrop { background: rgba(3, 5, 10, .6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.dlg h2 { margin-bottom: 8px; }
.dlg p { color: var(--muted); font-size: 14px; }
.dlg .form { margin-top: 14px; }
.dlg .actions { justify-content: flex-end; margin-top: 18px; }
.sheet { margin: auto auto 0; width: 100%; max-width: 560px; border-radius: var(--r-xl) var(--r-xl) 0 0; padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
.sheet nav { display: grid; gap: 6px; margin-top: 10px; }
.sheet nav a { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 16px; background: var(--glass-2); border: 1px solid var(--line-2); color: var(--text); font-weight: 600; text-decoration: none; }
.sheet nav a small { display: block; color: var(--muted); font-weight: 400; font-size: 13px; }
.sheet nav a .badge { margin-left: auto; }
.lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(3, 5, 10, .94); color: var(--text); }
.lightbox::backdrop { background: rgba(3, 5, 10, .9); }
.lightbox .lb-strip { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.lightbox .lb-strip::-webkit-scrollbar { display: none; }
.lightbox figure { flex: none; width: 100vw; height: 100%; margin: 0; display: grid; place-items: center; scroll-snap-align: center; padding: 64px 16px 40px; }
.lightbox figure img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 12px; }
.lightbox .lb-bar { position: fixed; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: calc(12px + env(safe-area-inset-top)) 16px 12px; }
.lightbox .lb-nav { position: fixed; top: 50%; transform: translateY(-50%); }
.lightbox .lb-nav.prev { left: 12px; } .lightbox .lb-nav.next { right: 12px; }
@media (hover: none) { .lightbox .lb-nav { display: none; } }
.boot { min-height: 60vh; display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--muted); }
.boot img { border-radius: 16px; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .5; } }
.fatal { max-width: 560px; margin: 10vh auto; }
.noscript { padding: 24px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }