/* Set Calculator — Styles
   © 2025 Greyed Out LTD. All rights reserved. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --glass: rgba(255,255,255,0.52);
  --glass-border: rgba(255,255,255,0.82);
  --glass-input: rgba(255,255,255,0.42);
  --glass-input-focus: rgba(255,255,255,0.72);
  --glass-deep: rgba(255,255,255,0.28);
  --text:  #1c1c1e;
  --text2: #48484a;
  --text3: #8e8e93;
  --shadow: 0 4px 24px rgba(0,0,0,0.07), 0 1px 4px rgba(0,0,0,0.05);
  --shadow-card: 0 8px 32px rgba(0,0,0,0.09), 0 1.5px 4px rgba(0,0,0,0.06);
  --radius: 22px; --radius-sm: 18px; --radius-xs: 14px;
  --accent: #5e5ce6; --accent-dim: rgba(94,92,230,0.12); --accent-border: rgba(94,92,230,0.25);
  --green: #34c759; --green-dim: rgba(52,199,89,0.12);
  --amber: #ff9500; --amber-dim: rgba(255,149,0,0.12);
  --orange: #ff6b00; --orange-dim: rgba(255,107,0,0.12);
  --red: #ff3b30; --red-dim: rgba(255,59,48,0.12);
  --warn-dim: rgba(255,149,0,0.10);
  /* Surface colours used by named elements */
  --surface: #f2f2f7;
  --surface-bg: #e4e4ea;
  --surface-bg-rgb: 228,228,234;
  --surface-card: #f2f2f7;
  --surface-input-solid: #f2f2f7;
  --border-subtle: rgba(0,0,0,0.08);
  --border-light: rgba(0,0,0,0.05);
  --border-row: rgba(0,0,0,0.06);
  --inset-top-shadow: inset 0 1px 3px rgba(0,0,0,0.04);
  --nav-bg: rgba(228,228,234,0.88);
}

/* ══════════════════════════════════════
   DARK MODE — [data-theme="dark"]
══════════════════════════════════════ */
[data-theme="dark"] {
  --glass:            rgba(38,38,42,0.72);
  --glass-border:     rgba(255,255,255,0.10);
  --glass-input:      rgba(255,255,255,0.07);
  --glass-input-focus:rgba(255,255,255,0.13);
  --glass-deep:       rgba(255,255,255,0.05);
  --text:  #f2f2f7;
  --text2: #ebebf0;
  --text3: #8e8e93;
  --shadow: 0 4px 24px rgba(0,0,0,0.35), 0 1px 4px rgba(0,0,0,0.25);
  --shadow-card: 0 8px 32px rgba(0,0,0,0.4), 0 1.5px 4px rgba(0,0,0,0.3);
  --accent: #7b7af4; --accent-dim: rgba(123,122,244,0.18); --accent-border: rgba(123,122,244,0.35);
  --green: #30d158; --green-dim: rgba(48,209,88,0.15);
  --amber: #ffd60a; --amber-dim: rgba(255,214,10,0.15);
  --orange: #ff9f0a; --orange-dim: rgba(255,159,10,0.15);
  --red: #ff453a; --red-dim: rgba(255,69,58,0.15);
  --warn-dim: rgba(255,214,10,0.12);
  --surface: #1c1c1e;
  --surface-bg: #0f0f10;
  --surface-bg-rgb: 15,15,16;
  --surface-card: #2c2c2e;
  --surface-input-solid: #2c2c2e;
  --border-subtle: rgba(255,255,255,0.08);
  --border-light: rgba(255,255,255,0.05);
  --border-row: rgba(255,255,255,0.06);
  --inset-top-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
  --nav-bg: rgba(18,18,20,0.92);
}

/* Dark mode body + background */
[data-theme="dark"] body {
  background: var(--surface-bg);
  background-image:
    radial-gradient(ellipse 70% 55% at 15% 10%, rgba(123,122,244,0.10) 0%, transparent 55%),
    radial-gradient(ellipse 50% 45% at 88% 85%, rgba(48,209,88,0.06) 0%, transparent 50%),
    radial-gradient(ellipse 40% 35% at 75% 15%, rgba(255,159,10,0.04) 0%, transparent 45%);
  color: var(--text);
}

/* Surfaces that hardcode #f2f2f7 or #e4e4ea */
[data-theme="dark"] .cal-confirm-sheet,
[data-theme="dark"] .save-sheet,
[data-theme="dark"] .cal-share-sheet,
[data-theme="dark"] .install-steps,
[data-theme="dark"] #whatsNewSheet,
[data-theme="dark"] #whatsNewSheet > div {
  background: var(--surface-card) !important;
}
[data-theme="dark"] .cal-sheet-body,
[data-theme="dark"] .cal-confirm-title,
[data-theme="dark"] .cal-confirm-sub,
[data-theme="dark"] .cal-sheet-title { color: var(--text); }

/* Modals */
[data-theme="dark"] #mjEditModal > div {
  background: var(--surface-card) !important;
  border-color: var(--border-subtle) !important;
}

/* Inputs and selects everywhere */
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: var(--glass-input) !important;
  color: var(--text) !important;
  border-color: var(--glass-border) !important;
  color-scheme: dark;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: var(--text3) !important; }
[data-theme="dark"] select option { background: #2c2c2e; color: #f2f2f7; }

/* Nav bar */
[data-theme="dark"] .bottom-nav {
  background: var(--nav-bg) !important;
  border-top-color: var(--border-subtle) !important;
}

/* Calendar header */
[data-theme="dark"] .cal-header {
  background: rgba(var(--surface-bg-rgb),0.85) !important;
}

/* Glass cards and role list */
[data-theme="dark"] .glass-card,
[data-theme="dark"] .role-list,
[data-theme="dark"] .custom-role-card {
  background: var(--glass) !important;
  border-color: var(--glass-border) !important;
}

/* Metrics, segments, bars */
[data-theme="dark"] .metric,
[data-theme="dark"] .str-seg,
[data-theme="dark"] .cam-card,
[data-theme="dark"] .bd-table,
[data-theme="dark"] .total-bar { background: var(--glass) !important; }

/* Toggle rows */
[data-theme="dark"] .toggle-row:hover { background: rgba(255,255,255,0.05) !important; }
[data-theme="dark"] .toggle-row:active { background: rgba(255,255,255,0.08) !important; }

/* Role items */
[data-theme="dark"] .role-item:hover  { background: rgba(123,122,244,0.08) !important; }
[data-theme="dark"] .role-item:active { background: rgba(123,122,244,0.14) !important; }

/* Day result blocks */
[data-theme="dark"] .day-result-header {
  background: rgba(255,255,255,0.04) !important;
  border-bottom-color: var(--border-subtle) !important;
}
[data-theme="dark"] .day-result-block { border-color: var(--border-subtle) !important; }

/* Turnaround cards */
[data-theme="dark"] .sd-ta-ok   { background: rgba(48,209,88,0.08)  !important; border-color: rgba(48,209,88,0.2)   !important; }
[data-theme="dark"] .sd-ta-warn { background: rgba(255,69,58,0.08)   !important; border-color: rgba(255,69,58,0.2)   !important; }

/* Calendar cells */
[data-theme="dark"] .cal-day-cell { background: rgba(255,255,255,0.03) !important; }
[data-theme="dark"] .cal-day-cell.today { background: rgba(123,122,244,0.15) !important; }
[data-theme="dark"] .cal-day-cell.other-month { opacity: 0.4; }

/* Cal sheets and overlays */
[data-theme="dark"] .cal-sheet-overlay { background: rgba(0,0,0,0.7) !important; }
[data-theme="dark"] .cal-colour-row button { border-color: rgba(255,255,255,0.15) !important; }

/* What's New sheet header */
[data-theme="dark"] #whatsNewSheet > div:first-of-type {
  background: var(--surface-card) !important;
  border-bottom-color: var(--border-subtle) !important;
}

/* Splash screen version text */
[data-theme="dark"] .splash-version,
[data-theme="dark"] .rp-sub,
[data-theme="dark"] .rp-title { color: var(--text); }

/* Splash secondary buttons */
[data-theme="dark"] .splash-install-btn {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.14) !important;
  color: var(--text2) !important;
}

/* Section labels */
[data-theme="dark"] .section-label { color: var(--text3) !important; }

/* Back button */
[data-theme="dark"] .back-btn { color: var(--accent) !important; }

/* Custom type toggle */
[data-theme="dark"] .custom-type-toggle { background: rgba(255,255,255,0.08) !important; }
[data-theme="dark"] .ctt-btn { color: var(--text3) !important; }
[data-theme="dark"] .ctt-active { background: var(--surface-card) !important; color: var(--text) !important; }

/* Shoot day blocks */
[data-theme="dark"] .sd-day-block { background: var(--glass) !important; border-color: var(--glass-border) !important; }
[data-theme="dark"] .sd-day-count-card { background: var(--glass) !important; }

/* Invoice/results */
[data-theme="dark"] .inv-row-header { background: rgba(255,255,255,0.06) !important; }
[data-theme="dark"] .bd-row:hover { background: rgba(255,255,255,0.04) !important; }

/* Nav badge */
[data-theme="dark"] .nav-item { color: var(--text3); }
[data-theme="dark"] .nav-item.active { color: var(--accent); }

/* Role picker rg-badge */
[data-theme="dark"] .rg-badge { background: rgba(255,255,255,0.08) !important; color: var(--text3) !important; }

/* Job cards */
[data-theme="dark"] .crewjobs-list .glass-card,
[data-theme="dark"] .myjobs-list .glass-card { background: var(--glass) !important; }

/* On-badge (overnight) */
[data-theme="dark"] .on-badge { background: rgba(255,159,10,0.18) !important; color: var(--amber) !important; }

/* ── Payment status picker buttons ── */
.pay-status-btn {
  padding: 8px 10px; border-radius: 10px;
  border: 1.5px solid var(--border-subtle);
  background: none; font-size: 13px; font-weight: 600;
  font-family: inherit; color: var(--text3); cursor: pointer;
  transition: all 0.15s; text-align: center;
}
.pay-status-btn:active { transform: scale(0.95); }
.pay-status-btn.active-unpaid    { background: rgba(0,0,0,0.06);       color: var(--text);    border-color: rgba(0,0,0,0.15); }
.pay-status-btn.active-invoiced  { background: rgba(94,92,230,0.12);   color: var(--accent);  border-color: var(--accent); }
.pay-status-btn.active-submitted { background: rgba(255,149,0,0.12);   color: #7a4200;        border-color: #ff9500; }
.pay-status-btn.active-paid      { background: rgba(52,199,89,0.13);   color: #1a6b2a;        border-color: #34c759; }
[data-theme="dark"] .pay-status-btn { border-color: var(--border-subtle); color: var(--text3); }
[data-theme="dark"] .pay-status-btn.active-unpaid    { background: rgba(255,255,255,0.07); color: var(--text2);   border-color: rgba(255,255,255,0.2); }
[data-theme="dark"] .pay-status-btn.active-invoiced  { background: rgba(123,122,244,0.18); color: var(--accent);  border-color: var(--accent); }
[data-theme="dark"] .pay-status-btn.active-submitted { background: rgba(255,159,10,0.15);  color: #ffd60a;        border-color: #ffd60a; }
[data-theme="dark"] .pay-status-btn.active-paid      { background: rgba(48,209,88,0.15);   color: #30d158;        border-color: #30d158; }

/* ── Payment status badges ── */
.pay-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.03em;
  padding: 2px 8px; border-radius: 6px;
  white-space: nowrap; flex-shrink: 0;
}
.pay-badge-paid     { background: rgba(52,199,89,0.13);  color: #1a6b2a; }
.pay-badge-invoiced { background: rgba(94,92,230,0.12);  color: var(--accent); }
.pay-badge-submitted{ background: rgba(255,149,0,0.13);  color: #7a4200; }
.pay-badge-unpaid   { background: rgba(0,0,0,0.06);      color: var(--text3); }
.pay-badge-overdue  { background: rgba(255,59,48,0.13);  color: #c0392b; }
[data-theme="dark"] .pay-badge-paid      { background: rgba(48,209,88,0.15);  color: #30d158; }
[data-theme="dark"] .pay-badge-invoiced  { background: rgba(123,122,244,0.18); color: var(--accent); }
[data-theme="dark"] .pay-badge-submitted { background: rgba(255,159,10,0.15); color: #ffd60a; }
[data-theme="dark"] .pay-badge-unpaid    { background: rgba(255,255,255,0.07); color: var(--text3); }
[data-theme="dark"] .pay-badge-overdue   { background: rgba(255,69,58,0.18);  color: #ff453a; }

/* ── Income payment breakdown row ── */
.cal-payment-row {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; gap: 5px;
}
.cal-payment-item {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px;
}
.cal-payment-label { color: var(--text3); font-weight: 500; display: flex; align-items: center; gap: 6px; }
.cal-payment-val   { font-weight: 700; color: var(--text); }
.cal-payment-val.paid     { color: #34c759; }
.cal-payment-val.overdue  { color: #ff3b30; }
.cal-payment-val.pending  { color: var(--accent); }
[data-theme="dark"] .cal-payment-val.paid    { color: #30d158; }
[data-theme="dark"] .cal-payment-val.overdue { color: #ff453a; }

/* ── Calendar event quick-look popover ── */
.cal-popover {
  position: fixed; z-index: 2000;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.10);
  min-width: 190px; max-width: 240px; overflow: hidden;
  animation: popoverIn 0.18s cubic-bezier(0.34,1.56,0.64,1) both;
  transform-origin: top left;
}
@keyframes popoverIn {
  from { opacity:0; transform:scale(0.82); }
  to   { opacity:1; transform:scale(1); }
}
.cal-popover-header { padding: 11px 14px 8px; border-bottom: 1px solid var(--border-subtle); }
.cal-popover-prod { font-size:13px; font-weight:700; color:var(--text); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px; }
.cal-popover-meta { font-size:11px; color:var(--text3); margin-top:2px; display:flex; align-items:center; gap:5px; }
.cal-popover-dot  { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.cal-popover-actions { display:flex; flex-direction:column; }
.cal-popover-btn {
  display:flex; align-items:center; gap:10px;
  padding:11px 14px; background:none; border:none;
  font-size:14px; font-weight:600; font-family:inherit;
  color:var(--text); cursor:pointer; text-align:left; width:100%;
  border-bottom:1px solid var(--border-subtle);
  -webkit-tap-highlight-color:transparent; transition:background 0.12s;
}
.cal-popover-btn:last-child { border-bottom:none; }
.cal-popover-btn:active { background:var(--accent-dim); }
.cal-popover-btn svg { flex-shrink:0; }
.cal-popover-overlay { position:fixed; inset:0; z-index:1999; background:transparent; }

/* ══════════════════════════════════════
   MY INVOICES SCREEN
══════════════════════════════════════ */
.inv-screen-header {
  padding: max(16px, env(safe-area-inset-top, 16px)) 20px 0;
  display: flex; align-items: center; justify-content: space-between;
}
.inv-screen-title { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); }
.inv-screen-sub   { font-size: 12px; color: var(--text3); font-weight: 500; margin-top: 1px; }

/* Summary bar */
.inv-summary-bar {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 8px; margin: 16px 16px 0;
}
.inv-sum-card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 14px; padding: 12px 14px;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.inv-sum-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text3); margin-bottom: 4px; }
.inv-sum-val   { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); }
.inv-sum-val.green  { color: var(--green); }
.inv-sum-val.red    { color: var(--red); }
.inv-sum-val.accent { color: var(--accent); }

/* Filter tabs */
.inv-filter-tabs {
  display: flex; gap: 6px;
  margin: 14px 16px 0; overflow-x: auto;
  scrollbar-width: none; -ms-overflow-style: none;
}
.inv-filter-tabs::-webkit-scrollbar { display: none; }
.inv-filter-tab {
  flex-shrink: 0; padding: 6px 14px;
  border-radius: 100px; border: 1px solid var(--border-subtle);
  background: none; font-size: 13px; font-weight: 600;
  font-family: inherit; color: var(--text3); cursor: pointer;
  transition: all 0.15s; white-space: nowrap;
}
.inv-filter-tab.active {
  background: var(--accent); color: white;
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(94,92,230,0.30);
}

/* Invoice card */
.inv-card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 16px; padding: 14px 16px;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  margin-bottom: 10px; cursor: pointer;
  position: relative; overflow: hidden;
  transition: transform 0.15s;
}
.inv-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; border-radius: 4px 0 0 4px;
}
.inv-card.status-paid::before     { background: var(--green); }
.inv-card.status-sent::before     { background: var(--accent); }
.inv-card.status-submitted::before{ background: var(--amber); }
.inv-card.status-overdue::before  { background: var(--red); }
.inv-card.status-draft::before    { background: var(--text3); }
.inv-card:active { transform: scale(0.98); }

.inv-card-top    { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.inv-card-prod   { font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.3; }
.inv-card-amount { font-size: 16px; font-weight: 800; color: var(--text); letter-spacing: -0.01em; flex-shrink: 0; }
.inv-card-meta   { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.inv-card-role   { font-size: 12px; color: var(--text3); }
.inv-card-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-light); }
.inv-card-date   { font-size: 12px; color: var(--text3); }
.inv-card-actions { display: flex; gap: 6px; }
.inv-card-btn {
  width: 28px; height: 28px; border-radius: 8px;
  border: none; background: var(--glass-deep);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text3); transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.inv-card-btn:active { transform: scale(0.88); }
.inv-card-btn.pay  { color: var(--green);  background: var(--green-dim); }
.inv-card-btn.edit { color: var(--accent); background: var(--accent-dim); }
.inv-card-btn.del  { color: var(--red);    background: var(--red-dim); }

/* Empty state */
.inv-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 60px 24px; text-align: center;
}
.inv-empty-icon { font-size: 44px; margin-bottom: 14px; opacity: 0.5; }
.inv-empty-title { font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.inv-empty-sub   { font-size: 13px; color: var(--text3); line-height: 1.5; }

/* Add invoice sheet */
.inv-add-fab {
  position: fixed;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  right: 20px;
  width: 52px; height: 52px;
  background: linear-gradient(160deg, rgba(120,118,255,0.95) 0%, rgba(80,78,220,0.98) 100%);
  color: white; border: none; border-radius: 50%;
  font-size: 26px; font-weight: 300; line-height: 1;
  cursor: pointer; z-index: 50;
  box-shadow: 0 4px 20px rgba(94,92,230,0.45), inset 0 1px 0 rgba(255,255,255,0.35);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.18s;
}
.inv-add-fab:active { transform: scale(0.92); }

/* Dark mode */
[data-theme="dark"] .inv-card { background: var(--glass) !important; border-color: var(--glass-border) !important; }
[data-theme="dark"] .inv-sum-card { background: var(--glass) !important; border-color: var(--glass-border) !important; }
[data-theme="dark"] .inv-filter-tab { border-color: var(--border-subtle) !important; }

/* ══════════════════════════════════════
   EXPENSES FEATURE
══════════════════════════════════════ */
.exp-sheet-overlay {
  position:fixed;inset:0;z-index:3000;
  background:rgba(0,0,0,0.55);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:none;
}
.exp-sheet-overlay.open { display:block; }
.exp-sheet {
  position:fixed;bottom:0;left:0;right:0;
  background:var(--surface-card,#f2f2f7);
  border-radius:28px 28px 0 0;
  width:100%;max-width:580px;margin:0 auto;
  max-height:92vh;overflow-y:auto;
  box-shadow:0 -8px 40px rgba(0,0,0,0.2);
  padding-bottom:max(24px,env(safe-area-inset-bottom,24px));
  z-index:3100;
  transform:translateY(100%);
  transition:transform 0.38s cubic-bezier(0.16,1,0.3,1);
}
.exp-sheet.open { transform:translateY(0); }
[data-theme="dark"] .exp-sheet { background:var(--surface-card) !important; }
.exp-sheet-handle { display:flex;justify-content:center;padding:12px 0 0 }
.exp-sheet-handle-bar { width:40px;height:4px;background:rgba(0,0,0,0.15);border-radius:2px }
[data-theme="dark"] .exp-sheet-handle-bar { background:rgba(255,255,255,0.15); }
.exp-receipt-thumb {
  width:72px;height:72px;border-radius:10px;
  object-fit:cover;border:2px solid var(--border-subtle);cursor:pointer;
}
.exp-item-card {
  background:var(--glass);border:1px solid var(--glass-border);
  border-radius:14px;padding:12px 14px;margin-bottom:8px;
}
[data-theme="dark"] .exp-item-card { background:var(--glass) !important;border-color:var(--glass-border) !important; }
.exp-status-badge {
  display:inline-flex;align-items:center;
  font-size:10px;font-weight:700;letter-spacing:0.04em;
  padding:2px 8px;border-radius:6px;white-space:nowrap;
}
.exp-badge-pending  { background:rgba(255,149,0,0.13);color:#7a4200; }
.exp-badge-approved { background:rgba(52,199,89,0.13);color:#1a6b2a; }
.exp-badge-rejected { background:rgba(255,59,48,0.13);color:#c0392b; }
[data-theme="dark"] .exp-badge-pending  { background:rgba(255,159,10,0.18);color:#ffd60a; }
[data-theme="dark"] .exp-badge-approved { background:rgba(48,209,88,0.15);color:#30d158; }
[data-theme="dark"] .exp-badge-rejected { background:rgba(255,69,58,0.18);color:#ff453a; }
.exp-cat-pill {
  display:inline-block;font-size:11px;font-weight:600;
  padding:2px 8px;border-radius:20px;
  background:rgba(94,92,230,0.1);color:var(--accent);
}
.exp-upload-zone {
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;border:2px dashed rgba(94,92,230,0.3);border-radius:12px;
  padding:20px;cursor:pointer;transition:background 0.15s;
  background:rgba(94,92,230,0.03);
}
.exp-upload-zone:active { background:rgba(94,92,230,0.08); }
.exp-pm-summary {
  background:rgba(94,92,230,0.06);border:1px solid rgba(94,92,230,0.15);
  border-radius:12px;padding:12px 14px;margin-bottom:12px;
}
.exp-total-row {
  display:flex;align-items:center;justify-content:space-between;
  padding:7px 0;border-bottom:1px solid var(--border-light);
}
.exp-total-row:last-child { border-bottom:none; }

/* ══════════════════════════════════════
   CREATE INVOICE (GEAR / COMBINED)
══════════════════════════════════════ */
.gi-line {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-bottom: 10px;
  position: relative;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.gi-line-head {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;
}
.gi-line-num {
  font-size: 11px; font-weight: 700; color: var(--text3);
  letter-spacing: 0.05em; text-transform: uppercase;
}
.gi-remove-btn {
  width: 28px; height: 28px; border-radius: 50%; border: none;
  background: var(--red-dim); color: var(--red);
  font-size: 18px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.12s;
}
.gi-remove-btn:active { transform: scale(0.88); }
.gi-add-btn {
  width: 100%; padding: 12px; background: var(--accent-dim);
  border: 1.5px dashed var(--accent-border);
  border-radius: var(--radius-xs); color: var(--accent);
  font-size: 14px; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.gi-add-btn:hover { background: rgba(94,92,230,0.18); }
.gi-add-btn:active { transform: scale(0.98); }
.gi-row3 { display: grid; grid-template-columns: 0.5fr 1fr 1fr; gap: 10px; }
.gi-totals {
  background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: var(--radius); padding: 16px;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.gi-total-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 0; font-size: 14px; color: var(--text2);
}
.gi-total-row.grand {
  font-size: 20px; font-weight: 800; color: var(--text);
  border-top: 1px solid var(--border-subtle); padding-top: 10px; margin-top: 6px;
  letter-spacing: -0.02em;
}
.gi-tax-row {
  display: flex; align-items: center; gap: 8px; padding: 7px 0;
  border-bottom: 1px solid var(--border-light);
}
.gi-tax-row:last-child { border-bottom: none; }
.gi-tax-row input[type="checkbox"] {
  width: 18px; height: 18px; accent-color: var(--accent); flex-shrink: 0;
}
.gi-tax-row label {
  font-size: 13px; color: var(--text); font-weight: 500; flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gi-badge {
  display: inline-flex; align-items: center; font-size: 10px; font-weight: 700;
  letter-spacing: 0.04em; padding: 3px 9px; border-radius: 6px;
}
.gi-badge-gear   { background: rgba(94,92,230,0.10);  color: var(--accent); }
.gi-badge-labour { background: rgba(52,199,89,0.10);  color: var(--green); }
.gi-tab-row { display: flex; gap: 6px; margin-bottom: 16px; }
.gi-tab {
  padding: 8px 16px; border-radius: 100px; border: 1.5px solid rgba(0,0,0,0.1);
  background: rgba(255,255,255,0.6); color: var(--text2);
  font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer;
  transition: all 0.15s; -webkit-tap-highlight-color: transparent;
}
.gi-tab.active {
  background: var(--accent); border-color: var(--accent);
  color: white; box-shadow: 0 3px 12px rgba(94,92,230,0.28);
}
.gi-tab:active { transform: scale(0.95); }
.gi-preview-row {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 8px 0; border-bottom: 1px solid var(--border-light);
  font-size: 13px; gap: 12px;
}
.gi-preview-row:last-child { border-bottom: none; }
.gi-preview-desc { color: var(--text2); flex: 1; }
.gi-preview-amt { color: var(--text); font-weight: 700; text-align: right; min-width: 70px; }
.gi-send-btn {
  width: 100%; padding: 15px; background: var(--accent); color: white;
  font-size: 16px; font-weight: 700; border: none;
  border-radius: var(--radius-xs); cursor: pointer;
  font-family: inherit; transition: all 0.15s;
  box-shadow: 0 4px 16px rgba(94,92,230,0.35);
}
.gi-send-btn:hover { opacity: 0.92; }
.gi-send-btn:active { transform: scale(0.98); }
.gi-send-btn.secondary {
  background: var(--glass); color: var(--text); border: 1px solid var(--glass-border);
  box-shadow: none; margin-top: 8px;
}
.gi-success-overlay {
  position: fixed; inset: 0; z-index: 3000;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  display: none; align-items: center; justify-content: center;
}
.gi-success-overlay.open { display: flex; }
.gi-success-card {
  background: var(--surface-card, #fff); border-radius: var(--radius);
  padding: 40px 32px; text-align: center; max-width: 320px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.18);
}
[data-theme="dark"] .gi-line { background: var(--glass) !important; border-color: var(--glass-border) !important; }
[data-theme="dark"] .gi-totals { background: var(--glass) !important; border-color: var(--glass-border) !important; }
[data-theme="dark"] .gi-tab { border-color: var(--border-subtle); background: rgba(255,255,255,0.06); }
[data-theme="dark"] .gi-tab.active { background: var(--accent); border-color: var(--accent); }
[data-theme="dark"] .gi-success-card { background: var(--surface-card) !important; }

/* Split view */
.gi-tag-row { display:flex; gap:4px; margin-bottom:10px; }
.gi-tag {
  padding:4px 10px; border-radius:20px; font-size:11px; font-weight:700;
  border:1.5px solid transparent; cursor:pointer; font-family:inherit;
  transition:all 0.15s; -webkit-tap-highlight-color:transparent;
}
.gi-tag-gear { background:var(--accent-dim); color:var(--accent); border-color:var(--accent-border); }
.gi-tag-labour { background:var(--green-dim); color:var(--green); border-color:rgba(52,199,89,0.25); }
.gi-tag.inactive { opacity:0.35; background:transparent; border-color:var(--border-subtle); }
.gi-split-cols { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.gi-split-col {
  background:var(--glass); border:1px solid var(--glass-border);
  border-radius:var(--radius-sm); padding:12px; min-height:120px;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.gi-split-col-head {
  font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  margin-bottom:10px; display:flex; align-items:center; gap:6px;
}
.gi-split-item {
  padding:10px 12px; border-radius:10px; margin-bottom:6px; cursor:pointer;
  transition:transform 0.12s, background 0.15s;
  border:1px solid var(--border-subtle);
  background:var(--glass-input);
}
.gi-split-item:active { transform:scale(0.97); }
.gi-split-item-desc { font-size:13px; font-weight:600; color:var(--text); margin-bottom:2px; }
.gi-split-item-amt { font-size:12px; color:var(--text3); }
.gi-split-empty {
  font-size:12px; color:var(--text3); text-align:center; padding:20px 8px;
  font-style:italic;
}
[data-theme="dark"] .gi-split-col { background:var(--glass) !important; border-color:var(--glass-border) !important; }
[data-theme="dark"] .gi-split-item { background:rgba(255,255,255,0.06) !important; border-color:var(--border-subtle) !important; }

/* ── Emergency contact card ── */
.ec-card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-card);
}
.ec-privacy-note {
  display: flex; align-items: flex-start; gap: 8px;
  background: rgba(94,92,230,0.07);
  border: 1px solid var(--accent-border);
  border-radius: 12px; padding: 10px 12px;
  margin-top: 10px; font-size: 12px;
  color: var(--text2); line-height: 1.5;
}
.ec-privacy-note svg { flex-shrink: 0; margin-top: 1px; }

/* ── Crew sheet ── */
.crew-sheet-member {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-row);
}
.crew-sheet-member:last-child { border-bottom: none; }
.crew-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--accent-dim); border: 1.5px solid var(--accent-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; color: var(--accent);
  flex-shrink: 0; text-transform: uppercase;
}
.crew-member-name  { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.3; }
.crew-member-role  { font-size: 12px; color: var(--text3); margin-top: 1px; }
.crew-member-ec    { font-size: 11px; color: var(--text3); margin-top: 3px; display: flex; align-items: center; gap: 4px; }
.crew-status-toggle {
  display: flex; gap: 4px; flex-shrink: 0;
}
.crew-status-btn {
  padding: 5px 10px; border-radius: 8px;
  border: 1.5px solid var(--border-subtle);
  background: none; font-size: 11px; font-weight: 700;
  font-family: inherit; cursor: pointer; transition: all 0.15s;
  color: var(--text3);
}
.crew-status-btn.active-hold    { background: rgba(142,142,147,0.15); color: #636366; border-color: #8e8e93; }
.crew-status-btn.active-booked  { background: rgba(52,199,89,0.13);   color: #1a6b2a;  border-color: #34c759; }
[data-theme="dark"] .crew-status-btn.active-hold   { background: rgba(142,142,147,0.2); color: #aeaeb2; border-color: #636366; }
[data-theme="dark"] .crew-status-btn.active-booked { background: rgba(48,209,88,0.15);  color: #30d158;  border-color: #30d158; }

/* ── AD Tools — Child Timer ── */
.child-timer-card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  padding: 20px 18px 18px;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-card);
  margin-bottom: 14px;
  position: relative;
}
.child-timer-card.expired {
  border-color: rgba(255,59,48,0.5);
  background: rgba(255,59,48,0.05);
}
.child-timer-card.warning {
  border-color: rgba(255,149,0,0.4);
  background: rgba(255,149,0,0.04);
}
.child-timer-ring {
  position: relative;
  width: 90px; height: 90px;
  flex-shrink: 0;
}
.child-timer-ring svg { transform: rotate(-90deg); }
.child-timer-ring .ring-track { fill: none; stroke: var(--border-subtle); stroke-width: 6; }
.child-timer-ring .ring-fill  { fill: none; stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 1s linear, stroke 0.5s; }
.child-timer-time {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800;
  color: var(--text); line-height: 1.1;
}
.child-timer-time .timer-sub { font-size: 8px; font-weight: 600; color: var(--text3); letter-spacing: 0.04em; margin-top: 1px; }
.child-timer-name { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.child-timer-meta { font-size: 12px; color: var(--text3); margin-bottom: 10px; line-height: 1.4; }
.child-timer-btn {
  padding: 10px 16px; border-radius: 12px;
  border: none; font-size: 13px; font-weight: 700;
  font-family: inherit; cursor: pointer; transition: all 0.15s;
}
.child-timer-btn.start  { background: var(--green); color: white; }
.child-timer-btn.stop   { background: rgba(255,59,48,0.12); color: #ff3b30; }
.child-timer-btn.reset  { background: var(--glass); color: var(--text3); border: 1px solid var(--border-subtle); }
@keyframes alarm-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,59,48,0.4); }
  50%      { box-shadow: 0 0 0 12px rgba(255,59,48,0); }
}
.child-timer-card.expired { animation: alarm-pulse 1.2s ease-in-out infinite; }
.ad-age-pill {
  display: inline-block;
  background: rgba(94,92,230,0.12);
  color: var(--accent);
  font-size: 10px; font-weight: 700;
  padding: 3px 8px; border-radius: 6px;
  letter-spacing: 0.04em; text-transform: uppercase;
  margin-bottom: 6px;
}

/* ── Schedule Cross-off ── */
/* ── Schedule PDF Viewer + Cross-off ── */
.sched-pdf-wrap {
  position: relative; width: 100%; margin-bottom: 12px;
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.18);
}
.sched-pdf-canvas { display: block; width: 100%; height: auto; }
.sched-overlay {
  position: absolute; inset: 0;
  cursor: crosshair; touch-action: manipulation;
}
.sched-marker {
  position: absolute; transform: translate(-50%, -50%);
  width: 32px; height: 32px; pointer-events: none;
}
.sched-marker-inner {
  width: 100%; height: 100%;
  background: rgba(255,59,48,0.85);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(255,59,48,0.5);
  font-size: 16px; color: white; font-weight: 900;
  line-height: 1;
}
.sched-marker.removing { animation: sched-pop-out 0.2s ease forwards; }
@keyframes sched-pop-out {
  0%   { transform: translate(-50%,-50%) scale(1); opacity:1; }
  100% { transform: translate(-50%,-50%) scale(0); opacity:0; }
}
.sched-live-dot {
  display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; background: var(--green);
  margin-right: 5px; animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%,100% { opacity: 1; } 50% { opacity: 0.3; }
}

/* ── Paywall / Subscription ── */
.paywall-screen {
  position: fixed; inset: 0; z-index: 4000;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  padding: max(16px, env(safe-area-inset-top, 16px)) 24px max(24px, env(safe-area-inset-bottom, 24px));
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.plan-card {
  width: 100%; max-width: 400px;
  background: var(--glass);
  border: 1.5px solid var(--glass-border);
  border-radius: 20px;
  padding: 22px 20px 20px;
  margin-bottom: 14px;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: all 0.18s;
  position: relative;
}
.plan-card:active { transform: scale(0.98); }
.plan-card.featured {
  border-color: var(--accent);
  background: rgba(94,92,230,0.06);
}
.plan-badge {
  position: absolute; top: -10px; right: 16px;
  background: var(--accent); color: white;
  font-size: 10px; font-weight: 800;
  padding: 3px 10px; border-radius: 8px;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.plan-name { font-size: 20px; font-weight: 800; color: var(--text); margin-bottom: 2px; }
.plan-price { font-size: 32px; font-weight: 900; color: var(--accent); line-height: 1; }
.plan-price span { font-size: 14px; font-weight: 500; color: var(--text3); }
.plan-features { margin-top: 14px; display: flex; flex-direction: column; gap: 7px; }
.plan-feature { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--text2); line-height: 1.4; }
.plan-feature-check { color: var(--green); font-weight: 800; flex-shrink: 0; margin-top: 1px; }
.plan-cta {
  width: 100%; max-width: 400px;
  padding: 16px; border: none; border-radius: 16px;
  font-size: 16px; font-weight: 700; font-family: inherit;
  cursor: pointer; margin-bottom: 10px;
  transition: all 0.15s;
}
.plan-cta.primary { background: var(--accent); color: white; }
.plan-cta.secondary { background: var(--glass); color: var(--text); border: 1px solid var(--glass-border); }

/* Dark toggle switch animation */
html { transition: background 0.3s ease; }
body { transition: background 0.3s ease, color 0.15s ease; }
html {
  height: 100%;
  height: -webkit-fill-available;
  overflow: hidden;
  width: 100%;
  overscroll-behavior: none;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  height: 100%;
  height: -webkit-fill-available;
  width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--surface-bg);
  background-image:
    radial-gradient(ellipse 70% 55% at 15% 10%, rgba(94,92,230,0.08) 0%, transparent 55%),
    radial-gradient(ellipse 50% 45% at 88% 85%, rgba(52,199,89,0.06) 0%, transparent 50%),
    radial-gradient(ellipse 40% 35% at 75% 15%, rgba(255,149,0,0.04) 0%, transparent 45%);
  background-attachment: fixed;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* ══════════════════════════════════════════
   CALENDAR
═══════════════════════════════════════════ */

/* Header */
.cal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: max(16px, env(safe-area-inset-top, 16px)) 16px 10px;
  position: sticky; top: 0;
  background: var(--nav-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 10;
}
.cal-month-label {
  font-size: 18px; font-weight: 700; letter-spacing: -0.02em; color: var(--text);
}
.cal-nav-btn {
  width: 34px; height: 34px; border-radius: 50%; border: none;
  background: var(--glass); backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--accent); transition: all 0.15s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.cal-nav-btn:active { transform: scale(0.9); }

/* Day-of-week row */
.cal-dow-row {
  display: grid; grid-template-columns: repeat(7, 1fr);
  padding: 0 8px; margin-bottom: 2px;
}
.cal-dow {
  text-align: center; font-size: 11px; font-weight: 600;
  color: var(--text3); letter-spacing: 0.04em;
  padding: 4px 0;
}

/* Month grid */
.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  padding: 0 8px;
  row-gap: 2px; overflow: visible; position: relative;
}
.cal-cell {
  position: relative; min-height: 58px;
  display: flex; flex-direction: column; align-items: center;
  padding: 2px 0 4px; overflow: visible;
}
.cal-cell-num {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 500; color: var(--text);
  cursor: pointer; transition: all 0.15s; flex-shrink: 0;
  z-index: 2; position: relative;
}
.cal-cell-num:active { transform: scale(0.88); }
.cal-cell.today .cal-cell-num {
  background: var(--accent); color: white;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(94,92,230,0.35);
}
.cal-cell.selected .cal-cell-num:not(.today-num) {
  background: rgba(94,92,230,0.12); color: var(--accent);
}
.cal-cell.other-month .cal-cell-num { color: var(--text3); opacity: 0.45; }
.cal-cell.selected.today .cal-cell-num { background: var(--accent); }

/* Inline job bar segments inside cells — WeekCal style */
.cal-cell-bars {
  width: 100%; display: flex; flex-direction: column;
  gap: 2px; margin-top: 3px; overflow: visible; position: relative;
}
.cal-bar-seg {
  height: 16px; width: 100%;
  display: flex; align-items: center;
  cursor: pointer; overflow: hidden;
  flex-shrink: 0; position: relative;
}
/* Start of a job — rounded left, show label */
.cal-bar-seg.bar-start {
  border-radius: 4px 0 0 4px;
  overflow: visible; /* label extends beyond this cell */
}
/* Middle of a job — no rounding */
.cal-bar-seg.bar-mid {
  border-radius: 0;
}
/* End of a job — rounded right */
.cal-bar-seg.bar-end {
  border-radius: 0 4px 4px 0;
}
/* Single-day job — fully rounded */
.cal-bar-seg.bar-single {
  border-radius: 4px;
  overflow: visible;
}
/* Label — spans full job width, clipped at job end */
.bar-label {
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  font-size: 9px; font-weight: 700;
  white-space: nowrap; overflow: hidden;
  line-height: 1; letter-spacing: 0.01em;
  pointer-events: none; z-index: 5;
  text-align: center;
  /* max-width and width set in JS per row */
}
/* Mid/end — no text (label shown only on bar-start/bar-single) */
.cal-bar-seg.bar-mid .bar-label,
.cal-bar-seg.bar-end .bar-label {
  display: none;
}
/* Overflow indicator */
.cal-bar-more {
  font-size: 9px; font-weight: 600;
  color: var(--text3); text-align: center;
  margin-top: 1px; line-height: 1;
}
/* Sub-event sections */
.sub-event-section {
  background: rgba(0,0,0,0.04); border-radius: 12px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 8px;
}
.sub-event-row { display: flex; gap: 8px; align-items: flex-end; }
.sub-event-row .field { flex: 1; margin: 0; }
.sub-add-btn {
  background: none; border: 1.5px dashed rgba(0,0,0,0.18);
  border-radius: 8px; padding: 8px 12px;
  font-size: 12px; font-weight: 600; color: var(--text3);
  font-family: inherit; cursor: pointer; width: 100%;
  transition: all 0.15s; text-align: left; margin-top: 2px;
}
.sub-add-btn:hover { border-color: var(--accent); color: var(--accent); }
.sub-remove-btn {
  width: 28px; height: 28px; border-radius: 50%; border: none;
  background: rgba(255,59,48,0.1); color: #ff3b30;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; font-size: 16px; line-height: 1;
  padding: 0; transition: all 0.15s; margin-bottom: 1px;
}
.sub-remove-btn:hover { background: rgba(255,59,48,0.2); }
/* Day-type dot on bars */
.bar-subtype-dot {
  width: 7px; height: 7px; border-radius: 50%;
  position: absolute; top: 2px; right: 3px;
  border: 1.5px solid rgba(255,255,255,0.8);
  pointer-events: none; z-index: 6;
}
.cal-card-actions {
  display: flex; gap: 6px; align-items: flex-start; flex-shrink: 0;
}
.cal-card-btn {
  width: 30px; height: 30px; border-radius: 50%; border: none;
  background: rgba(0,0,0,0.06); color: var(--text3);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; transition: all 0.15s; margin-top: 1px;
  -webkit-tap-highlight-color: transparent;
}
.cal-card-btn:active { transform: scale(0.88); }
.cal-card-btn.share:hover { background: rgba(94,92,230,0.12); color: var(--accent); }
.cal-card-btn.trash:hover { background: rgba(255,59,48,0.12); color: #ff3b30; }
/* Delete confirm sheet */
.cal-confirm-sheet {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--surface-card); border-radius: 20px 20px 0 0;
  z-index: 1100; padding: 0;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
.cal-confirm-sheet.open { transform: translateY(0); }
.cal-confirm-title {
  font-size: 15px; font-weight: 600; text-align: center;
  padding: 20px 24px 4px; color: var(--text);
}
.cal-confirm-sub {
  font-size: 13px; color: var(--text3); text-align: center;
  padding: 0 24px 16px; line-height: 1.4;
}
.cal-confirm-actions {
  display: flex; flex-direction: column; gap: 8px;
  padding: 0 16px calc(16px + env(safe-area-inset-bottom, 16px));
}
.cal-confirm-delete {
  padding: 15px; border-radius: 14px; border: none;
  background: #ff3b30; color: white;
  font-size: 16px; font-weight: 700; font-family: inherit; cursor: pointer;
}
.cal-confirm-cancel {
  padding: 15px; border-radius: 14px; border: none;
  background: rgba(0,0,0,0.08); color: var(--text);
  font-size: 16px; font-weight: 600; font-family: inherit; cursor: pointer;
  margin-bottom: 4px;
}
/* Share sheet */
.cal-share-sheet {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--surface-card); border-radius: 20px 20px 0 0;
  z-index: 1100; padding: 0;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
.cal-share-sheet.open { transform: translateY(0); }
.cal-share-option {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; cursor: pointer;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  transition: background 0.15s; -webkit-tap-highlight-color: transparent;
}
.cal-share-option:last-of-type { border-bottom: none; }
.cal-share-option:active { background: rgba(0,0,0,0.04); }
.cal-share-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cal-share-text .cal-share-name { font-size: 15px; font-weight: 600; color: var(--text); }
.cal-share-text .cal-share-desc { font-size: 12px; color: var(--text3); margin-top: 1px; }
.cal-share-copied {
  font-size: 13px; color: #34c759; font-weight: 600;
  text-align: center; padding: 12px 20px 4px; display: none;
}

/* Detail area */
.cal-detail-area {
  margin: 14px 16px 0; flex: 1;
}
/* Monthly income summary box */
.cal-income-box {
  margin: 12px 16px 0;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 14px 16px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.cal-income-title {
  font-size: 11px; font-weight: 700; color: var(--text3);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.cal-income-row {
  display: flex; justify-content: space-between;
  align-items: center; gap: 8px;
}
.cal-income-cols {
  display: flex; flex: 1; gap: 0;
}
.cal-income-col {
  flex: 1; text-align: center;
  border-right: 1px solid var(--glass-border);
  padding: 0 8px;
}
.cal-income-col:first-child { text-align: left; padding-left: 0; }
.cal-income-col:last-child  { text-align: right; padding-right: 0; border-right: none; }
.cal-income-label {
  font-size: 10px; color: var(--text3); font-weight: 600;
  display: flex; align-items: center; gap: 4px;
  justify-content: inherit; margin-bottom: 3px;
}
.cal-income-val {
  font-size: 17px; font-weight: 800; letter-spacing: -0.02em;
  color: var(--text);
}
.cal-income-val.actual   { color: #34c759; }
.cal-income-val.projected { color: var(--accent); }
.cal-income-val.total    { color: var(--text); }
.cal-income-sub {
  font-size: 10px; color: var(--text3); margin-top: 1px;
}
.cal-detail-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 32px 0;
}
.cal-job-card {
  background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: 14px; padding: 14px 16px;
  margin-bottom: 10px; cursor: pointer;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: transform 0.15s;
  position: relative; overflow: hidden;
}
.cal-job-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; border-radius: 4px 0 0 4px;
}
.cal-job-card:active { transform: scale(0.98); }
.cal-job-prod { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.cal-job-meta { font-size: 12px; color: var(--text3); display: flex; gap: 10px; flex-wrap: wrap; }
.cal-job-meta span { display: flex; align-items: center; gap: 3px; }
.cal-job-dates { font-size: 12px; color: var(--text3); margin-top: 4px; }

/* Add button */
.cal-add-btn {
  position: fixed; bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  right: 20px;
  display: flex; align-items: center; gap: 7px;
  padding: 12px 18px 12px 14px;
  background: linear-gradient(160deg, rgba(120,118,255,0.95) 0%, rgba(80,78,220,0.98) 100%);
  color: white; border: none; border-radius: 100px;
  font-size: 14px; font-weight: 700; font-family: inherit;
  cursor: pointer; z-index: 50;
  box-shadow: 0 4px 20px rgba(94,92,230,0.40), inset 0 1px 0 rgba(255,255,255,0.35);
  transition: all 0.18s;
}
.cal-add-btn:active { transform: scale(0.96); }
/* Hide add button when sheet is open */
.cal-sheet.open ~ * .cal-add-btn,
body.sheet-open .cal-add-btn { opacity: 0; pointer-events: none; }

/* Bottom sheet */
.cal-sheet-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.35);
  z-index: 1050; display: none; backdrop-filter: blur(4px);
}
.cal-sheet-overlay.open { display: block; }
.cal-sheet {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--surface-card); border-radius: 20px 20px 0 0;
  z-index: 1100; padding: 0;
  transform: translateY(100%);
  transition: transform 0.38s cubic-bezier(0.16,1,0.3,1);
  max-height: 92vh; display: flex; flex-direction: column;
}
.cal-sheet.open { transform: translateY(0); }
.cal-sheet-handle {
  width: 36px; height: 4px; border-radius: 2px;
  background: rgba(0,0,0,0.18); margin: 12px auto 8px;
}
.cal-sheet-title {
  font-size: 17px; font-weight: 700; text-align: center;
  padding: 4px 20px 16px; color: #1c1c1e; border-bottom: 1px solid rgba(0,0,0,0.08);
}
.cal-sheet-body {
  padding: 16px 20px 24px; overflow-y: auto; flex: 1;
  display: flex; flex-direction: column; gap: 14px;
}
/* Re-use existing .field and .row2 styles from calculator */
.cal-sheet-actions {
  display: flex; gap: 10px;
  padding: 12px 20px calc(16px + env(safe-area-inset-bottom, 16px));
}
.cal-sheet-cancel {
  flex: 1; padding: 14px; border-radius: 14px; border: none;
  background: rgba(0,0,0,0.08); color: #1c1c1e;
  font-size: 15px; font-weight: 600; font-family: inherit; cursor: pointer;
}
.cal-sheet-save {
  flex: 2; padding: 14px; border-radius: 14px; border: none;
  background: linear-gradient(160deg, rgba(120,118,255,0.95) 0%, rgba(80,78,220,0.98) 100%);
  color: white; font-size: 15px; font-weight: 700; font-family: inherit;
  cursor: pointer; box-shadow: 0 4px 16px rgba(94,92,230,0.3);
}
.cal-sheet-delete {
  flex: 0 0 auto; padding: 14px 18px; border-radius: 14px; border: none;
  background: rgba(255,59,48,0.1); color: #ff3b30;
  font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer;
}
.cal-sheet-delete:active { opacity: 0.7; }

/* Colour picker swatches */
.cal-colour-row {
  display: flex; gap: 8px; flex-wrap: wrap; padding-top: 6px;
}
.cal-swatch {
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  border: 2.5px solid transparent; transition: transform 0.15s;
  flex-shrink: 0;
}
.cal-swatch.selected { border-color: rgba(0,0,0,0.35); transform: scale(1.15); }
.cal-swatch:active { transform: scale(0.9); }

/* ── Bottom nav bar ── */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: auto;
  min-height: 56px;
  padding-top: 6px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(250,250,252,0.92);
  backdrop-filter: blur(28px) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  border-top: 1px solid rgba(0,0,0,0.08);
  display: none;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-around;
  z-index: 1000;
  box-shadow: 0 -1px 0 rgba(0,0,0,0.04), 0 -4px 16px rgba(0,0,0,0.04);
}
.bottom-nav { display: none; }
.bottom-nav.visible { display: flex; }
.nav-item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px; cursor: pointer; padding: 8px 0 0;
  border: none; background: none; font-family: inherit;
  color: var(--text3); transition: color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.nav-item.active { color: var(--accent); }
.nav-item:active { opacity: 0.7; }
.nav-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
.nav-icon svg { width: 24px; height: 24px; transition: transform 0.2s cubic-bezier(0.34,1.4,0.64,1); }
.nav-item.active .nav-icon svg { transform: scale(1.12); }
.nav-label { font-size: 10px; font-weight: 600; letter-spacing: 0.01em; line-height: 1; }
.screen-padded { padding-bottom: calc(56px + max(env(safe-area-inset-bottom), 4px) + 16px); }

/* ── Screen system ── */
.screen {
  display: none;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
}
.screen.active { display: flex; flex-direction: column; }

/* ── Job Brief Generator ── */
.jb-pill-row { display: flex; gap: 8px; flex-wrap: wrap; }
.jb-pill {
  padding: 8px 16px; border-radius: 100px; border: 1.5px solid rgba(0,0,0,0.1);
  background: rgba(255,255,255,0.6); color: var(--text2);
  font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer;
  transition: all 0.15s; -webkit-tap-highlight-color: transparent;
}
.jb-pill.active {
  background: var(--accent); border-color: var(--accent);
  color: white; box-shadow: 0 3px 12px rgba(94,92,230,0.28);
}
.jb-pill:active { transform: scale(0.95); }

/* Job Brief preview rows */
.jb-section-head {
  font-size: 11px; font-weight: 700; color: var(--text3);
  letter-spacing: 0.07em; text-transform: uppercase;
  padding: 14px 16px 6px; border-bottom: 1px solid rgba(0,0,0,0.06);
}
.jb-row {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 11px 16px; border-bottom: 1px solid rgba(0,0,0,0.05); gap: 12px;
}
.jb-row:last-child { border-bottom: none; }
.jb-row-label { font-size: 13px; color: var(--text3); font-weight: 500; flex-shrink: 0; }
.jb-row-val { font-size: 13px; color: var(--text); font-weight: 600; text-align: right; }
.jb-loc-block { padding: 10px 16px; border-bottom: 1px solid rgba(0,0,0,0.05); }
.jb-loc-block:last-child { border-bottom: none; }
.jb-loc-day { font-size: 11px; font-weight: 700; color: var(--accent); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 3px; }
.jb-loc-name { font-size: 14px; font-weight: 600; color: var(--text); }
.jb-loc-addr { font-size: 12px; color: var(--text3); margin-top: 2px; }



/* ── Splash ── */
@keyframes bgPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}
#splash {
  align-items: center;
  justify-content: center;
  padding: env(safe-area-inset-top, 0px) 32px calc(env(safe-area-inset-bottom, 0px) + 20px);
  text-align: center;
  min-height: 100vh;
  position: relative;
  overflow-y: auto;
}
#splash::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 20%, rgba(94,92,230,0.13) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(52,199,89,0.07) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 70% 10%, rgba(255,149,0,0.06) 0%, transparent 50%);
  animation: bgPulse 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
#splash > * { position: relative; z-index: 1; }
.splash-logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 56px;
  gap: 20px;
}
@media (max-height: 700px) {
  .splash-logo-wrap { margin-bottom: 24px; }
  .splash-svg { width: min(120px, 36vw) !important; }
  .splash-credit { margin-bottom: 16px !important; }
}
@keyframes logoFloat {
  0%, 100% { transform: translateY(0px);    filter: drop-shadow(0 4px 20px rgba(94,92,230,0.22)) drop-shadow(0 1px 6px rgba(0,0,0,0.10)); }
  50%       { transform: translateY(-8px);   filter: drop-shadow(0 12px 28px rgba(94,92,230,0.30)) drop-shadow(0 4px 10px rgba(0,0,0,0.12)); }
}
.splash-svg {
  width: min(160px, 44vw);
  height: auto;
  border-radius: 36px;
  filter: drop-shadow(0 4px 20px rgba(18,8,42,0.45)) drop-shadow(0 2px 8px rgba(94,92,230,0.30));
  animation: logoFloat 4s ease-in-out 1.2s infinite;
}
.splash-title {
  font-size: clamp(24px, 6vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.1;
}
.splash-subtitle {
  font-size: 13px;
  font-weight: 500;
  color: var(--text3);
  margin-top: 6px;
  letter-spacing: 0.01em;
}

/* ── Splash entrance animations ── */
@keyframes splashFadeUp {
  0%   { opacity: 0; transform: translateY(28px) scale(0.94); filter: blur(4px); }
  60%  { filter: blur(0px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0px); }
}
@keyframes splashFadeIn {
  0%   { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes splashBtnPop {
  0%   { opacity: 0; transform: translateY(18px) scale(0.92); }
  70%  { transform: translateY(-3px) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

#splash .splash-logo-wrap {
  animation: splashFadeUp 0.85s cubic-bezier(0.16,1,0.3,1) 0.1s both;
}
#splash .splash-title {
  animation: splashFadeIn 0.7s cubic-bezier(0.16,1,0.3,1) 0.45s both;
}
#splash .splash-copyright {
  font-size: 11px;
  color: var(--text3);
  opacity: 0.6;
  letter-spacing: 0.01em;
  margin-top: -28px;
  margin-bottom: 0;
}
.splash-credit {
  animation: splashFadeIn 0.6s cubic-bezier(0.16,1,0.3,1) 0.65s both;
}
#splash .splash-btn {
  animation: splashBtnPop 0.7s cubic-bezier(0.34,1.4,0.64,1) 0.82s both;
}

/* Bubbly liquid glass button */
.splash-credit {
  font-size: 13px;
  font-weight: 500;
  color: var(--text3);
  letter-spacing: 0.01em;
  margin-bottom: 36px;
}
.splash-btn {
  display: inline-block;
  padding: 17px 60px;
  font-size: 18px; font-weight: 700; font-family: inherit;
  letter-spacing: -0.01em; color: white; border: none;
  border-radius: 50px; cursor: pointer;
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, rgba(120,118,255,0.95) 0%, rgba(80,78,220,0.98) 50%, rgba(60,58,200,1) 100%);
  box-shadow:
    0 8px 32px rgba(94,92,230,0.40),
    0 2px 8px rgba(94,92,230,0.25),
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(0,0,0,0.15);
  transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.18s;
}
.splash-btn::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 100%);
  border-radius: 50px 50px 0 0;
  pointer-events: none;
}
.splash-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 40px rgba(94,92,230,0.48), 0 4px 12px rgba(94,92,230,0.28), inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -1px 0 rgba(0,0,0,0.15);
}
.splash-btn:active { transform: scale(0.97); }

/* ── Version label ── */
.splash-version {
  font-size: 11px; font-weight: 700;
  color: var(--accent); letter-spacing: 0.08em;
  text-transform: uppercase; margin-top: 6px;
  opacity: 0.7;
  animation: splashFadeIn 0.6s cubic-bezier(0.16,1,0.3,1) 0.75s both;
}
/* ── Secondary button row ── */
.splash-secondary-btns {
  display: flex; gap: 10px; margin-top: 14px;
  animation: splashFadeIn 0.6s cubic-bezier(0.16,1,0.3,1) 1.0s both;
}
/* ── Add to Home Screen / What's New buttons ── */
.splash-install-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 18px;
  font-size: 13px; font-weight: 600; font-family: inherit;
  color: var(--text3); background: transparent;
  border: 1.5px solid rgba(0,0,0,0.10);
  border-radius: 50px; cursor: pointer;
  transition: all 0.18s; flex: 1; justify-content: center;
}
.splash-install-btn:hover { background: rgba(94,92,230,0.07); color: var(--accent); border-color: var(--accent-border); }
.splash-install-btn svg { flex-shrink: 0; }

/* ── Install modal (bottom sheet) ── */
.install-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s;
}
.install-overlay.open { opacity: 1; pointer-events: auto; }
/* Sheet always uses solid light colours — never dark mode */
.install-sheet {
  width: 100%; max-width: 480px;
  background: #f2f2f7;
  border-radius: 24px 24px 0 0;
  padding: 0 0 max(24px, env(safe-area-inset-bottom)) 0;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.34,1.2,0.64,1);
  box-shadow: 0 -8px 48px rgba(0,0,0,0.32);
}
.install-overlay.open .install-sheet { transform: translateY(0); }
.install-sheet-handle {
  width: 36px; height: 4px;
  background: rgba(0,0,0,0.18); border-radius: 2px;
  margin: 12px auto 0;
}
.install-sheet-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 14px;
  background: #ffffff;
  border-radius: 24px 24px 0 0;
}
.install-sheet-title {
  display: flex; align-items: center; gap: 12px;
}
.install-icon-wrap {
  width: 52px; height: 52px; border-radius: 13px;
  overflow: hidden; flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.22);
}
.install-icon-wrap img { width: 100%; height: 100%; display: block; }
.install-app-name { font-size: 17px; font-weight: 700; color: #1c1c1e; }
.install-app-sub  { font-size: 12px; color: #8e8e93; margin-top: 2px; }
.install-close {
  width: 30px; height: 30px; border-radius: 50%;
  background: #e5e5ea; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; color: #3c3c43; flex-shrink: 0;
  transition: background 0.15s;
}
.install-close:hover { background: #d1d1d6; }
.install-divider { height: 1px; background: #c6c6c8; margin: 0; }
.install-platform-tabs {
  display: flex; gap: 8px; padding: 14px 20px 8px;
  background: var(--surface-card);
}
.install-tab {
  flex: 1; padding: 9px 4px;
  font-size: 13px; font-weight: 600; font-family: inherit;
  border: 1.5px solid #c6c6c8; border-radius: 10px;
  background: #ffffff; cursor: pointer; color: #3c3c43;
  transition: all 0.15s;
}
.install-tab.active {
  background: #5e5ce6; color: #ffffff;
  border-color: #5e5ce6;
  box-shadow: 0 2px 8px rgba(94,92,230,0.35);
}
.install-steps { padding: 8px 20px 4px; background: var(--surface-card); }
.install-step {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid #e5e5ea;
}
.install-step:last-child { border-bottom: none; }
.install-step-num {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(94,92,230,0.14); color: #5e5ce6;
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px;
}
.install-step-text { flex: 1; }
.install-step-title { font-size: 15px; font-weight: 600; color: #1c1c1e; line-height: 1.3; }
.install-step-sub   { font-size: 13px; color: #6e6e73; margin-top: 3px; line-height: 1.45; }
.install-step-icon  {
  flex-shrink: 0; width: 36px; height: 36px;
  background: #ffffff; border: 1px solid #e5e5ea;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* ── Screen entrance animations ── */
@keyframes screenSlideUp {
  0%   { opacity: 0; transform: translateY(22px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes screenFadeIn {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes itemPop {
  0%   { opacity: 0; transform: translateY(16px) scale(0.97); }
  60%  { transform: translateY(-2px) scale(1.005); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Role picker animations */
#rolepicker.anim-in .back-btn   { animation: screenFadeIn 0.45s cubic-bezier(0.16,1,0.3,1) 0.05s both; }
#rolepicker.anim-in .rp-title   { animation: screenSlideUp 0.55s cubic-bezier(0.16,1,0.3,1) 0.10s both; }
#rolepicker.anim-in .rp-sub     { animation: screenFadeIn 0.5s cubic-bezier(0.16,1,0.3,1) 0.18s both; }
#rolepicker.anim-in .role-group:nth-child(1) { animation: screenSlideUp 0.55s cubic-bezier(0.16,1,0.3,1) 0.20s both; }
#rolepicker.anim-in .role-group:nth-child(2) { animation: screenSlideUp 0.55s cubic-bezier(0.16,1,0.3,1) 0.27s both; }
#rolepicker.anim-in .role-group:nth-child(3) { animation: screenSlideUp 0.55s cubic-bezier(0.16,1,0.3,1) 0.32s both; }
#rolepicker.anim-in .role-group:nth-child(4) { animation: screenSlideUp 0.55s cubic-bezier(0.16,1,0.3,1) 0.37s both; }
#rolepicker.anim-in .role-group:nth-child(5) { animation: screenSlideUp 0.55s cubic-bezier(0.16,1,0.3,1) 0.42s both; }
#rolepicker.anim-in .role-group:nth-child(6) { animation: screenSlideUp 0.55s cubic-bezier(0.16,1,0.3,1) 0.47s both; }
#rolepicker.anim-in .role-group:nth-child(7) { animation: screenSlideUp 0.55s cubic-bezier(0.16,1,0.3,1) 0.52s both; }

/* Calculator animations */
#calculator.anim-in .calc-header  { animation: screenSlideUp 0.55s cubic-bezier(0.16,1,0.3,1) 0.08s both; }
#calculator.anim-in .section:nth-of-type(1) { animation: screenSlideUp 0.55s cubic-bezier(0.16,1,0.3,1) 0.18s both; }
#calculator.anim-in .section:nth-of-type(2) { animation: screenSlideUp 0.55s cubic-bezier(0.16,1,0.3,1) 0.26s both; }
#calculator.anim-in .calc-btn     { animation: itemPop 0.6s cubic-bezier(0.34,1.4,0.64,1) 0.34s both; }

/* Results animations */
.results.show .res-title    { animation: screenSlideUp 0.5s cubic-bezier(0.16,1,0.3,1) 0.0s both; }
.results.show #alerts       { animation: screenFadeIn 0.45s cubic-bezier(0.16,1,0.3,1) 0.08s both; }
.results.show .metrics      { animation: screenSlideUp 0.5s cubic-bezier(0.16,1,0.3,1) 0.12s both; }
.results.show .structure-row { animation: screenSlideUp 0.5s cubic-bezier(0.16,1,0.3,1) 0.18s both; }
.results.show .cam-row      { animation: screenSlideUp 0.5s cubic-bezier(0.16,1,0.3,1) 0.24s both; }
.results.show .tl-wrap      { animation: screenSlideUp 0.5s cubic-bezier(0.16,1,0.3,1) 0.30s both; }
.results.show .bd-table     { animation: screenSlideUp 0.5s cubic-bezier(0.16,1,0.3,1) 0.36s both; }
.results.show .total-bar    { animation: itemPop 0.6s cubic-bezier(0.34,1.4,0.64,1) 0.44s both; }
.results.show .copy-btn     { animation: screenFadeIn 0.45s cubic-bezier(0.16,1,0.3,1) 0.52s both; }
.results.show .invoice-btn  { animation: screenFadeIn 0.45s cubic-bezier(0.16,1,0.3,1) 0.58s both; }
.results.show .timesheet-btn { animation: screenFadeIn 0.45s cubic-bezier(0.16,1,0.3,1) 0.64s both; }
.results.show .save-cal-btn  { animation: screenFadeIn 0.45s cubic-bezier(0.16,1,0.3,1) 0.70s both; }

/* Invoice screen animations */
#invoice.anim-in .back-btn         { animation: screenFadeIn 0.45s cubic-bezier(0.16,1,0.3,1) 0.05s both; }
#invoice.anim-in .rp-title         { animation: screenSlideUp 0.55s cubic-bezier(0.16,1,0.3,1) 0.10s both; }
#invoice.anim-in .rp-sub           { animation: screenFadeIn 0.45s cubic-bezier(0.16,1,0.3,1) 0.16s both; }
#invoice.anim-in .inv-section:nth-child(1) { animation: screenSlideUp 0.5s cubic-bezier(0.16,1,0.3,1) 0.20s both; }
#invoice.anim-in .inv-section:nth-child(2) { animation: screenSlideUp 0.5s cubic-bezier(0.16,1,0.3,1) 0.28s both; }
#invoice.anim-in .inv-section:nth-child(3) { animation: screenSlideUp 0.5s cubic-bezier(0.16,1,0.3,1) 0.34s both; }
#invoice.anim-in .inv-section:nth-child(4) { animation: screenSlideUp 0.5s cubic-bezier(0.16,1,0.3,1) 0.40s both; }
#invoice.anim-in .inv-actions      { animation: itemPop 0.6s cubic-bezier(0.34,1.4,0.64,1) 0.48s both; }

/* ── Role picker ── */
#rolepicker { padding: 0 18px; }
.rp-inner { max-width: 580px; margin: 0 auto; padding: max(20px, env(safe-area-inset-top, 20px)) 16px 80px; }
.back-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; font-size: 16px; font-weight: 600; color: var(--accent); font-family: inherit; padding: 0; margin-bottom: 28px; }
.back-btn svg { width: 10px; height: 16px; }
.rp-title { font-size: 28px; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 6px; }
.rp-sub { font-size: 14px; color: var(--text3); margin-bottom: 24px; }
.role-group { margin-bottom: 16px; }
.rg-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  background: var(--green-dim);
  color: var(--green);
  border-radius: 6px;
  padding: 2px 6px;
  margin-left: 6px;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.role-sub {
  font-size: 12px;
  color: var(--text3);
  margin: -6px 0 8px 0;
  padding: 0 2px;
}
.ri-rate-flat {
  color: var(--green) !important;
  font-weight: 600;
}
.role-group-label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: var(--text3); text-transform: uppercase; padding: 0 6px; margin-bottom: 8px; }
.role-list { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius); backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%); box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,0.9); overflow: hidden; }
.role-item { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid rgba(0,0,0,0.05); cursor: pointer; transition: background 0.12s; -webkit-tap-highlight-color: transparent; }
.role-item:last-child { border-bottom: none; }
.role-item:hover { background: rgba(94,92,230,0.04); }
.role-item:active { background: rgba(94,92,230,0.08); }
.ri-name { font-size: 15px; font-weight: 500; color: var(--text); }
.ri-right { display: flex; align-items: center; gap: 8px; }
.ri-rate { font-size: 14px; font-weight: 600; color: var(--accent); background: var(--accent-dim); padding: 3px 10px; border-radius: 20px; }
.ri-chevron { color: var(--text3); font-size: 18px; line-height: 1; }
.custom-role-card { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius); backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%); box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,0.9); padding: 18px; margin-bottom: 16px; }
.custom-role-title { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 14px; }
.custom-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12px; font-weight: 600; color: var(--text3); padding-left: 2px; }
/* Ensure modals/sheets always have readable text regardless of backdrop */
#mjEditModal .field label,
/* claimJobModal removed */
#mjEditModal input, #mjEditModal textarea, #mjEditModal select,

#mjEditModal .tl, #mjEditModal .ts { color: #1c1c1e !important; }
#mjEditModal .ts { color: #48484a !important; }
.field input { width: 100%; padding: 11px 14px; font-size: 16px; font-weight: 500; font-family: inherit; color: var(--text); background: var(--glass-input); border: 1px solid rgba(255,255,255,0.7); border-radius: var(--radius-xs); outline: none; -webkit-appearance: none; transition: border-color 0.2s, box-shadow 0.2s; box-shadow: inset 0 1px 3px rgba(0,0,0,0.04); }
.field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); background: var(--glass-input-focus); }
.custom-note { font-size: 12px; color: var(--text3); margin-bottom: 14px; line-height: 1.5; }
.custom-type-toggle {
  display: flex; gap: 6px; margin-bottom: 14px;
  background: var(--glass-input); border-radius: 12px; padding: 4px;
  border: 1px solid var(--glass-border);
}
.ctt-btn {
  flex: 1; padding: 8px 12px; font-size: 13px; font-weight: 600;
  font-family: inherit; border: none; border-radius: 9px;
  background: transparent; color: var(--text3); cursor: pointer;
  transition: all 0.18s;
}
.ctt-active {
  background: white; color: var(--accent);
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}

/* Bubbly glass action buttons (reused for custom submit + calc) */
.bubble-btn {
  width: 100%; padding: 15px;
  font-size: 16px; font-weight: 700; font-family: inherit;
  letter-spacing: -0.01em; color: white; border: none;
  border-radius: 50px; cursor: pointer;
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, rgba(120,118,255,0.95) 0%, rgba(80,78,220,0.98) 50%, rgba(60,58,200,1) 100%);
  box-shadow:
    0 6px 24px rgba(94,92,230,0.38),
    0 2px 6px rgba(94,92,230,0.20),
    inset 0 1px 0 rgba(255,255,255,0.42),
    inset 0 -1px 0 rgba(0,0,0,0.14);
  transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.18s;
}
.bubble-btn::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0) 100%);
  border-radius: 50px 50px 0 0;
  pointer-events: none;
}
.bubble-btn:hover { transform: translateY(-1px) scale(1.01); box-shadow: 0 10px 32px rgba(94,92,230,0.44), 0 3px 8px rgba(94,92,230,0.22), inset 0 1px 0 rgba(255,255,255,0.42), inset 0 -1px 0 rgba(0,0,0,0.14); }
.bubble-btn:active { transform: scale(0.97); }

/* ── Calculator ── */
#calculator { padding: 0 18px; }
.calc-inner { max-width: 580px; margin: 0 auto; padding: 52px 0 80px; }
.calc-header { margin-bottom: 28px; padding: 0 4px; }
.calc-header-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.calc-header h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.04em; line-height: 1.1; }
.role-chip {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 50px; padding: 7px 16px 7px 10px;
  cursor: pointer; position: relative; overflow: hidden;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.8);
  transition: transform 0.15s, box-shadow 0.15s;
}
.role-chip::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 100%);
  border-radius: 50px 50px 0 0; pointer-events: none;
}
.role-chip:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.8); }
.role-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; box-shadow: 0 0 0 2px var(--accent-dim); }
.role-chip-name { font-size: 13px; font-weight: 600; color: var(--text2); }
.role-chip-rate { font-size: 13px; font-weight: 700; color: var(--accent); }
.calc-header p { font-size: 14px; color: var(--text3); margin-top: 6px; }

.section { margin-bottom: 14px; }
.fin-summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.fin-summary-card{background:var(--glass-deep);border:1px solid rgba(0,0,0,0.07);border-radius:16px;padding:14px 16px}
[data-theme="dark"] .fin-summary-card{border-color:rgba(255,255,255,0.07)}
.fin-summary-label{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:0.07em;margin-bottom:4px}
.fin-summary-val{font-size:22px;font-weight:700;color:var(--text);line-height:1.1}
.fin-summary-sub{font-size:10px;color:var(--text3);margin-top:2px}
.fin-summary-val.green{color:var(--green)}.fin-summary-val.amber{color:var(--amber)}.fin-summary-val.red{color:#ff3b30}
.fin-filter-tabs{display:flex;gap:6px;margin-bottom:14px;overflow-x:auto;padding-bottom:2px}
.fin-filter-tabs::-webkit-scrollbar{display:none}
.fin-tab{padding:6px 14px;border-radius:20px;border:1.5px solid var(--glass-border);background:var(--glass);font-size:12px;font-weight:600;color:var(--text3);cursor:pointer;white-space:nowrap;transition:all 0.15s;flex-shrink:0}
.fin-tab.active{background:var(--accent);border-color:var(--accent);color:#fff}
.fin-entry{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid rgba(0,0,0,0.06)}
[data-theme="dark"] .fin-entry{border-bottom-color:rgba(255,255,255,0.06)}
.fin-entry:last-child{border-bottom:none}
.fin-entry-icon{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.fin-entry-main{flex:1;min-width:0}
.fin-entry-prod{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fin-entry-sub{font-size:11px;color:var(--text3);margin-top:1px}
.fin-entry-right{text-align:right;flex-shrink:0}
.fin-entry-amt{font-size:14px;font-weight:700}
.fin-entry-amt.green{color:var(--green)}.fin-entry-amt.amber{color:var(--amber)}.fin-entry-amt.red{color:#ff3b30}
.fin-entry-status{font-size:10px;font-weight:700;margin-top:2px;padding:2px 6px;border-radius:6px;display:inline-block}
.fin-status-paid{background:rgba(52,199,89,0.12);color:var(--green)}
.fin-status-pending{background:rgba(255,149,0,0.12);color:var(--amber)}
.fin-status-overdue{background:rgba(255,59,48,0.12);color:#ff3b30}
.fin-status-sent,.fin-status-submitted{background:rgba(94,92,230,0.12);color:var(--accent)}
.fin-export-btn{width:100%;padding:14px;border-radius:14px;border:none;background:var(--accent);color:#fff;font-size:15px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:4px;font-family:inherit;transition:opacity 0.15s}
.fin-export-btn:active{opacity:0.8}
.fin-year-btn{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--glass-border);background:var(--glass);display:flex;align-items:center;justify-content:center;cursor:pointer}
.fin-year-label{font-size:16px;font-weight:700;color:var(--text)}
.bug-sheet-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:3000;display:none}
.bug-sheet-overlay.open{display:block}
.bug-sheet{position:fixed;bottom:0;left:0;right:0;max-height:92vh;background:var(--surface-card,#f2f2f7);border-radius:24px 24px 0 0;z-index:3001;transform:translateY(100%);transition:transform 0.38s cubic-bezier(0.16,1,0.3,1);overflow-y:auto;padding-bottom:env(safe-area-inset-bottom,16px)}
.bug-sheet.open{transform:translateY(0)}
.bug-screenshot-zone{border:2px dashed var(--glass-border);border-radius:14px;padding:20px 16px;text-align:center;cursor:pointer;background:var(--glass)}
.bug-screenshot-zone.has-image{border-color:var(--accent);border-style:solid;padding:8px}
.bug-screenshot-thumb{width:100%;max-height:180px;object-fit:contain;border-radius:10px;display:none}
.bug-screenshot-zone.has-image .bug-screenshot-thumb{display:block}
.bug-screenshot-zone.has-image .bug-screenshot-hint{display:none}
.bug-send-btn{width:100%;padding:14px;border-radius:14px;border:none;background:#ff3b30;color:#fff;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;transition:all 0.2s}
.bug-send-btn:disabled{opacity:0.5}
.section-label { font-size: 12px; font-weight: 600; letter-spacing: 0.05em; color: var(--text3); text-transform: uppercase; margin-bottom: 8px; padding: 0 6px; }
.glass-card { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 20px; backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%); box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,0.9); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.row2:last-child { margin-bottom: 0; }
.field-note { font-size: 11px; color: var(--text3); padding-left: 2px; margin-top: -2px; opacity: 0.8; }
input[type="time"], input[type="number"] { width: 100%; padding: 11px 14px; font-size: 16px; font-weight: 500; font-family: inherit; letter-spacing: -0.01em; color: var(--text); background: var(--glass-input); border: 1px solid rgba(255,255,255,0.7); border-radius: var(--radius-xs); outline: none; transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; -webkit-appearance: none; box-shadow: inset 0 1px 3px rgba(0,0,0,0.04); }

/* ── Custom quarter-hour time picker ── */
.tpk-btn {
  width: 100%; padding: 11px 14px; font-size: 16px; font-weight: 500;
  font-family: inherit; letter-spacing: -0.01em; color: var(--text);
  background: var(--glass-input); border: 1px solid rgba(255,255,255,0.7);
  border-radius: var(--radius-xs); outline: none; text-align: left;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.04); cursor: pointer;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  display: flex; align-items: center; justify-content: space-between;
}
.tpk-btn:focus, .tpk-btn.open { border-color: var(--accent); background: var(--glass-input-focus); box-shadow: 0 0 0 3px var(--accent-dim); }
.tpk-btn-val { flex: 1; }
.tpk-btn-val.placeholder { color: var(--text3); }
.tpk-btn-icon { width: 16px; height: 16px; opacity: 0.4; flex-shrink: 0; }
.tpk-overlay { position: fixed; inset: 0; z-index: 3000; }
.tpk-panel {
  position: fixed; z-index: 3001;
  background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,0.18), 0 4px 16px rgba(0,0,0,0.1);
  backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%);
  overflow: hidden; width: 260px;
}
.tpk-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px 10px; border-bottom: 1px solid rgba(0,0,0,0.06);
}
.tpk-title { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text3); }
.tpk-clear { font-size: 12px; color: var(--accent); font-weight: 600; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.tpk-clear:hover { background: var(--accent-dim); }
.tpk-cols { display: grid; grid-template-columns: 1fr 1fr; }
.tpk-col-hdr {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text3); text-align: center; padding: 8px 0 6px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.tpk-col-hdr:first-child { border-right: 1px solid rgba(0,0,0,0.05); }
.tpk-lists { display: grid; grid-template-columns: 1fr 1fr; height: 200px; }
.tpk-list { overflow-y: scroll; -webkit-overflow-scrolling: touch; scrollbar-width: none; height: 200px; }
.tpk-list::-webkit-scrollbar { display: none; }
.tpk-list:first-child { border-right: 1px solid rgba(0,0,0,0.05); }
.tpk-item {
  padding: 10px 0; text-align: center; font-size: 17px; font-weight: 500;
  color: var(--text2); cursor: pointer; border-radius: 0;
  transition: background 0.12s, color 0.12s;
}
.tpk-item:hover { background: var(--accent-dim); color: var(--accent); }
.tpk-item.selected {
  background: var(--accent); color: white; font-weight: 700;
  border-radius: 10px; margin: 0 6px;
}
.tpk-done {
  margin: 10px 12px 12px; padding: 10px; background: var(--accent);
  color: white; font-size: 15px; font-weight: 700; border-radius: 12px;
  text-align: center; cursor: pointer; transition: opacity 0.15s;
}
.tpk-done:hover { opacity: 0.88; }
/* Calendar sheet role select — matches input style */
#jobRole {
  width: 100%; padding: 11px 14px; font-size: 16px; font-weight: 500;
  font-family: inherit; color: var(--text);
  background: var(--glass-input); border: 1px solid rgba(255,255,255,0.7);
  border-radius: var(--radius-xs); outline: none;
  -webkit-appearance: none; appearance: none;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.04);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238e8e93' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}
#jobRole:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
input[type="time"]:focus, input[type="number"]:focus { border-color: var(--accent); background: var(--glass-input-focus); box-shadow: 0 0 0 3px var(--accent-dim); }
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }
.glass-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(0,0,0,0.07), transparent); margin: 16px 0; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tgl-text .tl { font-size: 15px; font-weight: 500; color: var(--text); }
.tgl-text .ts { font-size: 12px; color: var(--text3); margin-top: 3px; }
.toggle { position: relative; width: 51px; height: 31px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; }
.track { position: absolute; inset: 0; background: rgba(0,0,0,0.12); border: 1px solid rgba(0,0,0,0.08); border-radius: 31px; cursor: pointer; transition: background 0.25s; }
.toggle input:checked + .track { background: var(--accent); border-color: var(--accent); box-shadow: inset 0 1px 0 rgba(255,255,255,0.3); }
.track::before { content: ''; position: absolute; width: 25px; height: 25px; left: 2px; top: 2px; background: white; border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.9); transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1); }
.toggle input:checked + .track::before { transform: translateX(20px); }

/* Main calc button — big bubbly */
.calc-btn {
  width: 100%; padding: 17px; margin-top: 16px;
  font-size: 17px; font-weight: 700; font-family: inherit;
  letter-spacing: -0.01em; color: white; border: none;
  border-radius: 50px; cursor: pointer;
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, rgba(120,118,255,0.95) 0%, rgba(80,78,220,0.98) 50%, rgba(60,58,200,1) 100%);
  box-shadow:
    0 8px 28px rgba(94,92,230,0.40),
    0 2px 6px rgba(94,92,230,0.22),
    inset 0 1px 0 rgba(255,255,255,0.44),
    inset 0 -1px 0 rgba(0,0,0,0.15);
  transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.18s;
}
.calc-btn::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 100%);
  border-radius: 50px 50px 0 0; pointer-events: none;
}
.calc-btn:hover { transform: translateY(-2px) scale(1.01); box-shadow: 0 12px 36px rgba(94,92,230,0.46), 0 4px 10px rgba(94,92,230,0.24), inset 0 1px 0 rgba(255,255,255,0.44), inset 0 -1px 0 rgba(0,0,0,0.15); }
.calc-btn:active { transform: scale(0.97); }

/* ── Results ── */
.results { display: none; margin-top: 32px; }
.results.show { display: block; }
.res-title { font-size: 26px; font-weight: 700; color: var(--text); margin-bottom: 18px; letter-spacing: -0.03em; padding: 0 4px; display: flex; align-items: center; gap: 10px; }
.on-badge { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 20px; background: var(--glass-deep); border: 1px solid rgba(0,0,0,0.08); color: var(--text3); }
.alert { display: flex; gap: 12px; padding: 13px 16px; border-radius: var(--radius-sm); margin-bottom: 10px; border: 1px solid; backdrop-filter: blur(16px); }
.alert-warn { background: rgba(255,149,0,0.08); border-color: rgba(255,149,0,0.22); }
.alert-ok   { background: rgba(52,199,89,0.08);  border-color: rgba(52,199,89,0.22); }
.alert-dot  { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.dot-warn { background: var(--amber); } .dot-ok { background: var(--green); }
.alert-msg { font-size: 13px; line-height: 1.55; font-weight: 500; }
.alert-warn .alert-msg { color: #a65800; } .alert-ok .alert-msg { color: #1a7a35; }
.metrics { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-bottom: 14px; }
.metric { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 14px; backdrop-filter: blur(20px); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.85); }
.m-label { font-size: 11px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 7px; }
.m-val { font-size: 22px; font-weight: 700; color: var(--text); letter-spacing: -0.03em; line-height: 1; }
.m-sub { font-size: 11px; color: var(--text3); margin-top: 5px; }
.structure-row { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; margin-bottom: 14px; }
.str-seg { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius-xs); padding: 12px 8px; text-align: center; backdrop-filter: blur(16px); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.85); }
.str-label { font-size: 10px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 5px; }
.str-val { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; }
.str-val-muted { font-size: 15px; font-weight: 700; color: var(--text3); letter-spacing: -0.02em; }
.str-sub { font-size: 10px; color: var(--text3); margin-top: 3px; }
.cam-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.cam-card { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 13px 15px; backdrop-filter: blur(20px); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.85); }
.cam-label { font-size: 11px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.cam-time { font-size: 22px; font-weight: 700; color: var(--text); letter-spacing: -0.03em; }
.cam-note { font-size: 12px; color: var(--text3); margin-top: 4px; }
.tl-wrap { margin-bottom: 14px; }
.tl-bar { height: 8px; width: 100%; border-radius: 4px; overflow: hidden; display: flex; margin-bottom: 10px; background: rgba(0,0,0,0.06); box-shadow: inset 0 1px 2px rgba(0,0,0,0.08); }
.tl-seg { height: 100%; }
.tl-legend { display: flex; flex-wrap: wrap; gap: 12px; padding: 0 2px; }
.tl-item { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text2); font-weight: 500; }
.tl-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.bd-table { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius); overflow: hidden; margin-bottom: 14px; backdrop-filter: blur(28px) saturate(160%); box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,0.9); }
.bd-row { display: flex; align-items: center; padding: 13px 18px; border-bottom: 1px solid rgba(0,0,0,0.05); }
.bd-row:last-child { border-bottom: none; }
.bd-head { background: rgba(0,0,0,0.03); }
.bd-name { flex: 1; font-size: 14px; font-weight: 500; color: var(--text); }
.bd-detail { font-size: 13px; color: var(--text3); margin-right: 14px; min-width: 140px; text-align: right; }
.bd-amt { font-size: 15px; font-weight: 700; min-width: 72px; text-align: right; color: var(--text); letter-spacing: -0.02em; }
.bd-muted { color: var(--text3) !important; }
.badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px; margin-left: 6px; vertical-align: middle; }
.b-green  { background: var(--green-dim);  color: #1a7a35; }
.b-amber  { background: var(--amber-dim);  color: #a65800; }
.b-orange { background: var(--orange-dim); color: #c44d00; }
.b-red    { background: var(--red-dim);    color: #c0261e; }
.b-warn   { background: var(--warn-dim);   color: #a65800; }
.b-gray   { background: rgba(0,0,0,0.06);  color: var(--text3); }
.b-unpaid { background: rgba(0,0,0,0.04);  color: var(--text3); }
.b-accent { background: var(--accent-dim); color: var(--accent); }
.total-bar { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; backdrop-filter: blur(28px) saturate(160%); box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,0.9); }
.total-label { font-size: 15px; font-weight: 600; color: var(--text3); }
.total-val { font-size: 36px; font-weight: 800; color: var(--text); letter-spacing: -0.04em; }

.copy-btn {
  width: 100%; margin-top: 12px;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 20px;
  font-size: 15px; font-weight: 600; font-family: inherit;
  letter-spacing: -0.01em; color: var(--text2);
  border-radius: 50px; cursor: pointer;
  position: relative; overflow: hidden;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.85), inset 0 -1px 0 rgba(0,0,0,0.04);
  transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.18s, color 0.2s;
}
.copy-btn::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.40) 0%, rgba(255,255,255,0) 100%);
  border-radius: 50px 50px 0 0; pointer-events: none;
}
.copy-btn:hover { transform: translateY(-1px) scale(1.01); box-shadow: 0 6px 20px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.85); color: var(--accent); }
.copy-btn:active { transform: scale(0.97); }
.copy-btn.copied { color: #1a7a35; border-color: rgba(52,199,89,0.35); background: rgba(52,199,89,0.08); }

@media (max-width: 420px) {
  .structure-row { grid-template-columns: 1fr 1fr; }
  .bd-detail { display: none; }
  .m-val { font-size: 18px; }
  .total-val { font-size: 28px; }
  .calc-header h1 { font-size: 26px; }
}
/* ── Day Stack Headers ── */
.day-stack-header {
  display: flex; align-items: center; gap: 10px;
  margin: 20px 0 4px;
  padding: 0 2px;
}
.day-stack-num {
  font-size: 18px; font-weight: 700; letter-spacing: -0.02em; color: var(--text);
}
.day-stack-header::after {
  content: ''; flex: 1; height: 1.5px;
  background: linear-gradient(90deg, var(--glass-border) 0%, transparent 100%);
  border-radius: 2px;
}
/* First day panel has no top margin */
#dayPanel_0 .day-stack-header { margin-top: 4px; }

/* ── Day Tabs ── */
.day-tabs {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px;
  scrollbar-width: none;
}
.day-tabs::-webkit-scrollbar { display: none; }
.day-tab {
  flex-shrink: 0; padding: 8px 18px;
  font-size: 13px; font-weight: 600; font-family: inherit;
  border-radius: 20px; border: 1.5px solid var(--glass-border);
  background: var(--glass); color: var(--text3);
  cursor: pointer; transition: all 0.18s; white-space: nowrap;
}
.day-tab.active {
  background: var(--accent); color: white;
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(94,92,230,0.3);
}
.day-panel { display: none; }
.day-panel.active { display: block; }
.day-result-block {
  border: 1.5px solid var(--glass-border); border-radius: var(--radius);
  overflow: hidden; margin-bottom: 16px;
}
.day-result-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; background: var(--glass);
  border-bottom: 1.5px solid var(--glass-border);
  font-size: 13px; font-weight: 700; color: var(--text3);
  text-transform: uppercase; letter-spacing: 0.05em;
  cursor: pointer; user-select: none;
}
.day-result-header .day-result-total {
  font-size: 15px; font-weight: 700; color: var(--accent); text-transform: none; letter-spacing: 0;
}
.day-result-body { padding: 12px 16px; }
.day-result-chevron { transition: transform 0.2s; color: var(--text3); }
.day-result-body.collapsed { display: none; }

/* ── Shoot Days Screen ── */
.sd-day-count-card { padding: 20px; text-align: center; }
.sd-count-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text3); margin-bottom: 16px; }
.sd-count-row { display: flex; align-items: center; justify-content: center; gap: 24px; margin-bottom: 12px; }
.sd-count-btn {
  width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  font-size: 24px; font-weight: 300; line-height: 1;
  background: var(--glass); border: 1.5px solid var(--glass-border);
  color: var(--accent); font-family: inherit;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s; box-shadow: var(--shadow-card);
}
.sd-count-btn:hover { background: var(--accent-dim); transform: scale(1.08); }
.sd-count-btn:active { transform: scale(0.94); }
.sd-count-val { font-size: 52px; font-weight: 700; letter-spacing: -0.04em; color: var(--text); min-width: 60px; }
.sd-count-note { font-size: 13px; color: var(--text3); line-height: 1.5; }

.sd-day-block { background: var(--glass); border: 1.5px solid var(--glass-border); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 12px; backdrop-filter: blur(28px); }
.sd-day-header { font-size: 13px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 14px; }
.sd-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.sd-turnaround-card {
  border-radius: 14px; padding: 14px 16px; margin-bottom: 10px;
  display: flex; align-items: center; gap: 14px;
}
.sd-ta-ok { background: var(--green-dim); border: 1.5px solid rgba(52,199,89,0.2); }
.sd-ta-warn { background: rgba(255,59,48,0.08); border: 1.5px solid rgba(255,59,48,0.2); }
.sd-ta-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.sd-ta-dot-ok { background: var(--green); }
.sd-ta-dot-warn { background: #ff3b30; }
.sd-ta-info { flex: 1; }
.sd-ta-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.sd-ta-sub { font-size: 12px; color: var(--text3); line-height: 1.4; }
.sd-ta-penalty { font-size: 14px; font-weight: 700; color: #ff3b30; flex-shrink: 0; }
.sd-ta-inline { margin: 0 0 12px; }
.camwrap-prompt {
  display: flex; align-items: center; gap: 10px;
  background: var(--warn-dim);
  border: 1.5px solid rgba(255,149,0,0.25);
  border-radius: var(--radius-xs);
  padding: 10px 14px; margin-bottom: 4px;
  font-size: 13px; color: #a65800; font-weight: 500; line-height: 1.4;
}
.camwrap-prompt svg { flex-shrink: 0; width: 16px; height: 16px; }
.sd-ta-inline .sd-turnaround-card { margin-top: 0; }

/* Shoot days anim */
#shootdays.anim-in .back-btn   { animation: screenFadeIn 0.45s cubic-bezier(0.16,1,0.3,1) 0.05s both; }
#shootdays.anim-in .rp-title   { animation: screenSlideUp 0.55s cubic-bezier(0.16,1,0.3,1) 0.10s both; }
#shootdays.anim-in .rp-sub     { animation: screenFadeIn 0.5s cubic-bezier(0.16,1,0.3,1) 0.16s both; }
#shootdays.anim-in .sd-day-count-card { animation: screenSlideUp 0.55s cubic-bezier(0.16,1,0.3,1) 0.22s both; }
#shootdays.anim-in .calc-btn        { animation: itemPop 0.6s cubic-bezier(0.34,1.4,0.64,1) 0.38s both; }

/* ── Invoice Screen ── */
.invoice-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 15px 20px;
  font-size: 15px; font-weight: 600; font-family: inherit;
  color: var(--accent); background: var(--accent-dim);
  border: 1.5px solid var(--accent-border); border-radius: 14px;
  cursor: pointer; margin-top: 10px; transition: all 0.18s;
}
.invoice-btn:hover { background: rgba(94,92,230,0.18); transform: translateY(-1px); }
.invoice-btn:active { transform: scale(0.98); }
.btn-trial {
  display: inline-block;
  font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 7px;
  margin-left: 7px; vertical-align: middle;
  background: rgba(255,255,255,0.55);
  color: inherit;
  letter-spacing: 0.03em;
  border: 1px solid currentColor;
  opacity: 0.75;
}

.timesheet-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 15px 20px;
  font-size: 15px; font-weight: 600; font-family: inherit;
  color: #1a7a35; background: var(--green-dim);
  border: 1.5px solid rgba(52,199,89,0.30); border-radius: 14px;
  cursor: pointer; margin-top: 10px; transition: all 0.18s;
  text-decoration: none;
}
.timesheet-btn:hover { background: rgba(52,199,89,0.20); transform: translateY(-1px); }
.timesheet-btn:active { transform: scale(0.98); }
.upgrade-bar {
  display: none;
  margin: 10px 16px 0;
  background: linear-gradient(90deg, #5e5ce6, #7b7af4);
  border-radius: 14px;
  padding: 10px 14px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.upgrade-bar span { font-size: 12px; font-weight: 600; color: white; flex: 1; }
.upgrade-bar button { background: white; color: #5e5ce6; border: none; border-radius: 8px; padding: 6px 12px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; white-space: nowrap; flex-shrink: 0; }
.save-cal-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 16px 20px;
  background: none; border: 1.5px solid var(--accent-border);
  border-radius: 14px; cursor: pointer; color: var(--accent);
  font-size: 15px; font-weight: 700; font-family: inherit;
  transition: all 0.18s; margin-top: 10px;
}
.save-cal-btn:hover { background: var(--accent-dim); transform: translateY(-1px); }
.save-cal-btn:active { transform: scale(0.98); }
/* Save sheet */
.save-sheet {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--surface-card); border-radius: 20px 20px 0 0;
  z-index: 1100; padding: 0;
  transform: translateY(100%);
  transition: transform 0.38s cubic-bezier(0.16,1,0.3,1);
  max-height: 85vh; display: flex; flex-direction: column;
}
.save-sheet.open { transform: translateY(0); }

/* Invoice screen padding — matches timesheet .wrapper */
/* invoice padding now handled by base .rp-inner */

.inv-section { margin-bottom: 22px; }
.inv-section-label {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--text3); margin-bottom: 10px;
}
.inv-prefilled {
  font-size: 10px; font-weight: 500; text-transform: none; letter-spacing: 0;
  background: var(--accent-dim); color: var(--accent);
  border-radius: 6px; padding: 2px 7px; margin-left: 8px; vertical-align: middle;
}
.inv-opt {
  font-size: 11px; font-weight: 400; color: var(--text3); font-style: italic;
}
.inv-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.inv-full { grid-column: 1 / -1; }
.inv-billing-preview {
  background: var(--glass); border: 1.5px solid var(--glass-border);
  border-radius: 14px; padding: 14px 16px; font-size: 13px; line-height: 1.7;
  color: var(--text2);
}
.inv-billing-preview .inv-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 3px 0;
}
.inv-billing-preview .inv-row-total {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0 2px; border-top: 1.5px solid var(--glass-border);
  margin-top: 6px; font-weight: 700; font-size: 15px; color: var(--text);
}
.inv-billing-preview .inv-muted { color: var(--text3); font-style: italic; }
.inv-actions {
  display: flex; gap: 12px; margin-top: 8px; margin-bottom: 32px;
}
.inv-export-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 20px; font-size: 15px; font-weight: 700; font-family: inherit;
  border-radius: 14px; cursor: pointer; border: none; transition: all 0.18s;
  position: relative; overflow: hidden;
}
.inv-export-btn::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 100%);
  border-radius: 14px 14px 0 0; pointer-events: none;
}
.inv-pdf {
  background: linear-gradient(160deg, #ff4f4f 0%, #cc2222 100%);
  color: white; box-shadow: 0 6px 20px rgba(204,34,34,0.30);
}
.inv-pdf:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(204,34,34,0.40); }
.inv-word {
  background: linear-gradient(160deg, #2b7ce0 0%, #1a5fb4 100%);
  color: white; box-shadow: 0 6px 20px rgba(27,95,180,0.30);
}
.inv-word:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(27,95,180,0.40); }
.inv-export-btn:active { transform: scale(0.97); }
@media (max-width: 400px) {
  .inv-grid { grid-template-columns: 1fr; }
  .inv-full { grid-column: 1; }
  .inv-actions { flex-direction: column; }
}

.sep-call-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,0.06);
}
.sep-call-label {
  font-size: 13px; font-weight: 500; color: var(--text3);
  user-select: none;
}

/* ── Screen transition system ── */
@keyframes screenSlideUp {
  0%   { opacity: 0; transform: translateY(22px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes screenFadeIn {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Role picker entrance */
#rolepicker.active .back-btn        { animation: screenFadeIn 0.45s cubic-bezier(0.16,1,0.3,1) 0.05s both; }
#rolepicker.active .rp-title        { animation: screenSlideUp 0.55s cubic-bezier(0.16,1,0.3,1) 0.10s both; }
#rolepicker.active .rp-sub          { animation: screenFadeIn  0.50s cubic-bezier(0.16,1,0.3,1) 0.20s both; }
#rolepicker.active .role-group:nth-child(1) { animation: screenFadeIn 0.5s cubic-bezier(0.16,1,0.3,1) 0.25s both; }
#rolepicker.active .role-group:nth-child(2) { animation: screenFadeIn 0.5s cubic-bezier(0.16,1,0.3,1) 0.32s both; }
#rolepicker.active .role-group:nth-child(3) { animation: screenFadeIn 0.5s cubic-bezier(0.16,1,0.3,1) 0.38s both; }
#rolepicker.active .role-group:nth-child(4) { animation: screenFadeIn 0.5s cubic-bezier(0.16,1,0.3,1) 0.44s both; }
#rolepicker.active .role-group:nth-child(5) { animation: screenFadeIn 0.5s cubic-bezier(0.16,1,0.3,1) 0.50s both; }
#rolepicker.active .role-group:nth-child(6) { animation: screenFadeIn 0.5s cubic-bezier(0.16,1,0.3,1) 0.56s both; }
#rolepicker.active .role-group:nth-child(7) { animation: screenFadeIn 0.5s cubic-bezier(0.16,1,0.3,1) 0.62s both; }
#rolepicker.active .role-group:nth-child(8) { animation: screenFadeIn 0.5s cubic-bezier(0.16,1,0.3,1) 0.68s both; }

/* Calculator entrance */
#calculator.active .back-btn        { animation: screenFadeIn  0.40s cubic-bezier(0.16,1,0.3,1) 0.05s both; }
#calculator.active .calc-header     { animation: screenSlideUp 0.55s cubic-bezier(0.16,1,0.3,1) 0.10s both; }
#calculator.active .section:nth-of-type(1) { animation: screenFadeIn 0.5s cubic-bezier(0.16,1,0.3,1) 0.22s both; }
#calculator.active .section:nth-of-type(2) { animation: screenFadeIn 0.5s cubic-bezier(0.16,1,0.3,1) 0.32s both; }
#calculator.active .calc-btn        { animation: screenFadeIn  0.5s cubic-bezier(0.16,1,0.3,1) 0.42s both; }
#calculator.active .results.show    { animation: screenSlideUp 0.55s cubic-bezier(0.16,1,0.3,1) 0s both; }

/* Invoice entrance */
#invoice.active .back-btn           { animation: screenFadeIn  0.40s cubic-bezier(0.16,1,0.3,1) 0.05s both; }
#invoice.active .rp-title           { animation: screenSlideUp 0.55s cubic-bezier(0.16,1,0.3,1) 0.10s both; }
#invoice.active .rp-sub             { animation: screenFadeIn  0.50s cubic-bezier(0.16,1,0.3,1) 0.18s both; }
#invoice.active .inv-section:nth-child(1) { animation: screenFadeIn 0.5s cubic-bezier(0.16,1,0.3,1) 0.26s both; }
#invoice.active .inv-section:nth-child(2) { animation: screenFadeIn 0.5s cubic-bezier(0.16,1,0.3,1) 0.34s both; }
#invoice.active .inv-section:nth-child(3) { animation: screenFadeIn 0.5s cubic-bezier(0.16,1,0.3,1) 0.42s both; }
#invoice.active .inv-section:nth-child(4) { animation: screenFadeIn 0.5s cubic-bezier(0.16,1,0.3,1) 0.50s both; }
#invoice.active .inv-actions        { animation: screenFadeIn  0.5s cubic-bezier(0.16,1,0.3,1) 0.58s both; }


/* ── Invoice Address Book ── */
.inv-ac-wrap { position:relative; }
.inv-ac-dropdown {
  position:absolute; top:calc(100% + 4px); left:0; right:0;
  background:var(--surface-card,#f2f2f7);
  border:1px solid var(--border-subtle);
  border-radius:14px;
  box-shadow:0 8px 32px rgba(0,0,0,0.18);
  z-index:500;
  overflow:hidden;
  max-height:220px;
  overflow-y:auto;
}
.inv-ac-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; cursor:pointer;
  border-bottom:1px solid var(--border-row);
  transition:background 0.12s;
  -webkit-tap-highlight-color:transparent;
}
.inv-ac-item:last-child { border-bottom:none; }
.inv-ac-item:active { background:var(--accent-dim); }
.inv-ac-item-name { font-size:14px; font-weight:600; color:var(--text); }
.inv-ac-item-sub  { font-size:11px; color:var(--text3); margin-top:1px; }
.inv-ac-item-del  {
  width:24px; height:24px; border-radius:6px; border:none; background:none;
  color:var(--text3); font-size:16px; cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.12s;
}
.inv-ac-item-del:active { background:var(--red-dim); color:var(--red); }
.inv-ac-add-btn {
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding:11px 16px; font-size:13px; font-weight:700; color:var(--accent);
  cursor:pointer; background:var(--accent-dim);
  border-top:1px solid var(--border-subtle);
}
/* Email invoice sheet */
.inv-email-sheet {
  position:fixed; bottom:0; left:0; right:0;
  background:var(--surface-card,#f2f2f7);
  border-radius:24px 24px 0 0;
  z-index:3001; padding:0;
  transform:translateY(100%);
  transition:transform 0.38s cubic-bezier(0.16,1,0.3,1);
  max-height:65vh;
}
.inv-email-sheet.open { transform:translateY(0); }
[data-theme="dark"] .inv-email-sheet { background:var(--surface-card) !important; }