/* ------------------------------------------------------------------
   neverdies.me — dashboard

   Lifted out of an inline <style> so the Content-Security-Policy can
   say style-src 'self' with no 'unsafe-inline'. Nothing here may move
   back inline, and no style="..." attributes may be added to the HTML
   — CSP blocks those too. That is why .util-gap exists instead of the
   style="margin-top:18px" that used to sit on the refresh row.
------------------------------------------------------------------ */

:root{
  --accent:#9382F6;
  --base:#1e1e2e;
  --panel:#232336;
  --ink:#f2f1f8;
  --ink-dim:#b9b6cc;
  --ink-mute:rgba(185,182,204,.66);
  --hair:rgba(242,241,248,.22);
  --hair-soft:rgba(242,241,248,.12);
  --danger:#f0787f;
  --ok:#7fd6a4;
  /* Amber, for "this still works but not for much longer". Purple is
     the brand and green is fine, so neither can carry urgency. */
  --warn:#f5c97b;
  --pad:clamp(20px, 5vw, 64px);
}

*,*::before,*::after{box-sizing:border-box}
/* must beat .actions{display:grid} and friends */
[hidden]{display:none !important}

html{overflow-x:hidden; -webkit-text-size-adjust:100%}

body{
  margin:0;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
  background:var(--base);
  color:var(--ink);
  font-family:"Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size:16px;
  line-height:1.5;
  padding:
    env(safe-area-inset-top)
    env(safe-area-inset-right)
    env(safe-area-inset-bottom)
    env(safe-area-inset-left);
}

/* ---------- background ---------- */

.bg{
  position:fixed;
  inset:0;
  z-index:-2;
  background-color:var(--base);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  filter:blur(3px);
  transform:scale(1.05);
}
.bg video{width:100%; height:100%; object-fit:cover; display:block}
.bg video.is-off{display:none}

.scrim{
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(180deg, rgba(30,30,46,.90) 0%, rgba(30,30,46,.80) 40%, rgba(30,30,46,.92) 100%),
    radial-gradient(120% 90% at 50% 40%, rgba(30,30,46,.35) 0%, rgba(30,30,46,.88) 70%, rgba(30,30,46,.97) 100%);
}

/* ---------- chrome ---------- */

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:calc(var(--pad) * .5) var(--pad);
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--ink);
  text-decoration:none;
  font-weight:600;
  letter-spacing:-.01em;
}
.brand img{width:28px; height:28px; display:block}

/* mirrors .dash-link on the landing page, arrow pointing the other way */
.back-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:40px;
  padding:0 16px;
  border:1px solid var(--hair);
  border-radius:4px;
  background:rgba(20,20,32,.55);
  color:var(--ink);
  font-size:.875rem;
  font-weight:600;
  text-decoration:none;
  white-space:nowrap;
  transition:background-color .15s ease, border-color .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.back-link:hover{border-color:var(--accent); background:rgba(147,130,246,.14)}
.back-link svg{flex:none; color:var(--accent)}

main{
  flex:1;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:clamp(16px, 4vh, 48px) var(--pad) 48px;
}
.shell{width:100%; max-width:560px}

h1{
  font-size:clamp(1.75rem, 4vw, 2.25rem);
  font-weight:700;
  letter-spacing:-.025em;
  line-height:1.1;
  margin:0 0 8px;
}
.sub{
  margin:0 0 26px;
  color:var(--ink-dim);
  font-size:.9375rem;
}

/* ---------- panel ---------- */

.panel{
  background:rgba(35,35,54,.86);
  border:1px solid var(--hair-soft);
  border-radius:4px;
  padding:24px;
}
.panel + .panel{margin-top:16px}
.panel h2{
  margin:0 0 4px;
  font-size:.9375rem;
  font-weight:600;
  letter-spacing:-.01em;
}
.panel .hint{
  margin:0 0 18px;
  font-size:.8125rem;
  color:var(--ink-mute);
}

/* replaces an inline style="margin-top:18px", which CSP now blocks */
.util-gap{margin-top:18px}

/* ---------- form ---------- */

label{
  display:block;
  margin-bottom:7px;
  font-size:.8125rem;
  font-weight:500;
  color:var(--ink-dim);
}

/* class rather than input[type=...] — the key field is type="password"
   now, and the selector should not have to track that */
.field{
  width:100%;
  min-height:46px;
  padding:0 13px;
  border:1px solid var(--hair);
  border-radius:4px;
  background:rgba(20,20,32,.75);
  color:var(--ink);
  font-family:"Martian Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.875rem;
  letter-spacing:-.02em;
  transition:border-color .15s ease;
}
.field::placeholder{color:rgba(185,182,204,.4)}
.field:focus{outline:none; border-color:var(--accent)}
.field:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* key input + its reveal toggle */
.key-field{position:relative; margin-bottom:16px}
.key-field .field{padding-right:72px}
.reveal{
  -webkit-appearance:none;
  appearance:none;
  position:absolute;
  top:50%;
  right:5px;
  transform:translateY(-50%);
  min-width:60px;
  min-height:36px;
  padding:0 10px;
  border:1px solid transparent;
  border-radius:3px;
  background:none;
  font:inherit;
  font-size:.75rem;
  font-weight:600;
  color:var(--ink-mute);
  cursor:pointer;
  transition:color .15s ease, background-color .15s ease;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.reveal:hover{color:var(--ink); background:rgba(242,241,248,.07)}
.reveal:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* ---------- buttons ---------- */

.btn{
  -webkit-appearance:none;
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 20px;
  border-radius:4px;
  border:1px solid transparent;
  background:none;
  font:inherit;
  font-weight:600;
  font-size:.9375rem;
  color:var(--ink);
  text-decoration:none;
  cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.btn--primary{background:var(--accent); color:#16121f}
.btn--primary:hover{background:#a596f8}
.btn--ghost{border-color:var(--hair)}
.btn--ghost:hover{border-color:rgba(242,241,248,.5); background:rgba(242,241,248,.06)}
.btn--danger{border-color:rgba(240,120,127,.45); color:var(--danger)}
.btn--danger:hover{background:rgba(240,120,127,.12); border-color:rgba(240,120,127,.75)}
.btn--solid-danger{background:var(--danger); color:#2a1116; border-color:transparent}
.btn--solid-danger:hover{background:#f38d93}
.btn--wide{width:100%}
.btn--sm{min-height:38px; padding:0 15px; font-size:.8125rem}
.btn[disabled]{opacity:.5; cursor:default; pointer-events:none}

.btn:focus-visible,
.back-link:focus-visible,
.foot a:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

/* ---------- license row ---------- */

.key-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  padding-bottom:18px;
  margin-bottom:18px;
  border-bottom:1px solid var(--hair-soft);
}
.key-label{
  font-size:.6875rem;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:var(--ink-mute);
  margin:0 0 4px;
}
.key-value{
  margin:0;
  font-family:"Martian Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.8125rem;
  letter-spacing:-.02em;
  color:var(--ink);
  word-break:break-all;
}

/* even columns, so every action button is the same width */
.actions{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}
.actions--one{grid-template-columns:minmax(0, 1fr)}
.actions .btn{width:100%}

/* ---------- tabs ---------- */

.tabs{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:6px;
  margin-bottom:16px;
  padding:5px;
  border:1px solid var(--hair-soft);
  border-radius:4px;
  background:rgba(35,35,54,.72);
}
.tab{
  -webkit-appearance:none;
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  width:100%;
  min-height:40px;
  padding:0 12px;
  border:1px solid transparent;
  border-radius:3px;
  background:none;
  font:inherit;
  font-size:.875rem;
  font-weight:600;
  color:var(--ink-mute);
  cursor:pointer;
  transition:background-color .15s ease, color .15s ease;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.tab:hover{color:var(--ink); background:rgba(242,241,248,.06)}
.tab[aria-selected="true"]{
  background:rgba(147,130,246,.18);
  border-color:rgba(147,130,246,.42);
  color:#cfc6ff;
}
.tab:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.tab .count{
  font-family:"Martian Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.625rem;
  opacity:.75;
}

/* ---------- versions ---------- */

.versions{list-style:none; margin:0; padding:0}
.versions li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:13px 0;
  border-bottom:1px solid var(--hair-soft);
}
.versions li:last-child{border-bottom:0; padding-bottom:0}
.versions li:first-child{padding-top:0}
.v-name{
  margin:0;
  font-family:"Martian Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.8125rem;
  letter-spacing:-.02em;
}
.v-meta{
  margin:3px 0 0;
  font-size:.75rem;
  color:var(--ink-mute);
}
.v-tag{
  display:inline-block;
  margin-left:8px;
  padding:1px 7px;
  border:1px solid rgba(147,130,246,.42);
  border-radius:4px;
  background:rgba(147,130,246,.10);
  color:var(--accent);
  font-family:"Archivo", sans-serif;
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:0;
}
.latest{
  display:inline-block;
  margin-left:8px;
  font-size:.6875rem;
  font-weight:600;
  color:var(--accent);
  letter-spacing:0;
  font-family:"Archivo", sans-serif;
}

/* ---------- messages ---------- */

.msg{
  margin:0 0 18px;
  padding:11px 14px;
  border:1px solid var(--hair-soft);
  border-left-width:2px;
  border-radius:4px;
  font-size:.8125rem;
  line-height:1.5;
  background:rgba(20,20,32,.55);
  color:var(--ink-dim);
}
.msg--err{border-left-color:var(--danger); color:#f7b6ba}
.msg--ok{border-left-color:var(--ok); color:#a8e3c3}
.msg--busy{border-left-color:var(--accent)}

.empty{
  margin:0;
  font-size:.8125rem;
  color:var(--ink-mute);
}

/* ---------- footer ---------- */

.foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding:0 var(--pad) calc(var(--pad) * .62);
  font-size:.8125rem;
  color:var(--ink-mute);
}
.foot p{margin:0}
.legal-links{display:flex; align-items:center; gap:4px; flex-wrap:wrap}
.foot a{
  display:inline-flex;
  align-items:center;
  padding:7px 10px;
  border-radius:4px;
  color:var(--ink-mute);
  text-decoration:none;
  transition:color .15s ease, background-color .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.foot a:hover{color:var(--ink); background:rgba(242,241,248,.07)}

/* ==================================================================
   Account system
   ================================================================== */

/* ---------- forms ---------- */

/* Email and other prose fields read as prose. The monospace default
   on .field exists for licence keys, where character-by-character
   comparison is the whole point; an email address in monospace just
   looks broken. */
.field--text{
  font-family:"Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size:.9375rem;
  letter-spacing:0;
}

.util-gap-sm{margin-top:14px}

.hint--tight{margin:7px 0 0; font-size:.75rem}
.hint--foot{margin:12px 0 0; font-size:.75rem; text-align:center}

/* A text button that is genuinely a button. Using an <a href="#">
   would put a junk entry in the history and move focus to the top of
   the page on every click. */
.linkrow{display:flex; justify-content:center; margin-top:16px}
.linkbtn{
  -webkit-appearance:none;
  appearance:none;
  border:0;
  background:none;
  padding:8px 10px;
  border-radius:4px;
  font:inherit;
  font-size:.8125rem;
  font-weight:500;
  color:var(--ink-dim);
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:rgba(185,182,204,.4);
  transition:color .15s ease, background-color .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.linkbtn:hover{color:var(--ink); background:rgba(242,241,248,.06)}
.linkbtn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin:20px 0 16px;
  color:var(--ink-mute);
  font-size:.75rem;
}
.divider::before,
.divider::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--hair-soft);
}

.section-split{
  height:1px;
  background:var(--hair-soft);
  margin:26px 0 22px;
}

/* ---------- four-up tabs ---------- */

.tabs--four{grid-template-columns:repeat(4, minmax(0, 1fr))}

/* ---------- licence cards ---------- */

.lic-list{list-style:none; margin:0; padding:0}
.lic{
  padding:15px 0;
  border-bottom:1px solid var(--hair-soft);
}
.lic:first-child{padding-top:0}
.lic:last-child{border-bottom:0; padding-bottom:0}

.lic-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.lic-code{
  margin:0;
  font-family:"Martian Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.8125rem;
  letter-spacing:-.02em;
  color:var(--ink);
}
.lic-products{
  margin:5px 0 0;
  font-size:.8125rem;
  color:var(--ink-dim);
}
.lic-meta{
  margin:4px 0 0;
  font-size:.75rem;
  color:var(--ink-mute);
}
.lic-actions{margin-top:12px}
.lic-actions .btn{width:100%}

/* ---------- time remaining ----------

   ONE class, used by both the licences tab and the downloads tab, so
   the two cannot drift apart the next time either is touched. It was
   grey 12px text buried in a meta line; it is still 12px, because it
   sits under a product name and a panel there would shout, but it now
   carries colour and weight of its own.

   Colour is doing the work here, not size. Amber and red are used
   nowhere else on this page, so the eye finds them without the text
   having to be big.                                                  */

.exp{
  margin:5px 0 0;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.01em;
  color:var(--ink-mute);
}
.exp--ok{color:var(--ok)}
.exp--warn{color:var(--warn)}
/* Under two days gets the same red as already-expired. At that point
   it is closer to gone than to fine. */
.exp--soon,
.exp--dead{color:var(--danger)}
.exp--none{color:var(--ink-dim)}
.exp--unknown{color:var(--ink-mute)}

.badge{
  display:inline-flex;
  align-items:center;
  flex:none;
  padding:3px 9px;
  border-radius:4px;
  border:1px solid transparent;
  font-family:"Archivo", sans-serif;
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.02em;
  white-space:nowrap;
}
.badge--ok{border-color:rgba(127,214,164,.42); background:rgba(127,214,164,.12); color:var(--ok)}
.badge--warn{border-color:rgba(147,130,246,.45); background:rgba(147,130,246,.12); color:#cfc6ff}
.badge--dead{border-color:rgba(240,120,127,.42); background:rgba(240,120,127,.10); color:var(--danger)}
.badge--stale{border-color:var(--hair); background:rgba(242,241,248,.05); color:var(--ink-mute)}

/* ---------- build groups ---------- */

.group + .group{margin-top:22px}
.group-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  padding-bottom:9px;
  margin-bottom:4px;
  border-bottom:1px solid var(--hair-soft);
}
.group-name{
  margin:0;
  font-size:.8125rem;
  font-weight:600;
  color:var(--ink);
}
.group-code{
  margin:0;
  font-family:"Martian Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.6875rem;
  color:var(--ink-mute);
  letter-spacing:-.02em;
}

/* An empty group is usually something the customer can act on, so it
   gets the button that acts on it. */
.group-fix{margin-top:12px}
.group-fix .btn{width:100%}

/* ---------- support notes ---------- */

.notes{
  margin:0;
  padding:0 0 0 18px;
  font-size:.8125rem;
  color:var(--ink-dim);
}
.notes li{margin:0 0 9px}
.notes li:last-child{margin-bottom:0}
.notes strong{color:var(--ink); font-weight:600}

@media (max-width:639px){
  .topbar{padding:14px var(--pad)}
  .back-link{min-height:44px}
  .panel{padding:20px 18px}
  .actions .btn{min-height:48px}
  .versions li{flex-direction:column; align-items:flex-start; gap:10px}
  .versions li .btn{width:100%}
  .foot{
    flex-direction:column-reverse;
    align-items:center;
    gap:6px;
    font-size:.75rem;
    padding-bottom:max(calc(var(--pad) * .62), env(safe-area-inset-bottom));
  }
  .legal-links{justify-content:center}
  .foot a{min-height:44px}

  /* Four tabs do not fit across a phone without the labels going to
     four points and wrapping. Two by two instead. */
  .tabs--four{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .lic-top{flex-direction:column; align-items:flex-start; gap:8px}
}