/* =========================================================
   Lingua Lumen — public site
   Palette: 0D1B2A 1B263B 415A77 778DA9 E0E1DD
   ========================================================= */
:root{
  --ink:#0D1B2A;
  --navy:#1B263B;
  --slate:#415A77;
  --steel:#778DA9;
  --mist:#E0E1DD;
  --fg-rgb:224,225,221;        /* foreground/overlay tint (light, for dark theme) */
  --panel-rgb:13,27,42;        /* solid panel/input tint (dark) */
  --glass:rgba(var(--fg-rgb),.06);
  --glass-strong:rgba(var(--fg-rgb),.1);
  --line:rgba(var(--fg-rgb),.14);
  --shadow:0 18px 50px -20px rgba(0,0,0,.7);
  --bg:
    radial-gradient(1200px 700px at 80% -10%,rgba(65,90,119,.45),transparent 60%),
    radial-gradient(900px 600px at 0% 30%,rgba(119,141,169,.22),transparent 55%),
    linear-gradient(160deg,#0a1622,#0D1B2A 40%,#11203a);
  --radius:20px;
  --serif:"Fraunces",Georgia,serif;
  --sans:"Inter",system-ui,sans-serif;
}
:root[data-theme="light"]{
  --mist:#16242f;              /* primary text -> dark slate */
  --steel:#51687f;            /* soft text -> medium slate */
  --fg-rgb:22,40,62;          /* overlays become subtle dark */
  --panel-rgb:236,240,245;    /* panels/inputs become light */
  --shadow:0 20px 50px -24px rgba(27,38,59,.28);
  --bg:
    radial-gradient(1200px 700px at 80% -10%,rgba(119,141,169,.30),transparent 60%),
    radial-gradient(900px 600px at 0% 30%,rgba(65,90,119,.14),transparent 55%),
    linear-gradient(160deg,#eef1f5,#e7ecf2 40%,#dde3ec);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--sans);color:var(--mist);
  background:var(--bg);
  background-attachment:fixed;min-height:100vh;line-height:1.6;
  transition:background .25s ease,color .25s ease;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
em{font-style:italic;color:var(--steel)}

/* Aurora background blobs */
.aurora{position:fixed;inset:0;z-index:-1;overflow:hidden;filter:blur(60px);opacity:.5}
.aurora span{position:absolute;border-radius:50%;mix-blend-mode:screen;animation:drift 22s ease-in-out infinite}
.aurora span:nth-child(1){width:520px;height:520px;background:#415A77;top:-120px;left:-100px}
.aurora span:nth-child(2){width:460px;height:460px;background:#778DA9;bottom:-160px;right:-80px;animation-delay:-7s}
.aurora span:nth-child(3){width:380px;height:380px;background:#1B263B;top:40%;left:55%;animation-delay:-13s}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-30px) scale(1.12)}}

/* Header */
.site-header{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:24px;
  padding:16px clamp(18px,5vw,56px);
  background:rgba(var(--panel-rgb),.55);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:900;font-size:1.35rem;letter-spacing:.5px}
.brand-mark{color:var(--steel);font-size:1.1em;filter:drop-shadow(0 0 10px rgba(119,141,169,.7))}
.site-nav{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.site-nav a{padding:9px 16px;border-radius:999px;font-weight:500;color:var(--steel);transition:.2s}
.site-nav a:hover{color:var(--mist);background:var(--glass)}
.site-nav a.active{color:#0a1320;background:var(--steel);font-weight:600}
.nav-toggle{display:none;margin-left:auto;background:none;border:0;color:var(--mist);font-size:1.5rem;cursor:pointer}
.theme-btn{background:var(--glass);border:1px solid var(--line);color:var(--mist);width:38px;height:38px;border-radius:999px;cursor:pointer;font-size:1rem;line-height:1;display:inline-grid;place-items:center;transition:.2s}
.theme-btn:hover{background:var(--glass-strong);transform:rotate(18deg)}

.site-main{max-width:1180px;margin:0 auto;padding:clamp(28px,5vw,64px) clamp(18px,5vw,40px) 80px}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  padding:12px 22px;border-radius:999px;border:1px solid transparent;cursor:pointer;
  font:600 .95rem var(--sans);
  background:linear-gradient(135deg,var(--steel),var(--slate));color:#0a1320;
  box-shadow:0 10px 24px -10px rgba(119,141,169,.8);transition:transform .15s,box-shadow .2s,filter .2s}
.btn:hover{transform:translateY(-2px);filter:brightness(1.07)}
.btn-ghost{background:transparent;color:var(--mist);border-color:var(--line);box-shadow:none}
.btn-ghost:hover{background:var(--glass)}
.btn.block{display:flex;width:100%}

/* Hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding:40px 0 70px}
.eyebrow{text-transform:uppercase;letter-spacing:3px;font-size:.72rem;color:var(--steel);font-weight:600}
.hero h1{font-family:var(--serif);font-weight:900;font-size:clamp(2.4rem,5vw,4rem);line-height:1.05;margin:.3em 0}
.hero h1 em{color:var(--steel)}
.lede{font-size:1.1rem;color:var(--steel);max-width:46ch}
.hero-cta{display:flex;gap:12px;margin:28px 0}
.stat-row{display:flex;gap:34px;margin-top:18px}
.stat-row div{display:flex;flex-direction:column}
.stat-row strong{font-family:var(--serif);font-size:1.8rem;color:var(--mist)}
.stat-row span{font-size:.8rem;color:var(--steel);text-transform:uppercase;letter-spacing:1px}

/* Floating hero cards */
.hero-art{position:relative;height:420px}
.float-card{position:absolute;width:230px;background:var(--glass-strong);border:1px solid var(--line);
  border-radius:18px;overflow:hidden;backdrop-filter:blur(10px);box-shadow:var(--shadow);
  animation:bob 6s ease-in-out infinite}
.float-card img{height:120px;width:100%;object-fit:cover}
.fc-body{padding:12px 14px}
.fc-body h4{margin:6px 0 4px;font-family:var(--serif);font-size:1.15rem}
.fc-body p{margin:0;font-size:.85rem;color:var(--steel)}
.fc-0{top:0;left:8%;z-index:3}
.fc-1{top:120px;right:0;z-index:2;animation-delay:-2s}
.fc-2{bottom:0;left:22%;z-index:1;animation-delay:-4s}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-14px) rotate(1deg)}}

.chip{display:inline-block;padding:3px 12px;border-radius:999px;font-size:.72rem;font-weight:600;
  letter-spacing:.4px;background:color-mix(in srgb,var(--chip,#415A77) 65%,transparent);color:var(--mist)}
.chip.mini{font-size:.66rem;padding:2px 9px}

/* Section heads */
.section{margin:60px 0}
.section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:24px}
.section-head h2,.page-head h1{font-family:var(--serif);font-weight:900;font-size:clamp(1.7rem,3.5vw,2.6rem)}
.more-link{color:var(--steel);font-weight:600}
.more-link:hover{color:var(--mist)}
.page-head{margin-bottom:30px}
.page-head .lede{margin-top:8px}

/* Post grid */
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}
.post-card{background:var(--glass);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;transition:transform .2s,border-color .2s,box-shadow .2s;display:flex;flex-direction:column}
.post-card:hover{transform:translateY(-6px);border-color:var(--steel);box-shadow:var(--shadow)}
.post-cover{height:160px;background-size:cover;background-position:center}
.post-card-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:8px}
.post-card-body h3{font-family:var(--serif);font-size:1.3rem;margin:2px 0}
.post-card-body p{color:var(--steel);font-size:.92rem;margin:0;flex:1}
.date{font-size:.78rem;color:var(--steel);letter-spacing:.5px}

/* Filters */
.filters{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:30px;align-items:center}
.filters input,.filters select,.inline-filter input,.inline-filter select{
  padding:11px 14px;border-radius:12px;border:1px solid var(--line);
  background:rgba(var(--panel-rgb),.6);color:var(--mist);font:inherit;font-size:.92rem}
.filters input[type=search]{min-width:240px}

/* Flip cards */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:26px}
.flip{perspective:1400px;height:340px;cursor:pointer;outline:none}
.flip-inner{position:relative;width:100%;height:100%;transition:transform .7s cubic-bezier(.4,.2,.2,1);transform-style:preserve-3d}
.flip.flipped .flip-inner{transform:rotateY(180deg)}
.flip:focus-visible .flip-inner{box-shadow:0 0 0 3px var(--steel);border-radius:var(--radius)}
.flip-front,.flip-back{position:absolute;inset:0;backface-visibility:hidden;border-radius:var(--radius);
  border:1px solid var(--line);background:var(--glass-strong);backdrop-filter:blur(10px);
  padding:18px;display:flex;flex-direction:column;box-shadow:var(--shadow);overflow:hidden}
.flip-front{align-items:flex-start;gap:10px}
.chip-row{display:flex;flex-wrap:wrap;gap:6px}
.flip-img{width:100%;height:150px;border-radius:14px;background-size:cover;background-position:center;margin-bottom:6px}
.flip-front h3,.flip-back h3{font-family:var(--serif);font-size:1.4rem;margin:4px 0}
.unit-tag{font-size:.72rem;color:var(--steel)}
.flip-hint{margin-top:auto;font-size:.72rem;color:var(--steel);align-self:flex-end;letter-spacing:.5px}
.flip-back{transform:rotateY(180deg);overflow-y:auto;gap:6px}
.flip-back p{margin:3px 0;font-size:.88rem}
.flip-back .fa{color:var(--mist)}
.flip-back .tags em{color:var(--steel);font-size:.8rem}
.tag{display:inline-block;background:rgba(119,141,169,.22);border-radius:8px;padding:2px 8px;margin:2px 3px 0 0;font-size:.78rem}
.tag-anti{background:rgba(170,110,110,.25)}
.example{font-style:italic;color:var(--steel);border-left:2px solid var(--steel);padding-left:10px}
.flip-open{margin-top:auto;align-self:flex-end;font-size:.78rem;font-weight:600;color:var(--steel)}
.flip-open:hover{color:var(--mist)}

/* Category pills */
.cat-pills{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}
.cat-pill{padding:8px 16px;border-radius:999px;border:1px solid var(--line);font-weight:500;color:var(--steel);transition:.2s}
.cat-pill:hover{color:var(--mist);background:var(--glass)}
.cat-pill.active{background:color-mix(in srgb,var(--chip,#415A77) 70%,transparent);color:var(--mist);border-color:transparent}
.cat-desc{color:var(--steel);margin:-8px 0 24px}

/* Article */
.article{max-width:760px;margin:0 auto}
.article h1{font-family:var(--serif);font-weight:900;font-size:clamp(2rem,4vw,3rem);margin:14px 0}
.article-meta{color:var(--steel);font-size:.85rem}
.article-cover{height:320px;border-radius:var(--radius);background-size:cover;background-position:center;margin:20px 0;box-shadow:var(--shadow)}
.article-body{font-size:1.08rem;color:var(--mist)}
.article-body h2,.article-body h3{font-family:var(--serif);color:var(--mist);margin-top:1.4em}
.article-body p{margin:1em 0}
.article-body ul{padding-left:1.3em}
.article-body li{margin:.3em 0}
.related{list-style:none;padding:0;display:grid;gap:10px}
.related a{color:var(--steel);font-weight:500}
.related a:hover{color:var(--mist)}

/* Flashcard links inside posts */
.fc-link{color:var(--steel);font-weight:600;text-decoration:none;
  border-bottom:1.5px dashed rgba(119,141,169,.6);padding-bottom:1px;transition:.18s;white-space:nowrap}
.fc-link::after{content:"✦";font-size:.7em;margin-left:3px;opacity:.7;vertical-align:super}
.fc-link:hover{color:var(--mist);border-bottom-color:var(--mist);background:rgba(119,141,169,.16);border-radius:4px}

/* Crumbs */
.crumbs{margin-bottom:18px}
.crumbs a{color:var(--steel);font-weight:500}
.crumbs a:hover{color:var(--mist)}

/* Single flashcard detail */
.card-detail{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:34px;align-items:start;
  background:var(--glass);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}
.card-detail-media{height:300px;border-radius:16px;background-size:cover;background-position:center;border:1px solid var(--line)}
.card-detail-body{display:flex;flex-direction:column;gap:10px}
.card-detail-body h1{font-family:var(--serif);font-weight:900;font-size:clamp(2rem,4vw,2.8rem);margin:6px 0}
.card-detail-body .chip{align-self:flex-start}
.cd-meaning{font-size:1.08rem;color:var(--mist);margin:2px 0}
.cd-examples{margin-top:6px}
.cd-examples em{color:var(--steel);font-size:.8rem;text-transform:uppercase;letter-spacing:1px}
.cd-examples .example{margin:6px 0}
.card-detail-body .hero-cta{margin-top:14px}
.related-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.related-card{display:flex;flex-direction:column;gap:6px;background:var(--glass);border:1px solid var(--line);
  border-radius:14px;padding:16px;transition:.18s}
.related-card:hover{border-color:var(--steel);transform:translateY(-3px)}
.related-card strong{font-family:var(--serif);font-size:1.15rem}

/* Prose (about) */
.prose{max-width:720px;font-size:1.05rem;color:var(--mist)}
.prose ul{padding-left:1.3em}
.prose li{margin:.4em 0}

/* Auth (login/register) */
.nav-cta{background:var(--steel);color:#0a1320!important;border-radius:999px;padding:9px 16px!important;font-weight:600}
.nav-cta:hover{filter:brightness(1.05)}
.auth-wrap{display:flex;justify-content:center;padding:30px 0}
.auth-card{width:min(440px,100%);background:var(--glass-strong);border:1px solid var(--line);
  border-radius:var(--radius);padding:34px;box-shadow:var(--shadow)}
.auth-card h1{font-family:var(--serif);font-weight:900;font-size:1.9rem;margin:0 0 6px}

/* Study dashboard */
.dash-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px;margin:24px 0}
.dash-card{background:var(--glass);border:1px solid var(--line);border-radius:var(--radius);padding:22px;text-align:center}
.dash-card .num{font-family:var(--serif);font-size:2.4rem;color:var(--mist);display:block;line-height:1}
.dash-card .lbl{color:var(--steel);font-size:.82rem;text-transform:uppercase;letter-spacing:1px}
.dash-card.due .num{color:#f0c674}
.streak-flame{font-size:1.4rem}
.subj-progress{display:flex;flex-direction:column;gap:14px;margin-top:10px}
.subj-row{display:grid;grid-template-columns:140px 1fr auto;gap:14px;align-items:center}
.subj-bar{height:10px;border-radius:999px;background:rgba(var(--fg-rgb),.12);overflow:hidden}
.subj-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--steel),var(--mist))}

/* Guest sample banner */
.guest-banner{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  background:var(--glass-strong);border:1px solid var(--line);border-radius:var(--radius);padding:18px 22px;margin-bottom:26px;box-shadow:var(--shadow)}
.guest-banner strong{display:block;font-family:var(--serif);font-size:1.15rem}
.guest-banner span{color:var(--steel);font-size:.92rem}
.gb-actions{display:flex;gap:10px;flex-wrap:wrap}

/* Responsive: stack tighter on phones */
@media(max-width:600px){
  .match-row{grid-template-columns:1fr;gap:6px}
  .match-row .match-term{font-weight:700}
  .subj-row{grid-template-columns:1fr;gap:6px}
  .quiz-typing{flex-direction:column;align-items:stretch}
  .quiz-input{min-width:0}
  .guest-banner{flex-direction:column;align-items:flex-start}
  .history-row{flex-direction:column;align-items:flex-start;gap:6px}
  .dash-cards{grid-template-columns:repeat(2,1fr)}
}

/* Rating widget */
.rate-widget{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0 14px}
.rate-label{color:var(--steel);font-size:.85rem}
.stars{display:inline-flex;gap:2px}
.star{background:none;border:0;cursor:pointer;font-size:1.5rem;line-height:1;padding:0;color:rgba(var(--fg-rgb),.3);transition:.12s}
.star.lit{color:#f0c674}
.star:not(:disabled):hover{transform:scale(1.12)}
.star:disabled{cursor:default}
.rate-meta{color:var(--steel);font-size:.82rem}

/* Favorite star */
.fav-btn{background:none;border:0;cursor:pointer;font-size:1.3rem;line-height:1;color:var(--steel);transition:.15s}
.fav-btn.on{color:#f0c674}
.fav-btn:hover{transform:scale(1.15)}
.status-badge{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:2px 8px;border-radius:999px}
.status-new{background:rgba(119,141,169,.25);color:var(--mist)}
.status-learning{background:rgba(240,198,116,.22);color:#f0c674}
.status-known{background:rgba(90,150,110,.3);color:#9fd6ad}

/* Review (SRS) */
.review{max-width:680px;margin:0 auto}
.review-empty{text-align:center;padding:50px 0}
.rev-progress{height:6px;background:rgba(var(--fg-rgb),.12);border-radius:999px;overflow:hidden;margin-bottom:18px}
.rev-bar{height:100%;width:0;background:linear-gradient(90deg,var(--steel),var(--mist));transition:width .3s}
.rev-card{background:var(--glass-strong);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;box-shadow:var(--shadow);min-height:320px;display:flex;flex-direction:column}
.rev-img{height:160px;border-radius:14px;background-size:cover;background-position:center;margin-bottom:14px}
.rev-term{font-family:var(--serif);font-size:2rem;margin:6px 0}
.rev-answer{border-top:1px solid var(--line);margin-top:14px;padding-top:14px}
.rev-answer p{margin:5px 0}
.rev-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.rev-rate{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px}
.rev-rate button{padding:12px;border-radius:12px;border:1px solid var(--line);cursor:pointer;font:600 .9rem var(--sans);background:rgba(var(--panel-rgb),.5);color:var(--mist);transition:.15s}
.rev-rate button small{display:block;font-weight:400;color:var(--steel);font-size:.72rem}
.rev-rate button:hover{border-color:var(--steel);transform:translateY(-2px)}
.rev-rate .again:hover{border-color:#c47f7f}
.rev-rate .easy:hover{border-color:#6fae7f}

/* Quiz */
.quiz{max-width:680px;margin:0 auto}
.quiz-setup{background:var(--glass);border:1px solid var(--line);border-radius:var(--radius);padding:30px;display:flex;flex-wrap:wrap;gap:18px;align-items:flex-end}
.quiz-setup label{display:flex;flex-direction:column;gap:6px;font-size:.85rem;color:var(--steel)}
.quiz-setup select{padding:10px 14px;border-radius:10px;border:1px solid var(--line);background:rgba(var(--panel-rgb),.6);color:var(--mist);font:inherit}
.quiz-stage,.quiz-result{background:var(--glass);border:1px solid var(--line);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow)}
.quiz-progress{height:6px;background:rgba(var(--fg-rgb),.12);border-radius:999px;overflow:hidden;margin-bottom:16px}
.quiz-bar{height:100%;width:0;background:linear-gradient(90deg,var(--steel),var(--mist));transition:width .4s}
.quiz-meta{color:var(--steel);font-size:.85rem}
.quiz-question{font-family:var(--serif);font-size:1.6rem;margin:8px 0}
.quiz-sub{color:var(--steel);font-size:.8rem;text-transform:uppercase;letter-spacing:1px;margin-top:-4px}
.quiz-options{display:grid;gap:12px;margin:22px 0}
.quiz-opt{text-align:left;padding:15px 18px;border-radius:14px;border:1px solid var(--line);
  background:rgba(var(--panel-rgb),.5);color:var(--mist);font:inherit;font-size:1rem;cursor:pointer;transition:.18s}
.quiz-opt:hover:not(:disabled){border-color:var(--steel);background:var(--glass);transform:translateX(4px)}
.quiz-opt.correct{background:rgba(90,150,110,.35);border-color:#6fae7f}
.quiz-opt.wrong{background:rgba(170,90,90,.35);border-color:#c47f7f}
.quiz-opt:disabled{cursor:default}
.result-score{font-family:var(--serif);font-size:2.6rem;color:var(--mist);margin:10px 0}

/* Quiz: lessons + new question types */
.lesson-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.lesson-card{text-align:left;background:var(--glass);border:1px solid var(--line);border-radius:16px;padding:18px;cursor:pointer;color:var(--mist);transition:.18s;display:flex;flex-direction:column;gap:6px}
.lesson-card:hover{border-color:var(--steel);transform:translateY(-3px);box-shadow:var(--shadow)}
.lesson-card h3{font-family:var(--serif);font-size:1.2rem;margin:2px 0}
.quiz-clue{font-size:1.15rem;color:var(--mist);background:var(--glass);border-left:3px solid var(--steel);padding:10px 14px;border-radius:0 10px 10px 0;margin:6px 0 14px}
.quiz-clue:empty{display:none}
.quiz-typing{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.quiz-input{flex:1;min-width:200px;padding:14px 16px;border-radius:12px;border:1px solid var(--line);background:rgba(var(--panel-rgb),.5);color:var(--mist);font:inherit;font-size:1.05rem}
.quiz-fb{width:100%;margin:8px 0 0;font-weight:600;color:var(--steel)}
.quiz-fb.ok{color:#6fae7f}.quiz-fb.bad{color:#d99}
.quiz-match{display:flex;flex-direction:column;gap:10px}
.match-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:center}
.match-term{font-weight:600;font-size:1.05rem}
.match-sel{padding:11px 12px;border-radius:10px;border:1px solid var(--line);background:rgba(var(--panel-rgb),.5);color:var(--mist);font:inherit}
.match-sel.correct{border-color:#6fae7f;background:rgba(90,150,110,.18)}
.match-sel.wrong{border-color:#c47f7f;background:rgba(170,90,90,.18)}

/* Quiz history */
.history-list{display:flex;flex-direction:column;gap:10px}
.history-row{display:flex;justify-content:space-between;align-items:center;gap:14px;background:var(--glass);border:1px solid var(--line);border-radius:12px;padding:14px 18px}
.hr-lesson{display:flex;flex-direction:column;gap:2px}
.hr-score{font-family:var(--serif);font-size:1.3rem;font-weight:600}
.hr-score span{font-size:.8rem;color:var(--steel);font-family:var(--sans)}
.score-good{color:#6fae7f}.score-ok{color:#f0c674}.score-low{color:#d99}

/* Flash / alerts */
.flash{padding:13px 18px;border-radius:12px;margin-bottom:16px;font-size:.93rem;border:1px solid var(--line)}
.flash-success{background:rgba(90,150,110,.2);border-color:#5b9a6e}
.flash-error{background:rgba(170,90,90,.2);border-color:#bd7878}
.flash-warn,.flash-info{background:rgba(119,141,169,.18)}
.flash a{text-decoration:underline}

.muted{color:var(--steel)}
.small{font-size:.82rem}
.center{text-align:center;padding:40px 0}

/* Footer */
.site-footer{border-top:1px solid var(--line);background:rgba(var(--panel-rgb),.5);padding:40px clamp(18px,5vw,56px);margin-top:60px}
.footer-inner{max-width:1180px;margin:0 auto;display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
.footer-inner p{color:var(--steel);font-size:.88rem;margin:6px 0 0;max-width:36ch}
.footer-inner nav{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.footer-inner nav a{color:var(--steel)}
.footer-inner nav a:hover{color:var(--mist)}
.copyright{max-width:1180px;margin:24px auto 0;color:var(--steel);font-size:.8rem;text-align:center}

/* Install / login card */
.install-page{display:grid;place-items:center;min-height:100vh;padding:24px}
.install-card{width:min(440px,100%);background:var(--glass-strong);border:1px solid var(--line);
  border-radius:var(--radius);padding:38px;backdrop-filter:blur(14px);box-shadow:var(--shadow)}
.install-card h1{font-family:var(--serif);font-weight:900;margin:0 0 6px}
.stack{display:flex;flex-direction:column;gap:14px;margin-top:18px}
.stack label{display:flex;flex-direction:column;gap:6px;font-size:.88rem;color:var(--steel)}
.stack input,.stack textarea,.stack select{padding:12px 14px;border-radius:10px;border:1px solid var(--line);
  background:rgba(var(--panel-rgb),.6);color:var(--mist);font:inherit}
code{background:rgba(var(--fg-rgb),.12);padding:2px 6px;border-radius:6px;font-size:.88em}

/* Responsive */
@media(max-width:880px){
  .hero{grid-template-columns:1fr}
  .hero-art{height:360px;order:-1}
  .nav-toggle{display:block}
  .site-nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    background:rgba(var(--panel-rgb),.96);padding:14px;border-bottom:1px solid var(--line)}
  body.nav-open .site-nav{display:flex}
}
@media(max-width:560px){
  .stat-row{gap:22px}
  .float-card{width:190px}
}