/* Shared design tokens for Aleph Apps auth screens. */
:root{
  --bg:#fbfaf6;
  --bg-tint:radial-gradient(1200px 600px at 18% -10%, rgba(110,165,200,0.12), transparent 60%),
            radial-gradient(1000px 540px at 105% 8%, rgba(15,157,110,0.09), transparent 60%);
  --surface:#ffffff;
  --surface-2:#f5f4ee;
  --border:#e8e6dd;
  --border-strong:#d4d1c4;
  --text:#1c1b17;
  --text-muted:#6f6d64;
  --text-subtle:#a4a195;
  --accent:#1c1b17;
  --accent-fg:#ffffff;
  --green:#0f9d6e;
  --blue:#3b6fbd;
  --red:#d8533f;
  --red-bg:#fbe3dd;
  --radius:8px;
  --radius-lg:12px;
  --radius-xl:16px;
  --shadow-sm:0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:0 4px 12px rgba(0,0,0,0.06);
  --shadow-lg:0 12px 32px rgba(0,0,0,0.10);
  --font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --font-serif:"Instrument Serif","Iowan Old Style","Apple Garamond",Georgia,serif;
}
html{color-scheme:light dark}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0a0a0b;
    --bg-tint:radial-gradient(1200px 600px at 18% -10%, rgba(110,165,200,0.08), transparent 60%),
              radial-gradient(1000px 540px at 105% 8%, rgba(15,157,110,0.06), transparent 60%);
    --surface:#18181b;
    --surface-2:#27272a;
    --border:#27272a;
    --border-strong:#3f3f46;
    --text:#fafafa;
    --text-muted:#a1a1aa;
    --text-subtle:#71717a;
    --accent:#fafafa;
    --accent-fg:#18181b;
    --green:#6ee7b7;
    --blue:#7ab0ff;
    --red:#f87171;
    --red-bg:#4b1e18;
    --shadow-sm:0 1px 2px rgba(0,0,0,0.4);
    --shadow-md:0 4px 12px rgba(0,0,0,0.5);
    --shadow-lg:0 12px 32px rgba(0,0,0,0.6);
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:var(--font-sans);
  background:var(--bg);
  background-image:var(--bg-tint);
  background-attachment:fixed;
  color:var(--text);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

/* Auth-form centered card layout */
.auth-shell{
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:32px 20px;
}
.auth-card{
  width:100%;max-width:400px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  padding:32px 30px 28px;
  box-shadow:var(--shadow-md);
}
.auth-brand{
  display:flex;align-items:center;gap:12px;margin-bottom:22px;
}
.auth-brand-icon{
  width:34px;height:34px;
  background:var(--accent);color:var(--accent-fg);
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:var(--shadow-sm);
}
.auth-brand-icon svg{width:16px;height:16px;display:block}
.auth-brand-title{
  font-family:var(--font-serif);
  font-size:22px;font-weight:400;letter-spacing:-0.015em;line-height:1.1;
}
.auth-brand-title em{font-style:italic;color:var(--text-muted);font-weight:400}
.auth-brand-sub{
  font-family:var(--font-mono);
  font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-subtle);margin-top:2px;
}

.auth-title{
  font-family:var(--font-serif);
  font-size:26px;font-weight:400;letter-spacing:-.01em;line-height:1.15;
  margin:6px 0 4px;
}
.auth-subtitle{
  color:var(--text-muted);font-size:13.5px;margin:0 0 22px;line-height:1.5;
}

.field{margin-bottom:14px;display:flex;flex-direction:column;gap:6px}
.field label{
  font-family:var(--font-mono);
  font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-subtle);
}
.field input{
  appearance:none;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:11px 13px;font-size:14px;
  background:var(--surface);
  color:var(--text);font-family:inherit;outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field input:focus{
  border-color:var(--border-strong);
  box-shadow:0 0 0 3px rgba(24,24,27,0.06);
}
@media (prefers-color-scheme: dark){
  .field input:focus{box-shadow:0 0 0 3px rgba(250,250,250,0.08)}
}

.btn{
  appearance:none;border:0;cursor:pointer;
  font-family:inherit;font-weight:500;
  padding:11px 16px;border-radius:var(--radius);
  transition:all .15s ease;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  text-decoration:none;font-size:14px;
}
.btn.primary{
  background:var(--accent);color:var(--accent-fg);width:100%;
  margin-top:6px;
}
.btn.primary:hover{filter:brightness(1.1)}
.btn.primary:disabled{opacity:.6;cursor:progress}
.btn.ghost{
  background:transparent;color:var(--text-muted);
  border:1px solid var(--border);
}
.btn.ghost:hover{color:var(--text);border-color:var(--border-strong);background:var(--surface-2)}
.btn.danger{
  background:transparent;color:var(--red);
  border:1px solid var(--red);
}
.btn.danger:hover{background:var(--red-bg)}

.err{
  color:var(--red);background:var(--red-bg);
  border:1px solid var(--red);
  border-radius:var(--radius);
  padding:9px 12px;font-size:13px;
  margin-bottom:14px;
  display:none;
}
.err.visible{display:block}

.foot-note{
  margin-top:20px;padding-top:16px;
  border-top:1px solid var(--border);
  font-size:12.5px;color:var(--text-muted);text-align:center;
}
.foot-note a{color:var(--text);text-decoration:none;border-bottom:1px dotted var(--border-strong)}
.foot-note a:hover{border-color:var(--text-muted)}