/* w2a Command Centre — shared production UI layer */
:root,
:root[data-theme="runtime"],
:root[data-theme="monitor"] {
  --bg: #f5f0e0;
  --bg2: #fffdf7;
  --bg3: #f7f4e9;
  --panel: rgba(255, 255, 255, .78);
  --panel2: rgba(255, 255, 255, .92);
  --panel3: #edf3ea;
  --panel-hover: #f0f5ed;
  --card: rgba(255, 255, 255, .78);
  --line: rgba(6, 78, 59, .10);
  --line-soft: rgba(6, 78, 59, .08);
  --line-strong: rgba(6, 78, 59, .18);
  --border: rgba(6, 78, 59, .12);
  --border-strong: rgba(6, 78, 59, .20);
  --text: #0b2018;
  --text2: #49635a;
  --text3: #71827c;
  --muted: #62766f;
  --muted2: #85938e;
  --muted-strong: #49635a;
  --green: #0d7a5f;
  --green2: #064e3b;
  --green-d: #064e3b;
  --green-soft: rgba(13, 122, 95, .12);
  --green-glow: rgba(13, 122, 95, .18);
  --primary: #064e3b;
  --primary-dim: #0d7a5f;
  --primary-glow: rgba(13, 122, 95, .18);
  --accent: #0d7a5f;
  --accent-hover: #064e3b;
  --accent-light: rgba(13, 122, 95, .12);
  --gold: #c9a84c;
  --amber: #b58e2d;
  --warn: #b58e2d;
  --blue: #2e6889;
  --purple: #665c84;
  --success: #0d7a5f;
  --success-bg: rgba(13, 122, 95, .11);
  --warning-bg: rgba(201, 168, 76, .15);
  --danger-bg: rgba(185, 52, 52, .09);
  --info-bg: rgba(46, 104, 137, .09);
  --shadow-sm: 0 1px 3px rgba(6, 78, 59, .06);
  --shadow: 0 10px 30px rgba(6, 78, 59, .08);
  --shadow-soft: 0 18px 48px rgba(6, 78, 59, .09);
  --shadow-lg: 0 24px 60px rgba(6, 78, 59, .14);
  --radius: 8px;
  --radius-lg: 8px;
  --radius-xl: 8px;
  --r: 8px;
  --sidebar-w: 252px;
  --nav-w: 252px;
  --sidebar-width: 252px;
  --side: 252px;
  --font-sans: 'Manrope', system-ui, sans-serif;
  --font-ui: 'Manrope', system-ui, sans-serif;
  --font-display: 'Sora', 'Manrope', system-ui, sans-serif;
  --display: 'Sora', 'Manrope', system-ui, sans-serif;
  --font: 'Manrope', system-ui, sans-serif;
  --scrollbar-thumb: rgba(6, 78, 59, .20);
}

html { color-scheme: light; }
body, body.w2a-bg, [data-theme="monitor"] body.w2a-bg {
  color: var(--text);
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 100% 0, rgba(13,122,95,.10), transparent 32rem),
    radial-gradient(circle at 0 100%, rgba(201,168,76,.12), transparent 28rem);
  background-attachment: fixed;
  letter-spacing: 0;
}
h1,h2,h3,h4,h5,h6,.display,.page-title,.sav-title,.header-title,.top-title { font-family: var(--font-display) !important; letter-spacing: 0 !important; }
a:hover { color: var(--green2); }
.sidebar,.side,.sav-sidebar,.app-sidebar {
  background: rgba(255,253,247,.88) !important;
  border-color: var(--line-strong) !important;
  box-shadow: none !important;
  backdrop-filter: blur(18px);
}
.header,.top,.topbar,.sav-topbar,.app-header {
  background: rgba(245,240,224,.88) !important;
  border-color: var(--line) !important;
  backdrop-filter: blur(18px);
}
.card,.panel,.stat-card,.metric-card,.kpi-card,.content-card,.modal,.modal-content,.auth-card,.settings-card,.table-card {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  backdrop-filter: blur(12px);
}
.card:hover,.panel:hover,.stat-card:hover,.metric-card:hover { border-color: var(--line-strong) !important; box-shadow: var(--shadow) !important; }
.card h2::before { background: var(--gold); box-shadow: none; }
button,.btn,.nav button,.sav-nav button,.sav-nav a { border-radius: 7px !important; letter-spacing: 0 !important; }
.btn,button.primary,.btn-primary,#startBtn,#connectBtn,#sendPinBtn,#verifyPinBtn {
  background: var(--primary) !important;
  color: #f5f0e0 !important;
  border-color: var(--primary) !important;
  box-shadow: none !important;
}
.btn:hover,button.primary:hover,.btn-primary:hover { background: var(--primary-dim) !important; transform: none !important; }
.btn.ghost,.btn.secondary,.btn-secondary,button.ghost {
  background: rgba(255,255,255,.62) !important;
  color: var(--text) !important;
  border: 1px solid var(--line-strong) !important;
  box-shadow: none !important;
}
.btn.ghost:hover,.btn.secondary:hover,.btn-secondary:hover,button.ghost:hover { background: rgba(13,122,95,.07) !important; color: var(--green2) !important; }
input:not([type="checkbox"]):not([type="radio"]),select,textarea,.form-input,.form-select,.form-textarea,.table-search,.table-filter-select {
  background: rgba(255,255,255,.78) !important;
  color: var(--text) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 7px !important;
  box-shadow: none !important;
}
input:not([type="checkbox"]):not([type="radio"]):focus,select:focus,textarea:focus {
  background: #fff !important;
  border-color: var(--green) !important;
  box-shadow: 0 0 0 3px var(--green-soft) !important;
}
input::placeholder,textarea::placeholder { color: var(--muted2) !important; }
input[type="checkbox"],input[type="radio"] { width: 18px !important; height: 18px !important; margin: 0 !important; accent-color: var(--green); flex: 0 0 auto; }
label { color: var(--text2); letter-spacing: 0; }
table { background: transparent; }
th { color: var(--muted) !important; background: rgba(6,78,59,.035) !important; letter-spacing: .04em !important; }
th,td { border-color: var(--line) !important; }
tbody tr:hover { background: rgba(13,122,95,.035) !important; }
.pill.active,.pill.published,.pill.verified,.pill.ok,.pill.online,.badge.on,.badge-success { color: var(--green2) !important; background: var(--success-bg) !important; border-color: rgba(13,122,95,.22) !important; box-shadow: none !important; }
.pill.pending,.pill.draft,.pill.unverified,.pill.warn,.pill.expiring,.badge-warning { color: #725812 !important; background: var(--warning-bg) !important; }
.pill.suspended,.pill.rejected,.pill.bad,.pill.offline,.pill.expired,.pill.used,.badge.off,.badge-danger { color: #9f2929 !important; background: var(--danger-bg) !important; }
.nav a,.nav button,.nav-item,.sidebar a,.sidebar button,.sav-nav a,.sav-nav button { color: var(--text2) !important; }
.nav a.on,.nav button.on,.nav-item.active,.sidebar a.active,.sidebar button.active,.sav-nav .on {
  color: #f5f0e0 !important;
  background: var(--primary) !important;
  border-color: var(--primary) !important;
}
.logo,.mark { background: var(--primary) !important; color: #f5f0e0 !important; box-shadow: none !important; }
.toast { background: var(--text) !important; color: var(--bg) !important; border-color: transparent !important; }
.modal-overlay,.modal-back,.overlay { background: rgba(11,32,24,.54) !important; backdrop-filter: blur(3px); }
@media (max-width: 820px) {
  :root { --sidebar-w: min(86vw, 300px); --nav-w: min(86vw, 300px); --sidebar-width: min(86vw, 300px); --side: min(86vw, 300px); }
  body { font-size: 14px; }
  .main,.content,.content-area,.sav-content { min-width: 0 !important; }
  .card,.panel,.modal,.modal-content { padding: 16px !important; }
  .grid,.stats-grid,.form-grid,.grid.two,.grid.three { grid-template-columns: minmax(0,1fr) !important; }
  .page-header,.header-actions,.page-actions,.modal-footer { align-items: stretch !important; }
  .page-actions .btn,.modal-footer .btn { min-height: 44px; }
  input:not([type="checkbox"]):not([type="radio"]),select,textarea { font-size: 16px !important; min-height: 44px; }
  table { min-width: 620px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}