/* ===================================================================
   CA_CS Tool — EntropyX product UI
   Brand: charcoal + neon green, pill buttons, mono labels
   =================================================================== */

:root {
  color-scheme: dark;
  --bg: #16181c;
  --bg-1: #1c1f24;
  --bg-2: #21242a;
  --bg-3: #262932;
  --bg-card: #1d2026;
  --line: rgba(255, 255, 255, 0.07);
  --line-2: rgba(255, 255, 255, 0.11);
  --line-3: rgba(255, 255, 255, 0.18);
  --ink: #fafafa;
  --ink-soft: #d8dade;
  --muted: #a8acb3;
  --muted-2: #7d818a;
  --faint: #5a5d65;

  --neon: #b6ff36;
  --neon-deep: #8de01a;
  --neon-soft: rgba(182, 255, 54, 0.15);
  --violet: #8b5cf6;
  --cyan: #22d3ee;
  --pink: #ec4899;
  --red: #ff5a5a;
  --yellow: #f5b50a;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --sidebar-w: 240px;
}

* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
}

body {
  background:
    radial-gradient(900px 600px at 50% -10%, rgba(182, 255, 54, 0.06), transparent 60%),
    radial-gradient(700px 500px at 90% 20%, rgba(139, 92, 246, 0.04), transparent 60%),
    radial-gradient(700px 500px at 10% 60%, rgba(182, 255, 54, 0.03), transparent 60%),
    var(--bg);
}

::selection { background: var(--neon); color: var(--bg); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); }

a { color: var(--neon); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Action <a> tags without href (inline data-action links across the app) —
   normalise hover/cursor so they feel like real buttons. */
a:not([href]) { cursor: pointer; }
a:not([href]):hover { opacity: 0.85; text-decoration: underline; }

.mono {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
}

/* ============ Auth (split-screen hero) ============ */
.auth {
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  overflow: hidden;
}
.auth-hero {
  position: relative;
  padding: clamp(24px, 4vh, 48px) clamp(24px, 4vw, 56px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(135deg, #131519 0%, #1c1f24 60%, #1a1d22 100%);
}
/* Subtle dot grid */
.auth-hero .hero-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse at 30% 40%, black 0%, transparent 75%);
  mask-image: radial-gradient(ellipse at 30% 40%, black 0%, transparent 75%);
  pointer-events: none;
}
/* Layered orbital gradient blobs */
.auth-hero .orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
}
.auth-hero .orb-1 {
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.35), transparent 70%);
  top: 10%; left: 5%;
  animation: orb-drift-1 18s ease-in-out infinite;
}
.auth-hero .orb-2 {
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.22), transparent 70%);
  bottom: 12%; right: 8%;
  animation: orb-drift-2 22s ease-in-out infinite;
}
.auth-hero .orb-3 {
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(182, 255, 54, 0.16), transparent 70%);
  bottom: 30%; left: 30%;
  animation: orb-drift-3 26s ease-in-out infinite;
}
@keyframes orb-drift-1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px,-30px) scale(1.1); } }
@keyframes orb-drift-2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-30px,40px) scale(0.9); } }
@keyframes orb-drift-3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(50px,30px) scale(1.15); } }

/* Product preview mockup — auto-rotates between feature scenes */
.preview-frame {
  position: relative;
  z-index: 2;
  margin-top: 24px;
  width: 100%;
  max-width: 540px;
  aspect-ratio: 16 / 10;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  border: 1px solid var(--line-2);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
}
.preview-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(182, 255, 54, 0.05), transparent 40%, rgba(139, 92, 246, 0.05));
  pointer-events: none;
}
.preview-top {
  height: 32px;
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 6px;
}
.preview-top .dot { width: 8px; height: 8px; border-radius: 50%; }
.preview-top .dot.red { background: #ff5f57; }
.preview-top .dot.yellow { background: #febc2e; }
.preview-top .dot.green { background: #28c840; }
.preview-top .label {
  margin-left: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted-2);
  letter-spacing: 0.05em;
}
.preview-stage {
  position: absolute;
  inset: 32px 0 0 0;
  overflow: hidden;
}
.scene {
  position: absolute;
  inset: 0;
  padding: 18px;
  opacity: 0;
  transition: opacity 600ms ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.scene.active { opacity: 1; }

/* Scene 1 — Dashboard tiles */
.scene-dashboard .tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.scene-dashboard .tile {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
}
.scene-dashboard .tile .l {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--muted-2);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.scene-dashboard .tile .v {
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}
.scene-dashboard .tile.t1 .v { color: var(--red); }
.scene-dashboard .tile.t2 .v { color: #f5b50a; }
.scene-dashboard .tile.t3 .v { color: var(--cyan); }

.scene-dashboard .list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
}
.scene-dashboard .item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--line);
  border-left: 2px solid currentColor;
  border-radius: 6px;
  font-size: 11px;
}
.scene-dashboard .item.r1 { color: var(--red); }
.scene-dashboard .item.r2 { color: #f5b50a; }
.scene-dashboard .item.r3 { color: var(--cyan); }
.scene-dashboard .item .t { color: var(--ink); font-weight: 500; }
.scene-dashboard .item .d {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
}

/* Scene 2 — Compliance calendar grid */
.scene-calendar .grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: auto repeat(5, 1fr);
  gap: 4px;
  height: 100%;
}
.scene-calendar .h {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--muted-2);
  text-align: center;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.scene-calendar .d {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 10px;
  color: var(--muted);
  position: relative;
}
.scene-calendar .d.hl { color: var(--ink); }
.scene-calendar .d.active {
  background: rgba(182, 255, 54, 0.12);
  border-color: rgba(182, 255, 54, 0.3);
  color: var(--neon);
}
.scene-calendar .d.dot::after {
  content: "";
  position: absolute;
  bottom: 4px; right: 4px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--cyan);
}

/* Scene 4 — AI suggestions */
.scene-ai { gap: 10px; }
.scene-ai .ai-head {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.scene-ai .ai-head .ai-icon {
  width: 22px; height: 22px; border-radius: 6px;
  background: rgba(182, 255, 54, 0.12);
  color: var(--neon);
  display: grid; place-items: center;
}
.scene-ai .ai-head .ai-title { font-size: 12px; font-weight: 600; color: var(--ink); }
.scene-ai .ai-head .ai-model {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--muted-2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.scene-ai .sug {
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--line);
  border-left: 2px solid var(--neon);
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-soft);
  animation: bubble-in 600ms ease both;
}
.scene-ai .sug:nth-child(2) { animation-delay: 0.2s; }
.scene-ai .sug:nth-child(3) { animation-delay: 0.4s; border-left-color: var(--violet); }
.scene-ai .sug:nth-child(4) { animation-delay: 0.6s; border-left-color: var(--cyan); }
.scene-ai .sug .sec { font-family: var(--font-mono); color: var(--neon); font-size: 9px; margin-right: 6px; }
.scene-ai .sug:nth-child(3) .sec { color: var(--violet); }
.scene-ai .sug:nth-child(4) .sec { color: var(--cyan); }

/* Scene 3 — Chat / message thread */
.scene-chat { gap: 10px; justify-content: flex-end; }
.scene-chat .bubble {
  max-width: 70%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 11px;
  line-height: 1.5;
  animation: bubble-in 600ms ease both;
}
.scene-chat .bubble.them {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  color: var(--ink);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.scene-chat .bubble.you {
  background: rgba(182, 255, 54, 0.15);
  border: 1px solid rgba(182, 255, 54, 0.3);
  color: var(--ink);
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.scene-chat .bubble .who {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-2);
  margin-bottom: 2px;
}
@keyframes bubble-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.scene-indicators {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 3;
}
.scene-indicators .ind {
  width: 24px; height: 3px;
  background: var(--line-3);
  border-radius: 2px;
  transition: background 300ms;
}
.scene-indicators .ind.active { background: var(--neon); }
.hero-card {
  position: absolute;
  width: clamp(220px, 28vw, 300px);
  height: clamp(130px, 22vh, 180px);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--line-2);
  padding: 16px;
  backdrop-filter: blur(8px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hero-card .hc-head {
  display: flex; justify-content: space-between; align-items: center;
}
.hero-card .hc-chip {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
}
.hero-card .hc-bars { display: flex; align-items: flex-end; gap: 6px; height: 30px; }
.hero-card .hc-bars > div {
  flex: 1;
  background: linear-gradient(180deg, currentColor, transparent);
  border-radius: 2px 2px 0 0;
  opacity: 0.6;
  animation: bar-pulse 2.4s ease-in-out infinite;
}
.hero-card .hc-bars > div:nth-child(1) { height: 40%; animation-delay: 0s; }
.hero-card .hc-bars > div:nth-child(2) { height: 70%; animation-delay: 0.2s; }
.hero-card .hc-bars > div:nth-child(3) { height: 55%; animation-delay: 0.4s; }
.hero-card .hc-bars > div:nth-child(4) { height: 90%; animation-delay: 0.6s; }
.hero-card .hc-bars > div:nth-child(5) { height: 65%; animation-delay: 0.8s; }
.hero-card .hc-bars > div:nth-child(6) { height: 80%; animation-delay: 1.0s; }
@keyframes bar-pulse {
  0%, 100% { transform: scaleY(0.7); }
  50% { transform: scaleY(1.1); }
}
.hero-card .hc-foot {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; color: var(--muted);
}
.hero-card .hc-value {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 600;
}

.hero-card.card-a {
  transform: translate(-40px, 14px) rotate(-6deg);
  color: var(--neon);
  border-color: rgba(182, 255, 54, 0.25);
  animation: float-a 6s ease-in-out infinite;
}
.hero-card.card-b {
  transform: translate(40px, 30px) rotate(7deg);
  color: var(--violet);
  border-color: rgba(139, 92, 246, 0.3);
  animation: float-b 7s ease-in-out infinite;
}
.hero-card.card-c {
  transform: translate(0, 0) rotate(-1deg);
  color: var(--cyan);
  border-color: rgba(34, 211, 238, 0.3);
  animation: float-c 5.5s ease-in-out infinite;
  z-index: 2;
}
@keyframes float-a { 0%,100% { transform: translate(-40px, 14px) rotate(-6deg); } 50% { transform: translate(-44px, 4px) rotate(-7deg); } }
@keyframes float-b { 0%,100% { transform: translate(40px, 30px) rotate(7deg); }   50% { transform: translate(44px, 20px) rotate(8deg); } }
@keyframes float-c { 0%,100% { transform: translate(0, 0) rotate(-1deg); }       50% { transform: translate(0, -10px) rotate(0deg); } }

.hero-card .hc-chip.chip-neon  { background: rgba(182,255,54,0.12); color: var(--neon); }
.hero-card .hc-chip.chip-violet { background: rgba(139,92,246,0.15); color: var(--violet); }
.hero-card .hc-chip.chip-cyan  { background: rgba(34,211,238,0.13); color: var(--cyan); }

.hero-card .hc-status {
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}
.auth-hero::before, .auth-hero::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  filter: blur(80px);
  pointer-events: none;
}
.auth-hero::before {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.18), transparent 70%);
  top: -150px; left: -100px;
  animation: mesh-move 18s ease-in-out infinite;
}
.auth-hero::after {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.14), transparent 70%);
  bottom: -120px; right: -80px;
  animation: mesh-move-2 22s ease-in-out infinite;
}
@keyframes mesh-move {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(50px, -30px); }
}
@keyframes mesh-move-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-30px, 40px) scale(1.1); }
}

.auth-hero .hero-top {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; gap: 24px;
}
.auth-hero .hero-logo { display: flex; align-items: center; gap: 12px; }
.auth-hero .hero-logo img { height: 28px; }
.auth-hero .hero-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  width: fit-content;
}
.auth-hero .hero-pill .pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--neon); box-shadow: 0 0 8px var(--neon);
  animation: pulse-dot 1.6s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.auth-hero h2 {
  position: relative; z-index: 2;
  font-size: clamp(22px, 2.4vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: 600;
  margin: clamp(12px, 2vh, 18px) 0 8px;
  background: linear-gradient(180deg, #fafafa 0%, #a1a1aa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  max-width: 480px;
}
.auth-hero h2 .accent {
  color: var(--neon);
  background: none;
  -webkit-text-fill-color: var(--neon);
}
.auth-hero .hero-lede {
  position: relative; z-index: 2;
  color: var(--ink-soft);
  font-size: 14px;
  max-width: 440px;
  margin-bottom: clamp(14px, 2vh, 22px);
  line-height: 1.45;
}

.feature-grid {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-width: 480px;
  margin-bottom: clamp(14px, 2vh, 22px);
}
.feature-tile {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: 11px 12px;
  font-size: 12px;
  color: var(--ink-soft);
  display: flex; align-items: flex-start; gap: 10px;
}
.feature-tile .ft-icon {
  width: 28px; height: 28px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  display: grid; place-items: center;
  color: var(--ink-soft);
  flex-shrink: 0;
}
.feature-tile:nth-child(1) .ft-icon { color: var(--neon); }
.feature-tile:nth-child(2) .ft-icon { color: var(--violet); }
.feature-tile:nth-child(3) .ft-icon { color: var(--cyan); }
.feature-tile:nth-child(4) .ft-icon { color: var(--pink); }
.feature-tile .ft-title { font-weight: 500; color: var(--ink); margin-bottom: 2px; }
.feature-tile .ft-sub { color: var(--muted); font-size: 11px; }

.security-row {
  position: relative; z-index: 2;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: clamp(10px, 1.5vh, 18px);
  margin-bottom: clamp(8px, 1.5vh, 14px);
}
.security-row .badge-sec {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.security-row .badge-sec svg { color: var(--neon); }
.security-row .badge-sec.neon { border-color: rgba(182, 255, 54, 0.3); background: rgba(182, 255, 54, 0.06); color: var(--neon); }

.ticker {
  position: relative; z-index: 2;
  border-top: 1px solid var(--line);
  padding-top: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
}
.ticker .item { display: flex; align-items: center; gap: 8px; }
.ticker .item::before { content: "•"; color: var(--ink-soft); }

.auth-form-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 4vh, 40px) clamp(20px, 4vw, 48px);
  position: relative;
  overflow-y: auto;
  background:
    radial-gradient(circle at 95% 5%, rgba(139, 92, 246, 0.06), transparent 40%),
    radial-gradient(circle at 5% 95%, rgba(34, 211, 238, 0.05), transparent 40%),
    var(--bg);
}
.auth-form-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 20px 20px;
  -webkit-mask-image: linear-gradient(180deg, transparent, black 30%, black 70%, transparent);
  mask-image: linear-gradient(180deg, transparent, black 30%, black 70%, transparent);
  pointer-events: none;
}
.auth-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--line-2);
  border-radius: 18px;
  padding: clamp(24px, 4vh, 40px) clamp(24px, 3vw, 40px);
  width: 100%;
  max-width: 440px;
  z-index: 1;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.auth-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(182, 255, 54, 0.3), rgba(255, 255, 255, 0.05) 50%, rgba(139, 92, 246, 0.3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.auth-card .auth-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(182, 255, 54, 0.1);
  border: 1px solid rgba(182, 255, 54, 0.25);
  display: grid; place-items: center;
  color: var(--neon);
  margin-bottom: 18px;
}
.auth-card h1 { margin: 0 0 6px; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.auth-card .sub { color: var(--muted); margin-bottom: 22px; font-size: 13px; }
.auth-card .field { margin-bottom: 12px; }
.auth-card .field input { padding: 12px 14px; }
.auth-card .btn-neon { padding: 12px 20px; height: auto; font-size: 14px; margin-top: 6px; }
.auth-card .toggle { text-align: center; margin-top: 16px; font-size: 12px; color: var(--muted); }
.auth-card .toggle a { color: var(--ink-soft); }
.auth-card .toggle a:hover { color: var(--neon); }
.auth-card .secure-row {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
  font-size: 11px;
  color: var(--muted-2);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.auth-card .secure-row svg { color: var(--neon); flex-shrink: 0; }

/* Mobile-only blocks (hidden by default; the @media block shows them).
   - .auth-mobile-intro: a tight brand + tagline + feature-chip strip that sits
     above the auth-card on mobile so the page isn't empty after we hid the hero.
   - .auth-mobile-logo: small wordmark inside the auth-card, redundant with the
     intro block — only used when intro is also hidden (very narrow screens). */
.auth-mobile-intro { display: none; }
.auth-card .auth-mobile-logo { display: none; }

/* ============ Tablet + phone (≤1024px) ============
   Stack hero ABOVE form. ≥1025px (laptops, desktops) keeps split-screen. */
@media (max-width: 1024px) {
  .auth {
    display: flex;
    flex-direction: column;
    grid-template-columns: 1fr;
    height: 100vh;
    overflow: hidden;
  }
  .auth-hero {
    padding: 16px 22px 12px;
    text-align: center;
    align-items: center;
    flex: 0 0 auto;
    /* No more than 40% of the viewport — leaves room for the form */
    max-height: 42vh;
    overflow: hidden;
  }
  .auth-hero .hero-top { align-items: center; }
  .auth-hero .hero-logo img { height: 22px; }
  .auth-hero .hero-pill { font-size: 9px; padding: 4px 10px; }
  .auth-hero h2 {
    font-size: clamp(16px, 3.4vw, 22px);
    margin: 8px auto 4px;
    max-width: 520px;
  }
  .auth-hero .hero-lede {
    font-size: 12px;
    margin: 0 auto 8px;
    max-width: 520px;
    /* Limit lede height so it doesn't push the form off screen */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* Hide the busy animated mock-up on tablet — kept only on real desktop */
  .preview-frame, .scene-indicators { display: none; }
  .feature-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    max-width: 100%;
    margin: 4px auto;
  }
  .feature-tile {
    flex-direction: row;
    align-items: center;
    padding: 5px 10px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 999px;
    border: 1px solid var(--line-2);
    font-size: 11px;
    min-width: 0;
  }
  .feature-tile .ft-icon { width: 18px; height: 18px; border-radius: 4px; }
  .feature-tile .ft-icon svg { width: 12px; height: 12px; }
  .feature-tile .ft-title { font-size: 11px; font-weight: 500; }
  .feature-tile .ft-sub { display: none; }
  .ticker, .security-row { display: none; }
  /* Mesh blobs are too heavy on small screens — tone way down */
  .auth-hero .orb { opacity: 0.5; filter: blur(80px); }
  .auth-hero::before, .auth-hero::after { opacity: 0.4; }

  .auth-form-panel {
    flex: 1 1 auto;
    padding: 16px 18px 24px;
    overflow-y: auto;
    align-items: flex-start;
  }
  .auth-card {
    padding: 22px 20px 18px;
    max-width: 460px;            /* keep readable line-length on tablet */
    width: 100%;
    margin: 0 auto;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  }
  .auth-card .auth-icon { display: none; }
  .auth-card .auth-mobile-logo { display: none; }
  .auth-card h1 { font-size: 18px; }
  .auth-card .sub { font-size: 12px; margin-bottom: 14px; }
  .auth-card .field { margin-bottom: 10px; }
  .auth-card .field label { font-size: 10px; margin-bottom: 4px; }
  .auth-card .field input { padding: 10px 12px; font-size: 14px; }
  .auth-card .secure-row { margin-top: 10px; padding-top: 10px; font-size: 9px; }
  /* The desktop intro-block (which gets injected on mobile) is also hidden
     here — the hero panel above the form already shows the brand */
  .auth-mobile-intro { display: none; }
}

/* ============ Phone (≤519px) ============
   Strip the hero down to wordmark + tagline only. Everything else (pill, lede,
   chips, mock-up, ticker, security row) hidden so the form has room. */
@media (max-width: 519px) {
  .auth-hero {
    padding: 18px 18px 12px;
    max-height: none;
    flex: 0 0 auto;
  }
  .auth-hero .hero-pill,
  .auth-hero .hero-lede,
  .auth-hero .feature-grid,
  .auth-hero .ticker,
  .auth-hero .security-row,
  .auth-hero .preview-frame,
  .auth-hero .scene-indicators { display: none !important; }
  .auth-hero .hero-logo { justify-content: center; }
  .auth-hero .hero-logo img { height: 24px; }
  .auth-hero h2 {
    font-size: 18px;
    margin: 12px auto 0;
    max-width: 90%;
  }
  .auth-form-panel {
    padding: 14px 16px 24px;
  }
}

/* The injected .auth-mobile-intro element from older iterations stays hidden;
   the hero panel itself shows the brand on phones now. */

/* Very small screens (≤380px) — drop chips, keep just brand + tagline */
@media (max-width: 380px) {
  .auth-mobile-intro .chips { display: none; }
  .auth-mobile-intro { padding-bottom: 12px; gap: 6px; }
  .auth-mobile-intro img { height: 22px; }
  .auth-mobile-intro .head { font-size: 16px; }
}

/* ============ Forms ============ */
.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 6px;
}
.field input, .field select, .field textarea {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  color: var(--ink);
  padding: 10px 12px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-family: inherit;
  transition: border-color 150ms ease, background 150ms ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--neon);
  background: var(--bg-3);
}
.field textarea { resize: vertical; min-height: 80px; }
.field input[type="checkbox"] { width: auto; margin-right: 6px; }

/* ============ Buttons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 150ms ease, background 150ms, border-color 150ms, box-shadow 280ms;
  white-space: nowrap;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-neon {
  background: var(--neon);
  color: #0a0a0a;
  border-color: var(--neon);
  font-weight: 600;
}
.btn-neon:hover { background: #c4ff5a; box-shadow: 0 0 0 4px rgba(182, 255, 54, 0.2); }
.btn-block { width: 100%; }

.btn-ghost {
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--line-2);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.04); border-color: var(--line-3); }

.btn-danger {
  background: rgba(255, 90, 90, 0.1);
  color: var(--red);
  border-color: rgba(255, 90, 90, 0.3);
}
.btn-danger:hover { background: rgba(255, 90, 90, 0.2); }

.btn-sm { padding: 6px 12px; font-size: 12px; }

/* ============ Layout: sidebar shell ============ */
.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

.sidebar {
  background: var(--bg-1);
  border-right: 1px solid var(--line);
  padding: 20px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.sidebar .brand-row {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 8px 18px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.sidebar .brand-row img { height: 22px; }
.sidebar .tenant-name {
  font-size: 11px;
  color: var(--muted);
  padding: 0 8px 14px;
}
.sidebar .nav-section {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 14px 8px 6px;
}
.sidebar nav button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-soft);
  text-align: left;
  padding: 9px 12px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: 2px;
  transition: background 120ms, color 120ms;
}
.sidebar nav button:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
}
.sidebar nav button.active {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  border-color: var(--line-2);
}
.sidebar nav button.active .icon { color: var(--neon); }
.sidebar nav button .icon { width: 16px; height: 16px; flex-shrink: 0; }
.sidebar .user-row {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
}
.sidebar .user-row .avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(139, 92, 246, 0.18);
  color: var(--violet);
  display: grid; place-items: center;
  font-weight: 600;
  font-size: 13px;
}
.sidebar .user-row .meta { flex: 1; min-width: 0; }
.sidebar .user-row .meta .name { font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar .user-row .meta .role { font-family: var(--font-mono); font-size: 10px; color: var(--muted-2); text-transform: uppercase; letter-spacing: 0.05em; }

.main {
  padding: 24px 28px 48px;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  gap: 16px;
  flex-wrap: wrap;
}
.page-header > :first-child { min-width: 0; flex: 1; }
.page-header h1 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: 0 0 4px;
  line-height: 1.2;
}
.page-header .sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted-2);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.company-bar {
  display: flex;
  align-items: center;
  gap: 10px;
}
.company-bar select {
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  color: var(--ink);
  padding: 8px 12px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-family: inherit;
}

/* ============ Cards ============ */
.card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px;
  margin-bottom: 18px;
}
.card h2 { margin: 0 0 18px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.card h3 {
  margin: 18px 0 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 500;
}
.card .card-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.card-glow {
  position: relative;
  overflow: hidden;
}
.card-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 0% 0%, rgba(182, 255, 54, 0.08), transparent 50%);
  pointer-events: none;
}

/* ============ Stat grid ============ */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.stat {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px;
  position: relative;
  overflow: hidden;
}
.stat .label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 8px;
}
.stat .value {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.stat .hint { font-size: 12px; color: var(--muted); margin-top: 4px; }
.stat.overdue .value { color: var(--red); }
.stat.due-soon .value { color: var(--yellow); }
.stat.upcoming .value { color: var(--cyan); }
.stat.done .value { color: var(--neon); }
.stat.neon .value { color: var(--neon); }

/* ============ Alerts / list items ============ */
.alert-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  background: var(--bg-2);
  gap: 14px;
  flex-wrap: wrap;
}
.alert-item.overdue { border-left: 3px solid var(--red); }
.alert-item.due-soon { border-left: 3px solid var(--yellow); }
.alert-item.upcoming { border-left: 3px solid var(--cyan); }
.alert-item .meta { flex: 1; min-width: 200px; }
.alert-item .title { font-weight: 500; font-size: 14px; color: var(--ink); }
.alert-item .sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
.alert-item .actions { display: flex; gap: 6px; }

/* ============ Badges / chips ============ */
.badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink-soft);
  border: 1px solid var(--line);
  margin-left: 8px;
  white-space: nowrap;
}
.badge.gst { background: rgba(34, 211, 238, 0.1); color: var(--cyan); border-color: rgba(34, 211, 238, 0.3); }
.badge.tds, .badge.income_tax { background: rgba(245, 181, 10, 0.1); color: var(--yellow); border-color: rgba(245, 181, 10, 0.3); }
.badge.mca { background: rgba(139, 92, 246, 0.1); color: var(--violet); border-color: rgba(139, 92, 246, 0.3); }
.badge.pf, .badge.esi { background: rgba(236, 72, 153, 0.1); color: var(--pink); border-color: rgba(236, 72, 153, 0.3); }
.badge.audit { background: rgba(255, 90, 90, 0.1); color: var(--red); border-color: rgba(255, 90, 90, 0.3); }
.badge.internal, .badge.other { background: rgba(255, 255, 255, 0.04); color: var(--muted); border-color: var(--line); }
.badge.neon { background: var(--neon-soft); color: var(--neon); border-color: rgba(182, 255, 54, 0.3); }
.badge.filed { background: rgba(182, 255, 54, 0.1); color: var(--neon); border-color: rgba(182, 255, 54, 0.2); }
.badge.sent_to_ca { background: rgba(34, 211, 238, 0.1); color: var(--cyan); border-color: rgba(34, 211, 238, 0.3); }
.badge.submitted { background: rgba(139, 92, 246, 0.1); color: var(--violet); border-color: rgba(139, 92, 246, 0.3); }
.badge.draft { background: rgba(255, 255, 255, 0.04); color: var(--muted); border-color: var(--line); }

/* ============ Tables ============ */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg-2);
}
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); }
tr:last-child td { border-bottom: none; }
th {
  font-family: var(--font-mono);
  color: var(--muted-2);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--bg-3);
}
tbody tr:hover { background: rgba(255, 255, 255, 0.02); }

/* ============ Section actions ============ */
.section-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.section-actions select, .section-actions input {
  background: var(--bg-2);
  color: var(--ink);
  border: 1px solid var(--line-2);
  padding: 7px 12px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-family: inherit;
}

/* ============ Toast ============ */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--bg-card);
  border: 1px solid var(--line-2);
  color: var(--ink);
  padding: 12px 18px;
  border-radius: var(--radius-md);
  font-size: 13px;
  z-index: 1000;
  animation: slide-in 0.2s ease-out;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.toast.success { border-left: 3px solid var(--neon); }
.toast.error { border-left: 3px solid var(--red); }
@keyframes slide-in {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.empty {
  text-align: center;
  padding: 40px 16px;
  color: var(--muted);
  font-size: 13px;
}
.empty .empty-icon {
  width: 40px; height: 40px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--bg-3);
  display: grid; place-items: center;
  color: var(--muted-2);
}

/* ============ Row / col helpers ============ */
.row { display: flex; gap: 14px; flex-wrap: wrap; }
.col { flex: 1; min-width: 180px; }

/* ============ Modal ============ */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 100; padding: 16px;
}
.modal {
  background: var(--bg-card);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  padding: 28px;
  width: 100%; max-width: 640px;
  max-height: 90vh; overflow: auto;
}

/* Tabbed modal — scroll lives inside each pane, not on the whole modal. */
.modal.modal-tabs {
  display: flex;
  flex-direction: column;
  max-height: 92vh;
  overflow: hidden;
  padding: 22px 24px 14px;
}
.modal-tabs .mt-head { flex-shrink: 0; }
.modal-tabs .mt-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin: 8px -24px 0;
  padding: 0 18px;
  overflow-x: auto;
  flex-shrink: 0;
}
.modal-tabs .mt-tabs button {
  background: transparent;
  border: none;
  color: var(--muted);
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.modal-tabs .mt-tabs button.active { color: var(--ink); border-bottom-color: var(--neon); }
.modal-tabs .mt-tabs button .badge { margin-left: 6px; }
.modal-tabs .mt-pane {
  flex: 1 1 auto;
  overflow-y: auto;
  margin: 0 -24px;
  padding: 16px 24px;
  display: none;
  min-height: 200px;
}
.modal-tabs .mt-pane.active { display: block; }
.modal-tabs .mt-search {
  position: sticky;
  top: 0;
  background: var(--bg-card);
  padding-bottom: 10px;
  margin-bottom: 8px;
  z-index: 1;
}
.modal-tabs .mt-search input {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  color: var(--ink);
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
}
.modal-tabs .mt-foot {
  flex-shrink: 0;
  border-top: 1px solid var(--line);
  margin: 0 -24px -2px;
  padding: 12px 24px 0;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ============ Messages thread ============ */
.message {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg-2);
  margin-bottom: 8px;
}
.message.pinned { border-left: 3px solid var(--neon); }
.message .avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg-3);
  color: var(--ink);
  display: grid; place-items: center;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}
.message .body { flex: 1; min-width: 0; }
.message .body .head { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; flex-wrap: wrap; }
.message .body .head .name { font-weight: 500; font-size: 13px; color: var(--ink); }
.message .body .head .ts { font-family: var(--font-mono); font-size: 10px; color: var(--muted-2); }
.message .body .text { font-size: 13px; color: var(--ink-soft); white-space: pre-wrap; word-break: break-word; }
.message .actions { font-size: 11px; color: var(--muted-2); }
.message .actions a { color: var(--muted-2); cursor: pointer; }
.message .actions a:hover { color: var(--neon); }

/* ============ Activity feed ============ */
.activity-item {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.activity-item:last-child { border-bottom: none; }
.activity-item .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--neon); margin-top: 8px; flex-shrink: 0;
}
.activity-item .body { flex: 1; }
.activity-item .head { color: var(--ink); }
.activity-item .head .who { font-weight: 500; }
.activity-item .head .what { font-family: var(--font-mono); font-size: 11px; color: var(--neon); margin-left: 6px; }
.activity-item .ts { font-family: var(--font-mono); font-size: 10px; color: var(--muted-2); margin-top: 2px; letter-spacing: 0.04em; }

/* ============ Mobile ============ */
.menu-toggle { display: none; }

@media (max-width: 840px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    left: 0; top: 0;
    width: 80%;
    max-width: 280px;
    height: 100vh;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 200ms ease;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
  }
  .sidebar.open { transform: translateX(0); }
  .main { padding: 16px 18px 40px; padding-top: 64px; }
  .menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 12px; left: 12px;
    width: 40px; height: 40px;
    background: var(--bg-card);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-md);
    color: var(--ink);
    z-index: 40;
    cursor: pointer;
  }
  .auth-card { padding: 28px 22px; }
  .stat .value { font-size: 24px; }
}

.muted { color: var(--muted); }
.text-mono { font-family: var(--font-mono); }
.right { text-align: right; }

/* ============ Dashboard v2 ============ */
.hero-card {
  background:
    radial-gradient(900px 200px at 0% 0%, rgba(182, 255, 54, 0.06), transparent 60%),
    radial-gradient(700px 240px at 100% 100%, rgba(139, 92, 246, 0.05), transparent 60%),
    var(--bg-card);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-xl);
  padding: 24px;
  margin-bottom: 18px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  position: relative;
}
.hero-card .hero-meta { min-width: 0; }
.hero-card .health-ring {
  position: relative;
  width: 120px; height: 120px;
  flex-shrink: 0;
}
.hero-card .health-ring svg {
  transform: rotate(-90deg);
  display: block;
  width: 120px; height: 120px;
}
.hero-card .health-ring .health-value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}
.hero-card .health-ring .health-value > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  /* Keep the label visually inside the ring */
  max-width: 96px;
}
.hero-card .health-ring .health-value .big {
  font-size: 28px; font-weight: 700; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  line-height: 1;
}
.hero-card .health-ring .health-value .small {
  font-family: var(--font-mono);
  font-size: 8px; letter-spacing: 0.05em;
  color: var(--muted-2);
  text-transform: uppercase;
  white-space: nowrap;
}
.hero-card .hero-meta .label {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.08em;
  color: var(--muted-2); text-transform: uppercase;
  margin-bottom: 8px;
}
.hero-card .hero-meta .title {
  font-size: 24px; font-weight: 600; letter-spacing: -0.02em;
  color: var(--ink); line-height: 1.2;
}
.hero-card .hero-meta .sub {
  color: var(--muted); margin-top: 6px; font-size: 13px;
}
.hero-card .hero-cta {
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
}
/* On any narrowish viewport (tablets, side-by-side windows, the open-sidebar
   layout on smaller laptops) the auto/auto/auto grid runs out of width and the
   CTA pill bleeds past the card edge. Stack the CTA below the meta as soon as
   we're under 1100px so the button stays fully visible. */
@media (max-width: 1100px) {
  .hero-card { grid-template-columns: auto minmax(0, 1fr); }
  .hero-card .hero-cta {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
  }
}
@media (max-width: 720px) {
  .hero-card { grid-template-columns: 1fr; text-align: center; }
  .hero-card .health-ring { margin: 0 auto; }
  .hero-card .hero-cta { justify-content: center; }
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
@media (max-width: 900px) { .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kpi-grid { grid-template-columns: 1fr; } }
.kpi {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
  transition: border-color 200ms, transform 200ms;
}
.kpi:hover { border-color: var(--line-3); transform: translateY(-1px); }
.kpi[data-goto] { cursor: pointer; }
.kpi[data-goto]:hover {
  border-color: var(--neon);
  background: linear-gradient(180deg, rgba(182,255,54,0.04), var(--bg-card));
}
.kpi .kpi-row { display: flex; align-items: center; justify-content: space-between; }
.kpi .kpi-label {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.08em;
  color: var(--muted-2); text-transform: uppercase;
}
.kpi .kpi-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink-soft);
}
.kpi.neon .kpi-icon { background: rgba(182, 255, 54, 0.1); color: var(--neon); }
.kpi.violet .kpi-icon { background: rgba(139, 92, 246, 0.12); color: var(--violet); }
.kpi.cyan .kpi-icon { background: rgba(34, 211, 238, 0.1); color: var(--cyan); }
.kpi.red .kpi-icon { background: rgba(255, 90, 90, 0.1); color: var(--red); }
.kpi.yellow .kpi-icon { background: rgba(245, 181, 10, 0.1); color: var(--yellow); }
.kpi .kpi-value {
  font-size: 28px; font-weight: 600;
  letter-spacing: -0.02em;
  margin-top: 10px;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.kpi .kpi-sub {
  font-size: 12px; color: var(--muted); margin-top: 4px;
  display: flex; align-items: center; gap: 6px;
}
.kpi .delta { font-family: var(--font-mono); font-size: 11px; padding: 2px 6px; border-radius: 4px; }
.kpi .delta.up { background: rgba(182, 255, 54, 0.1); color: var(--neon); }
.kpi .delta.down { background: rgba(255, 90, 90, 0.1); color: var(--red); }
.kpi.red .kpi-value { color: var(--red); }
.kpi.yellow .kpi-value { color: var(--yellow); }
.kpi.neon .kpi-value { color: var(--neon); }

.dash-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 14px;
}
@media (max-width: 900px) { .dash-grid { grid-template-columns: 1fr; } }

.dash-list-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  gap: 12px;
}
.dash-list-row:last-child { border-bottom: none; }
.dash-list-row .left { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.dash-list-row .left .title { color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-list-row .left .sub { color: var(--muted); font-size: 11px; }
.dash-list-row .pill {
  font-family: var(--font-mono);
  font-size: 10px; padding: 3px 8px; border-radius: 999px;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.04); color: var(--ink-soft);
  border: 1px solid var(--line);
}
.dash-list-row .pill.red { background: rgba(255, 90, 90, 0.1); color: var(--red); border-color: rgba(255, 90, 90, 0.3); }
.dash-list-row .pill.yellow { background: rgba(245, 181, 10, 0.1); color: var(--yellow); border-color: rgba(245, 181, 10, 0.3); }
.dash-list-row .pill.cyan { background: rgba(34, 211, 238, 0.1); color: var(--cyan); border-color: rgba(34, 211, 238, 0.3); }
.dash-list-row .pill.neon { background: var(--neon-soft); color: var(--neon); border-color: rgba(182, 255, 54, 0.3); }

.spark {
  width: 100%;
  height: 56px;
}
.spark path.fill { fill: rgba(182, 255, 54, 0.12); }
.spark path.line { stroke: var(--neon); stroke-width: 1.6; fill: none; }
.spark circle { fill: var(--neon); }

.action-row {
  display: flex; gap: 8px; flex-wrap: wrap;
}

/* ============ Searchable multi-select (chip picker) ============ */
.chip-picker {
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-md);
  padding: 8px;
  min-height: 60px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chip-picker .chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  min-height: 24px;
}
.chip-picker .chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 10px;
  background: rgba(182, 255, 54, 0.12);
  border: 1px solid rgba(182, 255, 54, 0.3);
  color: var(--neon);
  border-radius: 999px;
  font-size: 12px;
  font-family: inherit;
}
.chip-picker .chip .x {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: rgba(182, 255, 54, 0.25);
  display: grid; place-items: center;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.chip-picker .chip .x:hover { background: var(--neon); color: var(--bg); }
.chip-picker input.chip-search {
  background: transparent;
  border: none;
  outline: none;
  color: var(--ink);
  font-size: 13px;
  font-family: inherit;
  padding: 6px 8px;
  width: 100%;
  border-top: 1px solid var(--line);
}
.chip-picker .chip-results {
  max-height: 180px;
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.chip-picker .chip-results .opt {
  padding: 7px 10px;
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
  border-radius: 6px;
  display: flex; justify-content: space-between; align-items: center;
}
.chip-picker .chip-results .opt:hover { background: rgba(255, 255, 255, 0.04); color: var(--ink); }
.chip-picker .chip-results .opt.disabled { opacity: 0.4; cursor: default; }
.chip-picker .chip-empty { font-size: 12px; color: var(--muted); padding: 8px 10px; }
.chip-picker .chip-meta { font-size: 11px; color: var(--muted-2); padding: 2px 8px; }

/* ============ Calendar grid view ============ */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-top: 12px;
}
.cal-grid .cal-h {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.06em;
  color: var(--muted-2); text-transform: uppercase;
  text-align: center; padding: 4px 0;
}
.cal-cell {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  min-height: 86px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}
.cal-cell.empty { background: transparent; border: 1px dashed var(--line); opacity: 0.5; min-height: 56px; }
.cal-cell.today { border-color: var(--neon); box-shadow: 0 0 0 2px rgba(182, 255, 54, 0.15); }
.cal-cell.weekend { background: rgba(255, 255, 255, 0.015); }
.cal-cell .cal-day {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  display: flex; justify-content: space-between; align-items: center;
}
.cal-cell.today .cal-day { color: var(--neon); }
.cal-cell .cal-items {
  display: flex; flex-direction: column; gap: 2px;
  overflow: hidden;
}
.cal-item {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer;
  border-left: 2px solid var(--muted-2);
}
.cal-item.gst   { border-left-color: var(--cyan); }
.cal-item.tds   { border-left-color: var(--yellow); }
.cal-item.income_tax { border-left-color: var(--yellow); }
.cal-item.mca   { border-left-color: var(--violet); }
.cal-item.pf, .cal-item.esi, .cal-item.pt { border-left-color: var(--pink); }
.cal-item.audit { border-left-color: var(--red); }
.cal-item.internal { border-left-color: var(--muted-2); }
.cal-item.filed { opacity: 0.45; text-decoration: line-through; }
.cal-item.overdue { background: rgba(255, 90, 90, 0.1); border-left-color: var(--red); }
.cal-cell .cal-more { font-size: 10px; color: var(--muted-2); font-family: var(--font-mono); }
.cal-nav { display: flex; gap: 8px; align-items: center; }
.cal-nav .cal-title { font-family: var(--font-mono); font-size: 12px; color: var(--ink); letter-spacing: 0.04em; }
.cal-toggle {
  display: inline-flex; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 2px;
}
.cal-toggle button {
  background: transparent; border: none; color: var(--muted); padding: 6px 14px;
  border-radius: 999px; font-family: inherit; font-size: 12px; cursor: pointer;
}
.cal-toggle button.active { background: var(--ink); color: var(--bg); }

/* ============ Top bar (notification bell etc.) ============ */
.top-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(22, 24, 28, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  padding: 10px 28px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: -24px -28px 20px;
}
.ai-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.03);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 200ms, border-color 200ms, background 200ms;
}
.ai-status .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--muted-2);
  box-shadow: none;
  transition: background 200ms, box-shadow 200ms;
}
.ai-status.online {
  color: var(--neon);
  border-color: rgba(182, 255, 54, 0.3);
  background: rgba(182, 255, 54, 0.06);
}
.ai-status.online .dot {
  background: var(--neon);
  box-shadow: 0 0 8px var(--neon);
  animation: pulse-dot 1.8s ease-in-out infinite;
}
.ai-status.offline { color: var(--red); border-color: rgba(255, 90, 90, 0.3); }
.ai-status.offline .dot { background: var(--red); }
.ai-status .latency { color: var(--muted-2); }

.bell-btn {
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  color: var(--ink-soft);
  cursor: pointer;
  position: relative;
  transition: background 150ms;
}
.bell-btn:hover { background: rgba(255, 255, 255, 0.04); border-color: var(--line-3); }
.bell-btn .badge-dot {
  position: absolute;
  top: 6px; right: 6px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  background: var(--red);
  color: white;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  display: grid; place-items: center;
  border: 2px solid var(--bg);
}

.notif-panel {
  position: absolute;
  top: 56px; right: 20px;
  width: min(380px, 90vw);
  max-height: 70vh;
  background: var(--bg-card);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  z-index: 100;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.notif-panel .head {
  padding: 14px 16px;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--line);
}
.notif-panel .head h3 { margin: 0; font-size: 14px; font-weight: 600; }
.notif-panel .list { overflow-y: auto; flex: 1; }
.notif-panel .item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background 120ms;
}
.notif-panel .item:hover { background: rgba(255, 255, 255, 0.03); }
.notif-panel .item.unread { border-left: 2px solid var(--neon); padding-left: 14px; }
.notif-panel .item .title { font-size: 13px; font-weight: 500; color: var(--ink); }
.notif-panel .item .body { font-size: 12px; color: var(--muted); margin-top: 4px; }
.notif-panel .item .ts { font-family: var(--font-mono); font-size: 10px; color: var(--muted-2); margin-top: 4px; }

/* ============ Command palette ============ */
.cmdk-bar {
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 6px 14px;
  cursor: pointer;
  transition: border-color 150ms;
}
.cmdk-bar:hover { border-color: var(--line-3); }
.cmdk-bar .cmdk-label { flex: 1; color: var(--muted); font-size: 12px; }
.kbd-hint {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  color: var(--ink-soft);
}
.cmdk-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  z-index: 200;
  display: flex;
  justify-content: center;
  padding-top: 12vh;
}
.cmdk {
  background: var(--bg-card);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  width: min(560px, 92vw);
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
.cmdk input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--ink);
  padding: 16px 20px;
  font-size: 15px;
  font-family: inherit;
  border-bottom: 1px solid var(--line);
}
.cmdk input::placeholder { color: var(--muted-2); }
.cmdk-list { overflow-y: auto; padding: 6px; }
.cmdk-item {
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink-soft);
  font-size: 14px;
}
.cmdk-item.active, .cmdk-item:hover {
  background: var(--neon-soft);
  color: var(--neon);
}
.cmdk-item .cmdk-icon { width: 18px; opacity: 0.8; }
.cmdk-item .cmdk-meta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cmdk-section {
  padding: 8px 14px 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ============ GST liability widget ============ */
.bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 90px;
  padding: 8px 0;
}
.bars .bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
}
.bars .bar-fill {
  width: 100%;
  background: linear-gradient(180deg, var(--neon) 0%, var(--neon-deep) 100%);
  border-radius: 3px 3px 0 0;
  min-height: 2px;
}
.bars .bar-fill.neg { background: linear-gradient(180deg, var(--red) 0%, #b53737 100%); }
.bars .bar-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-top: 4px;
}

.row-3 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 18px;
}
@media (max-width: 900px) { .row-3 { grid-template-columns: 1fr; } }

.kv-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.kv-row:last-child { border-bottom: none; }
.kv-row .k { color: var(--muted); }
.kv-row .v { font-family: var(--font-mono); color: var(--ink); }

/* ============ Print ============ */
@media print {
  body { background: white !important; color: black !important; }
  .sidebar, .menu-toggle, .section-actions, .card-actions, .toast, .modal-backdrop,
  .alert-item .actions, .activity-item .dot,
  button { display: none !important; }
  .shell { grid-template-columns: 1fr !important; }
  .main { padding: 0 !important; max-width: 100% !important; }
  .card { background: white !important; border: 1px solid #ddd !important; box-shadow: none !important; page-break-inside: avoid; }
  .card h2, .card h3, .page-header h1 { color: black !important; }
  .stat { background: white !important; border-color: #ddd !important; }
  .stat .value, .stat .label, .stat .hint { color: black !important; }
  .table-wrap { border-color: #ddd !important; background: white !important; }
  th, td { color: black !important; border-color: #ddd !important; background: white !important; }
  th { background: #f5f5f5 !important; }
  .badge { background: #f0f0f0 !important; color: black !important; border-color: #ccc !important; }
  .alert-item { background: white !important; border-color: #ddd !important; page-break-inside: avoid; }
  .alert-item .title, .alert-item .sub { color: black !important; }
  .muted, .mono, .sub { color: #444 !important; }
  a { color: black !important; }
  .page-header::after { content: "  ·  Printed " attr(data-printed); font-size: 11px; color: #888; }
}

/* === Drag-and-drop file zones ============================================ */
.dropzone {
  position: relative;
  border: 1.5px dashed var(--line-2, #2a2f37);
  border-radius: 10px;
  background: rgba(255,255,255,0.015);
  padding: 18px 16px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
  outline: none;
}
.dropzone:hover,
.dropzone:focus-visible {
  border-color: var(--neon, #c8ff3e);
  background: rgba(200, 255, 62, 0.04);
}
.dropzone.drag-over {
  border-color: var(--neon, #c8ff3e);
  background: rgba(200, 255, 62, 0.08);
  transform: scale(1.005);
}
.dropzone .dz-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  pointer-events: none;
}
.dropzone .dz-icon {
  color: var(--neon, #c8ff3e);
  opacity: 0.85;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dropzone .dz-icon svg { width: 26px; height: 26px; }
.dropzone .dz-hint {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink, #e6e9ef);
}
.dropzone .dz-accept {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.dropzone .dz-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dropzone .dz-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--line-2, #2a2f37);
  border-radius: 999px;
  font-size: 12px;
  max-width: 100%;
}
.dropzone .dz-chip .dz-name {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dropzone .dz-chip .dz-size { font-size: 11px; }
.dropzone .dz-chip .dz-remove {
  background: transparent;
  border: none;
  color: var(--muted, #8a93a3);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
  border-radius: 4px;
}
.dropzone .dz-chip .dz-remove:hover { color: var(--ink, #e6e9ef); background: rgba(255,255,255,0.06); }
@media (max-width: 519px) {
  .dropzone { padding: 14px 12px; }
  .dropzone .dz-icon svg { width: 22px; height: 22px; }
  .dropzone .dz-hint { font-size: 12px; }
}

/* === Active / Disabled toggle button (Users table) ====================== */
.status-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-2, #2a2f37);
  background: rgba(255,255,255,0.03);
  color: var(--ink, #e6e9ef);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.status-toggle:hover { background: rgba(255,255,255,0.07); transform: translateY(-1px); }
.status-toggle:active { transform: translateY(0); }
.status-toggle .dot {
  width: 7px; height: 7px; border-radius: 50%; display: inline-block;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.3);
}
.status-toggle.on { border-color: rgba(46, 204, 113, 0.4); color: #2ecc71; }
.status-toggle.on .dot { background: #2ecc71; box-shadow: 0 0 6px #2ecc71; }
.status-toggle.off { border-color: rgba(231, 76, 60, 0.4); color: #e74c3c; }
.status-toggle.off .dot { background: #e74c3c; box-shadow: 0 0 6px #e74c3c; }

/* === Clickable rows (Compliance list) =================================== */
tr.row-clickable { cursor: pointer; transition: background .12s ease; }
tr.row-clickable:hover { background: rgba(200, 255, 62, 0.04); }
tr.row-clickable:hover td:first-child { box-shadow: inset 3px 0 0 var(--neon, #c8ff3e); }

/* ============ Mobile (≤ 519px) — full responsive pass ============ */
.sidebar-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
  z-index: 45;
  opacity: 0; pointer-events: none;
  transition: opacity 200ms ease;
}
.sidebar-backdrop.show { opacity: 1; pointer-events: auto; }
body.drawer-open { overflow: hidden; }

@media (max-width: 519px) {
  /* Sidebar drawer — slide in, with backdrop, narrower so content peeks */
  .sidebar {
    width: 84%;
    max-width: 320px;
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Top bar — make room for the hamburger and pull pills tighter */
  .main { padding: 12px 14px 32px; padding-top: 60px; }
  .top-bar {
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 6px;
  }
  .top-bar .ai-status { font-size: 10.5px; padding: 4px 8px; flex-shrink: 0; }
  .top-bar .ai-status .latency { display: none; }
  .menu-toggle { top: 10px; left: 10px; width: 38px; height: 38px; }

  /* Page header — title and actions stack vertically */
  .page-header {
    flex-direction: column;
    align-items: stretch !important;
    gap: 10px;
  }
  .page-header h1 { font-size: 20px; line-height: 1.2; }
  .page-header .sub { font-size: 11.5px; }
  .page-header > div:last-child { width: 100%; }
  .page-header > div:last-child > * { width: 100%; }

  /* Section actions — every control becomes a full-width row */
  .section-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .section-actions > span[style*="flex"] { display: none; } /* drop the flex:1 spacer */
  .section-actions select,
  .section-actions input,
  .section-actions .btn { width: 100%; }
  .cal-toggle { display: flex; }
  .cal-toggle button { flex: 1; }

  /* Cards — tighter padding */
  .card { padding: 16px 14px; border-radius: 12px; }
  .card h2 { font-size: 16px; }
  .card h3 { font-size: 14px; }

  /* Forms — single column */
  .row { flex-direction: column; gap: 10px; }
  .row .col { width: 100%; }
  .field input, .field select, .field textarea { font-size: 16px; } /* prevents iOS auto-zoom */

  /* Tables — horizontal scroll with edge fade so users notice there's more */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrap table { min-width: 540px; }
  .table-wrap th, .table-wrap td { white-space: nowrap; font-size: 12px; padding: 8px 10px; }

  /* Phone input — let the local field grow */
  .phone-input { grid-template-columns: 96px 1fr; }
  .phone-input select { font-size: 12px; padding: 8px; }

  /* Modal — full-screen on phones for breathing room */
  .modal-backdrop { padding: 0; }
  .modal {
    width: 100%;
    max-width: 100%;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    padding: 20px 16px 24px;
  }
  .modal h2 { font-size: 18px; }

  /* Hero card — already collapses at <1024 via existing rule; just tighten */
  .hero-card { padding: 18px 16px; gap: 14px; margin-bottom: 12px; }
  .hero-card .hero-meta .title { font-size: 20px; }

  /* KPI tiles — already single column ≤560; tighten font */
  .kpi { padding: 14px 14px; }

  /* Dropzone — already responsive, but make chip names narrower */
  .dropzone .dz-chip .dz-name { max-width: 140px; }

  /* SSL list — stack the row */
  .ssl-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .ssl-row .btn { width: 100%; }

  /* Status toggle — keep visible at full size in tight rows */
  .status-toggle { font-size: 10px; padding: 3px 8px; }

  /* Tabbed modal — full-screen */
  .modal.modal-tabs { height: 100vh; max-height: 100vh; border-radius: 0; }
  .mt-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .mt-tabs button { white-space: nowrap; font-size: 12px; }
}

/* === Phone input pair (country code + local number) ==================== */
.phone-input {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 8px;
  align-items: stretch;
}
.phone-input select {
  width: 100%;
  font-family: inherit;
}
.phone-input input {
  width: 100%;
}

/* === Per-domain SSL list (Tenant detail Overview) ======================= */
.ssl-list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.ssl-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 12px;
  border: 1px solid var(--line-2, #2a2f37); border-radius: 8px;
  background: rgba(255,255,255,0.02);
}
.ssl-row .ssl-row-main { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.ssl-row a { color: var(--ink, #e6e9ef); }
.ssl-row a:hover { color: var(--neon, #c8ff3e); }