/* Action List | FULL Global Build (no modules) */
:root{
  --accent:#8CCAAF;
  --accent-rgb: 140,202,175;

  /* "A" = white alpha in dark mode, black alpha in light mode */
  --a02: rgba(255,255,255,.02);
  --a03: rgba(255,255,255,.03);
  --a04: rgba(255,255,255,.04);
  --a06: rgba(255,255,255,.06);
  --a07: rgba(255,255,255,.07);
  --a08: rgba(255,255,255,.08);
  --a09: rgba(255,255,255,.09);
  --a10: rgba(255,255,255,.10);
  --a12: rgba(255,255,255,.12);
  --a14: rgba(255,255,255,.14);
  --a16: rgba(255,255,255,.16);
  --a18: rgba(255,255,255,.18);
  --a25: rgba(255,255,255,.25);

  --bg0:#070909;
  --bg1:#0b0f0d;
  --panel: rgba(16,22,18,.74);
  --panel2: rgba(18,24,21,.86);
  --line: var(--a10);
  --line2: rgba(var(--accent-rgb),.22);
  --ink:#e7eae9;
  --muted: rgba(231,234,233,.72);
  --mute2: rgba(231,234,233,.52);
  --mint: var(--accent);
  --danger:#ff7b7b;
  --warn:#ffd28a;
  --ok:#9bf0c2;

  --body-bg:
    radial-gradient(1100px 700px at 15% 12%, rgba(var(--accent-rgb),.20), transparent 60%),
    radial-gradient(950px 650px at 78% 20%, rgba(var(--accent-rgb),.10), transparent 60%),
    linear-gradient(145deg, var(--bg0), var(--bg1) 50%, #050606);
  --route-glow-a: rgba(var(--accent-rgb),.18);
  --route-glow-b: rgba(255,255,255,.08);
  --route-shift: 160deg;

  --shadow: 0 18px 55px rgba(0,0,0,.55);
  --shadow2: 0 10px 26px rgba(0,0,0,.40);
  --neo-raise:
    14px 14px 34px rgba(0,0,0,.46),
    -10px -10px 28px rgba(255,255,255,.03),
    inset 1px 1px 0 rgba(255,255,255,.10),
    inset -1px -1px 0 rgba(0,0,0,.44);
  --neo-press:
    inset 10px 10px 20px rgba(0,0,0,.34),
    inset -8px -8px 16px rgba(255,255,255,.02),
    0 1px 0 rgba(255,255,255,.06);
  --neo-surface:
    linear-gradient(150deg, rgba(255,255,255,.07), rgba(255,255,255,.01) 42%, rgba(0,0,0,.14) 100%);
  --neo-edge: rgba(var(--accent-rgb),.22);
  --r14:14px;
  --r18:18px;
  --r22:22px;

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --display: "Sora", "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

html[data-theme="dhv"]{
  --bg0:#020304;
  --bg1:#050a0a;
  --panel: rgba(10,14,14,.78);
  --panel2: rgba(10,14,14,.90);
  --ink:#e7f6f4;
  --muted: rgba(231,246,244,.74);
  --mute2: rgba(231,246,244,.52);
  --accent:#22c7c7;
  --accent-rgb: 34,199,199;
  --mint: var(--accent);
  --line2: rgba(var(--accent-rgb),.22);
  --body-bg:
    radial-gradient(1000px 640px at 22% 12%, rgba(var(--accent-rgb),.18), transparent 62%),
    radial-gradient(900px 620px at 78% 20%, rgba(var(--accent-rgb),.08), transparent 64%),
    linear-gradient(145deg, var(--bg0), var(--bg1) 55%, #010101);
}
html[data-theme="dhusa"]{
  --bg0:#070b12;
  --bg1:#0a0f19;
  --panel: rgba(12,16,26,.78);
  --panel2: rgba(12,16,26,.92);
  --ink:#f4f7ff;
  --muted: rgba(244,247,255,.74);
  --mute2: rgba(244,247,255,.52);
  --accent:#2f77ff;
  --accent-rgb: 47,119,255;
  --mint: var(--accent);
  --line2: rgba(var(--accent-rgb),.22);
  --body-bg:
    radial-gradient(1000px 660px at 15% 12%, rgba(255,77,109,.10), transparent 60%),
    radial-gradient(1000px 660px at 80% 15%, rgba(var(--accent-rgb),.14), transparent 60%),
    linear-gradient(145deg, var(--bg0), var(--bg1) 55%, #05060b);
}
html[data-theme="retro"]{
  --bg0:#0a0620;
  --bg1:#12082b;
  --panel: rgba(18,10,40,.72);
  --panel2: rgba(18,10,40,.92);
  --ink:#f8f6ff;
  --muted: rgba(248,246,255,.74);
  --mute2: rgba(248,246,255,.52);
  --accent:#ff4dff;
  --accent-rgb: 255,77,255;
  --mint: var(--accent);
  --line2: rgba(var(--accent-rgb),.22);
  --body-bg:
    radial-gradient(980px 640px at 20% 12%, rgba(var(--accent-rgb),.14), transparent 62%),
    radial-gradient(980px 640px at 80% 18%, rgba(123,223,242,.12), transparent 62%),
    repeating-linear-gradient(90deg, var(--a03), var(--a03) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 14px),
    linear-gradient(145deg, var(--bg0), var(--bg1) 55%, #04020c);
}
html[data-theme="ice_rink"]{
  --bg0:#04121c;
  --bg1:#062030;
  --panel: rgba(6,22,30,.74);
  --panel2: rgba(6,22,30,.92);
  --ink:#ecf7ff;
  --muted: rgba(236,247,255,.72);
  --mute2: rgba(236,247,255,.50);
  --accent:#8bd0ff;
  --accent-rgb: 139,208,255;
  --mint: var(--accent);
  --line2: rgba(var(--accent-rgb),.22);
  --body-bg:
    radial-gradient(1100px 720px at 18% 14%, rgba(var(--accent-rgb),.16), transparent 62%),
    radial-gradient(1000px 700px at 78% 20%, rgba(45,240,179,.06), transparent 62%),
    linear-gradient(145deg, var(--bg0), var(--bg1) 55%, #02070b);
}

html[data-mode="dark"]{ color-scheme: dark; }
html[data-mode="light"]{
  color-scheme: light;

  /* Keep accent from theme; flip the neutrals to a light UI. */
  --a02: rgba(0,0,0,.02);
  --a03: rgba(0,0,0,.03);
  --a04: rgba(0,0,0,.04);
  --a06: rgba(0,0,0,.06);
  --a07: rgba(0,0,0,.07);
  --a08: rgba(0,0,0,.08);
  --a09: rgba(0,0,0,.09);
  --a10: rgba(0,0,0,.10);
  --a12: rgba(0,0,0,.12);
  --a14: rgba(0,0,0,.14);
  --a16: rgba(0,0,0,.16);
  --a18: rgba(0,0,0,.18);
  --a25: rgba(0,0,0,.25);

  --bg0:#f4fbf7;
  --bg1:#ecf6ef;
  --panel: rgba(255,255,255,.74);
  --panel2: rgba(255,255,255,.92);
  --line: var(--a10);
  --ink:#0f1613;
  --muted: rgba(15,22,19,.74);
  --mute2: rgba(15,22,19,.52);

  --body-bg:
    radial-gradient(1100px 700px at 15% 12%, rgba(var(--accent-rgb),.16), transparent 60%),
    radial-gradient(950px 650px at 78% 20%, rgba(var(--accent-rgb),.09), transparent 60%),
    linear-gradient(145deg, var(--bg0), var(--bg1) 55%, #ffffff);
  --route-glow-a: rgba(var(--accent-rgb),.13);
  --route-glow-b: rgba(255,255,255,.20);
  --route-shift: 160deg;

  --shadow: 0 18px 55px rgba(0,0,0,.12);
  --shadow2: 0 10px 26px rgba(0,0,0,.10);
  --neo-raise:
    13px 13px 30px rgba(175,190,181,.38),
    -10px -10px 24px rgba(255,255,255,.92),
    inset 1px 1px 0 rgba(255,255,255,.98),
    inset -1px -1px 0 rgba(171,191,179,.42);
  --neo-press:
    inset 8px 8px 15px rgba(183,197,190,.35),
    inset -7px -7px 12px rgba(255,255,255,.82);
  --neo-surface:
    linear-gradient(155deg, rgba(255,255,255,.96), rgba(250,253,251,.88) 52%, rgba(214,226,220,.74));
  --neo-edge: rgba(var(--accent-rgb),.28);
}
html[data-route-mood="build"]{
  --route-glow-a: rgba(var(--accent-rgb),.22);
  --route-glow-b: rgba(155,240,194,.15);
  --route-shift: 152deg;
}
html[data-route-mood="social"]{
  --route-glow-a: rgba(123,223,242,.20);
  --route-glow-b: rgba(255,210,138,.12);
  --route-shift: 196deg;
}
html[data-route-mood="ops"]{
  --route-glow-a: rgba(47,119,255,.22);
  --route-glow-b: rgba(139,208,255,.14);
  --route-shift: 132deg;
}
html[data-route-mood="ai"]{
  --route-glow-a: rgba(255,77,255,.16);
  --route-glow-b: rgba(var(--accent-rgb),.14);
  --route-shift: 236deg;
}
html[data-route-mood="system"]{
  --route-glow-a: rgba(255,210,138,.16);
  --route-glow-b: rgba(var(--accent-rgb),.12);
  --route-shift: 172deg;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background: var(--body-bg);
  overflow:hidden;
  overflow-x:hidden;
}

a{ color:inherit; }
.mono{ font-family:var(--mono); }
.display{ font-family:var(--display); }

/* Boot */
.boot{ min-height:100vh; display:grid; place-items:center; padding:24px; }
.boot-card{
  width:min(560px, 92vw);
  background:linear-gradient(180deg, var(--a07), var(--a03));
  border:1px solid var(--a10);
  border-radius: var(--r22);
  box-shadow: var(--shadow);
  padding:22px;
  backdrop-filter: blur(14px);
}
.spinner{
  width:34px; height:34px; border-radius:50%;
  border:3px solid rgba(231,234,233,.25);
  border-top-color: var(--mint);
  animation: spin 1s linear infinite;
  margin-bottom:12px;
}
@keyframes spin{ to{ transform: rotate(360deg);} }
.boot-title{ font-family: var(--display); font-weight:800; font-size:18px; letter-spacing:.2px; }
.boot-sub{ margin-top:6px; color:var(--muted); font-size:13px; line-height:1.35; }

/* Layout */
.app{
  height:100vh;
  height:100dvh;
  min-height:100vh;
  min-height:100dvh;
  display:grid;
  grid-template-columns: 320px 1fr;
}

.sidebar{
  padding:16px;
  border-right:1px solid var(--a08);
  background:
    radial-gradient(900px 520px at 30% 10%, rgba(var(--accent-rgb),.18), transparent 62%),
    radial-gradient(720px 480px at 90% 18%, rgba(var(--accent-rgb),.08), transparent 62%),
    linear-gradient(180deg, var(--a04), rgba(0,0,0,0));
  position:relative;
  overflow:hidden;
}

.sidebar::before{
  content:"";
  position:absolute;
  inset:auto -140px -140px auto;
  width:520px;
  height:520px;
  background-image: url("hiops-mark-dark.png");
  background-size: contain;
  background-repeat:no-repeat;
  opacity:.08;
  filter: blur(.2px) saturate(1.1);
  transform: rotate(-16deg);
  pointer-events:none;
}
.sidebar::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,0));
  pointer-events:none;
}
.sidebar > *{ position:relative; z-index:1; }

.sb-hero{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 12px;
  border:1px solid var(--a10);
  border-radius: var(--r18);
  background: linear-gradient(180deg, var(--a08), var(--a03));
  box-shadow: var(--shadow2);
  position:relative;
}
.sb-mark-wrap{
  width:44px;
  height:44px;
  border-radius:16px;
  border:1px solid rgba(var(--accent-rgb),.24);
  background: radial-gradient(circle at 35% 25%, rgba(var(--accent-rgb),.20), rgba(0,0,0,0) 60%),
              rgba(0,0,0,.10);
  display:grid;
  place-items:center;
  box-shadow: 0 14px 34px rgba(0,0,0,.40);
}
.sb-mark{
  width:30px;
  height:30px;
  image-rendering: auto;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
}
.sb-name{
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing:.4px;
}
.sb-tag{
  margin-top:2px;
  font-size:12px;
  color: var(--muted);
}

.sb-collapse{
  position:absolute;
  right:10px;
  top:10px;
  width:34px;
  height:34px;
  border-radius: 12px;
  border:1px solid var(--a12);
  background: rgba(0,0,0,.12);
  color: var(--ink);
  display:inline-grid;
  place-items:center;
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.sb-collapse:hover{
  transform: translateY(-1px);
  border-color: rgba(var(--accent-rgb),.28);
  background: rgba(0,0,0,.18);
}
.sb-collapse svg{ width:18px; height:18px; opacity:.92; }
html[data-mode="light"] .sb-collapse{ background: rgba(255,255,255,.72); }

/* Sidebar collapsed (desktop) */
html[data-sb-collapsed="1"] .app{ grid-template-columns: 92px 1fr; }
html[data-sb-collapsed="1"] .sidebar{ padding:14px 10px; }
html[data-sb-collapsed="1"] .sb-hero{ padding:12px 10px; justify-content:center; }
html[data-sb-collapsed="1"] .sb-hero-text{ display:none; }
html[data-sb-collapsed="1"] .sb-collapse{ right:8px; top:8px; }
html[data-sb-collapsed="1"] .nav2 a{ justify-content:center; padding:10px 10px; }
html[data-sb-collapsed="1"] .nav2 a span:last-child{ display:none; }
html[data-sb-collapsed="1"] .sb-footer{ display:none; }

/* Collapsed sidebar: show hover labels so it still feels navigable */
html[data-sb-collapsed="1"] .nav2 a:hover::after{
  content: attr(data-label);
  position:absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  padding:8px 10px;
  border-radius: 14px;
  border:1px solid var(--a12);
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  color: var(--ink);
  font-weight: 950;
  font-size: 12px;
  letter-spacing:.2px;
  white-space: nowrap;
  box-shadow: var(--shadow2);
  z-index: 80;
  pointer-events:none;
}

.nav2 .nav-group{
  margin-top:8px;
  padding-top:10px;
  border-top:1px solid var(--a08);
}
.nav2 .nav-h{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: var(--muted);
  padding: 0 6px 8px;
}
html[data-sb-collapsed="1"] .nav2 .nav-h{ display:none; }

/* Social thread (public profile page) */
.thread-wrap{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.thread-profile{ margin-top:0; }
.thread-profile.opsl-prof{
  position:relative;
  overflow:hidden;
  padding:18px;
  border-radius: var(--r18);
  border:1px solid rgba(var(--opsl-pri-rgb, var(--accent-rgb)), .22);
  background:
    radial-gradient(900px 320px at 14% 0%, rgba(var(--opsl-pri-rgb, var(--accent-rgb)), .18), rgba(var(--opsl-pri-rgb, var(--accent-rgb)), 0) 62%),
    radial-gradient(820px 300px at 92% 12%, rgba(var(--opsl-sec-rgb, 255,210,138), .12), rgba(var(--opsl-sec-rgb, 255,210,138), 0) 62%),
    radial-gradient(900px 420px at 70% 92%, rgba(var(--opsl-alt-rgb, 155,240,194), .10), rgba(var(--opsl-alt-rgb, 155,240,194), 0) 66%),
    linear-gradient(180deg, var(--a07), var(--a03));
}
.thread-profile.opsl-prof::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(600px 220px at 50% 10%, rgba(0,0,0,.35), rgba(0,0,0,0) 58%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.18));
  pointer-events:none;
  opacity:.65;
}
html[data-mode="light"] .thread-profile.opsl-prof::after{ opacity:.22; }
.opsl-prof-bg{
  position:absolute;
  inset:-1px;
  background-size:cover;
  background-position:center;
  filter: saturate(1.2) contrast(1.05);
  opacity:.14;
  pointer-events:none;
}
html[data-mode="light"] .opsl-prof-bg{ opacity:.10; }
.thread-profile.opsl-prof > *{ position:relative; z-index:1; }
.thread-profile-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  flex-wrap:wrap;
}
.thread-id{ display:flex; gap:12px; align-items:center; min-width:0; }
.thread-avatar{
  width:56px;
  height:56px;
  border-radius:18px;
  border:1px solid var(--a10);
  background: linear-gradient(180deg, var(--a10), rgba(0,0,0,.10));
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  box-shadow: var(--shadow2);
}
.thread-profile.opsl-prof .thread-avatar{
  width:66px;
  height:66px;
  border-radius: 22px;
  border:1px solid rgba(var(--opsl-pri-rgb, var(--accent-rgb)), .28);
  background: linear-gradient(180deg, rgba(var(--opsl-pri-rgb, var(--accent-rgb)), .10), rgba(0,0,0,.12));
}
.thread-avatar img{ width:32px; height:32px; object-fit:contain; opacity:.95; }
.thread-profile.opsl-prof .thread-avatar img{ width:66px; height:66px; object-fit:cover; opacity:1; }
.thread-id-text{ min-width:0; }
.thread-name{ font-weight:950; font-size:16px; letter-spacing:.2px; }
.thread-profile.opsl-prof .thread-name{ font-size:18px; letter-spacing:.3px; }
.thread-profile.opsl-agent .thread-profile-actions .badge{ border-color: rgba(var(--opsl-sec-rgb, 255,210,138), .35); }
.thread-profile-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.thread-profile-meta{
  margin-top:10px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.thread-profile-meta a.badge{
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.thread-profile-meta a.badge:hover{
  transform: translateY(-1px);
  border-color: rgba(var(--accent-rgb), .40);
  box-shadow: 0 12px 30px rgba(var(--accent-rgb), .10);
}
.thread-join{
  margin-top:12px;
  padding:12px;
  border-radius: var(--r18);
  border:1px solid var(--a10);
  background: linear-gradient(180deg, var(--a06), rgba(0,0,0,.10));
}
.thread-join-row{ margin-top:10px; gap:10px; align-items:flex-start; }
.thread-join-row .field{ flex:1; min-width:200px; }
.thread-compose{ margin-top:0; }
.thread-compose-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.thread-shelves{ margin-top:2px; }
.thread-compose .compose-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.thread-compose .compose-id{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.thread-compose .compose-id .avatar{
  width:38px;
  height:38px;
  border-radius: 999px;
  overflow:hidden;
  border:1px solid var(--a12);
  background: rgba(0,0,0,.22);
  flex:0 0 auto;
}
.thread-compose .compose-id .avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.thread-compose .compose-id-text{ min-width:0; }
.thread-compose .compose-title{ font-weight:950; letter-spacing:.2px; }
.thread-compose .compose-tools{ display:flex; gap:10px; align-items:center; }
.thread-compose .compose-hints{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin: 8px 0 10px 0;
}
.thread-compose .compose-hints .hint{
  border:1px solid rgba(var(--accent-rgb),.20);
  background: radial-gradient(120px 50px at 30% 20%, rgba(var(--accent-rgb),.12), rgba(var(--accent-rgb),0) 62%), rgba(0,0,0,.12);
  color: var(--ink);
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 950;
  font-size: 12px;
  letter-spacing: .2px;
  cursor: pointer;
}
html[data-mode="light"] .thread-compose .compose-hints .hint{ background: rgba(var(--accent-rgb),.10); }
.thread-compose .compose-text{ min-height: 120px; resize: vertical; }
.thread-compose .compose-media{
  margin-top:10px;
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap:10px;
}
.thread-compose .compose-media-item{
  position:relative;
  border:1px solid var(--a12);
  border-radius: 12px;
  overflow:hidden;
  background: rgba(0,0,0,.20);
  min-height: 88px;
}
.thread-compose .compose-media-thumb{
  width:100%;
  height:100%;
  min-height:88px;
  object-fit:cover;
  display:block;
}
.thread-compose .compose-media-remove{
  position:absolute;
  top:6px;
  right:6px;
  width:24px;
  height:24px;
  border-radius:999px;
  border:1px solid var(--a14);
  background: rgba(0,0,0,.65);
  color:#fff;
  font-weight:900;
  cursor:pointer;
  line-height:1;
}
.thread-compose .compose-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-top:10px;
}
.thread-compose .compose-meta{ margin-left:auto; }
.thread-compose .compose-actions{ display:flex; gap:10px; align-items:center; }

.thread{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.post{
  border:1px solid var(--a10);
  border-radius: var(--r18);
  background: linear-gradient(180deg, var(--a07), var(--a03));
  box-shadow: var(--shadow2);
  padding:16px;
  position:relative;
  overflow:hidden;
}
.post::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(780px 240px at 20% 0%, rgba(var(--accent-rgb),.14), rgba(var(--accent-rgb),0) 55%);
  opacity:.8;
  pointer-events:none;
}
.post > *{ position:relative; z-index:1; }
.post-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.post-meta{
  display:flex;
  align-items:center;
  gap:10px;
}
.followchip{
  border:1px solid var(--a12);
  background: rgba(0,0,0,.10);
  color: var(--ink);
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 950;
  font-size: 12px;
  letter-spacing: .2px;
  cursor: pointer;
  line-height: 1;
}
html[data-mode="light"] .followchip{ background: rgba(255,255,255,.72); }
.followchip:disabled{ opacity:.45; cursor: default; }
.post-type{
  display:inline-flex;
  gap:8px;
  align-items:center;
  font-weight:950;
  font-size:12px;
  letter-spacing:.2px;
  padding:6px 10px;
  border-radius: 999px;
  border:1px solid rgba(var(--accent-rgb),.28);
  background: rgba(var(--accent-rgb),.10);
}
.post-who{
  font-weight:900;
  opacity:.92;
}
.post-type.small{ font-weight:900; opacity:.92; }
.post-time{ color: var(--muted); font-size:12px; }
.post-title{ margin-top:10px; font-weight:950; letter-spacing:.2px; line-height:1.18; }
.post-sub{ margin-top:8px; color: var(--muted); line-height:1.42; white-space:pre-wrap; }
.post-imgs{
  margin-top:10px;
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap:10px;
}
.post-img{
  border:1px solid var(--a12);
  border-radius: 12px;
  overflow:hidden;
  background: rgba(0,0,0,.18);
  box-shadow: var(--shadow2);
}
.post-img img{
  width:100%;
  height:100%;
  min-height:112px;
  max-height:300px;
  object-fit:cover;
  display:block;
}
.post-actions{ margin-top:10px; display:flex; gap:10px; flex-wrap:wrap; }
.post-actions a{ text-decoration:none; }
.post-actions .heart{
  font-size: 14px;
  line-height: 1;
  display:inline-block;
  transform: translateY(1px);
  color: rgba(231,234,233,.55);
}
html[data-mode="light"] .post-actions .heart{ color: rgba(15,22,19,.55); }
.post-actions .heart.on{
  color: rgba(var(--accent-rgb), .95);
  text-shadow: 0 0 18px rgba(var(--accent-rgb), .18);
}
.tagbar{
  display:flex;
  gap:8px;
  align-items:center;
  overflow:auto;
  padding-bottom:6px;
  margin: 0 0 12px 0;
  scrollbar-width: thin;
}
.thread-layout{
  display:grid;
  grid-template-columns: 1fr 320px;
  gap:14px;
  align-items:start;
}
.thread-main{ min-width:0; }
.thread-filters{
  border:1px solid var(--a10);
  border-radius: var(--r18);
  background: linear-gradient(180deg, var(--a07), var(--a03));
  box-shadow: var(--shadow2);
  padding:14px;
  position:sticky;
  top:14px;
  max-height: calc(100vh - 140px);
  overflow:auto;
}
.tf-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.tf-title{ font-weight: 950; letter-spacing:.2px; }
.tf-close{ display:none; }
.tf-sec{ margin-top:12px; }
.tf-sec .k{ margin-bottom:8px; }
.thread-filters .tagbar{ margin:0; padding-bottom:0; flex-wrap:wrap; overflow:visible; }
.thread-filters .tagchip{ padding:6px 9px; }
.tag-loader{
  border:1px solid var(--a10);
  border-radius: var(--r14);
  background: radial-gradient(900px 320px at 20% 0%, rgba(var(--accent-rgb),.12), rgba(var(--accent-rgb),0) 60%), rgba(0,0,0,.14);
  padding:12px;
  display:flex;
  gap:12px;
  align-items:center;
}
html[data-mode="light"] .tag-loader{ background: rgba(var(--accent-rgb), .08); }
.tag-loader-art{
  width:110px;
  height:56px;
  flex:0 0 auto;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.22));
}
.tag-loader-art svg{ width:100%; height:100%; display:block; }
.tag-loader-text{ min-width:0; }
.post-tags{ margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; }

@media (max-width: 880px){
  .thread-layout{ grid-template-columns: 1fr; }
  .post-imgs{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .thread-filters{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    width:min(360px, 92vw);
    max-height:none;
    border-radius: 18px 0 0 18px;
    z-index: 80;
    transform: translateX(104%);
    transition: transform .22s ease;
    padding-bottom: 92px;
  }
  .thread-filters.open{ transform: translateX(0); }
  .tf-close{ display:inline-flex; }
}
.tagchip{
  border:1px solid rgba(var(--accent-rgb),.22);
  background: radial-gradient(120px 50px at 30% 20%, rgba(var(--accent-rgb),.14), rgba(var(--accent-rgb),0) 62%), rgba(0,0,0,.14);
  color: var(--ink);
  border-radius: 999px;
  padding: 7px 10px;
  font-weight: 950;
  font-size: 12px;
  letter-spacing: .2px;
  cursor: pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space: nowrap;
}
html[data-mode="light"] .tagchip{ background: rgba(var(--accent-rgb), .10); }
.tagchip .hash{ opacity:.7; }
.tagchip .n{
  border:1px solid var(--a12);
  border-radius:999px;
  padding:2px 6px;
  font-size:11px;
  opacity:.9;
  font-family: var(--mono);
}
.tagchip.on{
  border-color: rgba(var(--accent-rgb), .48);
  box-shadow: 0 10px 28px rgba(var(--accent-rgb), .14);
}
.post-tags{
  margin-top:10px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.tagmini{
  border:1px solid rgba(var(--accent-rgb),.18);
  background: rgba(var(--accent-rgb),.08);
  color: var(--muted);
  border-radius: 999px;
  padding: 5px 8px;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: .2px;
  cursor: pointer;
}
.tagmini:hover{ color: var(--ink); border-color: rgba(var(--accent-rgb),.35); }
.post-sub a,
.reply-body a{
  color: rgba(var(--accent-rgb), .95);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.post-type .avatar{
  width:18px;
  height:18px;
  border-radius:999px;
  overflow:hidden;
  border:1px solid rgba(var(--accent-rgb),.25);
  background: rgba(0,0,0,.25);
  flex:0 0 auto;
}
.post-type .avatar img{ width:100%; height:100%; object-fit:cover; display:block; }

.post-author{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:0;
  padding:0;
  background:transparent;
  color: var(--ink);
  cursor:pointer;
  min-width:0;
  text-align:left;
}
.post-author .avatar{
  width:30px;
  height:30px;
  border-radius:999px;
  overflow:hidden;
  border:1px solid var(--a12);
  background: rgba(0,0,0,.25);
  flex:0 0 auto;
}
.post-author .avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.post-author .name{
  font-weight:950;
  font-size:13px;
  letter-spacing:.2px;
  max-width:32ch;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.post-author .handle{
  color: var(--muted);
  font-size:12px;
  white-space:nowrap;
}

.post-replies{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--a10);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.reply{
  border:1px solid var(--a10);
  border-radius: var(--r14);
  background: linear-gradient(180deg, var(--a06), var(--a03));
  padding:12px;
}
.reply-top{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.reply-top .avatar{
  width:22px;
  height:22px;
  border-radius:999px;
  overflow:hidden;
  border:1px solid var(--a12);
  background: rgba(0,0,0,.25);
  flex:0 0 auto;
}
.reply-top .avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.reply-top .name{ font-weight:950; font-size:12px; letter-spacing:.2px; }
.reply-top .handle{ color: var(--muted); font-size:12px; }
.reply-top .time{ margin-left:auto; color: var(--muted); font-size:12px; }
.reply-body{
  margin-top:8px;
  color: var(--muted);
  line-height:1.42;
}
.reply-compose .field{ width:100%; }

.sb-prof,
.tb-prof{
  border:1px solid var(--a12);
  background: linear-gradient(180deg, var(--a08), var(--a03));
  border-radius:999px;
  padding:0;
  width:30px;
  height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  cursor:pointer;
}
.sb-prof img,
.tb-prof img{ width:100%; height:100%; object-fit:cover; display:block; }
.tb-prof{ margin-left:6px; }
.sb-prof{ margin-left:auto; }

/* In-app OpsLink preview */
.opsn{
  --ops-pri: #8ccaaf;
  --ops-sec: #ffd28a;
  --ops-alt: #9bf0c2;
  --ops-pri-rgb: 140,202,175;
  --ops-sec-rgb: 255,210,138;
  --ops-alt-rgb: 155,240,194;
  --ops-bg0: #070708;
  --ops-bg1: #0b0b0d;
  --ops-pagebg: none;
  --ops-hero: none;
  padding:10px;
  border-radius: var(--r18);
  border:1px solid var(--a10);
  background:
    radial-gradient(1100px 700px at 15% 12%, rgba(var(--ops-pri-rgb),.18), rgba(var(--ops-pri-rgb),0) 62%),
    radial-gradient(980px 620px at 86% 18%, rgba(var(--ops-sec-rgb),.12), rgba(var(--ops-sec-rgb),0) 64%),
    radial-gradient(920px 700px at 72% 92%, rgba(var(--ops-alt-rgb),.08), rgba(var(--ops-alt-rgb),0) 66%),
    linear-gradient(145deg, var(--ops-bg0), var(--ops-bg1) 55%, #050607);
  position:relative;
  overflow:hidden;
}
.opsn::before{
  content:"";
  position:absolute;
  inset:-26px;
  background-image: var(--ops-pagebg);
  background-size: cover;
  background-position: center;
  opacity:.10;
  filter: blur(14px) saturate(1.05) contrast(1.05);
  transform: scale(1.03);
  pointer-events:none;
}
.opsn-card{
  position:relative;
  z-index:1;
  border:1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  overflow:hidden;
  background:
    radial-gradient(900px 360px at 10% 0%, rgba(var(--ops-pri-rgb),.10), rgba(var(--ops-pri-rgb),0) 60%),
    radial-gradient(820px 360px at 90% 18%, rgba(var(--ops-sec-rgb),.08), rgba(var(--ops-sec-rgb),0) 62%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: var(--shadow2);
}
.opsn-hero{
  position:relative;
  padding:16px 16px 14px;
  overflow:hidden;
}
.opsn-hero::before{
  content:"";
  position:absolute;
  inset:-24px;
  background-image: var(--ops-hero);
  background-size: cover;
  background-position:center;
  opacity:.14;
  filter: blur(14px) saturate(1.1) contrast(1.05);
  transform: scale(1.06);
}
.opsn-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(920px 420px at 10% 0%, rgba(var(--ops-pri-rgb),.14), rgba(var(--ops-pri-rgb),0) 60%),
    radial-gradient(760px 420px at 86% 18%, rgba(var(--ops-sec-rgb),.12), rgba(var(--ops-sec-rgb),0) 62%),
    radial-gradient(820px 520px at 70% 92%, rgba(var(--ops-alt-rgb),.08), rgba(var(--ops-alt-rgb),0) 64%),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.32));
}
.opsn-hero > *{ position:relative; z-index:1; }
.opsn-hero-flex{ display:flex; gap:14px; align-items:flex-start; justify-content:space-between; }
.opsn-hero-left{ min-width:0; }
.opsn-hero-right{ flex:0 0 auto; display:flex; justify-content:flex-end; }
.opsn-side{
  width:min(140px, 22vw);
  height:auto;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
  opacity:.95;
}
@media (max-width: 860px){
  .opsn-hero-flex{ flex-direction:column; }
  .opsn-side{ width:min(160px, 52vw); }
}
.opsn-title{ font-weight:950; letter-spacing:.2px; font-size:16px; }
.opsn-sub{ margin-top:8px; color: rgba(231,234,233,.78); font-size:12px; line-height:1.45; max-width:72ch; }
.opsn-chips{ margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; }
.opsn-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  text-decoration:none;
  font-weight:800;
  font-size:12px;
  border:1px solid rgba(255,255,255,.12);
  color:#e7eae9;
  background: rgba(0,0,0,.18);
}
.opsn-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  padding:12px 16px;
  border-top:1px solid rgba(255,255,255,.10);
  border-bottom:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.10);
}
.opsn-tab{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.12);
  color:#e7eae9;
  border-radius:999px;
  padding:8px 10px;
  font-weight:900;
  font-size:12px;
  cursor:pointer;
}
.opsn-tab.active{
  border-color: rgba(var(--ops-pri-rgb),.40);
  background: rgba(var(--ops-pri-rgb),.12);
}
.opsn-body{ padding:14px 16px 16px; }
.opsn-panel{
  border:1px solid rgba(var(--ops-pri-rgb),.16);
  border-radius: 18px;
  background:
    radial-gradient(860px 320px at 10% 0%, rgba(var(--ops-pri-rgb),.08), rgba(var(--ops-pri-rgb),0) 62%),
    radial-gradient(860px 320px at 90% 22%, rgba(var(--ops-sec-rgb),.06), rgba(var(--ops-sec-rgb),0) 64%),
    rgba(0,0,0,.10);
  padding:14px;
  margin-bottom:10px;
}
.opsn-k{ font-size:11px; color: rgba(231,234,233,.70); font-weight:800; letter-spacing:.2px; }
.opsn-v{ font-size:14px; font-weight:950; margin-top:6px; }
.opsn-note{ font-size:11px; color: rgba(231,234,233,.62); line-height:1.35; margin-top:8px; }
.opsn-rt{ margin-top:10px; font-size:12px; color: rgba(231,234,233,.82); line-height:1.55; }
.opsn-chiprow{ margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; }
.opsn-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(var(--ops-pri-rgb),.22);
  background:
    radial-gradient(80px 40px at 30% 25%, rgba(var(--ops-pri-rgb),.16), rgba(var(--ops-pri-rgb),0) 62%),
    rgba(0,0,0,.14);
  font-weight:800;
  font-size:12px;
}
.opsn-img{
  margin-top:10px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
}
.opsn-img img{ width:100%; display:block; max-height:46vh; object-fit:cover; }
.opsn-grid{ margin-top:10px; display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; }
@media (max-width: 860px){ .opsn-grid{ grid-template-columns: repeat(2, 1fr); } }
.opsn-thumb{ padding:0; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.22); border-radius:16px; overflow:hidden; cursor:pointer; }
.opsn-thumb img{ width:100%; height:140px; object-fit:cover; display:block; }

.nav2{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.nav2 a{
  text-decoration:none;
  color:var(--ink);
  padding:10px 12px;
  border-radius: 18px;
  border:1px solid var(--a10);
  background: rgba(16,22,18,.26);
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
  display:flex;
  align-items:center;
  gap:10px;
  position:relative;
  overflow:hidden;
}
.nav2 a::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(var(--accent-rgb),.14), rgba(var(--accent-rgb),0));
  opacity:0;
  transition: opacity .12s ease;
}
.nav2 a:hover{
  transform: translateY(-1px);
  border-color: rgba(var(--accent-rgb),.26);
  background: rgba(16,22,18,.44);
}
.nav2 a:hover::before{ opacity:1; }
.nav2 a.active{
  border-color: rgba(var(--accent-rgb),.42);
  background: rgba(var(--accent-rgb),.10);
}
.nav2 a.active::before{ opacity:1; }
.nav-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:2px 8px;
  border-radius:999px;
  font-family: var(--mono);
  font-size:10px;
  font-weight:900;
  letter-spacing:.35px;
  text-transform:uppercase;
  line-height:1;
  border:1px solid var(--a12);
  background: rgba(0,0,0,.14);
  color: var(--muted);
  margin-left:8px;
  transform: translateY(-1px);
}
.nav-badge.beta{
  border-color: rgba(var(--warn-rgb), .28);
  background: rgba(var(--warn-rgb), .10);
  color: rgba(var(--warn-rgb), .92);
}

/* Mobile bottomnav beta badge should float over the button (avoid squishing labels). */
.bottomnav a{ position:relative; }
.bottomnav .bn-txt{ white-space:nowrap; }
.bottomnav a .nav-badge{
  position:absolute;
  top:6px;
  right:10px;
  margin:0;
  padding:2px 6px;
  font-size:9px;
  transform:none;
  pointer-events:none;
  z-index:2;
}
.ico{
  width:18px;
  height:18px;
  display:inline-grid;
  place-items:center;
  flex: 0 0 auto;
  color: var(--ink);
  opacity:.88;
}
.ico svg{ width:18px; height:18px; }

.sb-footer{
  margin-top:14px;
  padding:12px 12px;
  border-radius: var(--r18);
  border:1px solid var(--a10);
  background: rgba(0,0,0,.12);
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
}
.sb-footer-row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.sb-meta{ margin-top:10px; font-size:12px; color: var(--muted); position:relative; }
.sb-rel{ display:flex; align-items:center; justify-content:space-between; gap:10px; position:relative; }
.sb-info{
  width:30px;
  height:30px;
  border-radius: 999px;
  border:1px solid var(--a12);
  background: rgba(0,0,0,.14);
  color: var(--ink);
  display:inline-grid;
  place-items:center;
  cursor:pointer;
  position:relative;
}
html[data-mode="light"] .sb-info{ background: rgba(255,255,255,.72); }
.sb-info svg{ width:16px; height:16px; opacity:.88; }
.sb-info:hover{ border-color: rgba(var(--accent-rgb),.30); }
.sb-dot{
  position:absolute;
  right:6px;
  top:6px;
  width:8px;
  height:8px;
  border-radius:999px;
  background: rgba(255,210,138,.96);
  box-shadow: 0 0 0 3px rgba(255,210,138,.14);
}
.sb-tip{
  position:absolute;
  left:0;
  right:auto;
  top:34px;
  width: min(320px, calc(100% - 2px));
  border-radius: 16px;
  border:1px solid var(--a12);
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  box-shadow: var(--shadow);
  padding:10px;
  z-index: 50;
}
.sb-tip-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-weight: 950;
  color: var(--ink);
}
.sb-tip-sub{ margin-top:6px; font-size:11px; color: var(--muted); }
.muted{ color: var(--muted); }

.brand{
  display:flex; align-items:center; gap:10px;
  padding:12px 12px;
  border:1px solid var(--a10);
  border-radius: var(--r18);
  background: linear-gradient(180deg, var(--a07), var(--a03));
  box-shadow: var(--shadow2);
}
.logo{
  width:34px; height:34px; border-radius:12px;
  background: radial-gradient(circle at 30% 28%, rgba(var(--accent-rgb),.85), rgba(var(--accent-rgb),.12) 55%, rgba(0,0,0,0) 70%),
              linear-gradient(145deg, var(--a09), rgba(0,0,0,0));
  border:1px solid rgba(var(--accent-rgb),.25);
  box-shadow: 0 10px 25px rgba(0,0,0,.45);
}
.brand h1{ font-size:14px; margin:0; letter-spacing:.3px; }
.brand p{ margin:2px 0 0; font-size:12px; color:var(--muted); }

.nav{
  margin-top:12px;
  display:flex; flex-direction:column; gap:8px;
}
.nav a{
  text-decoration:none;
  color:var(--ink);
  padding:10px 12px;
  border-radius: var(--r14);
  border:1px solid var(--a10);
  background: rgba(16,22,18,.30);
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.nav a:hover{ transform: translateY(-1px); border-color: rgba(var(--accent-rgb),.28); background: rgba(16,22,18,.52); }
.nav a.active{ border-color: rgba(var(--accent-rgb),.42); background: rgba(var(--accent-rgb),.10); }

.sidebar-footer{
  position:absolute;
  bottom:16px;
  left:16px;
  right:16px;
  padding:10px 12px;
  border-radius: var(--r14);
  border:1px solid var(--a10);
  background: rgba(0,0,0,.12);
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
}

.main{
  overflow:auto;
  padding:18px;
  -webkit-overflow-scrolling: touch;
  min-width:0;
  position:relative;
  isolation:isolate;
}
.main::before,
.main::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:0;
  filter: blur(0.2px) saturate(1.05);
}
.main::before{
  width: 56vmax;
  height: 56vmax;
  top: -20vmax;
  right: -16vmax;
  background:
    radial-gradient(circle at 34% 34%, var(--route-glow-a), rgba(var(--accent-rgb),0) 62%),
    radial-gradient(circle at 70% 72%, var(--route-glow-b), rgba(255,255,255,0) 56%);
  opacity:.82;
  animation: auraFloatA 17s ease-in-out infinite alternate;
}
.main::after{
  width: 52vmax;
  height: 52vmax;
  left: -20vmax;
  bottom: -18vmax;
  background:
    radial-gradient(circle at 62% 38%, var(--route-glow-a), rgba(var(--accent-rgb),0) 64%),
    radial-gradient(circle at 28% 72%, rgba(0,0,0,.18), rgba(0,0,0,0) 58%);
  opacity:.76;
  animation: auraFloatB 19s ease-in-out infinite alternate;
}
.main > *{ position:relative; z-index:1; }
@keyframes auraFloatA{
  0%{ transform: translate3d(0,0,0) scale(1); }
  100%{ transform: translate3d(-3vmax,2vmax,0) scale(1.06); }
}
@keyframes auraFloatB{
  0%{ transform: translate3d(0,0,0) scale(1); }
  100%{ transform: translate3d(3vmax,-2vmax,0) scale(1.05); }
}

.topbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  position:sticky;
  top:0;
  padding:12px 14px;
  margin:0 0 14px;
  border-radius: var(--r22);
  border:1px solid var(--a10);
  background: linear-gradient(180deg, var(--a07), var(--a03));
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow2);
  z-index: 5;
  background-image:
    radial-gradient(500px 120px at 10% 0%, rgba(var(--accent-rgb),.10), rgba(var(--accent-rgb),0) 65%),
    var(--neo-surface);
}
.topbar::before{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  top:0;
  height:2px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb),0), var(--route-glow-a), rgba(var(--accent-rgb),0));
  opacity:.72;
  animation: topbarFlow 4.8s linear infinite;
  pointer-events:none;
}
@keyframes topbarFlow{
  0%{ transform: translateX(-8%); opacity:.35; }
  50%{ opacity:.92; }
  100%{ transform: translateX(8%); opacity:.35; }
}
.tb-bell{
  width:38px;
  height:38px;
  border-radius: 999px;
  border:1px solid var(--a12);
  background: rgba(0,0,0,.12);
  color: var(--ink);
  display:inline-grid;
  place-items:center;
  cursor:pointer;
  position:relative;
}
html[data-mode="light"] .tb-bell{ background: rgba(255,255,255,.72); }
.tb-bell:hover{ border-color: rgba(var(--accent-rgb), .30); }
.tb-bell svg{ width:18px; height:18px; opacity:.9; }
.tb-bell-n{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  border:1px solid rgba(0,0,0,.22);
  background: rgba(255,123,123,.95);
  color:#0b0b0b;
  font-weight: 950;
  font-size: 11px;
  line-height: 18px;
  box-shadow: 0 10px 24px rgba(0,0,0,.38);
}
.tb-notif{
  position:absolute;
  right: 14px;
  top: calc(100% + 10px);
  width: min(520px, calc(100vw - 28px));
  max-height: min(60vh, 520px);
  overflow:auto;
  border-radius: var(--r22);
  border:1px solid var(--a12);
  background: rgba(9,10,11,.92);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow);
  padding: 12px;
  z-index: 20;
}
html[data-mode="light"] .tb-notif{
  background: rgba(255,255,255,.96);
  border-color: rgba(0,0,0,.10);
}
.tb-notif-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.tb-notif-head .k{ font-weight: 950; letter-spacing:.2px; }
.tb-notif-list{ display:flex; flex-direction:column; gap:8px; }
.tb-notif-item{
  width:100%;
  text-align:left;
  border:1px solid var(--a10);
  background: rgba(0,0,0,.10);
  border-radius: 18px;
  padding:10px;
  cursor:pointer;
}
html[data-mode="light"] .tb-notif-item{ background: rgba(255,255,255,.70); }
.tb-notif-item.unread{ border-color: rgba(var(--accent-rgb), .26); }
.tb-notif-item:hover{ border-color: rgba(var(--accent-rgb), .32); }
.tb-notif-item .t{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-weight: 950; font-size: 12px; }
.tb-notif-item .t .dot{ width:8px; height:8px; border-radius:999px; background: rgba(255,123,123,.95); box-shadow:none; }
.tb-notif-item .t .dot.ok{ background: rgba(155,240,194,.95); }
.tb-notif-item .t .ts{ font-weight: 800; opacity:.75; }
.tb-notif-del{
  margin-left:auto;
  width:24px;
  height:24px;
  border-radius:999px;
  border:1px solid var(--a10);
  background: rgba(0,0,0,.10);
  color: var(--muted);
  font-weight: 950;
  line-height: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
html[data-mode="light"] .tb-notif-del{ background: rgba(255,255,255,.70); }
.tb-notif-del:hover{ color: var(--ink); border-color: rgba(var(--accent-rgb), .30); }
.tb-notif-item .m{
  margin-top:6px;
  font-size:12px;
  color: var(--muted);
  line-height:1.35;
  white-space: pre-wrap;
  word-break: break-word;
}
.tb-titles{ min-width:0; }
.t-title{ font-family: var(--display); font-size:15px; font-weight:800; letter-spacing:.2px; }
.t-sub{ margin-top:3px; font-size:12px; color:var(--muted); }

/* Controls */
.btn{
  cursor:pointer;
  border:1px solid var(--a12);
  background: var(--neo-surface);
  color:var(--ink);
  padding:9px 12px;
  border-radius: var(--r14);
  font-weight:800;
  font-size:12px;
  letter-spacing:.2px;
  box-shadow: var(--neo-raise);
  user-select:none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease, filter .18s ease;
}
.btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none !important;
  filter: saturate(.7);
}
.btn:disabled:hover{ border-color: var(--a12); }
.btn:focus-visible,
.field:focus-visible,
.tab:focus-visible,
.nav2 a:focus-visible,
.bottomnav a:focus-visible,
.bottomnav button:focus-visible{
  outline: 3px solid rgba(var(--accent-rgb), .30);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .main::before,
  .main::after,
  .pagefx-stage::before{ animation: none !important; opacity: .08; }
  .pagefx-forward-enter-from,
  .pagefx-forward-leave-to,
  .pagefx-back-enter-from,
  .pagefx-back-leave-to{ transform:none; filter:none; }
}
.btn:hover{
  border-color: rgba(var(--accent-rgb),.34);
  box-shadow:
    16px 16px 28px rgba(0,0,0,.45),
    -9px -9px 20px rgba(255,255,255,.04),
    inset 1px 1px 0 rgba(255,255,255,.14),
    inset -1px -1px 0 rgba(0,0,0,.40);
}
.btn:active{
  transform: translateY(1px) scale(.995);
  box-shadow: var(--neo-press);
}
.btn.primary{
  border-color: rgba(var(--accent-rgb),.42);
  background:
    radial-gradient(240px 90px at 20% 0%, rgba(var(--accent-rgb),.24), rgba(var(--accent-rgb),0) 66%),
    linear-gradient(180deg, rgba(var(--accent-rgb),.22), rgba(var(--accent-rgb),.08));
}
.btn.danger{ border-color: rgba(255,123,123,.40); }
.btn.ghost{
  background: rgba(0,0,0,.14);
  box-shadow:none;
}
.btn.small{ padding:7px 10px; font-size:11px; }

.field{
  width:100%;
  border:1px solid var(--a12);
  background:
    linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.10)),
    var(--neo-surface);
  color:var(--ink);
  padding:10px 12px;
  border-radius: var(--r14);
  outline:none;
}
.field:disabled{
  opacity:.68;
  cursor:not-allowed;
}

/* Make selects match the rest of the UI (readable + consistent). */
select.field{
  -webkit-appearance:none;
  appearance:none;
  padding-right: 40px;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.18)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 10l5 5 5-5' stroke='%23e7eae9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position: 0 0, right 12px center;
  background-size: auto, 18px 18px;
}
html[data-mode="light"] select.field{
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.82)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 10l5 5 5-5' stroke='%230f1613' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
select.field::-ms-expand{ display:none; }
select.field option{
  background: var(--panel2);
  color: var(--ink);
}
html[data-mode="light"] select.field option{
  background: #ffffff;
  color: #0f1613;
}
.field::placeholder{ color: var(--mute2); }
.field:focus{
  border-color: var(--neo-edge);
  box-shadow:
    var(--neo-press),
    0 0 0 3px rgba(var(--accent-rgb),.11);
}

.row{ display:flex; gap:10px; align-items:center; }
.wrap{ flex-wrap:wrap; }
.row{ min-width:0; }
.field{ min-width:0; }

.tb-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius: 999px;
  border:1px solid var(--a10);
  background: var(--neo-surface);
  box-shadow: var(--neo-raise);
  max-width: min(420px, 70vw);
}
.dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background: rgba(255,123,123,.95);
  box-shadow: 0 0 0 3px rgba(255,123,123,.14);
}
.dot.ok{
  background: rgba(155,240,194,.95);
  box-shadow: 0 0 0 3px rgba(155,240,194,.14);
}
.chip .who{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
  color: var(--ink);
  opacity:.88;
}
.iconbtn{
  width:38px;
  height:38px;
  display:inline-grid;
  place-items:center;
  padding:0;
}
.iconbtn svg{ width:18px; height:18px; }

/* Cards and panels */
.grid2{ display:grid; grid-template-columns: 1.08fr .92fr; gap:14px; min-width:0; }
.grid2.cols-narrow{ grid-template-columns: minmax(200px, 240px) 1fr; }
.grid2.cols-11-09{ grid-template-columns: 1.1fr .9fr; }

/* Projects mobile master/detail */
.pgrid.pdetail > :first-child{ display:none; }
.pgrid.pdetail .pdetailpane{ display:block; }
@media (min-width: 981px){
  .pdetailpane{
    position: sticky;
    top: var(--topbar-sticky, 84px);
    align-self: start;
  }
  .pfilters{
    position: sticky;
    top: var(--topbar-sticky, 84px);
    z-index: 6;
    padding:10px;
    border-radius: var(--r18);
    border:1px solid var(--a10);
    background: linear-gradient(180deg, var(--a07), var(--a03));
    backdrop-filter: blur(14px);
    box-shadow: var(--shadow2);
  }
  .pfilters + .list{ margin-top: 12px; }
}
.proj-arch-wrap{
  margin-top:10px;
  border:1px solid var(--a10);
  border-radius: var(--r18);
  background: linear-gradient(180deg, var(--a07), var(--a03));
  box-shadow: var(--shadow2);
  overflow:hidden;
}
.proj-arch-head{
  width:100%;
  text-align:left;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:0;
  border-bottom:1px solid var(--a10);
  background: transparent;
  color: var(--ink);
  padding:11px 12px;
  cursor:pointer;
  font-weight:900;
}
.proj-arch-head .small{
  opacity:.82;
  font-family: var(--mono);
  letter-spacing:.2px;
}
.proj-arch-list{
  margin-top:0;
  padding:10px;
}
.item.proj.archived{
  border-style:dashed;
}
.card{
  border:1px solid var(--a12);
  background: var(--neo-surface);
  border-radius: var(--r22);
  box-shadow: var(--neo-raise), var(--shadow2);
  padding:14px;
  backdrop-filter: blur(14px);
  min-width:0;
}
.card h2{
  margin:0;
  font-size:13px;
  letter-spacing:.2px;
}
.subtext{ font-size:12px; color:var(--muted); margin-top:4px; line-height:1.35; }
.al-filters{ margin-top:16px; }
.al-filters + .list-hero{ margin-top:12px; }
.al-tabs + .list-hero{ margin-top:12px; }

/* Action list hero */
.list-hero{
  position:relative;
  overflow:hidden;
  padding:14px;
  border-radius: var(--r22);
  border:1px solid var(--a14);
  background:
    radial-gradient(1200px 500px at 10% 0%, var(--ppriA, rgba(var(--accent-rgb),.16)), rgba(var(--accent-rgb),0) 55%),
    radial-gradient(1000px 420px at 100% 0%, var(--a10), rgba(255,255,255,0) 55%),
    rgba(16,22,18,.30);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}
.list-hero::before{
  content:"";
  position:absolute;
  inset:-40px;
  background-image: var(--hero-img);
  background-size: cover;
  background-position: center;
  opacity: .14;
  filter: blur(12px) saturate(1.2) contrast(1.05);
  transform: scale(1.08);
}
.list-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.44));
  pointer-events:none;
}
.list-hero > *{ position:relative; z-index:1; }
.list-hero .lh-title{
  margin:0;
  font-size:13px;
  letter-spacing:.2px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  min-width:0;
}
.list-hero .lh-link{
  color: var(--ink);
  opacity:.92;
  text-decoration: none;
  border-bottom: 1px solid var(--a14);
  padding-bottom: 1px;
}
.list-hero .lh-link:hover{
  color: rgba(var(--accent-rgb), .96);
  border-bottom-color: rgba(var(--accent-rgb), .45);
}
.list-hero .lh-ico{
  width:30px;
  height:30px;
  border-radius:11px;
  border:1px solid var(--a16);
  background: rgba(0,0,0,.22);
  object-fit: cover;
}
.list-hero .lh-sub{
  margin-top:6px;
  font-size:12px;
  color:var(--muted);
  line-height:1.35;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Action List responsive layout + tabs */
.al-tabs{
  display:flex;
  gap:8px;
  overflow:auto;
  overflow-x:auto;
  padding:10px 2px 2px;
  margin-top:4px;
  -webkit-overflow-scrolling: touch;
  max-width:100%;
  overscroll-behavior-x: contain;
}
.al-tabs::-webkit-scrollbar{ height:8px; }
.al-tabs::-webkit-scrollbar-thumb{ background: var(--a10); border-radius: 999px; }
.tab{
  flex:0 0 auto;
  border-radius: 999px;
  border:1px solid var(--a12);
  background: var(--neo-surface);
  color: var(--ink);
  padding:7px 10px;
  font-size:11px;
  font-family: var(--mono);
  cursor:pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
  box-shadow: var(--neo-raise);
}
.tab:hover{
  transform: translateY(-1px);
  border-color: rgba(var(--accent-rgb),.32);
  box-shadow:
    14px 14px 26px rgba(0,0,0,.36),
    -8px -8px 18px rgba(255,255,255,.04),
    inset 1px 1px 0 rgba(255,255,255,.10);
}
.tab.active{
  border-color: rgba(var(--accent-rgb),.55);
  background: rgba(var(--accent-rgb),.12);
  box-shadow: var(--neo-press), 0 0 0 1px rgba(var(--accent-rgb),.16) inset;
}

/* Executive neumorphism on primary surfaces and controls */
.sb-hero,
.topbar,
.tb-notif,
.tb-notif-item,
.nav2 a,
.bottomnav,
.bottomnav a,
.mnav-sheet,
.mnav-item,
.proj-arch-wrap,
.list-hero,
.cardtile,
.post,
.asst-log,
.asst-msg .bubble,
.thread-join,
.thread-profile.opsl-prof{
  background-image:
    radial-gradient(440px 130px at 10% 0%, rgba(var(--accent-rgb),.08), rgba(var(--accent-rgb),0) 65%),
    var(--neo-surface);
  box-shadow: var(--neo-raise), var(--shadow2);
}

.donechip,
.tb-bell,
.tb-prof,
.sb-prof,
.sb-collapse,
.iconbtn,
.fab,
.asst-fab{
  box-shadow: var(--neo-raise);
}

.donechip:active,
.tb-bell:active,
.tb-prof:active,
.sb-prof:active,
.sb-collapse:active,
.iconbtn:active,
.fab:active,
.asst-fab:active{
  box-shadow: var(--neo-press);
}

/* Immersive route transition container + graphics */
.pagefx-stage{
  position:relative;
  min-width:0;
  isolation:isolate;
}
.pagefx-stage::before{
  content:"";
  position:absolute;
  inset:-40px;
  pointer-events:none;
  z-index:0;
  background:
    conic-gradient(from var(--route-shift) at 24% 24%, rgba(var(--accent-rgb),.24), rgba(var(--accent-rgb),0) 42%, var(--route-glow-b) 56%, rgba(var(--accent-rgb),0) 78%),
    radial-gradient(640px 260px at 90% 14%, rgba(var(--accent-rgb),.16), rgba(var(--accent-rgb),0) 68%);
  opacity:.24;
  mix-blend-mode: screen;
  animation: pageFxSweep .84s cubic-bezier(.2,.7,.2,1);
}
.pagefx-stage > *{
  position:relative;
  z-index:1;
}
.pagefx-forward-enter-active,
.pagefx-forward-leave-active,
.pagefx-back-enter-active,
.pagefx-back-leave-active{
  transition: opacity .34s ease, transform .42s cubic-bezier(.2,.74,.2,1), filter .42s ease;
  will-change: opacity, transform, filter;
}
.pagefx-forward-enter-from{
  opacity:0;
  transform: translate3d(0,14px,0) scale(.988);
  filter: blur(6px) saturate(.95);
}
.pagefx-forward-leave-to{
  opacity:0;
  transform: translate3d(0,-10px,0) scale(1.01);
  filter: blur(4px) saturate(.92);
}
.pagefx-back-enter-from{
  opacity:0;
  transform: translate3d(-22px,0,0) scale(.992);
  filter: blur(6px) saturate(.95);
}
.pagefx-back-leave-to{
  opacity:0;
  transform: translate3d(18px,0,0) scale(1.008);
  filter: blur(4px) saturate(.92);
}
.pagefx-forward-enter-active .card,
.pagefx-forward-enter-active .list-hero,
.pagefx-forward-enter-active .cardtile,
.pagefx-forward-enter-active .hcard,
.pagefx-forward-enter-active .post,
.pagefx-forward-enter-active .tb-notif-item,
.pagefx-back-enter-active .card,
.pagefx-back-enter-active .list-hero,
.pagefx-back-enter-active .cardtile,
.pagefx-back-enter-active .hcard,
.pagefx-back-enter-active .post,
.pagefx-back-enter-active .tb-notif-item{
  animation: pageFxStagger .55s cubic-bezier(.2,.72,.2,1) both;
}
@keyframes pageFxStagger{
  from{ opacity:0; transform: translate3d(0,10px,0) scale(.992); }
  to{ opacity:1; transform: translate3d(0,0,0) scale(1); }
}
@keyframes pageFxSweep{
  0%{
    opacity:0;
    transform: translate3d(0,10px,0) scale(1.08) rotate(-3deg);
  }
  25%{ opacity:.35; }
  100%{
    opacity:0;
    transform: translate3d(0,-8px,0) scale(1.02) rotate(0deg);
  }
}

@media (max-width: 860px){
  .al{ grid-template-columns: 1fr !important; }
  .al .al-detail{ display:none; }
  .list-hero{ margin-top:12px; }
  .list-hero::before{ inset:-20px; opacity:.12; }
}

@media (max-width: 980px){
  /* Override the more-specific column presets too (otherwise they stay 2-col on mobile). */
  .grid2,
  .grid2.cols-11-09,
  .grid2.cols-narrow{ grid-template-columns: 1fr; }
}

@media (max-width: 520px){
  .topbar{ padding:10px 12px; align-items:center; }
  .tb-actions{
    width:auto;
    margin-left:auto;
    justify-content:flex-end;
    flex-wrap:nowrap;
  }
  .t-sub{ display:none; }
  /* Mobile header: keep it uncluttered (avatar/actions only). */
  .topbar .chip .who{ display:none; }
  .chip{ max-width: 100%; }
  .chip .who{ white-space:normal; }
  .row{ flex-wrap:wrap; }
  .bottomnav a{ font-size:10px; }
}

/* Assistants */
.asst-grid{
  display:grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap:14px;
  min-width:0;
}
.asst-title{
  font-family: var(--display);
  font-weight: 950;
  letter-spacing:.2px;
  font-size: 14px;
}
.asst-log{
  min-height: 320px;
  max-height: 52vh;
  overflow:auto;
  padding: 10px;
  border: 1px solid var(--a10);
  border-radius: var(--r18);
  background:
    radial-gradient(900px 420px at 0% 0%, rgba(var(--accent-rgb),.10), rgba(var(--accent-rgb),0) 60%),
    rgba(0,0,0,.08);
  scroll-behavior: smooth;
}

/* Public OpsLink agent page: compact embedded chat */
.opsl-agent-chat{ margin-top: 12px; }
.opsl-mini-log{
  min-height: 180px;
  max-height: 320px;
  overflow:auto;
}
@media (max-width: 860px){
  .opsl-mini-log{
    max-height: none;
    overflow: visible;
  }
}
html[data-mode="light"] .asst-log{ background: rgba(255,255,255,.72); }
@media (prefers-reduced-motion: reduce){
  .asst-log{ scroll-behavior: auto; }
}

/* Mobile: avoid "scroll trap" inside the chat log. Let the page scroll naturally. */
@media (max-width: 860px){
  .asst-log{
    max-height: none;
    overflow: visible;
  }
}

.asst-msg{
  margin-bottom: 12px;
  display:flex;
  gap:10px;
  align-items:flex-end;
}
.asst-msg.user{ flex-direction: row-reverse; }
.asst-msg .av{
  width: 34px;
  height: 34px;
  border-radius: 14px;
  border: 1px solid var(--a12);
  background: rgba(0,0,0,.14);
  display:grid;
  place-items:center;
  overflow:hidden;
  flex: 0 0 auto;
  color: var(--mute2);
  font-weight: 950;
  font-family: var(--mono);
  font-size: 12px;
}
html[data-mode="light"] .asst-msg .av{ background: rgba(255,255,255,.75); }
.asst-msg .av img{ width:100%; height:100%; object-fit:cover; display:block; }

.asst-msg .bubble{
  min-width: 0;
  max-width: min(760px, 86%);
  border: 1px solid var(--a12);
  border-radius: 18px;
  padding: 10px 12px;
  background: rgba(0,0,0,.10);
}
html[data-mode="light"] .asst-msg .bubble{ background: rgba(255,255,255,.75); }
.asst-msg.user .bubble{
  background: rgba(var(--accent-rgb), .10);
  border-color: rgba(var(--accent-rgb), .22);
}
.asst-msg.assistant .bubble{
  background: rgba(255,210,138,.08);
  border-color: rgba(255,210,138,.18);
}

.asst-msg .meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 6px;
}
.asst-msg .who{
  font-weight: 950;
  font-size: 12px;
  opacity: .92;
  font-family: var(--display);
  letter-spacing: .2px;
}
.asst-msg.user .who{ color: rgba(var(--accent-rgb), .96); }
.asst-msg.assistant .who{ color: rgba(255,210,138,.92); }

.asst-msg .acts{
  display:flex;
  gap:6px;
  opacity: 0;
  transition: opacity .12s ease;
}
.asst-msg:hover .acts{ opacity: 1; }
@media (max-width: 860px){
  .asst-msg .acts{ opacity: 1; }
}
.iconbtn{
  appearance:none;
  border: 1px solid var(--a12);
  background: rgba(0,0,0,.10);
  color: var(--ink);
  border-radius: 12px;
  padding: 6px;
  cursor:pointer;
  display:grid;
  place-items:center;
}
html[data-mode="light"] .iconbtn{ background: rgba(255,255,255,.70); }
.iconbtn svg{ width:16px; height:16px; opacity:.86; }
.iconbtn:hover{ border-color: rgba(var(--accent-rgb),.28); transform: translateY(-1px); }
.asst-msg .txt{
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink);
  opacity: .90;
  white-space: pre-wrap;
}
html[data-mode="light"] .asst-msg .txt{ color: rgba(15,22,19,.92); opacity:.92; }
.asst-log .ts{
  margin-top: 8px;
  font-size: 11px;
  color: var(--mute2);
  font-family: var(--mono);
}

.asst-media{
  margin-top:8px;
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap:10px;
}
.asst-media-tile{
  appearance:none;
  border:1px solid var(--a10);
  background: rgba(0,0,0,.10);
  border-radius: var(--r18);
  overflow:hidden;
  padding:0;
  text-align:left;
  cursor:pointer;
}
html[data-mode="light"] .asst-media-tile{ background: rgba(255,255,255,.72); }
.asst-media-tile img{ width:100%; height:92px; object-fit:cover; display:block; }
.asst-media-tile .cap{ padding:8px 10px; font-size:11px; color: var(--mute2); line-height:1.2; }

.asst-work{ margin-top:6px; }
.asst-work-head{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:1px solid var(--a10);
  background: rgba(0,0,0,.10);
  color: var(--ink);
  border-radius: 999px;
  padding:8px 10px;
  font-weight: 900;
  font-size: 12px;
  cursor:pointer;
}
html[data-mode="light"] .asst-work-head{ background: rgba(255,255,255,.72); }
.asst-work-body{
  margin-top:8px;
  border:1px solid var(--a10);
  background: rgba(0,0,0,.08);
  border-radius: var(--r18);
  padding:10px;
}
html[data-mode="light"] .asst-work-body{ background: rgba(255,255,255,.72); }
.asst-work-step{
  padding:7px 8px;
  border-radius: 12px;
  background: rgba(var(--accent-rgb), .08);
  border: 1px solid rgba(var(--accent-rgb), .14);
  font-size: 12px;
  line-height: 1.35;
  margin-bottom:8px;
}
.asst-work-step:last-child{ margin-bottom:0; }

.paint-stage.compact{ padding:10px; border-radius: var(--r18); }
.paint-stage.compact .paint-svg{ width:120px; height:120px; }

@media (max-width: 860px){
  .asst-grid{ grid-template-columns: 1fr; }
}

/* Agents folder view */
.asst-tree{ margin-top: 10px; }
.asst-wiz-steps{ display:flex; flex-wrap:wrap; gap:8px; }
.asst-wiz-steps .pill{ cursor:pointer; }
.asst-wiz-steps .pill.active{ opacity: 1; border-color: rgba(var(--accent-rgb), .38); background: rgba(var(--accent-rgb), .14); }
.modal-wide{ width:min(1040px, 96vw); }
.asst-convbar{
  border: 1px solid var(--a10);
  border-radius: var(--r18);
  background: rgba(0,0,0,.08);
  padding: 10px;
  margin-bottom: 10px;
}
html[data-mode="light"] .asst-convbar{ background: rgba(255,255,255,.72); }
.asst-avatar{
  width: 54px;
  height: 54px;
  border-radius: 18px;
  border: 1px solid var(--a10);
  background: rgba(0,0,0,.14);
  overflow: hidden;
  display: grid;
  place-items: center;
  color: var(--mute2);
}
html[data-mode="light"] .asst-avatar{ background: rgba(255,255,255,.70); }
.asst-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.asst-avatar.big{ width: 88px; height: 88px; border-radius: 24px; }
.asst-avatar.empty{ background: linear-gradient(180deg, var(--a06), var(--a03)); }

/* Agent chat composer */
.asst-compose{
  position: relative;
  width: 100%;
  flex: 1 1 360px;
  min-width: 220px;
}
.asst-compose-input{
  width: 100%;
  padding-left: 48px;
  padding-right: 110px;
  height: 44px;
}
.asst-compose-btn{
  appearance:none;
  border: 1px solid var(--a12);
  background: rgba(0,0,0,.18);
  color: var(--ink);
  border-radius: 14px;
  padding: 8px 10px;
  cursor: pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
html[data-mode="light"] .asst-compose-btn{ background: rgba(255,255,255,.75); }
.asst-compose-btn svg{ width:18px; height:18px; opacity:.92; }
.asst-compose-btn.left{
  position:absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 14px;
  padding: 0;
}
.asst-compose-btn.left .count{
  position:absolute;
  right:-6px;
  top:-6px;
  background: rgba(var(--accent-rgb), .92);
  color: #08110d;
  font-weight: 950;
  font-size: 11px;
  line-height: 16px;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
}
.asst-compose-btn.send{
  position:absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  height: 34px;
  padding: 0 12px;
  border-radius: 14px;
  background: rgba(var(--accent-rgb), .18);
  border-color: rgba(var(--accent-rgb), .34);
  font-weight: 950;
}
.asst-compose-btn.send{ min-width: 64px; }
.asst-compose-btn.send:disabled{ opacity: .45; }

@media (max-width: 420px){
  .asst-compose-input{
    padding-left: 46px;
    padding-right: 92px;
  }
  .asst-compose-btn.send{ min-width: 56px; padding: 0 10px; }
}
.asst-compose-btn.send:disabled,
.asst-compose-btn:disabled{
  opacity: .50;
  cursor: not-allowed;
}

.asst-attach-strip{
  margin-top: 8px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.asst-attach-chip{
  appearance:none;
  border: 1px solid var(--a12);
  background: rgba(0,0,0,.10);
  color: var(--ink);
  border-radius: 999px;
  padding: 6px 10px 6px 6px;
  cursor: pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  max-width: 100%;
}
html[data-mode="light"] .asst-attach-chip{ background: rgba(255,255,255,.72); }
.asst-attach-chip img{
  width: 26px;
  height: 26px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid var(--a12);
  background: rgba(0,0,0,.14);
}
.asst-attach-chip .file-pill{
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  font-weight: 950;
  font-size: 10px;
  border: 1px solid var(--a12);
  background: rgba(var(--accent-rgb), .10);
}
.asst-attach-chip .lbl{
  font-size: 12px;
  max-width: 220px;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity:.92;
}
.asst-attach-chip .x{
  margin-left: 2px;
  font-weight: 950;
  opacity: .70;
}
.asst-branch{
  border: 1px solid var(--a10);
  border-radius: var(--r18);
  background: rgba(0,0,0,.08);
  padding: 10px;
  margin-bottom: 10px;
}
html[data-mode="light"] .asst-branch{ background: rgba(255,255,255,.72); }
.asst-branch-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.asst-chev{ font-family: var(--mono); color: var(--mute2); user-select:none; padding-top:2px; }
.asst-branch-title{ font-weight: 950; font-family: var(--display); letter-spacing:.2px; font-size: 13px; }
.asst-branch-body{ margin-top: 10px; }
.asst-node{
  border: 1px solid var(--a10);
  border-radius: var(--r18);
  background: rgba(0,0,0,.10);
  padding: 10px;
  cursor: pointer;
  margin-bottom: 10px;
}
html[data-mode="light"] .asst-node{ background: rgba(255,255,255,.70); }
.asst-node.hasbg{
  position: relative;
  overflow: hidden;
}
.asst-node.hasbg::after{
  content:"";
  position:absolute;
  inset:-10px;
  background-image: var(--pimg);
  background-size: cover;
  background-position: center;
  opacity: .10;
  filter: blur(10px) saturate(1.15) contrast(1.05);
  transform: scale(1.05);
  pointer-events:none;
}
.asst-node.hasbg.active::after{ opacity: .16; }
.asst-node.hasbg > *{ position: relative; z-index: 1; }
.asst-node.active{ border-color: rgba(var(--accent-rgb), .38); box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.asst-node-title{ display:flex; align-items:center; gap:8px; font-weight: 950; }
.asst-node-sub{ margin-top:6px; color: var(--mute2); font-size: 12px; line-height: 1.35; }
.asst-item-branch{
  border-left: 2px solid rgba(var(--accent-rgb), .18);
  padding-left: 10px;
  margin: 10px 0 8px;
}
.asst-item-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom: 8px; cursor:pointer; }
.asst-item-title{ font-weight: 950; font-size: 12px; opacity: .95; }
.asst-item-body .asst-node{ margin-bottom: 8px; }

.item.asstcard{
  position: relative;
  overflow: hidden;
}
.item.asstcard.hasbg::after{
  content:"";
  position:absolute;
  inset:-10px;
  background-image: var(--pimg);
  background-size: cover;
  background-position: center;
  opacity: .10;
  filter: blur(10px) saturate(1.15) contrast(1.05);
  transform: scale(1.05);
  pointer-events:none;
}
.item.asstcard.hasbg.active::after{ opacity:.16; }
.item.asstcard > *{ position: relative; z-index: 1; }

/* Messages */
.dm-grid{
  display:grid;
  grid-template-columns: 340px 1fr;
  gap:14px;
  align-items:start;
}
.dm-grid.narrow{ grid-template-columns: 1fr; }
.dm-list, .dm-chat{ min-width:0; }
.dm-log{
  border:1px solid var(--a10);
  border-radius: var(--r18);
  background: rgba(0,0,0,.10);
  padding:12px;
  max-height: 52vh;
  overflow:auto;
}
html[data-mode="light"] .dm-log{ background: rgba(255,255,255,.70); }
.dm-msg{ margin-bottom:12px; }
.dm-msg .who{ font-weight:950; font-size:12px; opacity:.9; }
.dm-msg .txt{ margin-top:4px; font-size:12px; line-height:1.5; color: var(--ink); opacity:.88; white-space: pre-wrap; }
.dm-msg .ts{ margin-top:6px; font-size:11px; color: var(--mute2); font-family:var(--mono); }
.dm-msg.me .who{ color: rgba(var(--accent-rgb), .96); }
.dm-item .avatar.sm{ width:18px; height:18px; border-radius:999px; overflow:hidden; border:1px solid rgba(var(--accent-rgb),.25); background: rgba(0,0,0,.25); }
.dm-item .avatar.sm img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Mobile assistants launcher (floater) */
.asst-fab{
  position: fixed;
  left: max(16px, env(safe-area-inset-left));
  right: auto;
  bottom: calc(118px + env(safe-area-inset-bottom)); /* above bottom nav + safe area */
  z-index: 1200;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb), .30);
  background: linear-gradient(180deg, rgba(var(--accent-rgb),.22), rgba(var(--accent-rgb),.08));
  color: var(--ink);
  box-shadow: var(--shadow);
  display: none;
  align-items:center;
  justify-content:center;
}
.asst-fab svg{ width: 22px; height: 22px; }
@media (max-width: 860px){
  .asst-fab{ display:flex; }
}

/* Hide floaters while Ops Builder is open (keeps the builder focused) */
html[data-opsbuilder="1"] .asst-fab,
html[data-opsbuilder="1"] .fab{
  display:none !important;
}

/* Hosting (mobile) */
.hcards{ display:flex; flex-direction:column; gap:10px; }
.hcard{
  border:1px solid var(--a12);
  background: rgba(0,0,0,.12);
  border-radius: 18px;
  padding:12px;
}
.hcard-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.hcard-title{ font-weight: 950; font-size:12px; letter-spacing:.2px; }
.hcard-sub{ margin-top:6px; font-size:12px; color: var(--muted); line-height:1.35; }

@media (max-width: 520px){
  .tiles{ grid-template-columns: 1fr !important; }
  .dash-head{ flex-direction:column; align-items:stretch; }
  .dash-head .row.wrap{ justify-content:flex-start; }
  .wd-range{ width:100%; }
  .wd-range .seg{ width:100%; justify-content:space-between; }
  .wd-rowline{ align-items:flex-start; }
  .wd-lbl{ white-space:normal; overflow:visible; text-overflow:initial; }
  .wd-lbl .link{ white-space:normal; }
}

/* List */
.list{ margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.al-list .item{
  position:relative;
  padding-left: 46px;
}
.donechip{
  position:relative;
  width:28px;
  height:28px;
  border-radius: 999px;
  border:1px solid var(--a16);
  background: rgba(0,0,0,.22);
  box-shadow: 0 8px 22px rgba(0,0,0,.28);
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.donechip:hover{ transform: translateY(-1px); border-color: rgba(var(--accent-rgb),.42); }
.donechip:active{ transform: translateY(0px) scale(.98); }
.donechip::after{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width:10px;
  height:6px;
  border-left:3px solid var(--muted);
  border-bottom:3px solid var(--muted);
  transform: translateY(-1px) rotate(-45deg);
  opacity:.34;
  transition: opacity .12s ease, border-color .12s ease;
}
.donechip.on{
  background: radial-gradient(12px 12px at 30% 25%, var(--a25), rgba(255,255,255,0) 55%),
    rgba(45,240,179,.18);
  border-color: rgba(45,240,179,.55);
  box-shadow: 0 0 0 6px rgba(45,240,179,.08), 0 10px 26px rgba(0,0,0,.34);
}
.donechip.on::after{ opacity:.92; border-color: rgba(45,240,179,.95); }
.al-list .item .donechip{
  position:absolute;
  left:10px;
  top:11px;
}

/* Mobile FAB + sheet (Action List) */
.fab{
  position:fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(118px + env(safe-area-inset-bottom));
  width:56px;
  height:56px;
  border-radius: 18px;
  border:1px solid rgba(var(--accent-rgb),.34);
  background:
    radial-gradient(80px 40px at 30% 25%, rgba(var(--accent-rgb),.22), rgba(var(--accent-rgb),0) 60%),
    rgba(0,0,0,.18);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 900;
  font-size: 28px;
  line-height: 1;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  cursor:pointer;
  z-index: 60;
}
.fab:active{ transform: translateY(1px); }

.sheet-backdrop{
  position:fixed;
  inset:0;
  z-index: 80;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
}
.sheet{
  width: min(860px, 100%);
  max-height: min(86vh, calc(100dvh - 110px));
  border-radius: 22px;
  border:1px solid var(--a14);
  background:
    radial-gradient(900px 360px at 10% 0%, rgba(var(--accent-rgb),.14), rgba(var(--accent-rgb),0) 60%),
    linear-gradient(180deg, var(--panel2), var(--panel));
  box-shadow: 0 30px 90px rgba(0,0,0,.70);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  animation: sheetIn .16s ease-out;
}
@keyframes sheetIn{
  from{ transform: translateY(18px); opacity: .0; }
  to{ transform: translateY(0); opacity: 1; }
}
.sheet-grab{
  width:54px;
  height:5px;
  border-radius:999px;
  background: var(--a12);
  margin: 10px auto 0;
}
.sheet-head{
  padding: 10px 14px 6px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.sheet-title{
  font-family: var(--display);
  font-weight: 900;
  letter-spacing:.2px;
  font-size: 14px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  max-width: 70%;
}
.sheet-tabs{
  display:flex;
  gap:6px;
  padding: 0 14px 10px;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}
.sheet-tabs button{
  appearance:none;
  border:1px solid var(--a12);
  background: rgba(0,0,0,.14);
  color: var(--ink);
  opacity:.88;
  font-family: var(--mono);
  font-size: 11px;
  padding: 7px 10px;
  border-radius: 999px;
  cursor:pointer;
  white-space:nowrap;
}
.sheet-tabs button.active{
  border-color: rgba(var(--accent-rgb),.45);
  background: rgba(var(--accent-rgb),.12);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.14) inset;
}
.sheet-body{
  padding: 0 14px 14px;
  flex: 1 1 auto;
  min-height: 0;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}

@media (prefers-reduced-motion: reduce){
  .sheet{ animation: none; }
}
.item{
  padding:10px 12px;
  border-radius: 16px;
  border:1px solid var(--a12);
  background: rgba(16,22,18,.34);
  cursor:pointer;
  transition: border-color .12s ease, transform .12s ease, background .12s ease;
}
.item.proj{
  position:relative;
  overflow:hidden;
}
.item.proj .proj-prog{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, var(--ppriA, rgba(var(--accent-rgb),.18)) 0 var(--ppct, 0%), rgba(0,0,0,0) var(--ppct, 0%) 100%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 10px, rgba(255,255,255,0) 10px 20px);
  opacity:.55;
  z-index:0;
}
.item.proj .proj-prog::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  height:4px;
  width: var(--ppct, 0%);
  background: linear-gradient(90deg, rgba(var(--accent-rgb),.0), rgba(var(--accent-rgb),.92));
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.18);
}
.item.proj .proj-prog::before{
  content:"";
  position:absolute;
  top:8px;
  bottom:8px;
  left: calc(var(--ppct, 0%) - 1px);
  width:2px;
  background: rgba(var(--accent-rgb),.22);
  opacity:.9;
}
.item.proj::after{
  content:"";
  position:absolute;
  inset:-10px;
  background-image: var(--pimg);
  background-size: cover;
  background-position: center;
  opacity: .10;
  filter: blur(10px) saturate(1.15) contrast(1.05);
  transform: scale(1.05);
  pointer-events:none;
}
.item.proj.active::after{ opacity:.16; }
.item.proj > *{ position:relative; z-index:1; }
.item.proj > .proj-prog{ z-index:0; }
.item.proj > .proj-prog{ position:absolute; inset:0; }
.item:hover{ transform: translateY(-1px); border-color: rgba(var(--accent-rgb),.26); background: rgba(16,22,18,.52); }
.item.active{ border-color: rgba(var(--accent-rgb),.46); background: rgba(var(--accent-rgb),.10); }
.item.flash{
  animation: itemFlash .65s ease-out;
}
@keyframes itemFlash{
  0%{ box-shadow: 0 0 0 0 rgba(var(--accent-rgb),.0); transform: translateY(0); }
  35%{ box-shadow: 0 0 0 6px rgba(var(--accent-rgb),.10); transform: translateY(-1px); }
  100%{ box-shadow: 0 0 0 0 rgba(var(--accent-rgb),.0); transform: translateY(0); }
}
.item h3{
  margin:0 0 4px;
  font-size:13px;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  min-width:0;
}
.item p{ margin:0; font-size:12px; color:var(--muted); line-height:1.35; }
.proj-ico{
  width:26px;
  height:26px;
  border-radius:9px;
  border:1px solid var(--a14);
  background: rgba(0,0,0,.22);
  object-fit: cover;
}

.cover-mini{
  margin-top:8px;
  border-radius: 18px;
  border:1px solid var(--a12);
  background: rgba(0,0,0,.12);
  overflow:hidden;
}
.cover-mini img{
  display:block;
  width:100%;
  height:140px;
  object-fit: cover;
  background: rgba(0,0,0,.22);
}

/* Project dashboard hero */
.projdash-hero{
  position:relative;
  overflow:hidden;
  padding:14px;
  border-radius: var(--r22);
  border:1px solid var(--a14);
  background:
    radial-gradient(1200px 500px at 10% 0%, rgba(var(--accent-rgb),.14), rgba(var(--accent-rgb),0) 55%),
    radial-gradient(900px 420px at 100% 0%, var(--a10), rgba(255,255,255,0) 55%),
    rgba(16,22,18,.28);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(14px);
}
.projdash-hero::before{
  content:"";
  position:absolute;
  inset:-40px;
  background-image: var(--hero-img);
  background-size: cover;
  background-position: center;
  opacity: .16;
  filter: blur(14px) saturate(1.2) contrast(1.05);
  transform: scale(1.08);
}
.projdash-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.55));
  pointer-events:none;
}
.projdash-hero > *{ position:relative; z-index:1; }
.projdash-hero-inner{ display:flex; align-items:center; gap:12px; }
.projdash-hero-ico{
  width:44px;
  height:44px;
  border-radius: 16px;
  border:1px solid var(--a16);
  background: rgba(0,0,0,.22);
  object-fit: cover;
}
.projdash-hero-title{
  font-family: var(--display);
  font-weight: 850;
  font-size: 16px;
  letter-spacing: .2px;
}
.projdash-hero-sub{
  margin-top:4px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
}

/* Media grid */
.media-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:10px;
}
.media-tile{
  position:relative;
  border-radius: 18px;
  border:1px solid var(--a12);
  background: rgba(16,22,18,.26);
  overflow:hidden;
  padding:10px;
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.media-tile:hover{ transform: translateY(-1px); border-color: rgba(var(--accent-rgb),.26); background: rgba(16,22,18,.34); }
.media-tile.active{ border-color: rgba(var(--accent-rgb),.56); box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.18) inset; }
.media-tile img{
  width:100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 14px;
  border:1px solid var(--a10);
  background: rgba(0,0,0,.22);
}
.media-tile .cap{
  margin-top:8px;
  font-size:11px;
  color: var(--muted);
  line-height:1.25;
  max-height: 2.5em;
  overflow:hidden;
}

/* Get started (onboarding) */
.start-hero{
  display:flex;
  align-items:center;
  gap:14px;
  padding:6px 2px;
}
.start-brand{
  width:54px;
  height:54px;
  border-radius: 20px;
  border:1px solid var(--a14);
  background: linear-gradient(180deg, var(--a10), var(--a04));
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
}
.start-mark{
  width:32px;
  height:32px;
  opacity:.92;
  filter: saturate(1.05);
}
.start-glow{
  position:absolute;
  inset:-40px;
  background:
    radial-gradient(120px 70px at 35% 25%, rgba(var(--accent-rgb),.32), transparent 60%),
    radial-gradient(120px 70px at 70% 70%, rgba(var(--accent-rgb),.18), transparent 60%);
  filter: blur(12px);
}
.start-title{
  font-family: var(--display);
  font-weight: 950;
  letter-spacing:.2px;
  font-size: 16px;
}
.start-sub{
  margin-top:4px;
  font-size:12px;
  color: var(--muted);
  line-height:1.35;
}

.start .list{ margin-top:10px; }
.start button.item{
  width:100%;
  text-align:left;
  display:block;
  font: inherit;
  color: inherit;
  border:1px solid var(--a12);
  background: rgba(16,22,18,.34);
}
.start button.item:hover{ transform: translateY(-1px); border-color: rgba(var(--accent-rgb),.26); background: rgba(16,22,18,.52); }
.start button.item.active{ border-color: rgba(var(--accent-rgb),.46); background: rgba(var(--accent-rgb),.10); }

@media (max-width: 520px){
  .start-hero{ flex-direction:column; align-items:flex-start; }
  .start-brand{ width:48px; height:48px; border-radius:18px; }
  .start-title{ font-size:16px; }

  .start-free-row{ flex-direction:column; align-items:stretch; }
  .start-free-row > button{ width:100%; }

  .start-actions-row{ flex-direction:column; align-items:stretch; }
  .start-actions-row > .btn{ width:100%; justify-content:center; }
}

/* Light-mode polish for project dashboard hero */
html[data-mode="light"] .projdash-hero{
  background:
    radial-gradient(1200px 520px at 10% 0%, rgba(var(--accent-rgb),.16), rgba(var(--accent-rgb),0) 58%),
    radial-gradient(900px 420px at 100% 0%, rgba(0,0,0,.05), rgba(255,255,255,0) 60%),
    rgba(255,255,255,.76);
}
html[data-mode="light"] .projdash-hero::before{
  opacity: .10;
  filter: blur(16px) saturate(1.1) contrast(1.02);
}
html[data-mode="light"] .projdash-hero::after{
  background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.92));
}
html[data-mode="light"] .projdash-hero-ico{
  background: rgba(255,255,255,.86);
}

/* Fullscreen media viewer */
html.noscroll, body.noscroll{ overflow:hidden; }
.viewer-backdrop{
  position:fixed;
  inset:0;
  z-index: 3000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background: rgba(0,0,0,.70);
  backdrop-filter: blur(12px);
}
.viewer{
  width: min(980px, 100%);
  max-height: calc(100vh - 36px);
  display:flex;
  flex-direction:column;
  gap:10px;
  border-radius: 22px;
  border:1px solid var(--a14);
  background: linear-gradient(180deg, var(--a06), var(--a02));
  box-shadow: var(--shadow);
  overflow:hidden;
}
.viewer-head{
  padding:12px 12px 0;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.vh-title{
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: .2px;
  font-size: 14px;
  color: var(--ink);
  opacity:.92;
}
.viewer-body{
  padding:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(900px 380px at 10% 0%, rgba(var(--accent-rgb),.10), rgba(var(--accent-rgb),0) 55%),
    rgba(0,0,0,.18);
}
.viewer-img{
  width:100%;
  max-height: 74vh;
  object-fit: contain;
  border-radius: 18px;
  border:1px solid var(--a12);
  background: rgba(0,0,0,.22);
}
.viewer-foot{ padding:0 12px 14px; }

@media (max-width: 860px){
  .viewer-backdrop{ padding:10px; }
  .viewer-img{ max-height: 66vh; }
}

@media (max-width: 520px){
  .media-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .media-tile{ padding:8px; }
  .media-tile .cap{ font-size:10px; }

  .viewer{ max-height: calc(100dvh - 20px); }
  .viewer-head{ padding:10px 10px 0; }
  .vh-actions{
    width:100%;
    flex-wrap:nowrap;
    overflow:auto;
    -webkit-overflow-scrolling: touch;
    gap:8px;
    padding-bottom:6px;
  }
  .vh-actions::-webkit-scrollbar{ height:8px; }
  .vh-actions::-webkit-scrollbar-thumb{ background: var(--a10); border-radius: 999px; }
}

/* WebData charts */
.wd-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.wd-range{ display:flex; gap:8px; flex-wrap:wrap; }
.spark{
  width:100%;
  height:46px;
  margin-top:10px;
  display:block;
}
.spark .bg{ stroke: var(--a08); stroke-width: 2; fill: none; }
.spark .ln{ stroke: rgba(var(--accent-rgb),.92); stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.spark .fill{ fill: rgba(var(--accent-rgb),.10); stroke: none; }
.tile .s.ok{ color: rgba(155,240,194,.92); }
.tile .s.danger{ color: rgba(255,123,123,.92); }
.wd-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.wd-list.compact{ gap:6px; }
.wd-rowline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border-radius: 12px;
  border:1px solid var(--a10);
  background: var(--a04);
}
.wd-lbl{
  min-width:0;
  font-size:12px;
  color: var(--ink);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.wd-lbl .link{
  display:inline-block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.wd-insight{
  margin-top:12px;
  border-radius: 18px;
  border:1px solid var(--a12);
  background: rgba(16,22,18,.26);
  padding:12px;
}
.scan-stage{
  margin-top:10px;
  border-radius: 18px;
  border:1px solid var(--a12);
  background:
    radial-gradient(900px 380px at 10% 0%, rgba(var(--accent-rgb),.14), rgba(var(--accent-rgb),0) 55%),
    rgba(16,22,18,.30);
  padding:12px;
  overflow:hidden;
}
.traffic-modal-body .scan-stage{ margin-top:12px; }
.traffic-modal-body .wd-insight{ margin-top:12px; }
.scan-svg{ width:160px; height:160px; display:block; }
.beam{ transform-origin: 80px 80px; animation: beam 1.2s linear infinite; }
@keyframes beam{ 0%{ transform: rotate(0deg); opacity:.7; } 100%{ transform: rotate(360deg); opacity:.7; } }
.blip{ animation: blip 1.1s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes blip{ 0%{ opacity:.1; transform: scale(.9);} 50%{ opacity:.85; transform: scale(1.05);} 100%{ opacity:.12; transform: scale(.92);} }

/* Robot painter loader */
.paint-stage{
  margin-top:10px;
  border-radius: 18px;
  border:1px solid var(--a12);
  background:
    radial-gradient(900px 380px at 10% 0%, rgba(var(--accent-rgb),.16), rgba(var(--accent-rgb),0) 55%),
    rgba(16,22,18,.30);
  padding:12px;
  overflow:hidden;
}
.paint-row{ display:grid; grid-template-columns: 160px 1fr; gap:12px; align-items:center; }
.paint-svg{ width:160px; height:160px; display:block; }
.paint-copy .t{ font-weight:900; letter-spacing:.2px; }
.paint-copy .m{ margin-top:6px; color:var(--muted); font-size:12px; line-height:1.35; }
.paint-bar{
  margin-top:10px;
  height:10px;
  border-radius:999px;
  border:1px solid var(--a12);
  background: rgba(0,0,0,.20);
  overflow:hidden;
}
.paint-bar > i{
  display:block;
  height:100%;
  width:36%;
  background: linear-gradient(90deg, rgba(var(--accent-rgb),.0), rgba(var(--accent-rgb),.80), rgba(var(--accent-rgb),.0));
  transform: translateX(-60%);
  animation: paintbar 1.05s ease-in-out infinite;
}
@keyframes paintbar{
  0%{ transform: translateX(-60%); opacity:.6; }
  50%{ opacity:1; }
  100%{ transform: translateX(260%); opacity:.6; }
}
.splats circle{ transform-origin: 50% 50%; animation: splat 1.0s ease-in-out infinite; }
.splats circle:nth-child(2){ animation-delay:.12s; }
.splats circle:nth-child(3){ animation-delay:.24s; }
.splats circle:nth-child(4){ animation-delay:.36s; }
@keyframes splat{
  0%{ transform: scale(.6); opacity:.0; }
  30%{ opacity: .9; }
  60%{ transform: scale(1.05); opacity:.55; }
  100%{ transform: scale(.9); opacity:.05; }
}
.arm{ transform-origin: 80px 62px; animation: arm 1.0s ease-in-out infinite; }
@keyframes arm{
  0%{ transform: rotate(-8deg); }
  50%{ transform: rotate(12deg); }
  100%{ transform: rotate(-8deg); }
}

/* Robot-forge loader (uses paint-stage layout) */
.forge-arm{ transform-origin: 140px 84px; animation: forgearm 1.05s ease-in-out infinite; }
@keyframes forgearm{
  0%{ transform: rotate(-10deg) translateY(0px); }
  50%{ transform: rotate(8deg) translateY(-2px); }
  100%{ transform: rotate(-10deg) translateY(0px); }
}
.forge-sparks{ transform-origin: 172px 96px; animation: forgesparks .75s ease-in-out infinite; }
@keyframes forgesparks{
  0%{ opacity:.10; transform: scale(.9); }
  40%{ opacity:.95; transform: scale(1.05); }
  100%{ opacity:.15; transform: scale(.95); }
}

@media (max-width: 860px){
  .media-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paint-row{ grid-template-columns: 1fr; }
  .paint-svg{ width:140px; height:140px; }
}

.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono);
  font-size:11px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--a12);
  background: rgba(0,0,0,.14);
  color: var(--ink);
  opacity:.86;
}
.badge.mint{ border-color: rgba(var(--accent-rgb),.26); background: rgba(var(--accent-rgb),.10); }
.badge.warn{ border-color: rgba(255,210,138,.26); background: rgba(255,210,138,.10); }
.badge.danger{ border-color: rgba(255,123,123,.26); background: rgba(255,123,123,.10); }
.badge.ok{ border-color: rgba(155,240,194,.26); background: rgba(155,240,194,.10); }

.pills{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.pill{
  font-family:var(--mono);
  font-size:11px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(var(--accent-rgb),.22);
  background: rgba(var(--accent-rgb),.10);
  color: var(--ink);
  opacity:.86;
}

/* Segmented toggles (list/cards) */
.seg{
  display:inline-flex;
  border-radius: 999px;
  border:1px solid var(--a12);
  background: rgba(0,0,0,.14);
  overflow:hidden;
}
.seg button{
  appearance:none;
  border:0;
  background: transparent;
  color: var(--ink);
  opacity:.86;
  font-family: var(--mono);
  font-size:11px;
  padding:7px 10px;
  cursor:pointer;
}
.seg button.active{
  background: rgba(var(--accent-rgb),.14);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.18) inset;
}
.seg button:hover{ background: rgba(16,22,18,.30); }

/* Card grids */
.cardgrid{
  margin-top:12px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
}
.pgrid .cardgrid{ grid-template-columns: 1fr; }
@media (max-width: 860px){
  .cardgrid{ grid-template-columns: 1fr; }
}
.cardtile{
  position:relative;
  overflow:hidden;
  border-radius: 18px;
  border:1px solid var(--a12);
  background: rgba(16,22,18,.30);
  padding:12px;
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.cardtile.proj .proj-prog{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, var(--ppriA, rgba(var(--accent-rgb),.16)) 0 var(--ppct, 0%), rgba(0,0,0,0) var(--ppct, 0%) 100%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 12px, rgba(255,255,255,0) 12px 24px);
  opacity:.38;
  z-index:0;
}
.cardtile.proj .proj-prog::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  height:4px;
  width: var(--ppct, 0%);
  background: linear-gradient(90deg, rgba(var(--accent-rgb),.0), rgba(var(--accent-rgb),.90));
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.16);
}
.cardtile.proj > .proj-prog{ z-index:0; }
.cardtile.proj .proj-mark{
  position:absolute;
  inset:-34px -34px auto auto;
  width:260px;
  height:260px;
  background-image: var(--pmark);
  background-size: contain;
  background-repeat:no-repeat;
  background-position: top right;
  opacity:.10;
  filter: blur(.2px) saturate(1.05) contrast(1.05);
  pointer-events:none;
  transform: rotate(8deg);
  z-index:0;
}
.cardtile::before{
  content:"";
  position:absolute;
  inset:-18px;
  background-image: var(--cimg);
  background-size: cover;
  background-position: center;
  opacity: .12;
  filter: blur(14px) saturate(1.15) contrast(1.05);
  transform: scale(1.06);
  pointer-events:none;
}
.cardtile::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.52));
  pointer-events:none;
}
.cardtile.proj::after{
  background:
    radial-gradient(860px 520px at 70% 0%, var(--ppriA, rgba(var(--accent-rgb),.14)), transparent 62%),
    radial-gradient(760px 520px at 15% 15%, rgba(0,0,0,.12), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.56));
}
.cardtile > *{ position:relative; z-index:1; }
.cardtile.proj > .proj-prog{ position:absolute; inset:0; z-index:0; }
.cardtile:hover{ transform: translateY(-1px); border-color: rgba(var(--accent-rgb),.26); background: rgba(16,22,18,.46); }
.cardtile.active{ border-color: rgba(var(--accent-rgb),.52); background: rgba(var(--accent-rgb),.10); }
.cardtile.proj:hover{ border-color: rgba(var(--ppriRgb, var(--accent-rgb)),.40); }
.cardtile.proj.active{ border-color: rgba(var(--ppriRgb, var(--accent-rgb)),.62); background: rgba(var(--ppriRgb, var(--accent-rgb)),.08); }
.cardtile .ct-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.cardtile .ct-top .donechip{ width:26px; height:26px; box-shadow:none; }
.cardtile .ct-top .donechip::after{ width:9px; height:5px; }
.itemcard .donechip{
  position:absolute;
  left:12px;
  top:12px;
  z-index: 2;
}
.itemcard .ct-top{ padding-left: 34px; }
.cardtile .ct-left{ display:flex; align-items:center; gap:10px; min-width:0; }
.cardtile .ct-ico{
  width:28px;
  height:28px;
  border-radius: 12px;
  border:1px solid var(--a14);
  background: rgba(0,0,0,.18);
  object-fit: cover;
  flex:0 0 auto;
}
.cardtile .ct-title{ font-weight: 950; font-size: 12px; letter-spacing:.2px; }
.cardtile .ct-sub{ margin-top:6px; font-size:12px; color: var(--muted); line-height:1.35; }

/* Project palette pickers */
.palette{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius: 18px;
  border:1px solid var(--a12);
  background: rgba(0,0,0,.14);
}
.palette .sw{
  width:18px;
  height:18px;
  border-radius: 999px;
  border:1px solid var(--a18);
  box-shadow: 0 0 0 3px rgba(0,0,0,.18);
  flex:0 0 auto;
}

/* Project palette editor (stronger UX) */
.pal-coll{
  margin-top:8px;
}
.pal-coll-btn{
  width:100%;
  text-align:left;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-radius: 22px;
  border:1px solid var(--a12);
  background: linear-gradient(180deg, var(--a07), var(--a03));
  color: var(--ink);
  cursor:pointer;
}
.pal-coll-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.pal-coll-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}
.pal-coll .sw{
  width:18px;
  height:18px;
  border-radius: 999px;
  border:1px solid var(--a18);
  box-shadow: 0 0 0 3px rgba(0,0,0,.18);
  flex:0 0 auto;
}
.pal-coll .pal-title{ font-weight: 950; font-size:12px; letter-spacing:.2px; }
.pal-coll .chev{ font-family: var(--mono); font-size: 11px; opacity:.86; }
.pal-coll-btn:hover{ transform: translateY(-1px); border-color: rgba(var(--accent-rgb),.26); background: linear-gradient(180deg, var(--a10), var(--a04)); }

.pal-editor{
  margin-top:8px;
  border-radius: 22px;
  border:1px solid var(--a12);
  background: linear-gradient(180deg, var(--a07), var(--a03));
  padding:12px;
  overflow:hidden;
  position:relative;
}
.pal-editor::before{
  content:"";
  position:absolute;
  inset:-60px;
  background:
    radial-gradient(520px 260px at 10% 10%, var(--ppriA, rgba(var(--accent-rgb),.12)), rgba(var(--accent-rgb),0) 60%),
    radial-gradient(520px 260px at 90% 20%, rgba(0,0,0,.14), rgba(0,0,0,0) 60%),
    linear-gradient(90deg, rgba(0,0,0,.06), rgba(0,0,0,0));
  opacity:.95;
  filter: blur(18px);
  pointer-events:none;
}
.pal-editor > *{ position:relative; z-index:1; }
.pal-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.pal-preview{ display:flex; align-items:center; gap:10px; min-width:0; }
.pal-preview .sw.big{
  width:34px;
  height:34px;
  border-radius: 14px;
  border:1px solid var(--a14);
  box-shadow: 0 14px 34px rgba(0,0,0,.20);
}
.pal-title{ font-weight: 950; font-size:12px; letter-spacing:.2px; }
.pal-actions{ justify-content:flex-end; }
.pal-grid{ margin-top:12px; display:grid; gap:10px; }
.pal-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  padding:10px;
  border-radius: 18px;
  border:1px solid var(--a10);
  background: rgba(0,0,0,.10);
}
.pal-row .sw{
  width:18px;
  height:18px;
  border-radius: 999px;
  border:1px solid var(--a14);
  background: rgba(0,0,0,.12);
}
.pal-swatches{
  margin-top:12px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.pal-swatch{
  appearance:none;
  border:1px solid var(--a12);
  background: rgba(0,0,0,.12);
  color: var(--ink);
  border-radius: 999px;
  padding:8px 10px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:7px;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.pal-swatch.active{
  border-color: rgba(var(--accent-rgb),.45);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.16) inset, 0 10px 24px rgba(0,0,0,.22);
  background: linear-gradient(180deg, rgba(var(--accent-rgb),.10), rgba(0,0,0,.12));
}
.pal-swatch:hover{ transform: translateY(-1px); border-color: rgba(var(--accent-rgb),.26); background: rgba(0,0,0,.18); }
.pal-swatch .sw{
  width:12px;
  height:12px;
  border-radius: 999px;
  border:1px solid var(--a12);
}

/* Ops Builder */
.opsb{
  display:grid;
  grid-template-columns: 1fr 1.2fr 1.4fr;
  gap:12px;
}
@media (max-width: 980px){
  .opsb{ grid-template-columns: 1fr; }
}
.opsb-col .panel{
  border:1px solid var(--a10);
  background: rgba(0,0,0,.12);
  border-radius: 18px;
  padding:12px;
}
.opsb-blocks{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.opsb-block{
  border:1px solid var(--a12);
  background: rgba(0,0,0,.14);
  border-radius: 18px;
  padding:12px;
  cursor: grab;
}
.opsb-block:active{ cursor: grabbing; }
.opsb-iframe{
  width:100%;
  height: 520px;
  border:1px solid var(--a12);
  background: rgba(0,0,0,.12);
  border-radius: 18px;
}

@media (max-width: 520px){
  .pal-row .small{ width:100%; }
}

/* Action grid */
.action-grid{
  margin-top:12px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:8px;
}
.action-btn{
  position:relative;
  overflow:hidden;
  --ag-rgb: var(--accent-rgb);
  text-align:left;
  padding:10px 10px;
  border-radius:16px;
  border:1px solid var(--a12);
  background: rgba(16,22,18,.30);
  cursor:pointer;
  transition: border-color .12s ease, background .12s ease, transform .12s ease;
}
.action-btn::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(220px 120px at 0% 0%, rgba(var(--ag-rgb), .18), rgba(var(--ag-rgb), 0) 60%),
    linear-gradient(180deg, rgba(var(--ag-rgb), .06), rgba(var(--ag-rgb), 0));
  opacity:.9;
}
.action-btn[data-aid="assistant"]{ --ag-rgb: 123,189,255; }
.action-btn[data-aid="generate_image"]{ --ag-rgb: 255,140,190; }
.action-btn[data-aid="upload"]{ --ag-rgb: 255,210,138; }
.action-btn[data-aid="publish"]{ --ag-rgb: 112,224,210; }
.action-btn[data-aid="support_ticket"]{ --ag-rgb: 255,164,123; }
.action-btn[data-aid="set_due"]{ --ag-rgb: 182,165,255; }
.action-btn[data-aid="duplicate"]{ --ag-rgb: 156,219,255; }
.action-btn[data-aid="export_item"]{ --ag-rgb: 170,236,188; }
.action-btn[data-aid="archive"]{ --ag-rgb: 200,205,214; }
.action-btn:hover{ border-color: rgba(var(--accent-rgb),.30); background: rgba(16,22,18,.50); transform: translateY(-1px); }
.action-btn:active{ transform: translateY(0px); }
.action-btn.locked{ opacity:.72; border-style:dashed; }
.action-btn.locked:hover{ border-color: var(--a18); background: rgba(16,22,18,.38); transform:none; }
.action-btn .t{ position:relative; z-index:1; font-weight:900; font-size:12px; display:flex; align-items:center; gap:8px; }
.action-btn .d{ position:relative; z-index:1; margin-top:4px; font-size:11px; color: var(--muted); line-height:1.35; }
.action-badge{
  min-width:34px;
  height:22px;
  padding:0 8px;
  border-radius:999px;
  border:1px solid rgba(var(--ag-rgb), .34);
  background: rgba(var(--ag-rgb), .16);
  color: var(--ink);
  font-family: var(--mono);
  font-weight:900;
  font-size:10px;
  letter-spacing:.45px;
  line-height:20px;
  text-align:center;
  flex:0 0 auto;
}
.kbd{
  margin-left:auto;
  font-family:var(--mono);
  font-size:10px;
  padding:2px 6px;
  border-radius:999px;
  border:1px solid var(--a10);
  background: rgba(0,0,0,.12);
  color: var(--ink);
  opacity:.82;
}

/* Key-values */
.kv{ display:flex; flex-direction:column; gap:10px; }
.kv label{ font-size:11px; color: var(--muted); font-weight:900; letter-spacing:.2px; }
.kv .value{
  font-size:12px;
  color: var(--ink);
  line-height:1.5;
  background: rgba(0,0,0,.14);
  border:1px solid var(--a10);
  padding:10px 12px;
  border-radius: var(--r14);
}

/* Timeline */
.timeline{ margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.event{
  border:1px solid var(--a10);
  background: rgba(0,0,0,.14);
  border-radius: 16px;
  padding:10px 12px;
}
.event .t{ font-size:12px; font-weight:900; }
.event .m{ margin-top:4px; font-size:12px; color: var(--muted); line-height:1.35; }
.event .ts{ margin-top:6px; font-size:11px; color: var(--mute2); font-family:var(--mono); }

/* Modal */
.modal-backdrop{
  position:fixed; inset:0;
  background: rgba(0,0,0,.58);
  display:grid; place-items:center;
  padding:16px;
  /* Above mobile sheet (z=80) so Actions launched from the sheet layer correctly. */
  z-index: 120;
}
.modal{
  width:min(980px, 96vw);
  border-radius: 22px;
  border:1px solid var(--a12);
  background:
    radial-gradient(1000px 420px at 10% 0%, rgba(var(--accent-rgb),.12), rgba(var(--accent-rgb),0) 58%),
    linear-gradient(180deg, var(--panel2), var(--panel));
  box-shadow: 0 30px 90px rgba(0,0,0,.70);
  backdrop-filter: blur(18px);
  overflow:hidden;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  display:flex;
  flex-direction:column;
}
.modal-head{
  padding:14px 14px;
  border-bottom:1px solid var(--a08);
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
}
.modal-head .h{ font-weight:950; font-size:13px; letter-spacing:.2px; }
.modal-body{
  padding:14px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}
.modal-body.single{ grid-template-columns: 1fr; }
.log{
  font-family:var(--mono);
  font-size:11px;
  white-space:pre-wrap;
  background: linear-gradient(180deg, var(--a06), var(--a03));
  border:1px solid var(--a10);
  border-radius: 16px;
  padding:10px;
  min-height: 220px;
  color: var(--ink);
  opacity:.90;
}
.small{ font-size:11px; color: var(--muted); line-height:1.35; }
.sep{ height:1px; background: var(--a08); margin:10px 0; }

/* Footer */
.footer{
  margin-top:14px;
  padding:10px 12px;
  border-radius: var(--r18);
  border:1px solid var(--a10);
  background: rgba(0,0,0,.10);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

/* Mobile bottom nav */
.bottomnav{
  display:none;
}
.bottomnav a{ text-decoration:none; color:var(--muted); }
.bottomnav a.active{ color: var(--ink); }

/* Hosting dashboard */
.dhv-host{
  position:relative;
  overflow:hidden;
}
.dhv-host{
  --dhv-accent: #22c7c7;
  --dhv-accent2: rgba(34,199,199,.18);
}
.dhv-host::before{
  content:"";
  position:absolute;
  inset:-40px -40px auto auto;
  width:520px;
  height:520px;
  background-image: url("dhv-mark.png");
  background-size: contain;
  background-repeat:no-repeat;
  background-position: top right;
  opacity:.09;
  filter: blur(.2px) saturate(1.05);
  pointer-events:none;
  transform: rotate(8deg);
}
.dhv-host::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 540px at 70% 0%, rgba(34,199,199,.16), transparent 62%),
    radial-gradient(840px 520px at 20% 15%, rgba(34,199,199,.08), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,0));
  pointer-events:none;
}
.dhv-host > *{ position:relative; z-index:1; }
.dhv-host .link{ color: rgba(34,199,199,.98); }
.dhv-host .btn.primary{
  border-color: rgba(34,199,199,.45);
  background: linear-gradient(180deg, rgba(34,199,199,.26), rgba(34,199,199,.10));
}
.dhv-host .tile{ border-color: rgba(34,199,199,.18); }
.dhv-host .table{ border-color: rgba(34,199,199,.14); }
.dhv-host .status-pill.mint{ border-color: rgba(34,199,199,.22); background: rgba(34,199,199,.10); }

.dash{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.dash-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.dash-title h2{ margin:0; font-size:13px; letter-spacing:.2px; }
.dash-title .subtext{ margin-top:4px; }
.tiles{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:10px;
}
.tiles.tiles3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tiles.tiles4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tile{
  border:1px solid var(--a12);
  background: rgba(0,0,0,.14);
  border-radius: 18px;
  padding:12px;
}
.tile .k{ font-size:11px; color: var(--muted); font-family: var(--mono); }
.tile .v{ margin-top:6px; font-size:18px; font-weight:950; letter-spacing:.2px; }
.tile .s{ margin-top:6px; font-size:11px; color: var(--mute2); }

.split{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap:14px;
}

.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius: 18px;
  border:1px solid var(--a12);
  background: rgba(0,0,0,.14);
}

@media (max-width: 720px){
  .table{ display:block; overflow:auto; -webkit-overflow-scrolling: touch; }
  .table th, .table td{ white-space: nowrap; }
}
.table th, .table td{
  padding:10px 12px;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--a08);
  font-size:12px;
}
.table th{
  font-size:11px;
  color: var(--muted);
  font-family: var(--mono);
  letter-spacing:.2px;
  background: var(--a03);
}
.table tr:last-child td{ border-bottom:none; }
.table .muted{ color: var(--muted); }

.link{
  color: rgba(var(--accent-rgb),.96);
  text-decoration:none;
}
.link:hover{ text-decoration:underline; }

.status-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family: var(--mono);
  font-size:11px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--a12);
  background: rgba(0,0,0,.12);
}
.status-pill.ok{ border-color: rgba(155,240,194,.26); background: rgba(155,240,194,.10); }
.status-pill.warn{ border-color: rgba(255,210,138,.26); background: rgba(255,210,138,.10); }
.status-pill.danger{ border-color: rgba(255,123,123,.26); background: rgba(255,123,123,.10); }
.status-pill.mint{ border-color: rgba(var(--accent-rgb),.26); background: rgba(var(--accent-rgb),.10); }

@media (max-width: 980px){
  .tiles{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles.tiles3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles.tiles4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split{ grid-template-columns: 1fr; }
}

/* Updates (changelog) */
.upd-hero{
  position:relative;
  overflow:hidden;
  border-radius: var(--r22);
  border:1px solid var(--a12);
  background: linear-gradient(180deg, var(--a07), var(--a03));
  padding:14px;
}
.upd-hero::before{
  content:"";
  position:absolute;
  inset:-120px;
  background:
    radial-gradient(900px 420px at 12% 0%, rgba(var(--accent-rgb),.14), rgba(var(--accent-rgb),0) 58%),
    radial-gradient(900px 420px at 92% 10%, rgba(var(--accent-rgb),.07), rgba(var(--accent-rgb),0) 60%),
    repeating-linear-gradient(90deg, var(--a03), var(--a03) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 12px);
  opacity:.9;
  filter: blur(14px);
  pointer-events:none;
}
.upd-hero > *{ position:relative; z-index:1; }
.upd-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.upd-title{ margin:0; font-size:13px; letter-spacing:.2px; }
.upd-sub{ margin-top:4px; color: var(--muted); font-size:12px; line-height:1.35; }
.upd-meta{ margin-top:10px; }
.upd-pulse{
  width:8px; height:8px; border-radius:999px;
  background: rgba(var(--accent-rgb),.92);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb),.14);
  display:inline-block;
}

.cl{
  position:relative;
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.cl::before{
  content:"";
  position:absolute;
  left:28px;
  top:6px;
  bottom:6px;
  width:2px;
  background: linear-gradient(180deg, rgba(var(--accent-rgb),.22), var(--a08));
}
.cl-item{
  display:grid;
  grid-template-columns: 56px 1fr;
  gap:12px;
  align-items:flex-start;
}
.cl-art{
  width:44px;
  height:44px;
  border-radius: 16px;
  justify-self:center;
  margin-top:6px;
  border:1px solid var(--a12);
  box-shadow: var(--shadow2);
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(18px 18px at 68% 30%, rgba(var(--accent-rgb),.55), rgba(var(--accent-rgb),0) 60%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,0)),
    linear-gradient(180deg, rgba(80,130,255,.18), rgba(0,0,0,0));
}
.cl-art::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  width:10px;
  height:10px;
  border-radius:999px;
  background: rgba(var(--accent-rgb),.92);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb),.14);
}
.cl-art::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.92;
  pointer-events:none;
}

/* Time-of-day scenes (CSS art, not just icons) */
.cl-art[data-tod="morning"]::before{
  background:
    radial-gradient(22px 22px at 70% 28%, rgba(255,210,138,.95), rgba(255,210,138,0) 62%),
    radial-gradient(120px 70px at 50% 88%, rgba(34,199,199,.12), rgba(0,0,0,0) 70%),
    linear-gradient(180deg, rgba(255,210,138,.30), rgba(140,202,175,.10) 55%, rgba(0,0,0,0) 100%),
    linear-gradient(180deg, rgba(12,18,16,.18), rgba(12,18,16,0) 70%);
}
.cl-art[data-tod="afternoon"]::before{
  background:
    radial-gradient(24px 24px at 68% 30%, rgba(255,255,255,.92), rgba(255,255,255,0) 62%),
    radial-gradient(140px 80px at 50% 92%, rgba(var(--accent-rgb),.14), rgba(0,0,0,0) 72%),
    linear-gradient(180deg, rgba(45,150,255,.26), rgba(140,202,175,.10) 58%, rgba(0,0,0,0) 100%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.06) 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 12px);
}
.cl-art[data-tod="evening"]::before{
  background:
    radial-gradient(24px 24px at 70% 34%, rgba(255,123,123,.92), rgba(255,123,123,0) 62%),
    radial-gradient(160px 90px at 50% 96%, rgba(47,119,255,.12), rgba(0,0,0,0) 74%),
    linear-gradient(180deg, rgba(255,123,123,.24), rgba(255,210,138,.14) 44%, rgba(140,202,175,.08) 78%, rgba(0,0,0,0) 100%),
    linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,0) 70%);
}
.cl-art[data-tod="night"]::before{
  background:
    radial-gradient(20px 20px at 70% 30%, rgba(231,234,233,.82), rgba(231,234,233,0) 62%),
    radial-gradient(1px 1px at 18% 22%, rgba(255,255,255,.70), rgba(255,255,255,0) 60%),
    radial-gradient(1px 1px at 38% 18%, rgba(255,255,255,.65), rgba(255,255,255,0) 60%),
    radial-gradient(1px 1px at 54% 26%, rgba(255,255,255,.62), rgba(255,255,255,0) 60%),
    radial-gradient(1px 1px at 72% 20%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%),
    radial-gradient(140px 80px at 50% 96%, rgba(var(--accent-rgb),.12), rgba(0,0,0,0) 72%),
    linear-gradient(180deg, rgba(10,14,32,.42), rgba(10,14,32,.12) 60%, rgba(0,0,0,0) 100%);
}
.cl-main{
  position:relative;
  border:1px solid var(--a12);
  background: linear-gradient(180deg, var(--a07), var(--a03));
  border-radius: 18px;
  padding:12px 12px;
  overflow:hidden;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.cl-main::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(700px 280px at 10% 0%, rgba(var(--accent-rgb),.10), rgba(var(--accent-rgb),0) 62%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,0));
  opacity:.65;
  pointer-events:none;
}
.cl-main::after{
  content:"";
  position:absolute;
  inset:-40px 0 auto 0;
  height:54px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb),0), rgba(var(--accent-rgb),.18), rgba(var(--accent-rgb),0));
  transform: translateX(-60%);
  opacity:.0;
  pointer-events:none;
}
.cl-item:hover .cl-main{
  transform: translateY(-1px);
  border-color: rgba(var(--accent-rgb),.26);
  background: linear-gradient(180deg, var(--a08), var(--a03));
}
.cl-item:hover .cl-main::after{
  opacity:.7;
  animation: updScan 1.2s ease-in-out infinite;
}
@keyframes updScan{
  0%{ transform: translateX(-60%); }
  100%{ transform: translateX(260%); }
}
.cl-main > *{ position:relative; z-index:1; }
.cl-top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.cl-id{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius: 999px;
  border:1px solid var(--a12);
  background: rgba(0,0,0,.12);
  cursor:pointer;
  user-select:none;
  transition: border-color .12s ease, background .12s ease, transform .12s ease;
}
.cl-id:hover{ border-color: rgba(var(--accent-rgb),.26); background: rgba(0,0,0,.18); transform: translateY(-1px); }
.cl-id .tag{
  font-family: var(--mono);
  font-size:10px;
  padding:2px 6px;
  border-radius:999px;
  border:1px solid rgba(var(--accent-rgb),.22);
  background: rgba(var(--accent-rgb),.10);
}
.cl-date{ color: var(--muted); font-family: var(--mono); font-size:11px; }
.cl-subject{
  margin-top:8px;
  font-size:12px;
  color: var(--ink);
  font-weight: 950;
  letter-spacing:.2px;
  line-height:1.35;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.cl-note{ margin-top:8px; color: var(--muted); font-size:12px; line-height:1.35; }

/* Support */
.sup{ position:relative; }
.sup-grid{
  display:grid;
  grid-template-columns: 360px 1fr;
  gap:12px;
  align-items:stretch;
}
.sup-grid.narrow{ grid-template-columns: 1fr; }
.sup-list,
.sup-detail{
  border:1px solid var(--a12);
  background: linear-gradient(180deg, var(--a06), var(--a03));
  border-radius: 20px;
  padding:12px;
  min-height: 520px;
}
.sup-filters{ width:100%; }
.sup-filters .field{ flex:1; min-width: 0; max-width: 100%; }
.sup-items{ margin-top:10px; display:flex; flex-direction:column; gap:10px; }
.sup-item{
  width:100%;
  max-width:100%;
  text-align:left;
  border-radius: 18px;
  border:1px solid var(--a12);
  background: linear-gradient(180deg, var(--a07), var(--a03));
  padding:12px;
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
  overflow:hidden;
}
.sup-item:hover{
  transform: translateY(-1px);
  border-color: rgba(var(--accent-rgb),.26);
  background: linear-gradient(180deg, var(--a08), var(--a03));
}
.sup-item.active{
  border-color: rgba(var(--accent-rgb),.42);
  box-shadow: 0 0 0 6px rgba(var(--accent-rgb),.08);
}
.sup-item.ok{ border-color: rgba(155,240,194,.26); }
.sup-item.warn{ border-color: rgba(255,210,138,.26); }
.sup-item.danger{ border-color: rgba(255,123,123,.26); }
.sup-item.closed{ border-color: var(--a12); opacity:.95; }
.sup-item-top{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.sup-item-subject{
  flex: 1 1 auto;
  min-width:0;
  font-weight: 1000;
  letter-spacing:.2px;
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.sup-item-top .status-pill{ flex: 0 0 auto; }
.sup-item-meta{ margin-top:6px; font-size:12px; color: var(--muted); }

.sup-detail-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  padding-bottom:10px;
  border-bottom:1px solid var(--a10);
  margin-bottom:10px;
}
.sup-detail-subject{
  margin-top:8px;
  font-weight: 1000;
  letter-spacing:.2px;
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.sup-thread{
  height: 360px;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px 2px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.sup-msg{
  border-radius: 18px;
  border:1px solid var(--a12);
  background: linear-gradient(180deg, var(--a07), var(--a03));
  padding:10px 12px;
}
.sup-msg.from-support{
  border-color: rgba(var(--accent-rgb),.22);
  background:
    radial-gradient(700px 240px at 10% 0%, rgba(var(--accent-rgb),.12), rgba(var(--accent-rgb),0) 62%),
    linear-gradient(180deg, var(--a07), var(--a03));
}
.status-pill.closed{
  border-color: var(--a12);
  background: var(--a06);
  opacity:.88;
}
.sup-msg-head{ display:flex; justify-content:space-between; gap:10px; align-items:center; flex-wrap:wrap; }
.sup-msg-name{ font-weight: 950; font-size: 12px; }
.sup-msg-date{ font-size: 11px; }
.sup-msg-body{
  margin-top:6px;
  font-size:12px;
  line-height:1.45;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.sup-msg-body a{
  color: rgba(var(--accent-rgb), .96);
  text-decoration:none;
  border-bottom: 1px solid rgba(var(--accent-rgb), .28);
}
.sup-msg-body a:hover{ text-decoration:underline; }
.sup-reply{ margin-top:10px; }

@media (max-width: 980px){
  .sup-filters{
    display:grid;
    grid-template-columns: 1fr;
    gap:10px;
  }
  .sup-list, .sup-detail{ min-height: auto; }
  .sup-thread{ height: 46vh; height: 46dvh; }
}

@media (max-width: 980px){
  body{ overflow:auto; }
  .app{ grid-template-columns: 1fr; }
  .sidebar{ display:none; }
  .main{
    padding:14px 14px calc(96px + env(safe-area-inset-bottom));
  }
  .topbar{
    top:0;
    margin-bottom:12px;
  }
  .grid2{ grid-template-columns: 1fr; }
  .footer{ flex-direction:column; align-items:flex-start; }

  .bottomnav{
    display:flex;
    position:fixed;
    left:max(14px, env(safe-area-inset-left));
    right:max(14px, env(safe-area-inset-right));
    bottom:max(14px, env(safe-area-inset-bottom));
    z-index: 40;
    gap:6px;
    padding:8px;
    border-radius: 22px;
    border:1px solid var(--a10);
    background: linear-gradient(180deg, var(--a07), var(--a03));
    backdrop-filter: blur(14px);
    box-shadow: var(--shadow2);
  }
  .bottomnav a,
  .bottomnav button{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:8px 6px;
    border-radius: 16px;
    border:1px solid var(--a08);
    background: rgba(0,0,0,.10);
    font-size:11px;
    color: var(--ink);
    text-decoration:none;
    cursor:pointer;
  }
  .bottomnav button{ appearance:none; -webkit-appearance:none; }
  .bottomnav a.primary{
    transform: translateY(-6px);
    border-color: rgba(var(--accent-rgb),.42);
    background:
      radial-gradient(70px 34px at 50% 0%, rgba(var(--accent-rgb),.22), rgba(var(--accent-rgb),0) 62%),
      rgba(0,0,0,.14);
    box-shadow: 0 12px 30px rgba(0,0,0,.42);
  }
  .bottomnav a.primary .ico{ transform: scale(1.06); }
  .bottomnav a.active,
  .bottomnav button.on{
    border-color: rgba(var(--accent-rgb),.34);
    background: rgba(var(--accent-rgb),.10);
  }
  .bottomnav a.primary.active{
    border-color: rgba(var(--accent-rgb),.55);
    background:
      radial-gradient(70px 34px at 50% 0%, rgba(var(--accent-rgb),.26), rgba(var(--accent-rgb),0) 62%),
      rgba(var(--accent-rgb),.10);
  }

  .mnav-backdrop{
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(10px);
    display:flex;
    align-items:flex-end;
    justify-content:center;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
  }
  .mnav-sheet{
    width: min(560px, 100%);
    border-radius: 22px;
    border:1px solid var(--a14);
    background:
      radial-gradient(900px 360px at 10% 0%, rgba(var(--accent-rgb),.14), rgba(var(--accent-rgb),0) 60%),
      linear-gradient(180deg, var(--panel2), var(--panel));
    box-shadow: var(--shadow);
    padding: 14px;
  }
  .mnav-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .mnav-title{ font-weight: 950; letter-spacing:.2px; }
  .mnav-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
  .mnav-item{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border-radius: 18px;
    border:1px solid var(--a10);
    background: rgba(0,0,0,.10);
    text-decoration:none;
    color: var(--ink);
    font-weight: 900;
    font-size: 12px;
    letter-spacing:.2px;
  }
  .mnav-item:active{ transform: translateY(1px); }
  .tb-notif{
    right: 0;
    left: 0;
    margin: 0 auto;
  }

}

/* Toasts */
.toasts{
  position:fixed;
  right:14px;
  bottom:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index: 70;
}
.toast{
  width:min(420px, calc(100vw - 28px));
  border-radius: 18px;
  border:1px solid var(--a12);
  background: linear-gradient(180deg, var(--a07), var(--a03));
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  padding:10px 12px;
}
.toast .t{ font-weight:950; font-size:12px; }
.toast .m{ margin-top:4px; font-size:12px; color: var(--muted); line-height:1.35; }
.toast .b{ margin-top:8px; display:flex; gap:8px; justify-content:flex-end; }

@media (max-width: 980px){
  body{ overflow:auto; }
  .app{ grid-template-columns: 1fr; }
  .grid2{ grid-template-columns: 1fr; }
  .modal-body{
    grid-template-columns: 1fr;
    padding-bottom: calc(104px + env(safe-area-inset-bottom));
  }
}

/* Celebration */
.celebrate{
  position:fixed;
  inset:0;
  z-index: 9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
  background:
    radial-gradient(900px 520px at 50% 35%, var(--celA16, rgba(45,240,179,.16)), rgba(0,0,0,0) 58%),
    radial-gradient(900px 520px at 10% 10%, var(--celB12, rgba(255,209,102,.10)), rgba(0,0,0,0) 55%),
    radial-gradient(900px 520px at 90% 15%, var(--celC12, rgba(123,223,242,.10)), rgba(0,0,0,0) 55%),
    rgba(0,0,0,.66);
  backdrop-filter: blur(10px);
}
.celebrate-bits{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}
.celebrate-bits .bit{
  position:absolute;
  top:-10vh;
  width: var(--s, 10px);
  height: calc(var(--s, 10px) * 1.6);
  background: var(--c, #2df0b3);
  border-radius: var(--br, 999px);
  opacity: 0;
  animation: bitFly var(--d, 1200ms) cubic-bezier(.12,.92,.24,1) forwards;
  will-change: transform, opacity;
}
@keyframes bitFly{
  0%{ transform: translate3d(0,-12vh,0) rotate(0deg); opacity: 0; }
  10%{ opacity: 1; }
  100%{ transform: translate3d(var(--dx, 0vw), 112vh, 0) rotate(var(--r, 0deg)); opacity: .98; }
}
.celebrate-card{
  position:relative;
  max-width: 520px;
  width: 100%;
  border-radius: 22px;
  border: 1px solid var(--a16);
  background:
    radial-gradient(900px 360px at 10% 0%, var(--celA16, rgba(45,240,179,.16)), rgba(0,0,0,0) 58%),
    radial-gradient(700px 300px at 100% 0%, var(--a10), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, var(--panel2), var(--panel));
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  padding: 18px 16px 16px;
  text-align:center;
}
.celebrate-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--celA26, rgba(45,240,179,.26)), rgba(255,255,255,0) 45%, var(--celB16, rgba(255,209,102,.16)));
  opacity:.42;
  pointer-events:none;
  mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  padding: 1px;
  box-sizing: border-box;
}
.celebrate-badge{
  width: 54px;
  height: 54px;
  margin: 0 auto 10px;
  border-radius: 18px;
  border:1px solid var(--celA26, rgba(var(--accent-rgb),.26));
  background: linear-gradient(180deg, var(--a06), var(--a03));
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 0 0 6px var(--celA16, rgba(var(--accent-rgb),.12));
}
.celebrate-badge img{ width: 34px; height: 34px; opacity: .95; }
.celebrate-title{
  font-weight: 1000;
  letter-spacing: .4px;
  font-size: 18px;
}
.celebrate-sub{
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html[data-mode="light"] .celebrate{
  background:
    radial-gradient(900px 520px at 50% 35%, var(--celA16, rgba(var(--accent-rgb),.12)), rgba(0,0,0,0) 58%),
    radial-gradient(900px 520px at 10% 10%, var(--celB12, rgba(0,0,0,.06)), rgba(0,0,0,0) 55%),
    radial-gradient(900px 520px at 90% 15%, var(--celC12, rgba(0,0,0,.05)), rgba(0,0,0,0) 55%),
    rgba(15,22,19,.20);
}
html[data-mode="light"] .celebrate-card{ box-shadow: 0 30px 80px rgba(0,0,0,.20); }

/* Updates: light-mode readability tweaks */
html[data-mode="light"] .status-pill{ background: rgba(255,255,255,.76); }
html[data-mode="light"] .cl-id{ background: rgba(255,255,255,.76); }
html[data-mode="light"] .cl-id:hover{ background: rgba(255,255,255,.92); }
html[data-mode="light"] .cl-main::before{
  background:
    radial-gradient(700px 280px at 10% 0%, rgba(var(--accent-rgb),.10), rgba(var(--accent-rgb),0) 62%),
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,0));
  opacity:.75;
}

/* Light mode: nudge common dark-glass surfaces into lighter panels */
html[data-mode="light"] .btn.ghost{ background: rgba(255,255,255,.76); }
html[data-mode="light"] .field{ background: rgba(255,255,255,.82); }
html[data-mode="light"] .chip{ background: rgba(255,255,255,.74); }
html[data-mode="light"] .tab{ background: rgba(255,255,255,.72); }
html[data-mode="light"] .nav2 a{ background: rgba(255,255,255,.70); }
html[data-mode="light"] .nav2 a:hover{ background: rgba(255,255,255,.84); }
html[data-mode="light"] .hcard{ background: rgba(255,255,255,.74); }
html[data-mode="light"] .donechip{ background: rgba(255,255,255,.78); }
html[data-mode="light"] .seg{ background: rgba(255,255,255,.74); }
html[data-mode="light"] .badge{ background: rgba(255,255,255,.74); }
html[data-mode="light"] .pal-row{ background: rgba(255,255,255,.78); }
html[data-mode="light"] .pal-swatch{ background: rgba(255,255,255,.74); }
html[data-mode="light"] .item{ background: rgba(255,255,255,.74); }
html[data-mode="light"] .item:hover{ background: rgba(255,255,255,.88); }
html[data-mode="light"] .cardtile{ background: rgba(255,255,255,.72); }
html[data-mode="light"] .cardtile:hover{ background: rgba(255,255,255,.86); }
html[data-mode="light"] .action-btn{ background: rgba(255,255,255,.74); }
html[data-mode="light"] .action-btn:hover{ background: rgba(255,255,255,.86); }
html[data-mode="light"] .action-btn::before{
  opacity:.72;
}
html[data-mode="light"] .event{ background: rgba(255,255,255,.74); }
html[data-mode="light"] .kv .value{ background: rgba(255,255,255,.74); }
html[data-mode="light"] .media-tile{ background: rgba(255,255,255,.74); }
html[data-mode="light"] .media-tile:hover{ background: rgba(255,255,255,.86); }
html[data-mode="light"] .item.proj .proj-prog{ opacity:.32; }
html[data-mode="light"] .cardtile.proj .proj-prog{ opacity:.24; }
html[data-mode="light"] .item.proj .proj-prog{ background:
  linear-gradient(90deg, var(--ppriA, rgba(var(--accent-rgb),.12)) 0 var(--ppct, 0%), rgba(0,0,0,0) var(--ppct, 0%) 100%),
  repeating-linear-gradient(135deg, rgba(0,0,0,.04) 0 10px, rgba(0,0,0,0) 10px 20px);
}
html[data-mode="light"] .cardtile.proj .proj-prog{ background:
  linear-gradient(90deg, var(--ppriA, rgba(var(--accent-rgb),.10)) 0 var(--ppct, 0%), rgba(0,0,0,0) var(--ppct, 0%) 100%),
  repeating-linear-gradient(135deg, rgba(0,0,0,.03) 0 12px, rgba(0,0,0,0) 12px 24px);
}

/* Hosting view (light mode readability) */
html[data-mode="light"] .dhv-host::after{
  background:
    radial-gradient(900px 540px at 70% 0%, rgba(34,199,199,.10), transparent 62%),
    radial-gradient(840px 520px at 20% 15%, rgba(34,199,199,.06), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,0));
}
html[data-mode="light"] .dhv-host .tile{ background: rgba(255,255,255,.78); }
html[data-mode="light"] .dhv-host .table{ background: rgba(255,255,255,.78); }
html[data-mode="light"] .dhv-host .link{
  color: #0b6f6f;
  font-weight: 950;
  text-decoration: underline;
  text-decoration-color: rgba(11,111,111,.32);
  text-underline-offset: 3px;
}
html[data-mode="light"] .dhv-host .link:hover{
  color: #075c5c;
  text-decoration-color: rgba(7,92,92,.42);
}
html[data-mode="light"] .sheet-tabs button{ background: rgba(255,255,255,.76); }
html[data-mode="light"] .sheet-backdrop{ background: rgba(15,22,19,.22); }
html[data-mode="light"] .modal-backdrop{ background: rgba(15,22,19,.22); }
html[data-mode="light"] .modal{ box-shadow: 0 30px 90px rgba(0,0,0,.24); }
html[data-mode="light"] .sheet{ box-shadow: 0 30px 90px rgba(0,0,0,.24); }
html[data-mode="light"] .sidebar::before{
  background-image: url("hiops-mark-mint.png");
  opacity:.10;
}
html[data-mode="light"] .list-hero{
  background:
    radial-gradient(1200px 500px at 10% 0%, var(--ppriA, rgba(var(--accent-rgb),.14)), rgba(var(--accent-rgb),0) 55%),
    radial-gradient(1000px 420px at 100% 0%, rgba(0,0,0,.06), rgba(0,0,0,0) 55%),
    rgba(255,255,255,.72);
}
html[data-mode="light"] .list-hero::after{
  background: linear-gradient(180deg, rgba(255,255,255,.48), rgba(255,255,255,.10));
}

/* OpsLink (social) view */
.opsl-grid{
  gap: 12px;
}
@media (max-width: 980px){
  .opsl-grid{
    grid-template-columns: 1fr !important;
  }
}