/* TrueTotal — shared styles for the standalone site (index, privacy, terms, about) */
:root{
  color-scheme: light;
  --grad-a:#405DE6; --grad-b:#833AB4; --grad-c:#C13584; --grad-d:#E1306C; --grad-e:#F77737; --grad-f:#FCAF45;
  --gradient: linear-gradient(115deg, var(--grad-a) 0%, var(--grad-b) 24%, var(--grad-c) 46%, var(--grad-d) 64%, var(--grad-e) 82%, var(--grad-f) 100%);
  --accent: var(--grad-c);
  --bg:#FBF8FC;
  --surface:#FFFFFF;
  --surface-2:#F4EEFA;
  --surface-3:#EEE4F6;
  --border:#E5DAEF;
  --text:#221226;
  --text-dim:#6C5B76;
  --text-faint:#9C8CA6;
  --success-bg:#E3F5EC;
  --success-text:#0E7A54;
  --shadow-accent: 0 10px 26px -10px rgba(193,53,132,0.45);
  --shadow-card: 0 1px 2px rgba(34,18,38,0.04), 0 10px 30px -18px rgba(34,18,38,0.18);
  --radius-lg:22px;
  --radius-md:16px;
  --radius-sm:11px;
  --radius-pill:999px;
  --track: rgba(120, 60, 140, 0.12);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#150E1A; --surface:#1E1523; --surface-2:#271B2E; --surface-3:#2F2138; --border:#3A2A44;
    --text:#F5EEF9; --text-dim:#C3B2CD; --text-faint:#8C7A97;
    --success-bg:#123527; --success-text:#4FE0A6;
    --shadow-accent: 0 10px 30px -8px rgba(225,48,108,0.35);
    --shadow-card: 0 1px 0 rgba(0,0,0,0.3), 0 20px 40px -24px rgba(0,0,0,0.65);
    --track: rgba(255,255,255,0.08);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#150E1A; --surface:#1E1523; --surface-2:#271B2E; --surface-3:#2F2138; --border:#3A2A44;
  --text:#F5EEF9; --text-dim:#C3B2CD; --text-faint:#8C7A97;
  --success-bg:#123527; --success-text:#4FE0A6;
  --shadow-accent: 0 10px 30px -8px rgba(225,48,108,0.35);
  --shadow-card: 0 1px 0 rgba(0,0,0,0.3), 0 20px 40px -24px rgba(0,0,0,0.65);
  --track: rgba(255,255,255,0.08);
}

*{box-sizing:border-box;}
html,body{ height:auto; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  padding-inline:20px;
  padding-block:0 40px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ text-wrap:balance; margin:0; font-family:'Inter',sans-serif; letter-spacing:-0.02em; }
p{ margin:0; }
a{ color:inherit; }
.num{ font-variant-numeric: tabular-nums; }
.wrap{ max-width:920px; margin:0 auto; }
.skip-link{
  position:absolute; left:-999px; top:auto; background:var(--surface); color:var(--text); padding:10px 16px;
  border-radius:var(--radius-md); z-index:100; box-shadow:var(--shadow-card);
}
.skip-link:focus{ left:20px; top:20px; }

/* ---------- Topbar ---------- */
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding-block:18px; flex-wrap:wrap; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand-mark{
  width:36px; height:36px; border-radius:11px; background:var(--gradient);
  display:flex; align-items:center; justify-content:center; flex:none; box-shadow: var(--shadow-accent);
}
.brand-mark svg{ width:19px; height:19px; }
.brand-mark path, .brand-mark line{ stroke:#fff; }
.brand-name{ font-weight:800; font-size:1.15rem; color:var(--text); }
.top-controls{ display:flex; align-items:center; gap:8px; }

.seg{ display:inline-flex; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-pill); padding:3px; gap:2px; }
.seg button{ all:unset; cursor:pointer; padding:6px 13px; border-radius:var(--radius-pill); font-size:0.82rem; font-weight:700; color:var(--text-dim); transition:background .15s,color .15s; }
.seg button.active{ background:var(--gradient); color:#fff; box-shadow: var(--shadow-accent); }

.icon-btn{
  all:unset; cursor:pointer; width:36px; height:36px; border-radius:var(--radius-pill);
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text-dim); flex:none;
}
.icon-btn:hover{ color:var(--text); }
.icon-btn svg{ width:17px; height:17px; }
.icon-btn .moon{ display:none; }
:root[data-theme="dark"] .icon-btn .sun{ display:none; }
:root[data-theme="dark"] .icon-btn .moon{ display:block; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .icon-btn .sun{ display:none; }
  :root:not([data-theme="light"]) .icon-btn .moon{ display:block; }
}

/* ---------- Hero ---------- */
.hero{ padding-block:6px 22px; display:flex; flex-direction:column; gap:8px; }
.hero h1{ font-size:clamp(1.5rem, 4vw, 2rem); }
.hero p{ color:var(--text-dim); font-size:0.98rem; max-width:56ch; }

/* ---------- Card ---------- */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); padding:22px; margin-block-end:18px; }
.tabs{ display:flex; background:var(--surface-2); border-radius:var(--radius-pill); padding:4px; gap:4px; margin-block-end:20px; }
.tabs button{
  all:unset; flex:1; text-align:center; cursor:pointer; padding:10px 8px; border-radius:var(--radius-pill);
  font-weight:700; font-size:0.88rem; color:var(--text-dim); display:flex; align-items:center; justify-content:center; gap:6px; transition:background .15s,color .15s;
}
.tabs button svg{ width:15px; height:15px; }
.tabs button.active{ background:var(--gradient); color:#fff; box-shadow:var(--shadow-accent); }

.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-block-end:16px; }
@media (max-width:520px){ .form-row{ grid-template-columns:1fr; } }
.field label{ display:block; font-size:0.78rem; font-weight:700; color:var(--text-dim); margin-block-end:7px; text-transform:uppercase; letter-spacing:.04em; }
.field-input{ display:flex; align-items:center; gap:8px; background:var(--surface-2); border:1.5px solid var(--border); border-radius:var(--radius-md); padding:0 14px; height:52px; transition:border-color .15s; }
.field-input:focus-within{ border-color:var(--accent); }
.field-input svg{ width:18px; height:18px; color:var(--text-faint); flex:none; }
.field-input .prefix{ font-weight:700; color:var(--text-dim); }
.field-input input, .field-input select{ all:unset; flex:1; font-size:1.05rem; font-weight:700; color:var(--text); font-family:inherit; min-width:0; }
.field-input select{ cursor:pointer; }
.field-input select:focus{ outline:none; }

.result{ border-top:1px dashed var(--border); padding-block-start:18px; margin-block-start:4px; }
.result-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-block-end:14px; flex-wrap:wrap; }
.result-head h2{ font-size:1rem; display:flex; align-items:center; gap:8px; }
.result-head h2 svg{ width:17px; height:17px; color:var(--text-faint); }
.copy-btn{
  all:unset; cursor:pointer; display:flex; align-items:center; gap:6px; font-size:0.8rem; font-weight:700;
  color:var(--text-dim); border:1.5px solid var(--border); border-radius:var(--radius-pill); padding:7px 14px; transition:border-color .15s, color .15s;
}
.copy-btn:hover{ border-color:var(--accent); color:var(--accent); }
.copy-btn svg{ width:14px; height:14px; }

.receipt{ display:flex; flex-direction:column; gap:2px; }
.r-row{ display:flex; align-items:baseline; justify-content:space-between; padding-block:8px; font-size:0.92rem; color:var(--text-dim); border-bottom:1px solid var(--border); }
.r-row span:last-child{ font-weight:700; color:var(--text); }
.r-row.total{ border-bottom:none; padding-block-start:14px; }
.r-row.total span:first-child{ font-weight:800; color:var(--text); font-size:1rem; }
.r-row.total span:last-child{ font-size:1.55rem; font-weight:800; background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent; }
.badge{ display:inline-flex; align-items:center; gap:5px; font-size:0.72rem; font-weight:800; padding:4px 10px; border-radius:var(--radius-pill); background:var(--success-bg); color:var(--success-text); white-space:nowrap; }

.disclaimer{ display:flex; gap:10px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-md); padding:14px; margin-block-start:16px; font-size:0.82rem; color:var(--text-dim); line-height:1.5; }
.disclaimer svg{ width:17px; height:17px; flex:none; margin-block-start:1px; color:var(--text-faint); }
.disclaimer strong{ color:var(--text); }

/* ---------- Table section ---------- */
.table-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-block-end:14px; flex-wrap:wrap; }
.table-head h2{ font-size:1.05rem; }
.search-box{ display:flex; align-items:center; gap:8px; background:var(--surface-2); border:1.5px solid var(--border); border-radius:var(--radius-pill); padding:0 14px; height:40px; min-width:200px; }
.search-box svg{ width:15px; height:15px; color:var(--text-faint); flex:none; }
.search-box input{ all:unset; font-family:inherit; font-size:0.88rem; color:var(--text); flex:1; }

.table-scroll{ overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-md); }
table{ width:100%; border-collapse:collapse; min-width:560px; font-size:0.87rem; }
thead th{
  text-align:left; padding:11px 14px; font-size:0.72rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--text-faint); background:var(--surface-2); position:sticky; top:0; cursor:pointer; user-select:none; white-space:nowrap;
}
thead th span{ display:inline-flex; align-items:center; gap:4px; }
thead th svg{ width:12px; height:12px; opacity:.5; }
tbody td{ padding:10px 14px; border-top:1px solid var(--border); color:var(--text-dim); white-space:nowrap; }
tbody tr.current{ background:var(--surface-3); }
tbody td:first-child{ color:var(--text); font-weight:700; }
.bar-cell{ display:flex; align-items:center; gap:8px; }
.bar-track{ width:64px; height:6px; border-radius:99px; background:var(--track); overflow:hidden; flex:none; }
.bar-fill{ height:100%; border-radius:99px; background:var(--gradient); }
.rate-val{ font-weight:700; color:var(--text); min-width:48px; }

/* ---------- Info / FAQ sections ---------- */
.section-title{ font-size:1.3rem; margin-block-end:14px; }
.prose{ color:var(--text-dim); font-size:0.96rem; line-height:1.7; }
.prose p + p{ margin-block-start:12px; }
.prose h2{ color:var(--text); font-size:1.05rem; margin-block:18px 8px; }
.prose h2:first-child{ margin-block-start:0; }
.prose ul{ margin:10px 0; padding-inline-start:22px; }
.prose li{ margin-block-end:6px; }
.prose a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }

.faq-item{ border-bottom:1px solid var(--border); }
.faq-item:last-child{ border-bottom:none; }
.faq-q{
  all:unset; display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%;
  cursor:pointer; padding-block:14px; font-weight:700; font-size:0.95rem;
}
.faq-q svg{ width:16px; height:16px; color:var(--text-faint); flex:none; transition:transform .15s; }
.faq-item[open] .faq-q svg{ transform:rotate(180deg); }
.faq-a{ color:var(--text-dim); font-size:0.9rem; line-height:1.65; padding-block-end:16px; padding-inline-end:26px; }

/* ---------- Legal pages ---------- */
.legal-updated{ font-size:0.8rem; color:var(--text-faint); margin-block-end:18px; }

/* ---------- Ad slots ---------- */
.ad-slot{
  display:flex; align-items:center; justify-content:center; min-height:100px; background:var(--surface-2);
  border:1px dashed var(--border); border-radius:var(--radius-md); color:var(--text-faint); font-size:0.75rem;
  text-transform:uppercase; letter-spacing:.06em; margin-block-end:18px;
}

/* ---------- Cookie consent banner ---------- */
.consent-banner{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:50; max-width:640px; margin-inline:auto;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-card);
  padding:16px; display:flex; flex-direction:column; gap:12px;
}
.consent-banner p{ font-size:0.84rem; color:var(--text-dim); line-height:1.5; }
.consent-banner a{ color:var(--accent); text-decoration:underline; }
.consent-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.btn-ghost{
  all:unset; cursor:pointer; font-weight:700; font-size:0.82rem; color:var(--text-dim); border:1.5px solid var(--border);
  border-radius:var(--radius-pill); padding:8px 16px;
}
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
.btn-solid{
  all:unset; cursor:pointer; font-weight:800; font-size:0.82rem; color:#fff; background:var(--gradient);
  border-radius:var(--radius-pill); padding:8px 18px; box-shadow:var(--shadow-accent);
}

footer{ text-align:center; padding-block-start:22px; color:var(--text-faint); font-size:0.78rem; line-height:1.7; }
footer a{ color:var(--text-dim); }
.footer-links{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-block-end:8px; }
.footer-links a{ text-decoration:underline; text-underline-offset:2px; }

.icon path,.icon circle,.icon polyline,.icon line{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }