/* pp-squad-skin.css -- the 2026 look over the Squad phone app (2026-11-01).
   Alec: "overhaul the rest of tools, squad, and ops visually to match my universal new look i have on packages/home page".
   Source of the look: Tools/site/pp-app-skin.css (v1..v21), cut down for a phone.
   CSS ONLY. No markup, script or behaviour changes: this file is linked LAST in index.html's <head> (after the inline <style>)
   so it wins on cascade order; Squad's own CSS variables are re-pointed first, then component rules are added where the
   variables are not enough. Delete the <link> and the app is exactly as it was.
   Phone rules of thumb baked in: no per-card animation (one slow page aurora only, GPU transform, off for reduced-motion),
   no backdrop blur on scrolling content, status colours stay (restyled as glass tints), 44px touch targets, high-contrast text
   for sunlight. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

/* ============ 1. tokens: Squad's own variables, re-pointed ============ */
:root {
  --bg-primary: #070b14;
  --bg-card: rgba(255,255,255,0.04);
  --bg-input: rgba(255,255,255,0.055);
  --bg-elevated: rgba(255,255,255,0.07);
  --bg-overlay: rgba(6,10,20,0.88);
  --border-subtle: rgba(255,255,255,0.10);
  --border-visible: rgba(90,170,255,0.30);

  --brand: #00C9FF;
  --brand-deep: #4B9CD3;
  --brand-hover: #3fd6ff;
  --brand-glow: rgba(0,201,255,0.30);
  --brand-soft: rgba(0,201,255,0.13);
  --brand-faint: rgba(0,201,255,0.06);

  --text-primary: #ffffff;
  --text-secondary: rgba(255,255,255,0.74);
  --text-tertiary: rgba(255,255,255,0.58);
  --text-hint: rgba(255,255,255,0.42);

  /* site-skin names, used by the rules below */
  --sk-font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sk-eyebrow: #7fb3e6;
  --sk-hair: rgba(90,170,255,0.28);
  --sk-glass: rgba(255,255,255,0.05);
  --sk-glass-line: rgba(255,255,255,0.12);
  --sk-ink: #dbe9ff;
  --sk-panel:
    radial-gradient(480px 330px at 100% 0%, rgba(0,201,255,.13), transparent 70%),
    radial-gradient(420px 300px at 0% 100%, rgba(75,156,211,.12), transparent 70%),
    linear-gradient(170deg, #152130 0%, #0e1521 55%, #0b1017 100%);
  --sk-sheen: linear-gradient(135deg, #ffffff 0%, #ffffff 52%, #bfe3ff 100%);
  --sk-blue-glass: linear-gradient(180deg, rgba(125,195,255,0.24) 0%, rgba(80,150,240,0.13) 55%, rgba(40,90,170,0.16) 100%);
  --sk-blue-glass-hover: linear-gradient(180deg, rgba(140,205,255,0.32) 0%, rgba(90,165,250,0.18) 55%, rgba(50,105,190,0.2) 100%);
}

/* ============ 2. type: Montserrat everywhere ============
   Squad hard-codes Barlow Condensed / DM Sans in hundreds of rules (and some inline styles), so one !important rule re-types the
   whole app in one place. The course-builder editor keeps its monospace. */
html, body, body *, body *::before, body *::after { font-family: var(--sk-font) !important; }
.cb-body-editor textarea, code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; }
body { -webkit-font-smoothing: antialiased; }

/* ============ 3. page: navy-to-black, four-pool aurora (one slow drift, no pulsing), faint column grid ============ */
html { background: #06080b; }
body { background: #081020; }
body::before {
  inset: -8% -6%;
  background:
    radial-gradient(38% 30% at 22% 18%, rgba(75,156,211,0.17), transparent 68%),
    radial-gradient(32% 28% at 78% 32%, rgba(75,156,211,0.14), transparent 66%),
    radial-gradient(40% 34% at 62% 76%, rgba(0,201,255,0.09), transparent 70%),
    radial-gradient(30% 26% at 14% 82%, rgba(75,156,211,0.10), transparent 68%),   /* 2026-11-01 (Alec): the packages page's own strengths, darker than the first pass */
    linear-gradient(180deg, #0a1324 0%, #081020 28%, #070b14 60%, #06080b 100%);
  animation: pp-aurora 44s ease-in-out infinite;
  will-change: transform;
}
@keyframes pp-aurora {
  0%   { transform: translate3d(-3%,-2%,0) scale(1.06); }
  33%  { transform: translate3d(2%,1.5%,0) scale(1.12); }
  66%  { transform: translate3d(-1%,2.5%,0) scale(1.08); }
  100% { transform: translate3d(-3%,-2%,0) scale(1.06); }
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 16.6667% 100%;
  -webkit-mask-image: linear-gradient(transparent, #000 18% 82%, transparent);
  mask-image: linear-gradient(transparent, #000 18% 82%, transparent);
}
@media (prefers-reduced-motion: reduce) { body::before { animation: none; will-change: auto; } }

/* login sits on its own full-screen layer: let the aurora through instead of a flat slab */
.login-wrap { background: transparent; }
.login-brand .login-mark { font-weight: 800; letter-spacing: .32em; font-size: 30px; text-shadow: none; padding-left: .32em;
  background: var(--sk-sheen); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.login-title { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.login-sub { color: var(--text-secondary); }
.login-foot { color: var(--text-tertiary); }

/* ============ 4. panels = the packages page add-on card (static: no per-card animation on a phone) ============ */
.dash-card, .card, .card.elev, .card.brand, .status-card, .week-tile, .leaderboard, .detail-card, .login-card,
.cert-status-card, .collapsible, .od-kpi, .ml-sum, .shadow-review, .oc-summary-card, .oc-sheet {
  background: var(--sk-panel);
  border: 1px solid var(--sk-hair);
  border-radius: 20px;
  box-shadow: 0 18px 44px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.09);
}
.login-card { backdrop-filter: none; box-shadow: 0 30px 70px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.10); }
.collapsible { border-radius: 16px; }
.dash-card.tappable:active { border-color: rgba(0,201,255,0.6); }
/* Home dashboard income tiles keep their lit-edge: cyan top line like the dialer's fact tiles */
.od-kpi { position: relative; overflow: hidden; }
.od-kpi::before { content: ""; position: absolute; left: 18%; right: 18%; top: -1px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(0,201,255,0), rgba(0,201,255,.7), rgba(0,201,255,0)); }
.od-kpi.od-focus { border-color: rgba(0,201,255,0.55); box-shadow: 0 18px 44px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.09); }

/* the owner-sheet (Edit Appointment) is a panel that also has to scroll: keep its gradient, add the same hairline */
.oc-sheet { border-radius: 24px 24px 0 0; border-bottom: 0; box-shadow: 0 -14px 44px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.10); }
@media (min-width: 900px) { .oc-sheet { border-radius: 22px; border-bottom: 1px solid var(--sk-hair); } }
.oc-grabber { background: rgba(255,255,255,0.28); }

/* ============ 5. inner tiles and rows: translucent glass so the panel's gradient shows through ============ */
.sched-appt-card, .shoot-list-item, .module-card, .ref-tile, .checklist-item, .path-step, .service-card, .pace-card, .pace-card.v3,
.oc-pkg-card, .mistake-type-card, .week-day, .ml-day, .ach-tile, .dq, .oc-alc-row, .oc-info-banner, .mistake-card, .wk-row,
.sched-shadow-row, .cb-cat, .cb-q, .oc-add-panel, .oc-pkg-picker, .cb-preview, .module-edit-box, .earn-cell, .wk-grade, .an-instr {
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.11);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.dash-card .sched-appt-card, .dash-card .dash-card, .card .card { background: rgba(255,255,255,0.045); }
.sched-appt-card, .shoot-list-item, .module-card, .ref-tile, .checklist-item, .path-step { border-radius: 16px; }
.week-day { background: rgba(255,255,255,0.045); }
.week-day.has-shoots .wd-num { color: #fff; }
.week-day.today, .week-day.selected, .week-day.today.selected {
  border-color: rgba(0,201,255,0.55);
  background: linear-gradient(180deg, rgba(0,201,255,0.16), rgba(0,201,255,0.05));
  box-shadow: inset 0 0 0 1px rgba(0,201,255,0.18), inset 0 1px 0 rgba(255,255,255,0.08);
}
.week-day.selected:not(.today) { border-color: rgba(0,201,255,0.38); }
.shoot-list-item:active, .sched-appt-card:active { border-color: rgba(0,201,255,0.55); }
.shoot-list-item.has-mistake { border-color: rgba(245,158,11,0.40); }
.shoot-list-item.has-revisit { border-color: rgba(239,68,68,0.45); }
.pace-card.v3 { border-color: rgba(255,255,255,0.11); background: rgba(255,255,255,0.045); }
.pace-card.v3.beating, .pace-card.beating { border-color: rgba(0,201,255,0.5); background: linear-gradient(180deg, rgba(0,201,255,0.10), rgba(255,255,255,0.03)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); }
.ach-tile.unlocked { background: linear-gradient(155deg, rgba(0,201,255,0.16), rgba(0,201,255,0.05)); border-color: rgba(0,201,255,0.35); }
.earn-cell { background: linear-gradient(160deg, rgba(52,199,89,0.12), rgba(52,199,89,0.03)); border-color: rgba(52,199,89,0.30); }

/* selected states: a lit glass tint with a blue hairline, never a solid fill */
.service-card.selected, .mistake-type-card.selected, .oc-pkg-card.selected, .sched-shadow-row.selected, .la-chip.selected, .oc-tab.active, .sched-tab.active, .vp-pill.active, .mcal-day.selected {
  border-color: rgba(0,201,255,0.6);
  background: linear-gradient(160deg, rgba(0,201,255,0.20), rgba(0,201,255,0.07));
  box-shadow: inset 0 0 0 1px rgba(0,201,255,0.18), 0 6px 20px rgba(0,120,255,0.12);
}
.oc-pkg-card.v3.selected { box-shadow: inset 0 0 0 1px rgba(0,201,255,0.30), 0 6px 20px rgba(0,120,255,0.14); }
.oc-summary-card { border-color: rgba(0,201,255,0.5); }

/* ============ 6. eyebrows: 11px uppercase, tracked, #7fb3e6 ============ */
.dash-card-title, .section-label, .form-label, .stat-label, .detail-label, .greeting-eyebrow, .od-kpi-label, .week-list-label,
.module-cat-label, .oc-diff-title, .cb-cat-name, .cert-tier-label, .dq-k, .progress-meta, .week-hours-label, .oc-add-cat,
.wk-sec-title, .oc-summary-eyebrow, .module-edit-box label, .wk-grade-label {
  font-family: var(--sk-font) !important; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--sk-eyebrow);
}
.dash-card-title, .section-label, .module-cat-label, .wk-sec-title, .oc-diff-title, .cb-cat-name, .cert-tier-label { font-size: 11px; }
.form-label, .detail-label, .dq-k, .progress-meta, .oc-add-cat, .week-hours-label, .oc-summary-eyebrow, .module-edit-box label { font-size: 10.5px; }
.od-kpi-label { font-size: 10.5px; letter-spacing: .12em; }
.stat-label { font-size: 9.5px; letter-spacing: .08em; line-height: 1.35; }
.status-card.four .stat-label, .status-card.home-stats .stat-label { font-size: 8.5px; letter-spacing: .05em; }
.progress-meta strong { color: #fff; }
.greeting-eyebrow { font-size: 11px; letter-spacing: .16em; color: var(--sk-eyebrow); }
.greeting-date { font-size: 11px; letter-spacing: .12em; color: var(--text-tertiary); font-weight: 600; }
.dash-card-link { font-weight: 700; letter-spacing: .1em; font-size: 10.5px; color: #8fd0ff; }
.sub-title { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: #fff; }
.tiny { letter-spacing: .02em; }
.muted { color: var(--text-secondary); }

/* headline type */
.greeting-name { font-weight: 800; font-size: 28px; letter-spacing: -.025em; line-height: 1.1;
  background: var(--sk-sheen); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; padding-bottom: .08em; width: max-content; max-width: 100%; }
.h1 { font-weight: 800; letter-spacing: -.025em; font-size: 26px; }
.h2 { font-weight: 700; letter-spacing: -.01em; font-size: 17px; }
.oc-section-title, .oc-section-title.oc-h2 { font-weight: 700; letter-spacing: -.01em; }
.oc-section-title.oc-h2 { font-size: 20px; }
@media (min-width: 900px) { .greeting-name { font-size: 40px; } }

/* sheened headline numbers (white to #bfe3ff, like the site's prices); status-coloured numbers keep their colour */
.stat-num, .od-kpi-val:not(.od-good):not(.od-warn), .week-hours, .sli-duration, .ml-sum b, .od-util-pct, .od-q-grid b:not(.good):not(.warn),
.pace-card .pace-time, .oc-summary-price, .oc-mt-amt, .oc-add-price, .oc-pkg-price, .dash-onboard-count, .train-stat, .la-pkg-name,
.oc-earnings-amount, .missed-card .missed-pay {
  font-weight: 800; letter-spacing: -.02em;
  background: var(--sk-sheen); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; padding-bottom: .06em;
}
.od-kpi-val { font-size: 30px; }
.stat-num { font-size: 22px; }
.status-card.four .stat-num { font-size: 18px; }
.week-hours { font-size: 28px; }
.pace-card .pace-time { font-size: 20px; }
.od-kpi-val.od-good, .od-q-grid b.good, .earn-val, .oc-earn-pos .oc-earnings-amount { color: #5fe39b; -webkit-text-fill-color: #5fe39b; background: none; }
.od-kpi-val.od-warn, .od-q-grid b.warn { color: #ffc766; -webkit-text-fill-color: #ffc766; background: none; }
.earn-val, .od-kpi-val, .od-q-grid b, .ml-sum b { font-weight: 800; letter-spacing: -.02em; }
.oc-earn-flat .oc-earnings-amount, .oc-earn-neg .oc-earnings-amount { background: none; color: var(--text-tertiary); -webkit-text-fill-color: var(--text-tertiary); }
.od-kpi-sub { color: var(--text-secondary); }
.status-stat .stat-label { color: var(--sk-eyebrow); }
.week-day .wd-num { font-weight: 800; }
.week-day .wd-day { color: var(--sk-eyebrow); font-weight: 700; letter-spacing: .1em; font-size: 11px; }
.week-day .wd-shoots { letter-spacing: .04em; font-size: 9.5px; font-weight: 600; }
.week-day.today .wd-day { color: #fff; }
.sched-appt-when, .sched-appt-time { font-weight: 700; letter-spacing: 0; color: #8fd0ff; }
.sched-appt-lead .sched-appt-when { font-size: 13px; }
.sli-pkg { color: #8fd0ff; letter-spacing: .12em; }
.la-pkg-name { font-size: 18px; }
.lb-row.you { background: rgba(0,201,255,0.12); }

/* ============ 7. buttons: blue-glass for actions, glass pills for the small ones; no solid cyan, no black ============ */
.save-btn, .login-btn, .next-category-btn, .cb-btn.primary, .wk-open, .oc-actions .save-btn, .tp-preview-actions .tp-send, .big-action.primary,
.sq-update-bar button, .va-banner button {
  background: var(--sk-blue-glass) !important;
  color: #eaf4ff !important;
  border: 1px solid rgba(110,185,255,0.42) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 6px 18px rgba(20,70,160,0.22);
  text-shadow: none;
}
.save-btn:not(:disabled):hover, .login-btn:not(:disabled):hover, .next-category-btn:hover, .cb-btn.primary:hover, .wk-open:hover {
  background: var(--sk-blue-glass-hover) !important; border-color: rgba(130,200,255,0.6) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 0 0 1px rgba(90,170,255,0.35), 0 10px 28px rgba(40,120,255,0.24);
}
.save-btn { font-weight: 700; font-size: 13px; letter-spacing: .1em; border-radius: 14px; padding: 16px; min-height: 52px; }
.login-btn { font-weight: 700; font-size: 13px; letter-spacing: .1em; border-radius: 14px; min-height: 52px; }
.login-btn.google-btn { background: var(--sk-blue-glass) !important; letter-spacing: .08em; }
.login-btn.google-btn:not(:disabled):hover { background: var(--sk-blue-glass-hover) !important; }
.oc-actions .save-btn { font-size: 15px; letter-spacing: 0; border-radius: 14px; }
.save-btn.done-btn { background: linear-gradient(180deg, rgba(80,230,150,0.26), rgba(40,170,110,0.14)) !important; border-color: rgba(80,230,150,0.55) !important; color: #d6ffe6 !important; }
/* Start shoot: a glass green so it still reads "go" in sunlight */
.save-btn.la-start-btn { background: linear-gradient(180deg, rgba(80,230,150,0.28), rgba(40,170,110,0.15)) !important; border-color: rgba(80,230,150,0.58) !important; color: #e2ffee !important; }
.save-bar { background: linear-gradient(180deg, transparent, rgba(7,11,20,0.94) 34%); }

.big-action { border-radius: 18px; background: var(--sk-panel); border: 1px solid var(--sk-hair); box-shadow: inset 0 1px 0 rgba(255,255,255,0.09); }
.big-action.primary { background: var(--sk-blue-glass) !important; }
.big-action.primary .ba-label, .big-action.primary .ba-icon { color: #eaf4ff; }
.big-action .ba-label { letter-spacing: .08em; font-weight: 700; font-size: 13px; }
.big-action .ba-sub { letter-spacing: 0; color: var(--text-secondary); }

/* small action pills */
.cb-btn, .path-btn, .oc-mini-btn, .oc-cancel-btn, .oc-add-btn, .ri-take-btn, .tp-btn, .sched-link-btn, .cb-tb {
  border-radius: 999px;
}
.cb-btn, .cb-tb { background: rgba(255,255,255,0.06); border: 1px solid rgba(90,170,255,0.30); color: var(--sk-ink); font-weight: 700; letter-spacing: .06em; }
.cb-btn:hover, .cb-tb:hover { color: #fff; border-color: rgba(130,200,255,0.55); box-shadow: 0 0 0 1px rgba(90,170,255,0.30), 0 8px 24px rgba(40,120,255,0.16); }
.cb-btn.danger { color: #ff9aa2; border-color: rgba(255,90,99,0.4); }
.cb-btn svg, .cb-tb svg { color: inherit; }
.path-btn { background: rgba(255,255,255,0.06); border: 1px solid rgba(90,170,255,0.30); color: var(--sk-ink); font-weight: 700; letter-spacing: .08em; min-height: 40px; }
.oc-cancel-btn { background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.16) !important; color: var(--sk-ink) !important; font-size: 15px; letter-spacing: 0; border-radius: 14px; }
.oc-add-btn { background: rgba(0,201,255,0.07); border: 1px dashed rgba(90,170,255,0.45); color: #8fd0ff; border-radius: 14px; letter-spacing: .1em; }
.ri-take-btn, .tp-btn { background: rgba(0,201,255,0.07); border: 1px dashed rgba(90,170,255,0.45); color: var(--sk-ink); border-radius: 16px; letter-spacing: .08em; }
.tp-btn { color: #8fd0ff; }
.ri-gallery-btn { background: rgba(255,255,255,0.04); border-style: solid; }
.tp-preview-actions .tp-send svg { stroke: #eaf4ff; }
.oc-link, .sched-link-btn, .dash-card-link, .ri-library-link:active { color: #8fd0ff; }
.oc-mini-btn { background: rgba(255,255,255,0.06); border-color: rgba(90,170,255,0.30); color: var(--sk-ink); }
.wk-open { border-radius: 12px; font-weight: 700; letter-spacing: .06em; height: 38px; }
.sq-update-bar { background: rgba(10,19,36,0.97); border: 1px solid var(--sk-hair); box-shadow: 0 14px 40px rgba(0,0,0,0.5); }
.sq-update-bar button { border-radius: 999px; height: 38px; }
.va-banner { background: linear-gradient(180deg, rgba(14,34,56,0.98), rgba(10,22,40,0.98)); border-bottom-color: var(--sk-hair); }
.va-banner button { border-radius: 999px; }

/* header buttons and back arrows: glass circles, tap area stretched to 44px without moving the layout */
.app-header .header-action, .sub-header .back-btn, .oc-close, .oc-back-btn {
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); color: var(--sk-ink); position: relative;
}
.app-header .header-action::after, .sub-header .back-btn::after, .oc-close::after, .oc-back-btn::after, .cb-icon-btn::after, .sl-week-nav::after {
  content: ""; position: absolute; inset: -6px;
}
.cb-icon-btn, .sl-week-nav { position: relative; }
.app-header .header-action:hover, .sub-header .back-btn:hover { color: #fff; border-color: rgba(130,200,255,0.5); box-shadow: 0 0 0 1px rgba(90,170,255,0.30), 0 8px 24px rgba(40,120,255,0.18); }
.oc-back-btn { background: transparent; border-color: transparent; }

/* headers: a hairline, no solid black band */
.app-header { background: transparent; border-bottom: 0; }
.app-header .brand-mark { font-weight: 800; letter-spacing: .3em; font-size: 18px; color: var(--brand);
  background: var(--sk-sheen); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.sub-header { border-bottom: 1px solid rgba(255,255,255,0.08); }

/* ============ 8. tabs, segmented controls, chips, pills ============ */
.sched-tab, .oc-tab, .la-chip, .vp-pill, .cb-tb {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); color: var(--text-secondary);
}
.sched-tab { min-height: 44px; font-weight: 700; font-size: 11px; letter-spacing: .08em; border-radius: 999px; }
.oc-tab { border-radius: 999px; font-weight: 700; min-height: 44px; }
.sched-tab.active, .oc-tab.active, .la-chip.selected, .vp-pill.active { color: #fff; }
.la-chip { min-height: 40px; border-radius: 999px; font-weight: 600; }
.la-chip.selected svg { color: #8fd0ff; }
.la-chip.none-chip.selected { border-color: rgba(80,230,150,0.55); background: linear-gradient(160deg, rgba(80,230,150,0.20), rgba(80,230,150,0.06)); color: #d6ffe6; box-shadow: inset 0 0 0 1px rgba(80,230,150,0.15); }
.vp-pill { min-height: 44px; height: 44px; }
.vp-pill.active .vp-badge { background: rgba(0,201,255,0.28); color: #fff; box-shadow: inset 0 0 0 1px rgba(0,201,255,0.5); }
.vp-pill .vp-badge { background: rgba(255,255,255,0.10); }

.week-shoot-chips .chip { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.16); color: var(--text-secondary); font-weight: 600; letter-spacing: .06em; }
/* tier chips: glass tints of the tier colour (were solid fills with dark text) */
.week-shoot-chips .chip.pkg { font-weight: 700; border: 1px solid transparent; color: #fff; }
.chip.pkg.tier-bronze   { background: rgba(230,162,60,0.20);  border-color: rgba(230,162,60,0.55) !important;  color: #ffd08a !important; }
.chip.pkg.tier-silver   { background: rgba(0,201,255,0.16);   border-color: rgba(0,201,255,0.5) !important;    color: #aeeaff !important; }
.chip.pkg.tier-gold     { background: rgba(245,201,58,0.18);  border-color: rgba(245,201,58,0.55) !important;  color: #ffe58a !important; }
.chip.pkg.tier-platinum { background: rgba(185,201,214,0.18); border-color: rgba(185,201,214,0.5) !important;  color: #e6eff6 !important; }
.chip.pkg.tier-sapphire { background: rgba(60,130,255,0.20);  border-color: rgba(110,170,255,0.6) !important;  color: #c4dcff !important; }
.chip.pkg.tier-diamond  { background: rgba(223,247,255,0.16); border-color: rgba(223,247,255,0.55) !important; color: #f2fcff !important; }
.chip.pkg.tier-luxury   { background: rgba(224,182,74,0.18);  border-color: rgba(224,182,74,0.55) !important;  color: #ffe19a !important; }
.chip.pkg.tier-none     { background: rgba(0,201,255,0.10); border-color: rgba(0,201,255,0.3) !important; color: #8fd0ff !important; }

/* status pills: glass tints, meaning unchanged (green done / blue in progress / amber review / red revisit) */
.mod-status, .cert-pill, .mistake-badge, .mtc-sev, .cb-draft-badge, .pending-tag, .lg-badge, .od-badge, .shadow-tag, .prog-best, .work-pill, .oc-status-pill {
  border: 1px solid rgba(255,255,255,0.12);
}
.mod-status.done, .cert-pill.certified, .mistake-badge.clean { background: rgba(52,199,89,0.14); border-color: rgba(52,199,89,0.45); color: #7be3a0; }
.mod-status.progress, .cert-pill.progress { background: rgba(0,201,255,0.13); border-color: rgba(0,201,255,0.4); color: #8fd8ff; }
.mod-status.locked, .cert-pill.notstarted, .cert-pill { background: rgba(255,255,255,0.05); color: var(--text-tertiary); }
.cert-pill.review, .mistake-badge.minor, .mistake-badge.major, .mtc-sev.major { background: rgba(245,158,11,0.14); border-color: rgba(245,158,11,0.45); color: #ffc766; }
.mistake-badge.revisit, .mtc-sev.revisit { background: rgba(239,68,68,0.14); border-color: rgba(239,68,68,0.45); color: #ff9aa2; }
.pace-card .pace-delta.faster, .week-tile .week-delta.up { background: rgba(52,199,89,0.14); color: #7be3a0; }
.pace-card .pace-delta.slower, .week-tile .week-delta.down { background: rgba(239,68,68,0.14); color: #ff9aa2; }
.sync-bar { background: rgba(7,11,20,0.97); border-bottom-color: rgba(255,255,255,0.10); font-weight: 700; letter-spacing: .1em; }
.sync-bar .sync-chip { background: rgba(0,201,255,0.25); color: #fff; box-shadow: inset 0 0 0 1px rgba(0,201,255,0.5); }
.sync-bar.failed .sync-chip { background: rgba(239,68,68,0.3); color: #fff; box-shadow: inset 0 0 0 1px rgba(239,68,68,0.55); }
.oc-warn { border-radius: 14px; background: rgba(255,184,77,0.10); }

/* small solid-cyan marks become glass tints with a light glyph: counts, checks, numbered steps, info dots */
.mcal-count { background: rgba(0,201,255,0.26); color: #fff; box-shadow: inset 0 0 0 1px rgba(0,201,255,0.5); }
.mcal-count.none { background: transparent; box-shadow: none; }
.sched-shadow-row.selected .sched-shadow-check, .checklist-item.done .check-circle, .addon-item.selected .addon-checkbox, .oc-pkg-check, .cb-mod.selected .cb-mod-num {
  background: rgba(0,201,255,0.30); border-color: rgba(0,201,255,0.7); color: #fff;
}
.oc-info-icon { background: rgba(0,201,255,0.22); color: #fff; box-shadow: inset 0 0 0 1px rgba(0,201,255,0.5); }
.cb-switch input:checked + .cb-track { background: rgba(0,201,255,0.35); border-color: rgba(0,201,255,0.7); }
.cb-switch input:checked + .cb-track::after { background: #fff; }
.cb-switch .cb-track { background: rgba(255,255,255,0.08); }
.cb-mod.selected { background: rgba(0,201,255,0.12); border-color: rgba(0,201,255,0.4); }
.next-category-btn { border-radius: 14px; letter-spacing: .1em; }

/* progress bars: blue gradient with a soft lit edge (data, so they stay lit; track is glass) */
.progress-bar, .train-bar, .cat-progress-track, .ml-prog, .ri-progress-bar, .week-bar { background: rgba(255,255,255,0.08); }
.progress-bar .progress-fill, .train-bar .train-bar-fill, .cat-progress-fill, .ml-prog i, .ri-progress-bar > div { background: linear-gradient(90deg, #4B9CD3, #00C9FF); box-shadow: 0 0 10px rgba(0,201,255,0.45); }
.week-bar-fill { background: linear-gradient(180deg, #4B9CD3, rgba(0,201,255,0.7)); }
.week-bar.today .week-bar-fill { background: linear-gradient(180deg, #00C9FF, #4B9CD3); box-shadow: 0 0 12px rgba(0,201,255,0.35); }
.train-ring .ring-track { stroke: rgba(255,255,255,0.10); }
.train-ring .ring-fill { stroke: #00C9FF; }

/* ============ 9. inputs: glass, 14px corners, a blue focus ring ============ */
.form-input, .form-textarea, .form-date, .form-time, .login-input, .oc-add-search, .ri-note, .module-edit-box textarea, .sn-textarea {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.13); border-radius: 14px; color: #fff;
}
.form-input:focus, .form-textarea:focus, .form-date:focus, .form-time:focus, .login-input:focus {
  border-color: rgba(0,201,255,0.6); background: rgba(255,255,255,0.07); box-shadow: 0 0 0 3px rgba(0,201,255,0.16);
}
.ri-note { border-radius: 0; border: 0; border-top: 1px solid rgba(255,255,255,0.10); background: transparent; }
.ri-note:focus { background: rgba(0,201,255,0.06); box-shadow: none; }
.form-input::placeholder, .form-textarea::placeholder, .login-input::placeholder, .ri-note::placeholder { color: rgba(255,255,255,0.45); }
select, select.form-input { color: #fff; }
select option, .cb-field select.form-input option { background: #0b0f15; color: #fff; }
input[type=checkbox], input[type=radio], input[type=range] { accent-color: #00C9FF; }

/* ============ 10. navigation: the bottom bar is a glass toolbar with lit pills ============ */
.bottom-nav {
  background: rgba(8,14,26,0.94); border-top: 1px solid rgba(90,170,255,0.22);
  box-shadow: 0 -10px 30px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05);
}
.bottom-nav .nav-item { border-radius: 14px; color: var(--text-tertiary); min-height: 50px; }
.bottom-nav .nav-item .nav-label { font-weight: 700; font-size: 9px; letter-spacing: .06em; }
.bottom-nav .nav-item.active {
  color: #fff; background: linear-gradient(180deg, rgba(0,201,255,0.18), rgba(0,201,255,0.06));
  box-shadow: inset 0 0 0 1px rgba(0,201,255,0.38);
}
.bottom-nav .nav-item.active svg { color: #8fd8ff; }
@media (min-width: 900px) {
  .bottom-nav { background: linear-gradient(180deg, #0c1626 0%, #09111f 55%, #070d18 100%); border-right: 1px solid var(--sk-hair); border-top: 0; box-shadow: none; }
  .bottom-nav .nav-item .nav-label { font-size: 15px; font-weight: 600; letter-spacing: 0; }
  .bottom-nav .nav-item:hover { background: rgba(255,255,255,0.05); }
  .bottom-nav .nav-item.active { background: linear-gradient(180deg, rgba(0,201,255,0.18), rgba(0,201,255,0.06)); border-color: rgba(0,201,255,0.4); box-shadow: inset 0 0 0 1px rgba(0,201,255,0.18); }
}

/* ============ 11. rows, lists, small content ============ */
.sidenav-item.current, .oc-add-item:active { background: rgba(0,201,255,0.10); }
.sidenav-item:hover { background: rgba(255,255,255,0.05); }
.lb-row + .lb-row { border-top-color: rgba(255,255,255,0.08); }
.oc-mirror-total, .oc-review-totals, .module-sidenav, .ri-sent-head, .week-quip { border-color: rgba(255,255,255,0.10); }
.oc-divider, .oc-summary-divider { background: rgba(255,255,255,0.10); }
.oc-sheet-head { border-bottom-color: rgba(255,255,255,0.10); }
.oc-diff-row.qty .oc-diff-sign { color: #8fd0ff; }
.week-quip strong, .progress-meta strong { color: #fff; }
.module-content-body li::marker { color: #8fd0ff; }
.oc-sheet-head .oc-status-pill { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.16); }
.oc-status-pill { background: rgba(0,201,255,0.08); border-color: rgba(0,201,255,0.3); }
.oc-status-dot { background: #00C9FF; box-shadow: 0 0 8px rgba(0,201,255,0.6); }
.oc-tier-sapphire { background: rgba(60,130,255,0.18); color: #c4dcff; }
.an-instr { border-left: 3px solid rgba(0,201,255,0.7); border-radius: 12px; }
.pace-circle { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.20); }
.pace-circle.has { border-color: rgba(0,201,255,0.6); color: #8fd8ff; }
.pace-gem, .oc-pkg-cube { filter: drop-shadow(0 0 12px rgba(0,201,255,0.18)); }
.prog-bar { fill: rgba(0,201,255,0.35); }
.prog-bar.now { fill: #00C9FF; }
.od-dot { box-shadow: 0 0 8px var(--success); }
.sqcam-done { background: var(--sk-blue-glass); color: #eaf4ff; border: 1px solid rgba(110,185,255,0.45); }

/* Google Places dropdown */
.pac-container { background: rgba(10,19,36,0.98) !important; border: 1px solid var(--sk-hair) !important; border-radius: 14px !important; }
.pac-item:hover, .pac-item-selected, .pac-item.pac-item-selected { background: rgba(0,201,255,0.12) !important; }

/* toast + overlays */
.toast { background: rgba(12,22,40,0.97); border: 1px solid rgba(0,201,255,0.5); border-radius: 14px; font-weight: 600; letter-spacing: 0; box-shadow: 0 14px 40px rgba(0,0,0,0.5); }
.success-circle { background: var(--sk-blue-glass); border: 1px solid rgba(110,185,255,0.5); color: #eaf4ff; box-shadow: 0 0 60px rgba(0,201,255,0.25); }
.success-overlay, .wk-lb { background: rgba(5,9,18,0.94); }

/* ============ 12. scrollbars (desktop WebKit) ============ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ============ 13. Montserrat runs wider than Barlow Condensed: tighten the few tight spots ============ */
.bottom-nav .nav-item .nav-label { white-space: nowrap; }
.sched-appt-addr, .sli-addr, .tc-addr { letter-spacing: -.005em; }
.week-shoot-chips .chip { font-size: 9px; padding: 4px 9px; }
.cb-btn { font-size: 10.5px; padding: 9px 12px; }
.chip, .pill, .tag, .badge { letter-spacing: .04em; }

/* ============ 14. fit pass (first phone renders): Montserrat is wider, so the tight rows get explicit room ============ */
.dash-card-title { font-size: 10.5px; letter-spacing: .1em; }
.section-label, .module-cat-label, .wk-sec-title, .cb-cat-name, .cert-tier-label { letter-spacing: .12em; }
.form-label, .detail-label, .dq-k, .progress-meta, .oc-add-cat, .week-hours-label { letter-spacing: .1em; font-size: 10px; }
.sub-title { font-size: 11.5px; letter-spacing: .1em; min-width: 0; }
.la-header-date { font-size: 10px; letter-spacing: .06em; font-weight: 600; text-align: right; line-height: 1.3; white-space: normal; max-width: 38%; }
.bottom-nav { background: rgba(8,14,26,0.975); }
.bottom-nav .nav-item .nav-label { font-size: 8.5px; letter-spacing: .03em; }
.bottom-nav .nav-item { padding-left: 2px; padding-right: 2px; }

/* Edit Appointment header: title, address and the thumbnail share one row */
.oc-sheet-head .oc-head-title { font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.oc-sheet-head .oc-address { font-size: 16px; font-weight: 600; letter-spacing: -.01em; overflow-wrap: anywhere; }
.oc-sheet-head .oc-appt-date { font-size: 13px; }
.oc-prop-thumb { width: 104px; height: 64px; }
.oc-head-text { min-width: 0; }
.oc-sheet-head .oc-status-text { font-size: 13px; font-weight: 600; }
.oc-sheet-head .oc-status-pill { padding: 7px 12px; }
.oc-section-title.oc-h2 { font-size: 18px; letter-spacing: -.015em; }
.oc-pkg-card.v3 .oc-pkg-name { font-size: 12.5px; letter-spacing: -.02em; }
.oc-pkg-card.v3 .oc-pkg-price { font-size: 12px; }
.oc-tab { font-size: 14px; }

/* Log This Shoot: the three action tiles are glass pills with room for their labels */
.la-action {
  min-height: 46px; padding: 10px 6px; gap: 6px; border-radius: 999px; text-align: center;
  background: var(--sk-blue-glass); border: 1px solid rgba(110,185,255,0.42); color: #eaf4ff;
  font-weight: 700; font-size: 10.5px; letter-spacing: .04em; line-height: 1.15;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}
.la-action svg { width: 15px; height: 15px; color: #8fd8ff; }
.la-action.disabled { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.14); color: var(--text-tertiary); box-shadow: none; }
.la-action.disabled svg { color: var(--text-tertiary); }
.la-pkg-name { font-size: 16px; letter-spacing: -.015em; white-space: normal; overflow: visible; }
.la-section-hint { font-size: 12px; }
.oc-mini-btn { position: relative; letter-spacing: .06em; }
.oc-mini-btn::after { content: ""; position: absolute; inset: -9px -4px; }
.oc-cancel-btn { background: rgba(255,255,255,0.09) !important; border: 1px solid rgba(90,170,255,0.32) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.10); }
.sub-title { font-size: 11px; letter-spacing: .07em; }
.la-header-date { max-width: 34%; }

/* ============ 15. second pass: tiles and inputs are blue-tinted glass (never grey), and the classes the first pass missed ============ */
.sched-appt-card, .shoot-list-item, .module-card, .ref-tile, .checklist-item, .path-step, .service-card, .pace-card, .pace-card.v3,
.oc-pkg-card, .mistake-type-card, .ml-day, .ach-tile, .dq, .oc-alc-row, .oc-info-banner, .mistake-card, .wk-row,
.sched-shadow-row, .cb-cat, .cb-q, .oc-add-panel, .oc-pkg-picker, .cb-preview, .module-edit-box, .wk-grade, .la-chip, .la-breakdown-grid > div {
  background: linear-gradient(180deg, rgba(110,175,255,0.10) 0%, rgba(255,255,255,0.035) 100%);
  border-color: rgba(90,170,255,0.22);
}
.week-day { background: linear-gradient(180deg, rgba(110,175,255,0.10) 0%, rgba(255,255,255,0.03) 100%); border-color: rgba(90,170,255,0.20); }
.week-day.today, .week-day.selected, .week-day.today.selected { background: linear-gradient(180deg, rgba(0,201,255,0.20), rgba(0,201,255,0.06)); }
.dash-card .sched-appt-card, .dash-card .dash-card, .card .card { background: linear-gradient(180deg, rgba(110,175,255,0.10) 0%, rgba(255,255,255,0.035) 100%); }
.service-card.selected, .mistake-type-card.selected, .oc-pkg-card.selected, .sched-shadow-row.selected, .la-chip.selected, .oc-tab.active, .sched-tab.active, .vp-pill.active, .mcal-day.selected {
  border-color: rgba(0,201,255,0.6); background: linear-gradient(160deg, rgba(0,201,255,0.22), rgba(0,201,255,0.07));
}
.mistake-card.revisit { border-left-color: #ff6b75; } .mistake-card.major { border-left-color: #ffc766; }
.form-input, .form-textarea, .form-date, .form-time, .login-input, .oc-add-search, .module-edit-box textarea, .sn-textarea, .la-input, input[type=text], input[type=number], input[type=time], input[type=date], input[type=search], textarea {
  background: rgba(120,180,255,0.07); border-color: rgba(90,170,255,0.26); color: #fff;
}
.form-input:focus, .form-textarea:focus, .login-input:focus, input[type=text]:focus, input[type=number]:focus, textarea:focus { border-color: rgba(0,201,255,0.65); background: rgba(120,180,255,0.10); box-shadow: 0 0 0 3px rgba(0,201,255,0.16); }
.cb-switch .cb-track, .cb-icon-btn, .cb-tb { background: rgba(120,180,255,0.08); }
.oc-qty, .oc-stepper { background: rgba(120,180,255,0.08); }
.la-breakdown-big { font-weight: 800; letter-spacing: -.02em; background: var(--sk-sheen); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.la-breakdown-big span { -webkit-text-fill-color: var(--text-tertiary); color: var(--text-tertiary); font-weight: 600; letter-spacing: 0; }
.la-breakdown-grid b { font-weight: 800; letter-spacing: -.02em; }
.la-time-tag { border-radius: 999px; background: rgba(245,158,11,0.14); border: 1px solid rgba(245,158,11,0.4); color: #ffc766; font-weight: 700; letter-spacing: .06em; }
.placeholder-banner { background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.45); color: #ffc766; border-radius: 14px; }
.card strong[style], .dash-card strong[style] { color: #8fd0ff !important; }
.la-breakdown-grid > div { background: none; border: 0; }
.mistake-card .mtc-sev { padding: 3px 10px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); color: var(--text-secondary); }
.mistake-card .mtc-sev.major { background: rgba(245,158,11,0.14); border-color: rgba(245,158,11,0.45); color: #ffc766; }
.mistake-card .mtc-sev.revisit { background: rgba(239,68,68,0.14); border-color: rgba(239,68,68,0.45); color: #ff9aa2; }
.mistake-card-type { letter-spacing: .08em; }
.dash-card-title { font-size: 10px; letter-spacing: .09em; }

/* 320px phones (iPhone SE 1st gen / small Androids): Montserrat needs a little less tracking in the 4-up and 2-up rows */
.ach-tile { min-width: 0; }
.ach-tile .ach-name { font-size: 8.5px; letter-spacing: 0; overflow-wrap: anywhere; font-weight: 700; }
.ach-tile .ach-icon { font-size: 16px; letter-spacing: -.02em; }
.sched-mode-row .save-btn { min-width: 0; padding-left: 8px; padding-right: 8px; letter-spacing: .07em; }
@media (max-width: 340px) {
  .save-btn { letter-spacing: .06em; font-size: 12px; }
  .week-day .wd-shoots { font-size: 9px; letter-spacing: .02em; }
}
@media (min-width: 900px) {
  .bottom-nav .nav-item .nav-label { font-size: 15px; letter-spacing: 0; font-weight: 600; }
  .bottom-nav .nav-item { padding-left: 14px; padding-right: 14px; }
  .dash-card-title { font-size: 11px; letter-spacing: .1em; }
}