/* Public site: landing, login/signup, info pages. Palette from the Wolf Valley logo: forest green, amber, cream. */
:root {
  --bg:#0C201B; --bg2:#0a1915; --bd:#2a5a49;
  --fg:#F4EFE6; --fg2:#d6e0d8; --fg3:#bccbc1; --fg4:#a3b9ab;
  --accent:#FAA014; --cta:#FAA014; --cta-hover:#e8920a; --on-cta:#0C201B;
  --danger:#ff6b63; --sev-high:#ff9a8f; --ok:#4ade80; --input-bg:#0a1915;
}
html.light {
  --bg:#ffffff; --bg2:#F4EFE6; --bd:#d3c9b4;
  --fg:#102D23; --fg2:#2b4a3d; --fg3:#3d5546; --fg4:#4a6154;
  --accent:#03402C; --cta:#FAA014; --cta-hover:#e8920a; --on-cta:#0C201B;
  --danger:#b42318; --sev-high:#c2410c; --ok:#166534; --input-bg:#ffffff;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--fg); font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; overflow-wrap:break-word; display:flex; flex-direction:column; min-height:100vh; }
main { flex:1; }
img { max-width:100%; }
a { color:var(--accent); }
:focus-visible { outline:2px solid var(--cta); outline-offset:2px; }
.logo-light { display:none; } html.light .logo-light { display:inline-block; } html.light .logo-dark { display:none; }

/* Buttons: orange = the main action, outline = everything else */
.btn { display:inline-block; text-align:center; font-weight:700; font-size:15px; line-height:1.3; padding:12px 24px; border-radius:8px; text-decoration:none; border:1px solid transparent; cursor:pointer; transition:background .15s,border-color .15s; max-width:100%; }
.btn-primary { background:var(--cta); color:var(--on-cta); }
.btn-primary:hover { background:var(--cta-hover); }
.btn-secondary { background:transparent; color:var(--fg); border-color:var(--bd); font-weight:600; }
.btn-secondary:hover { border-color:var(--cta); }
.btn-sm { padding:8px 16px; font-size:13px; }
.btn-block { display:block; width:100%; }
a.btn-primary, a.btn-primary:hover { color:var(--on-cta); }

/* Header */
.site-nav { border-bottom:1px solid var(--bd); background:var(--bg); position:sticky; top:0; z-index:50; }
.nav-in { max-width:1024px; margin:0 auto; padding:10px 24px; display:flex; align-items:center; justify-content:space-between; gap:12px; position:relative; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--fg); min-width:0; }
.brand-mark { background:#F4EFE6; border-radius:8px; padding:4px 6px; display:flex; flex-shrink:0; }
.brand-mark img { height:30px; width:auto; display:block; }
.brand-text { display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.brand-text strong { font-size:20px; letter-spacing:-.3px; }
.brand-text small { font-size:12px; color:var(--fg3); white-space:nowrap; }
.nav-right { display:flex; align-items:center; gap:10px; }
.nav-menu { display:flex; align-items:center; gap:18px; }
.nav-menu a.link { font-size:14px; color:var(--fg2); text-decoration:none; padding:6px 0; }
.nav-menu a.link:hover { color:var(--fg); text-decoration:underline; }
#theme-btn, .nav-toggle { background:none; border:1px solid var(--bd); color:var(--fg2); border-radius:8px; padding:7px 10px; font-size:13px; cursor:pointer; line-height:1; min-height:36px; }
#theme-btn:hover, .nav-toggle:hover { border-color:var(--cta); color:var(--fg); }
.nav-toggle { display:none; font-size:18px; }

/* Cards and forms (login, signup, reset) */
.auth-wrap { max-width:440px; margin:0 auto; padding:40px 24px 56px; }
.auth-card { background:var(--bg2); border:1px solid var(--bd); border-radius:12px; padding:28px; }
.auth-wrap h1 { font-size:26px; line-height:1.2; margin:0 0 6px; text-align:center; }
.auth-sub { color:var(--fg3); font-size:14px; text-align:center; margin:0 0 24px; line-height:1.5; }
.notice { border:1px solid var(--cta); background:rgba(250,160,20,.1); border-radius:10px; padding:12px 14px; font-size:14px; color:var(--fg); margin-bottom:20px; line-height:1.5; }
.notice strong { color:var(--fg); }
.field { margin-bottom:16px; }
.field label, .field .lbl { display:block; font-size:14px; font-weight:600; color:var(--fg); margin-bottom:6px; }
.field input[type=email], .field input[type=password], .field input[type=text] { width:100%; padding:11px 12px; font-size:16px; background:var(--input-bg); color:var(--fg); border:1px solid var(--bd); border-radius:8px; }
.field input::placeholder { color:var(--fg4); }
.field input:focus { outline:2px solid var(--cta); outline-offset:0; border-color:var(--cta); }
.field-err { color:var(--danger); font-size:13px; margin-top:6px; }
.form-err { border:1px solid var(--danger); background:rgba(180,35,24,.12); color:var(--danger); border-radius:8px; padding:10px 12px; font-size:14px; margin-bottom:16px; }
.pw-wrap { position:relative; }
.pw-wrap input { padding-right:44px !important; }
.pw-toggle { position:absolute; top:0; bottom:0; right:0; width:44px; background:none; border:none; color:var(--fg3); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.hidden { display:none !important; }
.oauth { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; border:1px solid var(--bd); background:var(--bg); color:var(--fg); border-radius:8px; padding:11px 14px; font-size:15px; font-weight:600; text-decoration:none; margin-bottom:12px; }
.oauth:hover { border-color:var(--cta); }
.divider { display:flex; align-items:center; gap:12px; color:var(--fg3); font-size:13px; margin:20px 0; }
.divider::before, .divider::after { content:''; flex:1; border-top:1px solid var(--bd); }
.auth-alt { text-align:center; color:var(--fg3); font-size:14px; margin-top:20px; }
.auth-alt a { font-weight:600; }
.check { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--fg2); margin-bottom:18px; cursor:pointer; }
.pw-rules { list-style:none; padding:0; margin:8px 0 0; font-size:13px; color:var(--fg3); }
.pw-rules li { margin:2px 0; } .pw-rules li.ok { color:var(--ok); }
.pw-bar { height:6px; background:var(--bd); border-radius:4px; overflow:hidden; margin-top:8px; } .pw-bar div { height:100%; width:0; background:var(--cta); transition:width .2s; }

.site-foot { border-top:1px solid var(--bd); background:var(--bg2); padding:20px 24px; text-align:center; font-size:13px; color:var(--fg3); }
.site-foot a { color:var(--fg2); }

/* Mobile */
@media (max-width: 760px) {
  .nav-in { padding:8px 16px; }
  .nav-toggle { display:inline-block; }
  .nav-menu { display:none; position:absolute; top:100%; left:0; right:0; background:var(--bg); border-bottom:1px solid var(--bd); flex-direction:column; align-items:stretch; gap:0; padding:8px 16px 16px; box-shadow:0 12px 24px rgba(0,0,0,.25); }
  .nav-menu.open { display:flex; }
  .nav-menu a.link { padding:14px 4px; font-size:16px; border-bottom:1px solid var(--bd); }
  .nav-menu .btn { margin-top:14px; }
  .hide-sm { display:none; }
  .brand-mark img { height:24px; }
  .brand-text strong { font-size:18px; }
  .brand-text small { font-size:11px; }
  .auth-wrap { padding:28px 16px 40px; }
  .auth-card { padding:20px 16px; }
}
@media (max-width: 360px) {
  .nav-right { gap:6px; }
}