/* ============================================================
   YehShip — mobile-first UI. Brand: navy #0A2540 + sky #0284C7.
   ============================================================ */
:root{
  --navy:#0A2540; --navy2:#0F2E52; --royal:#1E63D8; --sky:#0284C7; --sky-l:#38BDF8;
  --bg:#F4F7FC; --card:#FFFFFF; --ink:#1E293B; --sub:#64748B; --line:#E6EDF5; --muted:#9AA7B8;
  --ok:#16A34A; --warn:#F59E0B; --danger:#DC2626;
  --grad:linear-gradient(150deg,#0A2540 0%,#0E3461 55%,#0F3F73 100%);
  --grad-cta:linear-gradient(135deg,#2E6FF0,#0284C7);
  --r:16px; --shadow:0 8px 22px rgba(15,23,42,.06);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg); color:var(--ink); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--royal);text-decoration:none}
img{max-width:100%;display:block}

/* App shell — căn giữa, giới hạn bề ngang như app điện thoại */
.app{max-width:480px;margin:0 auto;min-height:100vh;background:var(--bg);position:relative;
  padding-bottom:78px; /* chừa chỗ tabbar */}

/* Top bar */
.bar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;
  gap:10px;height:58px;padding:0 12px;background:rgba(255,255,255,.96);backdrop-filter:saturate(180%) blur(12px);
  box-shadow:0 2px 14px rgba(15,23,42,.05)}
.bar__title{font-weight:800;font-size:17px;color:var(--navy);letter-spacing:-.2px}
.bar__btn{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  color:var(--navy);background:#F1F5FB;border:none;transition:transform .12s}
.bar__btn:active{transform:scale(.92)}
.bar--grad{background:var(--grad);border:none;color:#fff;box-shadow:0 6px 18px rgba(10,37,64,.25)}
.bar--grad .bar__title{color:#fff}
.bar--grad .bar__btn{color:#fff;background:rgba(255,255,255,.15)}

/* Gradient header (dashboard) */
.hd{background:var(--grad);color:#fff;padding:18px 16px 40px;border-bottom-left-radius:22px;border-bottom-right-radius:22px;position:relative;overflow:hidden}
.hd__circle{position:absolute;border-radius:50%;background:rgba(255,255,255,.07)}
.hd__row{display:flex;align-items:center;gap:12px;position:relative}
.hd__hi{font-size:13px;color:#CBD5E1}
.hd__name{font-weight:800;font-size:18px}
.hd__credit{margin-top:14px;position:relative}
.hd__credit-l{font-size:12.5px;color:#CBD5E1}
.hd__credit-v{font-weight:800;font-size:26px;margin-top:2px}

/* Section */
.sec{padding:16px 16px 0}
.sec__t{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin:0 0 8px 2px}

/* Card */
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.card--pad{padding:14px}
.card+.card{margin-top:12px}

/* Overlap panel (quick actions floating over header) */
.panel{margin:-26px 16px 0;background:#fff;border-radius:18px;box-shadow:var(--shadow);padding:14px;position:relative;z-index:5}

/* Quick actions grid */
.qa{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.qa__i{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 4px;border:none;background:none;color:var(--ink);font-size:11.5px;font-weight:600;text-align:center}
.tile{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 4px 10px rgba(2,132,199,.25)}

/* Stat cards 2x2 */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat{background:#fff;border-radius:var(--r);box-shadow:var(--shadow);padding:12px 13px}
.stat__l{font-size:12px;color:var(--sub)}
.stat__v{font-weight:800;font-size:20px;margin-top:3px;color:var(--navy)}

/* Buttons */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border:none;border-radius:14px;
  padding:15px;font-size:15.5px;font-weight:800;cursor:pointer;color:#fff;background:var(--grad-cta);
  box-shadow:0 10px 22px rgba(46,111,240,.3);transition:transform .12s,box-shadow .12s}
.btn:active{transform:scale(.985)}
.btn--ghost{background:#fff;color:var(--royal);border:1.6px solid #C9DBF6;box-shadow:none}
.btn--ok{background:linear-gradient(135deg,#22C55E,#16A34A);box-shadow:0 10px 22px rgba(22,163,74,.26)}
.btn--danger{background:#fff;color:var(--danger);border:1.6px solid #FECACA;box-shadow:none}
.btn--sm{padding:11px 16px;font-size:14px;width:auto;border-radius:12px;box-shadow:0 6px 14px rgba(46,111,240,.22)}
.btn-row{display:flex;gap:10px}

/* Segmented control (filter tabs) */
.seg{display:flex;gap:5px;background:#EAF0F8;border-radius:14px;padding:5px}
.seg a{flex:1;text-align:center;padding:10px 6px;border-radius:10px;font-size:13px;font-weight:700;color:var(--sub);transition:.15s}
.seg a.on{background:#fff;color:var(--royal);box-shadow:0 4px 10px rgba(15,23,42,.08)}

/* Inputs */
.field{margin-bottom:15px}
.field__l{display:block;font-size:13.5px;font-weight:700;color:var(--ink);margin:0 0 8px 2px}
.field__l .opt{color:var(--muted);font-weight:500}
.inp{display:flex;align-items:center;gap:10px;border:1.6px solid var(--line);border-radius:13px;background:#fff;padding:13px 14px;transition:border-color .15s,box-shadow .15s}
.inp:focus-within{border-color:var(--royal);box-shadow:0 0 0 3.5px rgba(30,99,216,.12)}
.inp svg{color:var(--muted);flex-shrink:0}
.inp input,.inp textarea{flex:1;border:none;outline:none;font-size:15px;color:var(--ink);background:none;font-family:inherit}
.inp textarea{resize:vertical;min-height:64px}
.prefix{color:var(--royal);font-weight:800}

/* Address autocomplete */
.acwrap{position:relative}
.ac{position:absolute;top:100%;left:0;right:0;z-index:25;background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:0 14px 30px rgba(15,23,42,.16);margin-top:5px;max-height:240px;overflow:auto;display:none}
.ac__i{padding:11px 13px;font-size:13px;color:var(--ink);cursor:pointer;line-height:1.4;display:flex;gap:9px;align-items:flex-start}
.ac__i+.ac__i{border-top:1px solid #F1F5F9}
.ac__i:hover,.ac__i.sel{background:#F4F8FF}
.ac__i svg{color:var(--muted);flex-shrink:0;margin-top:1px}

/* Photo upload */
.photo-up{display:flex;align-items:center;gap:12px;border:1.5px dashed #C9DBF6;border-radius:13px;padding:13px;background:#F8FAFF;cursor:pointer}
.photo-up__ic{width:46px;height:46px;border-radius:12px;background:#EAF1FE;color:var(--royal);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.photo-up__t{font-size:13px;font-weight:700;color:var(--ink)}
.photo-up__s{font-size:11.5px;color:var(--muted);margin-top:2px}
.photo-up img{width:58px;height:58px;border-radius:10px;object-fit:cover}

/* Status pill */
.pill{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700}
.pill.open{background:#FEF3C7;color:#B45309}
.pill.accepted{background:#DBEAFE;color:#1D4ED8}
.pill.ship{background:#E0F2FE;color:#0369A1}
.pill.ok{background:#DCFCE7;color:#15803D}
.pill.cancel{background:#F1F5F9;color:#64748B}
.pill.disputed{background:#FEE2E2;color:#B91C1C}

/* Request row */
.row{display:flex;gap:12px;padding:14px;align-items:center}
.row+.row{border-top:1px solid #F1F5F9}
.row__ic{width:44px;height:44px;border-radius:13px;background:linear-gradient(135deg,#EAF1FE,#DCE9FF);color:var(--royal);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.row__main{flex:1;min-width:0}
.row__t{font-weight:700;font-size:14.5px;color:var(--ink)}
.row__m{font-size:12.5px;color:var(--sub);margin-top:3px;display:flex;flex-wrap:wrap;gap:4px 10px}
.row__price{font-weight:800;color:var(--royal);white-space:nowrap}

/* Route line */
.route{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.route__pt{display:flex;gap:10px;align-items:flex-start;font-size:13.5px}
.route__dot{width:10px;height:10px;border-radius:50%;margin-top:5px;flex-shrink:0}
.route__dot--from{background:var(--sky)}
.route__dot--to{background:var(--ok)}
.route__txt b{display:block;color:var(--sub);font-size:11.5px;font-weight:600}

/* Distance chip */
.chip{display:inline-flex;align-items:center;gap:4px;background:#EAF1FE;color:var(--royal);font-size:11.5px;font-weight:700;padding:4px 9px;border-radius:999px}

/* Distance bar (vị trí bạn → đơn) */
.distbar{display:flex;align-items:center;gap:7px;margin-top:9px;background:#F4F8FF;border:1px solid #E2ECFB;border-radius:10px;padding:7px 10px}
.distbar__you{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:800;color:var(--royal);white-space:nowrap}
.distbar__dot{width:9px;height:9px;border-radius:50%;background:var(--royal);box-shadow:0 0 0 3px rgba(30,99,216,.16)}
.distbar__line{flex:1;height:3px;border-radius:3px;background:linear-gradient(90deg,#2E6FF0,#22C55E);position:relative;min-width:24px}
.distbar__line::after{content:"";position:absolute;right:0;top:50%;width:6px;height:6px;border-radius:50%;background:#16A34A;transform:translateY(-50%)}
.distbar__pin{color:#16A34A;display:flex;flex-shrink:0}
.distbar__km{font-size:12px;font-weight:800;color:#0A2540;white-space:nowrap}

/* Empty */
.empty{text-align:center;color:var(--muted);font-size:14px;padding:42px 20px}

/* Sort / filter chips */
.sortbar{display:flex;gap:7px;overflow-x:auto;padding:2px 0;scrollbar-width:none}
.sortbar::-webkit-scrollbar{display:none}
.sortchip{flex:0 0 auto;background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:8px 14px;font-size:12.5px;font-weight:700;color:var(--sub);display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.sortchip.on{background:var(--royal);color:#fff;border-color:var(--royal);box-shadow:0 6px 14px rgba(30,99,216,.25)}

/* Job card (kiểu app giao hàng) */
.joblist{display:flex;flex-direction:column;gap:12px}
.job{background:#fff;border-radius:18px;box-shadow:0 10px 24px rgba(15,23,42,.07);border:1px solid #EEF3F9;overflow:hidden;display:block;transition:transform .12s}
.job:active{transform:scale(.99)}
.job__hd{display:flex;align-items:flex-start;gap:11px;padding:14px 14px 0}
.job__ic{width:44px;height:44px;border-radius:13px;background:linear-gradient(135deg,#EAF1FE,#DCE9FF);color:var(--royal);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.job__name{font-weight:800;font-size:15px;color:#0A2540;line-height:1.25}
.job__sub{font-size:11px;color:var(--sub);margin-top:3px}
.job__price{margin-left:auto;text-align:right;flex-shrink:0}
.job__price b{font-size:17px;font-weight:800;color:var(--royal)}
.job__price span{display:block;font-size:9.5px;color:var(--muted);margin-top:1px}
.job__route{margin:12px 14px 0;background:#F6FAFF;border:1px solid #EAF1FB;border-radius:12px;padding:11px 12px}
.job__pt{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700;color:#1E293B}
.job__pt small{display:block;font-size:9.5px;color:#94A3B8;font-weight:600}
.job__dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.job__dot--a{background:#2E6FF0}.job__dot--b{background:#16A34A}
.job__conn{height:13px;width:2px;margin:1px 0 1px 4px;background:repeating-linear-gradient(#CBD5E1 0 3px,transparent 3px 6px)}
.job__foot{display:flex;align-items:center;gap:10px;padding:12px 14px;border-top:1px solid #F1F5F9;margin-top:12px}
.job__avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#60A5FA,#2563EB);color:#fff;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.job__seller{font-size:11.5px;line-height:1.3;min-width:0}
.job__seller b{display:block;color:#0A2540;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.job__seller span{color:var(--muted)}
.job__cta{margin-left:auto;background:var(--grad-cta);color:#fff;font-weight:800;font-size:13px;padding:10px 16px;border-radius:12px;display:inline-flex;align-items:center;gap:5px;box-shadow:0 6px 14px rgba(46,111,240,.28);flex-shrink:0}

/* Timeline */
.tl{display:flex;margin:16px 0 6px}
.tl__s{flex:1;text-align:center;position:relative}
.tl__dot{width:28px;height:28px;border-radius:50%;margin:0 auto;display:flex;align-items:center;justify-content:center;background:#E2E8F0;color:#94A3B8;position:relative;z-index:2;transition:.2s}
.tl__s.done .tl__dot,.tl__s.cur .tl__dot{background:var(--royal);color:#fff}
.tl__s.cur .tl__dot{box-shadow:0 0 0 4px rgba(30,99,216,.18)}
.tl__s::before{content:"";position:absolute;top:14px;left:-50%;width:100%;height:2px;background:#E2E8F0;z-index:1}
.tl__s:first-child::before{display:none}
.tl__s.done::before,.tl__s.cur::before{background:var(--royal)}
.tl__l{font-size:10px;font-weight:700;color:#94A3B8;margin-top:7px}
.tl__s.done .tl__l,.tl__s.cur .tl__l{color:var(--royal)}

/* OTP / code box */
.codebox{display:flex;align-items:center;justify-content:space-between;gap:10px;background:linear-gradient(135deg,#EAF1FE,#F3F8FF);border:1.5px dashed #BBD0F0;border-radius:14px;padding:14px 16px;color:var(--royal)}
.codebox__v{font-weight:800;font-size:24px;letter-spacing:4px;color:var(--royal);font-variant-numeric:tabular-nums}

/* Chat */
.chat{display:flex;flex-direction:column;gap:8px;padding:14px}
.msg{max-width:78%;padding:10px 13px;border-radius:16px;font-size:14px;line-height:1.45}
.msg--me{align-self:flex-end;background:linear-gradient(135deg,#2E6FF0,#0284C7);color:#fff;border-bottom-right-radius:5px;box-shadow:0 4px 12px rgba(46,111,240,.22)}
.msg--them{align-self:flex-start;background:#fff;color:var(--ink);border:1px solid var(--line);border-bottom-left-radius:5px}
.msg__time{font-size:10.5px;opacity:.7;margin-top:3px}

/* Bottom tab bar — modern */
.tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;z-index:40;
  background:rgba(255,255,255,.97);backdrop-filter:saturate(180%) blur(16px);
  display:flex;align-items:flex-start;justify-content:space-around;
  box-shadow:0 -8px 28px rgba(15,23,42,.1);border-top:1px solid #EFF3F9;
  padding:8px 8px calc(8px + env(safe-area-inset-bottom))}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;color:#9AA7B8;font-size:10.5px;font-weight:600;text-decoration:none;transition:color .2s}
.tabbar a .ic{width:52px;height:32px;border-radius:999px;display:flex;align-items:center;justify-content:center;transition:transform .2s,background .2s,box-shadow .2s}
.tabbar a.on{color:#1E63D8;font-weight:700}
.tabbar a.on .ic{background:linear-gradient(135deg,#E7F0FF,#D9E7FF);box-shadow:inset 0 0 0 1px rgba(30,99,216,.14),0 4px 10px rgba(30,99,216,.12);transform:translateY(-1px)}
.tabbar a:active .ic{transform:scale(.88)}

/* Flash */
.flash{margin:12px 16px 0;padding:12px 14px;border-radius:12px;font-size:14px;font-weight:600}
.flash.success{background:#DCFCE7;color:#15803D}
.flash.danger{background:#FEE2E2;color:#B91C1C}
.flash.info{background:#DBEAFE;color:#1D4ED8}
.flash.warning{background:#FEF3C7;color:#B45309}

/* Auth */
.auth{padding:28px 22px 24px}
.auth__logo{text-align:center;margin-bottom:6px}
.auth__h{font-size:24px;font-weight:800;text-align:center;color:var(--ink);margin:14px 0 4px}
.auth__s{text-align:center;color:var(--sub);font-size:14px;margin-bottom:22px}
.auth__alt{text-align:center;margin-top:18px;color:var(--sub);font-size:14px}
.auth-or{display:flex;align-items:center;gap:12px;margin:18px 0 14px;color:var(--muted);font-size:13px}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--line)}
.auth-social{display:flex;justify-content:center;min-height:42px}
.auth-social>div{display:flex;justify-content:center}

/* Modal (thay alert/confirm) */
.ys-ov{position:fixed;inset:0;background:rgba(10,23,46,.5);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:200;opacity:0;transition:opacity .18s;padding:24px}
.ys-ov.show{opacity:1}
.ys-modal{background:#fff;border-radius:22px;max-width:340px;width:100%;padding:24px 22px;box-shadow:0 24px 60px rgba(2,18,46,.4);transform:scale(.92) translateY(8px);transition:transform .2s}
.ys-ov.show .ys-modal{transform:scale(1) translateY(0)}
.ys-modal__ic{width:56px;height:56px;border-radius:50%;margin:0 auto 12px;display:flex;align-items:center;justify-content:center}
.ys-modal__t{font-size:17px;font-weight:800;color:var(--navy);text-align:center}
.ys-modal__b{font-size:14px;color:var(--sub);text-align:center;margin-top:8px;line-height:1.5}
.ys-modal__a{display:flex;gap:10px;margin-top:20px}
.ys-btn{flex:1;border:none;border-radius:13px;padding:13px;font-weight:800;font-size:14.5px;cursor:pointer;transition:transform .1s}
.ys-btn:active{transform:scale(.97)}
.ys-btn--ghost{background:#F1F5FB;color:var(--sub)}
.ys-btn--ok{background:var(--grad-cta);color:#fff;box-shadow:0 8px 18px rgba(46,111,240,.3)}
.ys-btn--danger{background:linear-gradient(135deg,#EF4444,#DC2626);color:#fff;box-shadow:0 8px 18px rgba(220,38,38,.3)}

/* Misc */
.muted{color:var(--sub)} .small{font-size:12.5px} .center{text-align:center}
.divider{height:1px;background:var(--line);margin:14px 0}
.spacer{height:14px}
.note{font-size:12.5px;color:var(--sub);background:#F8FAFC;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.note--warn{background:#FFFBEB;border-color:#FDE68A;color:#92400E}

/* ============================================================
   LANDING (trang giới thiệu) — .ld-*
   ============================================================ */
.ld-nav{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line)}
.ld-nav__login{font-size:14px;font-weight:700;color:var(--navy);padding:8px 14px;border:1.5px solid var(--line);border-radius:999px}

.ld-hero{background:var(--grad);color:#fff;padding:30px 20px 40px;border-bottom-left-radius:26px;border-bottom-right-radius:26px;position:relative;overflow:hidden;text-align:center}
.ld-hero__c{position:absolute;border-radius:50%;background:rgba(255,255,255,.07)}
.ld-badge{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
  color:#E0F2FE;font-size:12.5px;font-weight:600;padding:6px 13px;border-radius:999px;position:relative}
.ld-hero h1{font-size:29px;line-height:1.2;font-weight:800;margin:16px 0 10px;position:relative}
.ld-hero h1 em{font-style:normal;color:var(--sky-l)}
.ld-hero__lead{font-size:15px;color:#CBD5E1;max-width:340px;margin:0 auto 22px;position:relative}
.ld-hero__ctas{display:flex;flex-direction:column;gap:10px;position:relative}
.ld-hero__ctas .btn{box-shadow:0 8px 20px rgba(2,132,199,.4)}
.btn-white{display:flex;align-items:center;justify-content:center;gap:8px;background:#fff;color:var(--navy);
  border-radius:13px;padding:14px;font-weight:800;font-size:15.5px;box-shadow:0 8px 20px rgba(0,0,0,.18)}
.btn-outline-w{display:flex;align-items:center;justify-content:center;gap:6px;border:1.5px solid rgba(255,255,255,.4);
  color:#fff;border-radius:13px;padding:13px;font-weight:700;font-size:15px}

/* Dual value cards (shipper / sender) */
.ld-dual{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:20px 16px 0}
.ld-dual__card{background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:16px 14px;text-align:center}
.ld-dual__ic{width:52px;height:52px;border-radius:15px;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;color:#fff}
.ld-dual__t{font-weight:800;font-size:15px;color:var(--navy)}
.ld-dual__d{font-size:12.5px;color:var(--sub);margin-top:4px;line-height:1.45}

/* Section header */
.ld-hdr{text-align:center;padding:30px 16px 4px}
.ld-hdr span{font-size:12px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--sky);
  background:#EFF6FF;padding:6px 14px;border-radius:999px}
.ld-hdr h2{font-size:21px;font-weight:800;color:var(--navy);margin:14px 0 0}

/* Steps */
.ld-steps{padding:18px 16px 0;display:flex;flex-direction:column;gap:12px}
.ld-step{display:flex;gap:14px;background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:14px}
.ld-step__n{width:32px;height:32px;border-radius:10px;background:var(--grad-cta);color:#fff;font-weight:800;
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ld-step__t{font-weight:700;font-size:15px;color:var(--ink)}
.ld-step__d{font-size:13px;color:var(--sub);margin-top:3px;line-height:1.5}

/* Feature list */
.ld-feat{padding:18px 16px 0;display:flex;flex-direction:column;gap:10px}
.ld-feat__row{display:flex;gap:12px;background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:14px}
.ld-feat__ic{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.ld-feat__t{font-weight:700;font-size:14.5px}
.ld-feat__d{font-size:12.5px;color:var(--sub);margin-top:2px;line-height:1.45}

/* KPIs */
.ld-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:24px 16px 0}
.ld-kpi{background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:16px 8px;text-align:center}
.ld-kpi__v{font-weight:800;font-size:20px;color:var(--sky)}
.ld-kpi__l{font-size:11px;color:var(--sub);margin-top:4px;line-height:1.3}

/* FAQ */
.ld-faq{padding:18px 16px 0;display:flex;flex-direction:column;gap:8px}
.ld-faq details{background:#fff;border-radius:13px;box-shadow:var(--shadow);padding:14px 15px}
.ld-faq summary{font-weight:700;font-size:14px;color:var(--ink);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px}
.ld-faq summary::-webkit-details-marker{display:none}
.ld-faq summary::after{content:"+";font-size:20px;color:var(--sky);font-weight:400}
.ld-faq details[open] summary::after{content:"–"}
.ld-faq__b{font-size:13px;color:var(--sub);margin-top:10px;line-height:1.6}

/* Warn strip */
.ld-warn{margin:22px 16px 0;background:#FFFBEB;border:1px solid #FDE68A;color:#92400E;border-radius:14px;padding:14px;font-size:12.5px;display:flex;gap:10px}

/* Final CTA */
.ld-final{margin:28px 16px 0;background:var(--grad);color:#fff;border-radius:22px;padding:28px 22px;text-align:center;position:relative;overflow:hidden}
.ld-final h2{font-size:23px;font-weight:800;margin:10px 0 8px}
.ld-final p{font-size:14px;color:#CBD5E1;margin:0 0 18px}
.ld-live{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.92)}
.ld-live__dot{width:8px;height:8px;border-radius:50%;background:#34D399;box-shadow:0 0 0 4px rgba(52,211,153,.25)}

/* Footer */
.ld-foot{text-align:center;padding:26px 20px 30px;color:var(--muted);font-size:12px;line-height:1.7}
.ld-foot a{color:var(--sub);font-weight:600}

/* Auth polish — hero logo */
.auth__badge{width:64px;height:64px;border-radius:20px;margin:0 auto;background:var(--grad);color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px rgba(10,37,64,.28)}
.auth__back{position:absolute;top:16px;left:14px;width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--navy);border:1px solid var(--line);background:#fff}