/* ===================================================================
   The shared look: the same tokens the app itself is built from.

   The website and the app were two designs for one product - a customer
   signed in on a page that looked nothing like the software it unlocked.
   These are the app's own custom properties, lifted verbatim so the two
   cannot drift into different brands.

   Light and dark both, following the computer and overridable, exactly
   as the app does it. No web fonts: the app embeds its display face and
   the rest is the system stack, so a shop on a slow line never waits on
   a font server to read their own account page.
   =================================================================== */
:root{
  --surface-1:#fcfcfb; --page:#f9f9f7;
  --ink-1:#0b0b0b; --ink-2:#52514e; --ink-3:#898781;
  --grid:#e1e0d9; --axis:#c3c2b7; --border:rgba(11,11,11,.10);
  --s1:#2a78d6; --s2:#1baf7a; --s3:#eda100; --s4:#008300;
  --s5:#4a3aa7; --s6:#e34948; --s7:#e87ba4; --s8:#eb6834;
  --good:#006300;
  --glass:rgba(255,255,255,.62);
  --glass-strong:rgba(255,255,255,.80);
  --glass-brd:rgba(255,255,255,.75);
  --glass-rim:rgba(11,11,11,.09);
  --glass-sh:0 10px 34px -18px rgba(11,11,11,.42);
  --field:rgba(255,255,255,.92); --field-brd:rgba(11,11,11,.22);
  --field-in:inset 0 1px 3px rgba(11,11,11,.13),inset 0 0 0 1px rgba(255,255,255,.55);
  --radius:14px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --surface-1:#1a1a19; --page:#0d0d0d;
    --ink-1:#ffffff; --ink-2:#c3c2b7; --ink-3:#898781;
    --grid:#2c2c2a; --axis:#383835; --border:rgba(255,255,255,.10);
    --s1:#3987e5; --s2:#199e70; --s3:#c98500; --s4:#008300;
    --s5:#9085e9; --s6:#e66767; --s7:#d55181; --s8:#d95926;
    --good:#0ca30c;
    --glass:rgba(38,38,36,.58);
    --glass-strong:rgba(44,44,42,.80);
    --glass-brd:rgba(255,255,255,.14);
    --glass-rim:rgba(0,0,0,.55);
    --glass-sh:0 10px 34px -16px rgba(0,0,0,.75);
    --field:rgba(0,0,0,.30); --field-brd:rgba(255,255,255,.30);
    --field-in:inset 0 1px 3px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.06);
  }
}
:root[data-theme="dark"]{
  --surface-1:#1a1a19; --page:#0d0d0d;
  --ink-1:#ffffff; --ink-2:#c3c2b7; --ink-3:#898781;
  --grid:#2c2c2a; --axis:#383835; --border:rgba(255,255,255,.10);
  --s1:#3987e5; --s2:#199e70; --s3:#c98500; --s4:#008300;
  --s5:#9085e9; --s6:#e66767; --s7:#d55181; --s8:#d95926;
  --good:#0ca30c;
  --glass:rgba(38,38,36,.58);
  --glass-strong:rgba(44,44,42,.80);
  --glass-brd:rgba(255,255,255,.14);
  --glass-rim:rgba(0,0,0,.55);
  --glass-sh:0 10px 34px -16px rgba(0,0,0,.75);
  --field:rgba(0,0,0,.30); --field-brd:rgba(255,255,255,.30);
  --field-in:inset 0 1px 3px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.06);
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--page);color:var(--ink-1);
  font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--s1)}
h1,h2,h3{line-height:1.2;letter-spacing:-.01em}
h1{font-size:26px;margin-bottom:6px}
h2{font-size:20px}
h3{font-size:16px;margin-bottom:10px}
.sub,.muted{color:var(--ink-2);font-size:13px}
.wrap{max-width:1040px;margin:0 auto;padding:28px 18px 60px}

/* the mark, so every page opens the same way */
.brand{display:flex;align-items:center;gap:9px;font-weight:700;letter-spacing:-.02em;font-size:17px}
.brand .dia{color:var(--s3)}
.ey{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);font-weight:600}

/* one card, everywhere */
.card{
  background:var(--glass);border:1px solid var(--glass-brd);
  box-shadow:var(--glass-sh),inset 0 0 0 1px var(--glass-rim);
  border-radius:var(--radius);padding:18px;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.card + .card{margin-top:16px}

/* fields read as a hollow in the card, not another card */
label{display:block;font-size:12px;font-weight:600;color:var(--ink-2);margin-bottom:5px}
input,select,textarea{
  width:100%;padding:11px 12px;font:inherit;color:var(--ink-1);
  background:var(--field);border:1px solid var(--field-brd);
  border-radius:10px;box-shadow:var(--field-in);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--s1);outline-offset:1px}
.field{margin-bottom:12px}

.btn,button.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:11px 16px;font:inherit;font-weight:600;cursor:pointer;
  background:var(--surface-1);color:var(--ink-1);
  border:1px solid var(--border);border-radius:10px;
}
.btn:hover{border-color:var(--ink-3)}
.btn--dark,.btn-dark{background:var(--ink-1);color:var(--page);border-color:var(--ink-1)}
.btn--primary,.btn-lime{background:var(--s1);color:#fff;border-color:var(--s1)}
.btn--danger{background:var(--s6);color:#fff;border-color:var(--s6)}
.btn-block{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}

.grid{display:grid;gap:14px}
.g-2{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.g-3{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.g-4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}

.table{width:100%;border-collapse:collapse;font-size:13px}
.table th{text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);padding:8px 10px;border-bottom:1px solid var(--border)}
.table td{padding:10px;border-bottom:1px solid var(--border)}

.badge,.pill{display:inline-block;padding:2px 9px;border-radius:99px;font-size:11px;font-weight:600;
  background:var(--grid);color:var(--ink-2)}
.badge.ok,.pill.g{background:rgba(27,175,122,.16);color:var(--s2)}
.badge.warn{background:rgba(237,161,0,.18);color:var(--s3)}
.badge.danger,.pill.r{background:rgba(227,73,72,.16);color:var(--s6)}

.notice,.note{padding:11px 13px;border-radius:10px;font-size:13px;
  background:var(--surface-1);border:1px solid var(--border);margin-top:10px}
.notice.ok{border-color:var(--s2);background:rgba(27,175,122,.08)}
.notice.err{border-color:var(--s6);background:rgba(227,73,72,.08)}

.stat{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius);padding:14px}
.stat .k{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.stat .v{font-size:24px;font-weight:700;letter-spacing:-.02em;margin-top:4px}

.hide,.hidden{display:none !important}
.lnk,.link{color:var(--s1);cursor:pointer;text-decoration:underline;background:none;border:0;font:inherit}

/* an empty screen should say what to do, not just be blank */
.empty{text-align:center;padding:34px 18px;color:var(--ink-2)}
.empty .big{font-size:30px;margin-bottom:8px;opacity:.55}

@media (max-width:640px){
  .wrap{padding:18px 14px 48px}
  h1{font-size:22px}
}