/* ==========================================================================
   Quiet Data — storefront UI (dark navy design system)
   admin.html keeps using style.css; this file is loaded by index.html only.
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  --bg:#0a1020;--bg2:#0d1630;
  --surface:#111a33;--surface2:#16223f;
  --line:rgba(148,163,205,.14);--line2:rgba(148,163,205,.24);
  --text:#f2f5fc;--muted:#8a97b5;--muted2:#6d7a99;
  --blue:#1a5cff;--blue2:#3f86ff;
  --green:#22c78e;--amber:#f5b50a;--purple:#9b7bff;--red:#ef5b63;
  --r:22px;--r-sm:14px;
  --sh:rgba(2,6,18,.55);
}
body{
  --accent:#1a5cff;--accent-grad:linear-gradient(135deg,#1a5cff,#3f86ff);--on:#fff;--accent-text:#7fb0ff;--glow:rgba(26,92,255,.35);
  /* compat names used by checkout / assistant */
  --card:var(--surface);--card2:var(--surface2);--input:#0c1428;--panel:var(--surface);--panel2:var(--surface2);
  --hl:var(--accent-text);--ring:var(--accent);--glow-btn:var(--glow);--grad:var(--accent-grad);
  --chip-bg:rgba(63,134,255,.12);--chip-bd:rgba(63,134,255,.4);--chip-tx:#bcd4ff;--ov:rgba(4,8,20,.78);
}
body[data-theme="mtn"]{--accent:#ffcc00;--accent-grad:linear-gradient(135deg,#ffd21f,#ffb400);--on:#1b1500;--accent-text:#ffd84d;--glow:rgba(255,200,0,.28)}
body[data-theme="airteltigo"]{--accent:#e4002b;--accent-grad:linear-gradient(135deg,#2a77e8,#e4002b);--on:#fff;--accent-text:#ff7a93;--glow:rgba(228,0,43,.3)}
body[data-theme="telecel"]{--accent:#e60000;--accent-grad:linear-gradient(135deg,#f02a2a,#c70000);--on:#fff;--accent-text:#ff7b7b;--glow:rgba(230,0,0,.3)}

/* ---------- base ---------- */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;min-height:100vh;padding-bottom:124px;color:var(--text);font-family:Inter,"Segoe UI",system-ui,-apple-system,Arial,sans-serif;font-size:15px;line-height:1.5;
  background:radial-gradient(800px 480px at 90% -8%,rgba(26,92,255,.16),transparent 62%),radial-gradient(640px 460px at -8% 12%,rgba(155,123,255,.08),transparent 60%),linear-gradient(180deg,var(--bg2),var(--bg) 70%);background-attachment:fixed;
  -webkit-font-smoothing:antialiased}
body.auth-locked{overflow:hidden}
button,input,textarea{font-family:inherit}
button{color:inherit}
a{color:inherit}
svg.i{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.muted{color:var(--muted)}.small{font-size:13px;line-height:1.6}
[hidden]{display:none!important}
.view{animation:qIn .35s ease both}
@keyframes qIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- header ---------- */
.top{width:92%;max-width:1100px;margin:auto;height:72px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;letter-spacing:1.6px;text-decoration:none;color:var(--text)}
.logo>span{color:var(--text)}.logo>span span{color:var(--blue2)}
.brand-logo{width:32px;height:32px;display:block;border-radius:10px}
.top-right{display:flex;align-items:center;gap:10px}
.pill{font-size:12px;font-weight:600;color:var(--muted);border:1px solid var(--line);padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.03)}
.top-avatar{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;text-decoration:none;font-weight:800;font-size:13px;color:var(--blue2);background:rgba(26,92,255,.14);border:1px solid rgba(63,134,255,.28)}
.site-banner{position:sticky;top:0;z-index:100;display:block;text-align:center;font-size:13px;font-weight:700;padding:10px 14px;background:var(--accent-grad);color:var(--on)}
.site-banner[hidden]{display:none!important}
.site-banner.closed{background:var(--red);color:#fff}

/* ---------- layout ---------- */
.wrap{width:92%;max-width:1100px;margin:auto;padding:6px 0 40px;position:relative}
.page-title{font-size:clamp(26px,5vw,36px);letter-spacing:-1px;line-height:1.1;margin:8px 0 8px;font-weight:800}
.page-title em{font-style:normal;color:var(--blue2)}
.lead{color:var(--muted);font-size:14px;line-height:1.65;margin:0 0 22px;max-width:560px}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:30px 2px 14px}
.sec-head h2{margin:0;font-size:18px;letter-spacing:-.3px}
.sec-head p{margin:3px 0 0;color:var(--muted);font-size:13px}
.sec-head a{color:var(--blue2);font-weight:700;font-size:13px;text-decoration:none;white-space:nowrap}
.eyebrow{display:block;color:var(--blue2);font-size:10.5px;font-weight:800;letter-spacing:2px}

/* shared surface */
.surface,.card-form,.verification-card,.track-card,.order,.empty,.stat,.p-card,.bundle,.net-card,.recent-row{
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015)),var(--surface);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:0 12px 32px rgba(2,6,18,.28)}

/* ---------- dashboard: wallet hero ---------- */
.hero{position:relative;overflow:hidden;border-radius:28px;padding:24px 22px 18px;color:#fff;
  background:radial-gradient(420px 220px at 100% 0%,rgba(255,255,255,.2),transparent 65%),linear-gradient(145deg,#1a62ff,#1450e6);
  box-shadow:0 22px 50px rgba(26,92,255,.32)}
.hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.hero-hi{margin:0;font-size:17px;font-weight:600}
.hero-label{margin:6px 0 0;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:1.4px;color:rgba(255,255,255,.72)}
.hero-label svg{width:18px;height:18px}
.hero-refresh{width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.18);transition:.15s}
.hero-refresh:hover{background:rgba(255,255,255,.28)}
.hero-refresh.spin svg{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-bal{display:flex;align-items:center;gap:14px;margin:12px 0 18px}
.hero-bal strong{font-size:clamp(38px,9vw,52px);letter-spacing:-2px;line-height:1;font-weight:800}
.eye{border:0;background:transparent;color:rgba(255,255,255,.75);cursor:pointer;padding:6px;border-radius:10px;display:grid;place-items:center}
.eye:hover{color:#fff;background:rgba(255,255,255,.12)}
.hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hero-btn{display:flex;align-items:center;justify-content:center;gap:9px;padding:15px 12px;border-radius:14px;font-weight:700;font-size:16px;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:.15s}
.hero-btn.primary{background:#fff;color:#12307a}
.hero-btn.ghost{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);color:#fff}
.hero-btn:hover{transform:translateY(-1px);filter:brightness(1.04)}
.hero-updated{margin:14px 0 2px;font-size:13px;color:rgba(255,255,255,.7)}

/* ---------- dashboard: stat cards ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:16px}
.stat{padding:18px 18px 16px}
.stat-top{display:flex;align-items:center;gap:12px}
.stat-ico{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;flex:none}
.stat-ico svg{width:22px;height:22px}
.stat-ico.blue{background:rgba(26,92,255,.16);color:#4a8dff}
.stat-ico.green{background:rgba(34,199,142,.14);color:var(--green)}
.stat-ico.amber{background:rgba(245,181,10,.14);color:var(--amber)}
.stat-ico.purple{background:rgba(155,123,255,.15);color:var(--purple)}
.stat-name{color:var(--muted);font-size:15px;font-weight:600}
.stat-val{display:block;margin:14px 0 2px;font-size:clamp(28px,6vw,34px);font-weight:800;letter-spacing:-1px;line-height:1.1}
.stat-sub{color:var(--muted2);font-size:14px}

/* ---------- dashboard: network cards ---------- */
.net-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.net-card{--nc:var(--blue2);display:flex;align-items:center;gap:16px;width:100%;text-align:left;cursor:pointer;color:var(--text);padding:18px;transition:.2s}
.net-card[data-network="mtn"]{--nc:#ffcc00}.net-card[data-network="airteltigo"]{--nc:#e4002b}.net-card[data-network="telecel"]{--nc:#e60000}
.net-card:hover{transform:translateY(-3px);border-color:var(--nc);box-shadow:0 18px 40px rgba(2,6,18,.4)}
.net-logo{width:84px;flex:none;border-radius:999px;overflow:hidden;display:block}
.net-logo svg{display:block;width:100%;height:auto}
.net-info{flex:1;min-width:0}
.net-info b{display:block;font-size:17px;letter-spacing:-.3px}
.net-info small{display:block;margin-top:3px;color:var(--muted);font-size:13px}
.net-card>svg.i{color:var(--muted2);transition:.2s}
.net-card:hover>svg.i{color:var(--nc);transform:translateX(3px)}

/* ---------- dashboard: recent orders ---------- */
.recent{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.recent-row{color:inherit;text-decoration:none;cursor:pointer;min-width:0;display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:18px}
.r-dot{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-weight:800;font-size:12px;color:#12141f;flex:none}
.r-dot.mtn{background:#ffcc00}.r-dot.airteltigo{background:linear-gradient(135deg,#2a77e8,#e4002b);color:#fff}.r-dot.telecel{background:#e60000;color:#fff}.r-dot.other{background:var(--surface2);color:var(--text)}
.r-main{flex:1;min-width:0}
.r-main b{display:block;font-size:14.5px}
.r-main small{display:block;color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r-side{text-align:right;display:grid;gap:5px;justify-items:end}
.r-side strong{font-size:14.5px}

/* ---------- verification cards ---------- */
.verification-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:14px}
.verification-card{display:grid;align-content:start;gap:12px;padding:22px}
.verification-card h2{font-size:19px;letter-spacing:-.4px;margin:2px 0 0}
.verification-card p{color:var(--muted);font-size:13.5px;line-height:1.6;margin:0}
.verification-card textarea,.verification-card>input,.card-form input,.track-card input,.co-field input,.auth-field input,.field input{
  width:100%;border:1px solid var(--line);border-radius:14px;background:var(--input);color:var(--text);font:15px Inter,Arial,sans-serif;padding:14px 15px;outline:0;transition:.15s}
.verification-card textarea{resize:vertical;min-height:84px}
input::placeholder,textarea::placeholder{color:var(--muted2)}
.verification-card textarea:focus,.verification-card>input:focus,.card-form input:focus,.track-card input:focus,.co-field input:focus,.auth-field input:focus,.field input:focus{border-color:var(--blue2);box-shadow:0 0 0 3px rgba(63,134,255,.2)}
.ported-check{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12.5px}
.ported-check input{accent-color:var(--blue);width:16px;height:16px}
.verification-message{min-height:17px;font-size:12.5px!important;font-weight:700}
.verification-message.ok{color:var(--green)}.verification-message.error{color:var(--red)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;text-align:center;border:0;cursor:pointer;background:linear-gradient(135deg,#1a5cff,#3f86ff);color:#fff;font-weight:700;font-size:14px;padding:14px 20px;border-radius:14px;justify-self:start;box-shadow:0 10px 24px rgba(26,92,255,.28);transition:.15s}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:rgba(255,255,255,.04);color:var(--text);border:1px solid var(--line2);box-shadow:none}
.btn.block{width:100%;justify-self:stretch}
.btn:disabled,.co-btn:disabled{opacity:.6;cursor:wait}

/* ---------- offers ---------- */
.logo-tabs{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.logo-tab{width:112px;height:66px;padding:0;border:1.5px solid var(--line);border-radius:999px;background:var(--surface);cursor:pointer;opacity:.6;transition:.18s;overflow:hidden}
.logo-tab svg{width:100%;height:100%;display:block}
.logo-tab:hover{opacity:.95}
.logo-tab.active{opacity:1;border-color:var(--accent);box-shadow:0 8px 26px var(--glow)}
.bundle-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.bundle{position:relative;overflow:hidden;padding:18px;display:flex;flex-direction:column;transition:.2s}
.bundle:hover{transform:translateY(-3px);border-color:var(--accent)}
.b-top{display:flex;justify-content:space-between;align-items:center}
.bundle small{color:var(--accent-text);font-size:11px;letter-spacing:1.5px;font-weight:800}
.b-ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.05);color:var(--muted)}
.b-ico svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bundle h3{font-size:32px;letter-spacing:-1.4px;margin:14px 0 0;line-height:1}
.bundle p{color:var(--muted);font-size:12.5px;margin:4px 0 0}
.b-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 6px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.b-foot strong{font-size:15px;letter-spacing:-.3px;white-space:nowrap;min-width:0}
.buy{border:0;cursor:pointer;background:var(--accent-grad);color:var(--on);padding:9px 11px;border-radius:11px;font-size:12px;font-weight:800;transition:.15s;white-space:nowrap;flex:none}
.buy:hover{filter:brightness(1.1)}

/* ---------- orders ---------- */
.orders{display:grid;gap:10px;max-width:720px}
.order{padding:0;overflow:hidden}
.o-head{width:100%;display:flex;align-items:center;gap:14px;padding:14px 16px;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.o-main{flex:1;min-width:0}
.o-main b{display:block;font-size:14.5px}
.o-main small{display:block;color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.o-side{display:grid;gap:5px;justify-items:end}
.o-side strong{font-size:14.5px}
.o-chev{width:18px;height:18px;flex:none;color:var(--muted);transition:transform .2s}
.order.open .o-chev{transform:rotate(180deg)}
.o-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease}
.order.open .o-body{grid-template-rows:1fr}
.o-inner{overflow:hidden;min-height:0}
.order.open .o-inner{padding:2px 16px 18px;border-top:1px solid var(--line);padding-top:16px}
.o-top{display:flex;justify-content:space-between;align-items:center}
.o-net{color:var(--accent-text);font-size:11px;font-weight:800;letter-spacing:1.5px}
.order h3{margin:10px 0 14px;font-size:21px;letter-spacing:-.5px}
.o-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.o-grid small{display:block;color:var(--muted);font-size:11px;margin-bottom:3px}
.o-grid b{font-size:13px;overflow-wrap:anywhere}
.o-copy{display:flex;align-items:center;gap:8px;max-width:100%;padding:6px 9px;margin:-6px 0 0 -9px;border:1px dashed transparent;border-radius:9px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:all}
.o-copy b{flex:0 1 auto;min-width:0;font-size:13px;overflow-wrap:anywhere}
.o-copy-ic{display:inline-flex;align-items:center;gap:4px;flex:none;color:var(--accent-text);font-size:11px;font-weight:700}
.o-copy-ic .i{width:14px;height:14px}
.o-copy-ic em{font-style:normal}
.o-copy:hover,.o-copy:focus-visible{background:var(--surface2);border-color:var(--line2)}
.o-copy.done .o-copy-ic{color:var(--green)}
.order-refresh{margin-top:16px;border:1px solid var(--line2);background:rgba(255,255,255,.04);color:var(--text);font-weight:700;font-size:12.5px;padding:10px 14px;border-radius:12px;cursor:pointer}
.badge{display:inline-block;font-size:11px;font-weight:800;padding:5px 11px;border-radius:999px;white-space:nowrap}
.badge.pending{background:rgba(245,181,10,.14);color:var(--amber)}
.badge.completed{background:rgba(34,199,142,.14);color:var(--green)}
.badge.cancelled{background:rgba(239,91,99,.14);color:var(--red)}
.empty{text-align:center;border-style:dashed;padding:40px 20px;max-width:720px}
.empty div{font-size:40px}.empty h3{margin:8px 0 4px}.empty .btn{margin-top:14px}

/* ---------- track ---------- */
.track-card{display:grid;gap:14px;max-width:560px;padding:24px}
.track-card h2{font-size:23px;letter-spacing:-.7px;margin:0}
.track-card>p{margin:0}
.track-card label{display:grid;gap:7px;color:var(--muted);font-size:12px;font-weight:700}
.optional{font-weight:500;font-size:10px}
.track-result{display:grid;gap:5px;min-height:18px;font-size:12.5px;line-height:1.5}
.track-result strong{font-size:18px;color:var(--blue2)}
.track-result.ok{color:var(--green)}.track-result.error{color:var(--red);font-weight:700}

/* ---------- profile ---------- */
.profile{max-width:640px;margin:0 auto;display:grid;gap:16px}
.p-card{padding:26px 22px}
.p-hero{text-align:center;display:grid;justify-items:center;gap:8px}
.p-avatar{width:70px;height:70px;border-radius:22px;display:grid;place-items:center;font-size:25px;font-weight:800;color:var(--blue2);background:rgba(26,92,255,.16);border:1px solid rgba(63,134,255,.22);margin-bottom:6px}
.p-name{margin:6px 0 0;font-size:25px;letter-spacing:-.6px;font-weight:800}
.p-role{display:inline-block;padding:5px 16px;border-radius:999px;font-size:13px;font-weight:600;color:var(--blue2);background:rgba(26,92,255,.12);border:1px solid rgba(63,134,255,.4)}
.p-mail{color:#b6c0d8;font-size:16px;margin:2px 0 0;overflow-wrap:anywhere}
.p-since{color:var(--muted);font-size:14px;margin:0}
.p-hero .btn{width:100%;margin-top:14px;padding:16px;background:rgba(255,255,255,.04);border:1px solid var(--line2);box-shadow:none;color:var(--text);font-size:16px}
.p-hero .btn:hover{background:rgba(255,255,255,.08)}
.p-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.p-stat{padding:16px 12px 16px 14px;border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015)),var(--surface);border:1px solid var(--line);min-width:0}
.p-stat small{display:block;color:var(--muted);font-size:13px;font-weight:600;white-space:nowrap}
.p-stat b{display:block;margin:10px 0 4px;font-size:clamp(19px,5.2vw,27px);letter-spacing:-.8px;font-weight:800;white-space:nowrap}
.p-stat span{display:block;color:var(--muted2);font-size:12.5px;line-height:1.35}
.p-stat span.up{color:var(--green)}.p-stat span.down{color:var(--red)}
.p-head{padding:22px 22px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}
.p-head h3{margin:0;font-size:20px;letter-spacing:-.4px}
.p-head p{margin:4px 0 0;color:var(--muted);font-size:14px}
.p-card.flush{padding:0;overflow:hidden}
.p-body{padding:22px;display:grid;gap:20px}
.field{display:grid;gap:9px}
.field>span{font-weight:600;font-size:15px;color:#d5dcef}
.field .in{position:relative}
.field .in svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--muted);width:20px;height:20px}
.field .in input{padding:16px 16px 16px 50px;font-size:16px;border-radius:16px}
.field input[readonly],.field input:disabled{color:#aab4cd;background:rgba(255,255,255,.035);cursor:default}
.p-body.editing input:not([readonly]){background:var(--input);border-color:var(--line2);color:var(--text)}
.field small{color:var(--muted);font-size:14px;margin-top:-2px}
.p-actions{display:none;gap:12px}
.p-actions.on{display:grid;grid-template-columns:1fr 1fr}
.p-actions .btn{justify-self:stretch;padding:15px}
.p-msg{min-height:18px;margin:0;font-size:13px;font-weight:700}
.p-msg.ok{color:var(--green)}.p-msg.error{color:var(--red)}
.sec-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:14px;cursor:pointer;font-weight:600;font-size:15.5px;color:var(--text);background:rgba(255,255,255,.04);border:1px solid var(--line2);white-space:nowrap}
.sec-btn:hover{background:rgba(255,255,255,.08)}
.sec-ok{text-align:center;display:grid;justify-items:center;gap:8px;padding:34px 22px 38px}
.sec-ico{width:70px;height:70px;border-radius:22px;display:grid;place-items:center;color:var(--blue2);background:rgba(26,92,255,.16);margin-bottom:8px}
.sec-ico svg{width:30px;height:30px}
.sec-ok h4{margin:0;font-size:19px}
.sec-ok p{margin:0;color:var(--muted);font-size:15px;max-width:300px}
.pw-form{padding:22px;display:grid;gap:16px}
.logout-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;padding:15px;border-radius:16px;cursor:pointer;font-weight:700;font-size:15px;color:#ff8b92;background:rgba(239,91,99,.08);border:1px solid rgba(239,91,99,.28)}
.logout-btn:hover{background:rgba(239,91,99,.14)}
.card-form{display:grid;gap:14px;padding:24px}
.card-form h3{margin:0;font-size:20px;letter-spacing:-.4px}
.card-form p{margin:0}
.card-form label{display:grid;gap:7px;font-size:12.5px;color:var(--muted);font-weight:600}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:14px;padding:5px}
.seg button{border:0;padding:10px;border-radius:10px;background:transparent;color:var(--muted);font-weight:700;font-size:13px;cursor:pointer}
.seg button.on{background:linear-gradient(135deg,#1a5cff,#3f86ff);color:#fff}
#agentBox{display:grid;gap:14px}
.ag-ok h4{margin:10px 0 0;font-size:18px}
.co-err{min-height:20px;color:var(--red);font-size:12.5px;margin:0}

/* ---------- bottom navigation ---------- */
.taskbar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:50;width:min(540px,94%);display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:7px;background:rgba(14,22,45,.82);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--line2);border-radius:24px;box-shadow:0 20px 60px rgba(2,6,18,.6)}
.tab{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 2px;border:0;background:transparent;color:var(--muted);font-size:11px;font-weight:700;border-radius:18px;cursor:pointer;transition:.18s}
.tab svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tab:hover{color:var(--text)}
.tab.active{background:linear-gradient(135deg,#1a5cff,#3f86ff);color:#fff;box-shadow:0 8px 22px rgba(26,92,255,.4)}

/* ---------- auth gate ---------- */
.auth-gate{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:34px 18px;background:rgba(7,11,24,.94);backdrop-filter:blur(26px);overflow:auto;transition:opacity .35s ease,visibility .35s ease}
.auth-gate.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.auth-shell{position:relative;width:min(100%,1040px);display:grid;grid-template-columns:1fr minmax(340px,420px);gap:clamp(30px,7vw,90px);align-items:center}
.auth-copy h1{font-size:clamp(46px,7vw,82px);line-height:.95;letter-spacing:-4px;margin:20px 0}
.auth-copy h1 em{font-style:normal;color:var(--blue2)}
.auth-copy p{color:var(--muted);font-size:16px;line-height:1.7;max-width:360px}
.auth-proof{display:flex;align-items:center;gap:10px;margin-top:40px;color:#c7d0e6;font-size:13px}
.proof-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 6px rgba(34,199,142,.15),0 0 16px var(--green)}
.auth-orb{position:absolute;border-radius:50%;pointer-events:none}
.orb-one{width:200px;height:200px;left:-40px;top:-70px;background:rgba(26,92,255,.1)}
.orb-two{width:260px;height:260px;right:-90px;bottom:-80px;background:rgba(155,123,255,.08)}
.auth-card{position:relative;padding:28px;border-radius:28px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015)),var(--surface);border:1px solid var(--line2);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.clay-symbol{display:block;width:46px;height:46px;border-radius:14px;margin-bottom:20px}
.auth-card h2{font-size:27px;letter-spacing:-1px;margin:8px 0 5px}
.auth-card-head p{color:var(--muted);font-size:13.5px;margin:0 0 20px}
.auth-seg{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:5px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--line);margin-bottom:18px}
.auth-seg button{border:0;border-radius:10px;padding:10px;background:transparent;color:var(--muted);font-weight:700;cursor:pointer}
.auth-seg button.active{background:linear-gradient(135deg,#1a5cff,#3f86ff);color:#fff}
.auth-field{display:grid;gap:7px;margin-bottom:13px}
.auth-field[hidden]{display:none}
.auth-field label{font-size:12px;font-weight:700;color:var(--muted)}
.auth-error{min-height:17px;margin:4px 0 8px;color:var(--red);font-size:12px;font-weight:700}
.auth-submit,.guest-btn{width:100%;border:0;border-radius:14px;padding:14px;font-weight:800;font-size:14px;cursor:pointer}
.auth-submit{color:#fff;background:linear-gradient(135deg,#1a5cff,#3f86ff);box-shadow:0 10px 24px rgba(26,92,255,.3)}
.auth-submit:hover{filter:brightness(1.08)}
.auth-submit:disabled{opacity:.6}
.auth-divider{display:flex;align-items:center;gap:10px;margin:16px 0;color:var(--muted2);font-size:12px}
.auth-divider:before,.auth-divider:after{content:"";height:1px;flex:1;background:var(--line)}
.guest-btn{display:flex;align-items:center;justify-content:center;gap:8px;background:rgba(255,255,255,.04);color:var(--text);border:1px solid var(--line2)}
.guest-btn span{color:var(--blue2);font-size:17px}
.guest-btn:hover{background:rgba(255,255,255,.08)}
.auth-note{text-align:center;color:var(--muted2);font-size:11px;margin:14px 0 0}

/* ---------- assistant ---------- */
.ai-fab{position:fixed;right:16px;bottom:100px;z-index:60;display:flex;align-items:center;gap:7px;border:0;cursor:pointer;color:#fff;background:linear-gradient(135deg,#1a5cff,#3f86ff);padding:9px 15px 9px 11px;border-radius:999px;font-weight:700;font-size:12px;box-shadow:0 8px 22px rgba(26,92,255,.4),inset 0 0 0 1px #ffffff30;transition:transform .2s ease}
.ai-fab:hover{transform:translateY(-2px)}.ai-fab:active{transform:scale(.96)}
.ai-fab b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#ffffff30;font-size:11px}
.ai-fab.on{padding:9px 11px}.ai-fab.on .ai-fl{display:none}
.ai-panel{position:fixed;right:16px;bottom:148px;z-index:70;width:316px;max-width:calc(100vw - 20px);height:432px;max-height:calc(100vh - 176px);display:flex;flex-direction:column;overflow:hidden;background:var(--surface);color:var(--text);border:1px solid var(--line2);border-radius:20px;box-shadow:0 18px 50px rgba(0,0,0,.5);transform-origin:bottom right;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px) scale(.92);transition:opacity .18s ease,transform .22s cubic-bezier(.2,.9,.3,1.2),visibility 0s linear .22s}
.ai-panel.open{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .18s ease,transform .22s cubic-bezier(.2,.9,.3,1.2),visibility 0s}
.ai-head{display:flex;align-items:center;gap:9px;padding:11px 12px;background:linear-gradient(135deg,#1a5cff,#3f86ff);color:#fff}
.ai-av{width:30px;height:30px;border-radius:50%;background:#ffffff35;display:grid;place-items:center;font-size:15px;flex:none}
.ai-head div{flex:1;line-height:1.25}.ai-head b{display:block;font-size:13px}.ai-head small{opacity:.85;font-size:10px}
.ai-x{width:24px;height:24px;border:0;border-radius:50%;background:#ffffff35;color:#fff;font-size:16px;cursor:pointer;line-height:1;padding:0;flex:none}
.ai-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:9px 10px 0;padding:3px;background:rgba(255,255,255,.04);border-radius:11px}
.ai-tabs button{padding:7px;border:0;border-radius:9px;background:transparent;color:var(--muted);font-weight:700;font-size:11px;cursor:pointer}
.ai-tabs button.on{background:var(--surface2);color:var(--text)}
.ai-pane{flex:1;min-height:0;display:none;flex-direction:column}.ai-pane.on{display:flex}
.ai-msgs{flex:1;overflow:auto;padding:11px 10px;display:flex;flex-direction:column;gap:7px;scrollbar-width:thin}
.msg{max-width:88%;padding:8px 11px;border-radius:14px;font-size:12px;line-height:1.5;overflow-wrap:anywhere;animation:qIn .2s ease}
.msg.bot{align-self:flex-start;background:var(--surface2);border:1px solid var(--line);border-bottom-left-radius:4px}
.msg.me{align-self:flex-end;background:linear-gradient(135deg,#1a5cff,#3f86ff);color:#fff;border-bottom-right-radius:4px}
.bot-act{display:inline-block;margin:6px 5px 0 0;border:0;cursor:pointer;background:linear-gradient(135deg,#1a5cff,#3f86ff);color:#fff;font-weight:800;font-size:11px;padding:6px 10px;border-radius:9px}
.chips{display:flex;gap:5px;overflow-x:auto;padding:0 10px 8px;scrollbar-width:none}.chips::-webkit-scrollbar{display:none}
.chips button{flex:none;border:1px solid var(--chip-bd);background:var(--chip-bg);color:var(--chip-tx);font-size:11px;font-weight:600;padding:5px 10px;border-radius:999px;cursor:pointer;white-space:nowrap}
.ai-in{display:flex;gap:6px;padding:8px 10px;border-top:1px solid var(--line)}
.ai-in input{flex:1;min-width:0;padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:var(--input);color:var(--text);font:13px Inter,Arial,sans-serif;outline:0}
.ai-in input:focus{border-color:var(--blue2)}
.ai-in button{width:34px;height:34px;border:0;border-radius:50%;background:linear-gradient(135deg,#1a5cff,#3f86ff);color:#fff;font-size:13px;cursor:pointer;flex:none}
.human{padding:14px 12px;overflow:auto}
.human h3{margin:0 0 4px;font-size:16px}.human p{color:var(--muted);font-size:12px;line-height:1.5;margin:0 0 12px}
.h-btn{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:13px;padding:9px 10px;margin-bottom:7px;transition:.15s}
.h-btn:hover{background:rgba(255,255,255,.08)}
.h-btn i{font-style:normal;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:14px;flex:none;color:#fff}
.h-btn b{display:block;font-size:12px}.h-btn span{display:block;color:var(--muted);font-size:11px;margin-top:1px;overflow-wrap:anywhere}
.h-wa i{background:#25d366}.h-call i{background:#4f7cff}.h-mail i{background:#ff5fa2}

/* ---------- checkout ---------- */
.co-lock{overflow:hidden}
.co-overlay{position:fixed;inset:0;z-index:100;background:var(--ov);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:16px}
.co-overlay.open{display:flex}
.co-modal{position:relative;width:100%;max-width:460px;max-height:94vh;overflow:auto;color:var(--text);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015)),var(--surface);border:1px solid var(--line2);border-radius:26px;padding:28px 26px;box-shadow:0 40px 120px rgba(0,0,0,.6)}
.co-close{position:absolute;top:12px;right:14px;width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.08);color:var(--text);font-size:22px;cursor:pointer;line-height:1}
.co-steps{list-style:none;display:flex;gap:6px;padding:0;margin:0 30px 22px 0;font-size:11px;color:var(--muted)}
.co-steps li{flex:1;display:flex;align-items:center;gap:7px;font-weight:600}
.co-steps span{width:22px;height:22px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;font-size:11px;flex:none}
.co-steps .now{color:var(--text)}.co-steps .now span{background:var(--accent-grad);border-color:transparent;color:var(--on)}
.co-steps .done span{background:var(--chip-bg);border-color:var(--chip-bd);color:var(--accent-text)}
.co-chip{display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin-bottom:20px}
.co-chip small{display:block;color:var(--accent-text);font-size:10px;letter-spacing:1.5px;font-weight:800}
.co-chip b{font-size:15px}.co-chip strong{color:var(--accent-text);font-size:19px}
.co-modal h2{margin:0 0 6px;font-size:23px;letter-spacing:-.8px}
.co-sub{color:var(--muted);font-size:13px;line-height:1.6;margin:0 0 18px}
.co-field{display:grid;gap:7px;margin-bottom:6px}
.co-field span{font-size:12px;color:var(--muted);font-weight:600}
.co-field input{font:600 20px Inter,Arial,sans-serif;letter-spacing:1px;padding:15px 16px;border-radius:14px}
.co-modal .co-err{margin:8px 0}
.co-warn{background:rgba(245,181,10,.1);border:1px solid rgba(245,181,10,.3);color:#ffd37a;font-size:12px;border-radius:10px;padding:10px 12px;margin:0 0 14px;line-height:1.5}
.co-btn{display:block;width:100%;text-align:center;text-decoration:none;border:0;cursor:pointer;background:var(--accent-grad);color:var(--on);font:700 14px Inter,Arial,sans-serif;padding:15px;border-radius:14px;box-shadow:0 10px 26px var(--glow)}
.co-btn:hover{filter:brightness(1.08)}
.co-btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line2);box-shadow:none}
.co-row{display:grid;grid-template-columns:1fr 2fr;gap:10px}
.co-sum{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:16px;padding:6px 16px;margin:14px 0}
.co-sum div{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:13px}
.co-sum div:last-child{border-bottom:0}
.co-sum span{color:var(--muted)}.co-sum b{text-align:right;overflow-wrap:anywhere}
.co-sum .total b{color:var(--accent-text);font-size:20px}
.co-pay{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin-bottom:6px}
.co-pay p{margin:0;font-size:12px;color:var(--muted);line-height:1.5}
.co-ps{background:#0ba4db;color:#fff;font-weight:800;font-size:13px;padding:7px 11px;border-radius:8px;flex:none}
.co-fine{text-align:center;color:var(--muted);font-size:11px;margin:12px 0 0}
.co-ok{text-align:center}.co-ok .co-sum{text-align:left}.co-ok .co-btn{margin-top:10px}
.tick{width:64px;height:64px;border-radius:50%;background:var(--chip-bg);border:2px solid var(--accent-text);color:var(--accent-text);font-size:32px;display:grid;place-items:center;margin:6px auto 16px}
.co-port{display:flex;align-items:center;gap:9px;margin:2px 0 8px;color:var(--muted);font-size:12px}
.co-port input{accent-color:var(--blue);width:15px;height:15px}
.co-api-ref{display:inline-block;margin-top:8px;color:var(--accent-text);font-size:11px;font-weight:800}

/* ---------- responsive ---------- */
@media(min-width:900px){
  .stat-grid{grid-template-columns:repeat(4,1fr)}
  .hero{padding:30px 32px 22px}
}
@media(max-width:900px){.bundle-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){
  .net-grid{grid-template-columns:1fr}
  .verification-grid{grid-template-columns:1fr}
  .auth-gate{align-items:start}
  .auth-shell{grid-template-columns:1fr;gap:22px;max-width:440px}
  .auth-copy{padding:4px 8px}
  .auth-copy h1{font-size:50px;letter-spacing:-3px;margin:12px 0}
  .auth-copy p{font-size:14px}.auth-proof{margin-top:18px}
  .auth-card{padding:24px;border-radius:26px}
  .orb-one{left:50%;top:30px}.orb-two{right:-120px;bottom:20px}
}
@media(max-width:700px){
  .bundle-grid{grid-template-columns:1fr 1fr;gap:12px}
  .bundle{padding:16px}.bundle h3{font-size:27px}
  .o-grid{grid-template-columns:1fr}
  .ai-panel{right:10px;width:min(330px,calc(100vw - 20px));bottom:144px}.ai-fab{right:12px;bottom:96px}
  .taskbar{gap:1px;width:min(560px,97%)}.tab{padding-left:1px;padding-right:1px}
  .pill{display:none}
}
@media(max-width:480px){
  .co-modal{padding:24px 18px;border-radius:22px}.co-steps{font-size:10px}
  .logo-tab{width:98px;height:58px}.tab{font-size:10px}
  .auth-card{padding:22px 18px}.auth-copy h1{font-size:46px}.top{height:66px}
  .hero{padding:20px 18px 16px;border-radius:24px}
  .stat{padding:16px 14px}.stat-name{font-size:14px;line-height:1.25}.stat-ico{width:40px;height:40px}.stat-top{gap:10px}
  .p-card{padding:22px 18px}.p-head{padding:20px 18px 16px}.p-body{padding:18px}
}

/* ==========================================================================
   Login / sign up screen (clean single column, guest card on top)
   ========================================================================== */
.auth-gate{background:radial-gradient(700px 420px at 85% -10%,rgba(26,92,255,.18),transparent 62%),var(--bg);backdrop-filter:none;place-items:start center;padding:max(20px,env(safe-area-inset-top)) 22px max(36px,env(safe-area-inset-bottom))}
.auth-gate .auth-shell{display:block;width:100%;max-width:440px;margin:0 auto}
.auth-gate .auth-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}
.auth-back{display:inline-flex;align-items:center;gap:10px;padding:8px 0;border:0;background:none;color:var(--muted);font:inherit;font-size:15px;cursor:pointer}
.auth-back:hover{color:var(--text)}
.auth-back .i,.auth-guest .i,.auth-input .i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.auth-logo{width:54px;height:54px;border-radius:17px;box-shadow:0 8px 24px rgba(0,0,0,.35);object-fit:cover}

.auth-guest{display:flex;align-items:center;gap:14px;width:100%;padding:16px;margin-bottom:34px;text-align:left;font:inherit;color:var(--text);cursor:pointer;border-radius:20px;
  background:linear-gradient(135deg,rgba(63,134,255,.16),rgba(63,134,255,.04));border:1.5px dashed rgba(63,134,255,.45);
  animation:authGuestIn .55s cubic-bezier(.2,.8,.2,1) both;transition:border-color .15s,box-shadow .15s,transform .15s}
.auth-guest:hover{border-style:solid;border-color:var(--blue2);box-shadow:0 10px 28px var(--glow,rgba(26,92,255,.3))}
.auth-guest:active{transform:scale(.99)}
.auth-guest-ico{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#1a5cff,#3f86ff);box-shadow:0 6px 16px rgba(26,92,255,.4)}
.auth-guest-txt b{display:block;font-size:16px;font-weight:700}
.auth-guest-txt small{display:block;margin-top:2px;color:var(--muted);font-size:13px;line-height:1.4}
.auth-guest-go{flex:none;margin-left:auto;color:var(--blue2);display:grid}
@keyframes authGuestIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}

.auth-gate .auth-card-head h2{font-size:34px;line-height:1.15;letter-spacing:-.8px;margin:0 0 8px}
.auth-gate .auth-card-head p{font-size:16px;margin:0 0 22px}
.auth-gate .auth-seg{margin-bottom:16px}
.auth-gate .auth-card{padding:22px;border-radius:24px;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.auth-gate .auth-field{margin-bottom:18px;gap:8px}
.auth-gate .auth-field label{font-size:15px;font-weight:600;color:var(--text)}
.auth-lab{display:flex;justify-content:space-between;align-items:baseline}
.auth-forgot{border:0;background:none;padding:0;font:inherit;font-size:13.5px;font-weight:600;color:var(--blue2);cursor:pointer}
.auth-input{position:relative}
.auth-input>.i{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.auth-gate .auth-field input{height:54px;padding:0 48px;border-radius:18px;font-size:16px}
.auth-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:42px;height:42px;display:grid;place-items:center;border:0;border-radius:12px;background:none;color:var(--muted);cursor:pointer}
.auth-eye.on{color:var(--blue2)}
.auth-error.ok{color:var(--green)}
.auth-gate .auth-submit{height:56px;border-radius:18px;font-size:17px;display:flex;align-items:center;justify-content:center;gap:10px;padding:0}
.auth-submit::after{content:"";width:20px;height:20px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat}
.auth-switch{text-align:center;margin:26px 0 0;color:var(--muted);font-size:15.5px}
.auth-switch button{border:0;background:none;padding:0;font:inherit;font-weight:700;color:var(--blue2);cursor:pointer}
.auth-switch .sw-signup{display:none}
.auth-gate:has(.auth-seg [data-auth-mode="signup"].active) .auth-switch .sw-login{display:none}
.auth-gate:has(.auth-seg [data-auth-mode="signup"].active) .auth-switch .sw-signup{display:inline}
.auth-gate:has(.auth-seg [data-auth-mode="signup"].active) .auth-forgot{display:none}
.auth-back:focus-visible,.auth-guest:focus-visible,.auth-eye:focus-visible,.auth-forgot:focus-visible,.auth-switch button:focus-visible{outline:3px solid rgba(63,134,255,.5);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.auth-guest{animation:none}}

.auth-gate .auth-top{justify-content:flex-start}

/* ==========================================================================
   Track order: "Check order status" sheet (guest session + main app)
   ========================================================================== */
#v-track .tk-sheet{max-width:560px;margin:0 auto;padding:22px 20px 26px;border-radius:28px;background:var(--surface);border:1px solid var(--line);box-shadow:0 20px 50px var(--sh)}
.tk-head{display:flex;align-items:center;gap:14px}
.tk-head h1{flex:1;margin:0;font-size:22px;line-height:1.2;letter-spacing:-.4px}
.tk-ico{flex:none;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:#5b4bd8;background:rgba(91,75,216,.12)}
.tk-close{flex:none;width:42px;height:42px;display:grid;place-items:center;border:0;border-radius:13px;background:none;color:var(--muted);cursor:pointer}
.tk-close:hover{background:var(--surface2);color:var(--text)}
.tk-ico .i,.tk-close .i,.tk-field .i,.tk-btn .i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tk-lead{margin:12px 0 20px;color:var(--muted);font-size:14.5px;line-height:1.55}
.tk-card{display:grid;gap:12px;padding:24px 20px;border-radius:20px;background:#1f2937;box-shadow:0 14px 34px rgba(15,23,42,.25)}
.tk-field{position:relative}
.tk-field[hidden],.tk-link[hidden]{display:none}
.tk-field .i{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:#9ca3af;pointer-events:none}
.tk-field input{width:100%;height:56px;padding:0 16px 0 52px;border-radius:14px;border:1px solid #4b5563;background:#374151;color:#f3f4f6;font:inherit;font-size:16px;outline:none}
.tk-field input::placeholder{color:#9ca3af}
.tk-field input:focus{border-color:#60a5fa;box-shadow:0 0 0 3px rgba(96,165,250,.3)}
.tk-btn{height:56px;display:flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:14px;background:#2563eb;color:#fff;font:inherit;font-size:17px;font-weight:600;cursor:pointer;transition:background .15s,transform .1s}
.tk-btn:hover{background:#1d4ed8}.tk-btn:active{transform:scale(.99)}.tk-btn:disabled{opacity:.65;cursor:default}
.tk-link{border:0;background:none;padding:4px 0 0;color:#93c5fd;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;text-align:center}
.tk-btn:focus-visible,.tk-link:focus-visible,.tk-close:focus-visible{outline:3px solid rgba(96,165,250,.55);outline-offset:2px}
.tk-result:not(:empty){margin-top:16px}
.tk-msg{margin:0;font-size:14px;line-height:1.5;color:var(--muted)}
.tk-msg.error{color:var(--red);font-weight:600}
.tk-order{display:grid;gap:4px;padding:14px 16px;margin-top:10px;border-radius:16px;background:var(--surface2);border:1px solid var(--line);font-size:13.5px;color:var(--muted)}
.tk-order:first-child{margin-top:0}
.tk-order-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:2px}
.tk-order-top b{font-size:16px;color:var(--text)}
.tk-order small{font-size:12px;color:var(--muted2);word-break:break-all}
.tk-chip{flex:none;padding:4px 11px;border-radius:999px;font-size:12px;font-weight:700}
.tk-chip.ok{color:var(--green);background:rgba(34,199,142,.14)}
.tk-chip.wait{color:var(--amber);background:rgba(245,181,10,.16)}
.tk-chip.failed{color:var(--red);background:rgba(239,91,99,.14)}
.tk-head h1{font-size:20px}
.tk-ico{color:#6d5ef0}

/* app icon avatars */
.top-avatar,.p-avatar{padding:0;overflow:hidden;background:#04123e;border:1px solid rgba(63,134,255,.28)}
.top-avatar img,.p-avatar img{width:100%;height:100%;display:block;object-fit:cover}
.adm-tag{font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#7fd4ff;background:rgba(18,198,255,.12);border:1px solid rgba(18,198,255,.35);padding:5px 10px;border-radius:999px}
.adm-open{display:flex;align-items:center;justify-content:center;gap:9px;text-decoration:none}
.adm-open .i{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}