:root{
  --bg:#f7f7f5; --panel:#ffffff;
  --ink:#0f172a; --ink-2:#475569; --ink-3:#94a3b8;
  --line:#e5e7eb; --line-2:#eef0ec;
  --accent:#0f7a3f; --accent-soft:#e8f5ec; --accent-ink:#064e2a;
  --danger:#b91c1c; --warn:#7a4a00;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
.loading{padding:40px; text-align:center; color:var(--ink-3);}

/* ===== Login ===== */
.login-shell{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:24px; background:radial-gradient(800px 400px at 80% -10%, #eef7f0 0%, transparent 60%), var(--bg);
}
.login-card{
  width:100%; max-width:380px; background:var(--panel);
  border:1px solid var(--line); border-radius:16px; padding:28px;
  display:flex; flex-direction:column; gap:14px;
  box-shadow:0 12px 30px rgba(15,23,42,0.05);
}
.login-card h1{font-size:22px; font-weight:700;}
.login-card .muted{color:var(--ink-2); font-size:13.5px;}
.login-card label{display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--ink-2); font-weight:600;}
.login-card input{
  padding:10px 12px; border:1px solid var(--line); border-radius:10px;
  font:inherit; color:var(--ink); background:#fff;
}
.login-card input:focus{outline:none; border-color:var(--accent);}
.form-error{color:var(--danger); font-size:13px; min-height:18px;}

/* ===== Layout ===== */
.layout{display:grid; grid-template-columns:240px 1fr; min-height:100vh;}
.sidebar{
  background:#0f172a; color:#cbd5e1;
  display:flex; flex-direction:column;
  padding:18px 14px;
}
.sidebar .brand{
  font-weight:800; color:#fff; font-size:15px; letter-spacing:-0.01em;
  padding:8px 10px 14px; border-bottom:1px solid #1e293b; margin-bottom:10px;
}
.sidebar nav{display:flex; flex-direction:column; gap:2px; flex:1;}
.sidebar nav a{
  color:#cbd5e1; text-decoration:none; padding:9px 12px; border-radius:8px;
  font-size:14px; font-weight:600; letter-spacing:-0.005em;
  transition:background .15s, color .15s;
}
.sidebar nav a:hover{background:#1e293b; color:#fff;}
.sidebar nav a.active{background:var(--accent); color:#fff;}
.sidebar-footer{
  border-top:1px solid #1e293b; padding:10px; display:flex; justify-content:space-between; align-items:center;
  font-size:13px;
}
.sidebar-footer a{color:#94a3b8; text-decoration:none;}
.sidebar-footer a:hover{color:#fff;}
.btn-link{
  background:transparent; border:0; color:#94a3b8; cursor:pointer; font:inherit; padding:0;
}
.btn-link:hover{color:#fff;}

/* ===== Main / Views ===== */
.main{padding:28px 32px; max-width:1200px;}
.view-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:20px;}
.view-head h2{font-size:24px; font-weight:700;}
.view-head .actions{display:flex; gap:8px;}

.btn{
  appearance:none; border:1px solid var(--line); background:#fff; color:var(--ink);
  padding:8px 14px; border-radius:10px; font:inherit; font-weight:600; font-size:13.5px;
  cursor:pointer; transition:background .15s, border-color .15s, transform .1s;
  display:inline-flex; align-items:center; gap:6px;
}
.btn:hover{background:#f9fafb; border-color:#cbd5e1;}
.btn.primary{background:var(--accent); color:#fff; border-color:var(--accent);}
.btn.primary:hover{background:#0b6634;}
.btn.danger{background:#fff; color:var(--danger); border-color:#fecaca;}
.btn.danger:hover{background:#fef2f2;}
.btn:disabled{opacity:0.6; cursor:not-allowed;}

/* ===== Search input in list-view header ===== */
.search-input{
  appearance:none;
  border:1px solid var(--line); background:#fff; color:var(--ink);
  padding:8px 12px; border-radius:10px; font:inherit; font-size:13.5px;
  min-width:280px;
  transition:border-color .12s, box-shadow .12s;
}
.search-input::placeholder{ color:var(--ink-3); }
.search-input:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(15,122,63,0.12);
}

/* ===== Tables ===== */
.table-wrap{
  background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden;
}
table{width:100%; border-collapse:collapse;}
thead{background:#fafafa;}
th, td{
  padding:12px 14px; text-align:left; font-size:13.5px;
  border-bottom:1px solid var(--line-2);
}
th{font-weight:700; color:var(--ink-2); font-size:12px; text-transform:uppercase; letter-spacing:.06em;}
td.actions{text-align:right; white-space:nowrap;}
tbody tr:hover{background:#fafafa;}
.empty{padding:32px; text-align:center; color:var(--ink-3);}

/* ===== Load more / show less pager ===== */
.list-pager{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 14px;
  background:#fff; border:1px solid var(--line); border-top:0;
  border-radius:0 0 14px 14px;
  margin-top:-1px;   /* tuck under the table-wrap's bottom border */
}
.list-pager-count{
  font-size:12.5px; color:var(--ink-3);
  letter-spacing:.01em;
}
.list-pager-count strong{ color:var(--ink); font-weight:700; }
.list-pager-actions{ display:flex; align-items:center; gap:10px; }
.list-pager .btn-link{
  font-size:12.5px; font-weight:600; color:var(--ink-3);
  background:transparent; border:0; cursor:pointer; padding:6px 10px; border-radius:6px;
  transition:background .12s, color .12s;
}
.list-pager .btn-link:hover{ background:#f1f5f9; color:var(--ink); }
.btn.pg-more{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; padding:7px 14px;
}
.btn.pg-more .pg-arrow{
  font-size:11px; transition:transform .15s ease;
}
.btn.pg-more:hover .pg-arrow{ transform:translateY(2px); }

/* ===== Pills / chips ===== */
.pill-tag{
  display:inline-block; padding:2px 8px; border-radius:999px;
  font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  background:#f1f5f9; color:var(--ink-2);
}
.pill-tag.active{background:var(--accent-soft); color:var(--accent-ink);}
.pill-tag.warn{background:#fff7ec; color:var(--warn);}

/* ===== Modal / form panel ===== */
.modal-bg{
  position:fixed; inset:0; background:rgba(15,23,42,0.45);
  display:flex; align-items:flex-start; justify-content:center; z-index:50;
  padding:40px 16px; overflow-y:auto;
}
.modal{
  background:var(--panel); border-radius:14px; width:100%; max-width:760px;
  box-shadow:0 20px 60px rgba(0,0,0,0.25);
  display:flex; flex-direction:column;
}
.modal-head{
  padding:18px 22px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between;
  background:#fff; border-radius:14px 14px 0 0;
}
.modal-head h3{font-size:18px; font-weight:700;}
.modal-body{
  /* Tinted background so the white section cards stand out as discrete units. */
  padding:20px; display:flex; flex-direction:column; gap:14px;
  background:#f6f6f3;
}
.modal-foot{
  padding:14px 22px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:8px;
  background:#fff; border-radius:0 0 14px 14px;
}

label.field{display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--ink-2); font-weight:600;}
.field-label-row{display:flex; align-items:center; gap:8px;}

/* AI copy-gen ✨ button — sits in the field label, next to Headline / Body */
.ai-gen{
  appearance:none; border:1px solid #d8c98a; background:linear-gradient(180deg,#fffbf0,#fff5d6);
  color:#7a4a00; font:inherit; font-size:11px; font-weight:700;
  padding:3px 8px 3px 6px; border-radius:999px;
  display:inline-flex; align-items:center; gap:4px;
  cursor:pointer; user-select:none;
  transition:transform .12s, box-shadow .12s, background .12s, border-color .12s;
}
.ai-gen:hover{ background:linear-gradient(180deg,#fff5d6,#ffe9a8); border-color:#c9b56e; transform:translateY(-1px); box-shadow:0 4px 10px rgba(180,140,0,0.15); }
.ai-gen:active{ transform:translateY(0); }
.ai-gen:disabled{ opacity:0.6; cursor:wait; transform:none; }
.ai-gen-icon{ font-size:13px; line-height:1; display:inline-block; }
.ai-gen-label{ letter-spacing:.04em; }
.ai-gen.loading .ai-gen-icon{ animation:aiSpin 1s linear infinite; }
@keyframes aiSpin{ to { transform:rotate(360deg); } }

/* Optional steering input under each AI-enabled field. Slim + muted so
   it reads as a supporting control, not a primary form input. The
   value persists between regenerations so admins can iterate on the hint. */
.ai-hint{
  margin-top:-2px;
  padding:6px 10px !important;
  border:1px dashed #d8c98a !important;
  background:#fffbf0 !important;
  border-radius:8px !important;
  font:inherit; font-size:12px !important;
  color:var(--ink-2) !important;
  font-style:italic;
}
.ai-hint::placeholder{ color:#a89868; font-style:italic; }
.ai-hint:focus{
  outline:none !important;
  border-color:#c9b56e !important;
  background:#fff5d6 !important;
  font-style:normal;
}
.field input[type=text], .field input[type=number], .field input[type=url], .field textarea, .field select{
  padding:9px 11px; border:1px solid var(--line); border-radius:8px;
  font:inherit; color:var(--ink); background:#fff; font-size:13.5px;
}
.field textarea{font-family:'SF Mono','Menlo',ui-monospace,monospace; font-size:12.5px; min-height:80px; resize:vertical;}
.field input:focus, .field textarea:focus, .field select:focus{outline:none; border-color:var(--accent);}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.field-row-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px;}
.hint{ color:var(--ink-3); font-size:12.5px; line-height:1.5; font-weight:400; }
.hint code{ background:#f1f5f9; padding:1px 5px; border-radius:4px; font-size:11.5px; }
.field .hint{font-weight:400; color:var(--ink-3); font-size:11.5px; line-height:1.4;}
.field-check{flex-direction:row; align-items:center; gap:8px;}
.field-check input{width:auto;}

.repeater{display:flex; flex-direction:column; gap:8px; border:1px dashed var(--line); border-radius:10px; padding:10px;}
.repeater-row{display:grid; gap:8px; grid-template-columns:1fr 1fr 1fr 1fr auto; align-items:center;}
.repeater-row input, .repeater-row select{
  padding:7px 10px; border:1px solid var(--line); border-radius:7px; font:inherit; font-size:13px; background:#fff;
}
.repeater-row .x{
  background:transparent; border:0; color:var(--ink-3); cursor:pointer; padding:6px;
}
.repeater-row .x:hover{color:var(--danger);}
.section{
  background:#fff;
  border:1px solid var(--line); border-radius:12px;
  padding:18px 20px;
  display:flex; flex-direction:column; gap:12px;
  box-shadow:0 1px 2px rgba(15,23,42,0.04);
}

/* Section header: bigger, sentence-case, numbered pill prefix, separator line.
   Numbering is automatic via CSS counter so admins can navigate by index. */
.section h4{
  display:flex; align-items:center; gap:10px;
  font-size:15px; font-weight:700;
  letter-spacing:-0.005em; color:var(--ink);
  text-transform:none;
  margin:0; padding:0 0 10px;
  border-bottom:1px solid var(--line-2);
}
.section h4::before{
  content: '';
  width:6px; height:18px;
  border-radius:3px;
  background:var(--accent);
  flex-shrink:0;
}
/* Inline hint span inside the h4 (e.g. "Targeting — leave any group empty…")
   gets a softer treatment so it reads as a subtitle not a heading. */
.section h4 > .hint,
.section h4 > span{
  font-size:12.5px; font-weight:400;
  color:var(--ink-3); letter-spacing:0;
  text-transform:none;
}
.section h4 .ai-gen{
  margin-left:auto;          /* push the auto-fill button to the right edge */
}

/* ===== Chip selectors (used in targeting + segment-rule editor) ===== */
.chip-row{
  display:flex; flex-wrap:wrap; gap:6px; padding:6px 0;
}
label.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border:1px solid var(--line); border-radius:999px;
  background:#fff; font-size:13px; font-weight:500; color:var(--ink-2);
  cursor:pointer; transition:background .12s, border-color .12s, color .12s;
  user-select:none;
}
label.chip input{ width:auto; margin:0; }
label.chip:hover{ background:#f9fafb; border-color:#cbd5e1; }
label.chip:has(input:checked){
  background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink);
}

.answer-block{
  border:1px solid var(--line-2); border-radius:10px; padding:10px 12px; margin-bottom:8px;
  background:#fafafa;
}
.answer-q{ font-size:13px; color:var(--ink-2); margin-bottom:4px; }

/* ===== Segment rule editor ===== */
.seg-rule{
  border:1px solid var(--line); border-radius:12px; padding:12px;
  background:#fff; display:flex; flex-direction:column; gap:10px;
}
.seg-rule.fallback{
  border-style:dashed; background:#fbfaf7;
}
.seg-rule-head{
  display:flex; align-items:center; gap:10px;
}
.seg-rule-head .rm-rule{
  margin-left:auto; color:var(--ink-3);
}
.seg-rule-head .rm-rule:hover{ color:var(--danger); }

.badge{
  display:inline-block; padding:3px 8px; border-radius:6px;
  font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
}
.badge.when{ background:var(--accent-soft); color:var(--accent-ink); }
.badge.then{ background:#eef2ff; color:#3730a3; }
.badge.fallback{ background:#fff7ec; color:var(--warn); }

.seg-conds{
  display:flex; flex-direction:column; gap:8px;
  background:#fafafa; border-radius:8px; padding:10px;
}
.seg-cond{
  background:#fff; border:1px solid var(--line-2); border-radius:8px; padding:10px;
  display:flex; flex-direction:column; gap:8px;
}
.seg-cond-row{
  display:flex; align-items:flex-end; gap:10px;
}
.seg-cond-row .field{ flex:1; }
.seg-cond-row .rm-cond{
  margin-bottom:8px; color:var(--ink-3);
}
.seg-cond-row .rm-cond:hover{ color:var(--danger); }

.add-cond{ align-self:flex-start; }

/* ===== Icon picker (searchable grid popover) ===== */
.icon-picker{ position:relative; }
.icon-picker-trigger{
  display:flex; align-items:center; gap:10px;
  width:100%; padding:7px 11px;
  background:#fff; border:1px solid var(--line); border-radius:8px;
  font:inherit; font-size:13.5px; color:var(--ink);
  cursor:pointer; text-align:left;
  transition:border-color .12s, background .12s;
}
.icon-picker-trigger:hover{ border-color:#cbd5e1; }
.icon-picker-trigger[aria-expanded=true]{ border-color:var(--accent); }
.icon-picker-svg{ display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.icon-picker-trigger .icon-picker-svg svg{ width:20px; height:20px; color:var(--ink-2); }
.icon-picker-trigger .icon-picker-name{ flex:1; }
.icon-picker-caret{ color:var(--ink-3); font-size:10px; }

.icon-picker-pop{
  position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:60;
  background:#fff; border:1px solid var(--line); border-radius:10px;
  box-shadow:0 14px 40px rgba(15,23,42,0.14), 0 1px 2px rgba(15,23,42,0.04);
  padding:10px;
  display:flex; flex-direction:column; gap:8px;
  max-height:340px;
}
/* The display:flex above otherwise overrides the user-agent's
   `display: none from [hidden]`, leaving the popover always visible. */
.icon-picker-pop[hidden]{ display:none !important; }
.icon-picker-search{
  padding:7px 10px; border:1px solid var(--line); border-radius:7px;
  font:inherit; font-size:13px; background:#fafafa;
  flex-shrink:0;
}
.icon-picker-search:focus{ outline:none; border-color:var(--accent); background:#fff; }
.icon-picker-grid{
  display:grid; grid-template-columns:repeat(6, 1fr); gap:4px;
  overflow-y:auto;
}
.icon-picker-cell{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:8px 4px;
  border:1px solid transparent; border-radius:8px; background:transparent;
  cursor:pointer; font:inherit;
  transition:background .1s, border-color .1s, transform .08s;
}
.icon-picker-cell:hover{ background:#f8f9fb; border-color:var(--line); }
.icon-picker-cell.selected{ background:var(--accent-soft); border-color:var(--accent); }
.icon-picker-cell .icon-picker-svg svg{ width:22px; height:22px; color:var(--ink); }
.icon-picker-cell.selected .icon-picker-svg svg{ color:var(--accent-ink); }
.icon-picker-cell-name{
  font-size:9.5px; color:var(--ink-3); letter-spacing:-0.01em;
  text-overflow:ellipsis; white-space:nowrap; overflow:hidden; max-width:100%;
}
.icon-picker-cell.selected .icon-picker-cell-name{ color:var(--accent-ink); font-weight:600; }

/* ===== Color picker (native swatch + hex text input) ===== */
.color-picker{ display:flex; align-items:stretch; gap:8px; }
.color-picker-swatch{
  width:38px; height:38px; padding:2px; flex-shrink:0;
  border:1px solid var(--line); border-radius:8px; background:#fff; cursor:pointer;
}
.color-picker-swatch::-webkit-color-swatch{ border-radius:6px; border:none; }
.color-picker-swatch::-moz-color-swatch{ border-radius:6px; border:none; }
.color-picker-swatch[data-empty="1"]{ background:repeating-linear-gradient(45deg,#fff,#fff 4px,#f1f5f9 4px,#f1f5f9 8px); }
.color-picker-hex{
  flex:1; padding:9px 11px; border:1px solid var(--line); border-radius:8px;
  font:inherit; font-size:13.5px; font-family:'SF Mono','Menlo',ui-monospace,monospace;
  background:#fff; color:var(--ink); text-transform:lowercase;
}
.color-picker-hex:focus{ outline:none; border-color:var(--accent); }

/* ===== Brand chips list inside the Campaign form (offer-group only) ===== */
.brand-list{
  display:flex; flex-direction:column; gap:8px; margin-bottom:10px;
}
.brand-list-item{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px;
  background:#fafafa; border:1px solid var(--line-2); border-radius:10px;
}
.brand-list-item .brand-mark{
  width:32px; height:32px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:12px; font-weight:800; letter-spacing:-0.02em;
  flex-shrink:0;
}
.brand-list-body{ flex:1; min-width:0; }
.brand-list-name{ font-weight:700; font-size:14px; color:var(--ink); }
.brand-list-url{
  font-size:11.5px; color:var(--ink-3);
  font-family:'SF Mono','Menlo',ui-monospace,monospace;
  text-overflow:ellipsis; white-space:nowrap; overflow:hidden;
  margin-top:2px;
}
.brand-list-edit{ flex-shrink:0; }

/* ===== Add-style question picker (Flow form) ===== */
.picked-list{
  display:flex; flex-direction:column; gap:8px; margin-bottom:12px;
}
.picked-row{
  display:flex; align-items:center; gap:12px;
  background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:10px 12px; transition:border-color .12s, box-shadow .12s;
}
.picked-row:hover{ border-color:#cbd5e1; box-shadow:0 1px 3px rgba(15,23,42,0.04); }
.picked-num{
  width:24px; height:24px; border-radius:6px;
  background:var(--accent-soft); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; flex-shrink:0;
}
.picked-body{ flex:1; min-width:0; }
.picked-title{ font-weight:600; font-size:14px; color:var(--ink); }
.picked-meta{ font-size:12px; color:var(--ink-3); margin-top:2px; }
.picked-meta code{ background:#f1f5f9; padding:1px 5px; border-radius:4px; font-size:11.5px; }
.picked-actions{ display:flex; gap:4px; flex-shrink:0; }
.picked-empty{
  background:#fafafa; border:1px dashed var(--line); border-radius:10px;
  padding:16px; text-align:center; color:var(--ink-3); font-size:13.5px;
  margin-bottom:12px;
}

.btn-icon{
  width:30px; height:30px; border-radius:6px;
  border:1px solid var(--line); background:#fff; color:var(--ink-2);
  cursor:pointer; font-size:14px; padding:0;
  display:flex; align-items:center; justify-content:center;
  transition:background .12s, color .12s, border-color .12s;
}
.btn-icon:hover:not(:disabled){
  background:#f9fafb; color:var(--ink); border-color:#cbd5e1;
}
.btn-icon:disabled{ opacity:.35; cursor:not-allowed; }
.btn-icon.danger:hover:not(:disabled){ color:var(--danger); border-color:#fecaca; background:#fef2f2; }

.picker-add{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:10px 12px; background:#fafafa; border:1px dashed var(--line);
  border-radius:10px;
}
.picker-add select{
  padding:8px 11px; border:1px solid var(--line); border-radius:8px;
  font:inherit; font-size:13.5px; background:#fff; min-width:240px; flex:1;
  cursor:pointer;
}
.picker-add select:focus{ outline:none; border-color:var(--accent); }
.picker-new{
  font-size:13px; color:var(--accent); text-decoration:none; font-weight:600;
  margin-left:auto;
}
.picker-new:hover{ text-decoration:underline; }

/* AND/OR mode selector at the top of each rule */
.seg-mode{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; color:var(--ink-2); font-weight:600;
}
.seg-mode select{
  padding:5px 8px; border:1px solid var(--line); border-radius:7px;
  font:inherit; font-size:12.5px; font-weight:600; background:#fff;
}
.seg-mode select:focus{ outline:none; border-color:var(--accent); }

/* AND/OR separator chip between conditions — clickable to flip mode */
.seg-sep{
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.seg-sep::before{
  content:""; position:absolute; left:0; right:0; top:50%;
  height:1px; background:var(--line-2);
}
.seg-sep-label{
  position:relative; z-index:1;
  background:#fafafa; padding:2px 10px; border:1px solid var(--line);
  border-radius:999px; font-size:10.5px; font-weight:800; letter-spacing:.08em;
  color:var(--ink-2); cursor:pointer;
  transition:background .12s, color .12s, border-color .12s;
}
.seg-sep-label:hover{ background:var(--accent-soft); color:var(--accent-ink); border-color:var(--accent); }

/* Tint the rule card subtly so AND vs OR is visually distinguishable */
.seg-rule[data-mode="any"]{
  border-color:#dbe2f0; background:#fbfcff;
}
.seg-rule[data-mode="any"] .badge.when{
  background:#eef2ff; color:#3730a3;
}

.seg-then{
  display:flex; align-items:center; gap:10px;
}
.seg-then input{
  flex:1; padding:9px 11px; border:1px solid var(--line); border-radius:8px; font:inherit; font-size:13.5px;
}
.seg-then input:focus{ outline:none; border-color:var(--accent); }

/* ===== Dashboard cards ===== */
.cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:14px; margin-bottom:24px;}
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px;
}
.card .label{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); font-weight:700;}
.card .value{font-size:26px; font-weight:700; margin-top:6px; letter-spacing:-0.01em;}
.card .sub{font-size:12px; color:var(--ink-3); margin-top:4px;}

@media (max-width:780px){
  .layout{grid-template-columns:1fr;}
  .sidebar{flex-direction:row; padding:10px; gap:8px; align-items:center; overflow-x:auto;}
  .sidebar .brand{border-bottom:0; padding:8px; flex-shrink:0;}
  .sidebar nav{flex-direction:row; flex-wrap:nowrap; flex:1; overflow-x:auto;}
  .sidebar nav a{flex-shrink:0; padding:8px 10px;}
  .sidebar-footer{display:none;}
  .main{padding:16px;}
  .field-row, .field-row-3{grid-template-columns:1fr;}
  .repeater-row{grid-template-columns:1fr 1fr;}
}