/* ============================================================
   CURSOR Connect Admin Portal — Stylesheet
   ============================================================ */

:root {
  --bg: #f4f6f9;
  --surface: #ffffff;
  --border: #e4e7ec;
  --border-strong: #d0d5dd;
  --ink: #101828;
  --ink-2: #475467;
  --ink-3: #98a2b3;
  --brand: #2a78d6;
  --brand-dark: #1c5cab;
  --brand-deep: #104281;
  --brand-light: #eaf2fc;
  --navy: #0c1626;
  --navy-2: #13233c;
  --navy-3: #1b3050;
  --good: #0ca30c;
  --good-ink: #006300;
  --good-bg: #e9f7e9;
  --warn: #b54708;
  --warn-bg: #fef0c7;
  --bad: #d03b3b;
  --bad-bg: #fdecec;
  --grid-line: #e1e0d9;
  --muted-axis: #898781;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --shadow-lg: 0 8px 24px rgba(16, 24, 40, .16);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: var(--font);
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; }
input, select, textarea { font-family: inherit; font-size: 14px; }
a { color: var(--brand); text-decoration: none; }

h1, h2, h3, h4 { font-weight: 650; letter-spacing: -0.01em; }

svg.icn { width: 18px; height: 18px; flex: 0 0 auto; }

/* ============ Login popover ============ */

#login-backdrop { display: none; position: fixed; inset: 0; z-index: 70; }
#login-backdrop.open { display: block; }

#login-pop {
  display: none;
  position: fixed; z-index: 71;
  top: 76px; right: 5vw;
  width: 336px; max-width: calc(100vw - 24px);
  max-height: calc(100vh - 90px); overflow-y: auto;  /* scroll on short/landscape screens */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  padding: 22px 22px 18px;
}
#login-pop.open { display: block; animation: loginPopIn .16s ease; }
@keyframes loginPopIn { from { opacity: 0; transform: translateY(-9px) scale(.98); } to { opacity: 1; transform: none; } }

.login-pop-caret {
  position: absolute; top: -8px; right: 26px;
  width: 15px; height: 15px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  transform: rotate(45deg);
  border-radius: 3px 0 0 0;
}

.login-brand { display: flex; flex-direction: column; align-items: center; gap: 7px; margin-bottom: 16px; text-align: center; }
.login-brand .logo-mark { width: 44px; height: 44px; }
.login-brand .logo-img { width: 66px; height: 66px; margin-bottom: -2px; }
.login-brand h1 { font-size: 17px; }
.login-brand .tagline { font-size: 11px; color: var(--ink-3); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }

#login-pop form { display: flex; flex-direction: column; gap: 13px; }
.login-err {
  display: none;
  background: var(--bad-bg); color: var(--bad);
  border: 1px solid #f5c2c2; border-radius: var(--radius-sm);
  padding: 9px 12px; font-size: 13px;
}
.login-hint {
  margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--ink-3); text-align: center; line-height: 1.5;
}
.login-hint code { background: var(--bg); padding: 1px 6px; border-radius: 4px; color: var(--ink-2); }

@media (max-width: 640px) {
  #login-pop { top: auto; bottom: 12px; right: 12px; left: 12px; width: auto; }
  .login-pop-caret { display: none; }
}

/* ============ App layout (top-bar navigation) ============ */

#app { display: none; min-height: 100vh; }
#app.active { display: block; }

.logo-img { display: block; object-fit: contain; }

#topbar {
  position: sticky; top: 0; z-index: 40;
  background: var(--navy);
  color: #cbd5e1;
  box-shadow: 0 2px 10px rgba(12,22,38,.25);
}

.tb-row1 {
  display: flex; align-items: center; gap: 14px;
  padding: 0 22px; height: 58px;
}
.tb-brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.tb-brand .logo-img { width: 40px; height: 40px; }
.tb-brand .t1 { color: #fff; font-weight: 700; font-size: 14.5px; line-height: 1.15; white-space: nowrap; }
.tb-brand .t2 { font-size: 10.5px; color: #7d90ab; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }

.tb-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
#top-clock {
  font-size: 12.5px; color: #b6c2d4; font-weight: 550; white-space: nowrap;
  display: flex; align-items: center; gap: 7px;
}
#top-clock svg.icn { width: 14px; height: 14px; color: #7d90ab; }
.ay-badge {
  background: rgba(57,135,229,.22); color: #9ec5f4;
  font-size: 12px; font-weight: 650;
  padding: 5px 11px; border-radius: 999px;
  white-space: nowrap;
}

.sync-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 650;
  padding: 4px 10px; border-radius: 999px;
  white-space: nowrap; cursor: default;
}
.sync-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sync-pill.synced { background: rgba(12,163,12,.18); color: #6fdd6f; }
.sync-pill.syncing { background: rgba(250,178,25,.16); color: #f5c25c; }
.sync-pill.syncing .dot { animation: syncPulse 1s ease-in-out infinite; }
.sync-pill.offline { background: rgba(208,59,59,.2); color: #f08c8c; }
/* a fault the network can't explain: expired session, refused policy, setup missing */
.sync-pill.error { background: rgba(208,59,59,.28); color: #ffb0b0; box-shadow: inset 0 0 0 1px rgba(255,120,120,.45); }
.sync-pill.error .dot { animation: syncPulse 1.6s ease-in-out infinite; }
@keyframes syncPulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* user chip + dropdown */
.user-menu { position: relative; }
.user-chip {
  display: flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,.07); border: 0; border-radius: 999px;
  padding: 4px 12px 4px 4px; cursor: pointer; color: #fff;
}
.user-chip:hover { background: rgba(255,255,255,.13); }
.user-chip .avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px;
}
.user-chip .u-name { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.user-chip svg.icn { width: 13px; height: 13px; color: #7d90ab; }
.user-drop {
  position: absolute; right: 0; top: calc(100% + 8px);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-lg);
  min-width: 220px; padding: 6px; z-index: 60;
  display: none;
}
.user-drop.open { display: block; }
.user-drop .ud-head { padding: 9px 11px 8px; border-bottom: 1px solid var(--border); margin-bottom: 5px; }
.user-drop .ud-head .n { font-weight: 650; font-size: 13.5px; }
.user-drop .ud-head .r { font-size: 11.5px; color: var(--ink-3); }
.user-drop button {
  display: flex; align-items: center; gap: 9px;
  width: 100%; text-align: left;
  background: none; border: 0; border-radius: 8px;
  padding: 8px 11px; font-size: 13px; font-weight: 550;
  color: var(--ink-2); cursor: pointer;
}
.user-drop button:hover { background: var(--bg); color: var(--ink); }
.user-drop button.danger { color: var(--bad); }
.user-drop button.danger:hover { background: var(--bad-bg); }
.user-drop svg.icn { width: 15px; height: 15px; }

/* nav row — pill tabs */
#topnav {
  display: flex; align-items: center; gap: 4px;
  background: var(--navy-2);
  padding: 7px 14px;
  overflow-x: auto;
  scrollbar-width: thin;
  border-bottom: 1px solid rgba(62,224,192,.12);
}
.nav-item {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 13px;
  background: none; border: 0; border-radius: 9px;
  color: #b6c2d4; font-size: 13px; font-weight: 550;
  cursor: pointer; white-space: nowrap;
  transition: color .15s, background .15s, transform .15s, box-shadow .15s;
}
.nav-item:hover { color: #fff; background: rgba(255,255,255,.09); transform: translateY(-1px); }
.nav-item.active {
  color: #fff; font-weight: 650;
  background: linear-gradient(135deg, #2f80dd, #1c5cab);
  box-shadow: 0 4px 14px rgba(42,120,214,.45), inset 0 1px 0 rgba(255,255,255,.18);
}
.nav-item svg.icn { width: 16px; height: 16px; opacity: .85; transition: transform .15s; }
.nav-item:hover svg.icn, .nav-item.active svg.icn { opacity: 1; transform: scale(1.08); }

#view { padding: 24px; max-width: 1360px; width: 100%; margin: 0 auto; }

/* ============ Buttons ============ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 15px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--ink);
  font-size: 13.5px; font-weight: 600;
  cursor: pointer;
  transition: background .12s, border-color .12s, box-shadow .12s;
  white-space: nowrap;
}
.btn:hover { background: #f8fafc; border-color: var(--ink-3); }
.btn svg.icn { width: 16px; height: 16px; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn.danger { background: var(--surface); border-color: #f0b4b4; color: var(--bad); }
.btn.danger:hover { background: var(--bad-bg); }
.btn.danger.solid { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn.ghost { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: var(--bg); color: var(--ink); }
.btn.small { padding: 5px 10px; font-size: 12.5px; border-radius: 7px; }
.btn.small svg.icn { width: 14px; height: 14px; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 7px;
  border: 0; background: transparent; color: var(--ink-2); cursor: pointer;
}
.icon-btn:hover { background: var(--bg); color: var(--ink); }
.icon-btn.danger:hover { background: var(--bad-bg); color: var(--bad); }
.icon-btn svg.icn { width: 16px; height: 16px; }

/* ============ Forms ============ */

.field { display: flex; flex-direction: column; gap: 5px; }
.field > label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.field .req { color: var(--bad); }
.input, .select, textarea.input {
  width: 100%;
  padding: 8px 11px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.input:focus, .select:focus, textarea.input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(42,120,214,.14);
}
textarea.input { resize: vertical; min-height: 66px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .span2 { grid-column: span 2; }
.form-note { font-size: 12px; color: var(--ink-3); }

.search-wrap { position: relative; }
.search-wrap svg.icn { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--ink-3); pointer-events: none; }
.search-wrap .input { padding-left: 32px; }

/* Search picker */
.picker { position: relative; }
.picker-menu {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  max-height: 236px; overflow-y: auto; z-index: 20;
  display: none;
}
.picker-menu.open { display: block; }
.picker-opt { padding: 8px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 1px; }
.picker-opt:hover { background: var(--brand-light); }
.picker-opt .p1 { font-weight: 600; font-size: 13px; }
.picker-opt .p2 { font-size: 11.5px; color: var(--ink-3); }
.picker-empty { padding: 10px 12px; color: var(--ink-3); font-size: 13px; }

/* ============ Cards, stats, layout helpers ============ */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card .card-head {
  display: flex; align-items: center; gap: 10px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--border);
}
.card .card-head h3 { font-size: 14.5px; }
.card .card-head .spacer { margin-left: auto; }
.card .card-body { padding: 18px; }
.card .card-body.flush { padding: 0; }

.page-head { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.page-head .ttl h2 { font-size: 19px; margin-bottom: 3px; }
.page-head .ttl p { color: var(--ink-2); font-size: 13px; }
.page-head .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: 1fr 1fr; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 18px; }
.stat {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--shadow); padding: 16px 18px;
  display: flex; align-items: flex-start; gap: 14px;
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: #c8ddf6; }
.stat .s-ic {
  width: 42px; height: 42px; flex: 0 0 auto; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
  box-shadow: 0 4px 10px rgba(42,120,214,.28);
}
.stat .s-ic svg.icn { width: 20px; height: 20px; }
.stat .s-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.stat .s-label { font-size: 11.5px; color: var(--ink-2); font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }
.stat .s-value { font-size: 26px; font-weight: 750; letter-spacing: -0.02em; line-height: 1.05; color: var(--ink); }
.stat .s-sub { font-size: 12px; color: var(--ink-3); }
.stat .s-sub .up { color: var(--good-ink); font-weight: 600; }
.stat .s-sub .down { color: var(--bad); font-weight: 600; }
.stat .meter { margin-top: 7px; }
/* varied icon accents for visual rhythm */
.stat:nth-child(6n+1) .s-ic { background: linear-gradient(135deg, #3b82f6, #1d4ed8); box-shadow: 0 4px 10px rgba(59,130,246,.28); }
.stat:nth-child(6n+2) .s-ic { background: linear-gradient(135deg, #10b981, #047857); box-shadow: 0 4px 10px rgba(16,185,129,.28); }
.stat:nth-child(6n+3) .s-ic { background: linear-gradient(135deg, #8b5cf6, #6d28d9); box-shadow: 0 4px 10px rgba(139,92,246,.28); }
.stat:nth-child(6n+4) .s-ic { background: linear-gradient(135deg, #f59e0b, #b45309); box-shadow: 0 4px 10px rgba(245,158,11,.28); }
.stat:nth-child(6n+5) .s-ic { background: linear-gradient(135deg, #ec4899, #be185d); box-shadow: 0 4px 10px rgba(236,72,153,.28); }
.stat:nth-child(6n+6) .s-ic { background: linear-gradient(135deg, #14b8a6, #0f766e); box-shadow: 0 4px 10px rgba(20,184,166,.28); }

/* ============ Tables ============ */

.table-wrap { overflow-x: auto; border-radius: 0 0 var(--radius) var(--radius); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tbl th {
  text-align: left; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 650;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: #fafbfc;
  white-space: nowrap;
  position: sticky; top: 0;
}
table.tbl td { padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.tbl tr:last-child td { border-bottom: 0; }
table.tbl tbody tr:hover { background: #f8fafd; }
table.tbl td.num, table.tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.tbl .t-main { font-weight: 600; }
table.tbl .t-sub { font-size: 12px; color: var(--ink-3); }
table.tbl .row-actions { display: flex; gap: 2px; justify-content: flex-end; }

.tbl-empty { padding: 38px 20px; text-align: center; color: var(--ink-3); font-size: 13.5px; }

th.th-sort { cursor: pointer; user-select: none; }
th.th-sort:hover { color: var(--ink-2); background: #f2f4f7; }
.th-sort-inner { display: inline-flex; align-items: center; gap: 4px; }
th.num .th-sort-inner { justify-content: flex-end; }
.sort-arrow { font-size: 10px; opacity: .35; }
th.th-sort.on .sort-arrow { opacity: 1; color: var(--brand); }
th.th-sort.on { color: var(--brand-dark); }

/* ============ Pills / badges ============ */

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 650;
  padding: 3px 9px; border-radius: 999px;
  white-space: nowrap;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.good { background: var(--good-bg); color: var(--good-ink); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.bad { background: var(--bad-bg); color: var(--bad); }
.pill.info { background: var(--brand-light); color: var(--brand-dark); }
.pill.gray { background: #eef1f4; color: var(--ink-2); }
.pill.violet { background: #efebfc; color: #5b3fc4; }
.pill.gold { background: #fdf1d8; color: #8a6206; }
.pill.teal { background: #dff5ee; color: #0d7a5d; }
.pill.plain::before { display: none; }

/* ============ CSV import preview ============ */

.import-drop {
  border: 1.5px dashed var(--border-strong); border-radius: var(--radius);
  padding: 22px; text-align: center; color: var(--ink-2); font-size: 13px;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
}
.import-drop svg.icn { width: 26px; height: 26px; color: var(--ink-3); }
.import-summary { display: flex; gap: 9px; flex-wrap: wrap; margin: 12px 0; }
.import-preview { max-height: 300px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.import-preview table.tbl { font-size: 12.5px; }
.import-preview .row-err td { background: #fff6f6; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 11px;
  font-size: 12px; font-weight: 600; color: var(--ink-2);
}

/* ============ Toolbar (filters) ============ */

.toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.toolbar .search-wrap { flex: 1 1 220px; max-width: 320px; }
.toolbar .select { width: auto; min-width: 130px; }
.toolbar .push { margin-left: auto; display: flex; gap: 8px; }

/* ============ View toggle (grid / list) ============ */

.view-toggle { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; }
.view-toggle button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border: 0; background: var(--surface); color: var(--ink-3); cursor: pointer;
}
.view-toggle button + button { border-left: 1px solid var(--border); }
.view-toggle button:hover { background: var(--bg); color: var(--ink-2); }
.view-toggle button.on { background: var(--brand); color: #fff; }
.view-toggle svg.icn { width: 16px; height: 16px; }

/* ---- Export ▾ split menu ---- */
.export-menu { position: relative; display: inline-flex; }
.export-menu .export-btn svg.caret { margin-left: -2px; transition: transform .15s ease; opacity: .8; }
.export-menu.open .export-btn svg.caret { transform: rotate(180deg); }
.export-drop {
  position: absolute; right: 0; top: calc(100% + 6px);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow-lg);
  min-width: 148px; padding: 5px; z-index: 60;
  display: none;
}
.export-menu.open .export-drop { display: block; }
.export-drop button {
  display: flex; align-items: center; gap: 9px;
  width: 100%; text-align: left;
  background: none; border: 0; border-radius: 7px;
  padding: 8px 10px; font-size: 13px; font-weight: 550;
  color: var(--ink-2); cursor: pointer;
}
.export-drop button:hover { background: var(--bg); color: var(--ink); }
.export-drop svg.icn { width: 15px; height: 15px; color: var(--ink-3); }

/* ============ Command palette (Ctrl/⌘ K) ============ */
.cmdk-trigger {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  color: #cdd9ec; border-radius: 9px; padding: 6px 10px; cursor: pointer;
  font-size: 12.5px; font-weight: 550; font-family: inherit;
}
.cmdk-trigger:hover { background: rgba(255,255,255,.14); color: #fff; }
.cmdk-trigger svg.icn { width: 15px; height: 15px; }
.cmdk-trigger kbd { font: inherit; font-size: 11px; background: rgba(255,255,255,.14); border-radius: 5px; padding: 1px 5px; color: #aebfd6; }

#cmdk {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10,20,35,.55); backdrop-filter: blur(3px);
  display: none; align-items: flex-start; justify-content: center;
  padding: 12vh 16px 16px;
}
#cmdk.open { display: flex; }
.cmdk-panel {
  width: 100%; max-width: 560px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-lg); overflow: hidden; max-height: 72vh; display: flex; flex-direction: column;
}
.cmdk-search { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.cmdk-search svg.icn { width: 18px; height: 18px; color: var(--ink-3); flex: 0 0 auto; }
.cmdk-search input { flex: 1; border: 0; outline: 0; background: none; font-size: 15px; color: var(--ink); font-family: inherit; }
.cmdk-search kbd { font: inherit; font-size: 11px; color: var(--ink-3); background: var(--bg); border: 1px solid var(--border); border-radius: 5px; padding: 2px 6px; }
.cmdk-results { overflow-y: auto; padding: 6px; }
.cmdk-empty { padding: 22px 16px; text-align: center; color: var(--ink-3); font-size: 13.5px; }
.cmdk-item {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  background: none; border: 0; border-radius: 9px; padding: 9px 11px; cursor: pointer; color: var(--ink); font-family: inherit;
}
.cmdk-item.active { background: var(--brand-light); }
.ci-ic { flex: 0 0 auto; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; background: var(--bg); border: 1px solid var(--border); color: var(--ink-2); }
.cmdk-item.active .ci-ic { background: var(--brand); border-color: var(--brand); color: #fff; }
.ci-ic svg.icn { width: 16px; height: 16px; }
.ci-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ci-label { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ci-sub { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ci-kind { flex: 0 0 auto; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-3); background: var(--bg); border-radius: 999px; padding: 2px 8px; }
@media (max-width: 620px) {
  .cmdk-trigger .lbl, .cmdk-trigger kbd { display: none; }
  .cmdk-trigger { padding: 7px; }
  #cmdk { padding-top: 8vh; }
}

/* ============ Tabs ============ */

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); padding: 0 18px; }
.tab {
  padding: 11px 14px; background: none; border: 0;
  border-bottom: 2px solid transparent;
  font-size: 13.5px; font-weight: 600; color: var(--ink-2);
  cursor: pointer;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--brand); border-bottom-color: var(--brand); }

/* ============ Modal ============ */

.modal-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(12, 22, 38, .55);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 4vh 16px;
  overflow-y: auto;
}
.modal {
  background: var(--surface);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  width: 100%; max-width: 560px;
  animation: modalIn .16s ease;
  margin-bottom: 4vh;
}
.modal.wide { max-width: 780px; }
.modal.xwide { max-width: 940px; }
@keyframes modalIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.modal-head {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.modal-head h3 { font-size: 15.5px; }
.modal-head .icon-btn { margin-left: auto; }
.modal-body { padding: 20px; }
.modal-foot {
  display: flex; justify-content: flex-end; gap: 9px;
  padding: 14px 20px; border-top: 1px solid var(--border);
  background: #fafbfc; border-radius: 0 0 14px 14px;
  /* a busy record can carry several actions; wrap rather than run off the edge */
  flex-wrap: wrap;
}
/* a menu in the footer has no room below it — open upwards */
.modal-foot .export-drop { top: auto; bottom: calc(100% + 6px); }

/* ============ Toasts ============ */

#toast-root {
  position: fixed; top: 16px; right: 16px; z-index: 100;
  display: flex; flex-direction: column; gap: 8px;
  max-width: 360px;
}
.toast {
  display: flex; align-items: flex-start; gap: 9px;
  background: var(--navy); color: #fff;
  padding: 11px 14px; border-radius: 10px;
  box-shadow: var(--shadow-lg);
  font-size: 13px; font-weight: 550;
  animation: toastIn .18s ease;
}
@keyframes toastIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.toast svg.icn { width: 17px; height: 17px; margin-top: 1px; }
.toast.success svg.icn { color: #4ade80; }
.toast.error svg.icn { color: #f87171; }
.toast.warn svg.icn { color: #fbbf24; }

/* ============ Empty state ============ */

.empty {
  text-align: center; padding: 46px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.empty svg.icn { width: 40px; height: 40px; color: var(--ink-3); opacity: .7; }
.empty h3 { font-size: 15px; }
.empty p { color: var(--ink-2); font-size: 13px; max-width: 380px; line-height: 1.5; }
.empty .actions { display: flex; gap: 9px; margin-top: 6px; flex-wrap: wrap; justify-content: center; }

/* ============ Dashboard specifics ============ */

.dash-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; }
.dash-lists { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mini-list { list-style: none; }
.mini-list li {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 18px; border-bottom: 1px solid var(--border);
}
.mini-list li:last-child { border-bottom: 0; }
.mini-list .rank {
  width: 24px; height: 24px; border-radius: 7px; flex: 0 0 auto;
  background: var(--brand-light); color: var(--brand-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 700;
}
.mini-list .m1 { font-weight: 600; font-size: 13px; line-height: 1.25; }
.mini-list .m2 { font-size: 11.5px; color: var(--ink-3); }
.mini-list .end { margin-left: auto; text-align: right; }
.mini-list .end .v { font-weight: 680; font-size: 13.5px; }

/* ============ Charts ============ */

.chart-box { padding: 6px 12px 10px; }
.chart-box svg { display: block; width: 100%; height: auto; }
.chart-box .bar-hit { fill: transparent; cursor: default; }
.chart-box .bar-hit:hover + .bar-mark, .chart-box .bar-group:hover .bar-mark { fill: var(--brand-dark); }
#chart-tip {
  position: fixed; z-index: 90; pointer-events: none;
  background: var(--navy); color: #fff;
  font-size: 12px; line-height: 1.45;
  padding: 7px 10px; border-radius: 8px;
  box-shadow: var(--shadow-lg);
  display: none; max-width: 240px;
}
#chart-tip .tt1 { font-weight: 650; }
#chart-tip .tt2 { color: #b6c2d4; }

/* ============ QR Scanner ============ */

.scan-layout { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; align-items: start; }
.cam-box {
  position: relative; background: #0c1626;
  border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center;
}
.cam-box video { width: 100%; height: 100%; object-fit: cover; }
.cam-box .cam-off {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  color: #7d90ab; font-size: 13.5px; text-align: center; padding: 20px;
}
.cam-box .cam-off svg.icn { width: 42px; height: 42px; }
.cam-reticle {
  position: absolute; inset: 0; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
.cam-reticle .box {
  width: 55%; aspect-ratio: 1; max-width: 300px;
  border-radius: 18px;
  box-shadow: 0 0 0 9999px rgba(12,22,38,.35);
  outline: 2.5px solid rgba(255,255,255,.85);
  outline-offset: -2px;
}
.scan-result {
  border-radius: var(--radius);
  padding: 18px;
  display: flex; gap: 13px; align-items: flex-start;
  border: 1px solid var(--border);
  background: var(--surface);
}
.scan-result svg.icn { width: 26px; height: 26px; margin-top: 2px; }
.scan-result .r-name { font-size: 16.5px; font-weight: 700; }
.scan-result .r-line { font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.scan-result.ok { background: var(--good-bg); border-color: #bfe6bf; }
.scan-result.ok svg.icn { color: var(--good-ink); }
.scan-result.dup { background: var(--warn-bg); border-color: #f2d38b; }
.scan-result.dup svg.icn { color: var(--warn); }
.scan-result.err { background: var(--bad-bg); border-color: #f0b4b4; }
.scan-result.err svg.icn { color: var(--bad); }
.scan-result.idle { color: var(--ink-3); }
.scan-result.idle svg.icn { color: var(--ink-3); }

/* ============ Member profile ============ */

.profile-grid { display: grid; grid-template-columns: 220px 1fr; gap: 22px; }
.profile-qr { text-align: center; }
.profile-qr img { width: 168px; height: 168px; border: 1px solid var(--border); border-radius: 10px; padding: 8px; background: #fff; }
.profile-qr .q-no { font-weight: 700; margin-top: 8px; font-size: 14px; }
.profile-qr .q-tok { font-size: 11px; color: var(--ink-3); word-break: break-all; margin-top: 2px; }
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 7px 12px; font-size: 13.5px; }
.kv dt { color: var(--ink-3); font-weight: 550; }
.kv dd { font-weight: 550; color: var(--ink); }
.pt-chips { display: flex; gap: 9px; flex-wrap: wrap; margin: 14px 0; }
.pt-chip {
  flex: 1 1 100px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; text-align: center;
}
.pt-chip .v { font-size: 19px; font-weight: 700; }
.pt-chip .l { font-size: 11px; color: var(--ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.pt-chip.hl { background: var(--brand-light); border-color: #c8ddf6; }
.pt-chip.hl .v { color: var(--brand-dark); }

.subsec { margin-top: 18px; }
.subsec h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin-bottom: 8px; }
.subsec .table-scroll { max-height: 200px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }

/* ============ ID Card ============ */

.idcard-wrap { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
@font-face {
  font-family: "Bebas Neue";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/bebas-neue.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/poppins-400.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal; font-weight: 600; font-display: swap;
  src: url("../assets/fonts/poppins-600.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("../assets/fonts/poppins-700.woff2") format("woff2");
}
.idcard {
  /* display typeface (name / wordmark / values) + neutral typeface (labels / body) */
  --card-font: "Bebas Neue", "Oswald", "Helvetica Neue", Arial, sans-serif;
  --label-font: "Poppins", "Segoe UI", system-ui, sans-serif;
  --body-font: "Poppins", "Segoe UI", system-ui, sans-serif;
  --mono: var(--card-font);
  --ink: #0e2b44;         /* dark teal-navy text (contrast on the light card) */
  --ink-soft: #5f7d92;    /* muted neutral labels */
  --gold: #b8912f;
  width: 340px; height: 214px;
  border-radius: 12px;
  position: relative; overflow: hidden; isolation: isolate;
  color: var(--ink);
  background:
    radial-gradient(230px 150px at 106% -12%, rgba(214,178,74,.30), transparent 60%),   /* gold sheen */
    linear-gradient(135deg, #f2f9fc 0%, #d9edf6 48%, #bfe0ee 100%);                      /* light teal-blue */
  box-shadow: var(--shadow-lg);
  font-family: var(--card-font);
  flex: 0 0 auto;
}
.idcard * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
/* ---------- FRONT: the key art, nothing on top of it ---------- */
.idcard.front {
  background: #000 url("../assets/card-front.png") center / cover no-repeat;
}

/* ---------- BACK: the member identity face ----------
   card-back.png is the design artwork with the sample member's photo, name, SR code,
   date, QR and number lifted out (the navy band, grey sheen, circuit traces, STICKER
   ring and the navy right shape are original pixels). Every live field below is placed
   at the position it occupies in the design, scaled to the 340x214 card. */
.idcard.back {
  --navy: #001f2d;
  background: #e9e9e9 url("../assets/card-back.png") center / cover no-repeat;
  color: var(--navy);
  font-family: var(--label-font);
}
/* The photo panel; its geometry is mirrored by CARD_PHOTO in js/core/utils.js,
   which is what the cropper frames and exports — keep the two in step.
   `left` centres the panel on the navy band painted in card-back.png, which runs
   from 27.97 to 106.08 in these coordinates. It used to sit 2.2px right of that
   band's centre, so the panel overhung 7.8px on the left and 12.2px on the right
   — half a millimetre of lopsidedness on the printed card. */
.idcard.back .cb-photo {
  position: absolute; left: 18px; top: 40.5px; width: 98.1px; height: 130.4px;
  border: 1.4px solid #04212f; border-radius: 6.8px; overflow: hidden;
  background: #0a2b3d;
  display: flex; align-items: center; justify-content: center;
}
/* screen only: an unblurred box-shadow prints as a grey slab in some PDF rasterisers */
@media screen { .idcard.back .cb-photo { box-shadow: 0 5px 14px rgba(0,0,0,.4); } }
.idcard.back .cb-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.idcard.back .cb-photo span { font-size: 7px; font-weight: 600; letter-spacing: .16em; color: #7fa8c0; }

/* the line breaks and the size come from Members.fitName() — measured against the
   real Poppins advances, so a long name drops to two or three tidy lines instead of
   shrinking into a wrapped block */
.idcard.back .cb-name {
  position: absolute; left: 127px;
  font-weight: 700; line-height: 1.02; letter-spacing: -.02em;
  text-transform: uppercase; color: var(--navy); white-space: nowrap;
}
.idcard.back .cb-name span { display: block; }

.idcard.back .cb-f1 { position: absolute; left: 127px; top: 94.4px; }
.idcard.back .cb-f2 { position: absolute; left: 127px; top: 124px; }
.idcard.back .cb-f2 .cb-v { margin-top: 1.2px; }
.idcard.back .cb-k {
  display: block; font-size: 9.2px; font-weight: 400; line-height: 1;
  letter-spacing: .01em; text-transform: uppercase; color: #2a5266;
}
.idcard.back .cb-v {
  display: block; font-size: 12.5px; font-weight: 700; line-height: 1;
  letter-spacing: -.01em; text-transform: uppercase; color: var(--navy); margin-top: .4px;
  white-space: nowrap;
}
/* QR block: a slightly larger plate with a real quiet zone and a hairline frame,
   so it reads as part of the design and stays easy to scan off a printed card */
.idcard.back .cb-qr {
  position: absolute; left: 238px; top: 92px; width: 72px; height: 72px;
  background: #fff; border: .8px solid rgba(0,31,45,.16); border-radius: 5px; padding: 3px;
}
.idcard.back .cb-qr img { width: 100%; height: 100%; display: block; }   /* smooth downscale: nearest-neighbour can drop QR modules */
@media screen { .idcard.back .cb-qr { box-shadow: 0 3px 9px rgba(0,31,45,.16); } }
/* the QR does two jobs — attendance scanner, and any phone camera (it encodes a link
   to the portal), so the caption names both */
.idcard.back .cb-qcap {
  position: absolute; left: 228px; top: 167.5px; width: 92px; text-align: center;
  font-size: 4.6px; font-weight: 600; letter-spacing: .06em; white-space: nowrap;
  text-transform: uppercase; color: #3a6076;
}
.idcard.back .cb-qcap span { display: block; line-height: 1.5; }
.idcard.back .cb-qcap span + span { color: #5d8296; letter-spacing: .04em; }

/* ---- the design's own furniture ---- */
/* org crest, where the sample's sticker ring used to sit */
.idcard.back .cb-crest { position: absolute; right: 13px; top: 10px; width: 29px; height: 29px; display: block; }
/* the front's tagline, small, in the band below the photo */
.idcard.back .cb-motto {
  position: absolute; left: 28.9px; top: 182px; width: 77.7px; text-align: center;
  font-size: 4.2px; font-weight: 600; line-height: 1; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(214,238,250,.62); white-space: nowrap;
}
.idcard.back .cb-no {
  position: absolute; right: 15px; top: 190.2px;
  font-size: 8.3px; font-weight: 600; font-style: italic; line-height: 1;
  letter-spacing: 0; color: var(--navy);
}

/* photo cropper */
.cropper { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.crop-frame {
  position: relative; overflow: hidden; border-radius: 10px; background: #e9eef5;
  cursor: grab; touch-action: none;
  box-shadow: 0 0 0 2px var(--brand), 0 0 0 6px rgba(42,120,214,.16), 0 8px 20px rgba(14,43,68,.22);
}
.crop-frame:active { cursor: grabbing; }
.crop-frame img { position: absolute; top: 0; left: 0; user-select: none; -webkit-user-drag: none; max-width: none; }
/* rule-of-thirds guides so the crop area reads clearly */
.crop-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,.4)) 33.33% 0 / 1px 100% no-repeat,
    linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,.4)) 66.66% 0 / 1px 100% no-repeat,
    linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,.4)) 0 33.33% / 100% 1px no-repeat,
    linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,.4)) 0 66.66% / 100% 1px no-repeat;
}
.crop-controls { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 300px; color: var(--ink-3); }
.crop-controls input[type=range] { flex: 1; accent-color: var(--brand); }

/* membership term ledger (member profile + self-service) */
.term-ledger { display: flex; flex-wrap: wrap; gap: 8px; }
.tl-cell { flex: 0 0 auto; min-width: 92px; border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px; text-align: center; background: var(--surface, #fff); }
.tl-cell .tl-term { font-size: 11px; font-weight: 600; color: var(--ink-2); letter-spacing: .01em; }
.tl-cell .tl-mark { font-size: 12px; font-weight: 700; margin-top: 3px; }
.tl-cell.paid { border-color: rgba(30,160,90,.4); background: rgba(30,160,90,.08); }
.tl-cell.paid .tl-mark { color: var(--good-ink, #1a7f46); }
.tl-cell.missed { border-color: rgba(210,60,60,.4); background: rgba(210,60,60,.07); }
.tl-cell.missed .tl-mark { color: var(--bad, #c0392b); }
.tl-cell.due { border-color: rgba(214,150,42,.5); background: rgba(214,150,42,.1); }
.tl-cell.due .tl-mark { color: #a76e12; }

/* raffle / random draw */
.rf-stage {
  margin-top: 18px; min-height: 132px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--brand-light); padding: 24px 18px; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden;
}
.rf-hint { color: var(--ink-2); font-size: 13.5px; line-height: 1.6; max-width: 460px; }
.rf-reel { display: flex; flex-direction: column; gap: 10px; align-items: center; width: 100%; }
.rf-name { font-size: 22px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; line-height: 1.15; }
.rf-reel.spinning .rf-name { opacity: .5; }
.rf-name.win { display: flex; flex-direction: column; gap: 4px; color: var(--brand-dark); font-size: 26px; animation: rfPop .35s ease; }
.rf-name.win .rf-sub { font-size: 12px; font-weight: 600; color: var(--ink-3); letter-spacing: .01em; }
.rf-win-head { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: 14px; font-weight: 800; color: var(--brand-dark); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 14px; }
.rf-win-head svg.icn { width: 19px; height: 19px; }
@keyframes rfPop { 0% { transform: scale(.7); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rf-name.win { animation: none; } }

/* audit log column balance — narrower Details, more room for Admin + Action */
.audit-tbl { table-layout: fixed; width: 100%; min-width: 720px; }
.audit-tbl th, .audit-tbl td { overflow-wrap: anywhere; }
.audit-tbl .au-when { width: 13%; }
.audit-tbl .au-admin { width: 20%; }
.audit-tbl .au-cat { width: 12%; }
.audit-tbl .au-action { width: 28%; }
.audit-tbl .au-details { width: 27%; }

/* batch record payments */
.bp-list { max-height: 340px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; }
.bp-row { display: flex; align-items: center; gap: 10px; padding: 9px 13px; border-bottom: 1px solid var(--border); cursor: pointer; }
.bp-row:last-child { border-bottom: 0; }
.bp-row:hover { background: var(--brand-light); }
.bp-row input { flex: 0 0 auto; width: 16px; height: 16px; }
.bp-row .bp-name { font-weight: 600; }
.bp-row .bp-sub { color: var(--ink-3); font-size: 12.5px; margin-left: auto; text-align: right; }

/* ============ Partner cards ============ */

.partner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.partner-card { padding: 16px 17px; display: flex; flex-direction: column; gap: 8px; }
.partner-card .p-top { display: flex; align-items: center; gap: 10px; }
.partner-card .p-logo { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 10px; overflow: hidden; background: var(--brand-light); border: 1px solid var(--border); }
.partner-card .p-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.partner-card h4 { font-size: 14.5px; }
/* logo thumbnail in the partners LIST view */
.p-list-name { display: flex; align-items: center; gap: 10px; }
.p-list-logo { width: 34px; height: 34px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; overflow: hidden; background: var(--brand-light); border: 1px solid var(--border); color: var(--ink-3); }
.p-list-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p-list-logo svg.icn { width: 17px; height: 17px; }
.partner-card .p-cat { font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.partner-card .p-benefit {
  background: var(--brand-light); color: var(--brand-dark);
  border-radius: var(--radius-sm); padding: 9px 12px;
  font-weight: 650; font-size: 13px;
}
.partner-card .p-row { display: flex; gap: 7px; align-items: center; font-size: 12.5px; color: var(--ink-2); }
.partner-card .p-row svg.icn { width: 14px; height: 14px; color: var(--ink-3); }
.partner-card .p-foot { display: flex; align-items: center; margin-top: 4px; }

/* ============ Reports (two-pane) ============ */

.report-layout { display: grid; grid-template-columns: 264px 1fr; gap: 16px; align-items: start; }
.report-nav { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 6px; }
.report-tile {
  display: flex; align-items: center; gap: 11px; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow); padding: 10px 12px; cursor: pointer;
  transition: border-color .12s, background .12s;
  font-family: inherit;
}
.report-tile:hover { border-color: var(--brand); }
.report-tile.active { border-color: var(--brand); background: var(--brand-light); }
.report-tile .rt-ic {
  width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto;
  background: var(--brand-light); color: var(--brand-dark);
  display: flex; align-items: center; justify-content: center;
}
.report-tile .rt-ic svg.icn { width: 15px; height: 15px; }
.report-tile.active .rt-ic { background: #fff; }
.report-tile h4 { font-size: 13px; }
.report-out-desc { font-size: 12.5px; color: var(--ink-2); }

/* ============ Settings (tabbed) ============ */

.settings-wrap { max-width: 860px; margin: 0 auto; }
.settings-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 18px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.settings-tabs::-webkit-scrollbar { display: none; }
.settings-tabs .tab { padding: 10px 14px; white-space: nowrap; flex: 0 0 auto; }
.settings-pane { display: flex; flex-direction: column; gap: 16px; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.rule-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.rule-row:last-child { border-bottom: 0; }
.rule-row .r-name { flex: 1; font-weight: 550; font-size: 13.5px; }
.rule-row .input { width: 90px; text-align: right; }
.danger-zone { border-color: #f0b4b4; }
.danger-zone .card-head { border-color: #f5d5d5; }
.danger-zone .card-head h3 { color: var(--bad); }

/* ============ Payment detail ============ */

.pay-detail { display: flex; flex-direction: column; gap: 16px; }
.pd-top {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 16px 18px; border-radius: var(--radius);
  background: linear-gradient(135deg, var(--brand-light), #f4f9ff);
  border: 1px solid #d6e6fb;
}
.pd-member { display: flex; align-items: center; gap: 12px; }
.avatar-lg {
  width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto;
  background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px;
}
.pd-name { font-size: 16px; font-weight: 700; }
.pd-sub { font-size: 12px; color: var(--ink-2); }
.pd-amount { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.pd-amt-val { font-size: 24px; font-weight: 750; letter-spacing: -0.02em; color: var(--brand-dark); }
.pd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.pd-cell { background: var(--surface); padding: 12px 15px; display: flex; flex-direction: column; gap: 4px; }
.pd-cell.span2 { grid-column: span 2; }
.pd-k { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.pd-k svg.icn { width: 13px; height: 13px; }
.pd-v { font-size: 14px; font-weight: 600; color: var(--ink); }

/* ============ Redemption receipt ============ */

.receipt { border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); padding: 18px; font-size: 13px; }
.receipt .rc-head { text-align: center; margin-bottom: 12px; }
.receipt .rc-head h4 { font-size: 14px; letter-spacing: .04em; }
.receipt .rc-head p { color: var(--ink-3); font-size: 11.5px; }
.receipt .kv { grid-template-columns: 120px 1fr; }
.receipt .rc-total { border-top: 1px dashed var(--border-strong); margin-top: 12px; padding-top: 10px; display: flex; justify-content: space-between; font-weight: 700; font-size: 14px; }

/* ============ Print ============ */

#print-area { display: none; }

@media print {
  body.printing #app, body.printing #landing, body.printing #login-pop, body.printing #login-backdrop, body.printing #toast-root,
  body.printing #modal-root, body.printing #confirm-root, body.printing #chart-tip { display: none !important; }
  body.printing #print-area { display: block !important; }
  body.printing { background: #fff; }
  /* the card is composed at 340x214px; zoom scales the whole composition (art,
     type, QR) down to CR80 85.6mm x 54mm instead of clipping px content into mm */
  #print-area .idcard { zoom: .9512; box-shadow: none; page-break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #print-area .idcard-wrap { gap: 6mm; }
  /* batch sheet: a fixed grid of CR80 slots with room to cut between them */
  /* Each sheet is tall enough that only one fits a page, so pages break by flow.
     A forced break made Chrome paint the next sheet's top edge at the foot of the
     previous page. 250mm clears the printable height of both A4 and US Letter. */
  #print-area .card-sheet { height: 250mm; padding-top: 3mm; break-inside: avoid; page-break-inside: avoid; }
  #print-area .card-sheet:last-child { height: auto; }
  /* columns and sheet height are set per print run (paper size + cards per page) */
  #print-area .card-grid {
    display: grid; grid-template-columns: repeat(2, 85.6mm);
    gap: 9mm 10mm; justify-content: center; align-content: start;   /* room for scissors */
    break-inside: avoid; page-break-inside: avoid;
  }
  #print-area .card-slot {
    width: 85.6mm; height: 54mm; position: relative;
    break-inside: avoid; page-break-inside: avoid;
  }
  /* Bleed box: overflows the trim slot into the gap, where the neighbouring
     card's bleed meets it. It carries the artwork, so colour is continuous
     across the cut; the card inside keeps exact CR80 geometry and draws only
     the content. */
  #print-area .card-bleed {
    position: absolute; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
  }
  /* The bleed box carries a STRETCHED copy of the art, and it shows only in the
     ~1.5mm margin outside the trim, which the scissors take off.

     The card on top paints the same art at its exact size, so the art and the
     fields drawn on it stay in register. Blanking the card's background and
     letting this stretched copy show through the middle is what pushed the
     photo frame about a millimetre off the artwork behind it: `cover` on a box
     bigger than the card moves every feature of the art outwards, while the
     fields stay where the card puts them. */
  #print-area .card-bleed.front { background: #000 url("../assets/card-front.png") center / cover no-repeat; }
  #print-area .card-bleed.back { background: #e9e9e9 url("../assets/card-back.png") center / cover no-repeat; }
  #print-area .card-bleed .idcard { border-radius: 0; }
  /* No line is printed on the card: the edge of the artwork is the edge of the
     card, and the white lane around it keeps each one distinct on the sheet.
     A faint trim guide can be switched on from the print dialog. */
  #print-area .card-bleed .idcard { box-shadow: none; }
  #print-area.guides .card-bleed .idcard.front { box-shadow: 0 0 0 .2mm rgba(255,255,255,.5); }
  #print-area.guides .card-bleed .idcard.back { box-shadow: 0 0 0 .2mm rgba(0,0,0,.35); }
  #print-area .print-doc { font-family: var(--font); color: #000; }
  #print-area .print-doc h2 { font-size: 16pt; margin-bottom: 2pt; }
  #print-area .print-doc .sub { font-size: 9.5pt; color: #444; margin-bottom: 12pt; }
  #print-area .print-doc table { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
  #print-area .print-doc th, #print-area .print-doc td { border: 0.5pt solid #999; padding: 4pt 6pt; text-align: left; }
  #print-area .print-doc th { background: #eee; }
  #print-area .receipt { max-width: 90mm; }
}

/* ============ Responsive ============ */

@media (max-width: 1080px) {
  .dash-charts { grid-template-columns: 1fr; }
  .dash-lists { grid-template-columns: 1fr; }
  .scan-layout { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .tb-row1 { padding: 0 14px; height: 52px; gap: 10px; }
  .tb-brand .t2 { display: none; }
  .tb-brand .t1 { font-size: 13px; }
  #top-clock { display: none; }
  .user-chip .u-name { display: none; }
  .user-chip { padding: 3px; }
  #topnav { padding: 0 8px; }
  .nav-item { padding: 10px 10px; font-size: 12.5px; }
  #view { padding: 16px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .span2 { grid-column: span 1; }
  .profile-grid { grid-template-columns: 1fr; }
  .profile-qr { order: -1; }
  .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }
  .toolbar .push { margin-left: 0; width: 100%; }
  .report-layout { grid-template-columns: 1fr; }
  /* let inner table-wraps scroll instead of widening the whole page */
  .report-layout > * { min-width: 0; }
  /* report picker becomes a horizontal scroll row so the data table isn't buried */
  .report-nav { position: static; flex-direction: row; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .report-nav .report-tile { flex: 0 0 auto; }
  .settings-tabs { overflow-x: auto; }
}

/* ============ Card hover ============ */

.card-hover { transition: transform .16s ease, box-shadow .16s ease, border-color .16s; cursor: pointer; }
.card-hover:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(16,24,40,.13); border-color: var(--brand); }
@media (prefers-reduced-motion: reduce) {
  .card-hover, .nav-item { transition: none; }
  .card-hover:hover, .nav-item:hover { transform: none; }
}

/* ============ Progress meter (fee collection) ============ */

.meter { height: 7px; border-radius: 999px; background: #cde2fb; overflow: hidden; margin-top: 7px; }
.meter > span { display: block; height: 100%; border-radius: 999px; background: var(--brand); transition: width .5s ease; }

/* ============ Event & reward card grids ============ */

.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.tile-card { display: flex; flex-direction: column; overflow: hidden; }
.tile-cover {
  aspect-ratio: 16 / 9; width: 100%;
  background: linear-gradient(135deg, #13233c, #1b3050);
  display: flex; align-items: center; justify-content: center;
  color: #5b6c86; position: relative; overflow: hidden;
}
.tile-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile-cover svg.icn { width: 34px; height: 34px; }
.tile-cover .tc-status { position: absolute; top: 10px; left: 10px; }
.tile-cover .tc-pts {
  position: absolute; top: 10px; right: 10px;
  background: rgba(12,22,38,.78); color: #fff; backdrop-filter: blur(3px);
  font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
}
.tile-body { padding: 13px 15px 14px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.tile-body h4 { font-size: 14px; line-height: 1.3; }
.tile-meta { font-size: 12px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tile-meta svg.icn { width: 13px; height: 13px; }
.tile-foot { margin-top: auto; padding-top: 9px; display: flex; align-items: center; gap: 8px; }
.tile-foot .push { margin-left: auto; display: flex; gap: 4px; }
.reward-pts { font-size: 17px; font-weight: 750; color: var(--brand-dark); }
.reward-pts small { font-size: 11px; color: var(--ink-3); font-weight: 600; }

/* cover upload preview in forms */
.cover-uploader { display: flex; gap: 12px; align-items: center; }
.cover-uploader .prev {
  width: 132px; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden;
  background: linear-gradient(135deg, #13233c, #1b3050);
  display: flex; align-items: center; justify-content: center; color: #5b6c86; flex: 0 0 auto;
}
.cover-uploader .prev img { width: 100%; height: 100%; object-fit: cover; }
.cover-uploader .prev.square { width: 84px; aspect-ratio: 1; border-radius: 50%; }
/* same ratio as the card-back photo panel (CARD_PHOTO in js/core/utils.js) */
.cover-uploader .prev.portrait { width: 66px; aspect-ratio: 95.3 / 127.6; border-radius: 4.5px; }
.cover-uploader .prev.logo { width: 80px; aspect-ratio: 1; border-radius: 14px; }

/* ============ Batch selection bar ============ */

.batch-bar {
  display: none; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 11px 18px;
  background: var(--brand-light); border-bottom: 1px solid #c8ddf6;
}
.batch-bar.open { display: flex; }
.batch-bar .b-count { font-weight: 700; font-size: 13px; color: var(--brand-dark); }
td.sel-cell, th.sel-cell { width: 36px; text-align: center; }
.sel-box { width: 15px; height: 15px; accent-color: var(--brand); cursor: pointer; }
tr.row-click { cursor: pointer; }

/* ============ Member checklist (batch attendance) ============ */

.checklist { max-height: 300px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.checklist label {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-bottom: 1px solid var(--border);
  cursor: pointer; font-size: 13px;
}
.checklist label:last-child { border-bottom: 0; }
.checklist label:hover { background: var(--brand-light); }
.checklist .cl-sub { color: var(--ink-3); font-size: 11.5px; margin-left: auto; }

/* ============ Landing page ============ */

/* The colour used to stop at the bottom of the hero and leave a visible seam
   against the flat navy below it. The page now carries one faint field the
   whole way down, and the hero's own glow fades out into it. */
#landing {
  display: none; min-height: 100vh; color: #cbd5e1; overflow-x: clip;
  background:
    radial-gradient(1100px 700px at 82% -6%, rgba(42,120,214,.13), rgba(42,120,214,0) 62%),
    radial-gradient(900px 600px at -8% 32%, rgba(30,196,161,.07), rgba(30,196,161,0) 60%),
    var(--navy);
  /* deliberately not background-attachment: fixed — it scrolls badly on iOS,
     and the gradient already spans the page, so there is no seam either way */
}
.ld-hero-band {
  position: relative;
  overflow: hidden;
  background:
    /* the fade that joins the hero to the page below it */
    linear-gradient(to bottom, rgba(12,22,38,0) 62%, var(--navy) 100%),
    radial-gradient(1200px 620px at 78% -18%, rgba(42,120,214,.30), rgba(42,120,214,0) 60%),
    radial-gradient(900px 520px at 6% 118%, rgba(30,196,161,.15), rgba(30,196,161,0) 58%);
}
/* Decoration only. Soft blurred shapes drifting behind the hero, held at a low
   opacity so the headline and buttons stay the things you read — they sit under
   everything, ignore the pointer, and stop moving if the viewer asked for less
   motion. The hero band already clips them with overflow:hidden. */
.ld-orbs { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.ld-orbs .orb {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(42px); opacity: .20;
  will-change: transform;
  animation: orbDrift 26s ease-in-out infinite alternate;
}
.ld-orbs .o1 { width: 330px; height: 330px; left: -70px;  top: -60px;  background: #2a78d6; animation-duration: 30s; }
.ld-orbs .o2 { width: 260px; height: 260px; right: 8%;    top: -40px;  background: #1ec4a1; animation-duration: 24s; animation-delay: -6s; opacity: .16; }
.ld-orbs .o3 { width: 400px; height: 400px; right: -90px; bottom: -140px; background: #3ee0c0; animation-duration: 34s; animation-delay: -12s; opacity: .13; }
.ld-orbs .o4 { width: 220px; height: 220px; left: 26%;    bottom: -90px;  background: #5bc8ff; animation-duration: 28s; animation-delay: -3s; opacity: .14; }
.ld-orbs .o5 { width: 160px; height: 160px; left: 54%;    top: 18%;       background: #2a78d6; animation-duration: 22s; animation-delay: -9s; opacity: .10; }
@keyframes orbDrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(28px, -22px, 0) scale(1.08); }
}
/* the hero's own content has to sit above them */
.ld-hero { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .ld-orbs .orb { animation: none; }
}

#landing.active { display: block; }
/* sticky header wraps the nav + tab bar so they pin together */
.ld-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(12,22,38,.9); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.ld-nav { display: flex; align-items: center; gap: 12px; padding: 12px 5vw 8px; }
.ld-nav .logo-img { width: 38px; height: 38px; flex: 0 0 auto; }
.ld-nav .ld-brand { min-width: 0; }
.ld-nav .t1 { color: #fff; font-weight: 750; font-size: 15px; }
.ld-nav .t2 { font-size: 10.5px; color: #7d90ab; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-nav .ld-signin { margin-left: auto; flex: 0 0 auto; }

/* tab bar — segmented pill control */
.ld-tabs {
  display: flex; gap: 4px; padding: 5px; margin: 0 5vw 12px;
  width: fit-content; max-width: calc(100% - 10vw);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.ld-tabs::-webkit-scrollbar { display: none; }
.ld-tab {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: 10px; background: none; border: none; cursor: pointer;
  color: #9db2cf; font-size: 13.5px; font-weight: 600; white-space: nowrap;
  transition: color .15s, background .15s, box-shadow .15s;
}
.ld-tab svg { width: 16px; height: 16px; opacity: .9; }
.ld-tab:hover { color: #dbe6f3; background: rgba(255,255,255,.06); }
.ld-tab.active { color: #fff; background: rgba(255,255,255,.14); box-shadow: 0 2px 8px rgba(0,0,0,.28); }
.ld-tab.active svg { color: #3ee0c0; opacity: 1; }

.ld-hero {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: center;
  padding: 60px 5vw 50px; max-width: 1200px; margin: 0 auto;
  position: relative;
}
.ld-hero .kicker { font-size: 12px; letter-spacing: .2em; font-weight: 700; color: #3ee0c0; text-transform: uppercase; margin-bottom: 14px; }
.ld-hero h1 { color: #fff; font-size: clamp(30px, 4.6vw, 46px); line-height: 1.08; letter-spacing: -0.02em; margin-bottom: 16px; }
.ld-hero h1 em { font-style: normal; background: linear-gradient(100deg, #6da7ec, #3ee0c0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ld-hero p { font-size: 15.5px; line-height: 1.65; color: #93a7c4; max-width: 480px; margin-bottom: 26px; }
.ld-hero .cta { display: flex; gap: 11px; flex-wrap: wrap; }
.ld-hero .btn { padding: 11px 22px; font-size: 14px; }
.ld-hero .btn.ghost-dark { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.15); color: #fff; }
.ld-hero .btn.ghost-dark:hover { background: rgba(255,255,255,.14); }

/* hero card float. The tilt, lift and scale are variables so phones can run the
   same animation at a size that fits the viewport (see the 640px block). */
.ld-card-float {
  display: flex; justify-content: center; perspective: 900px;
  --tilt: 18deg; --tilt-2: 14deg; --lift: 14px; --card-scale: 1;
}
.ld-card-float .idcard {
  transform: rotate3d(.6, -1, .15, var(--tilt)) scale(var(--card-scale));
  animation: cardFloat 5.5s ease-in-out infinite;
  box-shadow: 0 30px 60px rgba(0,0,0,.5);
  will-change: transform;
}
@keyframes cardFloat {
  0%, 100% { transform: rotate3d(.6,-1,.15, var(--tilt))   scale(var(--card-scale)) translateY(0); }
  50%      { transform: rotate3d(.6,-1,.15, var(--tilt-2)) scale(var(--card-scale)) translateY(calc(-1 * var(--lift))); }
}
@media (prefers-reduced-motion: reduce) { .ld-card-float .idcard { animation: none; } }

.ld-section { padding: 40px 5vw 56px; max-width: 1100px; margin: 0 auto; }
.ld-section h2 { color: #fff; font-size: 21px; font-weight: 650; letter-spacing: -.01em; margin-bottom: 5px; }
.ld-section .sub { color: #7d90ab; font-size: 13px; margin-bottom: 24px; }

.ld-feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.ld-feed-item {
  background: rgba(255,255,255,.022); border: 1px solid rgba(255,255,255,.055);
  border-radius: 14px; padding: 16px 17px;
  transition: transform .16s ease, border-color .16s ease, background-color .16s ease;
}
.ld-feed-item:hover {
  transform: translateY(-3px);
  border-color: rgba(62,224,192,.32); background: rgba(255,255,255,.045);
}
.ld-feed-item .f-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ld-feed-item h4 { color: #fff; font-size: 14px; line-height: 1.35; margin-bottom: 5px; }
.ld-feed-item .f-meta { font-size: 12px; color: #7d90ab; line-height: 1.6; }

/* self-service card lookup (public, on the dark landing) — centered panel */
.ld-check-section { text-align: center; }
.ss-panel {
  max-width: 720px; margin: 0 auto;
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px; padding: 32px 30px 34px;
}
.ss-panel h2 { margin-bottom: 6px; }
.ss-panel .sub { margin-bottom: 20px; }
.ss-box { max-width: 540px; margin: 0 auto; text-align: left; }
.ss-form { display: flex; gap: 10px; flex-wrap: wrap; }
.ss-form .input {
  flex: 1; min-width: 200px; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16); color: #fff;
}
.ss-form .input::placeholder { color: #7d90ab; }
.ss-msg { font-size: 13px; color: #93a7c4; margin-top: 14px; line-height: 1.5; }
.ss-msg.warn { color: #f0c26b; }
.ss-card {
  margin-top: 18px; background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 18px 18px 20px;
}
.ss-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.ss-name { color: #fff; font-size: 17px; font-weight: 700; }
.ss-sub { color: #93a7c4; font-size: 12.5px; margin-top: 3px; }
.ss-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.ss-card .pt-chips { flex-wrap: wrap; gap: 10px; }
.ss-card .pt-chip { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); }
.ss-card .pt-chip .v { color: #fff; }
.ss-card .pt-chip.hl { background: rgba(62,224,192,.14); border-color: rgba(62,224,192,.4); }
.ss-card .pt-chip.hl .v { color: #6ff0d4; }
.ss-card .pt-chip .l { color: #93a7c4; }

/* self-service points history (ledger) */
.ss-history { margin-top: 16px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 12px; }
.ss-history > summary {
  display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  color: #cdd9ec; font-size: 13px; font-weight: 650; user-select: none;
}
.ss-history > summary::-webkit-details-marker { display: none; }
.ss-history > summary svg.icn { width: 15px; height: 15px; color: #93a7c4; }
.ss-history[open] > summary { margin-bottom: 10px; }
.ss-hcount { margin-left: auto; background: rgba(255,255,255,.09); color: #93a7c4; font-size: 11.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.ss-hlist { display: flex; flex-direction: column; max-height: 320px; overflow-y: auto; }
.ss-hrow {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  padding: 9px 2px; border-bottom: 1px solid rgba(255,255,255,.06);
}
.ss-hrow:last-child { border-bottom: 0; }
.ss-hmain { min-width: 0; }
.ss-hreason { color: #e7edf6; font-size: 13px; font-weight: 550; overflow-wrap: anywhere; }
.ss-hdate { color: #7d90ab; font-size: 11.5px; margin-top: 2px; }
.ss-hpts { flex: 0 0 auto; font-size: 13.5px; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ss-hpts.pos { color: #6ff0d4; }
.ss-hpts.neg { color: #f0a0a0; }
.ss-hmore { color: #7d90ab; font-size: 11.5px; margin-top: 9px; text-align: center; }

/* Four short points, not four boxes: the panels carried more weight than the
   words inside them. Icon, heading, sentence — the grid does the separating. */
/* Four points, so the row counts are 4 / 2 / 1 — auto-fill picked three at this
   width and left "Partner perks" stranded on a row of its own. */
.ld-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 28px; }
@media (max-width: 1000px) { .ld-features { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (max-width: 560px) { .ld-features { grid-template-columns: 1fr; gap: 22px; } }
.ld-feature { background: none; border: 0; border-radius: 0; padding: 0; }
.ld-feature .f-ic {
  width: 34px; height: 34px; border-radius: 10px;
  background: rgba(47,128,221,.14); border: 1px solid rgba(91,200,255,.22);
  display: flex; align-items: center; justify-content: center; color: #5bc8ff;
  margin-bottom: 11px;
}
.ld-feature .f-ic svg { width: 17px; height: 17px; }
.ld-feature h4 { color: #fff; font-size: 14.5px; margin-bottom: 5px; }
.ld-feature p { font-size: 12.5px; color: #93a7c4; line-height: 1.6; }

/* partner establishments (public directory) */
.ld-ptools { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.ld-psearch { flex: 1 1 220px; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 11px; }
.ld-psearch svg { width: 16px; height: 16px; color: #7d90ab; flex: 0 0 auto; }
.ld-psearch input { flex: 1; min-width: 0; background: none; border: none; color: #fff; padding: 11px 0; font-size: 14px; outline: none; }
.ld-psearch input::placeholder { color: #7d90ab; }
.ld-ptools select { flex: 0 0 auto; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: #fff; border-radius: 11px; padding: 10px 12px; font-size: 13.5px; cursor: pointer; }
.ld-ptools select option { background: #14233c; color: #fff; }
.ld-partners { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.ld-partner {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 20px 18px 18px;
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
.ld-partner::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #3ee0c0, #6da7ec); }
.ld-partner:hover { transform: translateY(-4px); border-color: rgba(62,224,192,.45); box-shadow: 0 14px 34px rgba(0,0,0,.32); }
.ld-partner .lp-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ld-partner .lp-logo { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); }
.ld-partner .lp-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ld-partner .lp-htext { min-width: 0; }
.ld-partner .lp-cat {
  display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #7fbef2; background: rgba(109,167,236,.14); border: 1px solid rgba(109,167,236,.3);
  padding: 2px 9px; border-radius: 999px; margin-bottom: 6px;
}
.ld-partner h4 { color: #fff; font-size: 16px; line-height: 1.3; }
.ld-partner .lp-benefit {
  display: flex; align-items: flex-start; gap: 8px;
  background: rgba(62,224,192,.1); border: 1px solid rgba(62,224,192,.22);
  border-radius: 10px; padding: 9px 11px; color: #a9efdd; font-size: 12.5px; font-weight: 650; line-height: 1.4;
}
.ld-partner .lp-benefit svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 1px; color: #3ee0c0; }
.ld-partner .lp-loc { display: flex; align-items: flex-start; gap: 7px; color: #8fa3bd; font-size: 12px; margin-top: 11px; line-height: 1.4; }
.ld-partner .lp-loc svg { width: 13px; height: 13px; flex: 0 0 auto; margin-top: 1px; }

/* redeemable rewards (public catalog) */
.ld-rewards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.ld-reward { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.11); border-radius: 16px; overflow: hidden; transition: transform .18s, border-color .18s, box-shadow .18s; }
.ld-reward:hover { transform: translateY(-4px); border-color: rgba(62,224,192,.45); box-shadow: 0 14px 34px rgba(0,0,0,.32); }
.ld-reward.out { opacity: .6; }
.ld-reward .lr-cover { position: relative; aspect-ratio: 16 / 10; background: rgba(255,255,255,.06); display: flex; align-items: center; justify-content: center; }
.ld-reward .lr-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ld-reward .lr-cover svg { width: 40px; height: 40px; color: rgba(255,255,255,.28); }
.ld-reward .lr-pts { position: absolute; top: 10px; right: 10px; background: linear-gradient(135deg, #3ee0c0, #2f78d6); color: #04121f; font-weight: 800; font-size: 12.5px; padding: 4px 10px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.ld-reward .lr-body { padding: 14px 15px 16px; }
.ld-reward .lr-body h4 { color: #fff; font-size: 15px; line-height: 1.3; margin-bottom: 6px; }
.ld-reward .lr-cost { color: #3ee0c0; font-size: 13px; font-weight: 800; letter-spacing: .01em; margin-bottom: 6px; }
.ld-reward .lr-sizes { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 8px; }
.ld-reward .lr-size {
  font-size: 11px; font-weight: 700; letter-spacing: .02em; padding: 3px 8px; border-radius: 7px;
  background: rgba(255,255,255,.08); color: #dbe6f3; border: 1px solid rgba(255,255,255,.14);
}
.ld-reward .lr-size.out { opacity: .4; text-decoration: line-through; }
.ld-reward .lr-req {
  display: flex; align-items: flex-start; gap: 5px; margin: 0 0 8px;
  color: #ffd27d; font-size: 11.5px; font-weight: 600; line-height: 1.35;
}
.ld-reward .lr-req .icn { width: 12px; height: 12px; flex: 0 0 auto; margin-top: 1px; }
.ld-reward .lr-meta { color: #8fa3bd; font-size: 12px; line-height: 1.4; margin-bottom: 10px; }

.export-drop .menu-sep { height: 1px; background: var(--border); margin: 4px 0; }
.export-drop button.danger { color: var(--bad); }

/* per-option stock on a reward */
.rw-opts { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 2px; }
.rw-opt {
  font-size: 11.5px; font-weight: 600; padding: 3px 7px; border-radius: 7px;
  background: var(--bg); color: var(--ink-2); border: 1px solid var(--border);
}
.rw-opt b { color: var(--ink); }
.rw-opt.out { opacity: .5; text-decoration: line-through; }

/* an exclusive reward's qualifications */
.rw-req {
  display: flex; align-items: flex-start; gap: 5px;
  margin: 8px 0 2px; padding: 6px 8px; border-radius: 8px;
  background: #fdf1d8; color: #8a6206; font-size: 12px; font-weight: 600; line-height: 1.35;
}
.rw-req .icn { width: 13px; height: 13px; flex: 0 0 auto; margin-top: 1px; }

.eval-tick { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12px; color: var(--ink-2); }
.eval-tick input { accent-color: var(--brand); cursor: pointer; }
.eval-tick input:disabled { cursor: default; }

/* public officer directory */
.ld-ogroup { color: #8fa3bd; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin: 22px 0 12px; }
.ld-officers { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.ld-officer {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.11);
  border-radius: 16px; padding: 16px 12px; text-align: center;
  transition: transform .18s, border-color .18s;
}
.ld-officer:hover { transform: translateY(-3px); border-color: rgba(62,224,192,.4); }
.ld-officer .lo-face {
  width: 72px; height: 72px; margin: 0 auto 10px; border-radius: 50%; overflow: hidden;
  background: rgba(255,255,255,.07); display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.14);
}
.ld-officer .lo-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ld-officer .lo-face svg { width: 30px; height: 30px; color: rgba(255,255,255,.3); }
.ld-officer .lo-name { color: #fff; font-size: 14px; font-weight: 700; line-height: 1.3; }
.ld-officer .lo-pos { color: #3ee0c0; font-size: 12px; font-weight: 600; margin-top: 3px; }
.ld-officer .lo-sub { color: #8fa3bd; font-size: 11.5px; margin-top: 2px; }

/* grid/list view toggle (dark landing) */
.ld-viewtoggle { display: flex; gap: 2px; flex: 0 0 auto; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 11px; padding: 3px; }
.ld-vt { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: none; background: none; color: #9db2cf; border-radius: 8px; cursor: pointer; }
.ld-vt svg { width: 17px; height: 17px; }
.ld-vt:hover { color: #dbe6f3; }
.ld-vt.active { background: rgba(255,255,255,.14); color: #fff; }

/* rewards list view */
.ld-rlist { display: flex; flex-direction: column; gap: 10px; }
.ld-rrow { display: flex; align-items: center; gap: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.11); border-radius: 12px; padding: 12px 16px; }
.ld-rrow.out { opacity: .6; }
.ld-rrow .lrr-ic { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 10px; overflow: hidden; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; }
.ld-rrow .lrr-ic img { width: 100%; height: 100%; object-fit: cover; }
.ld-rrow .lrr-ic svg { width: 22px; height: 22px; color: rgba(255,255,255,.4); }
.ld-rrow .lrr-main { flex: 1; min-width: 0; }
.ld-rrow .lrr-name { color: #fff; font-weight: 700; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-rrow .lrr-meta { color: #8fa3bd; font-size: 12px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-rrow .lrr-pts { flex: 0 0 auto; background: linear-gradient(135deg, #3ee0c0, #2f78d6); color: #04121f; font-weight: 800; font-size: 12.5px; padding: 4px 10px; border-radius: 999px; }

.ld-foot {
  text-align: center; padding: 26px 5vw 34px;
  border-top: 1px solid rgba(255,255,255,.07);
  color: #5b6c86; font-size: 12.5px; line-height: 1.7;
}

/* ============ Avatar photos ============ */

.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

/* ============ Extra mobile pass ============ */

@media (max-width: 640px) {
  .stat-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat { padding: 12px 13px; }
  .stat .s-value { font-size: 20px; }
  .page-head .actions { width: 100%; }
  .page-head .actions .btn { flex: 1 1 auto; justify-content: center; }
  .modal-backdrop { padding: 12px 8px; }
  .modal-body { padding: 15px; }
  .modal-foot { flex-wrap: wrap; }
  .modal-foot .btn { flex: 1 1 auto; justify-content: center; }
  .toolbar { padding: 12px; gap: 8px; }
  .toolbar .select { flex: 1 1 40%; min-width: 0; }
  .toolbar .search-wrap { flex: 1 1 100%; max-width: none; }
  .tile-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 11px; }
  .idcard { transform-origin: top center; }
  /* minmax(0,1fr): without it the card's fixed 340px sets the track's minimum and
     pushes the whole hero — headline, copy, buttons — past a narrow viewport, where
     .ld-hero-band's overflow:hidden then cuts it off */
  .ld-hero { grid-template-columns: minmax(0, 1fr); padding: 30px 5vw 34px; gap: 26px; }
  /* the card floats on phones too — smaller, with a gentler tilt so the card and
     its shadow stay inside the viewport */
  .ld-card-float {
    min-width: 0; perspective: 680px;
    --tilt: 13deg; --tilt-2: 9.5deg; --lift: 10px; --card-scale: .82;
  }
  .ld-card-float .idcard { transform-origin: center; box-shadow: 0 18px 38px rgba(0,0,0,.5); }
  /* compact sticky header on phones */
  .ld-nav { padding: 11px 5vw; gap: 10px; }
  .ld-nav .t2 { display: none; }
  .ld-signin .lbl { display: none; }
  .ld-signin { padding: 9px 11px; }
  .ld-tabs { width: auto; max-width: calc(100% - 8vw); margin: 0 4vw 12px; gap: 3px; }
  .ld-tab { flex: 0 0 auto; padding: 10px 13px; font-size: 12.5px; gap: 5px; }
  .ld-tab svg { display: none; }   /* labels only on phones; the pill scrolls if they overflow */
}

@media (max-width: 380px) {
  .ld-card-float { --card-scale: .72; --lift: 8px; }
  .ld-section { padding: 22px 5vw 34px; }
  .ld-section h2 { font-size: 20px; }
  .ss-panel { padding: 24px 18px 26px; }
  .ss-form { gap: 8px; }
  .ss-form .btn { flex: 1 1 auto; justify-content: center; }
  #view { padding: 13px; }
  .dash-lists { gap: 12px; }
  .settings-tabs .tab { padding: 9px 10px; font-size: 12.5px; }
  /* momentum scroll + clear the scroll affordance on wide tables */
  .table-wrap { -webkit-overflow-scrolling: touch; }
  /* bigger touch targets for fingers */
  .icon-btn { width: 36px; height: 36px; }
  .batch-bar { gap: 7px; }
  .batch-bar .btn { flex: 1 1 auto; }
  .user-drop { min-width: 210px; }
}

/* Never let a page scroll sideways as a whole — inner .table-wrap panels
   still scroll on their own. Guards against any accidental overflow. */
#view { overflow-x: clip; }

/* print dialog — pick whole sheets rather than ticking one card at a time */
.pr-range { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pr-slider { display: flex; align-items: center; gap: 8px; flex: 1 1 220px; min-width: 200px; }
.pr-slider > span { font-size: 12px; color: var(--ink-2); font-weight: 650; }
.pr-slider input[type="range"] { flex: 1; accent-color: var(--brand); min-width: 90px; }
.pr-slider output {
  min-width: 2.2em; text-align: center; font-weight: 700; font-size: 12.5px;
  padding: 2px 7px; border-radius: 7px; background: var(--brand-light); color: var(--brand-deep);
}
@media (max-width: 560px) { .pr-slider { flex-basis: 100%; } }

/* landing — missions on offer */
.ld-missions { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.ld-mission {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 15px 16px; border-radius: 14px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .09);
}
.ld-mission.closed { opacity: .5; }
.ld-mpts {
  flex: 0 0 auto; min-width: 62px; text-align: center;
  font-size: 22px; font-weight: 800; line-height: 1.05;
  color: #3ee0c0;            /* same accent the reward point costs use */
}
.ld-mpts span { display: block; font-size: 10.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.ld-mbody { min-width: 0; }
.ld-mname { font-weight: 700; font-size: 14.5px; line-height: 1.35; }
.ld-mdesc { font-size: 12.5px; opacity: .78; margin-top: 3px; line-height: 1.5; }
.ld-mmeta { display: flex; align-items: center; gap: 5px; font-size: 11.5px; opacity: .7; margin-top: 7px; }
.ld-mmeta .icn { width: 13px; height: 13px; }
.ss-hreason .icn { width: 13px; height: 13px; margin-right: 5px; vertical-align: -2px; color: var(--good); }

/* landing — past events tucked behind a disclosure */
.ld-past { margin-top: 18px; }
.ld-past > summary {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  list-style: none; user-select: none;
  padding: 9px 14px; border-radius: 11px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .09);
  color: #cbd5e1; font-size: 13px; font-weight: 650;
  transition: border-color .15s ease, background-color .15s ease;
}
.ld-past > summary::-webkit-details-marker { display: none; }
.ld-past > summary:hover { background: rgba(255, 255, 255, .07); border-color: rgba(62, 224, 192, .32); }
.ld-past > summary .icn { width: 15px; height: 15px; opacity: .75; }
.ld-past > summary .n {
  font-size: 11.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px;
  background: rgba(62, 224, 192, .14); color: #3ee0c0;
}
.ld-past[open] > summary { margin-bottom: 14px; border-color: rgba(62, 224, 192, .28); }