:root {
  --ink:#26372f;
  --green:#0e5745;
  --green-dark:#173f35;
  --gold:#c8994d;
  --terra:#b85b42;
  --paper:#fbf8ef;
  --line:#d5cec2;
  --shadow:0 22px 54px rgba(18,31,26,.22);
}

* { box-sizing:border-box; }
[hidden] { display:none!important; }
body.account-page { margin:0; min-width:320px; color:var(--ink); background:#f5f0e7; }
button,input { font:inherit; }

body.guest-account-page {
  min-height:100vh;
  padding:24px;
  background:#193229 url("../library/global-nav-cloth-v1.jpg?revision=1") left center/400px 180px repeat;
}
.login-shell {
  width:min(1440px,100%);
  min-height:calc(100svh - 48px);
  position:relative;
  margin:0 auto;
  overflow:hidden;
  border:1px solid rgba(222,210,188,.88);
  border-radius:4px;
  background:radial-gradient(circle at 84% 10%,rgba(255,255,255,.8),transparent 27rem),linear-gradient(112deg,#fbf8ef,#f7f1e5);
  box-shadow:var(--shadow);
}
.login-topbar,.login-paper { position:relative; z-index:1; }
.login-topbar { min-height:92px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:20px clamp(32px,5vw,72px); }
.login-brand .brand-mark { aspect-ratio:1; object-fit:contain; }
.login-actions { display:flex; align-items:center; gap:16px; }
.login-actions button { min-width:108px; min-height:46px; padding:0 20px; border:1px solid var(--green); border-radius:8px; cursor:pointer; font-weight:800; }
.login-actions .quiet-action { background:transparent; color:var(--green-dark); }
.login-actions .primary-action { background:var(--green-dark); color:#fffdf6; box-shadow:0 7px 14px rgba(20,70,56,.15); }
.login-actions button:hover { transform:translateY(-1px); }

.login-paper { padding:34px clamp(42px,8vw,116px) 46px; }
.login-hero { max-width:1050px; }
.beta-label { width:max-content; margin:0 0 22px; padding:5px 14px; color:var(--terra); border-bottom:1px solid rgba(184,91,66,.5); font-size:14px; font-weight:800; letter-spacing:.14em; }
.login-hero h1 { margin:0; color:var(--green-dark); font:600 clamp(42px,4.8vw,72px)/1.16 Georgia,"Songti SC",serif; letter-spacing:.025em; }
.login-hero > p:last-child { margin:22px 0 0; color:#59635e; font-size:clamp(15px,1.28vw,19px); line-height:1.75; }

.capability-section { margin-top:42px; }
.section-title { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:18px; }
.section-title h2,.roadmap-section > h2 { margin:0; color:var(--green-dark); font:600 20px/1.2 Georgia,"Songti SC",serif; letter-spacing:.08em; }
.section-title span { height:1px; background:linear-gradient(90deg,var(--gold),rgba(200,153,77,.16)); }
.capability-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:28px; }
.capability-grid article { min-width:0; display:grid; grid-template-columns:74px 1fr; gap:18px; padding:8px clamp(22px,2.5vw,38px); border-right:1px solid rgba(200,153,77,.42); }
.capability-grid article:first-child { padding-left:0; }
.capability-grid article:last-child { padding-right:0; border-right:0; }
.capability-icon { width:66px; height:66px; display:grid; place-items:center; border:1px solid rgba(198,177,143,.42); border-radius:13px; background:#f7f1e5; color:var(--green); box-shadow:inset 0 0 0 5px rgba(255,255,255,.24); font:600 34px/1 Georgia,"Songti SC",serif; }
.capability-grid h3,.roadmap-note h3 { margin:0 0 10px; color:var(--green-dark); font:600 22px/1.25 Georgia,"Songti SC",serif; }
.capability-grid p,.roadmap-note p { margin:0; color:#5a625e; font-size:14px; line-height:1.75; }

.roadmap-section { margin-top:34px; }
.roadmap-section > h2 { color:#a5752f; }
.roadmap-note { display:grid; grid-template-columns:repeat(3,1fr); position:relative; gap:0; margin-top:12px; padding:28px 34px; border:1px solid rgba(192,163,113,.35); background:linear-gradient(100deg,#f8f0df,#fbf6e9); box-shadow:0 8px 18px rgba(73,59,36,.1); }
.roadmap-note::before { content:""; width:74px; height:26px; position:absolute; top:-14px; left:50%; transform:translateX(-50%) rotate(-1deg); background:rgba(222,207,174,.72); box-shadow:0 1px 2px rgba(74,62,42,.12); }
.roadmap-note article { display:grid; grid-template-columns:54px 1fr; gap:16px; padding:0 28px; border-right:1px solid rgba(200,153,77,.35); }
.roadmap-note article:first-child { padding-left:0; }
.roadmap-note article:last-child { padding-right:0; border-right:0; }
.roadmap-note article > span { color:#9d712d; font:600 38px/1 Georgia,serif; }
.roadmap-note h3 { color:#9b6b27; font-size:19px; }
.roadmap-footnote { margin:22px 0 0; color:#747b77; font-size:13px; text-align:center; }

.auth-dialog { width:min(440px,calc(100% - 32px)); max-height:calc(100dvh - 32px); margin:auto; padding:0; overflow:auto; border:1px solid rgba(200,153,77,.76); border-radius:20px; background:radial-gradient(circle at 78% 8%,#fffdf8,#faf5ea 60%); color:var(--ink); box-shadow:0 26px 70px rgba(8,27,21,.38); }
.auth-dialog::before { content:""; width:76px; height:28px; position:absolute; z-index:1; top:-1px; left:50%; transform:translateX(-50%); background:rgba(225,211,180,.76); box-shadow:0 2px 3px rgba(70,58,39,.1); }
.auth-dialog::backdrop { background:rgba(10,31,25,.72); }
.dialog-close { width:38px; height:38px; display:grid; place-items:center; position:absolute; z-index:2; top:14px; right:14px; padding:0; border:1px solid #c6a96d; border-radius:50%; background:#fffaf0; color:#334a40; cursor:pointer; font-size:24px; }
.status { min-height:0; margin:0; color:#276044; font-size:13px; }
.status:empty { display:none; }
.status.error { color:#a03b31; }
.auth-dialog > .status { padding:60px 38px 0; text-align:center; }
.auth-flow { display:grid; gap:15px; padding:48px 38px 28px; }
.auth-dialog > .status:not(:empty) + .guest-panel .auth-flow { padding-top:18px; }
.auth-flow header { text-align:center; }
.auth-flow header h2 { margin:0 0 8px; color:var(--green-dark); font:600 33px/1.1 Georgia,"Songti SC",serif; }
.auth-flow header p { margin:0; color:#68716c; font-size:13px; }
.auth-flow label { display:grid; gap:7px; color:#364640; font-size:13px; font-weight:700; }
.auth-flow input { width:100%; min-height:48px; padding:9px 13px; border:1px solid #b9ad9a; border-radius:7px; outline:0; background:rgba(255,255,255,.62); color:#26352f; }
.password-field { display:grid; grid-template-columns:1fr auto; overflow:hidden; border:1px solid #b9ad9a; border-radius:7px; background:rgba(255,255,255,.62); }
.password-field input { border:0; border-radius:0; background:transparent; }
.password-field button { min-width:58px; padding:0 10px; border:0; background:transparent; color:var(--green); cursor:pointer; font-size:13px; }
.auth-flow input:focus,.password-field:focus-within { outline:3px solid rgba(33,105,82,.18); border-color:#2f725d; }
.auth-submit { min-height:48px; border:0; border-radius:7px; background:var(--green-dark); color:#fff; cursor:pointer; font-weight:800; box-shadow:0 7px 14px rgba(20,70,56,.12); }
.auth-submit:hover { background:#0f493a; }
.auth-help { margin:-4px 0 0; color:#777c78; font-size:12px; text-align:center; }
.auth-switch { min-height:48px; padding:12px 0 0; border:0; border-top:1px solid rgba(200,153,77,.32); background:transparent; color:#404b46; cursor:pointer; }
.auth-switch b { color:var(--green); }

.account-shell { width:min(940px,calc(100% - 48px)); margin:0 auto; padding:42px 0 70px; }
.account-heading { margin-bottom:20px; }
.account-heading h1 { margin:0 0 8px; font-size:42px; }
.account-heading > p:last-child { color:#69716c; }
.account-shell .account-card { overflow:hidden; border:1px solid #d2cbc0; border-radius:20px; background:#fffdf8; box-shadow:0 16px 38px rgba(49,45,38,.14); }
.account-shell .status { padding:14px 26px 0; }
.user-panel { display:grid; grid-template-columns:minmax(230px,.8fr) minmax(340px,1.2fr); }
.signed-in { display:grid; align-content:start; gap:12px; padding:24px 26px; border-right:1px solid #ddd6cb; }
.flow { display:grid; align-content:start; gap:15px; padding:24px 26px; }
.flow-muted { background:#eee7dc; }
.flow-kicker { margin:0 0 6px; color:#9b5d40; font-size:11px; font-weight:800; letter-spacing:.12em; }
.flow h2,.signed-in h2 { margin:0; color:#174f43; font:600 31px/1.05 Georgia,"Songti SC",serif; }
.flow label { display:grid; gap:7px; color:#3e4b46; font-size:13px; }
.flow input { min-height:48px; padding:9px 12px; border:1px solid #c8c1b7; border-radius:8px; background:#fff; }
.flow > button,.text-button { min-height:44px; border-radius:8px; cursor:pointer; font-weight:800; }
.flow > button { border:0; background:#155644; color:#fff; }
.secondary { color:#747b77; }
#admin-link { min-height:44px; display:inline-flex; align-items:center; color:#356b56; font-weight:800; }
.text-button { grid-column:1/-1; margin:0 28px 28px; padding:0 18px; border:1px solid #9fb6aa; background:transparent; color:#356b56; }

@media (max-width:980px) {
  body.guest-account-page { padding:14px; }
  .login-shell { min-height:calc(100svh - 28px); }
  .login-paper { padding-right:40px; padding-left:40px; }
  .capability-grid,.roadmap-note { grid-template-columns:1fr; }
  .capability-grid article,.roadmap-note article { padding:20px 0; border-right:0; border-bottom:1px solid rgba(200,153,77,.35); }
  .capability-grid article:last-child,.roadmap-note article:last-child { border-bottom:0; }
}

@media (max-width:600px) {
  body.guest-account-page { padding:0; }
  .login-shell { min-height:100svh; border:0; border-radius:0; }
  .login-topbar { min-height:78px; padding:14px 18px; }
  .login-actions { gap:8px; }
  .login-actions button { min-width:0; min-height:44px; padding:0 12px; font-size:13px; }
  .login-brand .brand-copy { display:none; }
  .login-paper { padding:26px 22px 38px; }
  .beta-label { margin-bottom:18px; }
  .login-hero h1 { font-size:clamp(34px,11vw,48px); }
  .login-hero h1 br { display:none; }
  .login-hero > p:last-child br { display:none; }
  .capability-section { margin-top:34px; }
  .capability-grid article { grid-template-columns:54px 1fr; gap:14px; }
  .capability-icon { width:50px; height:50px; font-size:26px; }
  .roadmap-note { padding:24px 20px; }
  .roadmap-note article { grid-template-columns:44px 1fr; }
  .auth-dialog { width:calc(100% - 24px); }
  .auth-flow { padding:48px 24px 24px; }
  .auth-dialog > .status { padding-right:24px; padding-left:24px; }
  .account-shell { width:min(calc(100% - 28px),640px); padding-top:28px; }
  .user-panel { grid-template-columns:1fr; }
  .signed-in { border-right:0; border-bottom:1px solid #ddd6cb; }
}