/* ===================================================================
   Mahtin UI v11 — lapisan desain dari 10 mockup
   Dimuat paling akhir supaya menimpa gaya lama.
   =================================================================== */
:root{
  --u-ink:#0F1F3A; --u-mut:#6B7A90; --u-line:#E8EEF8;
  --u-blue:#2E6BFF; --u-blue2:#5B8CFF; --u-grn:#19B26B; --u-amb:#F5A524;
  --u-pnk:#F2558E; --u-pur:#7B5CFF; --u-tea:#12B5C9; --u-dark:#111827;
  --u-r:24px; --u-sh:0 20px 44px -26px rgba(16,40,80,.38),0 2px 6px rgba(16,40,80,.05);
}
/* ---------- latar ---------- */
body.n{background:#F4F7FD!important;color:var(--u-ink)}
body.n::before{
  background:
    radial-gradient(620px 520px at -6% -10%,rgba(142,178,255,.55),transparent 70%),
    radial-gradient(640px 560px at 106% 108%,rgba(255,206,166,.5),transparent 70%),
    radial-gradient(520px 440px at 100% -8%,rgba(200,170,255,.42),transparent 70%),
    radial-gradient(460px 400px at -6% 104%,rgba(168,232,255,.45),transparent 70%),
    linear-gradient(180deg,#F6F9FE,#EEF3FB)!important;
}
/* ---------- kartu ---------- */
.n .n-card,.n .n-perks>div,.n .n-soc a,.n .n-steps>div,.n .n-lr,.n .n-opt,.n .n-cat-g,.n .n-pkc{
  background:#fff!important;border:1px solid rgba(255,255,255,.9)!important;
  border-radius:var(--u-r)!important;box-shadow:var(--u-sh)!important}
/* ---------- header ---------- */
.n .n-top{background:rgba(255,255,255,.82)!important;backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);
  border:0!important;box-shadow:0 10px 26px -20px rgba(16,40,80,.5)!important}
.n .n-tnav a{color:var(--u-mut)!important;font-weight:500;border-radius:999px}
.n .n-tnav a[aria-current="page"]{background:#EEF3FF!important;color:var(--u-blue)!important;font-weight:600}
.n .n-brand .wd b{color:var(--u-ink)!important}
/* ---------- tombol ---------- */
.n .n-btn{border-radius:999px!important;font-weight:600;background:var(--u-dark)!important;color:#fff!important;
  box-shadow:0 12px 24px -16px rgba(17,24,39,.9)!important;border:0!important}
.n .n-btn.white,.n .n-btn.sec,.n .n-btn.gh,.n .n-btn.ghost,.n .n-btn.n-soft{background:#fff!important;color:var(--u-ink)!important;
  box-shadow:0 8px 20px -14px rgba(16,40,80,.5)!important}
.n .n-top .n-btn{background:var(--u-dark)!important;color:#fff!important}
.n .n-acc{background:#fff!important;color:var(--u-ink)!important;box-shadow:0 8px 20px -14px rgba(16,40,80,.5)}
/* ---------- chip ---------- */
.n .n-chip{border-radius:999px;font-weight:700;letter-spacing:.06em;font-size:11px;background:#EEF3FF;color:var(--u-blue)}
.n .n-chip.n-soft{background:#EEF3FF;color:var(--u-blue)}
.n .n-disc{background:#FFE8F1!important;color:var(--u-pnk)!important}
/* ---------- judul ---------- */
.n .n-h{letter-spacing:-.025em}
.n-hero h1{letter-spacing:-.035em!important}
/* ---------- bento hero ---------- */
.u-bento{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-content:center}
.u-bento .u-c{background:#fff;border-radius:22px;border:1px solid rgba(255,255,255,.9);box-shadow:var(--u-sh);padding:18px}
.u-bento .wide{grid-column:1/-1;display:flex;gap:18px;align-items:center}
.u-don{border-radius:50%;display:grid;place-items:center;flex:none}
.u-don>span{background:#fff;border-radius:50%;display:grid;place-items:center;text-align:center;line-height:1}
.u-don b{font-size:30px;font-weight:700;display:block}
.u-don small{font-size:8.5px;font-weight:700;letter-spacing:.14em;color:var(--u-mut);display:block;margin-top:3px}
.u-lbl{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--u-mut)}
.u-rows{display:grid;gap:7px;margin-top:9px}
.u-row{display:grid;grid-template-columns:72px 1fr 26px;gap:9px;align-items:center;font-size:11.5px;color:var(--u-mut)}
.u-row b{color:var(--u-ink);text-align:right;font-size:12px}
.u-bar{height:8px;border-radius:5px;background:#EDF1F8;overflow:hidden}
.u-bar i{display:block;height:100%;border-radius:5px}
.u-ic{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;color:#fff;font-size:15px;font-weight:700}
.u-num{font-size:26px;font-weight:700;letter-spacing:-.03em;line-height:1;margin-top:10px}
.u-mini{font-size:11.5px;color:var(--u-mut);line-height:1.45;margin-top:3px}
.u-toast{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;background:#fff;border-radius:16px;padding:12px 14px;
  box-shadow:var(--u-sh);border-left:4px solid var(--u-grn)}
.u-toast span.k{width:24px;height:24px;border-radius:8px;background:#E4F7ED;color:var(--u-grn);display:grid;place-items:center;font-size:13px;font-weight:700;flex:none}
@media (max-width:899px){.u-bento{grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
  .u-bento .wide{flex-direction:row;gap:14px;padding:14px}.u-don b{font-size:24px}
  .u-num{font-size:21px}.u-mini{font-size:10.5px}.u-ic{width:28px;height:28px;border-radius:10px;font-size:13px}}
/* ---------- kartu produk AI ---------- */
.n .n-aic{border-radius:22px!important;border:1px solid rgba(255,255,255,.9)!important;box-shadow:var(--u-sh)!important}
.n .n-aic .ft em{background:var(--u-dark)!important;color:#fff!important;box-shadow:0 10px 20px -12px rgba(17,24,39,.9)!important}
/* ---------- tile kategori ---------- */
.n .n-cat{border-radius:20px!important;box-shadow:var(--u-sh)!important;background:#fff!important}
.n .n-cat .go{background:var(--u-dark)!important;box-shadow:0 8px 16px -10px rgba(17,24,39,.9)!important}
/* ---------- pesanan (Akunku) ---------- */
.n .n-ord .it{border-radius:20px!important;background:#fff!important;box-shadow:var(--u-sh)!important}
.n .n-ord .it.pay{--ac:var(--u-amb)}.n .n-ord .it.form{--ac:var(--u-pnk)}
.n .n-ord .it.queue,.n .n-ord .it.work{--ac:var(--u-pur)}
.n .n-ord .it.done,.n .n-ord .it.ai{--ac:var(--u-grn)}
.n .n-ord .act a,.n .n-ord .act button{border-radius:999px;background:var(--u-blue)!important}
.n .n-ord .act .gh{background:#F2F5FA!important;color:var(--u-ink)!important}
/* kartu statistik akun */
.u-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px}
.u-stats .s{background:#fff;border-radius:20px;border:1px solid rgba(255,255,255,.9);box-shadow:var(--u-sh);padding:16px}
.u-stats .hd{display:flex;align-items:flex-start;justify-content:space-between}
@media (max-width:620px){.u-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* ---------- panel akun ---------- */
.n .n-akun{border-radius:26px!important}
/* ---------- bukti ---------- */
.n .n-trust .tm,.n .n-trust .ch{border-radius:22px!important;box-shadow:var(--u-sh)!important}
.n .n-tsm button{border-radius:20px!important;box-shadow:var(--u-sh)!important}
/* ---------- halaman terpisah (cek-skor, generate, review, porto) ---------- */
body:not(.n){background:#F4F7FD}
body:not(.n)::before{background:
  radial-gradient(620px 520px at -6% -10%,rgba(142,178,255,.5),transparent 70%),
  radial-gradient(640px 560px at 106% 108%,rgba(255,206,166,.45),transparent 70%),
  radial-gradient(520px 440px at 100% -8%,rgba(200,170,255,.38),transparent 70%),
  linear-gradient(180deg,#F6F9FE,#EEF3FB)!important}
body:not(.n) .card{border-radius:var(--u-r)!important;border:1px solid rgba(255,255,255,.9)!important;
  box-shadow:var(--u-sh)!important;background:#fff!important}
body:not(.n) .btn{border-radius:999px!important;background:var(--u-dark)!important;color:#fff!important;
  box-shadow:0 12px 24px -16px rgba(17,24,39,.9)!important;font-weight:600}
body:not(.n) .btn.gh{background:#fff!important;color:var(--u-ink)!important;
  box-shadow:0 8px 20px -14px rgba(16,40,80,.5)!important}
body:not(.n) .chip{border-radius:999px;font-weight:700;letter-spacing:.06em}
body:not(.n) .top{background:rgba(255,255,255,.82)!important;backdrop-filter:blur(16px) saturate(1.5);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);box-shadow:0 10px 26px -20px rgba(16,40,80,.5)!important}
body:not(.n) .back{background:#fff!important;color:var(--u-ink)!important;box-shadow:0 8px 20px -14px rgba(16,40,80,.5)}
body:not(.n) .drop{border-radius:20px!important;border-color:#BBD2F5!important;background:#F7FAFF!important}
body:not(.n) .f input,body:not(.n) .f textarea{border-radius:14px!important;border-color:var(--u-line)!important}
body:not(.n) .ring{box-shadow:none}
/* detail produk: harga & jaminan */
.n .n-buy{border-radius:22px!important;box-shadow:var(--u-sh)!important;background:#fff!important}
.n .n-buy b{letter-spacing:-.03em}
.n .n-buy s{color:var(--u-mut)}
/* portofolio builder */
body:not(.n) .tbar,body:not(.n) .side,body:not(.n) .panel{border-radius:20px!important;box-shadow:var(--u-sh)!important}

/* ===== v12: hero navy + gauge, kartu overlap, dock pill (gaya Control Tower, brand Mahtin) ===== */
:root{--x-navy:#0F2260;--x-navy2:#0A1845;--x-gold:#F0C24B}
.n-hero>.n-wrap{display:block!important;padding-block:10px 18px!important}
.x-hero{position:relative;overflow:hidden;border-radius:30px 30px 40px 40px;color:#fff;padding:26px 20px 92px;
  background:radial-gradient(120% 70% at 0% 0%,#4F8DFF 0%,rgba(79,141,255,.5) 22%,transparent 55%),radial-gradient(70% 45% at 100% 0%,rgba(232,184,58,.5),transparent 60%),linear-gradient(180deg,#16307E 0%,#0F2260 45%,#0A1845 100%);
  box-shadow:0 30px 50px -34px rgba(10,24,69,.8)}
.x-hero .x-tx{position:relative;text-align:left}
.x-hero .poi{background:rgba(255,255,255,.14)!important;color:#fff!important;box-shadow:none!important}
.x-hero h1.n-h{color:#fff!important;max-width:16ch}
.x-hero h1.n-h span{color:var(--x-gold)!important}
.x-hero p{color:rgba(255,255,255,.82)!important;max-width:44ch}
html .n-hero .x-hero .acts{display:none}
.x-hero .acts .n-btn{background:#fff!important;color:var(--x-navy2)!important;box-shadow:none!important}
.x-hero .acts .n-btn.sec{background:rgba(255,255,255,.12)!important;color:#fff!important;border:1px solid rgba(255,255,255,.3)!important}
.x-gw{position:relative;margin-top:22px;text-align:center}
.x-g{position:relative;width:270px;max-width:100%;aspect-ratio:270/150;margin:0 auto}
.x-g svg{position:absolute;inset:0;width:100%;height:100%}
.x-g .v{position:absolute;left:0;right:0;top:30%;text-align:center}
.x-g .v b{display:block;font-size:50px;font-weight:700;line-height:1;letter-spacing:-2px;color:#fff}
.x-g .v b span{font-size:20px;opacity:.6;letter-spacing:-1px}
.x-g .v em{display:block;font-style:normal;font-size:13px;color:rgba(255,255,255,.9);margin-top:5px}
.x-g .v em strong{font-weight:600}
.x-tag{display:block;font-size:9.5px;letter-spacing:.16em;color:rgba(255,255,255,.6);margin-top:8px}
.x-over{position:relative;z-index:2;margin:-66px 12px 34px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.x-cta{grid-column:1/-1;display:flex;align-items:center;gap:13px;padding:16px;border-radius:26px;background:#FBFCFF;text-decoration:none;color:var(--u-ink);box-shadow:var(--u-sh)}
.x-cta .bd{width:48px;height:48px;border-radius:16px;background:linear-gradient(145deg,#F5C84C,#E3A21B);color:var(--x-navy2);display:grid;place-items:center;font-weight:700;font-size:21px;box-shadow:0 10px 18px -8px rgba(227,162,27,.8);flex:none}
.x-cta .tx{min-width:0}.x-cta b{display:block;font-size:15.5px;font-weight:600;line-height:1.25}.x-cta small{font-size:12.5px;color:var(--u-mut)}
.x-cta .ar{margin-left:auto;width:38px;height:38px;border-radius:50%;background:#EDF1F8;display:grid;place-items:center;flex:none;color:var(--u-ink)}
.x-tl{background:#FBFCFF;border-radius:24px;padding:14px 13px 15px;box-shadow:var(--u-sh);min-width:0}
.x-ic{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;margin-bottom:10px}
.x-ic .n-ic{width:19px;height:19px}
.x-tl small{display:block;font-size:11.5px;color:var(--u-mut);line-height:1.3}
.x-tl b{font-size:23px;font-weight:700;letter-spacing:-1px;line-height:1.25;color:var(--u-ink)}
.x-tl b span{font-size:12px;color:var(--u-mut);letter-spacing:0}
.x-hero.one{padding:18px 20px 88px}.x-hero.one .x-gw{margin-top:6px}
.x-akun{margin-top:14px}
@media (min-width:900px){
  .x-hero{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:30px;padding:54px 52px 118px;border-radius:36px 36px 48px 48px}
  .x-hero.one{display:block;padding:26px 30px 96px}
  html .n-hero .x-hero .acts{display:flex}
  .x-hero h1.n-h{max-width:15ch}
  .x-gw{margin-top:0}.x-g{width:330px}.x-g .v b{font-size:62px}.x-g .v b span{font-size:24px}.x-g .v em{font-size:14.5px}
  .x-over{margin:-70px 40px 44px;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:14px}
  .x-cta{grid-column:auto;padding:20px}
  .x-tl{padding:18px}
  .x-akun .x-over{margin:-66px 20px 6px;grid-template-columns:repeat(3,minmax(0,1fr))}
  .x-akun .x-cta{grid-column:1/-1}
}
/* dock: pill navy, aktif = pill putih, label selalu tampil */
body .n-dock{left:20px!important;right:20px!important;height:70px!important;border-radius:36px!important;padding:7px!important;
  background:var(--x-navy2)!important;border:0!important;box-shadow:0 20px 30px -18px rgba(10,22,64,.7)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
body .n-dock a{flex:1 1 0;flex-direction:column!important;gap:2px!important;height:56px!important;min-width:0!important;padding:0!important;border-radius:28px!important;color:#93A0C4!important;font-size:10.5px!important;font-weight:500!important;background:none!important;box-shadow:none!important}
body .n-dock a span{position:static!important;width:auto!important;height:auto!important;clip:auto!important;overflow:visible!important}
body .n-dock a .n-ic{width:20px;height:20px}
body .n-dock a[aria-current="page"]{background:#fff!important;color:var(--x-navy2)!important;font-weight:600!important}
body .n-dock .mint{flex:none;box-shadow:0 8px 20px rgba(10,22,64,.45),0 0 0 4px var(--x-navy2)!important}
.x-akun .x-over{margin-bottom:6px}
body .n-dock .mint{margin-top:-30px!important}

/* ===== v13 QC: ringkas, kontras, ikon ===== */
:root{--u-mut:#5A6880}
html body .n-brand .wd em{color:#9A6E06!important;font-size:9px!important;letter-spacing:.38em!important}
html .n .n-disc{background:#FFE3EC!important;color:#B4234F!important;font-size:10.5px!important}
html body .n-sub{color:#5A6880!important;font-size:11.5px!important}
html body .n-link{color:#1D55D6!important}
html body .n-alum p{color:#5A6880!important;font-size:10.5px!important}
html body .n-alum small{color:#66748A!important;font-size:10.5px!important}
html body .n-hint{color:#5A6880!important}
html body .x-cta small,html body .x-tl small{color:#5A6880}
html body .n-aic .tgs>*,html body .n-ai .tg{font-size:10.5px!important}
html body .x-tag{color:rgba(255,255,255,.78);font-size:10px}
html body .x-hero .poi{font-size:11.5px!important}
/* tile kategori: baris ringkas, ikon SVG */
html .n .n-cat{flex-direction:row!important;align-items:center!important;gap:11px!important;min-height:0!important;padding:11px 12px!important;border-radius:18px!important}
html .n .n-cat .ci{width:36px!important;height:36px!important;border-radius:12px!important;flex:none;margin:0!important}
html .n .n-cat .ci .n-ic{width:19px;height:19px;stroke-width:1.9}
html .n .n-cat .cap{margin:0!important;min-width:0;flex:1;text-align:left}
html .n .n-cat .cap b{font-size:14px!important;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html .n .n-cat .cap small{font-size:11.5px!important;margin-top:1px!important;color:#5A6880!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html .n .n-cat .go{position:static!important;background:none!important;padding:0!important;color:#9AA7BD!important;flex:none;display:grid!important}
html .n .n-cat .go .n-ic{width:16px;height:16px}
/* akun: kartu profil terang & ringkas (hero navy cukup satu) */
html .n .n-akun{background:#FBFCFF!important;color:var(--u-ink)!important;padding:12px 14px!important;border-radius:20px!important;box-shadow:var(--u-sh)!important;gap:11px!important}
html .n .n-akun::before,html .n .n-akun::after{display:none!important}
html .n .n-akun img{width:40px!important;height:40px!important;border:1px solid #E3E9F4}
html .n .n-akun b{font-size:15px!important;color:var(--u-ink)!important}
html .n .n-akun small{color:#5A6880!important}
html .n .n-akun .out{background:#EDF1F8!important;color:var(--u-ink)!important;font-weight:600!important;padding:8px 14px!important}
@media (max-width:899px){
  .n-hero>.n-wrap{padding-block:8px 6px!important}
  .x-hero{padding:16px 16px 58px;border-radius:26px 26px 32px 32px}
  html body .x-hero h1.n-h{font-size:22px!important;line-height:1.14!important;margin-top:8px!important;max-width:none}
  html body .x-hero h1.n-h span{display:block}
  html body .x-hero p{font-size:12.5px!important;line-height:1.45!important;margin-top:6px!important;max-width:34ch}
  .x-gw{margin-top:12px}.x-g{width:220px}
  .x-g .v{top:27%}.x-g .v em strong{display:block}.x-g .v b{font-size:38px;letter-spacing:-1.5px}.x-g .v b span{font-size:15px}.x-g .v em{font-size:11.5px;margin-top:3px}
  .x-tag{margin-top:6px}
  .x-over{margin:-46px 10px 18px;gap:8px}
  .x-cta{padding:10px 12px;border-radius:20px;gap:11px}
  .x-cta .bd{width:38px;height:38px;border-radius:13px;font-size:17px}
  .x-cta b{font-size:14.5px}.x-cta small{font-size:12px}
  .x-cta .ar{width:32px;height:32px}.x-cta .ar .n-ic{width:16px;height:16px}
  .x-tl{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center;padding:9px 10px;border-radius:18px}
  .x-tl .x-ic{grid-row:1/3;width:30px;height:30px;margin:0}.x-tl .x-ic .n-ic{width:16px;height:16px}
  .x-tl small{font-size:10.5px;order:2;line-height:1.2}
  .x-tl b{font-size:16px;letter-spacing:-.5px;line-height:1.15}.x-tl b span{font-size:10.5px}
  .x-hero.one{padding:12px 16px 56px}.x-akun .x-over{margin:-44px 10px 4px}
  html body #v-beranda .n-sec{margin-top:24px!important}
  html body .n-dock{height:62px!important;padding:6px!important;left:16px!important;right:16px!important}
  html body .n-dock a{height:50px!important;font-size:10.5px!important}
  html body .n-dock .mint{width:50px!important;height:50px!important;margin-top:-24px!important}
}
.x-g .v em i{font-style:normal}
html .n .n-cat .cap{order:2}html .n .n-cat .go{order:3;margin-left:auto}
@media (max-width:899px){.x-g .v em i{display:none}html .n .n-cat .go{display:none!important}html .n .n-cat{gap:9px!important;padding:10px!important}html .n .n-cat .cap b{font-size:13.5px!important}html .n .n-cat .cap small{font-size:11px!important}}
html .n .n-cat .cap b{white-space:normal!important}

/* ===== v15: strip statistik + posisi search + login ===== */
.x-st{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:#FBFCFF;border-radius:22px;box-shadow:var(--u-sh);padding:12px 4px}
.x-s{display:flex;flex-direction:column;align-items:center;text-align:center;padding:2px 6px;min-width:0}
.x-s+.x-s{border-left:1px solid #E6ECF5}
.x-s .x-ic{width:38px;height:38px;border-radius:13px;margin:0 0 7px;box-shadow:0 8px 14px -8px rgba(16,40,80,.55)}
.x-s .x-ic .n-ic{width:19px;height:19px}
.x-ic.f .n-ic{fill:#fff!important;stroke:none!important}
.x-s b{font-size:19px;font-weight:700;letter-spacing:-.5px;line-height:1.15;color:var(--u-ink)}
.x-s b span{font-size:12px;color:#5A6880;letter-spacing:0;font-weight:600}
.x-s small{font-size:11px;color:#5A6880;line-height:1.3;margin-top:1px}
html body #nLayanan .n-search{margin:2px 0 12px!important}
html .n .n-login{background:radial-gradient(120% 70% at 0% 0%,rgba(79,141,255,.55) 0%,transparent 55%),radial-gradient(70% 45% at 100% 0%,rgba(232,184,58,.35),transparent 60%),linear-gradient(180deg,#16307E 0%,#0F2260 45%,#0A1845 100%)!important}
html .n .n-login .dot{display:none!important}
html .n .n-login h1 span{color:#F0C24B!important}
html .n .n-login .b2{background:rgba(255,255,255,.12)!important;color:#fff!important;border:1px solid rgba(255,255,255,.3)!important;box-shadow:none!important}
@media (min-width:900px){
  .x-over{grid-template-columns:1fr 1.6fr!important;align-items:stretch}
  .x-over .x-st{grid-column:auto;padding:14px 8px;border-radius:26px;align-items:center}
  .x-s .x-ic{width:42px;height:42px}.x-s b{font-size:22px}.x-s small{font-size:12px}
  .x-akun .x-over{grid-template-columns:1fr!important}
}
html .n .n-login::after{display:none!important}

/* v17: dock & tombol ngambang sembunyi saat sheet/modal terbuka */
html.od-open .n-dock,html.od-open .n-fab,html:has(#od:not([hidden])) .n-dock,html:has(#nChat:not([hidden])) .n-dock,html:has(#od:not([hidden])) .n-fab{display:none!important}

/* v18: tombol utama checkout + nav bawah pakai gradasi hero */
:root{--x-grad:radial-gradient(120% 140% at 0% 0%,#4F8DFF 0%,rgba(79,141,255,.45) 30%,transparent 60%),radial-gradient(80% 120% at 100% 0%,rgba(232,184,58,.45),transparent 60%),linear-gradient(180deg,#16307E 0%,#0F2260 50%,#0A1845 100%)}
html #od .btn-violet{background:var(--x-grad)!important;color:#fff!important;border:0!important;box-shadow:0 14px 26px -14px rgba(10,24,69,.8)!important}
html #od .btn-violet .ic{background:rgba(255,255,255,.18)!important;color:#fff!important;border-radius:50%}
html body .n-dock{background:var(--x-grad)!important}