/* Account portal — palette + type lifted from the Electron renderer.html so the
   web surface reads as the same product. */
:root {
  --bg:         #08090C;
  --bg-panel:   #0F1318;
  --bg-card:    #161C24;
  --bg-active:  #11213A;
  --accent:     #4A8EEF;
  --accent-dim: #637ca4;
  --text:       #C8D3E0;
  --text-dim:   #798693;
  --border:     #353e4a;
  --green:      #2E7D4F;
  --amber:      #C9913B;
  --red:        #C24A4A;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  display: flex;
  justify-content: center;
  padding: 48px 20px;
}

.shell { width: 100%; max-width: 560px; }
/* login + signup pages — single column, narrower for focused entry */
.shell-narrow { max-width: 400px; }

/* flash + form-error banners — block-level above the form */
.flash, .form-error {
  border-radius: 4px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 14px;
  border: 1px solid;
}
/* Flashes self-dismiss after 5s (see account.html) — fade + collapse out. */
.flash {
  transition: opacity 0.4s ease, margin 0.4s ease, padding 0.4s ease, max-height 0.4s ease;
  overflow: hidden;
  max-height: 120px;
}
.flash.flash-out {
  opacity: 0;
  max-height: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.flash-info       { color: var(--accent); border-color: var(--accent-dim); background: rgba(74,142,239,0.08); }
.flash-success    { color: var(--green);  border-color: var(--green);     background: rgba(46,125,79,0.08); }
.flash-error,
.form-error       { color: var(--red);    border-color: var(--red);       background: rgba(194,74,74,0.08); }

.link { color: var(--accent); text-decoration: none; }
.link:hover { text-decoration: underline; }

/* button styled as an inline link — for "Sign out" forms etc. */
.link-plain {
  background: none; border: none; padding: 0;
  color: var(--accent); cursor: pointer;
  font: inherit; text-decoration: underline;
}
.link-plain:hover { filter: brightness(1.2); }

/* dim italic — for "not set" placeholders in value cells */
.dim { color: var(--text-dim); font-style: italic; }

/* <details>/<summary> styled as a button that expands a form below.
   Used for inline edits and the delete-confirm. */
.inline-edit { display: inline-block; }
.inline-edit summary {
  /* Mirror .btn.ghost.sm so the closed state reads as a button, not a UA arrow. */
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  padding: 6px 12px;
  border-radius: 3px;
  border: 1px solid var(--accent-dim);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  list-style: none;                      /* Firefox triangle */
  user-select: none;
}
.inline-edit summary::-webkit-details-marker { display: none; }   /* Safari */
.inline-edit[open] summary { background: var(--accent-dim); color: #fff; }

.inline-edit .inline-form {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 260px;
}
.inline-form input {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px;
  padding: 9px 11px;
}
.inline-form input:focus { outline: none; border-color: var(--accent); }

/* Delete-confirm: same details/summary pattern but in red. */
.danger-confirm { border-top: 1px solid #4a2a2a; padding-top: 12px; }
.card.danger .inline-edit summary {
  border-color: var(--red);
  color: var(--red);
}
.card.danger .inline-edit[open] summary { background: var(--red); color: #fff; }

/* Brand */
.brand { text-align: center; margin-bottom: 28px; }
.logo { display: block; margin: 0 auto 14px; }
.brand h1 { font-size: 26px; font-weight: 600; margin: 0; letter-spacing: 0.2px; }
.brand .sub { color: var(--text-dim); font-size: 13px; margin: 6px 0 0; }

/* Cards */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px 22px;
  margin-bottom: 16px;
}
.card h2 {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 16px;
}

/* Rows */
.row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--border);
}
.card h2 + .row { border-top: none; padding-top: 0; }
.label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--text-dim);
  min-width: 130px;
}
.value { color: var(--text); font-size: 14px; flex: 1; }

/* In-place edit: the value and its input occupy the same flex slot, so swapping
   them never shifts the button. Long values wrap instead of pushing it. */
.value-edit { flex: 1; display: flex; align-items: center; gap: 12px; }
.value-edit .value { overflow-wrap: anywhere; }
.value-edit .btn { flex: none; }                 /* button holds its position */
.value-input {
  flex: 1;
  min-width: 0;                                  /* let it shrink, not overflow */
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px;
  padding: 8px 11px;
}
.value-input:focus { outline: none; border-color: var(--accent); }

/* Status pills */
.pill {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 3px;
  border: 1px solid var(--border);
  color: var(--text-dim);
}
.pill-trialing,
.pill-active   { color: var(--green);  border-color: var(--green); }
.pill-past_due { color: var(--amber);  border-color: var(--amber); }
.pill-canceled,
.pill-expired  { color: var(--red);    border-color: var(--red); }

/* Buttons */
.btn {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  padding: 9px 16px;
  border-radius: 3px;
  border: 1px solid var(--accent-dim);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.btn:hover:not(:disabled) { background: var(--accent-dim); color: #fff; }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn.sm { padding: 6px 12px; font-size: 11px; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover:not(:disabled) { background: #5b9bf5; }
.btn.danger-btn { color: var(--red); border-color: var(--red); }
.btn.danger-btn:hover:not(:disabled) { background: var(--red); color: #fff; }

/* Home landing */
.home-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
.home-cta .btn { text-decoration: none; padding: 11px 22px; }

/* Easter egg — the Konami code (↑↑↓↓←→←→ B A) wakes the waveform glyph up.
   Each bar pulses on its own clock, so it reads like a live equalizer. */
.logo.playing rect {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: eq 0.5s ease-in-out infinite;
}
.logo.playing rect:nth-child(1) { animation-duration: 0.42s; animation-delay: 0.00s; }
.logo.playing rect:nth-child(2) { animation-duration: 0.55s; animation-delay: 0.12s; }
.logo.playing rect:nth-child(3) { animation-duration: 0.48s; animation-delay: 0.06s; }
.logo.playing rect:nth-child(4) { animation-duration: 0.52s; animation-delay: 0.18s; }
.logo.playing rect:nth-child(5) { animation-duration: 0.60s; animation-delay: 0.09s; }
.logo.playing rect:nth-child(6) { animation-duration: 0.45s; animation-delay: 0.15s; }
@keyframes eq { 0%, 100% { transform: scaleY(0.4); } 50% { transform: scaleY(1.5); } }

/* Forms */
.actions { display: flex; align-items: center; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.hint { color: var(--text-dim); font-size: 12px; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field input {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px;
  padding: 10px 12px;
}
.field input:focus { outline: none; border-color: var(--accent); }
.stack .btn { align-self: flex-start; }

.card.danger { border-color: #4a2a2a; }

.foot {
  text-align: center;
  color: var(--text-dim);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  margin-top: 24px;
}