/* ==========================================================================
   Afghan Gateway — Logistics OS
   Design system + landing + dashboard
   ========================================================================== */

:root{
  --bg:#F5F6FA;
  --bg-soft:#EEF0F7;
  --card:#FFFFFF;
  --ink:#0B1020;
  --ink-2:#1B2440;
  --muted:#667085;
  --muted-2:#98A2B3;
  --line:#E6E8F0;
  --line-2:#D6DAE6;

  --brand:#E8551C;
  --brand-600:#C9450F;
  --brand-700:#93300A;
  --brand-50:#FFF3ED;
  --brand-100:#FFE2D4;

  --amber:#F59E0B;
  --amber-50:#FFF7E6;
  --emerald:#10B981;
  --emerald-50:#E7F8F1;
  --rose:#F43F5E;
  --rose-50:#FFECEF;
  --sky:#0EA5E9;
  --sky-50:#E8F6FE;
  --violet:#B45309;

  --sidebar:#0A0F1E;
  --sidebar-2:#131A2C;

  --r-xs:8px;
  --r-sm:10px;
  --r:14px;
  --r-lg:20px;
  --r-xl:28px;

  --shadow-xs:0 1px 2px rgba(16,24,40,.06);
  --shadow-sm:0 2px 8px -2px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.04);
  --shadow:0 14px 34px -16px rgba(16,24,40,.22), 0 3px 8px -4px rgba(16,24,40,.08);
  --shadow-lg:0 40px 80px -32px rgba(16,24,40,.32);
  --shadow-brand:0 18px 36px -18px rgba(232,85,28,.65);

  --font:"Inter",ui-sans-serif,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-ar:"Vazirmatn","Noto Naskh Arabic",Tahoma,var(--font);

  --nav-h:72px;
  --maxw:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--bg)}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
[dir="rtl"] body{font-family:var(--font-ar);font-size:15.5px}
img,svg{max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4,h5{margin:0;letter-spacing:-.025em;line-height:1.15;font-weight:700}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
::selection{background:var(--brand-100);color:var(--brand-700)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:24px}
.muted{color:var(--muted)}
.tiny{font-size:12px}
.small{font-size:13px}
.strong{font-weight:600}
.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.hide{display:none!important}
.nowrap{white-space:nowrap}
.center{text-align:center}
.row{display:flex;align-items:center}
.between{display:flex;align-items:center;justify-content:space-between;gap:16px}
.wrapflex{flex-wrap:wrap}
.gap-4{gap:4px}.gap-6{gap:6px}.gap-8{gap:8px}.gap-10{gap:10px}.gap-12{gap:12px}
.gap-16{gap:16px}.gap-20{gap:20px}.gap-24{gap:24px}
.grow{flex:1;min-width:0}
.stack{display:flex;flex-direction:column}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}
.mt-20{margin-top:20px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-40{margin-top:40px}
.mb-0{margin-bottom:0}.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}
.eyebrow{
  font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand);display:inline-flex;align-items:center;gap:8px
}
[dir="rtl"] .eyebrow{letter-spacing:0}

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 18px;border-radius:12px;border:1px solid transparent;
  font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:transform .12s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease,color .18s;
  user-select:none;
}
.btn:active{transform:translateY(1px)}
.btn svg{width:17px;height:17px;flex:none}
.btn-primary{background:var(--brand);color:#fff;box-shadow:var(--shadow-brand)}
.btn-primary:hover{background:var(--brand-600)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--ink-2)}
.btn-ghost{background:transparent;color:var(--ink-2)}
.btn-ghost:hover{background:rgba(11,16,32,.06)}
.btn-outline{background:#fff;border-color:var(--line-2);color:var(--ink-2);box-shadow:var(--shadow-xs)}
.btn-outline:hover{border-color:var(--ink-2);background:#fff}
.btn-soft{background:var(--brand-50);color:var(--brand-700)}
.btn-soft:hover{background:var(--brand-100)}
.btn-danger{background:var(--rose-50);color:#B42318;border-color:#FAD2D9}
.btn-danger:hover{background:#FFDFE4}
.btn-sm{height:36px;padding:0 13px;font-size:13px;border-radius:10px}
.btn-xs{height:30px;padding:0 10px;font-size:12px;border-radius:9px}
.btn-lg{height:52px;padding:0 26px;font-size:15px;border-radius:14px}
.btn-block{width:100%}
.btn-icon{width:38px;height:38px;padding:0;border-radius:10px;background:transparent;border:1px solid transparent}
.btn-icon:hover{background:rgba(11,16,32,.06)}
.btn[disabled],.btn.is-disabled{opacity:.45;pointer-events:none}

/* ---------------- Badges / chips ---------------- */
.pill{
  display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;
  border-radius:999px;font-size:11.5px;font-weight:650;letter-spacing:.01em;white-space:nowrap;
  background:var(--bg-soft);color:var(--muted);border:1px solid transparent
}
.pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.pill-brand{background:var(--brand-50);color:var(--brand-700)}
.pill-emerald{background:var(--emerald-50);color:#067647}
.pill-amber{background:var(--amber-50);color:#B54708}
.pill-rose{background:var(--rose-50);color:#B42318}
.pill-sky{background:var(--sky-50);color:#026AA2}
.pill-ink{background:rgba(11,16,32,.07);color:var(--ink-2)}
.pill-violet{background:#F3EEFF;color:#5B21B6}
.pill-lg{height:28px;padding:0 12px;font-size:12.5px}
.chip{
  display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border-radius:999px;
  background:#fff;border:1px solid var(--line);font-size:13px;font-weight:550;color:var(--ink-2);
  cursor:pointer;transition:.15s
}
.chip:hover{border-color:var(--line-2);background:#FCFCFE}
.chip.active{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---------------- Cards ---------------- */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-xs)
}
.card-pad{padding:22px}
.card-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:18px 22px;border-bottom:1px solid var(--line)
}
.card-head h3{font-size:15px;font-weight:650;letter-spacing:-.01em}
.card-head .sub{font-size:12.5px;color:var(--muted);margin-top:2px}
.card-body{padding:22px}
.card-foot{padding:14px 22px;border-top:1px solid var(--line);background:#FCFCFE;border-radius:0 0 var(--r-lg) var(--r-lg)}
.hoverlift{transition:transform .18s ease,box-shadow .18s ease,border-color .18s}
.hoverlift:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-2)}

/* ---------------- Forms ---------------- */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>span,.lbl{
  font-size:12.5px;font-weight:600;color:var(--ink-2);
  display:flex;align-items:center;gap:6px
}
.field .hint{font-size:11.5px;color:var(--muted-2)}
.input,select.input,textarea.input{
  width:100%;height:44px;padding:0 13px;border-radius:11px;border:1px solid var(--line-2);
  background:#fff;font:inherit;font-size:14px;color:var(--ink);
  transition:border-color .15s,box-shadow .15s;appearance:none
}
textarea.input{height:auto;min-height:92px;padding:11px 13px;resize:vertical;line-height:1.5}
select.input{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-inline-end:36px
}
[dir="rtl"] select.input{background-position:left 12px center}
.input::placeholder{color:var(--muted-2)}
.input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(232,85,28,.12)}
.input.err{border-color:var(--rose);box-shadow:0 0 0 4px rgba(244,63,94,.1)}
.input-wrap{position:relative;display:flex;align-items:center}
.input-wrap .lead{position:absolute;inset-inline-start:12px;color:var(--muted-2);display:flex;pointer-events:none}
.input-wrap .lead svg{width:17px;height:17px}
.input-wrap .input{padding-inline-start:38px}
.input-wrap.trailing .input{padding-inline-end:44px}
.input-wrap .trail{position:absolute;inset-inline-end:6px;display:flex;align-items:center}
.field-error{font-size:11.5px;color:#B42318;display:none}
.field.invalid .field-error{display:block}
.field.invalid .input{border-color:var(--rose)}
.checkline{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--muted);cursor:pointer}
.checkline input{width:17px;height:17px;margin-top:1px;accent-color:var(--brand)}

/* switch */
.switch{position:relative;width:42px;height:24px;border-radius:999px;background:var(--line-2);border:none;cursor:pointer;transition:.18s;flex:none}
.switch::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.18s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch.on{background:var(--brand)}
.switch.on::after{inset-inline-start:21px}

/* ---------------- Landing: nav ---------------- */
.site-nav{
  position:sticky;top:0;z-index:60;height:var(--nav-h);
  background:rgba(255,255,255,.82);backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid rgba(230,232,240,.9)
}
.site-nav .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:10px;font-weight:750;letter-spacing:-.02em;font-size:16px}
.brand-mark{
  width:36px;height:36px;border-radius:11px;flex:none;
  background:linear-gradient(150deg,var(--brand),#F59E0B 55%,#FFC38F);
  display:grid;place-items:center;color:#fff;box-shadow:0 8px 18px -8px rgba(232,85,28,.9)
}
.brand-mark svg{width:20px;height:20px}
.brand small{display:block;font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);line-height:1}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{
  padding:9px 13px;border-radius:9px;font-size:13.5px;font-weight:550;color:var(--ink-2);transition:.15s
}
.nav-links a:hover{background:rgba(11,16,32,.05)}
.nav-right{display:flex;align-items:center;gap:8px}

/* language switch */
.lang{position:relative}
.lang-btn{
  display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 11px;border-radius:10px;
  border:1px solid var(--line);background:#fff;font-size:13px;font-weight:600;cursor:pointer;color:var(--ink-2)
}
.lang-btn svg{width:15px;height:15px;color:var(--muted)}
.lang-menu{
  position:absolute;top:calc(100% + 8px);inset-inline-end:0;min-width:172px;padding:6px;
  background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);
  display:none;z-index:80
}
.lang-menu.open{display:block;animation:pop .16s ease}
.lang-menu button{
  display:flex;width:100%;align-items:center;gap:9px;padding:9px 10px;border:0;background:none;
  border-radius:9px;font-size:13.5px;cursor:pointer;text-align:start
}
.lang-menu button:hover{background:var(--bg-soft)}
.lang-menu button.active{background:var(--brand-50);color:var(--brand-700);font-weight:650}
.lang-menu .code{font-size:10px;letter-spacing:.1em;color:var(--muted-2);font-weight:700}

/* ---------------- Hero ---------------- */
.hero{position:relative;overflow:hidden;padding:64px 0 0}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(900px 420px at 78% -8%,rgba(232,85,28,.16),transparent 62%),
    radial-gradient(600px 300px at 12% 8%,rgba(245,158,11,.10),transparent 60%);
}
.hero-grid-bg{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(to right,rgba(11,16,32,.045) 1px,transparent 1px),
                   linear-gradient(to bottom,rgba(11,16,32,.045) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 20%,#000 35%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 20%,#000 35%,transparent 78%);
}
.hero .wrap{position:relative;z-index:2}
.hero-cols{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center;padding-bottom:34px}
.hero h1{
  font-size:clamp(38px,4.6vw,62px);line-height:1.02;letter-spacing:-.035em;font-weight:800;margin:18px 0 0
}
.hero h1 em{font-style:normal;color:var(--brand);position:relative;white-space:nowrap}
.hero h1 em::after{
  content:"";position:absolute;left:0;right:0;bottom:.06em;height:.28em;background:rgba(245,158,11,.28);
  border-radius:3px;z-index:-1
}
.hero p.lede{font-size:16.5px;line-height:1.62;color:var(--muted);margin-top:18px;max-width:36em}
.hero-cta{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.hero-trust{display:flex;align-items:center;gap:18px;margin-top:30px;flex-wrap:wrap}
.avatars{display:flex}
.avatars span{
  width:30px;height:30px;border-radius:50%;border:2px solid #fff;margin-inline-start:-9px;
  display:grid;place-items:center;font-size:11px;font-weight:700;color:#fff;
  box-shadow:0 2px 6px rgba(16,24,40,.18)
}
.avatars span:first-child{margin-inline-start:0}
.trust-txt{font-size:12.5px;color:var(--muted);line-height:1.35}
.trust-txt b{color:var(--ink);font-weight:650}

/* hero visual / console */
.console{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:22px;
  box-shadow:var(--shadow-lg);overflow:hidden
}
.console-top{
  display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line);
  background:linear-gradient(#FCFCFE,#F7F8FC)
}
.console-top .dots{display:flex;gap:5px}
.console-top .dots i{width:8px;height:8px;border-radius:50%;background:#E3E6EF;display:block}
.console-top .ttl{font-size:11.5px;font-weight:650;color:var(--muted);letter-spacing:.04em;margin-inline-start:6px}
.console-body{padding:0}
.console-map{position:relative;height:196px;background:#0B1020;
  border-bottom:1px solid var(--line);overflow:hidden}
.console-rows{padding:6px 0}
.crow{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid #F2F4F9}
.crow:last-child{border-bottom:0}
.crow .ico{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:none}
.crow .ico svg{width:16px;height:16px}
.crow .t1{font-size:13px;font-weight:600}
.crow .t2{font-size:11.5px;color:var(--muted)}
.float-card{
  position:absolute;background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);padding:10px 12px;display:flex;align-items:center;gap:9px;
  font-size:12px;font-weight:600;z-index:3
}
.float-card .fc-ico{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;color:#fff;flex:none}
.float-card .fc-ico svg{width:14px;height:14px}

/* ---------------- Tracker bar ---------------- */
.tracker-wrap{position:relative;z-index:3;margin-top:8px}
.tracker{
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px 18px;
  box-shadow:var(--shadow);display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center
}
.tracker .tk-head{display:flex;align-items:center;gap:10px;padding-inline-end:16px;border-inline-end:1px solid var(--line)}
.tracker .tk-head .k{font-size:12px;font-weight:700}
.tracker .tk-head .s{font-size:11px;color:var(--muted)}
.tracker form{display:flex;gap:10px}
.tracker .input{height:46px;border-radius:12px;background:#FAFBFE}
.tracker-result{margin-top:14px;display:none}
.tracker-result.show{display:block;animation:rise .3s ease}
.tk-card{
  background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);
  overflow:hidden
}
.tk-head2{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.tk-body{display:grid;grid-template-columns:1.1fr .9fr}
.tk-left{padding:20px}
.tk-right{padding:20px;border-inline-start:1px solid var(--line);background:#FCFCFE}
.tk-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:16px}
.tk-meta .m .l{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted-2);font-weight:700}
.tk-meta .m .v{font-size:13.5px;font-weight:600;margin-top:2px}

/* ---------------- Sections ---------------- */
.section{padding:84px 0}
.section.tight{padding:56px 0}
.section-head{max-width:640px;margin-bottom:38px}
.section-head h2{font-size:clamp(27px,3.2vw,40px);letter-spacing:-.03em;margin-top:12px}
.section-head p{color:var(--muted);font-size:15.5px;margin-top:12px;line-height:1.6}
.section-head.center{margin-inline:auto;text-align:center}

/* stats strip */
.stat-strip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-xs);overflow:hidden
}
.stat-item{padding:24px 22px;border-inline-end:1px solid var(--line)}
.stat-item:last-child{border-inline-end:0}
.stat-item .v{font-size:29px;font-weight:750;letter-spacing:-.03em;line-height:1}
.stat-item .l{font-size:12.5px;color:var(--muted);margin-top:7px}

/* services */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.svc-card{
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;
  transition:transform .18s,box-shadow .18s,border-color .18s;position:relative;overflow:hidden
}
.svc-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line-2)}
.svc-card::after{
  content:"";position:absolute;inset-inline-end:-40px;top:-40px;width:120px;height:120px;border-radius:50%;
  background:var(--brand-50);opacity:0;transition:.3s
}
.svc-card:hover::after{opacity:1}
.svc-ico{
  width:44px;height:44px;border-radius:13px;display:grid;place-items:center;margin-bottom:16px;
  background:var(--brand-50);color:var(--brand);position:relative;z-index:1
}
.svc-ico svg{width:21px;height:21px}
.svc-card h3{font-size:16px;margin-bottom:8px}
.svc-card p{font-size:13.5px;color:var(--muted);line-height:1.6}
.svc-card .more{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:650;color:var(--brand);margin-top:14px}
.svc-card .more svg{width:14px;height:14px}

/* network map */
.net-card{
  background:linear-gradient(165deg,#0B1020 0%,#141B31 62%,#1B2340 100%);
  border-radius:26px;overflow:hidden;position:relative;color:#fff;
  box-shadow:0 40px 80px -40px rgba(11,16,32,.6)
}
.net-inner{display:grid;grid-template-columns:1fr 320px;min-height:460px}
.net-map{position:relative}
.net-side{padding:30px 26px;border-inline-start:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.02)}
.net-side h3{font-size:18px;margin-bottom:8px}
.net-side p{font-size:13px;color:rgba(255,255,255,.62);line-height:1.6}
.net-list{margin-top:18px;display:flex;flex-direction:column;gap:2px;max-height:210px;overflow:auto}
.net-list li{
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:9px;
  font-size:12.5px;color:rgba(255,255,255,.78)
}
.net-list li:hover{background:rgba(255,255,255,.06);color:#fff}
.net-list .n{display:flex;align-items:center;gap:8px}
.net-list .d{font-size:11px;color:rgba(255,255,255,.38);font-variant-numeric:tabular-nums}
.net-legend{display:flex;gap:14px;margin-top:18px;flex-wrap:wrap;font-size:11px;color:rgba(255,255,255,.5)}
.net-legend i{width:7px;height:7px;border-radius:50%;display:inline-block;margin-inline-end:5px}

/* svg map bits */
.node-label{font-size:12.5px;font-weight:600;fill:rgba(255,255,255,.72);font-family:var(--font)}
.node-label.on{fill:#fff}
.route-line{stroke:rgba(245,158,11,.55);stroke-width:1.8;fill:none;stroke-dasharray:5 5;animation:dash 22s linear infinite}
.route-line.hot{stroke:#F5B94A;stroke-width:1.8}
@keyframes dash{to{stroke-dashoffset:-200}}
.pulse-ring{animation:pulse 2.6s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes pulse{0%{transform:scale(.6);opacity:.9}70%{transform:scale(2.4);opacity:0}100%{opacity:0}}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;position:relative}
.step{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;position:relative}
.step-n{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-weight:750;font-size:15px;
  background:var(--ink);color:#fff;margin-bottom:16px
}
.step h3{font-size:16px;margin-bottom:8px}
.step p{font-size:13.5px;color:var(--muted);line-height:1.62}
.step .line{position:absolute;top:44px;inset-inline-end:-20px;width:20px;height:1px;background:var(--line-2)}
.step:last-child .line{display:none}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
.plan{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px;position:relative}
.plan.hot{border-color:var(--brand);box-shadow:0 24px 60px -30px rgba(232,85,28,.5);transform:translateY(-6px)}
.plan .tag{position:absolute;top:-11px;inset-inline-start:26px}
.plan h3{font-size:15px;font-weight:650}
.plan .price{font-size:34px;font-weight:780;letter-spacing:-.04em;margin:12px 0 2px}
.plan .price small{font-size:13px;font-weight:600;color:var(--muted);letter-spacing:0;margin-inline-start:6px}
.plan .desc{font-size:13px;color:var(--muted);min-height:38px;margin-bottom:16px}
.plan ul{display:flex;flex-direction:column;gap:10px;margin:18px 0 22px;border-top:1px solid var(--line);padding-top:18px}
.plan li{display:flex;gap:9px;font-size:13px;color:var(--ink-2);align-items:flex-start}
.plan li svg{width:16px;height:16px;color:var(--emerald);flex:none;margin-top:2px}

/* ---------------- Auth ---------------- */
.auth-section{padding:64px 0 84px;background:
  radial-gradient(700px 300px at 50% 0%,rgba(232,85,28,.10),transparent 70%),var(--bg-soft)}
.auth-wrap{
  display:grid;grid-template-columns:.92fr 1.08fr;background:#fff;border:1px solid var(--line);
  border-radius:26px;overflow:hidden;box-shadow:var(--shadow)
}
.auth-side{
  background:linear-gradient(160deg,#0B1020,#1A2242 70%,#262C55);color:#fff;padding:40px 34px;
  position:relative;overflow:hidden
}
.auth-side::before{
  content:"";position:absolute;width:320px;height:320px;border-radius:50%;inset-inline-end:-120px;bottom:-140px;
  background:radial-gradient(circle,rgba(245,158,11,.45),transparent 68%)
}
.auth-side h3{font-size:24px;letter-spacing:-.03em;position:relative}
.auth-side .p{font-size:13.5px;color:rgba(255,255,255,.66);margin-top:10px;line-height:1.65;position:relative}
.auth-bullets{margin-top:26px;display:flex;flex-direction:column;gap:16px;position:relative}
.auth-bullets li{display:flex;gap:11px;align-items:flex-start;font-size:13px;line-height:1.5;color:rgba(255,255,255,.85)}
.auth-bullets .bi{
  width:28px;height:28px;border-radius:9px;background:rgba(255,255,255,.10);display:grid;place-items:center;flex:none;
  border:1px solid rgba(255,255,255,.12)
}
.auth-bullets .bi svg{width:14px;height:14px;color:#B9AEFF}
.auth-bullets b{display:block;font-weight:650;color:#fff;font-size:13px}
.auth-bullets span{font-size:12px;color:rgba(255,255,255,.55)}
.auth-form{padding:34px 36px}
.auth-form h2{font-size:23px;letter-spacing:-.03em}
.auth-form .sub{font-size:13.5px;color:var(--muted);margin-top:6px}
.tabs{display:flex;gap:4px;background:var(--bg-soft);padding:4px;border-radius:12px;margin:20px 0}
.tabs button{
  flex:1;height:38px;border:0;background:none;border-radius:9px;font-size:13px;font-weight:600;
  color:var(--muted);cursor:pointer;transition:.15s;display:flex;align-items:center;justify-content:center;gap:6px
}
.tabs button svg{width:15px;height:15px}
.tabs button.active{background:#fff;color:var(--ink);box-shadow:var(--shadow-xs)}
.upload-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.upload-card{
  border:1.5px dashed var(--line-2);border-radius:12px;padding:12px 12px;cursor:pointer;
  transition:.16s;background:#FCFCFE;position:relative;overflow:hidden;text-align:start
}
.upload-card:hover{border-color:var(--brand);background:var(--brand-50)}
.upload-card .u-icon{width:26px;height:26px;border-radius:8px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;margin-bottom:8px;color:var(--brand)}
.upload-card .u-icon svg{width:14px;height:14px}
.upload-card .u-label{font-size:12.5px;font-weight:650;line-height:1.25}
.upload-card .u-hint{font-size:10.5px;color:var(--muted-2);margin-top:3px}
.upload-card.done{border-style:solid;border-color:var(--emerald);background:var(--emerald-50)}
.upload-card.done .u-icon{background:var(--emerald);color:#fff;border-color:transparent}
.upload-card input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.nego-box{
  display:flex;gap:11px;align-items:flex-start;background:var(--amber-50);border:1px solid #FCE9C1;
  border-radius:12px;padding:12px 13px;margin-top:16px
}
.nego-box .ni{width:26px;height:26px;border-radius:8px;background:#F59E0B;color:#fff;display:grid;place-items:center;flex:none}
.nego-box .ni svg{width:14px;height:14px}
.nego-box b{font-size:12.5px;display:block;color:#7A2E0E}
.nego-box span{font-size:11.5px;color:#93370D;line-height:1.5;display:block;margin-top:2px}
.form-note{font-size:11.5px;color:var(--muted-2);line-height:1.55;margin-top:12px}
.form-note a{color:var(--brand);font-weight:600}
.auth-alt{font-size:12.5px;color:var(--muted);text-align:center;margin-top:14px}
.auth-alt button{background:none;border:0;color:var(--brand);font-weight:650;cursor:pointer;padding:0;font-size:12.5px}

/* ---------------- Footer ---------------- */
.site-footer{background:#0B1020;color:#fff;padding:58px 0 26px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
.site-footer .brand small{color:rgba(255,255,255,.4)}
.foot-about{font-size:13px;color:rgba(255,255,255,.55);margin-top:14px;line-height:1.65;max-width:30em}
.foot-col h4{font-size:11px;text-transform:uppercase;letter-spacing:.13em;color:rgba(255,255,255,.42);margin-bottom:14px;font-weight:700}
.foot-col a{display:block;font-size:13px;color:rgba(255,255,255,.72);padding:5px 0;transition:.15s}
.foot-col a:hover{color:#fff}
.foot-bottom{
  margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.09);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12px;color:rgba(255,255,255,.42)
}
.social{display:flex;gap:8px}
.social a{width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.07);display:grid;place-items:center}
.social a:hover{background:rgba(255,255,255,.14)}
.social svg{width:15px;height:15px}

/* reveal */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}

/* ==========================================================================
   APP SHELL
   ========================================================================== */
.app{display:grid;grid-template-columns:262px minmax(0,1fr);min-height:100vh}
.sidebar{
  background:var(--sidebar);color:#fff;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow:hidden;z-index:50
}
.sidebar::after{
  content:"";position:absolute;inset-inline:0;bottom:0;height:220px;pointer-events:none;
  background:radial-gradient(300px 160px at 30% 100%,rgba(232,85,28,.28),transparent 70%)
}
.side-head{padding:20px 18px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.side-head .brand{color:#fff;font-size:15px}
.side-head .brand small{color:rgba(255,255,255,.35)}
.side-org{
  margin:6px 14px 14px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.07);display:flex;align-items:center;gap:10px
}
.side-org .oa{
  width:30px;height:30px;border-radius:9px;background:linear-gradient(140deg,#E8551C,#B45309);
  display:grid;place-items:center;font-size:12px;font-weight:750;flex:none
}
.side-org .on{font-size:12.5px;font-weight:650;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-org .or{font-size:10.5px;color:rgba(255,255,255,.45);margin-top:1px}
.sidenav{flex:1;overflow-y:auto;padding:4px 10px 16px;position:relative;z-index:1}
.sidenav::-webkit-scrollbar{width:6px}
.sidenav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:6px}
.nav-group{font-size:9.5px;font-weight:750;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.32);padding:16px 12px 7px}
[dir="rtl"] .nav-group{letter-spacing:0}
.side-link{
  display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;color:rgba(255,255,255,.62);
  font-size:13px;font-weight:550;cursor:pointer;transition:.14s;position:relative;border:0;background:none;width:100%;text-align:start
}
.side-link svg{width:17px;height:17px;flex:none;opacity:.85}
.side-link:hover{background:rgba(255,255,255,.06);color:#fff}
.side-link.active{background:rgba(255,255,255,.10);color:#fff;font-weight:600}
.side-link.active::before{
  content:"";position:absolute;inset-inline-start:0;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;
  background:var(--brand);box-shadow:0 0 10px rgba(245,158,11,.9)
}
[dir="rtl"] .side-link.active::before{border-radius:3px 0 0 3px}
.side-link .cnt{
  margin-inline-start:auto;font-size:10.5px;font-weight:700;background:var(--brand);color:#fff;
  min-width:19px;height:19px;border-radius:6px;display:grid;place-items:center;padding:0 5px
}
.side-foot{padding:12px;border-top:1px solid rgba(255,255,255,.08);position:relative;z-index:1}
.side-user{display:flex;align-items:center;gap:10px;padding:8px;border-radius:11px;cursor:pointer}
.side-user:hover{background:rgba(255,255,255,.06)}
.side-user .av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff;flex:none}
.side-user .un{font-size:12.5px;font-weight:600;line-height:1.2}
.side-user .ur{font-size:10.5px;color:rgba(255,255,255,.45)}

/* main */
.main{display:flex;flex-direction:column;min-width:0;background:var(--bg)}
.topbar{
  position:sticky;top:0;z-index:40;height:66px;display:flex;align-items:center;gap:14px;
  padding:0 26px;background:rgba(245,246,250,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)
}
.crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.crumb b{color:var(--ink);font-weight:650;font-size:15px;letter-spacing:-.01em}
.topbar .spacer{flex:1}
.top-search{
  display:flex;align-items:center;gap:8px;height:38px;padding:0 12px;border-radius:10px;border:1px solid var(--line);
  background:#fff;color:var(--muted);font-size:12.5px;cursor:pointer;min-width:240px;transition:.15s
}
.top-search:hover{border-color:var(--line-2);box-shadow:var(--shadow-xs)}
.top-search svg{width:15px;height:15px}
.top-search .kbd{margin-inline-start:auto;font-size:10px;border:1px solid var(--line);border-radius:5px;padding:1px 5px;background:#FAFBFE;color:var(--muted-2)}
.bell{position:relative}
.bell .badge-dot{
  position:absolute;top:5px;inset-inline-end:6px;min-width:15px;height:15px;border-radius:8px;background:var(--rose);
  color:#fff;font-size:9px;font-weight:750;display:grid;place-items:center;border:2px solid var(--bg);padding:0 3px
}
.content{padding:24px 26px 40px;flex:1;min-width:0}
.content-inner{max-width:1360px;margin-inline:auto}
.page{animation:rise .28s cubic-bezier(.2,.7,.3,1)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:20px;flex-wrap:wrap}
.page-title{font-size:24px;letter-spacing:-.03em}
.page-sub{font-size:13px;color:var(--muted);margin-top:5px;max-width:60ch}
.page-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* KPI */
.kpi{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px;position:relative;overflow:hidden}
.kpi .k-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.kpi .k-lbl{font-size:12px;color:var(--muted);font-weight:550}
.kpi .k-ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none}
.kpi .k-ico svg{width:15px;height:15px}
.kpi .k-val{font-size:26px;font-weight:750;letter-spacing:-.035em;line-height:1.1;margin-top:10px;display:flex;align-items:baseline;gap:7px}
.kpi .k-val small{font-size:12.5px;font-weight:600;color:var(--muted)}
.kpi .k-foot{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:11.5px;color:var(--muted)}
.delta{display:inline-flex;align-items:center;gap:3px;font-weight:700;font-size:11.5px}
.delta.up{color:#067647}
.delta.down{color:#B42318}
.delta svg{width:12px;height:12px}
.kpi .spark{position:absolute;inset-inline-end:0;bottom:0;width:96px;height:44px;opacity:.85}

/* charts */
.chart{width:100%;display:block;overflow:visible}
.chart .grid-l{stroke:#EDEFF6;stroke-width:1}
.chart .axis{font-size:9.5px;fill:#98A2B3;font-weight:600}
.bar{transition:opacity .15s}
.bar:hover{opacity:.8}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--muted)}
.legend i{width:8px;height:8px;border-radius:3px;display:inline-block;margin-inline-end:5px}

/* table */
.tbl-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl thead th{
  text-align:start;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-2);
  font-weight:700;padding:11px 16px;border-bottom:1px solid var(--line);background:#FCFCFE;white-space:nowrap
}
[dir="rtl"] .tbl thead th{letter-spacing:0}
.tbl tbody td{padding:13px 16px;border-bottom:1px solid #F2F4F9;vertical-align:middle}
.tbl tbody tr{transition:background .12s;cursor:pointer}
.tbl tbody tr:hover{background:#FAFBFE}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl .code{font-size:12px;font-weight:700;letter-spacing:.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl .sub{font-size:11px;color:var(--muted-2);margin-top:1px}
.tbl .route{display:flex;align-items:center;gap:7px;font-weight:550;white-space:nowrap}
.tbl .route svg{width:13px;height:13px;color:var(--muted-2);flex:none}
.tbl .num{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.tbl-empty{padding:48px 20px;text-align:center;color:var(--muted)}
.tbl-empty svg{width:34px;height:34px;color:var(--muted-2);margin-bottom:10px}

/* toolbar */
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:14px 16px;border-bottom:1px solid var(--line)}
.toolbar .input{height:38px;font-size:13px;border-radius:10px}
.toolbar .search{min-width:220px;max-width:300px}
.seg{display:flex;gap:3px;background:var(--bg-soft);padding:3px;border-radius:10px}
.seg button{border:0;background:none;height:30px;padding:0 12px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer}
.seg button.active{background:#fff;color:var(--ink);box-shadow:var(--shadow-xs)}

/* avatar */
.av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:11.5px;font-weight:700;flex:none;letter-spacing:.02em}
.av-lg{width:44px;height:44px;font-size:15px}
.av-sm{width:26px;height:26px;font-size:10px}
.av-stack{display:flex}
.av-stack .av{margin-inline-start:-8px;border:2px solid #fff}
.av-stack .av:first-child{margin-inline-start:0}

/* timeline */
.tl{position:relative;padding-inline-start:6px}
.tl-item{position:relative;padding:0 0 22px 34px;border-inline-start:2px solid var(--line);margin-inline-start:11px}
[dir="rtl"] .tl-item{padding:0 34px 22px 0}
.tl-item:last-child{border-inline-start-color:transparent;padding-bottom:2px}
.tl-dot{
  position:absolute;inset-inline-start:-12px;top:-1px;width:22px;height:22px;border-radius:50%;
  background:#fff;border:2px solid var(--line-2);display:grid;place-items:center;font-size:9px;font-weight:700;color:var(--muted-2)
}
.tl-dot svg{width:11px;height:11px}
.tl-item.done .tl-dot{background:var(--emerald);border-color:var(--emerald);color:#fff}
.tl-item.done{border-inline-start-color:#A6E9CE}
.tl-item.active .tl-dot{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 0 0 4px rgba(232,85,28,.16)}
.tl-item.active .tl-dot::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(232,85,28,.35);animation:pulse 2s ease-out infinite}
.tl-content h4{font-size:13px;font-weight:650;margin:0}
.tl-content p{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.5}
.tl-time{font-size:10.5px;color:var(--muted-2);margin-top:3px;font-variant-numeric:tabular-nums}

/* drawer */
.overlay{
  position:fixed;inset:0;background:rgba(11,16,32,.45);backdrop-filter:blur(2px);z-index:100;
  opacity:0;pointer-events:none;transition:opacity .22s
}
.overlay.show{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;bottom:0;inset-inline-end:0;width:min(560px,100%);background:var(--bg);z-index:101;
  transform:translateX(102%);transition:transform .3s cubic-bezier(.3,.8,.3,1);display:flex;flex-direction:column;
  box-shadow:-30px 0 80px -30px rgba(11,16,32,.4)
}
[dir="rtl"] .drawer{transform:translateX(-102%)}
.drawer.open{transform:none}
.drawer-head{
  padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;justify-content:space-between;
  gap:14px;background:#fff
}
.drawer-body{flex:1;overflow-y:auto;padding:20px 22px 30px}
.drawer-foot{padding:14px 22px;border-top:1px solid var(--line);background:#fff;display:flex;gap:8px;flex-wrap:wrap}

/* modal */
.modal{
  position:fixed;z-index:102;inset-inline-start:50%;top:50%;transform:translate(-50%,-46%) scale(.98);
  width:min(620px,calc(100% - 32px));max-height:90vh;overflow:auto;background:#fff;border-radius:20px;
  box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:.22s
}
.modal.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.modal-head{padding:20px 24px 0}
.modal-head h3{font-size:18px;letter-spacing:-.02em}
.modal-head p{font-size:12.5px;color:var(--muted);margin-top:4px}
.modal-body{padding:20px 24px}
.modal-foot{padding:16px 24px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:9px;background:#FCFCFE}
.modal-close{position:absolute;top:16px;inset-inline-end:16px}

/* toast */
.toasts{position:fixed;bottom:20px;inset-inline-end:20px;z-index:200;display:flex;flex-direction:column;gap:9px;pointer-events:none}
.toast{
  display:flex;align-items:flex-start;gap:10px;background:#0B1020;color:#fff;padding:11px 14px;border-radius:12px;
  box-shadow:var(--shadow-lg);font-size:13px;max-width:340px;animation:toastIn .25s ease;pointer-events:auto
}
.toast .ti{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;flex:none;margin-top:1px}
.toast .ti svg{width:12px;height:12px}
.toast.ok .ti{background:var(--emerald)}
.toast.err .ti{background:var(--rose)}
.toast.info .ti{background:var(--brand)}
.toast.out{animation:toastOut .2s ease forwards}
@keyframes toastIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateX(20px)}}

/* empty */
.empty{padding:44px 24px;text-align:center}
.empty .ei{width:52px;height:52px;border-radius:16px;background:var(--bg-soft);display:grid;place-items:center;margin:0 auto 14px;color:var(--muted-2)}
.empty .ei svg{width:24px;height:24px}
.empty h4{font-size:14.5px;margin-bottom:5px}
.empty p{font-size:12.5px;color:var(--muted);max-width:36ch;margin:0 auto}

/* command palette */
.palette{
  position:fixed;z-index:300;inset-inline-start:50%;top:14vh;transform:translateX(-50%);
  width:min(560px,calc(100% - 28px));background:#fff;border-radius:16px;box-shadow:var(--shadow-lg);
  border:1px solid var(--line);overflow:hidden;display:none
}
.palette.open{display:block;animation:rise .18s ease}
.palette input{
  width:100%;height:54px;border:0;border-bottom:1px solid var(--line);padding:0 18px;font:inherit;font-size:15px;outline:none
}
.palette-list{max-height:340px;overflow-y:auto;padding:8px}
.palette-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;cursor:pointer;font-size:13.5px}
.palette-item:hover,.palette-item.sel{background:var(--bg-soft)}
.palette-item svg{width:16px;height:16px;color:var(--muted)}
.palette-item .pi-sub{font-size:11.5px;color:var(--muted-2);margin-inline-start:auto}
.palette-hint{padding:10px 16px;border-top:1px solid var(--line);font-size:11px;color:var(--muted-2);background:#FCFCFE;display:flex;gap:14px}

/* notif panel */
.notif-panel{
  position:absolute;top:calc(100% + 10px);inset-inline-end:0;width:340px;background:#fff;border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--shadow-lg);z-index:90;display:none;overflow:hidden
}
.notif-panel.open{display:block;animation:pop .16s ease}
@keyframes pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.notif-head{padding:13px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.notif-head b{font-size:13px}
.notif-list{max-height:320px;overflow-y:auto}
.notif-item{display:flex;gap:10px;padding:12px 16px;border-bottom:1px solid #F2F4F9;font-size:12.5px}
.notif-item.unread{background:#FAFBFF}
.notif-item .nb{width:7px;height:7px;border-radius:50%;background:var(--brand);margin-top:6px;flex:none}
.notif-item .nb.read{background:transparent}

/* bid cards */
.bid{display:flex;gap:12px;padding:14px;border:1px solid var(--line);border-radius:14px;background:#fff;align-items:flex-start}
.bid.accepted{border-color:var(--emerald);background:var(--emerald-50)}
.bid .b-main{flex:1;min-width:0}
.bid .b-price{font-size:16px;font-weight:750;letter-spacing:-.02em}
.bid .b-meta{font-size:11.5px;color:var(--muted);margin-top:2px}
.bid .b-note{font-size:12px;color:var(--ink-2);margin-top:7px;background:var(--bg-soft);padding:7px 9px;border-radius:8px;line-height:1.45}
.stars{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;font-weight:650;color:#B54708}
.stars svg{width:12px;height:12px;fill:#F59E0B;stroke:none}

/* load card */
.load-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;transition:.16s}
.load-card:hover{border-color:var(--line-2);box-shadow:var(--shadow-sm)}
.load-route{display:flex;align-items:center;gap:9px;font-weight:650;font-size:14.5px;letter-spacing:-.01em}
.load-route .ar{color:var(--muted-2);display:flex}
.load-route .ar svg{width:15px;height:15px}
[dir="rtl"] .load-route .ar svg{transform:scaleX(-1)}
.load-meta{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:11.5px;color:var(--muted)}
.load-meta span{display:flex;align-items:center;gap:5px}
.load-meta svg{width:13px;height:13px;color:var(--muted-2)}

/* misc app */
.mini-map{height:300px;border-radius:14px;overflow:hidden;background:linear-gradient(160deg,#0B1020,#171F38);position:relative}
.banner{
  display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:13px;font-size:13px;
  background:var(--amber-50);border:1px solid #FCE9C1;color:#7A2E0E
}
.banner svg{width:18px;height:18px;flex:none}
.banner b{font-weight:700}
.progress{height:7px;border-radius:6px;background:var(--bg-soft);overflow:hidden}
.progress i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--brand),#B45309);transition:width .5s}
.doc-row{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.doc-row:last-child{border-bottom:0}
.doc-row .di{width:36px;height:36px;border-radius:10px;background:var(--brand-50);color:var(--brand);display:grid;place-items:center;flex:none}
.doc-row .di svg{width:17px;height:17px}
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 0;border-bottom:1px solid var(--line)}
.settings-row:last-child{border-bottom:0}
.settings-row .sl{font-size:13.5px;font-weight:600}
.settings-row .sd{font-size:11.5px;color:var(--muted);margin-top:2px;max-width:46ch}
.two-col{display:grid;grid-template-columns:1.6fr 1fr;gap:18px;align-items:start}
.three-col{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.quick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.quick button{
  display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:12px;border:1px solid var(--line);
  background:#fff;cursor:pointer;text-align:start;font-size:12.5px;font-weight:600;transition:.15s
}
.quick button:hover{border-color:var(--brand);background:var(--brand-50);color:var(--brand-700)}
.quick .qi{width:28px;height:28px;border-radius:8px;background:var(--bg-soft);display:grid;place-items:center;color:var(--ink-2)}
.quick button:hover .qi{background:#fff;color:var(--brand)}
.quick svg{width:15px;height:15px}
.act{display:flex;gap:10px;padding:12px 0;border-bottom:1px solid #F2F4F9;font-size:12.5px}
.act:last-child{border-bottom:0}
.act .ai{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:700;color:#fff;flex:none}
.act .at{line-height:1.45}
.act .at b{font-weight:650}
.act .ad{font-size:10.5px;color:var(--muted-2);margin-top:2px}

/* auth pages */
.authpage{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.authpage .aside{background:linear-gradient(160deg,#0B1020,#1A2242 60%,#2A2F5E);color:#fff;padding:48px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.authpage .aside h2{font-size:34px;letter-spacing:-.035em;line-height:1.12;margin-top:auto}
.authpage .aside p{font-size:14px;color:rgba(255,255,255,.6);margin-top:12px;max-width:34ch;line-height:1.6}
.authpage .main-side{display:grid;place-items:center;padding:40px 24px;background:var(--bg)}
.authbox{width:100%;max-width:420px}

/* top progress bar */
#nprogress{position:fixed;top:0;inset-inline-start:0;height:2.5px;width:0;background:var(--brand);z-index:999;transition:width .3s,opacity .3s;box-shadow:0 0 10px var(--brand)}

/* responsive */
@media(max-width:1100px){
  .hero-cols{grid-template-columns:1fr;gap:38px}
  .hero-visual{order:2}
  .net-inner{grid-template-columns:1fr}
  .net-side{border-inline-start:0;border-top:1px solid rgba(255,255,255,.09)}
  .foot-grid{grid-template-columns:1.4fr 1fr 1fr}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .two-col{grid-template-columns:1fr}
}
@media(max-width:1024px){
  .app{grid-template-columns:1fr}
  .sidebar{
    position:fixed;inset-block:0;inset-inline-start:0;width:270px;transform:translateX(-100%);
    transition:transform .26s ease;box-shadow:0 0 60px rgba(0,0,0,.4)
  }
  [dir="rtl"] .sidebar{transform:translateX(100%)}
  .sidebar.open{transform:none}
  .topbar{padding:0 16px}
  .content{padding:18px 16px 32px}
  .top-search{min-width:0;width:38px;padding:0;justify-content:center}
  .top-search .tx,.top-search .kbd{display:none}
  .authpage{grid-template-columns:1fr}
  .authpage .aside{display:none}
  .three-col{grid-template-columns:1fr}
}
@media(max-width:860px){
  .svc-grid,.steps,.plans{grid-template-columns:1fr}
  .plan.hot{transform:none}
  .auth-wrap{grid-template-columns:1fr}
  .auth-side{display:none}
  .auth-form{padding:26px 22px}
  .stat-strip{grid-template-columns:1fr 1fr}
  .stat-item:nth-child(2){border-inline-end:0}
  .stat-item{border-bottom:1px solid var(--line)}
  .stat-item:nth-last-child(-n+2){border-bottom:0}
  .tk-body{grid-template-columns:1fr}
  .tk-right{border-inline-start:0;border-top:1px solid var(--line)}
  .tracker{grid-template-columns:1fr;gap:12px}
  .tracker .tk-head{border-inline-end:0;padding-inline-end:0;border-bottom:1px solid var(--line);padding-bottom:10px}
  .tracker form{flex-wrap:wrap}
  .tracker form .input{flex:1;min-width:160px}
  .g2,.g3{grid-template-columns:1fr}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid{grid-template-columns:1fr 1fr}
  .hero h1{font-size:36px}
  .section{padding:56px 0}
  .drawer{width:100%}
}
@media(max-width:560px){
  .nav-links{display:none}
  .page-actions{width:100%}
  .page-actions .btn{flex:1}
  .quick{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .auth-form{padding:22px 18px}
  .upload-grid{grid-template-columns:1fr}
}

/* print (invoice / waybill) */
@media print{
  body{background:#fff}
  .sidebar,.topbar,.drawer-foot,.page-actions,.toasts,.overlay,.drawer-head .btn-icon,.no-print{display:none!important}
  .app{grid-template-columns:1fr}
  .content{padding:0}
  .drawer{position:static;transform:none;width:100%;box-shadow:none;background:#fff}
  .drawer-body{padding:0;overflow:visible}
  .card{box-shadow:none;border-color:#DDD}
  .print-only{display:block!important}
}
.print-only{display:none}

/* scrollbar polish */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#D3D8E4;border-radius:8px;border:3px solid var(--bg)}
::-webkit-scrollbar-track{background:transparent}
.sidebar ::-webkit-scrollbar-thumb{border:0;background:rgba(255,255,255,.12)}

/* ---------------- late additions (dashboard bits) ---------------- */
.mt-18{margin-top:18px}
.gap-18{gap:18px}

.k-lbl{font-size:11px;color:var(--muted);font-weight:600;letter-spacing:.01em}
.k-val{font-size:26px;font-weight:750;letter-spacing:-.035em;line-height:1.15;margin-top:6px}

.map-card{
  position:relative;height:170px;border-radius:14px;overflow:hidden;
  background:linear-gradient(155deg,#0B1020,#171F38 70%,#232A50)
}
.map-card .cap{
  position:absolute;bottom:9px;inset-inline-start:11px;font-size:10.5px;font-weight:600;
  color:rgba(255,255,255,.78);background:rgba(11,16,32,.45);padding:3px 8px;border-radius:7px;
  backdrop-filter:blur(4px)
}

.track-grid{display:grid;grid-template-columns:330px minmax(0,1fr);gap:18px;align-items:start}
@media(max-width:1100px){.track-grid{grid-template-columns:1fr}}

.stack.gap-18{gap:18px}
.grid.gap-18{gap:18px}

.tbl tbody tr[data-act]{cursor:pointer}
.toolbar .seg{overflow:auto;max-width:100%}
.toolbar .seg::-webkit-scrollbar{height:0}

.drawer-body .card{box-shadow:none}
.notif-panel{max-height:70vh;overflow:hidden;display:none}

/* ---------------- narrow-phone nav ---------------- */
@media(max-width:620px){
  .site-nav .wrap{padding-inline:14px;gap:8px}
  .brand{font-size:14px;min-width:0}
  .brand small{display:none}
  .brand>span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nav-right{gap:6px}
  .nav-right .btn-ghost{display:none}
  .lang-btn{padding:0 8px}
  .nav-right .btn-primary{padding:0 12px}
  .hero{padding-top:36px}
  .hero-cols{gap:28px}
  .hero-trust{gap:12px}
  .trust-txt{font-size:12px;min-width:0}
  .hero p.lede{font-size:15.5px}
  .tk-head2{gap:10px}
  .tk-head2 .btn{width:100%}
}

/* ---------------- overflow containment ---------------- */
.grid>*,.two-col>*,.three-col>*,.track-grid>*{min-width:0}
.card,.tbl-wrap{min-width:0}
.stack>*{min-width:0}
@media(max-width:900px){
  .nav-links{display:none}
}

/* ---------------- approvals / requests ---------------- */
.req-row{display:flex;align-items:flex-start;gap:12px;padding:14px;border:1px solid var(--line);border-radius:14px;background:#fff}
.req-row:hover{border-color:var(--line-2)}
.req-ico{width:34px;height:34px;border-radius:10px;background:var(--brand-50);color:var(--brand);display:grid;place-items:center;flex:none}
.req-ico svg{width:17px;height:17px}
button.card{border:1px solid var(--line);background:#fff}

/* ---------------- mobile bottom nav ---------------- */
.bottom-nav{display:none}
@media(max-width:1024px){
  .bottom-nav{
    display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;bottom:0;inset-inline:0;z-index:60;
    background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-top:1px solid var(--line);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -8px 30px -18px rgba(11,16,32,.35)
  }
  .bn-item{
    position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;
    border:0;background:none;color:var(--muted);font-size:9.5px;font-weight:600;cursor:pointer;border-radius:10px
  }
  .bn-item svg{width:19px;height:19px}
  .bn-item.active{color:var(--brand)}
  .bn-item.active svg{stroke-width:2.1}
  .bn-dot{
    position:absolute;top:2px;inset-inline-end:calc(50% - 18px);min-width:14px;height:14px;border-radius:8px;
    background:var(--rose);color:#fff;font-size:8.5px;font-weight:700;display:grid;place-items:center;padding:0 3px
  }
  .content{padding-bottom:86px}
  .drawer{padding-bottom:0}
}

/* ---------------- demo credentials ---------------- */
.cred-list{display:flex;flex-direction:column;gap:6px}
.cred-row{
  display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--line);
  border-radius:10px;background:#FCFCFE;cursor:pointer;font-size:12px;width:100%;text-align:start;
  transition:.14s;font-family:inherit;color:var(--ink)
}
.cred-row:hover{border-color:var(--brand);background:var(--brand-50)}
.cred-row .cr-role{font-weight:650;min-width:64px}
.cred-row .cr-phone{color:var(--muted);font-size:11.5px}
.cred-row .cr-pw{
  margin-inline-start:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;
  background:#fff;border:1px solid var(--line);border-radius:6px;padding:2px 6px;color:var(--ink-2)
}
[dir="rtl"] .cred-row .cr-phone{font-size:12px}

/* ---------------- app download band ---------------- */
.dl-band{
  background:linear-gradient(150deg,#0B1020,#242C55);border-radius:24px;color:#fff;padding:26px 30px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  box-shadow:0 30px 60px -40px rgba(11,16,32,.8)
}
.dl-band h3{font-size:19px;letter-spacing:-.03em;color:#fff}
.dl-band p{font-size:13px;color:rgba(255,255,255,.62);margin-top:5px;max-width:52ch}

/* bare inline icons inside flex rows must never stretch */
.row>svg{width:15px;height:15px;flex:none}
.between>svg{width:15px;height:15px;flex:none}

/* ---------------- inner pages ---------------- */
.page-hero{
  padding:46px 0 34px;border-bottom:1px solid var(--line);position:relative;overflow:hidden;
  background:radial-gradient(620px 280px at 82% 0%,rgba(232,85,28,.12),transparent 62%),var(--bg)
}
.page-hero h1{font-size:clamp(30px,3.9vw,48px);letter-spacing:-.035em;line-height:1.05;margin-top:12px;max-width:24ch}
.page-hero p{font-size:15.5px;color:var(--muted);margin-top:14px;max-width:58ch;line-height:1.65}
.crumbs{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--muted-2)}
.crumbs a:hover{color:var(--brand)}
.crumbs span{opacity:.5}

.detail{display:grid;grid-template-columns:54px 1fr;gap:18px;padding:26px 0;border-bottom:1px solid var(--line)}
.detail:last-child{border-bottom:0}
.detail .dnum{width:42px;height:42px;border-radius:13px;background:var(--brand-50);color:var(--brand-700);display:grid;place-items:center;font-weight:800;font-size:14px}
.detail h3{font-size:18.5px;letter-spacing:-.02em}
.detail p{font-size:13.5px;color:var(--muted);line-height:1.68;margin-top:8px;max-width:64ch}
.detail ul{margin-top:12px;display:flex;flex-wrap:wrap;gap:7px}
.detail li{font-size:11.5px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 10px;color:var(--ink-2)}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mini{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px}
.mini h4{font-size:14px;margin-bottom:7px}
.mini p{font-size:12.5px;color:var(--muted);line-height:1.6}
.mini .mi{width:32px;height:32px;border-radius:9px;background:var(--brand-50);color:var(--brand);display:grid;place-items:center;margin-bottom:10px}
.mini .mi svg{width:16px;height:16px}

.cmp{width:100%;border-collapse:collapse;font-size:13px;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.cmp th,.cmp td{padding:12px 16px;border-bottom:1px solid var(--line);text-align:start;vertical-align:top}
.cmp thead th{background:#FCFCFE;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-2);font-weight:700}
.cmp tbody tr:last-child td{border-bottom:0}
.cmp .yes{color:#067647;font-weight:700}
.cmp .no{color:var(--muted-2)}
.cmp td:first-child{font-weight:600;color:var(--ink-2)}

.band{background:linear-gradient(150deg,#0B1020,#2A1A16);border-radius:22px;color:#fff;padding:28px;display:flex;
  align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.band h3{font-size:20px;letter-spacing:-.03em}
.band p{font-size:13px;color:rgba(255,255,255,.62);margin-top:5px;max-width:52ch}

.demo-code{font-family:ui-monospace,Menlo,monospace;font-size:12px;background:#fff;border:1px solid var(--line);
  border-radius:8px;padding:3px 8px;cursor:pointer}
.demo-code:hover{border-color:var(--brand);color:var(--brand-700)}

@media(max-width:900px){
  .duo{grid-template-columns:1fr}
  .detail{grid-template-columns:40px 1fr;gap:12px}
  .page-hero{padding:34px 0 26px}
  .cmp{font-size:12px}
  .cmp th,.cmp td{padding:10px 11px}
}

/* ==========================================================================
   Contact page
   ========================================================================== */
.ct-hero{
  position:relative;overflow:hidden;padding:46px 0 44px;border-bottom:1px solid var(--line);
  background:
    radial-gradient(700px 320px at 92% -18%,rgba(232,85,28,.15),transparent 62%),
    radial-gradient(560px 280px at 2% 120%,rgba(245,158,11,.11),transparent 66%),
    var(--bg);
}
.ct-hero-grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:44px;align-items:center}
.ct-hero h1{font-size:clamp(32px,4.1vw,52px);letter-spacing:-.038em;line-height:1.02;margin-top:14px;max-width:19ch}
.ct-hero h1 .hl{color:var(--brand);position:relative;white-space:nowrap}
.ct-hero h1 .hl::after{
  content:"";position:absolute;inset-inline:0;bottom:.04em;height:.30em;z-index:-1;
  background:linear-gradient(90deg,rgba(232,85,28,.20),rgba(245,158,11,.20));border-radius:3px
}
.ct-hero p.lede{font-size:16px;color:var(--muted);line-height:1.66;margin-top:16px;max-width:47ch}

.ct-status{
  display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:999px;
  font-size:12px;font-weight:650;border:1px solid var(--line-2);background:#fff;color:var(--ink-2);white-space:nowrap
}
.ct-status .dot{width:7px;height:7px;border-radius:50%;background:var(--muted-2);flex:none}
.ct-status.open{border-color:#BBF0DA;background:var(--emerald-50);color:#067647}
.ct-status.open .dot{background:var(--emerald);animation:ctPulse 2.6s infinite}
@keyframes ctPulse{0%,100%{box-shadow:0 0 0 3px rgba(16,185,129,.18)}50%{box-shadow:0 0 0 7px rgba(16,185,129,.045)}}
.ct-status.closed{border-color:#FCD9DF;background:var(--rose-50);color:#B42318}
.ct-status.closed .dot{background:var(--rose)}
.ct-hero .ct-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:22px}

/* --- direct-line card --- */
.ct-direct{
  background:linear-gradient(158deg,#0B1020,#1B2340 70%,#2C1A14);
  border:1px solid rgba(255,255,255,.08);border-radius:22px;overflow:hidden;color:#fff;
  box-shadow:0 36px 76px -42px rgba(11,16,32,.9)
}
.ct-direct .ct-map{position:relative;height:156px;background:#0B1020;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.08)}
.ct-map-inner{position:absolute;inset:0;overflow:hidden}
.ct-map-inner svg{display:block;width:100%;height:100%}
.ct-direct .ct-map .lab{
  position:absolute;top:11px;inset-inline-start:13px;font-size:9px;letter-spacing:.11em;
  text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:750;z-index:2;
  max-width:58%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.ct-direct .ct-map .live{
  position:absolute;top:9px;inset-inline-end:11px;display:flex;align-items:center;gap:6px;
  font-size:9.5px;font-weight:700;letter-spacing:.05em;color:#6EE7B7;
  background:rgba(16,185,129,.16);border:1px solid rgba(16,185,129,.3);padding:3px 8px;border-radius:999px;z-index:2
}
.ct-direct .ct-map .live i{width:5px;height:5px;border-radius:50%;background:#6EE7B7;animation:blink 1.9s infinite}

.cd-row{
  display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:12px;
  border:1px solid transparent;background:none;color:#fff;cursor:pointer;text-align:start;
  transition:.15s;font-family:inherit;text-decoration:none
}
.cd-row:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1)}
.cd-ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(232,85,28,.18);color:#FFB08A;flex:none}
.cd-ico svg{width:16px;height:16px}
.ct-lines{display:flex;flex-direction:column;padding:10px}
.cd-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.cd-l{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.44);font-weight:750;line-height:1.1}
.cd-v{font-size:13px;font-weight:600;letter-spacing:-.01em;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cd-copy{
  margin-inline-start:auto;font-size:9.5px;font-weight:700;color:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.15);border-radius:7px;padding:4px 8px;background:rgba(255,255,255,.04);flex:none
}
.cd-row:hover .cd-copy{color:#fff;border-color:rgba(255,255,255,.32)}
.ct-direct .foot{
  padding:10px 14px 12px;border-top:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:10.5px;color:rgba(255,255,255,.45)
}

/* --- departments --- */
.ct-depts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.dept{
  position:relative;display:flex;flex-direction:column;padding:20px 19px 17px;background:#fff;
  border:1px solid var(--line);border-radius:18px;transition:transform .18s,box-shadow .18s,border-color .18s;overflow:hidden
}
.dept::before{
  content:"";position:absolute;inset:0 0 auto;height:3px;
  background:linear-gradient(90deg,var(--brand),var(--amber));opacity:0;transition:.2s
}
.dept:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--brand-100)}
.dept:hover::before{opacity:1}
.dept-ico{width:36px;height:36px;border-radius:11px;background:var(--brand-50);color:var(--brand);display:grid;place-items:center}
.dept-ico svg{width:17px;height:17px}
.dept h3{font-size:14.5px;letter-spacing:-.02em;margin-top:13px}
.dept p{font-size:12.5px;color:var(--muted);line-height:1.62;margin-top:6px;flex:1}
.dept-mail{
  display:inline-block;font-size:11.5px;font-weight:650;color:var(--brand-600);margin-top:13px;
  word-break:break-word;text-decoration:none
}
.dept-mail:hover{text-decoration:underline}
.dept-sla{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted-2);margin-top:7px}
.dept-sla svg{width:12px;height:12px;flex:none}
.dept-btn{
  margin-top:14px;height:34px;border-radius:9px;border:1px solid var(--line-2);background:#fff;
  font:inherit;font-size:12px;font-weight:650;color:var(--ink-2);cursor:pointer;transition:.15s;
  display:flex;align-items:center;justify-content:center;gap:6px
}
.dept-btn:hover{background:var(--brand-50);border-color:var(--brand);color:var(--brand-700)}
.dept-btn svg{width:13px;height:13px}

/* --- quote band --- */
.ct-quote{
  background:linear-gradient(150deg,#0B1020,#241B22 58%,#3B1F13);
  border-radius:22px;padding:26px 28px;color:#fff;
  box-shadow:0 40px 80px -50px rgba(11,16,32,.95);
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:30px;align-items:center
}
.ct-quote h3{font-size:21px;letter-spacing:-.032em;line-height:1.2}
.ct-quote h3 span{color:#FFB08A}
.ct-quote p{font-size:12.8px;color:rgba(255,255,255,.58);margin-top:8px;max-width:38ch;line-height:1.62}
.qd-fields{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.qd-fields .lbl{color:rgba(255,255,255,.5);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.qd-fields select.input{
  background-color:rgba(255,255,255,.07);border-color:rgba(255,255,255,.15);color:#fff;height:42px;font-size:13px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
}
.qd-fields select.input option{background:#151B2E;color:#fff}
.qd-result{
  margin-top:14px;padding:13px 16px;border-radius:14px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.11);display:flex;align-items:center;gap:16px;flex-wrap:wrap
}
.qd-price{font-size:23px;font-weight:750;letter-spacing:-.032em;font-variant-numeric:tabular-nums}
.qd-price small{font-size:11px;font-weight:650;color:rgba(255,255,255,.5);letter-spacing:.04em;margin-inline-end:5px}
.qd-meta{font-size:11.5px;color:rgba(255,255,255,.55);line-height:1.4}
.qd-meta b{color:rgba(255,255,255,.85);font-weight:650}
.qd-add{
  margin-inline-start:auto;height:34px;padding:0 13px;border-radius:9px;border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:11.5px;font-weight:650;cursor:pointer;
  display:flex;align-items:center;gap:6px;transition:.15s
}
.qd-add:hover{background:var(--brand);border-color:var(--brand)}
.qd-add svg{width:13px;height:13px}

/* --- form + sidebar --- */
.ct-main{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:20px;align-items:start}
.ct-form{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden}
.ct-form-head{padding:22px 24px 18px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#fff,#FCFCFE)}
.ct-form-head h2{font-size:19px;letter-spacing:-.025em}
.ct-form-head p{font-size:12.5px;color:var(--muted);margin-top:5px}
.ct-form-body{padding:20px 24px 24px}

.ct-roles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.ct-role{
  display:flex;flex-direction:column;align-items:center;gap:6px;padding:11px 6px;border:1px solid var(--line-2);
  border-radius:12px;background:#fff;cursor:pointer;font:inherit;font-size:11.5px;font-weight:600;
  color:var(--ink-2);transition:.15s
}
.ct-role svg{width:18px;height:18px;color:var(--muted-2);transition:.15s}
.ct-role:hover{border-color:var(--brand-100);background:#FFFAF7}
.ct-role.on{border-color:var(--brand);background:var(--brand-50);color:var(--brand-700);box-shadow:0 0 0 3px rgba(232,85,28,.1)}
.ct-role.on svg{color:var(--brand)}

.ct-counter{font-size:11px;color:var(--muted-2);font-variant-numeric:tabular-nums;transition:color .2s}
.ct-counter.warn{color:var(--amber)}
.ct-counter.over{color:#B42318}

.ct-success{display:none;padding:46px 30px 40px;text-align:center}
.ct-success .tick{
  width:58px;height:58px;border-radius:50%;background:var(--emerald-50);color:#067647;
  display:grid;place-items:center;margin:0 auto 16px
}
.ct-success .tick svg{width:27px;height:27px}
.ct-success h3{font-size:22px;letter-spacing:-.025em}
.ct-success p{font-size:13.5px;color:var(--muted);margin-top:9px;max-width:44ch;margin-inline:auto;line-height:1.68}
.ct-ref{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:8px 14px;border-radius:10px;
  background:var(--bg-soft);border:1px dashed var(--line-2);font-family:ui-monospace,Menlo,monospace;
  font-size:12px;font-weight:600;color:var(--ink-2)
}
.ct-success .again{margin-top:20px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

.ct-side{display:flex;flex-direction:column;gap:14px;position:sticky;top:88px}
.ct-panel{background:#fff;border:1px solid var(--line);border-radius:18px;padding:19px}
.ct-panel h4{font-size:13.5px;letter-spacing:-.015em;display:flex;align-items:center;gap:7px}
.ct-panel h4 svg{width:15px;height:15px;color:var(--brand)}
.hours{margin-top:12px;display:flex;flex-direction:column;gap:2px;font-size:12.5px}
.hr{display:flex;justify-content:space-between;gap:10px;padding:6px 9px;border-radius:8px;color:var(--muted)}
.hr b{font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.hr.today{background:var(--brand-50);color:var(--brand-700);font-weight:650}
.hr.today b{color:var(--brand-700)}
.hr.off b,.hr.off{color:var(--muted-2)}
.ct-addr{font-size:12.5px;color:var(--muted);line-height:1.65;margin-top:10px}
.ct-addr b{display:block;color:var(--ink);font-weight:650;font-size:13px;margin-bottom:2px}
.ct-list{display:flex;flex-direction:column;gap:9px;margin-top:12px}
.ct-list div{display:flex;gap:9px;font-size:12.5px;color:var(--muted);line-height:1.5}
.ct-list svg{width:14px;height:14px;color:var(--emerald);flex:none;margin-top:2px}

/* --- faq --- */
.ct-faq{display:flex;flex-direction:column;gap:9px;max-width:840px}
.ct-faq details{background:#fff;border:1px solid var(--line);border-radius:13px;overflow:hidden;transition:border-color .15s}
.ct-faq details[open]{border-color:var(--line-2)}
.ct-faq summary{
  padding:15px 18px;font-size:13.5px;font-weight:600;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:14px;align-items:center
}
.ct-faq summary::-webkit-details-marker{display:none}
.ct-faq summary::after{content:"+";font-size:19px;color:var(--muted-2);font-weight:400;line-height:1;flex:none}
.ct-faq details[open] summary::after{content:"\2013"}
.ct-faq .a{padding:0 18px 16px;font-size:13px;color:var(--muted);line-height:1.68;max-width:70ch}

/* --- floating whatsapp --- */
.ct-fab{
  position:fixed;bottom:22px;inset-inline-end:22px;z-index:70;display:inline-flex;align-items:center;gap:9px;
  height:48px;padding:0 19px;border-radius:999px;background:#25D366;color:#fff;font-weight:650;font-size:13.5px;
  box-shadow:0 18px 36px -14px rgba(37,211,102,.8);border:0;cursor:pointer;text-decoration:none;
  transition:transform .16s
}
.ct-fab:hover{transform:translateY(-2px)}
.ct-fab svg{width:19px;height:19px}
@media(max-width:1024px){.ct-fab{bottom:18px;inset-inline-end:18px;height:44px;padding:0 16px;font-size:12.5px}}

@media(max-width:1024px){
  .ct-hero-grid{grid-template-columns:1fr;gap:30px}
  .ct-hero h1{max-width:24ch}
  .ct-depts{grid-template-columns:1fr 1fr}
  .ct-main{grid-template-columns:1fr}
  .ct-side{position:static}
  .ct-quote{grid-template-columns:1fr;gap:20px;padding:22px}
  .ct-form-body,.ct-form-head{padding-inline:18px}
}
@media(max-width:620px){
  .ct-hero{padding:32px 0 30px}
  .ct-depts{grid-template-columns:1fr}
  .ct-roles{grid-template-columns:1fr 1fr}
  .qd-fields{grid-template-columns:1fr}
  .ct-fab span{display:none}
  .ct-fab{width:46px;height:46px;padding:0;justify-content:center}
}

/* form feedback — these two rules were defined for the app but the contact page
   needs them globally; .field>span would otherwise win on specificity */
.field .field-error{display:none;order:9}
.field.invalid .field-error{display:block}
.form-msg{display:none;margin-top:14px;padding:11px 14px;border-radius:10px;font-size:12.5px;line-height:1.55}
.form-msg.ok{display:block;background:var(--emerald-50);color:#067647;border:1px solid #BBF0DA}
.form-msg.err{display:block;background:var(--rose-50);color:#B42318;border:1px solid #FCD9DF}
.ct-faq{max-width:none}

/* ---------------- audit trail ---------------- */
.audit-list{display:flex;flex-direction:column}
.audit-row{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.audit-row:last-child{border-bottom:0}
.audit-ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;background:var(--bg-soft);color:var(--ink-2)}
.audit-ico svg{width:14px;height:14px;stroke-width:2}
.audit-ico.topup{background:var(--emerald-50);color:#067647}
.audit-ico.suspend{background:var(--rose-50);color:#B42318}
.audit-ico.limits{background:var(--amber-50);color:#B54708}
.audit-ico.kyc{background:var(--brand-50);color:var(--brand-700)}
.audit-ico.invoice{background:var(--sky-50);color:#0369A1}
.audit-ico.request{background:var(--brand-50);color:var(--brand-700)}
.audit-t{font-size:12.5px;line-height:1.45;color:var(--ink-2)}
.audit-t b{font-weight:650;color:var(--ink)}
.audit-m{font-size:11px;color:var(--muted-2);margin-top:2px}

/* notification panel: mark-all + deep links */
.notif-mark{
  border:1px solid var(--line-2);background:#fff;border-radius:8px;height:26px;padding:0 9px;
  font:inherit;font-size:10.5px;font-weight:650;color:var(--muted);cursor:pointer;flex:none
}
.notif-mark:hover{border-color:var(--brand);color:var(--brand-700);background:var(--brand-50)}
.notif-item.linkable{cursor:pointer;transition:background .14s}
.notif-item.linkable:hover{background:var(--brand-50)}

/* ---------------- download page: platform matrix ---------------- */
.plat{max-width:1000px;margin:0 auto;padding:48px 24px 8px}
.plat-head{text-align:center;max-width:520px;margin:0 auto 26px}
.plat-head h2{font-size:clamp(24px,2.8vw,32px);letter-spacing:-.03em;margin-top:10px}
.plat-head p{font-size:14px;color:var(--muted);margin-top:8px;line-height:1.6}
.plat-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.plat-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;display:flex;flex-direction:column}
.pc-top{display:flex;align-items:flex-start;gap:12px}
.pc-ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none}
.pc-ico svg{width:20px;height:20px}
.pc-android{background:#E7F8F1;color:#067647}
.pc-ios{background:#E8F6FE;color:#0369A1}
.pc-top h3{font-size:15px;letter-spacing:-.02em}
.pc-top p{font-size:11.5px;color:var(--muted-2);margin-top:3px;line-height:1.45}
.pc-steps{margin:16px 0 18px;padding-inline-start:18px;display:flex;flex-direction:column;gap:8px}
.pc-steps li{font-size:12.5px;color:var(--muted);line-height:1.5}
.pc-steps b{color:var(--ink-2);font-weight:650}
.plat-card .btn{margin-top:auto;width:100%}
.btn-block{width:100%;justify-content:center}
.plat-note{
  font-size:12px;color:var(--muted);line-height:1.65;margin-top:16px;padding:13px 16px;
  background:#fff;border:1px solid var(--line);border-radius:12px
}
.plat-note b{color:var(--ink-2)}
@media(max-width:760px){
  .plat{padding:34px 18px 4px}
  .plat-grid{grid-template-columns:1fr}
}

/* ---------------- mobile site nav ---------------- */
.nav-burger{
  display:none;position:relative;width:40px;height:38px;border-radius:10px;
  border:1px solid var(--line-2);background:#fff;cursor:pointer;padding:0;flex:none
}
.nav-burger span{
  position:absolute;left:12px;right:12px;height:2px;border-radius:2px;
  background:var(--ink-2);transition:transform .2s,opacity .2s,top .2s
}
.nav-burger span:nth-child(1){top:13px}
.nav-burger span:nth-child(2){top:18px}
.nav-burger span:nth-child(3){top:23px}
.mm-open .nav-burger span:nth-child(1){top:18px;transform:rotate(45deg)}
.mm-open .nav-burger span:nth-child(2){opacity:0;transform:scaleX(.3)}
.mm-open .nav-burger span:nth-child(3){top:18px;transform:rotate(-45deg)}
.mobile-menu{display:none}
.mm-inner{display:flex;flex-direction:column;gap:2px}
.mm-link{padding:11px 12px;border-radius:10px;font-size:14px;font-weight:600;color:var(--ink-2);text-decoration:none}
.mm-link:hover{background:var(--bg-soft);color:var(--ink)}
.mm-link.on{background:var(--brand-50);color:var(--brand-700)}
.mm-cta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.mm-cta .btn{width:100%;justify-content:center}

@media(max-width:900px){
  .nav-burger{display:block}
  .mobile-menu{
    display:none;position:absolute;inset-inline:0;top:100%;background:#fff;
    border-bottom:1px solid var(--line);box-shadow:0 26px 48px -32px rgba(11,16,32,.55);
    padding:10px 14px 16px;max-height:calc(100vh - var(--nav-h));overflow-y:auto
  }
  .site-nav.mm-open .mobile-menu{display:block}
}
@media(max-width:620px){
  .nav-right{display:none}
  .site-nav .wrap{gap:10px}
}

/* download page header also gets the mobile menu */
@media(max-width:720px){
  .dl-nav .row{display:none}
  .dl-nav .nav-burger{display:block;margin-inline-start:auto}
  .dl-nav{height:60px;padding:0 14px;position:relative}
  .dl-nav .brand{font-size:14px;min-width:0}
  .dl-nav .brand small{display:none}
  .dl-nav .brand>span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dl-nav .mobile-menu{display:none;position:absolute;inset-inline:0;top:100%;background:#fff;
    border-bottom:1px solid var(--line);box-shadow:0 26px 48px -32px rgba(11,16,32,.55);padding:10px 14px 16px;z-index:90}
  .dl-nav.mm-open .mobile-menu{display:block}
}

/* ==========================================================================
   v3 modules — messaging, alerts, payments, plans, companies
   ========================================================================== */
.page-h1{font-size:23px;letter-spacing:-.032em;line-height:1.15}
.page-sub{font-size:13px;color:var(--muted);margin-top:5px;max-width:74ch;line-height:1.55}

.kpi-mini{display:flex;flex-direction:column;gap:0}
.kmi-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.kmi-ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none}
.kmi-ico svg{width:16px;height:16px}
.kmi-note{font-size:11px;color:var(--muted-2);margin-top:4px}
.seg-n{font-size:9.5px;font-weight:700;background:rgba(11,16,32,.08);border-radius:999px;padding:1px 6px;margin-inline-start:5px}
.seg button.active .seg-n{background:rgba(232,85,28,.16);color:var(--brand-700)}

/* ---------- messaging ---------- */
.msg-wrap{display:grid;grid-template-columns:308px minmax(0,1fr);gap:16px;align-items:stretch;min-height:520px}
.msg-side{display:flex;flex-direction:column;overflow:hidden;padding:0}
.msg-search{position:relative;padding:12px}
.msg-search .lead{position:absolute;inset-inline-start:24px;top:24px;color:var(--muted-2);pointer-events:none}
.msg-search .lead svg{width:15px;height:15px}
.msg-search .input{padding-inline-start:34px;height:40px;font-size:13px}
.msg-list{flex:1;overflow-y:auto;max-height:560px}
.th-row{
  display:flex;gap:10px;width:100%;padding:12px;border:0;border-top:1px solid var(--line);
  background:none;cursor:pointer;text-align:start;font-family:inherit;transition:background .13s;align-items:flex-start
}
.th-row:hover{background:#FAFBFF}
.th-row.on{background:var(--brand-50)}
.th-row.on .th-subj{color:var(--brand-700)}
.th-mid{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.th-name{font-size:12.5px;font-weight:650;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.th-subj{font-size:11.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.th-last{font-size:11px;color:var(--muted-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.th-side{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:none}
.th-time{font-size:9.5px;color:var(--muted-2);white-space:nowrap}
.th-dot{width:7px;height:7px;border-radius:50%;background:var(--brand);display:block}
.th-row.unread .th-name{font-weight:750}

.msg-main{display:flex;flex-direction:column;overflow:hidden;padding:0;min-height:520px}
.msg-head{display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid var(--line);background:#FCFCFE}
.msg-thread{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:9px;background:linear-gradient(180deg,#FBFBFE,#fff)}
.bubble{max-width:76%;align-self:flex-start;background:#F1F3F9;border-radius:14px 14px 14px 4px;padding:9px 13px}
.bubble.mine{align-self:flex-end;background:var(--brand);color:#fff;border-radius:14px 14px 4px 14px}
.b-txt{font-size:13px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.b-time{font-size:9.5px;opacity:.6;margin-top:4px}
.msg-compose{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:#fff}
.msg-compose .input{flex:1}

/* ---------- alerts ---------- */
.alert-list{display:flex;flex-direction:column}
.alert-row{display:flex;gap:12px;align-items:flex-start;padding:14px 18px;border-bottom:1px solid var(--line)}
.alert-row:last-child{border-bottom:0}
.alert-row.unread{background:#FFFBF9}
.alert-row[data-act]{cursor:pointer}
.alert-row[data-act]:hover{background:var(--brand-50)}
.alert-ico{width:30px;height:30px;border-radius:9px;background:var(--bg-soft);color:var(--ink-2);display:grid;place-items:center;flex:none}
.alert-ico svg{width:14px;height:14px}

/* ---------- payments ---------- */
.pay-form .input{height:42px}
.pay-row{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:12px;margin-bottom:8px}
.pay-amt{font-size:15px;font-weight:750;letter-spacing:-.02em;white-space:nowrap}
.pay-note{font-size:11.5px;color:var(--muted);margin-top:3px;font-style:italic}

/* ---------- companies ---------- */
.co-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.co-card{display:flex;flex-direction:column}
.co-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.co-stats div{display:flex;flex-direction:column;gap:2px}
.co-stats b{font-size:13px;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.co-stats span{font-size:10px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.05em}
.co-warn{margin-top:10px;font-size:11px;color:#B54708;background:var(--amber-50);border:1px solid #FDE3B5;border-radius:8px;padding:6px 9px}

/* ---------- plans ---------- */
.plans-wrap{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:760px}
.plan-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;display:flex;flex-direction:column}
.plan-card.pro{border-color:var(--brand);box-shadow:0 24px 50px -34px rgba(232,85,28,.6)}
.plan-flag{position:absolute;top:-10px;inset-inline-end:18px;background:var(--brand);color:#fff;font-size:9.5px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:999px}
.plan-name{font-size:12px;font-weight:750;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.plan-price{font-size:30px;font-weight:800;letter-spacing:-.04em;margin-top:8px;display:flex;align-items:baseline;gap:7px}
.plan-price small{font-size:11.5px;font-weight:600;color:var(--muted);letter-spacing:0}
.plan-tag{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.55}
.plan-list{list-style:none;margin:18px 0;padding:0;display:flex;flex-direction:column;gap:8px;flex:1}
.plan-list li{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;color:var(--muted);padding-bottom:8px;border-bottom:1px dashed var(--line)}
.plan-list b{color:var(--ink-2);font-weight:650;text-align:end}

.plan-choose{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.choose-card{display:flex;flex-direction:column;gap:3px;padding:14px;border:1px solid var(--line-2);border-radius:12px;background:#fff;cursor:pointer;text-align:start;font-family:inherit}
.choose-card b{font-size:13px}
.choose-card span{font-size:11.5px;color:var(--brand-600);font-weight:650}
.choose-card em{font-size:11px;color:var(--muted);font-style:normal;line-height:1.45}
.choose-card.on{border-color:var(--brand);background:var(--brand-50)}

@media(max-width:1000px){
  .msg-wrap{grid-template-columns:1fr}
  .msg-list{max-height:260px}
  .msg-main{min-height:420px}
  .plans-wrap{grid-template-columns:1fr}
  .co-stats{grid-template-columns:repeat(2,1fr);gap:12px}
}

/* toolbar search should breathe in the wider tables */
.toolbar .search{max-width:380px;flex:1 1 240px}

/* ==========================================================================
   Services page — interactive explorer + live configurator
   ========================================================================== */
.sv-hero{padding:44px 0 40px}
.sv-hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:40px;align-items:center}
.sv-hero h1{font-size:clamp(32px,4.2vw,54px);letter-spacing:-.04em;line-height:1.02;margin-top:12px;max-width:18ch}
.sv-hero h1 .hl{color:var(--brand)}
.sv-hero p.lede{font-size:15.5px;color:var(--muted);line-height:1.65;margin-top:16px;max-width:50ch}
.sv-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.sv-chips span{font-size:11.5px;font-weight:600;color:var(--ink-2);background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 11px}

.sv-metrics{background:linear-gradient(160deg,#0B1020,#1D2542 70%,#33201A);border-radius:22px;padding:22px;color:#fff;
  box-shadow:0 34px 70px -44px rgba(11,16,32,.9)}
.sv-metrics h4{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45);font-weight:750}
.sv-mgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.09);border-radius:12px;overflow:hidden;margin-top:12px}
.sv-mgrid div{background:#151C33;padding:15px 14px}
.sv-mgrid b{display:block;font-size:23px;font-weight:750;letter-spacing:-.035em}
.sv-mgrid span{font-size:10.5px;color:rgba(255,255,255,.5);margin-top:3px;display:block}
.sv-live{display:flex;align-items:center;gap:7px;margin-top:14px;font-size:11px;color:rgba(255,255,255,.6)}
.sv-live i{width:6px;height:6px;border-radius:50%;background:#6EE7B7;animation:blink 2s infinite}

/* explorer */
.sv-explorer{display:grid;grid-template-columns:330px minmax(0,1fr);gap:16px;align-items:start}
.sv-tabs{display:flex;flex-direction:column;gap:6px}
.sv-tab{display:flex;align-items:flex-start;gap:11px;padding:13px 14px;border:1px solid var(--line);border-radius:13px;
  background:#fff;cursor:pointer;text-align:start;font-family:inherit;transition:.16s;width:100%}
.sv-tab:hover{border-color:var(--brand-100);transform:translateX(2px)}
.sv-tab.on{border-color:var(--brand);background:var(--brand-50);box-shadow:0 0 0 3px rgba(232,85,28,.08)}
.sv-tab .ti{width:32px;height:32px;border-radius:9px;background:var(--bg-soft);color:var(--ink-2);display:grid;place-items:center;flex:none}
.sv-tab.on .ti{background:var(--brand);color:#fff}
.sv-tab .ti svg{width:16px;height:16px}
.sv-tab b{font-size:13px;display:block;letter-spacing:-.01em}
.sv-tab em{font-size:11px;color:var(--muted);font-style:normal;display:block;margin-top:2px}

.sv-panel{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;min-height:420px}
.sv-panel-head{padding:24px 26px 20px;border-bottom:1px solid var(--line);
  background:radial-gradient(420px 160px at 90% -40%,rgba(232,85,28,.12),transparent 70%),#fff}
.sv-panel-head h2{font-size:24px;letter-spacing:-.03em}
.sv-panel-head p{font-size:13.5px;color:var(--muted);margin-top:8px;line-height:1.65;max-width:60ch}
.sv-panel-body{padding:22px 26px 26px}
.sv-inc{display:grid;grid-template-columns:1fr 1fr;gap:9px 18px}
.sv-inc div{display:flex;gap:9px;font-size:12.5px;color:var(--muted);line-height:1.5}
.sv-inc svg{width:14px;height:14px;color:var(--emerald);flex:none;margin-top:2px}
.sv-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.sv-facts div span{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted-2);font-weight:700;display:block}
.sv-facts div b{font-size:13.5px;display:block;margin-top:4px;letter-spacing:-.01em}

/* configurator */
.sv-quote{background:linear-gradient(150deg,#0B1020,#241B22 58%,#3B1F13);border-radius:24px;padding:28px;color:#fff;
  box-shadow:0 40px 80px -52px rgba(11,16,32,.95)}
.sv-quote-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:30px;align-items:center}
.sv-quote h2{font-size:26px;letter-spacing:-.035em;line-height:1.15}
.sv-quote h2 span{color:#FFB08A}
.sv-quote p{font-size:12.8px;color:rgba(255,255,255,.58);margin-top:9px;line-height:1.6;max-width:36ch}
.qf{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.qf .lbl{color:rgba(255,255,255,.5);font-size:10px;letter-spacing:.07em;text-transform:uppercase;font-weight:700}
.qf select,.qf input{width:100%;height:42px;padding:0 12px;border-radius:10px;border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.07);color:#fff;font:inherit;font-size:13px;appearance:none}
.qf select{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;padding-inline-end:34px}
.qf option{background:#151B2E;color:#fff}
.qf input::placeholder{color:rgba(255,255,255,.35)}
.sv-result{margin-top:14px;padding:16px 18px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.sv-res-top{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.sv-price{font-size:30px;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.sv-price small{font-size:11px;font-weight:700;color:rgba(255,255,255,.5);letter-spacing:.05em;margin-inline-end:6px}
.sv-eta{font-size:12px;color:rgba(255,255,255,.6)}
.sv-breakdown{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1)}
.sv-breakdown div{font-size:11px;color:rgba(255,255,255,.5)}
.sv-breakdown b{display:block;color:#fff;font-size:12.5px;font-weight:650;margin-top:2px}
.sv-actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.sv-actions .btn{flex:1;justify-content:center;min-width:140px}

/* comparison */
.sv-cmp{width:100%;border-collapse:collapse;font-size:12.5px;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.sv-cmp th,.sv-cmp td{padding:13px 16px;border-bottom:1px solid var(--line);text-align:start;vertical-align:top}
.sv-cmp thead th{background:#FCFCFE;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-2);font-weight:750}
.sv-cmp tbody tr:last-child td{border-bottom:0}
.sv-cmp tbody tr:hover td{background:#FFFAF7}
.sv-cmp td:first-child{font-weight:650;color:var(--ink)}
.sv-cmp .y{color:#067647;font-weight:700}

/* steps */
.sv-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;counter-reset:s}
.sv-step{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;cursor:pointer;transition:.16s;position:relative}
.sv-step:hover{border-color:var(--brand-100)}
.sv-step.on{border-color:var(--brand);box-shadow:0 0 0 3px rgba(232,85,28,.08)}
.sv-step i{width:24px;height:24px;border-radius:8px;background:var(--brand-50);color:var(--brand-700);display:grid;place-items:center;
  font-size:11px;font-weight:800;font-style:normal;margin-bottom:9px}
.sv-step.on i{background:var(--brand);color:#fff}
.sv-step b{font-size:12.5px;display:block;line-height:1.35}
.sv-step span{font-size:11px;color:var(--muted);display:block;margin-top:5px;line-height:1.45}
.sv-step-detail{margin-top:12px;padding:16px 18px;border-radius:14px;background:#fff;border:1px dashed var(--line-2);
  font-size:12.5px;color:var(--muted);line-height:1.65;min-height:60px}
.sv-step-detail b{color:var(--ink)}

@media(max-width:1024px){
  .sv-hero-grid{grid-template-columns:1fr;gap:26px}
  .sv-explorer{grid-template-columns:1fr}
  .sv-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .sv-quote-grid{grid-template-columns:1fr}
  .sv-steps{grid-template-columns:1fr 1fr}
  .sv-inc{grid-template-columns:1fr}
}
@media(max-width:620px){
  .sv-tabs{grid-template-columns:1fr}
  .sv-facts{grid-template-columns:1fr 1fr}
  .sv-steps{grid-template-columns:1fr}
  .qf{grid-template-columns:1fr}
  .sv-cmp{font-size:11.5px}
  .sv-cmp th,.sv-cmp td{padding:10px}
}

/* ---------------- download: two-option picker ---------------- */
.dl-pick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}
.pick{
  display:flex;align-items:center;gap:12px;padding:14px 15px;border-radius:15px;border:1px solid var(--line-2);
  background:#fff;cursor:pointer;font-family:inherit;text-align:start;transition:.16s;text-decoration:none;color:inherit
}
.pick:hover{border-color:var(--brand);box-shadow:0 12px 26px -18px rgba(232,85,28,.7);transform:translateY(-2px)}
.pick-android{border-color:var(--brand);background:linear-gradient(150deg,#FFF6F1,#fff)}
.pick-os{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:none;background:var(--bg-soft);color:var(--ink-2)}
.pick-android .pick-os{background:var(--brand);color:#fff}
.pick-os svg{width:18px;height:18px}
.pick-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.pick-txt b{font-size:13.5px;letter-spacing:-.015em}
.pick-txt em{font-size:11px;color:var(--muted);font-style:normal}
.pick-go{color:var(--muted-2);flex:none}
.pick-go svg{width:16px;height:16px}
.pick:hover .pick-go{color:var(--brand)}
.pick-install{grid-column:1/-1}
.pick-install .pick-os{background:var(--bg-soft)}
.pick.is-active{outline:2px solid var(--brand);outline-offset:2px}
@media(max-width:760px){
  .dl-pick{grid-template-columns:1fr}
  .pick-install{grid-column:auto}
}

/* ---------------- download: connect this phone ---------------- */
.ct-connect{max-width:1000px;margin:0 auto;padding:8px 24px 8px}
.connect-card{
  display:flex;align-items:center;gap:18px;justify-content:space-between;flex-wrap:wrap;
  background:linear-gradient(150deg,#0B1020,#221A2E 65%,#3A1F14);border-radius:20px;padding:22px 24px;color:#fff
}
.cc-left{display:flex;align-items:center;gap:14px}
.cc-ico{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.1);display:grid;place-items:center;flex:none;color:#FFB08A}
.cc-ico svg{width:20px;height:20px}
.cc-left h3{font-size:16px;letter-spacing:-.02em}
.cc-left p{font-size:12.5px;color:rgba(255,255,255,.6);margin-top:4px;line-height:1.55;max-width:56ch}
.cc-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.cc-right .tiny{color:rgba(255,255,255,.55)}
@media(max-width:760px){
  .ct-connect{padding-inline:18px}
  .cc-right{align-items:stretch;width:100%}
  .cc-right .btn{width:100%}
}

/* ==========================================================================
   v5 — company workspaces, seats and the bid composer
   ========================================================================== */

/* ---------------- context banner (workspace scope / support view) ------- */
#ctxBanner{max-width:1360px;margin:0 auto}
#ctxBanner:empty{display:none}
.ctx-banner{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  border-radius:12px;padding:11px 14px;margin-bottom:16px;font-size:12.5px;line-height:1.5
}
.ctx-banner svg{width:16px;height:16px;flex:none}
.ctx-banner>div{flex:1;min-width:220px}
.ctx-banner.workspace{background:var(--brand-50);border:1px solid var(--brand-100);color:var(--brand-700)}
.ctx-banner.workspace svg{color:var(--brand)}
.ctx-banner.impersonate{background:#1B1440;border:1px solid #3B2E7A;color:#EDE9FE}
.ctx-banner.impersonate svg{color:#C4B5FD}
.ctx-banner.impersonate b{color:#fff}
.ctx-banner .btn{flex:none}

/* ---------------- workspace hero + seat meter ---------------- */
.ws-hero{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.ws-hero>.row{flex:1;min-width:220px}
.ws-seat{flex:1.1;min-width:220px;max-width:360px}
.ws-seat .between{margin-bottom:7px}
.ws-seat .progress{height:8px}
.ws-hero>.row.gap-8:last-child{flex:none}

.ws-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.ws-card{
  text-align:start;background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:16px;display:flex;flex-direction:column;gap:14px;cursor:pointer;transition:.16s;
  font:inherit;color:inherit
}
.ws-card:hover{border-color:var(--brand-100);box-shadow:0 10px 26px -18px rgba(11,16,32,.35);transform:translateY(-1px)}
.ws-card-foot{display:flex;align-items:center;justify-content:space-between;font-size:11.5px;color:var(--muted)}
.ws-card-foot svg{width:15px;height:15px}

/* ---------------- seats ---------------- */
.seat-card{border:1px solid var(--line);border-radius:12px;padding:13px 14px;background:#fff}
.seat-card b{font-size:12.5px}
.seat-card p{margin-top:7px;line-height:1.55}
.seat-perms{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}

.ax-wrap{display:flex;flex-wrap:wrap;gap:4px;max-width:290px}
.ax-chip{
  font-size:10px;font-weight:700;letter-spacing:.02em;border-radius:99px;padding:3px 8px;
  background:var(--bg-soft);color:var(--muted);white-space:nowrap
}
.ax-chip.on{background:var(--emerald-50);color:#067647}
.ax-chip.read{background:var(--sky-50);color:#026AA2}
.ax-chip.off{background:#F3F4F6;color:#98A2B3;text-decoration:line-through;text-decoration-color:#CBD5E1}
.ax-dot{width:7px;height:7px;border-radius:50%;background:var(--brand);margin-top:5px;flex:none}
.row-off td{opacity:.62}
.seat-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.seat-opt{
  text-align:start;border:1px solid var(--line);border-radius:12px;padding:12px;background:#fff;
  cursor:pointer;font:inherit;color:inherit;transition:.15s
}
.seat-opt:hover{border-color:var(--brand-100);background:var(--brand-50)}
.seat-opt.on{border-color:var(--brand);box-shadow:0 0 0 3px rgba(232,85,28,.12)}
.seat-opt b{font-size:12.5px}
.seat-opt p{margin-top:6px;line-height:1.5}
.seat-preview{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}

.link-btn{background:none;border:0;padding:0;font:inherit;color:var(--brand-600);cursor:pointer;text-align:start}
.link-btn:hover{text-decoration:underline}

/* ---------------- companies seat strip ---------------- */
.co-seats{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.co-seats .between{margin-bottom:2px}
.co-seats .av-stack{margin-top:6px}

/* ---------------- bid composer ---------------- */
.bx-budget{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  background:var(--bg-soft);border-radius:12px;padding:12px 14px;margin-bottom:14px
}
.bx-budget>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.bx-budget b{font-size:13.5px}
.bx-note{
  display:flex;align-items:flex-start;gap:8px;font-size:11.5px;line-height:1.5;
  background:var(--sky-50);color:#026AA2;border-radius:10px;padding:9px 11px;margin-bottom:14px
}
.bx-note svg{width:14px;height:14px;flex:none;margin-top:1px}
.bx-price-field .bx-input{display:flex;align-items:center;gap:0;position:relative}
.bx-input{display:flex;align-items:center;gap:0;position:relative}
.bx-input .input{padding-inline-start:46px}
.bx-input:has(.bx-unit) .input{padding-inline-end:58px}
.bx-cur{
  position:absolute;inset-inline-start:12px;font-size:11px;font-weight:800;letter-spacing:.06em;
  color:var(--muted);pointer-events:none
}
.bx-unit{position:absolute;inset-inline-end:12px;font-size:11px;font-weight:700;color:var(--muted);pointer-events:none}
.bx-quick{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.bx-echo{
  margin-top:10px;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:#fff;
  transition:border-color .15s,background .15s
}
.bx-echo.bad{border-color:#FECDD3;background:#FFF5F6}
.bx-echo.bad{color:#B42318;font-size:12.5px}
.bx-echo-main{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.bx-echo-main b{font-size:22px;letter-spacing:-.03em}
.bx-per{font-size:11.5px;color:var(--muted);font-weight:600}
.bx-delta{font-size:11.5px;margin-top:5px;font-weight:600}
.bx-delta.down{color:#067647}
.bx-delta.up{color:#B54708}
.bx-hint{margin-top:10px;line-height:1.5}
input.input.bad,textarea.input.bad{border-color:#FDA4AF;background:#FFF5F6}

.bid.best{border-color:#A7F3D0;background:linear-gradient(180deg,#F0FDF9,#fff)}
.bid .b-counter{
  display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--brand-700);
  margin-top:6px
}
.bid .b-counter svg{width:13px;height:13px}
.load-card.bid-on{border-color:#A7F3D0}

@media(max-width:760px){
  .bx-budget{grid-template-columns:1fr 1fr}
  .seat-opts{grid-template-columns:1fr}
  .ws-hero{gap:14px}
  .ws-hero>.row.gap-8:last-child .btn{flex:1}
  .ax-wrap{max-width:none}
}

/* keep the 6-column parcel table readable inside half-width cards */
.two-col .tbl th:nth-child(6),.two-col .tbl td:nth-child(6){display:none}

/* mobile: the workspace hero must stack, not fight for width */
@media(max-width:760px){
  .ws-hero{flex-direction:column;align-items:stretch;gap:16px}
  .ws-hero>.row,.ws-seat{max-width:none;width:100%}
  .ws-hero>.row.gap-8:last-child{width:100%}
  .ws-hero>.row.gap-8:last-child .btn{flex:1;justify-content:center}
}

@media(max-width:380px){.g4{grid-template-columns:1fr}}

/* phones: keep the modal header and action bar pinned, scroll only the body */
@media(max-width:760px){
  .modal{display:flex;flex-direction:column;overflow:hidden;max-height:92vh}
  .modal>form{display:flex;flex-direction:column;min-height:0;flex:1}
  .modal-head{flex:none}
  .modal-body{flex:1;overflow-y:auto;min-height:0}
  .modal-foot{flex:none}
}

/* ---------------- boot / database state ---------------- */
.boot-loading{display:flex;align-items:center;justify-content:center;gap:9px;padding:90px 0;color:var(--muted);font-size:12.5px}
.bl-dot{width:7px;height:7px;border-radius:50%;background:var(--brand);animation:blp 1s infinite ease-in-out}
.bl-dot:nth-child(2){animation-delay:.15s}
.bl-dot:nth-child(3){animation-delay:.3s}
.bl-tx{margin-inline-start:8px}
@keyframes blp{0%,80%,100%{opacity:.25;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}
.db-badge{display:inline-flex;align-items:center;height:26px;padding:0 9px;border-radius:99px;background:var(--emerald-50);color:#067647;
  font-size:9.5px;font-weight:800;letter-spacing:.06em;white-space:nowrap}
.db-badge.off{background:var(--amber-50);color:#B54708}
@media(max-width:760px){.db-badge{display:none}}

/* ==========================================================================
   v6 — live presence, server connection and the system panel
   ========================================================================== */

/* ---------------- live pill ---------------- */
.live-pill{
  display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px 0 8px;border-radius:99px;
  background:#ECFDF3;color:#067647;font-size:9.5px;font-weight:800;letter-spacing:.06em;white-space:nowrap
}
.live-pill i{
  width:6px;height:6px;border-radius:50%;background:#12B76A;box-shadow:0 0 0 0 rgba(18,183,106,.55);
  animation:lpulse 2.2s infinite
}
.live-pill b{font:inherit;letter-spacing:inherit}
.live-pill.off{background:#FFF7E6;color:#B54708}
.live-pill.off i{background:#F79009;animation:none;box-shadow:none}
@keyframes lpulse{
  0%{box-shadow:0 0 0 0 rgba(18,183,106,.5)}
  70%{box-shadow:0 0 0 6px rgba(18,183,106,0)}
  100%{box-shadow:0 0 0 0 rgba(18,183,106,0)}
}

/* ---------------- offline banner ---------------- */
#netBanner{max-width:1360px;margin:0 auto}
#netBanner:empty{display:none}
.net-banner{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;padding:11px 14px;
  border-radius:12px;background:#FFFBEB;border:1px solid #FDE68A;color:#92400E;font-size:12.5px;line-height:1.5
}
.net-banner .nb-ic{display:grid;place-items:center;width:22px;height:22px;flex:none;color:#B54708}
.net-banner .nb-ic svg{width:18px;height:18px}
.net-banner>div{flex:1;min-width:240px;display:flex;flex-direction:column;gap:2px}
.net-banner b{color:#78350F;font-size:12.5px}
.net-banner .nb-sub{color:#92400E;opacity:.9;font-size:11.5px}
.net-banner .btn{flex:none}
.net-banner .nb-close{color:#B45309;width:26px;height:26px}

/* ---------------- connect sheet ---------------- */
.conn-now{
  display:flex;flex-direction:column;gap:6px;align-items:flex-start;
  background:var(--bg-soft);border-radius:12px;padding:12px 14px
}
.conn-now .mono{word-break:break-all}
.conn-state{margin-top:12px;font-size:12px;line-height:1.55;border-radius:10px;padding:0;min-height:0}
.conn-state.ok,.conn-state.bad,.conn-state.wait{padding:9px 12px;margin-top:12px}
.conn-state.ok{background:var(--emerald-50);color:#067647}
.conn-state.bad{background:#FFF5F6;color:#B42318}
.conn-state.wait{background:var(--sky-50);color:#026AA2}
.conn-state code{font-size:11px}

/* ---------------- admin system panel ---------------- */
.sys-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.sys-cell{border:1px solid var(--line);border-radius:10px;padding:9px 10px;background:#fff}
.sys-cell b{display:block;font-size:15px;letter-spacing:-.02em}
.sys-cell span{display:block;font-size:10px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sys-meta{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:14px;font-size:11.5px;color:var(--muted)}
.sys-meta b{color:var(--ink);font-weight:700}
.skeleton-line{height:12px;border-radius:6px;background:linear-gradient(90deg,#F2F4F7,#E9EDF3,#F2F4F7);background-size:200% 100%;animation:shimmer 1.3s infinite;margin-bottom:9px}
.skeleton-line.short{width:55%}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

@media(max-width:760px){
  .live-pill{display:none}
  .sys-grid{grid-template-columns:repeat(3,1fr)}
  .net-banner{gap:9px}
  .net-banner>div{min-width:100%}
}

/* author display rules beat the UA [hidden] rule — restore it for the pills */
.live-pill[hidden],.db-badge[hidden]{display:none}

/* connect-this-phone: the server step sits on its own row */
.cc-steps{
  flex:0 0 100%;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:4px;
  padding-top:16px;border-top:1px solid rgba(255,255,255,.12)
}
.cc-step{display:flex;gap:9px;align-items:flex-start;font-size:11.5px;line-height:1.5;color:rgba(255,255,255,.66)}
.cc-step b{
  flex:none;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.13);color:#fff;font-size:10.5px;margin-top:1px
}
.cc-step span b{display:inline;background:none;width:auto;height:auto;color:#fff;font-size:inherit;margin:0}
@media(max-width:760px){.cc-steps{grid-template-columns:1fr;gap:8px;padding-top:14px}}

/* ==========================================================================
   v7 — Gateway assistant (docked chat)
   ========================================================================== */
.as-wrap{position:fixed;inset:auto 0 0 auto;z-index:70;pointer-events:none}
.as-wrap>*{pointer-events:auto}

/* ---- launcher ---- */
.as-fab{
  position:fixed;inset-inline-end:22px;bottom:22px;display:inline-flex;align-items:center;gap:8px;
  height:46px;padding:0 17px 0 14px;border:0;border-radius:99px;cursor:pointer;
  background:linear-gradient(135deg,#E8551C,#B45309);color:#fff;font:inherit;font-size:13px;font-weight:700;
  box-shadow:0 12px 26px -10px rgba(232,85,28,.65),0 2px 6px rgba(11,16,32,.18);
  transition:transform .16s,box-shadow .16s,opacity .16s
}
.as-fab svg{width:18px;height:18px}
.as-fab:hover{transform:translateY(-2px);box-shadow:0 16px 30px -10px rgba(232,85,28,.7)}
.as-fab.hidden{opacity:0;transform:translateY(8px) scale(.9);pointer-events:none}

/* ---- panel ---- */
.as-panel{
  position:fixed;inset-inline-end:22px;bottom:80px;width:382px;max-width:calc(100vw - 32px);
  height:min(600px,calc(100vh - 120px));display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:0 28px 60px -24px rgba(11,16,32,.45),0 2px 8px rgba(11,16,32,.08);
  opacity:0;transform:translateY(14px) scale(.98);pointer-events:none;
  transition:opacity .18s ease,transform .18s cubic-bezier(.2,.8,.3,1)
}
.as-panel.open{opacity:1;transform:none;pointer-events:auto}

.as-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 14px;
  background:linear-gradient(135deg,#0B1020,#1B1430);color:#fff;flex:none
}
.as-id{display:flex;align-items:center;gap:10px;min-width:0}
.as-logo{
  width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,#E8551C,#F59E0B);color:#fff
}
.as-logo svg{width:16px;height:16px}
.as-id b{display:block;font-size:13px;letter-spacing:-.01em}
.as-id small{display:block;font-size:10.5px;color:rgba(255,255,255,.55);margin-top:1px}
.as-head-right{display:flex;align-items:center;gap:6px;flex:none}
.as-state{
  font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:4px 8px;border-radius:99px;background:rgba(18,183,106,.18);color:#6EE7B7;white-space:nowrap
}
.as-state.off{background:rgba(247,144,9,.18);color:#FCD34D}
.as-state.typing{display:inline-flex;gap:3px;align-items:center;padding:6px 8px}
.as-state.typing i{width:4px;height:4px;border-radius:50%;background:#6EE7B7;animation:asdot 1s infinite}
.as-state.typing i:nth-child(2){animation-delay:.15s}
.as-state.typing i:nth-child(3){animation-delay:.3s}
@keyframes asdot{0%,80%,100%{opacity:.3}40%{opacity:1}}
.as-close{color:rgba(255,255,255,.6);width:28px;height:28px}
.as-close:hover{background:rgba(255,255,255,.12);color:#fff}

/* ---- transcript ---- */
.as-body{flex:1;min-height:0;overflow-y:auto;background:#F7F8FB;padding:14px 14px 6px;scroll-behavior:smooth}
.as-msg{display:flex;gap:8px;margin-bottom:12px;align-items:flex-start}
.as-msg.user{justify-content:flex-end}
.as-msg.user .as-bubble{
  background:linear-gradient(135deg,#E8551C,#C9450F);color:#fff;border-radius:14px 14px 4px 14px;
  max-width:82%;padding:9px 12px;font-size:12.5px;line-height:1.5;white-space:pre-wrap;word-break:break-word
}
.as-ava{
  width:24px;height:24px;border-radius:8px;flex:none;display:grid;place-items:center;
  background:#EEF0FF;color:#4F46E5;margin-top:2px
}
.as-ava svg{width:13px;height:13px}
.as-ava.big{width:38px;height:38px;border-radius:12px;background:#FFF3ED;color:#E8551C;margin:0 auto 10px}
.as-ava.big svg{width:19px;height:19px}
.as-stack{min-width:0;max-width:86%}
.as-bubble{
  background:#fff;border:1px solid var(--line);border-radius:14px 14px 14px 4px;
  padding:10px 12px;font-size:12.5px;line-height:1.55;word-break:break-word
}
.as-list{margin:7px 0 0;padding:0 0 0 15px;font-size:11.5px;line-height:1.6;color:var(--muted)}
.as-list li{margin-bottom:3px}
.as-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.as-follow{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.as-follow.center{justify-content:center;margin-top:14px}
.as-chip{font-size:11px;height:26px;padding:0 10px}
.as-src{margin-top:6px;font-size:9.5px;letter-spacing:.03em;text-transform:uppercase;color:#98A2B3;font-weight:700}
.as-empty{text-align:center;padding:16px 8px 26px}
.as-empty h4{font-size:14px;letter-spacing:-.01em}
.as-empty p{font-size:12px;line-height:1.6;color:var(--muted);margin-top:7px;max-width:30ch;margin-inline:auto}

.as-typing{display:none}
.as-typing[hidden]{display:none}

/* ---- composer ---- */
.as-foot{flex:none;border-top:1px solid var(--line);background:#fff;padding:9px 10px 8px}
.as-form{display:flex;align-items:flex-end;gap:7px}
.as-input{
  flex:1;min-width:0;border:1px solid var(--line);border-radius:12px;padding:9px 11px;
  font:inherit;font-size:12.5px;line-height:1.45;resize:none;max-height:96px;background:#FCFCFE;color:var(--ink)
}
.as-input:focus{outline:none;border-color:#F2B39A;background:#fff;box-shadow:0 0 0 3px rgba(232,85,28,.1)}
.as-send{
  width:36px;height:36px;flex:none;border:0;border-radius:11px;cursor:pointer;display:grid;place-items:center;
  background:linear-gradient(135deg,#E8551C,#C9450F);color:#fff
}
.as-send svg{width:16px;height:16px}
.as-send:disabled{opacity:.45;cursor:default}
.as-human{
  display:inline-flex;align-items:center;gap:5px;margin-top:7px;padding:2px 2px;border:0;background:none;
  font:inherit;font-size:11px;font-weight:600;color:var(--muted);cursor:pointer
}
.as-human svg{width:13px;height:13px}
.as-human:hover{color:var(--brand)}

@media(max-width:760px){
  .as-fab{inset-inline-end:14px;bottom:78px;height:44px;padding:0 14px 0 12px;font-size:12.5px}
  .as-panel{
    inset:0;width:100%;max-width:none;height:100%;border-radius:0;border:0;
    transform:translateY(100%);opacity:1
  }
  .as-panel.open{transform:none}
  .as-body{padding-bottom:12px}
}

/* bullets belong inside the bubble, not floating under it */
.as-bubble .as-list{margin:8px 0 0;padding-inline-start:16px}
.as-bubble .as-list li{font-size:11.5px;color:var(--muted);line-height:1.55}

/* some resets strip list markers; keep them for the assistant */
.as-bubble .as-list{list-style:disc outside}
.as-bubble .as-list li{display:list-item}

/* ==========================================================================
   v1.8 — real (geographic) route map
   ========================================================================== */
.geo-map{display:block;width:100%;height:100%}
.geo-pulse{transform-box:fill-box;transform-origin:center;animation:geo-pulse 2.8s ease-out infinite}
@keyframes geo-pulse{
  0%{transform:scale(.55);opacity:.4}
  70%{transform:scale(1.9);opacity:0}
  100%{transform:scale(1.9);opacity:0}
}

.tk-map{
  position:relative;margin-top:18px;height:380px;border:1px solid var(--line);border-radius:16px;
  overflow:hidden;background:#F7F9FC
}
.tk-map:empty{display:none}
.tk-map-tag{
  position:absolute;top:14px;inset-inline-start:14px;z-index:2;display:inline-flex;align-items:center;gap:6px;
  background:rgba(11,16,32,.82);color:#fff;font-size:9.5px;font-weight:800;letter-spacing:.09em;
  padding:5px 9px;border-radius:99px;backdrop-filter:blur(4px)
}
.tk-map-tag i{width:6px;height:6px;border-radius:50%;background:#12B76A;animation:lpulse 2.2s infinite}
.tk-map-age{
  position:absolute;top:14px;inset-inline-end:14px;z-index:2;background:rgba(255,255,255,.9);
  color:var(--muted);font-size:10.5px;font-weight:600;padding:4px 9px;border-radius:99px;border:1px solid var(--line)
}
@media(max-width:760px){.tk-map{height:260px}.tk-map-tag,.tk-map-age{top:10px}}
.tk-map-canvas{position:absolute;inset:0}