/* =====================================================================
   SaljiehPay — tampilan bersama dashboard client, admin, dan halaman bayar
   ===================================================================== */

:root{
  --ink:#0f172a; --ink-2:#38435c; --muted:#6b7688; --faint:#9aa3b2;
  --bg:#f3f5f8; --surface:#ffffff; --surface-2:#f8fafc;
  --line:#e2e7ef; --line-2:#cdd5e1;
  --brand:#1668d9; --brand-dark:#0f4fa8; --brand-soft:#e8f0fd;
  --ok:#0a7f4f; --ok-soft:#e6f5ee;
  --warn:#9a6700; --warn-soft:#fdf5e3;
  --danger:#b42318; --danger-soft:#fdecea;
  --radius:12px; --radius-sm:8px;
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
  --shadow-lg:0 12px 32px rgba(16,24,40,.12);
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--ink);
  font-size:14.5px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono);font-size:.86em}

/* ---------- Kerangka ---------- */
.shell{display:flex;min-height:100vh}
.side{
  width:232px;flex:0 0 232px;background:var(--surface);
  border-right:1px solid var(--line);padding:20px 0;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
.brand{display:flex;align-items:center;gap:9px;padding:0 20px 22px;font-weight:800;font-size:19px;letter-spacing:-.4px}
.brand .dot{width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,var(--brand),#4b9bff);
  display:grid;place-items:center;color:#fff;font-size:13px;font-weight:900}
.brand small{display:block;font-size:10.5px;font-weight:600;color:var(--faint);letter-spacing:.06em;text-transform:uppercase}
.nav{display:flex;flex-direction:column;gap:1px;padding:0 10px;flex:1}
.nav a{
  display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--radius-sm);
  color:var(--ink-2);font-weight:500;font-size:14px;
}
.nav a:hover{background:var(--surface-2);text-decoration:none}
.nav a.on{background:var(--brand-soft);color:var(--brand-dark);font-weight:650}
.nav .sep{font-size:10.5px;font-weight:700;color:var(--faint);letter-spacing:.08em;
  text-transform:uppercase;padding:18px 11px 7px}
.nav .ic{width:17px;text-align:center;opacity:.85;flex:0 0 17px}
.side-foot{padding:14px 20px 0;border-top:1px solid var(--line);margin-top:12px;font-size:12.5px;color:var(--muted)}
.side-foot strong{display:block;color:var(--ink);font-size:13.5px}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  background:var(--surface);border-bottom:1px solid var(--line);
  padding:14px 26px;display:flex;align-items:center;justify-content:space-between;gap:16px;
  position:sticky;top:0;z-index:20;
}
.topbar h1{font-size:18px;font-weight:700;letter-spacing:-.3px}
.topbar .sub{font-size:12.5px;color:var(--muted);font-weight:400;margin-top:1px}
.content{padding:24px 26px 56px;max-width:1240px;width:100%}

/* ---------- Kartu ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card + .card{margin-top:18px}
.card-h{padding:15px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.card-h h2{font-size:15px;font-weight:680;letter-spacing:-.15px}
.card-h p{font-size:12.5px;color:var(--muted);margin-top:2px}
.card-b{padding:18px}
.card-b.tight{padding:0}

/* ---------- Statistik ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:14px;margin-bottom:18px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:15px 16px;box-shadow:var(--shadow)}
.stat .k{font-size:11.5px;font-weight:650;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.stat .v{font-size:23px;font-weight:720;letter-spacing:-.7px;margin-top:5px;font-variant-numeric:tabular-nums}
.stat .m{font-size:12px;color:var(--faint);margin-top:3px}
.stat.hero{background:linear-gradient(145deg,var(--brand-dark),var(--brand));border-color:transparent;color:#fff}
.stat.hero .k{color:rgba(255,255,255,.75)}
.stat.hero .v{color:#fff}
.stat.hero .m{color:rgba(255,255,255,.72)}

/* ---------- Tabel ---------- */
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{
  text-align:left;padding:10px 14px;background:var(--surface-2);
  font-size:11.5px;font-weight:680;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;
  border-bottom:1px solid var(--line);white-space:nowrap;
}
td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-2)}
td.r,th.r{text-align:right}
td.n{font-variant-numeric:tabular-nums;white-space:nowrap}
.empty{padding:44px 20px;text-align:center;color:var(--muted)}
.empty .big{font-size:30px;opacity:.3;margin-bottom:8px}

/* ---------- Lencana ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;
  font-size:11.5px;font-weight:650;white-space:nowrap;border:1px solid transparent}
.badge::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.b-paid{background:var(--ok-soft);color:var(--ok);border-color:#bfe5d2}
.b-pending{background:var(--warn-soft);color:var(--warn);border-color:#f0dfb4}
.b-expired{background:var(--danger-soft);color:var(--danger);border-color:#f6ccc7}
.b-cancelled{background:#eef1f5;color:var(--muted);border-color:var(--line-2)}
.b-live{background:var(--brand-soft);color:var(--brand-dark);border-color:#c5dcfb}
.b-test{background:#f3effd;color:#6b46c1;border-color:#ded2f7}
.badge.flat::before{display:none}

/* ---------- Tombol ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 15px;border-radius:var(--radius-sm);border:1px solid var(--line-2);
  background:var(--surface);color:var(--ink);font-size:13.5px;font-weight:620;
  cursor:pointer;font-family:inherit;transition:background .12s,border-color .12s;
}
.btn:hover{background:var(--surface-2);text-decoration:none}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-pri{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-pri:hover{background:var(--brand-dark);border-color:var(--brand-dark)}
.btn-dng{background:var(--surface);border-color:#f0c4bf;color:var(--danger)}
.btn-dng:hover{background:var(--danger-soft)}
.btn-sm{padding:5px 10px;font-size:12.5px;border-radius:6px}
.btn-block{width:100%}
.btn-row{display:flex;gap:9px;flex-wrap:wrap}

/* ---------- Formulir ---------- */
.fg{margin-bottom:15px}
.fg:last-child{margin-bottom:0}
label{display:block;font-size:13px;font-weight:640;margin-bottom:5px;color:var(--ink-2)}
.hint{font-size:12px;color:var(--muted);margin-top:5px;line-height:1.5}
/* Daftar yang DIKECUALIKAN, bukan daftar yang diizinkan. Versi sebelumnya
   menyebutkan tipe satu per satu (text, number, email, password, url), jadi
   dua hal luput: input tanpa atribut type sama sekali — padahal itu sah dan
   artinya text — dan input type=date. Akibatnya 41 input di seluruh aplikasi
   tampil polos tanpa gaya. Ditulis begini, tipe baru ikut tergaya sendiri. */
input:not([type=hidden]):not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=image]),
select,textarea{
  width:100%;padding:9px 12px;border:1.5px solid var(--line-2);border-radius:var(--radius-sm);
  font-size:14px;font-family:inherit;color:var(--ink);background:var(--surface);
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(22,104,217,.12)}
textarea{resize:vertical;min-height:76px;font-family:var(--mono);font-size:12.5px;line-height:1.6}
select{appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7688' d='M6 8.5 2 4h8z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;padding-right:30px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-bottom:15px}
.grid2>.fg,.grid3>.fg{margin-bottom:0}
.grid2:last-child,.grid3:last-child{margin-bottom:0}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.inline{display:inline}
fieldset{border:0}

/* ---------- Pesan ---------- */
.msg{padding:11px 14px;border-radius:var(--radius-sm);font-size:13.5px;margin-bottom:16px;border:1px solid}
.msg-ok{background:var(--ok-soft);border-color:#bfe5d2;color:#07532f}
.msg-err{background:var(--danger-soft);border-color:#f6ccc7;color:#8a1c12}
.msg-warn{background:var(--warn-soft);border-color:#f0dfb4;color:#6d4a00}
.msg-info{background:var(--brand-soft);border-color:#c5dcfb;color:var(--brand-dark)}
.msg strong{font-weight:700}
.msg code{background:rgba(0,0,0,.06);padding:1px 5px;border-radius:4px;font-family:var(--mono);font-size:.9em}

/* ---------- Potongan kode ---------- */
pre{background:#0f172a;color:#dbe4f0;padding:14px 16px;border-radius:var(--radius-sm);
  overflow-x:auto;font-family:var(--mono);font-size:12.5px;line-height:1.65}
pre .c{color:#7c8ba1}.k{color:#8ac2ff}.s{color:#a5e1a5}
code.inl{background:var(--surface-2);border:1px solid var(--line);padding:1.5px 6px;border-radius:5px;
  font-family:var(--mono);font-size:12.5px;color:var(--ink-2)}

/* ---------- Kunci rahasia ---------- */
.secret{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:8px 11px;font-family:var(--mono);font-size:12.5px;word-break:break-all}
.secret span{flex:1;min-width:0}

/* ---------- Paginasi ---------- */
.pager{display:flex;gap:6px;align-items:center;justify-content:center;padding:15px;flex-wrap:wrap}
.pager a,.pager span{padding:6px 11px;border-radius:6px;border:1px solid var(--line-2);font-size:13px;font-weight:600;color:var(--ink-2)}
.pager a:hover{background:var(--surface-2);text-decoration:none}
.pager .cur{background:var(--brand);border-color:var(--brand);color:#fff}
.pager .off{opacity:.4;pointer-events:none}

/* ---------- Deret filter ---------- */
.filters{display:flex;gap:9px;flex-wrap:wrap;align-items:flex-end}
.filters .fg{margin:0;min-width:135px}
.filters .fg.grow{flex:1;min-width:190px}

/* ---------- Daftar rincian ---------- */
.dl{display:grid;grid-template-columns:auto 1fr;gap:9px 18px;font-size:13.5px}
.dl dt{color:var(--muted);font-weight:500}
.dl dd{text-align:right;font-weight:600;font-variant-numeric:tabular-nums;word-break:break-word}

/* ---------- Halaman masuk ---------- */
.auth{min-height:100vh;display:grid;place-items:center;padding:22px;
  background:linear-gradient(160deg,#eaf1fb 0%,#f3f5f8 55%,#eef2f7 100%)}
.auth-box{width:100%;max-width:382px}
.auth-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:30px 28px;box-shadow:var(--shadow-lg)}
.auth-card h1{font-size:20px;font-weight:720;letter-spacing:-.3px;margin-bottom:3px}
.auth-card .sub{font-size:13px;color:var(--muted);margin-bottom:22px}
.auth-brand{display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:18px;
  font-size:21px;font-weight:800;letter-spacing:-.5px}
.auth-foot{text-align:center;margin-top:16px;font-size:12.5px;color:var(--muted)}

/* ---------- Halaman pembayaran ---------- */
.pay-wrap{min-height:100vh;display:grid;place-items:center;padding:18px;
  background:linear-gradient(165deg,#0f4fa8,#1668d9 48%,#3f8ae8)}
.pay{width:100%;max-width:410px;background:var(--surface);border-radius:18px;
  overflow:hidden;box-shadow:0 22px 60px rgba(8,30,70,.3)}
.pay-h{padding:18px 22px;background:var(--surface);border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:12px}
.pay-h .who{font-size:14.5px;font-weight:700}
.pay-h .wh2{font-size:12px;color:var(--muted)}
.pay-b{padding:22px}
.pay-amt{text-align:center;margin-bottom:4px}
.pay-amt .lbl{font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.03em;text-transform:uppercase}
.pay-amt .v{font-size:32px;font-weight:760;letter-spacing:-1.1px;font-variant-numeric:tabular-nums;margin-top:3px}
.pay-amt .note{font-size:12.5px;color:var(--warn);background:var(--warn-soft);border:1px solid #f0dfb4;
  border-radius:7px;padding:7px 11px;margin-top:11px;display:inline-block;text-align:left;line-height:1.45}
.qbox{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;
  margin:18px 0;text-align:center}
.qbox img{width:100%;max-width:262px;height:auto;display:block;margin:0 auto;image-rendering:pixelated}
.qbox .cap{font-size:11.5px;color:var(--faint);margin-top:9px}
.timer{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:9px;padding:10px;font-size:13.5px;margin-bottom:14px}
.timer b{font-variant-numeric:tabular-nums;font-size:16px;letter-spacing:-.3px}
.timer.late{background:var(--danger-soft);border-color:#f6ccc7;color:var(--danger)}
.steps{counter-reset:s;font-size:13px;color:var(--ink-2);margin-top:4px}
.steps li{counter-increment:s;list-style:none;position:relative;padding-left:26px;margin-bottom:7px}
.steps li::before{content:counter(s);position:absolute;left:0;top:1px;width:18px;height:18px;border-radius:50%;
  background:var(--brand-soft);color:var(--brand-dark);font-size:11px;font-weight:700;display:grid;place-items:center}
.result{text-align:center;padding:14px 4px}
.result .ic{line-height:0;margin-bottom:12px}
.result .ic .ikon{width:62px;height:62px}
.result .ic-lunas{color:var(--ok)}
.result .ic-batal{color:var(--danger)}
.result .ic-netral{color:var(--faint)}

/* Centang lunas: mendarat sekali dengan pantulan kecil, lalu diam.
   Animasinya hanya di ikon yang baru muncul — kalau halaman dibuka ulang
   untuk tagihan yang memang sudah lunas, ia tetap ikut memantul sekali,
   dan itu disengaja: itu kabar baik yang pantas terlihat. */
.result .ic-lunas .ikon{animation:salpay-centang .62s cubic-bezier(.2,1.5,.42,1) both}
@keyframes salpay-centang{
  0%{transform:scale(.3);opacity:0}
  55%{transform:scale(1.14);opacity:1}
  78%{transform:scale(.95)}
  100%{transform:scale(1);opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .result .ic-lunas .ikon{animation:none}
}
.result h2{font-size:19px;font-weight:720;margin-bottom:5px}
.result p{font-size:13.5px;color:var(--muted);margin-bottom:16px}
.pulse{animation:pl 1.6s ease-in-out infinite}
@keyframes pl{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- Responsif ---------- */
.menu-btn{display:none;background:none;border:1px solid var(--line-2);border-radius:8px;
  padding:7px 11px;font-size:17px;line-height:1;cursor:pointer;color:var(--ink-2)}
.menu-btn:focus-visible{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(22,104,217,.12)}
/* Tabir hanya ada di layar sempit; di layar lebar ia tidak boleh tergambar
   sama sekali, termasuk sebagai tombol kosong. */
.side-tabir{display:none}
@media(max-width:900px){
  /* Menu geser dari samping, bukan mendorong isi halaman ke bawah.
     Versi sebelumnya membuka menu dengan menampilkan daftar di atas konten,
     sehingga seluruh halaman melompat turun dan posisi baca hilang. */
  .shell{flex-direction:column}
  .side{
    position:fixed;top:0;left:0;bottom:0;z-index:60;
    width:min(82vw,300px);height:100%;flex:none;
    border-right:1px solid var(--line);border-bottom:0;
    padding:16px 0;overflow-y:auto;background:var(--surface);
    transform:translateX(-100%);
    transition:transform .22s ease;
    box-shadow:0 0 0 rgba(0,0,0,0);
  }
  .side.open{transform:translateX(0);box-shadow:4px 0 28px rgba(15,23,42,.18)}

  /* Latar yang buram saat menu terbuka, supaya jelas menu sedang menutupi
     halaman dan sekali ketuk di mana saja menutupnya kembali. */
  .side-tabir{
    display:block;position:fixed;inset:0;z-index:55;border:0;padding:0;margin:0;width:100%;
    background:rgba(15,23,42,.38);
    backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
    opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s ease;
  }
  .side-tabir.on{opacity:1;visibility:visible}
  body.menu-terbuka{overflow:hidden}

  /* Batang judul kecil berisi tombol menu, selalu terlihat di atas. */
  .topbar{padding:12px 16px;position:sticky;top:0;z-index:40;background:var(--surface)}
  .menu-btn{display:inline-flex;align-items:center;justify-content:center}
  /* Tombol tutup didorong ke tepi kanan panel, bukan menempel di belakang
     nama aplikasi. Tanpa space-between, flex menaruhnya tepat setelah teks
     dan ia terlihat seperti bagian dari tulisannya. */
  .brand{padding:0 16px 18px;justify-content:space-between;gap:12px}
  .brand > span{min-width:0}
  .nav{padding:14px 10px 0}
  .content{padding:18px 16px 44px}
  .grid2,.grid3{grid-template-columns:1fr}
  .dl{grid-template-columns:1fr;gap:3px 0}
  .dl dd{text-align:left;margin-bottom:9px}
}

@media(prefers-reduced-motion:reduce){
  .side,.side-tabir{transition:none}
}

/* Di layar lebar, kolom QR kembali ke kanan. Di HTML ia ditulis lebih dulu
   supaya di layar sempit muncul tepat di bawah judul, bukan setelah semua
   rincian — di HP, rincian yang panjang mendorong QR jauh ke bawah layar. */
@media(min-width:901px){
  .hasil-qris .kol-qr{order:2}
  .hasil-qris .kol-rinci{order:1}
}

/* ---------- Rincian tagihan di halaman bayar ---------- */
.breakdown{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;margin:16px 0 0;font-size:13.5px}
.breakdown .br{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:4px 0;color:var(--ink-2)}
.breakdown .br .n{font-variant-numeric:tabular-nums;white-space:nowrap}
.breakdown .br.tot{border-top:1px solid var(--line-2);margin-top:6px;padding-top:9px;
  font-weight:700;color:var(--ink);font-size:15px}
.breakdown .tip{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;
  background:var(--line-2);color:var(--surface);font-size:10px;font-weight:700;cursor:help;
  vertical-align:1px;margin-left:3px}

/* QR sebagai elemen pertama di bawah header halaman bayar */
.qbox.first{margin:0 0 18px}

/* ---------- Sembunyikan saldo ----------
   Nilai asli dan topengnya sama-sama ada di HTML; yang satu disembunyikan
   dengan display:none. Dipilih begini supaya angka yang sedang tersembunyi
   juga tidak terbaca pembaca layar dan tidak ikut tersalin saat disorot —
   hal yang tidak dicapai oleh blur atau warna transparan. */
.rahasia-tutup{display:none;letter-spacing:.04em}
html[data-saldo="off"] .rahasia-nilai{display:none}
html[data-saldo="off"] .rahasia-tutup{display:inline}

.saldo-btn{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  border:1.5px solid var(--line-2);background:var(--surface);color:var(--ink-2);
  border-radius:var(--radius-sm);padding:7px 11px;font-size:12.5px;
  font-family:inherit;font-weight:600;white-space:nowrap;
}
.saldo-btn:hover{border-color:var(--brand);color:var(--brand)}
.saldo-btn:focus-visible{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(22,104,217,.12)}
.saldo-btn .ic{display:inline-flex;align-items:center;line-height:1}
.ikon{width:1em;height:1em;display:inline-block;vertical-align:-.125em}
.saldo-btn .ikon{width:15px;height:15px}
.saldo-btn .label-off{display:none}
html[data-saldo="off"] .saldo-btn .label-on{display:none}
html[data-saldo="off"] .saldo-btn .label-off{display:inline}
/* Di layar kecil tombolnya hanya ikon. Selektornya sengaja dibuat sama
   kuat dengan aturan html[data-saldo="off"] di atas: kalau tidak, saat
   saldo sedang disembunyikan aturan yang lebih spesifik itu menang dan
   tulisannya muncul lagi, mendorong judul halaman jadi tiga baris. */
@media (max-width:640px){
  html .saldo-btn .teks,
  html[data-saldo="off"] .saldo-btn .teks{display:none}
  .saldo-btn{padding:7px 9px}
}

/* ---------- Penanda langkah pada alur bertahap ---------- */
.langkah{display:flex;gap:8px;margin:0 0 16px;font-size:12px;font-weight:650}
.langkah span{
  flex:1;text-align:center;padding:7px 6px;border-radius:999px;
  background:var(--surface-2);color:var(--faint);border:1px solid var(--line);
}
.langkah .on{background:var(--brand-soft);color:var(--brand-dark);border-color:#c5dcfb}
.langkah .selesai{background:var(--ok-soft);color:#07532f;border-color:#bfe5d2}

/* ---------- Saklar mode developer di menu ---------- */
.dev-toggle{margin:auto 10px 10px;padding-top:10px}
.dev-btn{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
  background:var(--surface-2);border:1.5px solid var(--line);border-radius:var(--radius-sm);
  padding:10px 12px;font-family:inherit;color:var(--ink-2);
}
.dev-btn:hover{border-color:var(--brand);color:var(--brand)}
.dev-btn:focus-visible{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(22,104,217,.12)}
.dev-btn.on{background:var(--brand-soft);border-color:#c5dcfb;color:var(--brand-dark)}
.dev-btn .ic{font-size:15px;line-height:1;flex:none}
.dev-btn strong{display:block;font-size:12.5px;font-weight:680;line-height:1.3}
.dev-btn small{display:block;font-size:11px;color:var(--faint);font-weight:400;line-height:1.35;margin-top:1px}
.dev-btn.on small{color:var(--brand-dark);opacity:.75}