/* Shetu Back Office
   Design tokens extend the original palette rather than replacing it. Every
   class name the JS relies on (.metric, .panel, .data-table, .badge, [data-view])
   is preserved — only values and additive rules changed. Colours that were
   hardcoded in rules are now tokens so dark mode works without touching markup. */

:root {
  /* Brand — unchanged from the original design system */
  --green: #004b3d;
  /* Darkened from #087d60: as text on --mint it measured 4.48:1, just under the
     4.5:1 AA floor. Now 5.2:1. */
  --green-2: #076f57;
  --mint: #e6f3ed;
  --cream: #fbf7ed;
  --gold: #f6ad36;
  --red: #ed4737;

  /* Surfaces & text */
  --bg: #f4f1e8;
  --surface: #fff;
  --surface-2: #fafaf6;
  --surface-3: #f3f4ef;
  --white: #fff;
  --ink: #10261f;
  /* Darkened from #6f7c76, which measured 4.36:1 on --surface and only 3.86:1
     on --bg — both under AA for body text. Now 4.9:1 and 5.5:1. */
  --muted: #5c6a63;
  --line: #e6e5dc;
  --line-soft: #efefe9;

  /* Sidebar */
  --side-bg: #004b3d;
  --side-mark: #0b382f;
  --side-text: #b9d1ca;
  --side-text-strong: #fff;
  --side-muted: #9fc2b8;
  --side-hover: rgba(255, 255, 255, .11);
  --side-border: rgba(255, 255, 255, .12);

  /* Status — semantic pairs used by .badge and status dots */
  --ok-bg: #e1f4ea;      --ok-fg: #126b4b;
  --warn-bg: #fff1d4;    --warn-fg: #91600f;
  --danger-bg: #ffe5e0;  --danger-fg: #a42d22;
  --neutral-bg: #eae9f6; --neutral-fg: #535075;
  --idle-bg: #eef0ed;    --idle-fg: #5f6c66;

  /* Elevation */
  --shadow: 0 18px 55px rgba(16, 38, 31, .09);
  --shadow-sm: 0 5px 18px rgba(16, 38, 31, .03);
  --shadow-md: 0 10px 30px rgba(16, 38, 31, .07);

  /* Shape, motion, focus */
  --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 20px;
  --ease: cubic-bezier(.2, .7, .3, 1);
  --t-fast: .14s var(--ease);
  --t-med: .24s var(--ease);
  --focus: 0 0 0 3px rgba(8, 125, 96, .32);

  color-scheme: light;
}

/* Dark mode. Same token names remap, so every rule below is theme-agnostic.
   System preference applies unless the operator has explicitly chosen light. */
:root[data-theme="dark"] {
  --bg: #0d1613;
  --surface: #14211d;
  --surface-2: #192823;
  --surface-3: #1f302a;
  --white: #14211d;
  --ink: #e9f1ed;
  --muted: #93a69e;
  --line: #26362f;
  --line-soft: #20302a;
  --cream: #14211d;
  --mint: #17322a;
  --green-2: #35b389;

  --side-bg: #0a1815;
  --side-mark: #122a23;
  --side-text: #9db5ac;
  --side-muted: #7d9a90;
  --side-hover: rgba(255, 255, 255, .07);
  --side-border: rgba(255, 255, 255, .08);

  --ok-bg: #10362a;      --ok-fg: #5fd3a5;
  --warn-bg: #3a2c11;    --warn-fg: #f2be5c;
  --danger-bg: #3d1d19;  --danger-fg: #f79484;
  --neutral-bg: #26243a; --neutral-fg: #b3aee0;
  --idle-bg: #232f2b;    --idle-fg: #93a69e;

  --shadow: 0 18px 55px rgba(0, 0, 0, .45);
  --shadow-sm: 0 5px 18px rgba(0, 0, 0, .25);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, .35);
  --focus: 0 0 0 3px rgba(53, 179, 137, .38);

  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1613;
    --surface: #14211d;
    --surface-2: #192823;
    --surface-3: #1f302a;
    --white: #14211d;
    --ink: #e9f1ed;
    --muted: #93a69e;
    --line: #26362f;
    --line-soft: #20302a;
    --cream: #14211d;
    --mint: #17322a;
    --green-2: #35b389;

    --side-bg: #0a1815;
    --side-mark: #122a23;
    --side-text: #9db5ac;
    --side-muted: #7d9a90;
    --side-hover: rgba(255, 255, 255, .07);
    --side-border: rgba(255, 255, 255, .08);

    --ok-bg: #10362a;      --ok-fg: #5fd3a5;
    --warn-bg: #3a2c11;    --warn-fg: #f2be5c;
    --danger-bg: #3d1d19;  --danger-fg: #f79484;
    --neutral-bg: #26243a; --neutral-fg: #b3aee0;
    --idle-bg: #232f2b;    --idle-fg: #93a69e;

    --shadow: 0 18px 55px rgba(0, 0, 0, .45);
    --shadow-sm: 0 5px 18px rgba(0, 0, 0, .25);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, .35);
    --focus: 0 0 0 3px rgba(53, 179, 137, .38);

    color-scheme: dark;
  }
}

/* ---------- base ---------- */
* { box-sizing: border-box }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "DM Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: background var(--t-med), color var(--t-med);
}
button, input, select { font: inherit }
button { cursor: pointer }
.bn { font-family: "Noto Serif Bengali", serif }
.hidden { display: none !important }

/* Keyboard users otherwise tab through all twelve nav items on every screen. */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 60;
  background: var(--green); color: #fff; padding: 12px 18px;
  border-radius: var(--r-md); font-weight: 700; text-decoration: none;
  transition: top var(--t-fast);
}
.skip-link:focus { top: 12px }
#workspace:focus { outline: none }

:where(button, input, select, a, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus);
  border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important }
}

/* ---------- login ---------- */
#app { min-height: 100vh }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(320px, 560px) 1fr; background: var(--cream) }
.login-panel { padding: clamp(32px, 7vw, 90px); display: flex; flex-direction: column; justify-content: center }
.login-art { position: relative; overflow: hidden; background: #0b3b30 url("./shetu-community-illustration.png") center/cover no-repeat }
.login-art:before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(1,28,22,.02) 36%, rgba(1,28,22,.22) 62%, rgba(1,28,22,.92) 100%) }
.login-art:after { content: "Shetu community"; position: absolute; right: 34px; top: 34px; padding: 10px 15px; border: 1px solid rgba(255,255,255,.42); border-radius: 999px; background: rgba(0,75,61,.55); backdrop-filter: blur(12px); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase }
.bridge { position: absolute; left: clamp(34px,6vw,90px); right: clamp(34px,6vw,90px); bottom: clamp(42px,7vh,82px); color: #fff }
.bridge:before { content: "COMMUNITY · COMMERCE · CARE"; display: block; margin-bottom: 14px; color: #f6c36f; font-size: 12px; font-weight: 800; letter-spacing: .16em }
.bridge:after { content: "Built for Bangladeshis across America."; display: block; color: #fff; font-size: clamp(30px,3.2vw,54px); font-weight: 700; max-width: 660px; line-height: 1.06; text-shadow: 0 4px 22px rgba(0,0,0,.32) }

.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 58px }
.brand-mark { width: 48px; height: 48px; border-radius: 15px; background: var(--green); display: grid; place-items: center; color: var(--gold); font-weight: 800; font-size: 22px; box-shadow: inset 0 0 0 2px rgba(246,173,54,.5) }
.brand strong { font-size: 22px }
.eyebrow { color: var(--red); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase }
.login-panel h1 { font-size: clamp(38px,4vw,58px); line-height: 1; margin: 10px 0 16px; letter-spacing: -.02em }
.login-panel p { color: var(--muted); font-size: 17px; line-height: 1.6; max-width: 430px }
.auth-card { margin-top: 30px; max-width: 430px }

.field { display: grid; gap: 8px; margin: 0 0 16px }
.field label { font-size: 13px; font-weight: 700 }
.field input, .field select, .toolbar input, .toolbar select {
  width: 100%; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 14px 16px; background: var(--surface); color: var(--ink); outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field input:focus, .toolbar input:focus, .toolbar select:focus { border-color: var(--green-2); box-shadow: var(--focus) }

.primary, .secondary, .danger, .small-button {
  border: 0; border-radius: var(--r-md); padding: 14px 18px; font-weight: 700;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), opacity var(--t-fast);
}
.primary { background: var(--green); color: #fff; width: 100%; box-shadow: 0 10px 24px rgba(0,75,61,.2) }
.primary:hover:not(:disabled) { background: var(--green-2); transform: translateY(-1px); box-shadow: 0 14px 28px rgba(0,75,61,.26) }
.primary:active:not(:disabled) { transform: translateY(0) }
.secondary { background: var(--mint); color: var(--green-2) }
.secondary:hover:not(:disabled) { filter: brightness(.97) }
.danger { background: var(--danger-bg); color: var(--danger-fg) }
.small-button { padding: 9px 12px; border-radius: var(--r-sm); background: var(--mint); color: var(--green-2); font-size: 13px }
.small-button:hover:not(:disabled) { background: var(--green-2); color: #fff }
button:disabled { opacity: .45; cursor: not-allowed }
.hint { font-size: 13px !important; margin-top: 12px !important; color: var(--muted) }

/* ---------- shell & sidebar ---------- */
.shell { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 100vh }
/* height is fixed to the viewport, so anything taller must scroll INSIDE the
   sidebar. Without overflow containment the nav spilled past the coloured
   background and rendered on the page behind it. */
.sidebar { position: sticky; top: 0; height: 100vh; background: var(--side-bg); color: var(--side-text-strong); padding: 28px 20px; display: flex; flex-direction: column; overflow: hidden; transition: background var(--t-med) }
.sidebar .brand { margin: 0 8px 30px; flex: 0 0 auto }
.sidebar .brand-mark { background: var(--side-mark) }
.sidebar small { color: var(--side-muted) }
/* The nav is the flexible region: it scrolls, while brand and operator stay put.
   min-height:0 is required or a flex child refuses to shrink below its content. */
.nav { display: grid; gap: 6px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent }
.nav::-webkit-scrollbar { width: 6px }
.nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 3px }
.nav::-webkit-scrollbar-track { background: transparent }
.nav button {
  border: 0; background: transparent; color: var(--side-text); border-radius: 12px;
  padding: 12px 14px; text-align: left; display: flex; align-items: center; gap: 12px;
  font-weight: 600; position: relative; transition: background var(--t-fast), color var(--t-fast);
}
.nav button:hover { background: var(--side-hover); color: var(--side-text-strong) }
.nav button.active { background: var(--side-hover); color: var(--side-text-strong) }
.nav button.active::before { content: ""; position: absolute; left: -20px; top: 50%; transform: translateY(-50%); width: 3px; height: 22px; border-radius: 0 3px 3px 0; background: var(--gold) }
.nav-icon { width: 22px; height: 22px; display: grid; place-items: center; flex: 0 0 22px }
.nav-icon svg { width: 18px; height: 18px; display: block }
.nav button .nav-icon { opacity: .8; transition: opacity var(--t-fast) }
.nav button:hover .nav-icon, .nav button.active .nav-icon { opacity: 1 }

.operator { margin-top: auto; flex: 0 0 auto; border-top: 1px solid var(--side-border); padding: 16px 8px 0 }
.operator strong, .operator small { display: block }
.signout { margin-top: 14px; border: 1px solid rgba(255,255,255,.18); background: transparent; color: #fff; border-radius: var(--r-sm); padding: 9px 12px; width: 100%; transition: background var(--t-fast) }
.signout:hover { background: rgba(255,255,255,.1) }
.theme-toggle {
  margin-top: 10px; width: 100%; border: 1px solid var(--side-border); background: transparent;
  color: var(--side-text); border-radius: var(--r-sm); padding: 9px 12px; font-size: 13px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 8px; transition: background var(--t-fast), color var(--t-fast);
}
.theme-toggle:hover { background: var(--side-hover); color: var(--side-text-strong) }
.theme-toggle svg { width: 15px; height: 15px }

/* ---------- workspace ---------- */
.main { padding: 34px clamp(22px,4vw,58px) 70px; min-width: 0 }
/* Screens fade in rather than snapping, so switching views reads as a
   transition instead of a flash. Motion is suppressed by the reduced-motion
   rule near the top of this file. */
.view-enter { animation: viewEnter .18s var(--ease) both }
@keyframes viewEnter { from { opacity: 0; transform: translateY(4px) } to { opacity: 1; transform: none } }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 32px }
.topbar h1 { font-size: 34px; margin: 0; letter-spacing: -.02em }
.topbar p { margin: 5px 0 0; color: var(--muted) }
.live-pill { display: flex; align-items: center; gap: 8px; background: var(--ok-bg); color: var(--ok-fg); padding: 9px 13px; border-radius: 999px; font-weight: 700; font-size: 13px; white-space: nowrap }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #2cb67d; box-shadow: 0 0 0 4px rgba(44,182,125,.15) }

/* ---------- metric tiles + sparklines ---------- */
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 16px; margin-bottom: 28px }
.metric {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 20px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; min-width: 0;
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.metric:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--green-2) 26%, var(--line)) }
.metric .label { color: var(--muted); font-size: 13px; font-weight: 600 }
.metric .value { font-size: 30px; font-weight: 700; margin: 8px 0 3px; letter-spacing: -.02em; font-variant-numeric: tabular-nums }
/* Values and labels wear text tokens; the coloured mark beside them carries
   identity. Never paint numbers in the series colour. */
.metric .detail { font-size: 12px; color: var(--muted) }
.metric-spark { margin-top: 12px; height: 34px; width: 100% }
.metric-spark svg { display: block; width: 100%; height: 34px; overflow: visible }
.spark-line { fill: none; stroke: var(--spark, var(--green-2)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke }
.spark-area { fill: var(--spark, var(--green-2)); opacity: .13 }
.spark-dot { fill: none; stroke: var(--spark, var(--green-2)); stroke-width: 6.5; stroke-linecap: round; vector-effect: non-scaling-stroke }
.spark-hit { fill: transparent; cursor: crosshair }
.spark-hit:hover { fill: var(--spark, var(--green-2)); opacity: .09 }
.spark-flat { stroke: var(--muted); stroke-width: 2; stroke-linecap: round; opacity: .45; fill: none }
.spark-caption { font-size: 11px; color: var(--muted); margin-top: 7px; display: flex; justify-content: space-between; gap: 8px }

/* ---------- panels ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow); overflow: hidden; margin-bottom: 22px }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; border-bottom: 1px solid var(--line) }
.panel-head h2 { margin: 0; font-size: 19px; letter-spacing: -.01em }
.panel-head p { margin: 4px 0 0; color: var(--muted); font-size: 13px }
.panel-body { padding: 20px 22px }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end }
/* Width comes from the shared .field/.toolbar input rule as 100%, which made the
   search box claim the whole row and pushed the status filter onto a second line. */
.toolbar input { width: auto; min-width: 220px }
.toolbar select { width: auto; min-width: 150px }
.toolbar .primary { width: auto; padding: 11px 16px }

/* ---------- tables ---------- */
.table-wrap { overflow: auto; max-height: 68vh }
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 780px }
.data-table th {
  text-align: left; color: var(--muted); font-size: 11px; text-transform: uppercase;
  letter-spacing: .06em; padding: 13px 16px; background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 2; white-space: nowrap;
}
.data-table th.sortable { cursor: pointer; user-select: none; transition: color var(--t-fast), background var(--t-fast) }
.data-table th.sortable:hover { color: var(--ink); background: var(--surface-3) }
.sort-caret { display: inline-block; margin-left: 6px; opacity: .32; font-size: 9px; transition: opacity var(--t-fast) }
.data-table th[aria-sort="ascending"] .sort-caret,
.data-table th[aria-sort="descending"] .sort-caret { opacity: 1; color: var(--green-2) }
.data-table th[aria-sort="ascending"] .sort-caret::after { content: "▲" }
.data-table th[aria-sort="descending"] .sort-caret::after { content: "▼" }
.data-table th.sortable:not([aria-sort]) .sort-caret::after { content: "⇅" }
.data-table td { padding: 15px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: top; font-size: 14px }
.data-table tbody tr { transition: background var(--t-fast) }
.data-table tbody tr:hover { background: var(--surface-3) }
.data-table tbody tr:last-child td { border-bottom: 0 }
.data-table strong { display: block }
.sub { color: var(--muted); font-size: 12px; margin-top: 3px }

.badge { display: inline-flex; padding: 5px 9px; border-radius: 999px; background: var(--idle-bg); color: var(--idle-fg); font-weight: 700; font-size: 11px; text-transform: capitalize }
.badge.active, .badge.published, .badge.completed, .badge.resolved, .badge.paid, .badge.funded { background: var(--ok-bg); color: var(--ok-fg) }
.badge.pending, .badge.reviewing, .badge.running { background: var(--warn-bg); color: var(--warn-fg) }
.badge.rejected, .badge.suspended, .badge.failed, .badge.deleted { background: var(--danger-bg); color: var(--danger-fg) }
.badge.hidden, .badge.paused, .badge.dismissed { background: var(--neutral-bg); color: var(--neutral-fg) }

.zip { display: inline-block; background: var(--mint); color: var(--green-2); padding: 4px 7px; border-radius: 7px; font-size: 11px; font-weight: 700; margin: 2px }
.actions { display: flex; gap: 6px; flex-wrap: wrap }
.post-body { max-width: 520px; white-space: pre-line; line-height: 1.45 }

/* ---------- empty & loading ---------- */
.empty { padding: 56px 20px; text-align: center; color: var(--muted) }
.empty-icon { width: 54px; height: 54px; border-radius: var(--r-lg); background: var(--mint); display: grid; place-items: center; margin: 0 auto 14px; color: var(--green-2); font-size: 24px }
.empty-icon svg { width: 24px; height: 24px }
.empty-title { display: block; color: var(--ink); font-weight: 700; font-size: 15px; margin-bottom: 5px }
.empty-hint { display: block; font-size: 13px; max-width: 380px; margin: 0 auto; line-height: 1.5 }

.skeleton { position: relative; overflow: hidden; background: var(--surface-3); border-radius: 7px }
.skeleton::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 70%, transparent), transparent);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%) } }
.skeleton-metrics { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 16px; margin-bottom: 28px }
.skeleton-metric { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--shadow-sm) }
.skeleton-line { height: 11px; margin-bottom: 10px }
.skeleton-line.short { width: 42% }
.skeleton-line.tall { height: 26px; width: 62%; margin-bottom: 14px }
.skeleton-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 16px; padding: 15px 22px; border-bottom: 1px solid var(--line-soft) }

/* ---------- misc panels ---------- */
.source-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px }
.source-card { border: 1px solid var(--line); border-radius: 16px; padding: 18px; background: var(--surface); transition: border-color var(--t-fast), box-shadow var(--t-fast) }
.source-card:hover { border-color: color-mix(in srgb, var(--green-2) 30%, var(--line)); box-shadow: var(--shadow-sm) }
.source-card h3 { margin: 0 0 7px }
.source-card .count { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums }
.source-card .sub { margin-bottom: 14px }
.progress { height: 7px; border-radius: 999px; background: var(--surface-3); overflow: hidden }
.progress span { display: block; height: 100%; background: var(--green-2); border-radius: inherit; transition: width var(--t-med) }
.revenue-panel { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px }
.revenue-hero { border-radius: var(--r-lg); background: linear-gradient(135deg, #004b3d, #087d60); color: #fff; padding: 24px }
.revenue-hero .big { font-size: 44px; font-weight: 700; margin: 12px 0; font-variant-numeric: tabular-nums }
.revenue-hero p { color: #c6dfd7; margin: 0 }
.rules { display: grid; gap: 12px }
.rule { display: flex; gap: 12px; align-items: flex-start }
.rule-num { background: var(--warn-bg); color: var(--warn-fg); border-radius: var(--r-sm); min-width: 34px; height: 34px; display: grid; place-items: center; font-weight: 700 }

.mfa-note { margin: 0 0 18px !important; font-size: 14px !important }
.mfa-setup { display: grid; grid-template-columns: 122px 1fr; gap: 16px; align-items: center; margin: 0 0 18px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface) }
.mfa-setup img { width: 122px; height: 122px; border-radius: var(--r-sm) }
.mfa-setup strong { display: block; margin-bottom: 5px }
.mfa-setup p { font-size: 12px !important; line-height: 1.35 !important; margin: 0 0 8px !important }
.mfa-setup code { display: block; max-width: 230px; overflow-wrap: anywhere; color: var(--green-2); font-size: 11px }

.small-value { font-size: 22px !important }
.price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px }
.ops-form { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 14px; padding: 20px 22px }
.ops-form.single { grid-template-columns: repeat(2, minmax(150px, 1fr)) }
.ops-form label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 700 }
.ops-form input, .ops-form select { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; background: var(--surface); color: var(--ink); outline: none; transition: border-color var(--t-fast), box-shadow var(--t-fast) }
.ops-form input:focus, .ops-form select:focus { border-color: var(--green-2); box-shadow: var(--focus) }
.ops-form .check-label { display: flex; align-items: center; gap: 8px; align-self: end; min-height: 43px }
.ops-form .check-label input { width: 18px; height: 18px }
.ops-form .primary { align-self: end }

#toast { position: fixed; right: 24px; bottom: 24px; background: var(--ink); color: var(--bg); padding: 13px 18px; border-radius: 12px; box-shadow: var(--shadow); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity var(--t-med), transform var(--t-med); z-index: 20; max-width: min(460px, calc(100vw - 48px)) }
#toast.show { opacity: 1; transform: translateY(0) }
#toast.error { background: #a62c22; color: #fff }

/* ---------- responsive ---------- */
@media (max-width: 1050px) {
  .metric-grid, .skeleton-metrics { grid-template-columns: repeat(2, 1fr) }
  .source-grid { grid-template-columns: 1fr }
  .revenue-panel, .price-grid { grid-template-columns: 1fr }
  .ops-form { grid-template-columns: repeat(2, minmax(150px, 1fr)) }
}
@media (max-width: 760px) {
  .login-shell { grid-template-columns: 1fr; grid-template-rows: minmax(230px, 32vh) auto }
  .login-art { display: block; grid-row: 1; background-position: center 42% }
  .login-panel { grid-row: 2 }
  .login-art:after { right: 18px; top: 18px }
  .bridge { left: 24px; right: 24px; bottom: 22px }
  .bridge:before { margin-bottom: 8px; font-size: 10px }
  .bridge:after { font-size: 28px; max-width: 390px }
  .shell { display: block }
  .sidebar { position: sticky; height: auto; z-index: 10; padding: 12px 14px }
  .sidebar .brand, .operator { display: none }
  .nav { display: flex; overflow: auto }
  .nav button { white-space: nowrap; padding: 10px 12px }
  .nav button.active::before { display: none }
  .main { padding: 24px 16px 90px }
  .topbar { align-items: flex-start }
  .topbar h1 { font-size: 28px }
  .metric-grid, .skeleton-metrics { grid-template-columns: 1fr 1fr; gap: 10px }
  .metric { padding: 16px }
  .metric .value { font-size: 24px }
  .metric-spark, .metric-spark svg { height: 26px }
  .panel-head { align-items: flex-start }
  .toolbar { width: 100% }
  .toolbar input, .toolbar select { min-width: 0; flex: 1 }
  .data-table { min-width: 680px }
  .table-wrap { max-height: none }
}
@media (max-width: 430px) {
  .metric-grid, .skeleton-metrics { grid-template-columns: 1fr }
  .login-panel { padding: 28px }
  .topbar { display: block }
  .live-pill { margin-top: 12px; width: max-content }
  .mfa-setup { grid-template-columns: 92px 1fr }
  .mfa-setup img { width: 92px; height: 92px }
  .ops-form, .ops-form.single { grid-template-columns: 1fr }
}