* { box-sizing: border-box; margin: 0; padding: 0; font-family: Inter, Arial, sans-serif; }
:root { --navy:#2b0308; --red:#d71920; --red-dark:#7f0d16; --pink:#ff6ca4; --yellow:#ffcf3a; --ink:#2f1014; }
body { min-height:100vh; color:white; background:linear-gradient(135deg, var(--navy), #8f101d 48%, #d71920); padding:20px; }
.wrap { width:min(1040px, 100%); margin:0 auto; display:grid; gap:18px; }
.topbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.logo { width:54px; height:54px; border-radius:16px; object-fit:cover; box-shadow:0 12px 26px rgba(0,0,0,0.26); }
.back { color:#2f1014; background:linear-gradient(135deg, var(--yellow), #ff8a00); border-radius:14px; padding:12px 16px; font-weight:900; text-decoration:none; margin-left:auto; }
.hero, .card { background:rgba(255,255,255,0.94); color:var(--ink); border-radius:24px; padding:24px; box-shadow:0 18px 44px rgba(0,0,0,0.26); }
.hero { display:grid; gap:12px; }
.eyebrow { color:var(--red-dark); font-weight:900; text-transform:uppercase; letter-spacing:0; }
h1 { font-size:clamp(2.4rem, 7vw, 4.8rem); line-height:0.95; }
.intro { color:#46566f; font-size:1.1rem; line-height:1.55; max-width:760px; }
.homework-card { min-height:auto; grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:16px 18px; background:#fff7d7; border:2px solid rgba(215,25,32,0.14); }
.homework-card h2 { font-size:1.15rem; }
.homework-card a { color:#1558d6; font-weight:900; text-decoration:none; overflow-wrap:anywhere; }
.homework-card a:hover { text-decoration:underline; }
.grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:14px; }
.card { min-height:160px; display:grid; gap:10px; align-content:start; }
.card h2 { color:var(--red-dark); font-size:1.3rem; }
.card p, .card li { color:#46566f; line-height:1.5; }
.card ul { padding-left:20px; display:grid; gap:8px; }
.subject-actions { display:flex; flex-wrap:wrap; gap:10px; }
.subject-button { border:0; border-radius:14px; padding:12px 16px; color:#2f1014; background:linear-gradient(135deg, var(--yellow), #ff8a00); font-weight:900; cursor:pointer; }
.subject-result { min-height:48px; padding:12px 14px; border-radius:14px; background:#fff7d7; font-weight:900; }
.quick { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; }
.quick a { background:rgba(255,255,255,0.92); color:var(--red-dark); text-align:center; text-decoration:none; font-weight:900; border-radius:14px; padding:12px 10px; box-shadow:0 12px 24px rgba(0,0,0,0.18); }
@media (max-width:760px) { .grid, .quick { grid-template-columns:1fr; } .back { margin-left:0; } }