/* JAWNLogic account page - /account/.
   The bar brings its own stylesheet (nav/navbar.css); everything below it is
   here. The palette is the apps' own dark one, so signing in does not feel like
   leaving the site, and the page is deliberately one narrow column: every
   control on it belongs to the same person. */

:root {
  --ac-bg: #0b1220;
  --ac-card: #151f33;
  --ac-card-2: #1a2740;
  --ac-line: #24314a;
  --ac-text: #e6edf7;
  --ac-muted: #93a3bd;
  --ac-accent: #38bdf8;
  --ac-accent-2: #22d3ee;
  --ac-radius: 14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ac-text);
  background:
    radial-gradient(900px 420px at 12% -10%, rgba(56, 189, 248, 0.14), transparent 60%),
    radial-gradient(800px 420px at 100% 0%, rgba(34, 211, 238, 0.09), transparent 55%),
    var(--ac-bg);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

a { color: var(--ac-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code { background: var(--ac-card-2); border: 1px solid var(--ac-line); padding: 1px 5px; border-radius: 6px; font-size: 0.85em; }

.ac-main { max-width: 820px; margin: 0 auto; padding: 28px 20px 56px; }

h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 0 0 6px; line-height: 1.2; }
h2 { font-size: 1.15rem; margin: 0 0 4px; line-height: 1.25; }
p { margin: 0 0 12px; }
.ac-muted { color: var(--ac-muted); font-size: 0.9rem; }

.ac-head { margin: 0 0 20px; }
.ac-head p { margin: 0; }

.ac-card {
  background: linear-gradient(180deg, var(--ac-card), var(--ac-card-2));
  border: 1px solid var(--ac-line);
  border-radius: var(--ac-radius);
  padding: 18px;
  margin: 0 0 16px;
}

.ac-card h2 + .ac-muted { margin-top: 2px; }

/* Forms: two columns where there is room, one on a phone. */
.ac-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 12px; }
.ac-form label { display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; color: var(--ac-muted); }
.ac-form__wide { grid-column: 1 / -1; }
.ac-form input[type="text"],
.ac-form input[type="url"],
.ac-form input[type="color"],
.ac-form select {
  width: 100%;
  background: var(--ac-bg);
  color: var(--ac-text);
  border: 1px solid var(--ac-line);
  border-radius: 9px;
  padding: 9px 11px;
  font: inherit;
}
.ac-form input[type="color"] { height: 42px; padding: 4px; }
.ac-form input:focus,
.ac-form select:focus { outline: 2px solid rgba(56, 189, 248, 0.55); outline-offset: 1px; }

.ac-form__actions { grid-column: 1 / -1; }

.ac-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 10px;
  padding: 10px 18px;
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  color: #042234;
  background: linear-gradient(135deg, var(--ac-accent), var(--ac-accent-2));
  cursor: pointer;
}
.ac-btn:hover { filter: brightness(1.08); text-decoration: none; }
.ac-btn--ghost { background: transparent; color: var(--ac-text); border: 1px solid var(--ac-line); }
.ac-btn--ghost:hover { border-color: var(--ac-accent); }

.ac-flash {
  border: 1px solid var(--ac-line);
  border-radius: 10px;
  background: var(--ac-card);
  padding: 11px 14px;
  margin: 0 0 14px;
}
.ac-flash--success { border-color: rgba(50, 205, 50, 0.5); }
.ac-flash--error { border-color: rgba(248, 113, 113, 0.55); }
.ac-flash--info { border-color: rgba(56, 189, 248, 0.5); }

.ac-auth { max-width: 560px; }

.ac-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 0 20px 44px;
  color: var(--ac-muted);
  font-size: 0.82rem;
}

@media (max-width: 560px) {
  .ac-main { padding: 20px 14px 44px; }
}