:root { color-scheme: light; --navy:#0b315c; --blue:#155da0; --cream:#fffaf0; --ink:#17212b; --muted:#5b6672; --safe:#17643a; --danger:#a52323; --line:#c8d1da; }
* { box-sizing:border-box; }
body { margin:0; background:#edf2f6; color:var(--ink); font:18px/1.5 system-ui,-apple-system,sans-serif; }
header { display:flex; align-items:center; gap:16px; padding:16px max(20px,calc((100% - 980px)/2)); background:var(--navy); color:white; }
header img { border-radius:14px; } .header-copy { flex:1; } h1,h2,h3,p { margin-top:0; } header h1 { margin-bottom:0; font-size:1.7rem; } header p { margin:0; color:#d9e9f8; }
main { max-width:980px; margin:24px auto; padding:0 20px 80px; }
.card { background:white; border-radius:18px; padding:clamp(20px,4vw,42px); box-shadow:0 5px 24px #16314c18; }
label,legend { display:block; font-weight:750; margin:20px 0 8px; }
input,textarea { width:100%; border:2px solid var(--line); border-radius:10px; padding:14px 16px; font:inherit; color:inherit; background:white; }
textarea { resize:vertical; min-height:96px; } input:focus,textarea:focus,button:focus,a:focus { outline:4px solid #f0b429; outline-offset:3px; }
button,.button { min-height:56px; border:0; border-radius:12px; padding:13px 24px; font:700 18px/1.2 inherit; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
button:disabled { opacity:.55; cursor:wait; } .primary { color:white; background:var(--blue); } .secondary { color:var(--navy); background:#e2edf7; border:2px solid #9eb9d1; }
.header-button { min-height:48px; color:white; background:transparent; border:2px solid #b9d4eb; }
#prepare-button { width:100%; margin-top:28px; font-size:1.25rem; min-height:66px; }
.row,.actions,.folder-row,.links { display:flex; gap:16px; align-items:center; flex-wrap:wrap; } .between { justify-content:space-between; } .actions { margin-top:28px; } .actions>* { flex:1; }
.folder-row { margin-top:20px; } .safe { color:var(--safe); font-weight:700; } .error { color:var(--danger); font-weight:700; margin-top:18px; }
.help { margin:18px 0 0;color:var(--muted); } .post-list { display:grid;gap:14px;margin-top:28px; } .post-card { border:2px solid var(--line);border-radius:14px;padding:18px;display:flex;gap:18px;align-items:center;justify-content:space-between; } .post-card h3,.post-card p { margin-bottom:4px; } .post-card .secondary { flex:0 0 auto; }
.score { font-size:clamp(4rem,12vw,7rem); line-height:1; font-weight:850; color:var(--blue); } .eyebrow { color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-weight:750; margin-bottom:4px; }
.center { text-align:center; } .spinner { width:64px;height:64px;margin:5px auto 25px;border:8px solid #dbe8f3;border-top-color:var(--blue);border-radius:50%;animation:spin 1s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } }
.tabs { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:28px 0 10px; } .tabs button[aria-selected="true"] { color:white;background:var(--navy); }
[dir="rtl"] input,[dir="rtl"] textarea { direction:rtl;text-align:right; } fieldset { border:0;padding:0;margin:22px 0; } .chips { display:flex;gap:10px;flex-wrap:wrap; } .chip { min-height:48px;padding:9px 16px;background:#edf2f6;color:var(--ink);border:2px solid var(--line); } .chip[aria-pressed="true"] { background:var(--navy);color:white; }
figure { margin:28px 0; } figure img { display:block;width:100%;max-height:560px;object-fit:contain;border-radius:14px;background:#e8edf2; } figcaption { margin-top:8px;color:var(--muted); }
.image-placeholder { min-height:300px;border-radius:14px;background:#e8edf2;display:grid;place-content:center;text-align:center;padding:30px; } .image-placeholder .spinner { width:52px;height:52px;margin:0 auto 18px; } .image-placeholder p { margin:8px 0 0;color:var(--muted); }
.sticky { position:sticky;bottom:12px;background:white;padding:14px;border-radius:14px;box-shadow:0 2px 18px #17212b24; }
.links>* { flex:1; } [hidden] { display:none!important; }
@media (max-width:600px) { body { font-size:16px; } header img { width:48px;height:48px; } .header-button { padding:10px 14px; } .actions>* ,.links>* { flex-basis:100%; } .post-card { align-items:stretch;flex-direction:column; } .card { padding:20px; } }
@media (prefers-reduced-motion:reduce) { .spinner { animation:none; } }