:root { --bg:#0f1419; --panel:#1a212b; --accent:#3fb950; --text:#e6edf3;
            --muted:#8b98a5; --border:#2d3744; --user:var(--link,#2563eb); }
* { box-sizing:border-box; }
body { margin:0; min-height:100dvh; display:flex; align-items:center; justify-content:center;
           background:var(--bg); color:var(--text); font-family:system-ui,'Segoe UI',Roboto,sans-serif;
           padding:24px; }
.auth-card { width:100%; max-width:400px; background:var(--panel); border:1px solid var(--border);
                 border-radius:16px; padding:28px 26px; }
.brand { display:block; text-align:center; font-size:19px; font-weight:600; color:var(--text);
             text-decoration:none; margin-bottom:6px; }
.brand small { display:block; color:var(--muted); font-size:12px; font-weight:400; margin-top:3px; }
.auth-card h1 { font-size:18px; margin:20px 0 16px; text-align:center; font-weight:600; }
.auth-card p { color:var(--muted); font-size:13px; line-height:1.5; }
.auth-card a { color:var(--accent); text-decoration:none; }
.auth-card a:hover { text-decoration:underline; }
label { display:block; font-size:12px; color:var(--muted); margin:12px 0 5px; }
input:not([type=checkbox]):not([type=radio]), select {
      width:100%; background:var(--bg); color:var(--text); border:1px solid var(--border);
      border-radius:9px; padding:11px 13px; font-size:15px; font-family:inherit; }
input:focus, select:focus { border-color:var(--accent); }
input:focus-visible, select:focus-visible { outline:2px solid var(--accent,#3fb950); outline-offset:2px; }

/* Checkbox fields. The form is drawn with `as_div`, which puts the <label> BEFORE the
   <input> — right for a text field, but for a checkbox it gives a full-width caption with a
   bare square box underneath it. On the agreement consent the caption is also entirely green,
   because it is made of links: a block of green text with a lone square below it.
   Here the order is reversed, the box moves to the left and the caption returns to the text
   colour, leaving only the links inside it green. */
div:has(> input[type=checkbox]) { display:flex; align-items:flex-start; gap:10px;
      margin:16px 0 4px; }
/* The padding above and below is target area, not leading: the caption toggles the box (it
   has a `for`), and one 13px line is 20px tall. With it the row becomes 32 and „Запомни ме" is
   as easy to hit as the square itself. The box drops by the same 6px to stay on the line. */
div:has(> input[type=checkbox]) > label { order:2; margin:0; padding:7px 0; font-size:13px;
      line-height:1.5; color:var(--text); cursor:pointer; }
/* A box of our own: the native one is a white square on a dark card — the single white patch
   on the screen, right next to the text that has to be read. `accent-color` only tints the
   checked state, so the unchecked one is drawn here. */
div:has(> input[type=checkbox]) > input[type=checkbox] { order:1; flex:none; position:relative; width:20px;
      height:20px; margin:8px 0 0; cursor:pointer; appearance:none; -webkit-appearance:none;
      background:var(--bg); border:1px solid var(--border); border-radius:5px;
      display:grid; place-content:center; }
div:has(> input[type=checkbox]) > input[type=checkbox]:hover { border-color:var(--accent); }
/* The target grows only UP and DOWN. Spread sideways as well, it would lie over the caption —
   and inside that caption sit the links to the agreement, which have to open. It is absolute
   for a second reason too: the box is a grid with the tick inside it, and taken out of the
   flow this layer does not become a second grid item and does not knock the tick off centre. */
div:has(> input[type=checkbox]) > input[type=checkbox]::after { content:""; position:absolute;
      top:50%; left:0; width:100%; height:44px; transform:translateY(-50%); }
/* The tick is two sides of a square rotated 45° — it draws reliably at any size, unlike a
   clip-path polygon, which thins away to nothing at 10px. */
div:has(> input[type=checkbox]) > input[type=checkbox]::before { content:""; width:5px;
      height:9px; margin-top:-2px; border:solid var(--bg); border-width:0 2px 2px 0;
      transform:rotate(45deg) scale(0); transition:transform .12s ease-in-out; }
div:has(> input[type=checkbox]) > input[type=checkbox]:checked { background:var(--accent);
      border-color:var(--accent); }
div:has(> input[type=checkbox]) > input[type=checkbox]:checked::before {
      transform:rotate(45deg) scale(1); }
div:has(> input[type=checkbox]) > input[type=checkbox]:focus-visible { outline:2px solid var(--accent);
      outline-offset:2px; }
@media (prefers-reduced-motion:reduce) {
  div:has(> input[type=checkbox]) > input[type=checkbox]::before { transition:none; }
}
/* a field's help text („Забрави си паролата?") — below the field itself, not above it */
.helptext { display:block; order:3; width:100%; margin:6px 0 0; font-size:12.5px;
      color:var(--muted); }
div:has(> .helptext) { display:flex; flex-wrap:wrap; }
div:has(> .helptext) > label { width:100%; }
button, .button, input[type=submit] {
      width:100%; margin-top:16px; background:var(--accent); color:var(--on-accent,#0d1218); border:none;
      border-radius:9px; padding:11px 14px; font-size:15px; font-weight:600; cursor:pointer; font-family:inherit; }
button:hover, .button:hover { filter:brightness(1.08); }
button[type=submit].secondary, .button.secondary { background:transparent; color:var(--text);
      border:1px solid var(--border); }
hr { border:none; border-top:1px solid var(--border); margin:22px 0 6px; }
/* social provider buttons (Google / Facebook) */
    .socialaccount_providers { list-style:none; padding:0; margin:14px 0 0; display:flex;
      flex-direction:column; gap:10px; }
.socialaccount_providers a, .socialaccount_provider {
      display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
      background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:9px;
      padding:11px 14px; font-size:14px; font-weight:600; text-decoration:none; }
.socialaccount_providers a:hover { border-color:var(--accent); text-decoration:none; }
ul { padding-left:0; list-style:none; }
li { margin:6px 0; }
.messages, [role=alert] { list-style:none; padding:10px 12px; margin:0 0 14px; font-size:13px;
      background:var(--inset,#0d1218); border:1px solid var(--border); border-radius:9px; color:var(--muted); }
.errorlist { color:var(--danger,#f85149); font-size:12px; list-style:none; padding:0; margin:6px 0 0; }
.back { display:block; text-align:center; margin-top:18px; font-size:13px; color:var(--muted); }
.auth-foot { display:flex; justify-content:center; align-items:center; gap:8px; flex-wrap:wrap;
      margin-top:18px; font-size:13px; }
/* The row has 13px text, so the links are 14–16px tall. The target height grows, the
   letters stay as they are. */
.auth-foot a { color:var(--muted); text-decoration:none; display:inline-flex;
               align-items:center; min-height:40px; }
.auth-foot a:hover { color:var(--accent); text-decoration:underline; }
/* The separating dot was in the border colour (1.34:1) — invisible in practice, and it is
   the only thing dividing the two links under the card. */
.auth-foot span { color:var(--muted); }
/* social login buttons (Google / Facebook) */
    .social-buttons { display:flex; flex-direction:column; gap:10px; margin:18px 0 0; }
.social-btn { display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
      padding:11px 14px; border-radius:9px; font-size:14px; font-weight:600; text-decoration:none;
      border:1px solid var(--border); cursor:pointer; }
.social-btn svg { width:18px; height:18px; flex:none; }
.social-btn.google { background:#ffffff; color:#1f1f1f; border-color:var(--text,#dadce0); }
.social-btn.google:hover { background:#f5f6f7; text-decoration:none; }
.social-btn.facebook { background:#1877f2; color:#fff; border-color:#1877f2; }
.social-btn.facebook:hover { filter:brightness(1.06); text-decoration:none; }
/* Apple require a black button with a white mark and exactly the caption „Continue with
       Apple" in the matching language — that is a condition in their guidelines, not a taste. */
    .social-btn.apple { background:#000; color:#fff; border-color:#000; }
.social-btn.apple:hover { background:#1a1a1a; text-decoration:none; }
.divider { display:flex; align-items:center; text-align:center; color:var(--muted);
      font-size:12px; margin:18px 0; }
.divider::before, .divider::after { content:""; flex:1; border-top:1px solid var(--border); }
.divider span { padding:0 12px; }
.switch { text-align:center; margin-top:16px; font-size:13px; color:var(--muted); }
/* „След регистрацията продължаваш към плащането на Pro" — the reason the form is here. */
.next-note { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; font-size: 14px; line-height: 1.5;
  background: var(--accent-bg, #16281a); border: 1px solid var(--accent, #3fb950); color: var(--text, #e6edf3); }