/* =====================================================================
   NetBilling theme: Neumorphism (soft UI)
   One soft grey for everything. Nothing has a border or a flat fill: cards,
   buttons and the menu are RAISED off the page by a light and a dark shadow;
   fields and the selected menu item are PRESSED into it.
   ===================================================================== */
   ===================================================================== */
@font-face{ font-family:"Nunito"; font-weight:400 500; font-display:swap; src:url("/assets/fonts/nunito-latin-400-normal.woff2") format("woff2"); }
@font-face{ font-family:"Nunito"; font-weight:600; font-display:swap; src:url("/assets/fonts/nunito-latin-600-normal.woff2") format("woff2"); }
@font-face{ font-family:"Nunito"; font-weight:700; font-display:swap; src:url("/assets/fonts/nunito-latin-700-normal.woff2") format("woff2"); }
:root{
  --t-font:"Nunito",-apple-system,"Segoe UI",sans-serif; --t-num-font:"Nunito",-apple-system,"Segoe UI",sans-serif;
  --t-scheme:light;
  --t-page:#E0E5EC; --t-surface:#E0E5EC; --t-surface-2:#DCE1E9; --t-line:rgba(163,177,198,0.35);
  --t-ink:#3D4468; --t-ink-mid:#6B7394; --t-ink-low:#9AA3BE;
  --t-primary:#4F6BED; --t-on-primary:#FFFFFF; --t-secondary:#3D4468; --t-on-secondary:#FFFFFF; --t-focus:rgba(79,107,237,0.22);
  --t-ok:#23966B; --t-ok-bg:#E0E5EC; --t-ok-line:transparent;
  --t-warn:#C98318; --t-warn-bg:#E0E5EC; --t-warn-line:transparent;
  --t-bad:#D84A5F; --t-bad-bg:#E0E5EC; --t-bad-line:transparent;
  --t-info:#4F6BED; --t-info-bg:#E0E5EC; --t-info-line:transparent;
  --t-head-bg:#E0E5EC; --t-head-line:transparent; --t-head-ink:#3D4468; --t-head-accent:#4F6BED;
  --t-topnav-hover:rgba(163,177,198,0.25); --t-topnav-active-bg:#E0E5EC; --t-topnav-active-ink:#4F6BED;
  --t-side-bg:#E0E5EC; --t-side-line:transparent; --t-side-ink:#6B7394; --t-side-ink-hi:#3D4468; --t-side-hover:#E0E5EC;
  --t-side-active-bg:#E0E5EC; --t-side-active-ink:#4F6BED;
  --t-stat-bg:#E0E5EC; --t-stat-line:transparent; --t-stat-ink:#3D4468; --t-stat-label:#6B7394;
  --t-icon-bg:#E0E5EC;
  --t-name-bg:#E0E5EC; --t-name-ink:#4F6BED;
  --t-row-odd:#E0E5EC; --t-row-even:#DCE1E9; --t-row-hover:#D6DCE6;
  --t-popup-bg:#E0E5EC; --t-input-bg:#E0E5EC; --t-search-bg:#E0E5EC; --t-search-ink:#3D4468;
  --t-toast-ok-bg:#E0E5EC; --t-toast-bad-bg:#E0E5EC;
  --t-scroll:rgba(107,115,148,0.30); --t-scroll-hover:rgba(107,115,148,0.5);
  --t-login-bg:#E0E5EC; --t-login-card:#E0E5EC; --t-login-input:#E0E5EC; --t-login-line:transparent; --t-login-modal:#E0E5EC;
  --t-login-ink:#3D4468; --t-login-mid:#6B7394; --t-login-low:#9AA3BE; --t-login-accent:#6B7394; --t-login-link:#4F6BED;
  --t-login-shadow:none;
  /* the two shadows every neumorphic shape is made of */
  --nb-hi:#FFFFFF; --nb-lo:#A3B1C6;
  --nb-raise:9px 9px 18px var(--nb-lo), -9px -9px 18px var(--nb-hi);
  --nb-raise-sm:5px 5px 10px var(--nb-lo), -5px -5px 10px var(--nb-hi);
  --nb-raise-xs:3px 3px 6px var(--nb-lo), -3px -3px 6px var(--nb-hi);
  --nb-press:inset 5px 5px 10px var(--nb-lo), inset -5px -5px 10px var(--nb-hi);
  --nb-press-xs:inset 2px 2px 5px var(--nb-lo), inset -2px -2px 5px var(--nb-hi);
  --nb-press-sm:inset 3px 3px 6px var(--nb-lo), inset -3px -3px 6px var(--nb-hi);
  --nb-soft:var(--nb-raise);
}

/* =====================================================================
   Shared structure for every NetBilling theme.
   A theme file = its own tokens (colours, fonts) + this block + a few
   rules of its own. Nothing here names a colour directly: it all comes
   from the --t-* tokens the theme sets on :root.

   Every rule starts with `body` (or `html`) so it outranks the same rule
   in style.css and in the pages' own <style> blocks without !important.
   ===================================================================== */

/* ---------- map the site's own variables onto the theme's ---------- */
:root{
  --bg-deep:var(--t-page); --bg-panel:var(--t-surface); --bg-raised:var(--t-surface-2);
  --line:var(--t-line); --text-hi:var(--t-ink); --text-mid:var(--t-ink-mid); --text-low:var(--t-ink-low);
  --pink:var(--t-primary); --violet:var(--t-primary); --violet-dim:var(--t-primary);
  --signal:var(--t-ok); --warning:var(--t-warn); --danger:var(--t-bad);
}
html body{ background:var(--t-page); color:var(--t-ink); font-family:var(--t-font); }
html body::before, html body::after{ display:none; }
body button, body input, body select, body textarea{ font-family:inherit; }
body a:focus-visible, body button:focus-visible, body [role="button"]:focus-visible,
body summary:focus-visible{ outline-color:var(--t-primary); }

/* ---------- header ---------- */
body header.topnav{ background:var(--t-head-bg); border-bottom:1px solid var(--t-head-line); backdrop-filter:none; -webkit-backdrop-filter:none; }
body .navToggle{ border-color:var(--t-head-line); }
body .navToggle-bars, body .navToggle-bars::before, body .navToggle-bars::after{ background:var(--t-head-ink); }
body .navToggle.open .navToggle-bars{ background:transparent; }
body .wallet-tag{ color:var(--t-head-ink); border-color:var(--t-head-line); }
body .network-tag{ color:var(--t-head-ink); border-color:var(--t-head-line); }
body .header-clock-time{ color:var(--t-head-ink); font-family:var(--t-font); font-variant-numeric:tabular-nums; font-weight:700; letter-spacing:.01em; }
body .header-clock-time .header-clock-colon{ color:var(--t-head-accent); }
body .header-clock-date{ color:var(--t-head-ink); opacity:.65; }
body .profile-btn, body .who .btn-sync{ background:transparent; border-color:var(--t-head-line); color:var(--t-head-ink); }
body .profile-btn:hover, body .who .btn-sync:hover{ border-color:var(--t-head-accent); color:var(--t-head-ink); }

/* ---------- menu ---------- */
/* phones and tablets: the menu is a dropdown under the 3-line button */
body .navlinks{ background:var(--t-popup-bg); border-color:var(--t-line); backdrop-filter:none; -webkit-backdrop-filter:none; }
body .navlinks a{ color:var(--t-ink-mid); }
body .navlinks a:hover{ color:var(--t-ink); background:var(--t-surface-2); }
body .navlinks a.active{ color:var(--t-primary); background:var(--t-info-bg); font-weight:600; }
body .navlinks a#mikrotikBtn{ border-top-color:var(--t-line); }
/* PC: a permanent sidebar (not on the page that keeps its menu in the header) */
@media (min-width:1024px){
  body:not(.nb-topnav) .navlinks{ background:var(--t-side-bg); border-right:1px solid var(--t-side-line); padding:14px 10px 24px; gap:2px; }
  body:not(.nb-topnav) .navlinks a{ color:var(--t-side-ink); border-radius:8px; font-size:13.5px; padding:9px 12px; font-weight:400; }
  body:not(.nb-topnav) .navlinks a:hover{ background:var(--t-side-hover); color:var(--t-side-ink-hi); }
  body:not(.nb-topnav) .navlinks a.active{ background:var(--t-side-active-bg); color:var(--t-side-active-ink); font-weight:600; }
  body:not(.nb-topnav) .navlinks a#mikrotikBtn{ border-top-color:var(--t-side-line); }
  /* status badges in the sidebar: small enough to stay inside it */
  body:not(.nb-topnav) .navlinks a .badge{ font-size:10.5px; padding:2px 8px; }
  /* the content sits beside the sidebar instead of sliding under it */
  body:not(.nb-topnav) main{ max-width:none; margin:0; padding:28px 32px 80px calc(210px + 32px); }
}
html.nb-sidebar-hidden body:not(.nb-topnav) main{ padding-left:32px !important; }
/* the one page whose menu is a bar inside the header on a PC */
@media (min-width:960px){
  body.nb-topnav .navlinks{ background:none; border:none; }
  body.nb-topnav .navlinks a{ color:var(--t-head-ink); opacity:.78; font-weight:400; background:none; }
  body.nb-topnav .navlinks a:hover{ opacity:1; background:var(--t-topnav-hover); color:var(--t-head-ink); }
  body.nb-topnav .navlinks a.active{ opacity:1; background:var(--t-topnav-active-bg); color:var(--t-topnav-active-ink); font-weight:600; }
}

/* ---------- stat cards: flat, a status bar down the left edge ---------- */
body .stats-grid{ gap:14px; margin-bottom:26px; }
@media (min-width:1024px){ body .stats-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
body .stat{
  --bar:var(--t-ink-low);
  background:var(--t-stat-bg); background-image:none; border:1px solid var(--t-stat-line); border-left:4px solid var(--bar);
  border-radius:10px; box-shadow:none; padding:16px 18px; color:var(--t-stat-ink); align-items:center;
}
body .stat:has(> .stat-text > .val.signal){ --bar:var(--t-ok); }
body .stat:has(> .stat-text > .val.amber){ --bar:var(--t-warn); }
body .stat:has(> .stat-text > .val.danger){ --bar:var(--t-bad); }
body .stat .lbl{ text-transform:none; letter-spacing:0; font-size:13px; font-weight:500; color:var(--t-stat-label); margin-bottom:4px; }
body .stat .val{ font-family:var(--t-num-font); font-variant-numeric:lining-nums tabular-nums; font-size:30px; line-height:1.1; font-weight:700; color:var(--t-stat-ink); letter-spacing:-0.01em; }
body .stat .val.signal{ color:var(--t-ok); }
body .stat .val.amber{ color:var(--t-warn); }
body .stat .val.danger{ color:var(--t-bad); }
body .stat-clickable:hover{ transform:none; box-shadow:none; border-color:var(--bar); }
body .stat .stat-icon{ width:38px; height:38px; border-radius:10px; box-shadow:none; background:var(--t-icon-bg); color:var(--bar); }
body .stat .stat-icon svg{ width:19px; height:19px; }
body .stat-bar{ background:var(--t-line); }
body #serverHealthGrid .stat .val{ font-size:21px; }
@media (max-width:640px){
  body .stat{ padding:11px 12px; border-left-width:3px; }
  body .stat .val{ font-size:20px; }
  body .stat .lbl{ font-size:11.5px; }
  body .stat .stat-icon{ width:30px; height:30px; border-radius:8px; }
  body .stat .stat-icon svg{ width:15px; height:15px; }
}

/* ---------- buttons ---------- */
body .btn{ border-radius:8px; font-weight:600; }
body .btn-primary{ background:var(--t-primary); color:var(--t-on-primary); }
body .btn-payment{ background:var(--t-secondary); color:var(--t-on-secondary); }
body .btn-ghost{ background:var(--t-surface); border:1px solid var(--t-line); color:var(--t-ink); }
body .btn-danger{ background:transparent; color:var(--t-bad); border:1px solid var(--t-bad-line); }

/* ---------- badges ---------- */
body .badge{ font-family:inherit; font-weight:600; font-size:11.5px; }
body .badge.username{ background:var(--t-name-bg); color:var(--t-name-ink); border-color:var(--t-name-bg); }
body .badge.active, body .badge.paid, body .badge.online, body .badge.expiry{ color:var(--t-ok); border-color:var(--t-ok-line); background:var(--t-ok-bg); }
body .badge.suspended, body .badge.overdue, body .badge.inactive, body .badge.offline{ color:var(--t-bad); border-color:var(--t-bad-line); background:var(--t-bad-bg); }
body .badge.expired, body .badge.unpaid, body .badge.online-expired{ color:var(--t-warn); border-color:var(--t-warn-line); background:var(--t-warn-bg); }
body .badge.plan{ color:var(--t-info); border-color:var(--t-info-line); background:var(--t-info-bg); }
body .badge.unknown{ color:var(--t-ink-mid); border-color:var(--t-line); background:var(--t-surface-2); }
body .badge.money{ background:var(--t-warn-bg); color:var(--t-warn); border-color:var(--t-warn-line); }

/* ---------- tables and lists ---------- */
body table{ background:var(--t-surface); border-color:var(--t-line); backdrop-filter:none; -webkit-backdrop-filter:none; }
body thead th{ text-transform:none; letter-spacing:0; font-size:12.5px; font-weight:600; color:var(--t-ink-mid); background:var(--t-surface-2); }
body table.dataTable thead th{ color:var(--t-ink-mid); }
body tbody tr:hover{ background:var(--t-row-hover); }
/* two-tone rows + highlight under the mouse, in every list */
body table.dataTable tbody tr.odd > td,
body #customersTable tbody tr.odd > td,
body #franchisesTable tbody tr.odd > td,
body #expTable tbody tr:nth-child(odd) > td{ background:var(--t-row-odd); }
body table.dataTable tbody tr.even > td,
body #customersTable tbody tr.even > td,
body #franchisesTable tbody tr.even > td,
body #expTable tbody tr:nth-child(even) > td{ background:var(--t-row-even); }
body table.dataTable tbody tr:hover > td,
body #customersTable tbody tr:hover > td,
body #franchisesTable tbody tr:hover > td,
body #expTable tbody tr:hover > td{ background:var(--t-row-hover); }
body table.dataTable tbody tr:hover .btn-ghost,
body #customersTable tbody tr:hover .btn-ghost,
body #franchisesTable tbody tr:hover .btn-ghost,
body #expTable tbody tr:hover .btn-ghost{ border-color:var(--t-ink-low); }
body #sstpUsersTable tbody tr.sstp-user-selected > td{ background:var(--t-info-bg) !important; box-shadow:inset 3px 0 0 var(--t-primary) !important; }
/* list toolbars: page-size picker, search box, pager */
body .dataTables_wrapper{ color:var(--t-ink); }
body .dataTables_wrapper .dataTables_length select,
body #expSection .exp-len select{ background:var(--t-surface); color:var(--t-ink); border-color:var(--t-line); }
body .dataTables_wrapper .dataTables_filter label,
body #expSection .exp-search{ border-color:var(--t-line); }
body .dataTables_wrapper .dataTables_filter input,
body #expSection .exp-search input{ background:var(--t-search-bg); color:var(--t-search-ink); }
body .dataTables_wrapper .dataTables_filter label::after,
body #expSection .exp-search::after{ background-color:var(--t-primary); }
body .dt-buttons .dt-button{ background:var(--t-surface) !important; color:var(--t-ink) !important; border-color:var(--t-line) !important; }
body .dt-buttons .dt-button:hover{ background:var(--t-surface-2) !important; }
body .dt-button-collection{ background:var(--t-popup-bg) !important; }
body .dataTables_wrapper .dataTables_paginate .paginate_button{ background:var(--t-surface) !important; color:var(--t-ink-mid) !important; }
body .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body #expSection .exp-pager button.current{ background:var(--t-primary) !important; border-color:var(--t-primary) !important; color:var(--t-on-primary) !important; }
body #expSection .exp-pager button{ color:var(--t-ink); }
body #expSection h2{ font-size:19px; letter-spacing:-0.01em; }

/* ---------- popups, forms, messages ---------- */
body .modal, body .card{ background:var(--t-surface); border-color:var(--t-line); backdrop-filter:none; -webkit-backdrop-filter:none; }
body .modal{ box-shadow:0 24px 60px rgba(0,0,0,0.28); }
/* the profile popup borrowed by the dashboard (customers.html in "embed" mode) */
html.nb-embed body .modal{ background:var(--t-surface); }
body #settingsBackdrop > div{ background:var(--t-surface) !important; border-color:var(--t-line) !important; }
body .profile-menu, body .combo-list{ background:var(--t-popup-bg); border-color:var(--t-line); backdrop-filter:none; -webkit-backdrop-filter:none; }
body .field input, body .field select, body .field textarea{ background:var(--t-input-bg); color:var(--t-ink); border-color:var(--t-line); }
body .field input:focus, body .field select:focus, body .field textarea:focus{ border-color:var(--t-primary); box-shadow:0 0 0 3px var(--t-focus); }
body .field input[type="date"]{ color-scheme:var(--t-scheme); }
body select option{ background:#ffffff; color:#1a1f36; }
body .alert.error{ background:var(--t-bad-bg); border-color:var(--t-bad-line); color:var(--t-bad); }
body .alert.success{ background:var(--t-ok-bg); border-color:var(--t-ok-line); color:var(--t-ok); }
body .alert.info{ background:var(--t-info-bg); border-color:var(--t-info-line); color:var(--t-info); }
body .toast.success{ background:var(--t-toast-ok-bg); border-color:var(--t-ok-line); color:var(--t-ok); }
body .toast.error{ background:var(--t-toast-bad-bg); border-color:var(--t-bad-line); color:var(--t-bad); }
body code{ color:var(--t-ink); }
::-webkit-scrollbar-thumb{ background:var(--t-scroll); }
::-webkit-scrollbar-thumb:hover{ background:var(--t-scroll-hover); }
@supports not selector(::-webkit-scrollbar){ *{ scrollbar-color:var(--t-scroll) transparent; } }

/* ---------- login page (index.html) ---------- */
:root{
  --page-bg:var(--t-login-bg); --sheet:var(--t-login-card); --input-bg:var(--t-login-input); --input-border:var(--t-login-line);
  --text-dark:var(--t-login-ink); --text-faint:var(--t-login-low); --white:var(--t-login-ink);
  --sans:var(--t-font); --radius-lg:18px;
}
body:has(> .shell){ --text-mid:var(--t-login-mid); }
body .shell{ border:1px solid var(--t-login-line); box-shadow:var(--t-login-shadow); }
body .hero{ background:var(--t-login-card); border-bottom:none; }
body .hero h1{ color:var(--t-login-ink); }
body .brand-title{ color:var(--t-login-ink); font-size:24px; letter-spacing:-0.02em; }
body .role-tag{ color:var(--t-login-accent); text-transform:none; letter-spacing:0; font-size:13px; font-weight:500; }
body .mark.mark-fallback{ background:var(--t-primary); box-shadow:none; }
body .sheet{ border-radius:0; margin-top:-30px; }
body .tabs{ border-radius:10px; padding:4px; }
body .tab{ border-radius:7px; padding:10px 0; }
body .tab.active{ background:var(--t-primary); color:var(--t-on-primary); box-shadow:none; }
body .shell .field input{ border-radius:9px; background:var(--t-login-input); color:var(--t-login-ink); border-color:var(--t-login-line); }
body .shell .field input:focus{ border-color:var(--t-primary); box-shadow:0 0 0 3px var(--t-focus); background:var(--t-login-input); }
body .remember input{ accent-color:var(--t-primary); }
body .btn-main{ background:var(--t-primary); color:var(--t-on-primary); border-radius:9px; box-shadow:none; }
body .row-between a, body .eye-btn{ color:var(--t-login-mid); }
body .switch-row a{ color:var(--t-login-link); }
body .footer-note{ color:var(--t-login-low); }
body .footer-note b{ color:var(--t-login-mid); }
body .modal-card{ background:var(--t-login-modal); border-color:var(--t-line); }


/* ---------- this theme's own rules: raised and pressed shapes ---------- */
body{ background:var(--t-page); }

/* header and menu: same grey as the page, lifted by a shadow */
/* (don't set position here: the header is sticky, and style.css offsets it by the phone's
   status-bar height with top:; a different position would push it down over the content) */
body header.topnav{ box-shadow:0 8px 18px -6px var(--nb-lo); border-bottom:none; }
body .navToggle, body .profile-btn, body .who .btn-sync, body .wallet-tag, body .network-tag{
  background:var(--t-page); border:none; box-shadow:var(--nb-raise-xs); }
body .navToggle:active, body .profile-btn:active, body .who .btn-sync:active{ box-shadow:var(--nb-press-sm); }
body .navlinks{ border:none; box-shadow:var(--nb-raise); }
@media (min-width:1024px){
  body:not(.nb-topnav) .navlinks{ box-shadow:10px 0 18px -8px var(--nb-lo); }
  body:not(.nb-topnav) .navlinks a{ border-radius:14px; padding:10px 14px; font-weight:600; margin:3px 2px; }
  body:not(.nb-topnav) .navlinks a:hover{ box-shadow:var(--nb-raise-xs); color:var(--t-ink); }
  body:not(.nb-topnav) .navlinks a.active{ background:var(--t-page); color:var(--t-primary); box-shadow:var(--nb-press-sm); }
}
body .navlinks a.active{ box-shadow:var(--nb-press-sm); background:var(--t-page); color:var(--t-primary); }

/* cards, stat tiles, tables, popups: raised */
body .card, body .stat, body table, body .modal, body .profile-menu, body .combo-list{
  background:var(--t-page); border:none; border-radius:18px; box-shadow:var(--nb-raise-sm); }
body .stat{ border-left:none; padding:12px 16px; border-radius:16px; box-shadow:var(--nb-raise-sm); gap:10px; }
body .stat .lbl{ font-size:12.5px; margin-bottom:2px; }
body .stat .val{ font-size:22px; line-height:1.1; }
body #serverHealthGrid .stat .val{ font-size:17px; }
body .stats-grid{ gap:16px; }
body .modal .card, body .card .card, body .modal table, body .card table{ box-shadow:var(--nb-press-sm); border:none; }
body .stat .stat-icon{ background:var(--t-page); box-shadow:var(--nb-press-xs); border-radius:50%; width:34px; height:34px; color:var(--t-primary); }
body .stat .stat-icon svg{ width:17px; height:17px; }
body .stat .stat-icon.ic-green{ color:#23966B; } body .stat .stat-icon.ic-orange{ color:#C98318; } body .stat .stat-icon.ic-red{ color:#D84A5F; }
body .stat .stat-icon.ic-purple{ color:#8A63D2; } body .stat .stat-icon.ic-pink{ color:#D0558F; } body .stat .stat-icon.ic-gray{ color:#7C86A2; }
body .stat .stat-icon.ic-blue, body .stat .stat-icon.ic-violet{ color:#4F6BED; }
body .stat-clickable:hover{ box-shadow:var(--nb-raise-xs); }
body th{ background:transparent; }

/* buttons: raised, pressing sinks them. The main button is the one coloured shape. */
body .btn{ border:none; border-radius:14px; font-weight:700; background:var(--t-page); color:var(--t-ink); box-shadow:var(--nb-raise-sm); }
body .btn:hover{ filter:none; box-shadow:var(--nb-raise-xs); }
body .btn:active{ box-shadow:var(--nb-press-sm); transform:none; }
body .btn-primary{ background:linear-gradient(145deg,#6781F2,#4560E0); color:#fff;
  box-shadow:6px 6px 14px rgba(79,107,237,0.38), -5px -5px 12px var(--nb-hi); }
body .btn-primary:hover{ box-shadow:4px 4px 10px rgba(79,107,237,0.38), -3px -3px 8px var(--nb-hi); }
body .btn-primary:active{ box-shadow:inset 3px 3px 8px rgba(30,50,160,0.45), inset -2px -2px 6px rgba(120,140,255,0.4); }
body .btn-ghost{ background:var(--t-page); color:var(--t-ink); border:none; }
body .btn-danger{ background:var(--t-page); color:var(--t-bad); border:none; }
body .btn-payment{ background:var(--t-page); color:var(--t-primary); }
body .modal .btn-ghost, body .card .btn-ghost, body table .btn-ghost{ box-shadow:var(--nb-raise-xs); border:none; }

/* badges: tiny raised pills, the colour is in the text */
body .badge{ border:none; background:var(--t-page); box-shadow:var(--nb-raise-xs); padding:4px 12px; }
body .badge.username{ color:var(--t-primary); }

/* fields: pressed in */
body .field input, body .field select, body .field textarea, body input[type="text"], body input[type="password"], body input[type="search"], body input[type="number"], body select, body textarea{
  background:var(--t-page); border:none; border-radius:14px; box-shadow:var(--nb-press-sm); color:var(--t-ink); }
body .field input:focus, body .field select:focus, body .field textarea:focus, body input:focus, body select:focus, body textarea:focus{
  box-shadow:var(--nb-press-sm), 0 0 0 2px var(--t-primary); border:none; }
body .alert, body .toast{ border:none; box-shadow:var(--nb-press-sm); border-radius:14px; }

/* the Install App page's own pieces */
body .app-icon{ box-shadow:var(--nb-raise-sm); }
body .app-chip{ border:none; background:var(--t-page); box-shadow:var(--nb-raise-xs); }
body .app-step{ border:none; box-shadow:var(--nb-press-sm); border-radius:18px; }
body .app-step .n{ box-shadow:var(--nb-raise-xs); background:var(--t-page); color:var(--t-primary); }
body .app-dl{ border-top:none; }
body .app-qr .box{ background:#fff; border:none; box-shadow:var(--nb-raise-sm); }
body .dl-pill{ box-shadow:var(--nb-raise-sm); }

/* ---- login: the whole card is one raised shape; fields and tabs are pressed in ---- */
body .shell{ border:none; border-radius:32px; max-width:420px; background:var(--t-login-bg); box-shadow:16px 16px 36px var(--nb-lo), -16px -16px 36px var(--nb-hi); }
body .hero{ background:transparent; padding-bottom:44px; }
body .mark{ width:84px; height:84px; border-radius:50%; background:var(--t-login-bg); padding:14px; box-shadow:8px 8px 18px var(--nb-lo), -8px -8px 18px var(--nb-hi); }
body .mark img{ border-radius:12px; }
body .brand-title{ font-weight:800; font-size:28px; }
body .sheet{ background:transparent; margin-top:-34px; padding:18px 30px 30px; }
body .tabs{ border:none; background:var(--t-login-bg); padding:6px; border-radius:16px; box-shadow:var(--nb-press-sm); }
body .tab{ border-radius:12px; font-weight:700; }
body .tab.active{ background:var(--t-login-bg); color:var(--t-primary); box-shadow:var(--nb-raise-xs); }
body .shell .field label{ color:var(--t-primary); font-weight:700; padding-left:4px; }
body .shell .field input{ border:none; border-radius:16px; padding-top:14px; padding-bottom:14px; box-shadow:var(--nb-press-sm); }
body .shell .field input:focus{ box-shadow:var(--nb-press-sm), 0 0 0 2px var(--t-primary); }
body .btn-main{ background:linear-gradient(145deg,#6781F2,#4560E0); color:#fff; font-weight:800; font-size:16px; letter-spacing:.02em; border-radius:16px;
  box-shadow:7px 7px 16px rgba(79,107,237,0.38), -6px -6px 14px var(--nb-hi); }
body .btn-main:hover{ filter:none; }
body .btn-main:active{ box-shadow:inset 4px 4px 9px rgba(30,50,160,0.45), inset -3px -3px 8px rgba(120,140,255,0.4); transform:none; }
body .nb-bubbles{ display:none; }
@media (max-width:640px){
  body .stat{ padding:10px 12px; border-radius:14px; }
  body .stat .val{ font-size:18px; }
  body .stat .lbl{ font-size:11.5px; }
  body .stat .stat-icon{ width:30px; height:30px; }
}