/* NEK News — member-facing pages (account, login, signup, history, comments…).
   Themed to match the public site instead of the dark admin dashboard.
   Dark-mode aware via theme-init.js (html.theme-dark / .theme-light). */
:root{
  --bg:#f6f1e7; --bg-card:#fffdf7; --ink:#1a1a1a; --ink-soft:#2c2c2c;
  --ink-mute:#5a5a5a; --ink-faint:#8b8580; --line:#d9d2c4;
  --green:#2c5e3f; --green-2:#3d7d54; --green-dark:#1a3d27;
  --gold:#b07a1c; --gold-2:#d4a64a; --red:#aa2a2a;
  --serif:Charter,'Iowan Old Style','Source Serif 4',Georgia,Cambria,serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Inter,Arial,sans-serif;
  --radius:4px; --shadow:0 1px 2px rgba(15,22,18,.05),0 4px 12px rgba(15,22,18,.05);
  --t:.18s ease;
}
@media (prefers-color-scheme:dark){html:not(.theme-light){
  --bg:#14181a; --bg-card:#1c2024; --ink:#e8e3d8; --ink-soft:#d1ccc1;
  --ink-mute:#998f80; --ink-faint:#6a635a; --line:#2b323a; --shadow:0 8px 24px rgba(0,0,0,.4);
}}
html.theme-dark{
  --bg:#14181a; --bg-card:#1c2024; --ink:#e8e3d8; --ink-soft:#d1ccc1;
  --ink-mute:#998f80; --ink-faint:#6a635a; --line:#2b323a; --shadow:0 8px 24px rgba(0,0,0,.4);
}

*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;}
a{color:var(--green);text-decoration:none;} a:hover{color:var(--gold);}
h1,h2,h3{font-family:var(--serif);color:var(--ink);line-height:1.2;}

.container{max-width:880px;margin:0 auto;padding:2.5rem 1.2rem;}
.container--narrow,.login-container{max-width:460px;margin:0 auto;padding:2.5rem 1.2rem;}

/* page header */
.page-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;border-bottom:2px solid var(--line);padding-bottom:1rem;margin-bottom:1.75rem;}
.page-title,.login-title{font-size:1.8rem;margin:0;}
.page-actions{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;}
.inline-form{display:inline-flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:0;}

/* panels / cards */
.panel{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:1.5rem;margin-bottom:1.5rem;}
.panel-title{font-size:1.15rem;margin:0 0 1rem;padding-bottom:.6rem;border-bottom:1px solid var(--line);}
.panel-warn{border-left:4px solid var(--gold);}
.panel-info{border-left:4px solid var(--green);}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  background:var(--green);color:#fff;border:1px solid var(--green);border-radius:var(--radius);
  font:600 .9rem var(--sans);padding:.55rem 1.1rem;cursor:pointer;transition:background var(--t),transform var(--t),border-color var(--t);text-decoration:none;}
.btn:hover{background:var(--green-dark);border-color:var(--green-dark);color:#fff;transform:translateY(-1px);}
.btn-primary{background:var(--green);border-color:var(--green);}
.btn-ghost{background:transparent;color:var(--ink-soft);border-color:var(--line);}
.btn-ghost:hover{background:transparent;color:var(--green);border-color:var(--green);transform:none;}
.btn-sm{font-size:.8rem;padding:.35rem .7rem;}
.btn-full{width:100%;}

/* forms */
.form-group{margin-bottom:1.1rem;}
.form-label{display:block;font:600 .78rem var(--sans);text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-mute);margin-bottom:.35rem;}
.form-input{width:100%;font:1rem var(--sans);color:var(--ink);background:var(--bg);
  border:1px solid var(--line);border-radius:var(--radius);padding:.6rem .75rem;transition:border-color var(--t),box-shadow var(--t);}
.form-input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(44,94,63,.12);}
.form-help{font:.82rem var(--sans);color:var(--ink-faint);margin-top:.35rem;}

/* account panels: theme bare inputs + stack multi-field forms so they don't
   crowd onto one line. Targets raw <input>/<label> the templates emit. */
.panel form{margin:0;}
.panel input[type=text],.panel input[type=password],.panel input[type=email],
.panel input[type=number],.panel input[type=search]{
  display:block;width:100%;max-width:360px;font:1rem var(--sans);color:var(--ink);
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  padding:.6rem .75rem;margin-top:.3rem;transition:border-color var(--t),box-shadow var(--t);}
.panel input[type=text]:focus,.panel input[type=password]:focus,
.panel input[type=email]:focus,.panel input[type=number]:focus,.panel input[type=search]:focus{
  outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(44,94,63,.12);}
.panel input[type=checkbox]{accent-color:var(--green);width:1.05rem;height:1.05rem;vertical-align:-2px;}
/* a vertical (stacked) account form: fields above each other, button on its own row */
.stack-form{display:block;}
.stack-form p{margin:0 0 1rem;}
.stack-form p label{display:block;font:600 .78rem var(--sans);text-transform:uppercase;
  letter-spacing:.05em;color:var(--ink-mute);margin-bottom:.1rem;}
.stack-form .btn{margin-top:.25rem;}

/* login / signup */
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.5rem;}
.login-box{width:100%;max-width:420px;background:var(--bg-card);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:2rem;}
.login-title{font-size:1.6rem;margin:0 0 .25rem;text-align:center;}
.login-subtitle{color:var(--ink-mute);text-align:center;margin:0 0 1.5rem;font:.95rem var(--sans);}
.login-form .form-group:last-of-type{margin-bottom:1.2rem;}
.login-links{margin-top:1.25rem;text-align:center;display:flex;flex-direction:column;gap:.5rem;}
.login-error{background:rgba(170,42,42,.08);border:1px solid var(--red);color:var(--red);
  border-radius:var(--radius);padding:.7rem .9rem;margin-bottom:1rem;font:.9rem var(--sans);}
.link-muted{color:var(--ink-mute);font-size:.88rem;} .link-muted:hover{color:var(--gold);}

/* badges + meta */
.badge{display:inline-block;font:600 .72rem var(--sans);text-transform:uppercase;letter-spacing:.04em;
  padding:.2rem .55rem;border-radius:99px;border:1px solid var(--line);color:var(--ink-mute);}
.badge-active{background:rgba(44,94,63,.12);color:var(--green);border-color:var(--green);}
.badge-banned{background:rgba(170,42,42,.1);color:var(--red);border-color:var(--red);}
.meta,.tier,.status{color:var(--ink-mute);font-size:.9rem;}

/* tables */
.data-table{width:100%;border-collapse:collapse;font-size:.92rem;}
.data-table th{text-align:left;font:600 .75rem var(--sans);text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-faint);padding:.55rem .6rem;border-bottom:2px solid var(--line);}
.data-table td{padding:.55rem .6rem;border-bottom:1px solid var(--line);color:var(--ink-soft);}

/* code / tokens */
pre,code{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;}
pre{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  padding:1rem;overflow:auto;color:var(--ink);}
code{background:var(--bg);border:1px solid var(--line);border-radius:3px;padding:.1rem .35rem;font-size:.9em;}
.totp-qr{display:block;margin:1rem auto;max-width:220px;background:#fff;padding:.5rem;border-radius:var(--radius);}

/* one-time secret / token reveal (TOTP secret, otpauth URL, RSS token, recovery
   codes). Themed + dark-aware instead of a hardcoded black box. */
.secret-box{user-select:all;display:block;background:var(--bg);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--radius);padding:.75rem .9rem;
  word-break:break-all;font:.85rem ui-monospace,Menlo,Consolas,monospace;margin:.6rem 0;}
ol.secret-box{padding-left:2.4rem;font-size:1.05rem;line-height:1.85;word-break:normal;}
ol.secret-box li{margin:.15rem 0;}