/* Shared styles for account, pricing and premium pages. Tokens match the dashboard. */
:root {
  --bg: #eef1f4; --surface: #fff; --surface-2: #f6f8fa; --ink: #12161b; --ink-2: #4a525c; --muted: #7a828d;
  --line: rgba(18, 22, 27, 0.09); --on: #2a78d6; --off: #8d949e; --plate-blue: #103a8c; --danger: #c0392b;
  --font: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-cond: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif; --radius: 10px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark; --bg: #0e1114; --surface: #171a1e; --surface-2: #1d2126; --ink: #eef1f4; --ink-2: #b9c0c8;
    --muted: #868e98; --line: rgba(255, 255, 255, 0.08); --on: #3987e5; --off: #6b727c; --danger: #e8604f;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark; --bg: #0e1114; --surface: #171a1e; --surface-2: #1d2126; --ink: #eef1f4; --ink-2: #b9c0c8;
  --muted: #868e98; --line: rgba(255, 255, 255, 0.08); --on: #3987e5; --off: #6b727c; --danger: #e8604f;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 var(--font); }
a { color: var(--on); }
.bar { background: var(--surface); border-bottom: 1px solid var(--line); }
.bar-inner { max-width: 960px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 600 18px var(--font-cond); }
.plate { display: inline-flex; border: 2px solid var(--ink); border-radius: 4px; overflow: hidden; font: 700 13px var(--font-cond); background: #fff; color: #111; }
.plate .eu { background: var(--plate-blue); color: #fff; padding: 1px 4px; }
.plate span:last-child { padding: 1px 6px; }
.bar nav { margin-left: auto; display: flex; gap: 14px; align-items: center; font-weight: 500; }
.bar nav a { color: var(--ink-2); text-decoration: none; }
.bar nav a.lang { font-weight: 600; letter-spacing: .04em; }
.bar nav a.pro, .button { color: #fff; background: var(--on); padding: 7px 14px; border-radius: 999px; text-decoration: none; border: 0; font: 600 15px var(--font); cursor: pointer; display: inline-block; }
main button:not(.button) { font: 600 15px var(--font); color: #fff; background: var(--on); border: 0; padding: 8px 16px; border-radius: 999px; cursor: pointer; }
main form label { display: inline-block; min-width: 110px; }
main hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }
.button.secondary { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.button.danger { background: var(--danger); }
main { max-width: 960px; margin: 0 auto; padding: 24px 16px 64px; }
h1, h2 { font-family: var(--font-cond); font-weight: 700; line-height: 1.1; }
h1 { font-size: 36px; margin: 8px 0 16px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin: 16px 0; }
.muted { color: var(--muted); }
.messages { list-style: none; padding: 0; }
.messages li { background: var(--surface); border-left: 4px solid var(--on); padding: 10px 14px; margin: 8px 0; border-radius: 6px; }
.messages li.error { border-color: var(--danger); }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line); }
td.num, th.num { text-align: right; }
input[type=text], input[type=email], input[type=password], input[type=search] {
  font: inherit; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); width: 100%; max-width: 420px;
}
form p { margin: 10px 0; }
code { background: var(--surface-2); padding: 2px 6px; border-radius: 4px; overflow-wrap: anywhere; }
.price { font: 700 44px var(--font-cond); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
svg.spark { width: 100%; max-width: 320px; height: 64px; }
svg.spark path { fill: none; stroke-width: 2; }
.foot { max-width: 960px; margin: 0 auto; padding: 0 16px 32px; color: var(--muted); font-size: 14px; }