:root { --ink:#1f1d1a; --coffee:#4b3023; --cream:#fbf7f1; --paper:#fffdf9; --orange:#ec6b34; --orange-dark:#c95122; --line:#ded4c8; --muted:#6e655d; --success:#176a48; --danger:#a52e25; --shadow:0 18px 45px rgba(60,35,20,.12); }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:linear-gradient(135deg,#f8f2e9,#fffdf9 45%,#f3e6d8); color:var(--ink); font:16px/1.5 Arial,Helvetica,sans-serif; }
.site-header { min-height:74px; padding:15px clamp(20px,5vw,72px); display:flex; align-items:center; justify-content:space-between; background:var(--coffee); color:white; }
.brand { color:white; text-decoration:none; display:flex; flex-direction:column; align-items:flex-start; line-height:1; }
.brand img { display:block; width:104px; height:auto; }
.brand-subtitle { width:104px; margin-top:4px; color:#fff; font-size:.53rem; font-weight:800; letter-spacing:.13em; text-align:center; text-transform:uppercase; }
.text-button { color:white; background:transparent; border:0; font:inherit; cursor:pointer; text-decoration:underline; text-underline-offset:4px; }
.shell { width:min(840px,calc(100% - 32px)); margin:clamp(30px,7vh,80px) auto; }
.card { background:var(--paper); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); padding:clamp(24px,5vw,52px); }
.narrow { width:min(560px,100%); margin:auto; }
h1,h2,h3,p { margin-top:0; } h1 { font-size:clamp(2rem,5vw,3.4rem); letter-spacing:-.045em; line-height:1.04; } h2 { font-size:1.55rem; line-height:1.2; }
.eyebrow { color:var(--orange-dark); text-transform:uppercase; font-size:.76rem; font-weight:800; letter-spacing:.12em; margin-bottom:13px; }
.lead { font-size:1.1rem; color:var(--muted); max-width:60ch; }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; } .full { grid-column:1/-1; }
label { display:grid; gap:7px; font-weight:700; font-size:.92rem; }
input,select,textarea { width:100%; border:1px solid #cdbfaf; border-radius:9px; padding:12px 13px; background:white; font:inherit; color:var(--ink); }
input:focus,select:focus,textarea:focus { outline:3px solid #f9c5a8; border-color:var(--orange); }
textarea { min-height:160px; resize:vertical; }
.actions { margin-top:27px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.resume-button { margin-left:auto; }
button { border:0; border-radius:9px; padding:12px 20px; font:700 1rem Arial,sans-serif; cursor:pointer; }
button:disabled { opacity:.5; cursor:not-allowed; } .primary { background:var(--orange); color:#fff; } .primary:hover { background:var(--orange-dark); } .secondary { background:#eee5da; color:var(--coffee); } .danger { background:#fee2df; color:var(--danger); }
.note,.notice { padding:14px 16px; border-radius:10px; background:#fff1e8; color:#714128; margin:18px 0; } .notice.error { background:#fde9e7; color:var(--danger); } .notice.success { background:#e8f6ee; color:var(--success); }
.welcome-list { margin:24px 0 0; padding-left:22px; color:var(--muted); }.welcome-list li { margin:0 0 14px; padding-left:5px; }
.progress { display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-size:.9rem; border-bottom:1px solid var(--line); padding-bottom:16px; margin-bottom:28px; }
.meter { width:42%; height:7px; border-radius:10px; background:#ebe3da; overflow:hidden; } .meter span { height:100%; display:block; background:var(--orange); transition:width .2s; }
.question { font-size:clamp(1.35rem,3.5vw,2rem); font-weight:800; line-height:1.25; margin-bottom:26px; }
.answers { display:grid; gap:12px; } .answer { text-align:left; border:1px solid var(--line); background:#fff; padding:17px; color:var(--ink); display:flex; align-items:flex-start; gap:13px; font-weight:normal; } .answer:hover { border-color:var(--orange); background:#fff8f3; } .answer.selected { border:2px solid var(--orange); background:#fff2e9; } .letter { color:var(--orange-dark); font-weight:900; }
.score { font-size:clamp(3.2rem,10vw,6rem); color:var(--orange-dark); font-weight:900; letter-spacing:-.07em; line-height:1; margin:18px 0 6px; }.score-max { font-size:.5em; letter-spacing:-.04em; color:var(--muted); }.points { color:var(--muted); }
.review { border-top:1px solid var(--line); margin-top:34px; padding-top:28px; }.review-item { padding:20px 0; border-bottom:1px solid var(--line); }.review-item h3 { font-size:1rem; }.review-item p { margin:8px 0; }.wrong { color:var(--danger); font-weight:bold; }.right-info { background:#f6eee5; border-left:4px solid var(--orange); padding:13px; color:#584a3e; }
.tabs { display:flex; gap:9px; border-bottom:1px solid var(--line); margin-bottom:24px; }.tab { border-radius:8px 8px 0 0; background:transparent; color:var(--muted); padding:12px 14px; }.tab.active { background:#f5e9de; color:var(--coffee); }
.table-wrap { overflow:auto; }.table { width:100%; min-width:720px; border-collapse:collapse; font-size:.9rem; }.table th { text-align:left; color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; }.table td,.table th { padding:11px 8px; border-bottom:1px solid var(--line); }.table .mini { padding:7px 10px; font-size:.8rem; }.settings-row { display:grid; grid-template-columns:1fr 120px; gap:14px; align-items:end; margin:12px 0; }.status { font-size:.78rem; padding:4px 8px; border-radius:99px; background:#f2e8dc; }.status.completed { background:#e3f3e9; color:var(--success); }.empty { color:var(--muted); padding:24px 0; text-align:center; } .hidden { display:none!important; }
footer { text-align:center; padding:20px; color:var(--muted); font-size:.84rem; }
@media(max-width:620px) { .grid { grid-template-columns:1fr; }.full { grid-column:auto; }.site-header { padding-inline:20px; }.card { padding:25px 20px; }.meter { width:35%; }.settings-row { grid-template-columns:1fr; } }