@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap");

:root {
  --graphite: #0e0f11;
  --steel: #15171c;
  --bone: #f2efea;
  --lime: #b4ff2a;
  --lavender: #8a7cff;
  --sand: #c6a47e;
  --muted: #9a9a94;
  --line: rgba(242, 239, 234, 0.08);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sans: "Manrope", "Segoe UI", sans-serif;
  --serif: "Manrope", "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  min-height: 100%;
  background: var(--graphite);
  color: var(--bone);
  font-family: var(--sans);
}
body { font-size: 16px; line-height: 1.5; }
.grid-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(242, 239, 234, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 239, 234, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  animation: grid-shift 28s linear infinite;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 18%, #000 20%, transparent 78%);
}
@keyframes grid-shift {
  to { background-position: 56px 56px; }
}
body > *:not(.grid-bg) { position: relative; z-index: 1; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
.muted { color: var(--muted); }
.faint { color: #6d6d68; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.wordmark {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.04em;
  font-size: 20px;
  text-transform: lowercase;
}
.wordmark em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--lime);
}
.pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 0 rgba(180, 255, 42, 0.55);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(180, 255, 42, 0.45); }
  70% { box-shadow: 0 0 0 10px rgba(180, 255, 42, 0); }
  100% { box-shadow: 0 0 0 0 rgba(180, 255, 42, 0); }
}

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  color: var(--sand);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 999px;
  padding: 11px 18px;
  cursor: pointer;
  transition: 0.45s var(--ease);
}
.btn:hover { border-color: rgba(242, 239, 234, 0.28); }
.btn.primary {
  background: var(--lime);
  color: var(--graphite);
  border-color: transparent;
  font-weight: 600;
}
.btn.primary:hover { filter: brightness(1.06); color: var(--graphite); }
.btn.danger { border-color: rgba(255, 93, 122, 0.4); color: #ffb0bd; }
.btn.ghost { padding: 8px 14px; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field span { color: var(--muted); font-size: 12px; font-family: var(--mono); }
.field input, .field textarea, .field select {
  background: var(--steel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  outline: none;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: rgba(180, 255, 42, 0.45);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--muted);
  font-family: var(--mono);
}
.chip b { color: var(--bone); font-weight: 500; font-family: var(--sans); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); }
.dot.sage { background: var(--lime); }
.dot.danger { background: #ff5d7a; }
.dot.faint { background: #6d6d68; }

.topnav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 40px;
  background: rgba(14, 15, 17, 0.78);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.nav-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.nav-link {
  padding: 8px 12px;
  color: var(--muted);
  font-size: 14px;
}
.nav-link:hover { color: var(--bone); }

.hero {
  max-width: 1120px;
  margin: 0 auto;
  padding: 88px 40px 56px;
}
.hero-title {
  font-family: var(--sans);
  font-size: clamp(48px, 8.4vw, 96px);
  line-height: 1.05;
  letter-spacing: -0.05em;
  font-weight: 600;
  margin: 18px 0 28px;
  max-width: none;
}
.hero-title .line {
  display: block;
  overflow: hidden;
  padding: 0.04em 0.18em 0.28em 0;
}
.hero-title .line > span {
  display: inline-block;
  transform: translateY(115%);
  filter: blur(12px);
  opacity: 0;
  animation: rise 0.9s var(--ease) forwards;
  padding-right: 0.12em;
}
.hero-title .line:nth-child(1) > span { animation-delay: 0.05s; }
.hero-title .line:nth-child(2) > span { animation-delay: 0.14s; }
.hero-title .line:nth-child(3) > span { animation-delay: 0.23s; }
.hero-title .line:nth-child(4) > span { animation-delay: 0.32s; }
.hero-title .line.italic > span {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--lime);
}
@keyframes rise {
  to { transform: none; filter: blur(0); opacity: 1; }
}
.hero p.lead {
  font-size: 18px;
  color: var(--muted);
  max-width: 34em;
  opacity: 0;
  animation: fade-up 0.8s var(--ease) 0.45s forwards;
}
.hero-actions {
  display: flex;
  gap: 12px;
  margin-top: 32px;
  flex-wrap: wrap;
  opacity: 0;
  animation: fade-up 0.8s var(--ease) 0.55s forwards;
}
.scroll-hint {
  margin-top: 72px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.14em;
  text-transform: lowercase;
  opacity: 0;
  animation: fade-up 0.8s var(--ease) 0.8s forwards, bob 2.4s var(--ease) 1.4s infinite;
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); filter: blur(8px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

.ticker {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: lowercase;
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: marquee 32s linear infinite;
}
.ticker-track span {
  padding: 0 36px;
  white-space: nowrap;
}
.ticker.lime .ticker-track span { color: var(--lime); }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(10px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease), filter 0.8s var(--ease);
}
.reveal.in {
  opacity: 1;
  transform: none;
  filter: none;
}

.section { max-width: 1120px; margin: 0 auto; padding: 96px 40px; }
.section h2 {
  font-family: var(--sans);
  font-size: clamp(32px, 5vw, 52px);
  letter-spacing: -0.05em;
  font-weight: 600;
  margin: 12px 0 28px;
  max-width: 16ch;
}
.section h2 i { font-family: var(--serif); font-style: italic; font-weight: 600; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.section .split { min-height: 0; align-items: start; }
.fact {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.fact h3 { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.fact p { margin: 0; }
.fact:last-child { border-bottom: 0; }
.fact b {
  font-family: var(--mono);
  color: var(--lime);
  font-weight: 500;
  min-width: 2.4ch;
}
.chart-card { min-height: 320px; }
.chart-card svg { width: 100%; height: auto; display: block; }
.chart-line {
  fill: none;
  stroke: var(--lime);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 640;
  stroke-dashoffset: 640;
}
.chart-area { fill: url(#growthFill); opacity: 0; }
.chart-dot { fill: var(--lime); opacity: 0; }
.reveal.in .chart-line { animation: draw-line 1.4s var(--ease) forwards; }
.reveal.in .chart-area { animation: fade-up 0.8s var(--ease) 0.7s forwards; }
.reveal.in .chart-dot { animation: fade-up 0.5s var(--ease) forwards; }
.reveal.in .d1 { animation-delay: 0.35s; }
.reveal.in .d2 { animation-delay: 0.55s; }
.reveal.in .d3 { animation-delay: 0.75s; }
.reveal.in .d4 { animation-delay: 0.95s; }
@keyframes draw-line {
  to { stroke-dashoffset: 0; }
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.card {
  background: var(--steel);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 24px;
}
.card h3 { margin: 0 0 8px; font-size: 18px; font-weight: 600; letter-spacing: -0.03em; }
.price {
  font-family: var(--serif);
  font-style: italic;
  font-size: 48px;
  margin: 12px 0;
  color: var(--bone);
}
.stat-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 44px;
  letter-spacing: -0.04em;
}
.footer {
  border-top: 1px solid var(--line);
  padding: 40px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--muted);
  max-width: 1120px;
  margin: 0 auto;
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 240px 1fr;
}
.rail {
  border-right: 1px solid var(--line);
  background: var(--graphite);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: 0;
  height: 100vh;
}
.app-shell-v2 { background: radial-gradient(circle at 75% 0%, rgba(180,255,42,.055), transparent 32rem); }
.app-brand { font-size: 22px; letter-spacing: -.06em; color: var(--bone) !important; padding: 0 10px !important; }
.app-brand b { color: var(--lime); font-family: var(--serif); font-style: italic; font-weight: 600; }
.rail-caption, .nav-group-title { color: #686a65; font: 10px var(--mono); letter-spacing: .12em; }
.rail-caption { padding: 0 10px; }
.rail-health { display:flex; gap:10px; align-items:center; padding: 12px 10px; border:1px solid var(--line); border-radius:14px; background:rgba(21,23,28,.72); }
.rail-health b, .rail-health small { display:block; }
.rail-health b { font-size:13px; font-weight:500; }
.rail-health small { color:var(--muted); font-size:11px; margin-top:2px; }
.health-orb, .connection-pill i, .live-dot { width:7px; height:7px; border-radius:50%; background:var(--lime); box-shadow:0 0 14px rgba(180,255,42,.7); }
.nav-group { margin-bottom: 18px; }
.nav-group-title { padding: 0 10px 7px; }
.nav-glyph { width:18px; text-align:center; color:#777971; font-family:var(--mono); }
.rail button.nav.active .nav-glyph { color:var(--lime); }
.rail-user { display:flex; align-items:center; gap:9px; padding:10px 0; }
.rail-user b, .rail-user small { display:block; }
.rail-user b { color:var(--bone); font-size:12px; font-weight:500; }
.rail-user small { font-size:11px; margin-top:2px; }
.user-avatar { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--lime); color:var(--graphite); font-weight:700; }
.rail-actions { display:flex; justify-content:space-between; align-items:center; font:11px var(--mono); }
.rail-actions button { border:0; background:none; color:var(--muted); cursor:pointer; }
.workspace { padding:0 32px 56px; }
.workspace-bar { height:68px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); margin:0 -32px 30px; padding:0 32px; }
.crumb { display:flex; gap:10px; align-items:center; font:11px var(--mono); color:var(--muted); letter-spacing:.08em; }
.crumb b { color:var(--bone); font-weight:500; letter-spacing:0; }
.crumb i { color:#555850; font-style:normal; }
.workspace-bar-actions { display:flex; align-items:center; gap:8px; }
.connection-pill { display:flex; gap:7px; align-items:center; color:var(--lime); font:10px var(--mono); padding:7px 10px; border:1px solid rgba(180,255,42,.2); border-radius:99px; }
.icon-action { width:32px; height:32px; border:1px solid var(--line); border-radius:10px; background:transparent; color:var(--muted); cursor:pointer; }
.icon-action:hover { color:var(--bone); border-color:rgba(242,239,234,.28); }.rail nav { display: flex; flex-direction: column; gap: 2px; }
.rail nav a, .rail button.nav {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 10px;
  padding: 9px 10px;
  color: var(--muted);
  cursor: pointer;
}
.rail a.active, .rail button.nav.active {
  color: var(--bone);
  background: var(--steel);
}
.rail a:hover, .rail button.nav:hover { color: var(--bone); }
.rail .mini { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mini-stat {
  background: var(--steel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  font-size: 11px;
  color: var(--muted);
  font-family: var(--mono);
}
.mini-stat b {
  display: block;
  color: var(--bone);
  font-size: 18px;
  font-weight: 500;
  font-family: var(--serif);
  font-style: italic;
  margin-top: 4px;
}
.rail-foot { margin-top: auto; padding: 4px; color: var(--muted); font-size: 12px; }
.rail-foot { display:flex; flex-direction:column; gap:10px; min-width:0; }
.rail-user { min-width:0; }
.rail-user > div { min-width:0; overflow:hidden; }
.rail-user b, .rail-user small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rail-actions { min-height:24px; gap:12px; }
.rail-actions a, .rail-actions button { white-space:nowrap; }

.workspace { padding: 28px 32px 56px; min-width: 0; }
.page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 28px;
}
.page-head h1 {
  font-size: 36px;
  letter-spacing: -0.05em;
  font-weight: 600;
  margin: 6px 0 0;
}
.stats-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 16px; }
.stat {
  background: var(--steel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
}
.stat .k {
  color: var(--muted);
  font-size: 11px;
  font-family: var(--mono);
  text-transform: lowercase;
}
.stat .v {
  font-family: var(--serif);
  font-style: italic;
  font-size: 28px;
  margin-top: 6px;
}

.split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 14px; min-height: 520px; }
.panel {
  background: var(--steel);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.panel-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  font-family: var(--mono);
}
.panel-b { padding: 16px; flex: 1; overflow: auto; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tab {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 8px 10px;
  border-radius: 999px;
  cursor: pointer;
}
.tab.active { background: rgba(180, 255, 42, 0.12); color: var(--lime); }

.list { display: flex; flex-direction: column; gap: 8px; }
.item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #12141a;
}
.item .title { font-weight: 500; }
.logline { font-family: var(--mono); font-size: 12px; color: #c8c4ba; margin: 6px 0; }
.score-ring {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--lime) calc(var(--p, 0) * 1%), #23262d 0);
}
.score-ring span {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: var(--steel);
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 28px;
}

.modal-bg {
  position: fixed;
  inset: 0;
  background: rgba(8, 9, 11, 0.78);
  display: grid;
  place-items: center;
  z-index: 30;
  padding: 20px;
}
.modal {
  width: min(560px, 100%);
  background: var(--steel);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 24px;
  max-height: 90vh;
  overflow: auto;
}
.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  background: var(--steel);
  border: 1px solid var(--line);
  padding: 12px 14px;
  border-radius: 12px;
  z-index: 50;
}
.login-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(440px, 100%); text-align: left; }
.kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.kinds button { width: 100%; }
.kinds button.active { border-color: var(--lime); color: var(--lime); }

@media (prefers-reduced-motion: reduce) {
  .hero-title .line > span,
  .hero p.lead,
  .hero-actions,
  .scroll-hint,
  .ticker-track,
  .pulse,
  .grid-bg,
  .chart-line {
    animation: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
  .chart-line { stroke-dashoffset: 0 !important; }
  .chart-area, .chart-dot { opacity: 1 !important; }
  .reveal { opacity: 1; transform: none; filter: none; }
}

.ticker:hover .ticker-track { animation-play-state: paused; }

@media (max-width: 980px) {
  .hero, .section, .topnav, .footer { padding-left: 20px; padding-right: 20px; }
  .grid-3, .grid-2, .grid-4, .split, .app-shell, .stats-row { grid-template-columns: 1fr; }
  .rail { position: relative; height: auto; }
  .workspace { padding: 0 20px 40px; }
  .workspace-bar { margin: 0 -20px 24px; padding: 0 20px; }
  .app-shell { display: block; }
  .topnav, .footer { flex-direction: column; align-items: flex-start; }
}
/* Combine visual language for the authenticated app */
body:has(.app-shell) { background:#080909; }
.app-shell { grid-template-columns:240px 1fr; background:#080909; }
.rail { background:#0a0b0b; border-right:1px solid #282d29; padding:25px 16px; gap:24px; }
.app-brand { font-size:20px; font-weight:800; letter-spacing:-1px; color:#f2f4ee!important; }
.app-brand b { color:#b4ff2a; font-size:25px; line-height:0; }
.rail-caption,.nav-group-title { color:#778071; font-size:9px; letter-spacing:1.5px; }
.rail-health { border-color:#282d29; background:#101411; }
.rail-health b { color:#f2f4ee; }
.rail button.nav { border-radius:4px; padding:10px; font-size:13px; }
.rail button.nav.active { background:#17210f; color:#b4ff2a; }
.nav-glyph { color:#8c9786; }
.workspace { padding:42px 32px 70px; background:radial-gradient(ellipse at 55% 0,#b4ff2a06,transparent 55%); }
.workspace-content { max-width:1500px; margin:auto; }
.page-head h1 { font-size:clamp(40px,4vw,64px); letter-spacing:-3px; }
.eyebrow { color:#b4ff2a; letter-spacing:2px; }
.btn { border-radius:5px; border-color:#282d29; padding:13px 19px; }
.btn.primary { background:#b4ff2a; color:#101309; }
.card,.panel,.stat,.item { background:#101312; border-color:#282d29; border-radius:6px; }
.panel-h { color:#a6b39c; border-color:#282d29; }
.item { background:#0d100e; }
.stat .v { color:#f2f4ee; }
@media(max-width:980px){.workspace{padding:28px 20px 50px}.app-shell{display:block}.rail{position:relative;height:auto}.rail nav{display:grid;grid-template-columns:repeat(2,1fr);gap:3px}.rail-caption,.rail-health{display:none}.rail-foot{margin-top:8px}}

.price,.stat .v,.score-ring span{font-family:var(--sans);font-style:normal;font-weight:700}
.module-section { margin-top: 34px; }
.module-section-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid #282d29; }
.module-count { color:#778071; font:11px var(--mono); }
.module-grid.app-module-grid { grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; }
.module-card { position:relative; min-height:180px; padding:18px; transition:transform .2s ease,border-color .2s ease; }
.module-card:hover { transform:translateY(-2px); border-color:#526247; }
.module-card.is-available { border-color:#3c5426; background:linear-gradient(145deg,#101712,#101312); }
.module-card.is-planned { background:#0d100e; }
.module-card-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.module-card h3 { margin:18px 0 7px; font-size:17px; }
.module-card p { margin:0; color:#9aa294; font-size:13px; line-height:1.45; }
.module-status { white-space:nowrap; font:10px var(--mono); letter-spacing:.4px; }
.status-available { color:#b4ff2a; }
.status-beta { color:#d9e77c; }
.status-in-development { color:#d0b77a; }
.status-coming-soon { color:#849080; }
.module-route { display:flex; justify-content:space-between; width:100%; min-width:0; box-sizing:border-box; overflow:hidden; margin-top:18px; padding:0; border:0; background:none; color:#b4ff2a; font-size:12px; cursor:pointer; text-align:left; }
.module-soon { display:block; margin-top:18px; color:#687265; font:11px var(--mono); }
.workspace-modules { margin-bottom:28px; }
.workspace-modules > .panel-h { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.workspace-module-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.workspace-module { display:flex; align-items:center; gap:10px; min-width:0; padding:13px; border:1px solid #282d29; border-radius:6px; background:#101312; text-align:left; cursor:pointer; }
.workspace-module:hover { border-color:#688b3d; transform:translateY(-1px); }
.workspace-module b,.workspace-module small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.workspace-module b { font-size:12px; color:#f2f4ee; }
.workspace-module small { margin-top:3px; color:#869080; font-size:10px; }
.workspace-module .module-icon { flex:0 0 auto; }
.module-arrow { margin-left:auto; color:#b4ff2a; }
.stats-item { border-left:3px solid #6d786b; }
.stats-ok { border-left-color:#55d66b; }
.stats-bad { border-left-color:#ff5d67; }
.stats-warn { border-left-color:#e4bd4e; }
@media(max-width:1100px){.workspace-module-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:620px){.workspace-module-grid{grid-template-columns:1fr;}}

/* App design system: operator-first Telegram workspace. */
:root {
  --app-bg: #070908;
  --app-surface: #0d110e;
  --app-surface-raised: #121812;
  --app-line: #222b23;
  --app-line-strong: #344333;
  --app-text: #f2f5ed;
  --app-muted: #8d998b;
  --app-lime: #b7ff31;
  --app-red: #ff6570;
  --app-yellow: #edc45d;
  --app-ease: cubic-bezier(.2,0,0,1);
}
body:has(.app-shell) { background: var(--app-bg); color:var(--app-text); }
.app-shell { min-height:100vh; grid-template-columns:248px minmax(0,1fr); background:var(--app-bg); }
.rail { position:sticky; top:0; height:100vh; padding:24px 14px 18px; background:#090b09; border-right:1px solid var(--app-line); gap:22px; }
.app-brand { padding:0 12px!important; font-size:22px; letter-spacing:-.07em; }
.rail-caption,.nav-group-title { padding-left:12px; color:#596557; font:10px var(--mono); letter-spacing:.14em; }
.rail-health { margin:0 2px; padding:13px 12px; border:1px solid var(--app-line); border-radius:10px; background:var(--app-surface); }
.health-orb { flex:none; width:8px; height:8px; }
.rail nav { gap:1px; }
.nav-group { margin-bottom:16px; }
.nav-group-title { margin-bottom:4px; }
.rail button.nav { min-height:38px; padding:9px 12px; border-radius:7px; color:#9aa699; transition:background .18s var(--app-ease),color .18s var(--app-ease),transform .18s var(--app-ease); }
.rail button.nav:hover { background:#111811; color:var(--app-text); transform:translateX(2px); }
.rail button.nav.active { background:#182314; color:var(--app-lime); box-shadow:inset 2px 0 var(--app-lime); }
.nav-glyph { width:18px; color:#667466; font-size:14px; }
.rail button.nav.active .nav-glyph { color:var(--app-lime); }
.rail-foot { margin-top:auto; padding:12px 10px 0; border-top:1px solid var(--app-line); gap:12px; }
.rail-user { padding:0; gap:10px; }
.user-avatar { width:30px; height:30px; flex:none; background:var(--app-lime); }
.rail-user b { font-size:12px; }
.rail-user small { color:var(--app-muted); }
.rail-actions { display:flex; justify-content:flex-start; gap:18px; padding-left:40px; font-size:10px; }
.rail-actions a,.rail-actions button { color:#8b9789; transition:color .18s var(--app-ease); }
.rail-actions a:hover,.rail-actions button:hover { color:var(--app-lime); }
.rail-foot { width:min(220px,100%); max-width:220px; align-self:flex-start; border-top:0; padding:0 10px; }
.rail-actions { width:max-content; margin-left:40px; flex-direction:row; align-items:center; gap:16px; }
.workspace { min-width:0; padding:0 44px 72px; background:radial-gradient(700px 380px at 62% -5%,rgba(183,255,49,.065),transparent 70%); }
.workspace-content { max-width:1320px; margin:0 auto; }
.page-head { min-height:160px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding:48px 0 28px; border-bottom:1px solid var(--app-line); }
.page-head h1 { margin:7px 0 8px; font-size:clamp(34px,4vw,56px); letter-spacing:-.055em; line-height:1.02; }
.page-head .muted { max-width:560px; color:var(--app-muted); }
.eyebrow { color:var(--app-lime); font:10px var(--mono); letter-spacing:.15em; text-transform:uppercase; }
.card,.panel,.stat,.item { border:1px solid var(--app-line); border-radius:10px; background:var(--app-surface); box-shadow:none; }
.panel,.card { overflow:hidden; }
.panel-h { padding:15px 18px; border-bottom:1px solid var(--app-line); color:#b6c0b2; font:11px var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.panel-b { padding:18px; }
.stat { padding:17px 18px; }
.stat .k { color:#748073; font:10px var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.stat .v { margin-top:7px; font-size:27px; letter-spacing:-.04em; }
.item { padding:13px 15px; transition:border-color .18s var(--app-ease),background .18s var(--app-ease); }
.item:hover { background:var(--app-surface-raised); border-color:var(--app-line-strong); }
.btn { min-height:38px; padding:9px 15px; border:1px solid var(--app-line-strong); border-radius:7px; background:#111611; color:var(--app-text); transition:transform .15s var(--app-ease),border-color .15s var(--app-ease),background .15s var(--app-ease); }
.btn:hover { border-color:#687b61; transform:translateY(-1px); }
.btn.primary { border-color:var(--app-lime); background:var(--app-lime); color:#10150b; }
.btn.ghost { background:transparent; }
.field input,.field textarea,.field select { border:1px solid var(--app-line-strong); border-radius:7px; background:#090c09; }
.field input:focus,.field textarea:focus,.field select:focus { outline:2px solid rgba(183,255,49,.3); border-color:var(--app-lime); }
.workspace-modules { margin:28px 0 8px; }
.workspace-module { width:100%; min-width:0; min-height:76px; padding:14px 15px; overflow:hidden; border-radius:9px; background:linear-gradient(145deg,#101610,#0d110e); transition:transform .2s var(--app-ease),border-color .2s var(--app-ease),background .2s var(--app-ease); }
.workspace-module > span:nth-child(2) { min-width:0; flex:1; }
.workspace-module .module-arrow { flex:0 0 18px; width:18px; text-align:right; }
.workspace-module:hover { background:#141c13; border-color:#667e57; transform:translateY(-2px); }
.workspace-module b { color:var(--app-text); font-size:12px; }
.workspace-module small { color:var(--app-muted); }
.module-icon { color:var(--app-lime); }
.module-arrow { font-size:16px; }
.stats-item { border-left-width:3px; }
.stats-ok { background:linear-gradient(90deg,rgba(61,176,82,.08),transparent 30%); }
.stats-bad { background:linear-gradient(90deg,rgba(255,76,88,.08),transparent 30%); }
.stats-warn { background:linear-gradient(90deg,rgba(237,196,93,.08),transparent 30%); }
.login-screen { min-height:100vh; background:radial-gradient(500px 300px at 50% 20%,rgba(183,255,49,.07),transparent 70%); }
.login-card { border:1px solid var(--app-line-strong); border-radius:12px; background:var(--app-surface); box-shadow:0 24px 80px rgba(0,0,0,.35); }
@media (max-width:980px) {
  .app-shell { display:block; }
  .rail { position:relative; width:100%; height:auto; padding:16px 18px 14px; border-right:0; border-bottom:1px solid var(--app-line); gap:14px; }
  .rail-caption,.rail-health { display:none; }
  .rail nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px; }
  .nav-group { margin:0 0 8px; }
  .rail-foot { width:220px; max-width:100%; margin-top:4px; padding-top:10px; }
  .rail-actions { margin-left:40px; flex-direction:row; align-items:center; }
  .workspace { padding:0 20px 48px; }
  .page-head { min-height:130px; padding-top:30px; align-items:flex-start; flex-direction:column; }
}
@media (prefers-reduced-motion: no-preference) {
  .page-head,.workspace-modules,.panel,.card { animation:app-enter .45s var(--app-ease) both; }
  @keyframes app-enter { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
}