:root {
  --ink: #101315;
  --ink-2: #171c1d;
  --paper: #f4f5ef;
  --white: #fff;
  --line: #e3e7df;
  --muted: #6d7572;
  --signal: #d5fc44;
  --font: "Segoe UI", Inter, Arial, sans-serif;
  --mono: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--paper); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
:focus-visible { outline: 3px solid #7cab00; outline-offset: 3px; }
em { font-style: normal; color: #647f09; }

.kicker, .side-section-label, .panel-tag, .stat-card > span, .filter-row > label,
th, .side-status, .topbar-date, .main-footer, .panel-top, .auth-card > small {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .105em; font-weight: 700;
}
.kicker { color: #798b58; text-transform: uppercase; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.25rem; border: 1px solid transparent; border-radius: 7px; min-height: 44px; padding: .72rem 1rem; font-size: .84rem; font-weight: 750; transition: transform .18s, background .18s, border-color .18s; }
.button:hover:not(:disabled) { transform: translateY(-2px); }
.button-primary { background: var(--signal); color: var(--ink); }
.button-primary:hover:not(:disabled) { background: #c6ed2d; }
.button-secondary { background: var(--ink); color: var(--white); }
.button-secondary:hover:not(:disabled) { background: #303a35; }
.button-quiet { border-color: var(--line); background: var(--white); color: var(--ink); }
.button-quiet:hover:not(:disabled) { border-color: #a5b190; }
.alert { border-radius: 7px; padding: .85rem 1rem; margin: 1rem 0; font-size: .86rem; line-height: 1.45; }
.alert-error { background: #fff0eb; color: #8a3323; border: 1px solid #f2cabb; }
.alert-success { background: #eef7dc; color: #395d1f; border: 1px solid #cde5aa; }

.auth-body { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; color: #f4f5ef; background: #101315; background-image: linear-gradient(rgba(215,255,63,.035) 1px, transparent 1px), linear-gradient(90deg,rgba(215,255,63,.035) 1px,transparent 1px); background-size: 50px 50px; }
.auth-card { width: min(100%, 470px); position: relative; padding: clamp(1.5rem, 5vw, 3rem); background: #171c1d; border: 1px solid #343b35; box-shadow: 0 22px 70px #080b0aa0; }
.auth-card::before { content: ""; position: absolute; left: 0; top: 0; width: 68px; height: 5px; background: var(--signal); }
.auth-card .kicker { color: var(--signal); }
.auth-emblem { width: 60px; height: 60px; margin: 2.3rem 0 1.5rem; display: grid; place-items: center; font-size: 2.5rem; line-height: 1; background: var(--signal); color: var(--ink); }
.auth-card h1 { font-size: clamp(2.2rem, 6vw, 3.1rem); letter-spacing: -.06em; line-height: 1.04; margin: 0 0 1.15rem; }
.auth-card h1 em { color: var(--signal); }
.auth-card > p { color: #b0bcb2; font-size: .95rem; line-height: 1.55; }
.auth-card > small { display: block; margin-top: 2rem; color: #849086; font-weight: 500; }
.auth-card .alert-error { color: #8a3323; }

.stack-form { display: grid; gap: 1rem; margin-top: 1.45rem; }
.stack-form label { display: grid; gap: .4rem; font-size: .78rem; font-weight: 730; }
.stack-form input, .stack-form select, .stack-form textarea, .copy-row input, .filter-row select {
  width: 100%; min-height: 43px; border: 1px solid #d9ded5; border-radius: 6px; background: #fff; color: var(--ink); padding: .68rem .75rem; font-size: .86rem; outline: 0;
}
.stack-form textarea { resize: vertical; min-height: 78px; }
.stack-form input:focus, .stack-form select:focus, .stack-form textarea:focus, .copy-row input:focus, .filter-row select:focus { border-color: #85a635; box-shadow: 0 0 0 3px #d5fc4470; }
.stack-form input::placeholder, .stack-form textarea::placeholder { color: #9aa39b; }
.auth-card .stack-form input { background: #202625; border-color: #38423b; color: #f4f5ef; }
.auth-card .stack-form .button { margin-top: .5rem; }

.app-shell { display: grid; grid-template-columns: 235px minmax(0, 1fr); min-height: 100vh; }
.sidebar { display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; padding: 1.75rem 1rem 1.25rem; background: var(--ink); color: #eef4e9; border-right: 1px solid #29312d; }
.side-brand { display: flex; align-items: center; gap: .75rem; padding: 0 .55rem; }
.brand-icon { width: 34px; height: 34px; display: grid; place-items: center; background: var(--signal); color: var(--ink); font-size: 1.2rem; font-weight: 900; transform: skew(-9deg); }
.side-brand > span:last-child { display: grid; gap: .08rem; }
.side-brand strong { font-size: .8rem; letter-spacing: .12em; }
.side-brand small { font: 600 .6rem var(--mono); letter-spacing: .13em; color: #aeb7ab; }
.side-section-label { color: #839082; margin: 3.15rem .7rem .9rem; }
.side-nav { display: grid; gap: .3rem; }
.side-nav a { min-height: 42px; display: flex; gap: .8rem; align-items: center; padding: .5rem .7rem; border-radius: 6px; color: #b7c1b6; font-size: .82rem; font-weight: 600; }
.side-nav a span { font-size: 1.1rem; width: 18px; text-align: center; }
.side-nav a:hover, .side-nav .is-active { color: var(--signal); background: #29332a; }
.side-bottom { margin-top: auto; }
.side-status { display: flex; align-items: center; gap: .6rem; color: #b8c4b3; padding: .8rem .7rem; border-top: 1px solid #303934; }
.side-status i, .status-dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: var(--signal); box-shadow: 0 0 11px #d5fc44ad; }
.logout-button { width: 100%; display: flex; justify-content: space-between; border: 0; background: transparent; color: #c2ccc2; padding: .8rem .7rem; text-align: left; font-size: .8rem; }
.logout-button:hover { color: var(--signal); }

.main-content { min-width: 0; width: min(100%, 1550px); padding: 0 clamp(1.2rem, 3.4vw, 3.6rem); }
.main-topbar { min-height: 68px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #dce1d8; }
.topbar-date { color: var(--muted); display: inline-flex; gap: .9rem; align-items: center; text-transform: uppercase; }
.topbar-date .status-dot { background: #93b322; box-shadow: none; }
.page-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-end; padding: 2.5rem 0 2rem; }
.page-heading h1 { font-size: clamp(2.25rem, 4.2vw, 4.4rem); letter-spacing: -.065em; line-height: 1.03; margin: .62rem 0 1rem; font-weight: 760; }
.page-heading p { max-width: 655px; color: #6d7771; font-size: .94rem; line-height: 1.55; margin: 0; }
.header-cta { align-self: center; white-space: nowrap; }
.filter-row { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.2rem; }
.filter-row > label { color: #667469; }
.filter-row select { width: min(245px, 100%); background: var(--white); }
.filter-row > span { margin-left: auto; font: 500 .72rem var(--mono); color: #8b948b; }

.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; }
.stat-card { position: relative; min-height: 154px; padding: 1.15rem; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: 10px; }
.stat-card > span { color: #718071; }
.stat-card strong { font-size: clamp(1.9rem, 3vw, 3rem); letter-spacing: -.055em; margin: auto 0 .2rem; line-height: 1; }
.stat-card small { color: #89948b; font-size: .72rem; }
.stat-card i { position: absolute; top: 1.05rem; right: 1rem; font-size: 1.1rem; font-style: normal; color: #9da9a0; }
.stat-card-primary { background: var(--ink); color: var(--white); border-color: var(--ink); }
.stat-card-primary > span, .stat-card-primary small { color: #b0bfb0; }
.stat-card-primary strong, .stat-card-primary i { color: var(--signal); }

.insights-grid, .forms-grid, .detail-layout { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr); gap: .85rem; margin-top: .85rem; align-items: start; }
.panel { padding: clamp(1.2rem, 2vw, 1.6rem); background: var(--white); border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
.panel-heading { display: flex; justify-content: space-between; align-items: start; gap: 1rem; margin-bottom: 1.25rem; }
.panel h2 { margin: .35rem 0 0; font-size: 1.24rem; letter-spacing: -.035em; }
.panel > p { color: #758078; line-height: 1.5; font-size: .85rem; }
.panel-tag { color: #849188; white-space: nowrap; }
.empty-state { margin: 2rem 0 1rem; padding: 1.3rem; background: #f7f8f3; border: 1px dashed #d9ded4; border-radius: 7px; color: var(--muted); font-size: .86rem; line-height: 1.5; }
.rank-list, .region-list { display: grid; }
.rank-item { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: .7rem; align-items: start; border-top: 1px solid #eef0e9; padding: .82rem 0; }
.rank-item:hover .rank-main strong { color: #566d09; }
.rank-number { padding-top: .2rem; color: #a3aea2; font: 700 .66rem var(--mono); }
.rank-main { display: grid; gap: .17rem; min-width: 0; }
.rank-main strong, .region-item strong { font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-main small, .region-item small { color: #879289; font-size: .7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-progress { margin-top: .34rem; width: 100%; height: 4px; appearance: none; border: 0; background: #edf0e7; border-radius: 4px; overflow: hidden; }
.rank-progress::-webkit-progress-bar { background: #edf0e7; }
.rank-progress::-webkit-progress-value { background: #b4d834; }
.rank-progress::-moz-progress-bar { background: #b4d834; }
.rank-item b, .region-item b { font: 700 .9rem var(--mono); }
.region-item { display: flex; justify-content: space-between; gap: .5rem; border-top: 1px solid #eef0e9; padding: .8rem 0; }
.region-item > span { display: grid; gap: .16rem; min-width: 0; }
.muted-note { margin: 1.1rem 0 0; font-size: .72rem !important; color: #939f95 !important; line-height: 1.45 !important; }

.table-panel { margin-top: .85rem; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { color: #849184; text-align: left; white-space: nowrap; border-bottom: 1px solid #e7ebe3; padding: .65rem .65rem .85rem; }
td { padding: .86rem .65rem; border-bottom: 1px solid #eef0e9; color: #5d6962; font-size: .81rem; vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
td strong { display: block; color: var(--ink); font-size: .82rem; }
td small { display: block; margin-top: .18rem; color: #9aa69b; font-size: .72rem; }
.numeric { font: 700 .86rem var(--mono); color: var(--ink); }
.table-link, .text-link { color: #527308; font-weight: 750; white-space: nowrap; }
.table-link:hover, .text-link:hover { text-decoration: underline; }
.pill { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .55rem; border-radius: 20px; font-size: .69rem; font-weight: 750; white-space: nowrap; }
.pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.pill-active { color: #52721d; background: #edf5de; }
.pill-paused { color: #8c6841; background: #f8f0e5; }

.forms-grid { margin-top: .85rem; }
.forms-grid .panel { min-height: 100%; }
.forms-grid .panel h2 { font-size: 1.45rem; }
.forms-grid .panel > p { margin-top: .5rem; }
.client-list { border-top: 1px solid var(--line); margin-top: 1.7rem; padding-top: 1.2rem; }
.client-detail { border-bottom: 1px solid #edf0e8; }
.client-detail summary { display: flex; justify-content: space-between; gap: .6rem; padding: .82rem 0; cursor: pointer; list-style: none; font-size: .83rem; }
.client-detail summary::-webkit-details-marker { display: none; }
.client-detail summary span { color: #6c8d21; font-weight: 700; }
.client-detail .stack-form { margin: .2rem 0 1rem; }
.compact-form { gap: .8rem; }

.back-link { display: inline-block; color: #68796b; font-size: .8rem; font-weight: 700; margin-top: 1.6rem; }
.back-link:hover { color: #527308; }
.detail-heading { padding-top: 1rem; }
.detail-heading h1 { font-size: clamp(2rem, 3.8vw, 3.4rem); }
.detail-layout { grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); margin-top: 0; }
.detail-side { display: grid; gap: .85rem; }
.panel-top { display: flex; justify-content: space-between; color: #8b958a; }
.qr-preview-panel h2 { font-size: 1.8rem; margin: 1rem 0; }
.qr-artboard { width: min(100%, 380px); aspect-ratio: 1; padding: clamp(1rem, 4vw, 2.2rem); margin: 1.25rem auto; display: grid; place-items: center; background: var(--white); border: 1px solid #dce4d2; box-shadow: 0 12px 32px #1c2a1a12; }
#qr-canvas { width: 288px; max-width: 100%; display: grid; place-items: center; color: #8b958a; text-align: center; font-size: .8rem; }
#qr-canvas canvas, #qr-canvas img { width: 100% !important; height: auto !important; }
.qr-help { max-width: 460px; text-align: center; margin: 1.3rem auto; }
.copy-row { display: flex; gap: .5rem; }
.copy-row input { min-width: 0; font: 500 .77rem var(--mono); }
.download-button { width: 100%; margin-top: .75rem; }
.mini-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1.25rem; }
.mini-metrics > div { display: grid; gap: .3rem; }
.mini-metrics strong { font-size: 2.2rem; letter-spacing: -.055em; }
.mini-metrics span { color: #8c978e; font-size: .72rem; }
.toggle-form { margin-top: 1.1rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.text-button { background: none; border: 0; color: #735b40; padding: 0; font-size: .78rem; font-weight: 700; }
.text-button:hover { text-decoration: underline; }
.main-footer { display: flex; justify-content: space-between; gap: 1rem; color: #9aa59b; padding: 2rem 0; font-weight: 500; text-transform: uppercase; }

@media (max-width: 1140px) {
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .insights-grid, .forms-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .app-shell { display: block; }
  .sidebar { position: static; height: auto; padding: .9rem 1rem; }
  .side-brand { padding: 0; }
  .side-section-label, .side-status { display: none; }
  .side-nav { display: flex; gap: .2rem; overflow-x: auto; margin-top: .85rem; padding-bottom: .1rem; }
  .side-nav a { flex: 0 0 auto; font-size: .75rem; min-height: 36px; padding: .35rem .6rem; }
  .side-nav a span { display: none; }
  .side-bottom { position: absolute; top: .55rem; right: 1rem; }
  .logout-button { font-size: .72rem; }
  .main-content { padding: 0 1rem; }
  .page-heading { align-items: start; flex-direction: column; }
  .header-cta { align-self: stretch; }
  .filter-row { flex-wrap: wrap; }
  .filter-row > span { display: none; }
  .detail-layout { grid-template-columns: 1fr; }
  .main-footer { display: grid; line-height: 1.5; }
}
@media (max-width: 460px) {
  .stats-grid { gap: .5rem; }
  .stat-card { min-height: 130px; padding: .85rem; }
  .stat-card > span { font-size: .56rem; }
  .stat-card strong { font-size: 1.9rem; }
  .stat-card small { font-size: .62rem; }
  .panel { padding: 1rem; }
  .page-heading h1 { font-size: 2.25rem; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }