:root { --bg:#FDF8F5; --text:#4D2C19; --cta:#E68A6E; --accent:#BF6145; --shadow:0 4px 12px rgba(77,44,25,.05); }
* { box-sizing:border-box; } body { margin:0; background:var(--bg); color:var(--text); font-family:Montserrat,Open Sans,Arial,sans-serif; } .shell { max-width:1240px; margin:auto; padding:28px 20px 56px; } .card { background:var(--bg); border-radius:20px; box-shadow:var(--shadow); padding:24px; } .login { max-width:430px; margin:10vh auto; } .brand,h1,h2 { font-family:Playfair Display,Lora,Georgia,serif; } .brand { color:var(--text); font-size:2rem; text-decoration:none; } .eyebrow { color:var(--accent); font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; } label { display:grid; gap:6px; margin:14px 0; font-weight:600; } input,textarea { width:100%; border:1px solid rgba(77,44,25,.18); border-radius:12px; padding:11px; background:var(--bg); color:var(--text); font:inherit; } .check { display:flex; align-items:center; gap:9px; font-weight:400; } .check input { width:auto; } button { border:0; border-radius:50px; padding:11px 17px; cursor:pointer; font:inherit; color:var(--text); } .primary { background:var(--cta); } .primary:hover { box-shadow:0 6px 16px rgba(77,44,25,.12); } .secondary,.link-button { background:rgba(230,138,110,.16); } .message { min-height:1.4em; color:var(--accent); } .topbar,.heading { display:flex; justify-content:space-between; align-items:center; gap:16px; } .topbar { margin-bottom:26px; } .topbar div { display:flex; align-items:center; gap:14px; } .intro { margin-bottom:20px; } .metrics { display:grid; grid-template-columns:repeat(7,1fr); gap:12px; margin-bottom:20px; } .metric { display:grid; gap:5px; padding:18px; } .metric strong { font-family:Playfair Display,Lora,Georgia,serif; font-size:2rem; } .metric span,.deck-item span { color:rgba(77,44,25,.72); font-size:.88rem; } .layout { display:grid; grid-template-columns:minmax(250px,.7fr) minmax(0,1.3fr); gap:20px; } .deck-list,.card-list { display:grid; gap:10px; margin-top:18px; } .deck-item { display:grid; text-align:left; gap:4px; background:rgba(230,138,110,.08); border-radius:15px; } .deck-item.selected { outline:2px solid var(--cta); background:rgba(230,138,110,.16); } .editor { min-height:460px; } .question { padding:16px; border-radius:14px; background:rgba(230,138,110,.08); } .question p { margin:0 0 10px; } .question div { display:flex; gap:8px; } .danger { background:transparent; color:var(--accent); padding:8px; } .link-button { padding:8px 12px; } @media(max-width:900px){.metrics{grid-template-columns:repeat(3,1fr)}.layout{grid-template-columns:1fr}} @media(max-width:560px){.metrics{grid-template-columns:repeat(2,1fr)}.topbar{align-items:flex-start;flex-direction:column}}