/* Homepage (body.lt): the blue design, light by default, dark with html.dk (the sun / moon switch in the navbar).
   site.css is the base; this file swaps its colour tokens, fixes the parts that hard-code the old dark look, and styles
   the new hero, stat bar, How it works, toolkit and two-column FAQ. Other pages keep their own look. */

body.lt {
    --bg: #ffffff;
    --bg-1: #ffffff;
    --bg-2: #f5f8fc;
    --bg-3: #edf2f9;
    --tint: #f4f7fc;
    --card: #ffffff;
    --line: #e6ebf2;
    --line-2: #d6deea;
    --text: #2b3445;
    --bright: #0b1324;
    --muted: #5a6578;
    --faint: #7c879a;
    --accent: #2563eb;
    --accent-hi: #1d4ed8;
    --accent-lo: #1e40af;
    --accent-ink: #ffffff;
    --accent-soft: rgba(37,99,235,.08);
    --yes: #16a34a;
    --no: #dc2626;
    --ring-bg: #e6edf7;
    --edge: none;
    --surface: #ffffff;
    --shadow: 0 1px 2px rgba(15,23,42,.04), 0 10px 30px -14px rgba(15,23,42,.16);
    --shadow-lg: 0 40px 80px -36px rgba(15,23,42,.35);
    --wash: rgba(37,99,235,.09);
    background: var(--bg); color: var(--text);
}
html.dk body.lt {                        /* dark = the site's original colours: near-black greys and the teal */
    --bg: #111111;
    --bg-1: #161616;
    --bg-2: #1b1b1b;
    --bg-3: #232323;
    --tint: #141414;
    --card: #161616;
    --line: rgba(255,255,255,.06);
    --line-2: rgba(255,255,255,.11);
    --text: #e4e4e4;
    --bright: #f2f2f2;
    --muted: #9b9ca1;
    --faint: #85868b;
    --accent: #2fb5a0;
    --accent-hi: #43c9b3;
    --accent-lo: #26998a;
    --accent-ink: #04130f;
    --accent-soft: rgba(47,181,160,.12);
    --yes: #3fb950;
    --no: #f0857d;
    --ring-bg: #232323;
    --surface: #161616;
    --shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 12px 32px -16px rgba(0,0,0,.8);
    --shadow-lg: 0 40px 80px -30px rgba(0,0,0,.9);
    --wash: rgba(255,255,255,.03);
    color-scheme: dark;
}

/* ---------- base pieces that hard-code the old dark look ---------- */
.lt .btn { background: var(--card); }
.lt .btn:hover { border-color: var(--line-2); background: var(--bg-2); }
.lt .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.lt .btn-primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); box-shadow: 0 10px 24px -12px rgba(37,99,235,.7); }
.lt .surface { background: var(--card); box-shadow: var(--shadow); }
.lt ::selection { background: rgba(37,99,235,.18); }
html:not(.dk) .lt .ico[data-brand="ios"] { --b-bg: #111; --b-fg: #fff; }

/* navbar */
.lt .nav-shell { background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); }
.lt .nav-shell.scrolled { background: transparent; backdrop-filter: none; }
.lt .nav-shell.scrolled .nav { background: color-mix(in srgb, var(--card) 96%, transparent); border-color: var(--line); box-shadow: 0 14px 36px -18px rgba(15,23,42,.3); }
.lt .nav-hover { background: var(--bg-3); }
.lt .nav-link { color: var(--text); }
.lt .nav-link:hover, .lt .nav-link.active { color: var(--accent); }
.bm-p { width: 32px; height: 32px; border-radius: 9px; background: var(--accent); color: #fff; font: 800 19px/32px var(--font); text-align: center; letter-spacing: -.02em; }
.lt .brand-name span { color: var(--bright); font-weight: 700; margin-left: 4px; }
.lt .mega, .lt .m-menu { background: var(--card); box-shadow: 0 24px 60px -24px rgba(15,23,42,.35); }
.lt .nav-sep { display: none; }
.lt .nav-signin { height: 40px; padding: 0 18px; border-radius: 99px; color: var(--bright); border: 1px solid var(--line-2); background: var(--card); box-shadow: var(--shadow); }
.lt .nav-signin:hover { background: var(--bg-2); color: var(--bright); }
.lt .nav-actions { gap: 10px; }
.lt .nav-actions .btn-primary { height: 40px; padding: 0 20px; border-radius: 99px; }
.lt .nav-actions .btn { border-radius: 99px; }
.lt .nav-user b { color: var(--accent); }
.theme-sw { display: inline-flex; gap: 2px; padding: 3px; border-radius: 99px; background: var(--bg-3); margin-right: 4px; }
.theme-sw button { width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; font-size: 14px; display: grid; place-items: center; transition: background .2s, color .2s; }
html:not(.dk) .theme-sw [data-theme-set="light"], html.dk .theme-sw [data-theme-set="dark"] {   /* from the page's class, so switches swapped in later show it too */ background: var(--card); color: var(--bright); box-shadow: 0 1px 3px rgba(15,23,42,.18); }

/* sections */
.lt .block { padding: 96px 0; }
.lt .block.tint, .lt section.tint { background: var(--tint); border-color: var(--line); }
.lt h2 { color: var(--bright); }
.lt .svc-head h2, .lt .lt-faq-head h2 { font-size: 42px; line-height: 1.1; letter-spacing: -.03em; font-weight: 700; }
.lt .svc-head p, .lt .faq-head p { color: var(--muted); font-size: 17px; }
.lt-kicker { display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 11px; border-radius: 99px; background: var(--accent-soft);
    color: var(--accent); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 16px; }
.lt-kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------- hero ---------- */
.lt .lt-hero { padding: 40px 0 64px; overflow: hidden;
    background: radial-gradient(55% 75% at 82% 30%, var(--wash), transparent 70%), radial-gradient(35% 45% at 0% 0%, var(--wash), transparent 70%), var(--bg); }
.lt .lt-hero::before { display: none; }
.lt-hero-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 48px; align-items: center; }
.lt-pill { display: inline-flex; align-items: center; gap: 9px; height: 34px; padding: 0 14px 0 5px; border-radius: 99px; border: 1px solid var(--line);
    background: var(--card); font-size: 13.5px; color: var(--text); margin-bottom: 24px; box-shadow: var(--shadow); }
.lt-pill .pi { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: 11px; }
.lt .announce { background: var(--card); box-shadow: var(--shadow); border-color: var(--line); }
.lt .announce-text { color: var(--text); }
.lt .lt-hero h1 { font-size: 60px; line-height: 1.03; letter-spacing: -.045em; font-weight: 700; color: var(--bright); max-width: 13ch; }
.lt .lt-hero h1 em { font-style: normal; color: var(--accent); }
.lt .lt-hero .lead { color: var(--muted); font-size: 18px; line-height: 1.6; max-width: 42ch; margin-top: 20px; }
.lt .lt-hero .cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.lt .lt-hero .cta .btn { height: 54px; padding: 0 26px; border-radius: 99px; font-size: 15.5px; font-weight: 600; }
.lt .lt-hero .cta .btn-primary { box-shadow: 0 14px 30px -14px rgba(37,99,235,.8); }
.lt-btn-w { border-color: var(--line) !important; box-shadow: var(--shadow); color: var(--bright) !important; }
.lt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.lt-chip { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 5px; border-radius: 9px; border: 1px solid var(--line);
    background: var(--card); color: var(--text); font-size: 13px; text-decoration: none; transition: border-color .2s, transform .2s; }
.lt-chip:hover { border-color: var(--accent); transform: translateY(-1px); }
.lt-chip .ico { width: 24px; height: 24px; font-size: 12px; border-radius: 6px; border: 0; background: var(--b-bg); color: var(--b-fg); }
.lt-chip .ico em { display: none; }

/* the panel (drawn) */
.lt-device { position: relative; padding: 18px 0 18px; }
.lt-glass { position: absolute; top: 0; bottom: -10px; left: 8%; right: -60px; border-radius: 28px; border: 1px solid rgba(255,255,255,.7);
    background: linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,.12)); backdrop-filter: blur(6px); transform: translate(36px, -14px); }
html.dk .lt-glass { border-color: rgba(148,163,184,.14); background: linear-gradient(135deg, rgba(59,130,246,.10), rgba(255,255,255,.02)); }
.app { position: relative; display: grid; grid-template-columns: 150px 1fr; border-radius: 18px; background: var(--card); border: 1px solid var(--line);
    box-shadow: var(--shadow-lg); overflow: hidden; font-size: 10.5px; color: var(--text); }
.app-side { border-right: 1px solid var(--line); padding: 16px 10px; display: flex; flex-direction: column; gap: 3px; background: var(--card); }
.app-side > span { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 8px; color: var(--muted); }
.app-side > span i { width: 12px; font-size: 10px; text-align: center; }
.app-side > span.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.app-side .app-brand { font-weight: 700; color: var(--bright); padding: 2px 8px 14px; font-size: 11px; gap: 7px; }
.bm { width: 18px; height: 18px; border-radius: 5px; background: var(--accent); color: #fff; font: 800 11px/18px var(--font); text-align: center; display: inline-block; flex: none; }
.app-main { padding: 12px 16px 14px; min-width: 0; }
.app-top { display: flex; justify-content: flex-end; align-items: center; gap: 12px; color: var(--faint); font-size: 11px; }
.app-top .av { width: 20px; height: 20px; border-radius: 50%; background: #1e293b; color: #fff; display: grid; place-items: center; font-size: 9px; font-weight: 600; }
.app-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 12px; margin-top: 4px; }
.app-h b { display: block; font-size: 15px; color: var(--bright); font-weight: 700; }
.app-h small { font-size: 10px; color: var(--faint); }
.app-drop { margin-top: 12px; border: 1.5px dashed var(--line-2); border-radius: 12px; display: grid; justify-items: center; text-align: center; padding: 16px 10px 14px; gap: 3px; }
.app-drop .up { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: 12px; margin-bottom: 6px; }
.app-drop b { font-size: 10.5px; color: var(--bright); }
.app-drop small { font-size: 9px; color: var(--faint); }
.app-drop .sel { margin-top: 8px; padding: 6px 16px; border-radius: 7px; background: var(--accent); color: #fff; font-size: 9.5px; font-weight: 600; display: inline-flex; gap: 10px; align-items: center; }
.app-drop .sel i { font-size: 7px; }
.app-prog { display: block; width: 78%; height: 3px; margin-top: 8px; border-radius: 2px; background: var(--bg-3); overflow: hidden; opacity: 0; }
.app-prog i { display: block; height: 100%; background: var(--accent); border-radius: 2px; transform-origin: left; }
.app-stats { display: grid; gap: 8px; align-content: start; }
.app-stats > div { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--card); box-shadow: var(--shadow); }
.app-stats .si { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-size: 12px; flex: none; }
.app-stats .t .si { background: #22c55e; } .app-stats .y .si { background: var(--accent); } .app-stats .n .si { background: #ef4444; }
.app-stats small { display: block; font-size: 9px; color: var(--faint); }
.app-stats b { font-size: 14px; font-weight: 700; color: var(--bright); font-variant-numeric: tabular-nums; }
.app-stats em { font-style: normal; font-size: 9px; color: var(--muted); margin-left: 4px; padding: 1px 5px; border-radius: 4px; background: var(--bg-3); }
.app-res { margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.app-res-h { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.app-res-h b { flex: 1; color: var(--bright); font-size: 12px; }
.app-res-h .ex { padding: 3px 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--text); }
.app-res-h .ex i { font-size: 7px; margin-left: 3px; }
.app-t { width: 100%; border-collapse: collapse; font-size: 9.5px; }
.app-t th { text-align: left; font-weight: 500; color: var(--faint); padding: 7px 12px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.app-t td { padding: 7px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; color: var(--text); }
.app-t tr:last-child td { border-bottom: 0; }
.app-t td:first-child { font-family: var(--mono); color: var(--bright); }
.app-t .ok, .app-t .no { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; transform-origin: left center; }
.app-t .ok { color: var(--yes); } .app-t .no { color: var(--no); }
.app-t .fi { width: 13px; height: 10px; border-radius: 2px; vertical-align: -1px; }

/* ---------- stat bar ---------- */
.lt-statbar { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.lt-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; padding-top: 28px; padding-bottom: 28px; }
.lt-stats > div { display: flex; align-items: center; gap: 14px; }
.lt-stats .si { width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: 18px; }
.lt-stats b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--bright); line-height: 1.15; }
.lt-stats small { display: block; font-size: 13.5px; color: var(--muted); }

/* ---------- How it works ---------- */
.lt-how { position: relative; padding: 64px 0 40px; overflow: hidden; background: var(--tint); }
.lt-how-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 32px; align-items: center; }
.lt-how-head { text-align: left; max-width: none; margin: 0 0 40px; }   /* on the same edge as the steps under it */
.lt-how-head h2 { font-size: 40px; font-weight: 700; letter-spacing: -.03em; }
.lt-how-head p { color: var(--muted); font-size: 17px; margin-top: 6px; }
.lt-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
/* one numbered circle per step, a thin line to the next one */
.lt-steps li { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.lt-steps li:not(:last-child)::after { content: ""; position: absolute; top: 20px; left: 52px; right: -16px; height: 1px; background: var(--line-2); }
.lt-steps .n { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 15px; background: var(--accent-soft); color: var(--accent); transition: background .35s, color .35s; }
.lt-steps b { margin-top: 18px; font-size: 18px; font-weight: 700; color: var(--bright); }
.lt-steps small { margin-top: 6px; font-size: 14px; color: var(--muted); line-height: 1.5; }
.lt-steps li.on .n { background: var(--accent); color: var(--accent-ink); }
.lt-how-r { position: relative; height: 420px; }
.lt-how-r .ph { position: absolute; left: 4%; top: 0; width: 230px; border-radius: 34px; background: #0f172a; padding: 8px; box-shadow: var(--shadow-lg); rotate: -7deg; }
html.dk .lt-how-r .ph, html.dk .ph-notch { background: #0a0a0a; }          /* a black phone in the dark look, not the light look's navy */
html.dk .lt-how-r .ph { box-shadow: 0 0 0 1px var(--line-2), var(--shadow-lg); }
.ph-in { position: relative; border-radius: 27px; background: var(--card); padding: 30px 14px 16px; font-size: 10px; color: var(--text); overflow: hidden; }
.ph-notch { position: absolute; left: 50%; top: 8px; width: 70px; height: 16px; margin-left: -35px; border-radius: 9px; background: #0f172a; }
.ph-top { display: flex; align-items: center; gap: 7px; } .ph-top b { flex: 1; font-size: 11px; color: var(--bright); } .ph-top i { color: var(--faint); }
.ph-tabs { display: flex; gap: 6px; margin-top: 12px; } .ph-tabs span { padding: 5px 10px; border-radius: 99px; color: var(--muted); font-size: 9.5px; }
.ph-tabs span.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.ph-sum { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.ph-ring { width: 84px; flex: none; }
.ph-sum b { display: block; font-size: 20px; font-weight: 700; color: var(--bright); font-variant-numeric: tabular-nums; }
.ph-sum small { display: block; color: var(--muted); font-size: 10px; }
.ph-sum em { font-style: normal; font-size: 10px; color: var(--yes); font-weight: 600; }
.ph-rec { margin-top: 14px; display: grid; gap: 8px; }
.ph-rec > b { font-size: 11px; color: var(--bright); }
.ph-rec > div { display: flex; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.ph-rec > div > span:nth-child(2) { flex: 1; display: grid; font-size: 9.5px; color: var(--bright); }
.ph-rec small { font-size: 8.5px; color: var(--faint); }
.ph-rec .r { display: grid; text-align: right; font: 600 9.5px var(--mono); color: var(--bright); }
.fi-ic { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: var(--bg-3); color: var(--muted); font-size: 10px; }
.fi-ic.g { background: rgba(34,197,94,.14); color: #16a34a; }
.lt-chart { position: absolute; right: 0; top: 34px; width: 230px; padding: 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-lg); rotate: -4deg; font-size: 10px; }
.lt-chart > b { display: block; font-size: 11px; color: var(--bright); }
.lt-chart > b i { color: var(--accent); margin-right: 4px; }
.lt-chart .lg { display: flex; gap: 12px; margin-top: 8px; color: var(--muted); font-size: 9px; }
.lt-chart .lg i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.lt-chart .g { background: #22c55e; } .lt-chart .r { background: #ef4444; }
.lt-chart .bars { display: flex; align-items: flex-end; gap: 10px; height: 90px; margin-top: 12px; padding-bottom: 2px; border-bottom: 1px solid var(--line); }
.lt-chart .bars span { flex: 1; display: flex; align-items: flex-end; gap: 2px; height: 100%; }
.lt-chart .bars i { flex: 1; border-radius: 3px 3px 0 0; transform-origin: bottom; }
.lt-chart .days { display: flex; gap: 10px; margin-top: 5px; color: var(--faint); font-size: 8px; } .lt-chart .days span { flex: 1; text-align: center; }

/* ---------- toolkit ---------- */
.lt-tool { background: var(--bg); }
.lt-tool-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: stretch; }
/* a calm band runs the full height of the section (one flat colour, no glow), the laptop sits in its middle, next to the text */
.lt-tool-l { position: relative; display: flex; align-items: center; justify-content: flex-end; padding: 64px 48px 64px max(24px, calc((100vw - 1180px) / 2 + 24px)); border-radius: 0 28px 28px 0; overflow: hidden;
    background: var(--bg-3); }
.lp { position: relative; width: 100%; max-width: 600px; filter: drop-shadow(0 24px 36px rgba(15,23,42,.18)); }
.lp-screen { border: 9px solid #1f2937; border-bottom-width: 12px; border-radius: 16px 16px 4px 4px; background: #0b1220; overflow: hidden; }
.lp-base { height: 12px; margin: 0 -26px; border-radius: 0 0 14px 14px; background: #b8c3d1; }
.lp-app { display: grid; grid-template-columns: 34px 1fr; min-height: 230px; color: #cbd5e1; font-size: 9px; }
.lp-side { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 0; border-right: 1px solid rgba(148,163,184,.15); }
.lp-side i { width: 12px; height: 4px; border-radius: 2px; background: rgba(148,163,184,.3); } .lp-side i.on { background: #3b82f6; }
.lp-main { padding: 10px 12px; }
.lp-main > b { font-size: 11px; color: #f1f5f9; }
.lp-main table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.lp-main th { text-align: left; font-weight: 500; color: #64748b; padding: 5px 6px; border-bottom: 1px solid rgba(148,163,184,.15); }
.lp-main td { padding: 5px 6px; border-bottom: 1px solid rgba(148,163,184,.1); white-space: nowrap; }
.lp-main td:first-child { font-family: var(--mono); color: #e2e8f0; }
.lp-main .ok { color: #4ade80; } .lp-main .no { color: #f87171; }
.lp-main .fi { width: 12px; height: 9px; border-radius: 2px; }
.lt-tool-r { align-self: center; padding: 64px max(24px, calc((100vw - 1180px) / 2 + 24px)) 64px 56px; }
.lt-tool-r h2 { font-size: 36px; line-height: 1.12; font-weight: 700; letter-spacing: -.03em; max-width: 16ch; }
.lt-tool-r > p { color: var(--muted); font-size: 16px; line-height: 1.6; margin-top: 14px; max-width: 52ch; }
.lt-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; margin-top: 30px; }
.lt-feats > div, .lt-feats > a { display: flex; align-items: flex-start; gap: 14px; text-decoration: none; color: inherit; }
.fi-b { width: 46px; height: 46px; flex: none; border-radius: 13px; display: grid; place-items: center; font-size: 18px; }
.fi-b { background: var(--accent-soft); color: var(--accent); }   /* one colour for the four, like the rest of the page */
.lt-feats b { display: block; font-size: 15px; font-weight: 600; color: var(--bright); }
.lt-feats small { display: block; font-size: 13.5px; color: var(--muted); line-height: 1.45; margin-top: 2px; }
.lt-feats a:hover b { color: var(--accent); }

/* ---------- services, Hash Channels, FAQ, CTA, footer, notices ---------- */
/* the service list: plain rows, only the open one sits on a soft card (no box around every row) */
.lt .svc-tab { background: transparent; border-color: transparent; }
.lt .svc-tab:hover { background: var(--bg-2); }
.lt .svc-tab[aria-selected="true"] { background: var(--bg-2); border-color: var(--line); box-shadow: none; }
.lt .svc-panel { background: var(--card); }
.lt .price-lock { background: var(--bg-2); border: 0; }
@media (max-width: 1000px) { .lt .svc-tab { border-color: var(--line); } }   /* a row of chips there: each one keeps its outline */
.lt .hc-sec { background: var(--tint); padding: 0 0 96px; }
.lt #services:has(+ .hc-sec) { border-bottom: 0; }
.lt .hc-band { background: var(--card); border-color: var(--line-2); box-shadow: var(--shadow); padding: 28px 32px; }
.lt .hc-band.hc-card { animation: none; }
.lt .hc-band-ico { color: var(--accent); background: var(--accent-soft); border-color: rgba(37,99,235,.2); }
.lt .hc-band .hc-live, .lt .hc-facts i { color: var(--accent); }
.lt .hc-band .hc-live i, .lt .hc-band .hc-live i::after { background: var(--accent); }
.lt .hc-card::before { background: conic-gradient(from var(--hc-a), transparent 0deg 250deg, rgba(37,99,235,.15) 280deg, #2563eb 340deg, transparent 360deg); }
.lt .hc-band-l > div { min-width: 0; }
.lt .hc-band h2 { font-size: 28px; }
.lt .hc-band p { max-width: 46ch; text-wrap: pretty; }
/* FAQ: the title on the left (it stays while you read), one list of questions on the right, a hairline between them, no boxes */
.lt #faq .wrap { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 72px; align-items: start; }
.lt-faq-head { display: flex; flex-direction: column; align-items: flex-start; gap: 0; text-align: left; max-width: none; margin: 0; position: sticky; top: 110px; }
.lt-faq-head p { margin-top: 12px; }
.lt-faq-head .btn { margin-top: 24px; }
.lt .lt-faq { max-width: none; width: 100%; margin: 0; display: block; border-top: 1px solid var(--line); }   /* site.css centres .faq with auto margins: in the grid that shrank it to its text */
.lt-faq-col { display: flex; flex-direction: column; }
.lt .faq details { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; padding: 0; }
.lt .faq details.is-open { background: transparent; }
.lt .faq details:has(summary:focus-visible) { border-color: var(--line); }
.lt .faq summary { font-size: 16.5px; font-weight: 500; padding: 22px 4px; transition: color .2s; }
.lt .faq summary:hover { color: var(--accent); }
.lt .faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.lt .faq .ans p, .lt .faq .ans ul { max-width: 68ch; padding-left: 4px; padding-right: 4px; }
.lt .faq .ans ul { padding-left: 22px; }
.lt .faq details.is-open .chev { color: var(--accent); }
@media (max-width: 900px) {
    .lt #faq .wrap { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .lt-faq-head { position: static; }
    .lt-faq-head .btn { margin-top: 18px; }
}
.lt .cta-band { background: var(--card); border-top-color: var(--accent); }
.lt .site-foot { background: var(--bg-2); border-top: 1px solid var(--line); }
.lt footer .f-soc { background: var(--card); }
.lt .order-toast, .lt .chat-teaser, .lt .chat-panel, .lt .sample-dlg { background: var(--card); box-shadow: 0 24px 60px -20px rgba(15,23,42,.35); }
.lt .sample-dlg::backdrop { background: rgba(11,19,36,.5); }
.lt .msg-quote { background: var(--bg-3); }
.lt .nq { background: var(--bg-2); }
.lt .fab { background: var(--accent); box-shadow: 0 14px 34px -12px rgba(37,99,235,.7); }

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) {
    .lt-hero-grid { grid-template-columns: 1fr; }
    .lt-device { max-width: 720px; width: 100%; margin: 8px auto 0; }
    .lt-glass { display: none; }
    .lt-how-grid { grid-template-columns: 1fr; }
    .lt-how-r { max-width: 520px; width: 100%; margin: 24px auto 0; }
    .lt-tool-grid { grid-template-columns: 1fr; }
    .lt-tool-l { border-radius: 0; padding: 40px 24px; justify-content: center; }
    .lt-tool-r { padding: 48px 24px; }
}
@media (max-width: 760px) {
    .lt .block { padding: 64px 0; }
    .lt .lt-hero h1 { font-size: 40px; }
    .lt .lt-hero .cta .btn { width: 100%; }
    .lt .svc-head h2, .lt .lt-faq-head h2, .lt-how-head h2 { font-size: 30px; }
    .lt-tool-r h2 { font-size: 28px; }
    .app { grid-template-columns: 1fr; }
    .app-side { display: none; }
    .app-grid { grid-template-columns: 1fr; }
    .app-t th:nth-child(4), .app-t td:nth-child(4) { display: none; }
    .lt-steps { grid-template-columns: 1fr; gap: 28px; }
    .lt-steps li::after { display: none; }
    .lt-how-r { height: 380px; }
    .lt-how-r .ph { width: 200px; left: 0; }
    .lt-chart { width: 190px; top: 150px; }
    .lt-feats { grid-template-columns: 1fr; }
    .lt .lt-faq { grid-template-columns: 1fr; }
    .lt .hc-band { padding: 22px 18px; }
    .theme-sw { display: none; }
}
@media (max-width: 480px) {
    .lp-main th:nth-child(4), .lp-main td:nth-child(4) { display: none; }
}

/* ---------- service pages (service.php, body.lt): the homepage look on the same pieces ---------- */
.lt .sp-hero { padding: 48px 0 72px; text-align: center;
    background: radial-gradient(50% 70% at 80% 20%, var(--wash), transparent 70%), radial-gradient(40% 55% at 10% 10%, var(--wash), transparent 70%), var(--bg); }
.lt .sp-hero h1 { font-size: 58px; line-height: 1.04; font-weight: 700; letter-spacing: -.045em; color: var(--bright); }
.lt .sp-hero .lead { color: var(--muted); }
.lt .sp-crumbs a { color: var(--muted); }
.lt .sp-crumbs a:hover { color: var(--accent); }
.lt .sp-pill { background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--text); }
.lt .sp-btns .btn { height: 52px; padding: 0 26px; border-radius: 99px; font-weight: 600; }
.lt .sp-btns .btn-primary { box-shadow: 0 14px 30px -14px rgba(37,99,235,.8); }
.lt .sp-btns .btn:not(.btn-primary) { box-shadow: var(--shadow); }
.lt .sp-hero .ft-facts div { background: var(--card); border-color: var(--line); box-shadow: var(--shadow); }
.lt .sp-hero .ft-facts i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-top: 0; font-size: 14px; }
.lt .sp-hero .ft-facts div { grid-template-columns: 34px 1fr; column-gap: 14px; }
.lt .sp-block { background: var(--tint); padding: 80px 0 96px; }
.lt .sp-panel { border-color: var(--line); }
.lt .sp-panel .pane-top .ico { border: 0; background: var(--b-bg); color: var(--b-fg); }
.lt .sp-steps h2, .lt .sp-posts h2, .lt .sp-others h2, .lt .sp-block .ft-faq h2 { font-size: 32px; font-weight: 700; letter-spacing: -.03em; color: var(--bright); }
.lt .sp-steps li { background: var(--card); border-color: var(--line); box-shadow: var(--shadow); }
.lt .sp-steps li::before { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font: 700 13px var(--font); margin-bottom: 8px; }
.lt .sp-block .ft-faq details { background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 0 4px; margin: 0; box-shadow: none; }   /* a list, like the home FAQ */
.lt .sp-block .ft-faq details:last-of-type { border-bottom: 1px solid var(--line); }
.lt .sp-block .ft-faq summary { font-weight: 500; font-size: 16.5px; padding: 20px 0; transition: color .2s; }
.lt .sp-block .ft-faq summary:hover { color: var(--accent); }
.lt .sp-block .ft-faq details[open] summary i { color: var(--accent); }
.lt .sp-faq-more a, .lt .sp-more, .lt .ft-faq details a { color: var(--accent); }
.lt .sp-posts .bc { background: var(--card); box-shadow: var(--shadow); }
.lt .sp-other-list a { background: var(--card); box-shadow: var(--shadow); }
.lt .sp-other-list a:hover { border-color: var(--accent); }
.lt .sp-other-list .ico { border: 0; background: var(--b-bg); color: var(--b-fg); }
.lt .sp-cta { background: var(--card); border-top: 2px solid var(--accent); }
.lt .sp-cta .btn { border-radius: 99px; }
@media (max-width: 760px) {
    .lt .sp-hero h1 { font-size: 38px; }
    .lt .sp-btns .btn { width: 100%; }
    .lt .sp-steps h2, .lt .sp-posts h2, .lt .sp-others h2, .lt .sp-block .ft-faq h2 { font-size: 26px; }
}

/* ---------- the other public pages in the light look: articles, legal pages, sign-in screens ---------- */
.lt .doc-body p, .lt .doc-body li, .lt .bp-table td { color: var(--text); }
.lt .bp-body a, .lt .doc-body a { color: var(--accent); }
.lt .bp-cta, .lt .bp-table, .lt .toc, .lt .bp-toc { background: var(--card); }
.lt .check input { border-color: var(--line-2); background: var(--card); }
.lt .check:hover input { border-color: var(--accent); background: var(--card); }
.lt .check input:checked { background: var(--accent); border-color: var(--accent); }
.lt .auth::before, .lt .split::before { display: none; }
.lt .split, .lt .auth { background: radial-gradient(50% 60% at 80% 10%, var(--wash), transparent 70%), var(--bg-2); }
.lt .split-panel, .lt .auth-card { background: var(--card); box-shadow: var(--shadow-lg); }
.lt .social-btn { background: var(--card); }
.lt .social-btn:hover { border-color: var(--line-2); background: var(--bg-2); }
.lt .side-dots button:hover { background: var(--line-2); }
.auth-tr { display: inline-flex; align-items: center; gap: 10px; }
.lt .nq { background: var(--bg-2); }
.lt .ft-tool .nq { background: var(--card); box-shadow: var(--shadow); }
.lt .ft-hero:not(.sp-hero) { background: radial-gradient(50% 70% at 80% 20%, var(--wash), transparent 70%), var(--bg); }
.lt .ft-pill:not(.sp-pill) { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.lt .ft-facts div { background: var(--card); border-color: var(--line); box-shadow: var(--shadow); }
.lt .ft-list { background: var(--card); }
.lt .nq-in, .lt .nq-code { background: var(--card); }
.lt .side-dots button.is-on { background: var(--accent-soft); }

/* ---------- dark: the few places that name the light look's blue ---------- */
html.dk .lt .btn-primary:hover, html.dk .lt .lt-hero .cta .btn-primary, html.dk .lt .sp-btns .btn-primary { box-shadow: 0 12px 28px -14px rgba(47,181,160,.6); }
html.dk .lt .fab { box-shadow: 0 14px 34px -12px rgba(47,181,160,.6); }
html.dk .lt .bm-p, html.dk .lt .bm { color: var(--accent-ink); }
html.dk .lt .hc-card::before { background: conic-gradient(from var(--hc-a), transparent 0deg 250deg, rgba(47,181,160,.15) 280deg, #2fb5a0 340deg, transparent 360deg); }
html.dk .lt .hc-band-ico { border-color: rgba(47,181,160,.24); }
html.dk .lt-glass { border-color: rgba(255,255,255,.06); background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); }
html.dk .lt-tool-l { background: var(--bg-2); }
html.dk .lp { filter: drop-shadow(0 24px 36px rgba(0,0,0,.5)); }
html.dk .lp-screen { border-color: #2a2a2a; background: #0e0e0e; }        /* a neutral laptop in the dark look, not the light look's navy */
html.dk .lp-side i.on { background: var(--accent); }
html.dk .lp-base { background: #3a3a3a; }
html.dk .lp-side i.on { background: #2fb5a0; }
html.dk .app-drop .sel, html.dk .ph-btn { color: var(--accent-ink); }
html.dk .lt ::selection { background: rgba(47,181,160,.25); }

/* ---------- customer panel (app/, body.panel.lt): the same look. Dark mode is the panel's original colours, so only
   the light mode needs the pieces admin.css / panel.css / pick.css / site.css hard-code dark ---------- */
.panel .side-sw { display: none; }
@media (max-width: 900px) {
    .panel .theme-sw.top-sw { display: none; }
    .panel .theme-sw.side-sw { display: inline-flex; position: absolute; z-index: 2; top: 14px; right: 14px; margin: 0; }   /* next to the logo in the opened menu */
}
html:not(.dk) .panel .side-group p { color: var(--faint); }
html:not(.dk) .panel .a-card, html:not(.dk) .panel .stat-card { box-shadow: 0 1px 2px rgba(15,23,42,.04); }
html:not(.dk) .panel .pill { background: var(--card); }
html:not(.dk) .panel .pill-link:hover, html:not(.dk) .panel .back-btn:hover, html:not(.dk) .panel .pick-btn:hover { border-color: var(--accent); }
@media (max-width: 900px) { html:not(.dk) .panel .side { box-shadow: 30px 0 60px rgba(15,23,42,.25); } }
/* soft white hovers and tracks: a soft grey instead */
html:not(.dk) .panel .a-table tbody tr:hover, html:not(.dk) .panel .a-table tr.row-go:hover, html:not(.dk) .panel .pager a.pg:hover,
html:not(.dk) .panel .pager .pg.on, html:not(.dk) .panel .pwl-box { background: rgba(15,23,42,.03); }
html:not(.dk) .panel .up-bar, html:not(.dk) .panel .nr-bar, html:not(.dk) .panel .net-row.none .vl-bar { background: rgba(15,23,42,.07); }
html:not(.dk) .panel .vis-chart .bar.on .hit { fill: rgba(15,23,42,.04); }
html:not(.dk) .panel .cv-msg.them .cv-quote { background: rgba(15,23,42,.04); }
html:not(.dk) .panel .title-count { background: var(--bg-3); color: var(--text); }
html:not(.dk) .panel .flag { box-shadow: 0 0 0 1px rgba(15,23,42,.12); }
html:not(.dk) .panel .li-scroll { scrollbar-color: #cbd5e1 transparent; }
html:not(.dk) .panel .li-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; }
html:not(.dk) .panel .news-item p { color: var(--text); }
/* menus, pop-ups and toasts */
html:not(.dk) .panel .pick-list, html:not(.dk) .panel .bell-box { background: var(--card); box-shadow: 0 18px 40px -12px rgba(15,23,42,.25); }
html:not(.dk) .panel .leave-card { box-shadow: 0 30px 70px -20px rgba(15,23,42,.4); }
html:not(.dk) .panel .toast { background: var(--card); box-shadow: 0 22px 50px -20px rgba(15,23,42,.35); }
/* status colours: the dark mode's pastels are too faint on white */
html:not(.dk) .panel .badge.green, html:not(.dk) .panel .bcw.done .bcw-ico { background: rgba(22,163,74,.1); color: #15803d; }
html:not(.dk) .panel .badge.red { background: rgba(220,38,38,.08); color: #b91c1c; }
html:not(.dk) .panel .badge.amber, html:not(.dk) .panel .side a.item .wait-count,
html:not(.dk) .panel .attn a > i:first-child, html:not(.dk) .panel .leave-ico { background: rgba(217,119,6,.1); color: #b45309; }
html:not(.dk) .panel .badge.orange { background: rgba(234,88,12,.1); color: #c2410c; }
html:not(.dk) .panel .notice > i, html:not(.dk) .panel .notice-bar > i, html:not(.dk) .panel .notice-bar a, html:not(.dk) .panel .detect.unknown .det-flag,
html:not(.dk) .panel .mix-warn i, html:not(.dk) .panel .sum-why, html:not(.dk) .panel .hint.warn, html:not(.dk) .panel .hint.over, html:not(.dk) .panel .pi small .req,
html:not(.dk) .panel .pay-warn i, html:not(.dk) .panel .up-prog.same .up-txt, html:not(.dk) .panel .tx-warn, html:not(.dk) .panel .tx-warn a, html:not(.dk) .panel .pm-txt .pm-warn,
html:not(.dk) .panel .attn .fa-arrow-right, html:not(.dk) .panel .dist-low .dist-v, html:not(.dk) .panel .worker-line.off i, html:not(.dk) .panel .worker-line.off b { color: #b45309; }
html:not(.dk) .panel .notice.err > i, html:not(.dk) .panel .notice-bar.warn > i, html:not(.dk) .panel .notice-bar.warn a, html:not(.dk) .panel .sum-kv dd.neg,
html:not(.dk) .panel .link-btn:hover, html:not(.dk) .panel .btn-danger, html:not(.dk) .panel .stat-card .s .down, html:not(.dk) .panel .del-box p,
html:not(.dk) .panel .up-prog.err .up-txt, html:not(.dk) .panel .ledger td.neg, html:not(.dk) .panel .ledger-sum .bad b, html:not(.dk) .panel .cv-fail,
html:not(.dk) .panel .cp-err, html:not(.dk) .panel .bc-f, html:not(.dk) .panel .dist-short .dist-v, html:not(.dk) .panel .dist-need.bad,
html:not(.dk) .panel .bcw-stats .bad b, html:not(.dk) .panel .bcw-fails summary { color: #dc2626; }
html:not(.dk) .panel .ledger td.pos, html:not(.dk) .panel .bal-sum > div:first-child b, html:not(.dk) .panel .cp-kv dd, html:not(.dk) .panel .tg-bar.ok > i,
html:not(.dk) .panel .worker-line.on i, html:not(.dk) .panel .worker-line.on b, html:not(.dk) .panel .pres-txt.on, html:not(.dk) .panel .stat-card .s .up,
html:not(.dk) .panel .bcw-stats .ok b, html:not(.dk) .panel .profit-cell .v.up { color: #15803d; }
html:not(.dk) .panel .trk.busy .trk-dot { border-color: #ea580c; color: #ea580c; }
html:not(.dk) .panel .trk.busy b { color: #c2410c; }
html:not(.dk) .panel .proc-bar i { background-color: #ea580c; }
html:not(.dk) .panel .tg-chip.on { color: #0369a1; }
html:not(.dk) .panel .alert.err { color: #b91c1c; }
html:not(.dk) .panel .alert.ok { color: #15803d; }
html:not(.dk) .panel .toast.t-success { --tc: #16a34a; }
html:not(.dk) .panel .toast.t-error, html:not(.dk) .panel .toast.t-lock { --tc: #dc2626; }
html:not(.dk) .panel .toast.t-warn { --tc: #d97706; }
html:not(.dk) .panel .bi-ico.green { color: #15803d; background: rgba(22,163,74,.1); }
html:not(.dk) .panel .bi-ico.amber { color: #b45309; background: rgba(217,119,6,.1); }
html:not(.dk) .panel .bi-ico.red { color: #b91c1c; background: rgba(220,38,38,.08); }

/* tints that name the dark mode's teal: the blue in light */
html:not(.dk) .panel .vl-bar { background: color-mix(in srgb, var(--accent) 9%, transparent); }
html:not(.dk) .panel .bell-item.unread { background: color-mix(in srgb, var(--accent) 5%, transparent); }
html:not(.dk) .panel .bell-btn:hover, html:not(.dk) .panel .bell.open .bell-btn, html:not(.dk) .panel .svc-grid .svc-tile:hover, html:not(.dk) .panel .news-item.new,
html:not(.dk) .panel .netc-nums .hl, html:not(.dk) .panel .cv-react.mine { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
html:not(.dk) .panel .net-drop:hover, html:not(.dk) .panel .net-drop.over { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: color-mix(in srgb, var(--accent) 4%, transparent); }
html:not(.dk) .panel .net-get:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
html:not(.dk) .panel .cp-on { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
html:not(.dk) .panel .cv-picker button.on { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent); }

/* the admin panel (admin/, body.panel.lt.staff): the same look; its own pieces that hard-code dark */
html:not(.dk) .staff .users-page { --u-surface: var(--card); --u-head: var(--bg-2); --u-hover: rgba(15,23,42,.03); --u-line: var(--line); --u-line-2: var(--line-2);
    --u-text: var(--bright); --u-sec: var(--muted); --u-dim: var(--faint); }
html:not(.dk) .staff .users-page .seg { background: var(--bg-2); }
html:not(.dk) .staff .users-page .seg a.on { background: var(--card); box-shadow: 0 1px 2px rgba(15,23,42,.08), 0 0 0 1px var(--line); }
html:not(.dk) .staff .ut-sel { background: var(--card); }
html:not(.dk) .staff .ut-pop { background: var(--card); border-color: var(--line-2); box-shadow: 0 18px 40px -12px rgba(15,23,42,.25); }
html:not(.dk) .staff .ut-pop a, html:not(.dk) .staff .ut-pop button { color: var(--text); }
html:not(.dk) .staff .ut-pop a i, html:not(.dk) .staff .ut-pop button i { color: var(--faint); }
html:not(.dk) .staff .ut-pop a:hover, html:not(.dk) .staff .ut-pop button:hover, html:not(.dk) .staff .ut-pop a:focus-visible, html:not(.dk) .staff .ut-pop button:focus-visible { background: rgba(15,23,42,.04); }
html:not(.dk) .staff .ut-pop .warn, html:not(.dk) .staff .ut-pop .warn i { color: #b45309; }
html:not(.dk) .staff .ut-pop .danger, html:not(.dk) .staff .ut-pop .danger i { color: #dc2626; }
html:not(.dk) .staff .ut-sep { background: var(--line); }
html:not(.dk) .staff .top-bal-item { background: var(--card); }
html:not(.dk) .staff .top-bal-item .pres { border-color: var(--card); }
html:not(.dk) .staff .top-bal-item .seen.on, html:not(.dk) .staff .ub-more .seen.on { color: #15803d; }
html:not(.dk) .staff .top-bal-item .seen.away, html:not(.dk) .staff .ub-more .seen.away { color: #b45309; }
html:not(.dk) .staff .pres.on { background: #16a34a; }
html:not(.dk) .staff .pres.on::after { border-color: #16a34a; }
html:not(.dk) .staff .pres.away { background: #d97706; }
html:not(.dk) .staff .pf-bar.on { background: rgba(15,23,42,.04); }
html:not(.dk) .staff .profit-cell .vs .down { color: #dc2626; }

/* ---------- customer panel sidebar (design 2, 2026-11-02): a tinted sidebar with no card or border, your account and
   balance first, the open page on a white card. Light and dark (the dark one keeps the original greys) ---------- */
body.panel.lt { grid-template-columns: 264px 1fr; background: var(--bg); }
body.panel.lt .topbar { background: color-mix(in srgb, var(--bg) 88%, transparent); }
body.panel.lt .topbar.stuck { background: color-mix(in srgb, var(--bg) 95%, transparent); box-shadow: 0 1px 0 var(--line); }
body.panel.lt .side { top: 0; height: 100vh; margin: 0; padding: 16px 14px 14px; border-radius: 0; border: 0; background: var(--bg-2); box-shadow: none; }
body.panel.lt .side .brand { order: -3; padding: 2px 8px 14px; }
body.panel.lt .side .bm-p { width: 28px; height: 28px; font-size: 16px; line-height: 28px; border-radius: 8px; }
/* you: the account card on top, Site and Sign out as two small buttons in it */
body.panel.lt .side-foot { order: -2; display: flex; align-items: center; gap: 4px; margin: 0 0 10px; padding: 8px 6px 8px 8px; border-radius: 12px;
    background: var(--card); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(15,23,42,.05); }
body.panel.lt .side-me { flex: 1; min-width: 0; padding: 0; }
body.panel.lt .side-me > span:not(.av) { min-width: 0; }
body.panel.lt .side-me b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.panel.lt .side-me small { font-size: 12px; }
body.panel.lt .side-me .av { width: 34px; height: 34px; border-radius: 10px; flex: none; }
body.panel.lt .side-actions { margin: 0; gap: 0; flex: none; }
body.panel.lt .side-actions form { flex: none; }
body.panel.lt .side-actions a, body.panel.lt .side-actions button { flex: none; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; font-size: 0; gap: 0; background: transparent; }
body.panel.lt .side-actions a i, body.panel.lt .side-actions button i { font-size: 13px; }
body.panel.lt .side-actions a:hover, body.panel.lt .side-actions button:hover { background: var(--bg-3); }
/* the balance: a big number with a link, a line under it */
body.panel.lt .side .side-balance { order: -1; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; margin: 0 4px 6px; padding: 4px 6px 12px;
    border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; background: transparent; }
body.panel.lt .side .side-balance small { width: 100%; font-size: 12px; }
body.panel.lt .side .side-balance b { margin: 0; font-size: 24px; font-weight: 600; }
body.panel.lt .side .side-balance span { margin-left: auto; height: auto; padding: 0; background: transparent; color: var(--accent); font-size: 13px; font-weight: 600; }
body.panel.lt .side .side-balance:hover { background: transparent; }
body.panel.lt .side .side-balance:hover span { background: transparent; color: var(--accent-hi); text-decoration: underline; text-underline-offset: 3px; }
/* the menu: the open page sits on a white card */
body.panel.lt .side-group { margin-top: 16px; }
body.panel.lt .side-group p { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; margin: 0 0 5px 12px; color: var(--faint); }
body.panel.lt .side a.item { height: 36px; padding: 0 12px; gap: 11px; border-radius: 9px; font-size: 13.5px; color: var(--text); }
body.panel.lt .side a.item i { width: 16px; font-size: 14px; color: var(--faint); }
body.panel.lt .side a.item:hover i { transform: none; }
body.panel.lt .nav-pill { background: var(--card); border-radius: 9px; box-shadow: 0 1px 2px rgba(15,23,42,.08), 0 0 0 1px var(--line); }
body.panel.lt .nav-hover { background: color-mix(in srgb, var(--bright) 5%, transparent); border-radius: 9px; }
body.panel.lt .side a.item.on { color: var(--bright); font-weight: 600; }
body.panel.lt .side a.item.on i { color: var(--accent); }
body.panel.lt .side .dot-count { min-width: 18px; height: 18px; font-size: 10.5px; line-height: 18px; background: var(--bg-3); color: var(--text); }
body.panel.lt .side a.item.on .dot-count { background: var(--accent); color: var(--accent-ink); }
/* Hash Channels: a calm white card at the bottom */
body.panel.lt .side-hc { margin: auto 0 0; padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); animation: none; box-shadow: 0 1px 2px rgba(15,23,42,.05); }
body.panel.lt .side-hc::before { display: none; }
body.panel.lt .side-hc-ico { width: 30px; height: 30px; border-radius: 8px; animation: none; border: 0; background: var(--accent-soft); }
body.panel.lt .side-hc a { height: 34px; border-radius: 9px; font-size: 13px; }
body.panel.lt .side-hc a::after { display: none; }
@media (max-width: 900px) {
    body.panel.lt { grid-template-columns: 1fr; }
    html:not(.dk) body.panel.lt .side { box-shadow: 30px 0 60px rgba(15,23,42,.25); }
    html.dk body.panel.lt .side { box-shadow: 30px 0 60px rgba(0,0,0,.5); }
}
body.panel.lt.staff .side .side-balance.ghost span { border: 0; font-weight: 600; }
/* the admin menu has 16 links: a little tighter only on short screens (a laptop), so they fit without scrolling */
@media (max-height: 1040px) {
    body.panel.lt.staff .side { padding-bottom: 10px; }
    body.panel.lt.staff .side .brand { padding-bottom: 10px; }
    body.panel.lt.staff .side-foot { margin-bottom: 8px; }
    body.panel.lt.staff .side-group { margin-top: 10px; }
    body.panel.lt.staff .side-group p { margin-bottom: 3px; }
    body.panel.lt.staff .side a.item { height: 32px; margin-bottom: 1px; }
    body.panel.lt.staff .side .side-balance { padding-bottom: 10px; }
    body.panel.lt.staff .side .side-balance b { font-size: 21px; }
}

/* the sidebar in the look of PWF Studio (2026-11-11), customer panel and admin (aside.side.cside; the admin's sizes: staff.css): status header with a power button, folding sections
   with small capitals, the open page on a green tint with a green edge, sub-pages with a dot, a drop card, a row of tools */
body.panel.lt .side.cside { padding: 14px 12px 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
.cside .cs-head { order: -3; display: flex; align-items: center; gap: 8px; margin: 0 2px 10px; }
.cside .cs-brand { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; text-decoration: none; }
.cside .cs-logo { width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--bg-3); border: 1px solid var(--line-2); }
.cside .cs-logo .bm-p { width: 24px; height: 24px; font-size: 14px; line-height: 24px; border-radius: 7px; }
.cside .cs-name { min-width: 0; display: flex; flex-direction: column; }
.cside .cs-name b { font-size: 14.5px; font-weight: 600; color: var(--bright); }
.cside .cs-name small { font-size: 11.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cside .cs-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--yes); margin-right: 5px; vertical-align: 0; }
.cside .cs-head form { margin: 0; flex: none; }
.cside .cs-power { width: 32px; height: 32px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; font-size: 14px; }
.cside .cs-power:hover { background: var(--bg-3); color: #f0857d; }
.cside .cs-group { margin: 0; }
.cside .cs-group + .cs-group { margin-top: 6px; }
.cside .cs-group > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 6px; cursor: pointer;
    font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); user-select: none; }
.cside .cs-group > summary::-webkit-details-marker { display: none; }
.cside .cs-group > summary i { font-size: 10px; transition: transform .2s var(--ease); }
.cside .cs-group:not([open]) > summary i { transform: rotate(-90deg); }
.cside .cs-group > summary:hover { color: var(--muted); }
body.panel.lt .side.cside a.item { height: 40px; padding: 0 12px; gap: 12px; margin-bottom: 2px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--text); }
body.panel.lt .side.cside a.item i { width: 17px; font-size: 15px; text-align: center; color: var(--muted); }
body.panel.lt .side.cside a.item.sub { height: 36px; padding-left: 26px; font-size: 13.5px; font-weight: 400; color: var(--muted); }
body.panel.lt .side.cside a.item.sub::before { content: ""; position: absolute; left: 13px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: var(--line-2); }
body.panel.lt .side.cside a.item.sub i { font-size: 13px; }
body.panel.lt .side.cside a.item.on { color: var(--bright); font-weight: 600; }
body.panel.lt .side.cside a.item.on i { color: var(--accent); }
body.panel.lt .side.cside a.item.sub.on::before { background: var(--accent); }
body.panel.lt .side.cside .cs-lbl { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.panel.lt .side.cside .dot-count { min-width: 22px; height: 20px; padding: 0 7px; border-radius: 99px; font: 500 11px/20px var(--mono); background: var(--bg-3); color: var(--muted); }
body.panel.lt .side.cside .cs-amt { padding: 2px 8px; border-radius: 99px; font-size: 11.5px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
body.panel.lt .side.cside .cs-ext { font-size: 10.5px; width: auto; color: var(--faint); }
body.panel.lt .side.cside .cs-stock { font-style: normal; font-size: 10.5px; color: var(--yes); white-space: nowrap; }
body.panel.lt .side.cside a.item .cs-stock i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--yes); margin: 0 2px; vertical-align: 1px; font-size: 0; }
body.panel.lt .cside .nav-pill { border-radius: 10px; background: color-mix(in srgb, var(--accent) 13%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent); }
body.panel.lt .cside .nav-pill::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
body.panel.lt .cside .nav-hover { border-radius: 10px; }
.cside .cs-drop { margin: auto 2px 12px; padding-top: 16px; display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px dashed var(--line-2); border-radius: 12px;
    cursor: pointer; transition: border-color .2s, background .2s; }
.cside .cs-group:last-of-type { margin-bottom: 14px; }
.cside .cs-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cside .cs-drop:hover, .cside .cs-drop.over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.cside .cs-drop-ico { width: 34px; height: 34px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--bg-3); color: var(--muted); font-size: 14px; }
.cside .cs-drop-txt { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cside .cs-drop-txt b { font-size: 13px; font-weight: 600; color: var(--bright); }
.cside .cs-drop-txt small { font-size: 11.5px; color: var(--faint); }
.cside .cs-drop-txt u { margin-top: 3px; text-decoration: none; font-size: 12px; font-weight: 600; color: var(--accent); }
.cside .cs-foot { position: sticky; bottom: 0; z-index: 3; display: flex; justify-content: space-around; margin: auto -12px 0; padding: 8px 6px 10px; border-top: 1px solid var(--line); background: var(--bg-2); }
.cside .cs-foot a, .cside .cs-foot button { width: 38px; height: 34px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); display: grid; place-items: center; font-size: 15px; cursor: pointer; text-decoration: none; }
.cside .cs-foot a:hover, .cside .cs-foot button:hover { background: var(--bg-3); color: var(--bright); }
.cside .cs-foot .fa-sun, html.dk .cside .cs-foot .fa-moon, .cside .cs-foot .fa-volume-xmark, html.sfx-off .cside .cs-foot .fa-volume-high { display: none; }
html.dk .cside .cs-foot .fa-sun, html.sfx-off .cside .cs-foot .fa-volume-xmark { display: inline-block; }

/* the customer panel's top bar, design 1 (2026-11-11): one theme button (the moon in light mode, the sun in dark), the bell,
   New order; the balance lives in the sidebar. On a phone the theme sits in the opened menu as before */
.panel .tb-theme { width: 38px; height: 38px; border: 1px solid var(--line-2); border-radius: 50%; background: var(--bg-1); color: var(--muted);
    display: grid; place-items: center; font-size: 15px; cursor: pointer; transition: color .2s, border-color .2s, background .2s; }   /* the bell's look, its own class */
.panel .tb-theme:hover { color: var(--bright); border-color: rgba(47, 181, 160, .45); background: var(--bg-2); }
.panel .tb-theme .fa-sun, html.dk .panel .tb-theme .fa-moon { display: none; }
html.dk .panel .tb-theme .fa-sun { display: inline-block; }
body.panel.lt.cust .topbar .crumb { font-size: 12px; color: var(--faint); line-height: 1.3; margin-bottom: 1px; }
@media (max-width: 900px) { .panel .tb-theme { display: none; } }

/* the sidebar's click ripple (assets/js/admin.js, both panels), like a Guna2Button with Animated on: a soft circle grows from
   the point you press and fades; the row also dips a little while pressed */
.side a.item, .side .side-fold > summary, .side .cs-group > summary, .side .cs-foot a, .side .cs-foot button, .side .cs-power, .side .cs-brand { position: relative; overflow: hidden; }
.side .rp { position: absolute; z-index: 0; border-radius: 50%; background: currentColor; opacity: .16; transform: scale(0); pointer-events: none; animation: side-rp .6s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes side-rp { to { transform: scale(1); opacity: 0; } }
.side a.item:active, .side .cs-foot a:active, .side .cs-foot button:active, .side .cs-power:active { transform: scale(.985); }
.side a.item, .side .cs-foot a, .side .cs-foot button, .side .cs-power { transition: transform .12s ease, background .2s, color .2s; }
@media (prefers-reduced-motion: reduce) { .side .rp { display: none; } .side a.item:active, .side .cs-foot a:active, .side .cs-foot button:active, .side .cs-power:active { transform: none; } }

/* the sidebar's menu sits in the middle of the free height (2026-11-11): the space is shared above the first section and above
   the tools row; on a short screen there is none to share and the menu starts right under the header */
.side.cside > details:first-of-type { margin-top: auto; }

/* the customer panel's top bar, design 1 "Clean line" (2026-11-12): a slim bar with a thin line under it at all times, the
   section and the page in one row (Checks › Dashboard), smaller round buttons. Its items stay in line with the page column */
body.panel.lt.cust .topbar { height: 60px; padding: 0 36px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg-1) 92%, transparent); }
body.panel.lt.cust .topbar.stuck { background: color-mix(in srgb, var(--bg-1) 97%, transparent); box-shadow: 0 10px 24px -22px rgba(0,0,0,.9); }
body.panel.lt.cust .topbar-in { gap: 10px; }
body.panel.lt.cust .topbar-in > div:has(> h1) { display: flex; align-items: center; gap: 8px; min-width: 0; }
body.panel.lt.cust .topbar .crumb { font-size: 13.5px; line-height: 1; margin: 0; white-space: nowrap; }
body.panel.lt.cust .topbar .crumb::after { content: "\f054"; font: 900 9px/1 "Font Awesome 6 Free"; margin-left: 9px; color: var(--faint); opacity: .7; vertical-align: 1px; }
body.panel.lt.cust .topbar h1 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.panel.lt.cust .topbar .back-btn { width: 32px; height: 32px; border-radius: 9px; }
body.panel.lt.cust .topbar .tb-theme, body.panel.lt.cust .topbar .bell-btn { width: 34px; height: 34px; font-size: 14px; }
body.panel.lt.cust .topbar .top-cta { height: 34px; }
@media (max-width: 1200px) { body.panel.lt.cust .topbar { padding: 0 24px; } }
@media (max-width: 900px) { body.panel.lt.cust .topbar { height: 56px; padding: 0 16px; } }
@media (max-width: 600px) { body.panel.lt.cust .topbar .crumb { display: none; } }
/* the top bar's profile button (2026-11-12): your first letter in a circle, opens Account */
.panel .tb-me { width: 34px; height: 34px; flex: none; border-radius: 50%; border: 1px solid var(--line-2); background: var(--bg-3); color: var(--accent);
    display: grid; place-items: center; font-size: 13.5px; font-weight: 600; line-height: 1; text-decoration: none; transition: border-color .2s, background .2s; }
.panel .tb-me:hover, .panel .tb-me.on { border-color: rgba(47, 181, 160, .55); background: var(--bg-2); }

/* WhatsApp checker by country (country.php, 2026-11-13): the number formats, the networks table, the country cards and the search box.
   Same look as the check pages (.sp-*): cards on the tinted block, the accent for what the check takes */
.lt .cp-panel { margin-bottom: 24px; }
.lt .cp-panel > h2 { font-size: 24px; font-weight: 700; letter-spacing: -.025em; color: var(--bright); }
.lt .cp-p { margin: 8px 0 0; max-width: 760px; font-size: 15px; line-height: 1.65; color: var(--muted); }
.lt .cp-formats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.lt .cp-formats > div { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); min-width: 0; }
.lt .cp-formats small { font-size: 12.5px; color: var(--faint); }
.lt .cp-formats b { font: 500 19px/1.3 var(--mono); letter-spacing: -.01em; color: var(--bright); overflow-wrap: anywhere; }
.lt .cp-formats span { font-size: 13px; line-height: 1.5; color: var(--muted); }
.lt .cp-formats .ok { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 6%, var(--card)); }
.lt .cp-formats .ok b { color: var(--accent); }
.lt .cp-rules { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.lt .cp-rules li { display: flex; gap: 12px; font-size: 14.5px; line-height: 1.6; color: var(--text); }
.lt .cp-rules i { margin-top: 5px; font-size: 12px; color: var(--accent); }
.lt .cp-table-wrap { margin-top: 20px; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
.lt .cp-nets { width: 100%; border-collapse: collapse; font-size: 14px; }
.lt .cp-nets th { padding: 11px 18px; font-size: 12.5px; font-weight: 500; text-align: left; color: var(--faint); background: var(--bg); border-bottom: 1px solid var(--line); white-space: nowrap; }
.lt .cp-nets td { padding: 12px 18px; border-bottom: 1px solid var(--line); vertical-align: middle; color: var(--text); }
.lt .cp-nets tr:last-child td { border-bottom: 0; }
.lt .cp-nets th[scope="row"] { width: 210px; vertical-align: top; padding-top: 13px; white-space: normal; }
.lt .cp-nets tr:last-child th { border-bottom: 0; }
.lt .cp-nets td a { color: var(--accent); text-decoration: none; }
.lt .cp-nets td a:hover { text-decoration: underline; }
.lt .cp-rules .fa-xmark { color: var(--faint); }
.lt .cp-nets .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lt .cp-nets td b { font-weight: 600; color: var(--bright); white-space: nowrap; }
.lt .cp-nets .pf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lt .cp-nets code { padding: 3px 8px; border-radius: 7px; background: var(--accent-soft); color: var(--accent); font: 500 12.5px var(--mono); }
.lt .cp-nets .pf span { font-size: 12.5px; color: var(--faint); }
.lt .cp-note { margin: 14px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--faint); }
.lt .cp-tool { display: flex; align-items: center; gap: 14px; margin-top: 20px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); text-decoration: none; transition: border-color .2s; }
.lt .cp-tool:hover { border-color: var(--accent); }
.lt .cp-tool > i:first-child { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.lt .cp-tool span { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.lt .cp-tool b { font-size: 15px; font-weight: 600; color: var(--bright); }
.lt .cp-tool small { font-size: 13px; color: var(--muted); }
.lt .cp-tool > i:last-child { color: var(--accent); }
.lt .cp-region { margin-top: 8px; margin-bottom: 40px; }
.lt .cp-region[hidden] { display: none; }
.lt .cp-region h2 { display: flex; align-items: baseline; gap: 10px; font-size: 24px; font-weight: 700; letter-spacing: -.025em; color: var(--bright); margin-bottom: 16px; }
.lt .cp-region h2 small { font-size: 14px; font-weight: 500; color: var(--faint); letter-spacing: 0; }
.lt .cp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.lt .cp-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: var(--shadow); text-decoration: none; transition: border-color .2s, transform .2s; }
.lt .cp-card[hidden] { display: none; }
.lt .cp-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.lt .cp-card .fi { width: 26px; height: 19px; flex: none; border-radius: 4px; box-shadow: 0 0 0 1px var(--line); }
.lt .cp-card b { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 600; color: var(--bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt .cp-card small { font: 500 12.5px var(--mono); color: var(--faint); }
.lt .cp-card i { font-size: 11px; color: var(--faint); transition: color .2s; }
.lt .cp-card:hover i { color: var(--accent); }
.lt .cp-near { margin-top: 56px; }
.lt .cp-near .sp-more { display: inline-flex; gap: 8px; align-items: center; margin-top: 16px; font-weight: 600; text-decoration: none; }
.lt .cp-find { position: relative; max-width: 440px; margin: 30px auto 0; }
.lt .cp-find i { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: var(--faint); }
.lt .cp-find input { width: 100%; height: 54px; padding: 0 20px 0 50px; border: 1px solid var(--line); border-radius: 99px; background: var(--card); box-shadow: var(--shadow); color: var(--bright); font: inherit; font-size: 15.5px; outline: none; transition: border-color .2s; }
.lt .cp-find input:focus { border-color: var(--accent); }
.lt .cp-none { margin: 0 0 30px; font-size: 15px; color: var(--muted); }
.lt .cp-none a { color: var(--accent); }
.lt .sp-hero .ft-pill .fi { width: 20px; height: 15px; border-radius: 3px; }
.lt .cp-bycountry { margin-top: 56px; }
@media (max-width: 760px) { .lt .cp-formats { grid-template-columns: 1fr; } .lt .cp-panel > h2, .lt .cp-region h2 { font-size: 21px; } }