:root{--bg:#f7f8fb;--panel:#ffffff;--ink:#17202a;--muted:#657181;--line:#dce2ea;--primary:#176b87;--primary-dark:#10556b;--accent:#c7502f;--success:#157f4f;--danger:#b83232}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}.shell{min-height:100vh}.topbar{align-items:center;background:var(--panel);border-bottom:1px solid var(--line);display:flex;gap:16px;justify-content:space-between;padding:14px clamp(16px,4vw,48px)}.brand{font-size:18px;font-weight:700}.nav{align-items:center;display:flex;flex-wrap:wrap;gap:10px}.link-button,.nav a{border:1px solid transparent;border-radius:6px;color:var(--muted);padding:8px 10px}.link-button:hover,.nav a:hover{border-color:var(--line);color:var(--ink)}.link-button{background:transparent;cursor:pointer}.container{margin:0 auto;max-width:1080px;padding:32px clamp(16px,4vw,48px)}.narrow{max-width:460px}.hero{display:grid;grid-gap:22px;gap:22px;padding:56px 0 28px}.hero h1,.page-title{font-size:clamp(32px,6vw,56px);letter-spacing:0;line-height:1.05;margin:0}.hero p,.lede{color:var(--muted);font-size:18px;line-height:1.6;margin:0;max-width:700px}.actions{display:flex;flex-wrap:wrap;gap:12px}.button{background:var(--primary);border:1px solid var(--primary);border-radius:6px;color:white;cursor:pointer;display:inline-flex;font-weight:700;justify-content:center;padding:11px 16px}.button:hover{background:var(--primary-dark)}.button.secondary{background:transparent;color:var(--primary)}.button.secondary:hover{background:#eef7f9}.grid{display:grid;grid-gap:16px;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.card{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:18px}.topic-card{display:grid;grid-gap:10px;gap:10px;min-height:150px}.topic-card.locked{opacity:.76}.badge{border:1px solid var(--line);border-radius:999px;color:var(--muted);display:inline-flex;font-size:13px;padding:4px 8px;width:-moz-fit-content;width:fit-content}.badge.free{border-color:#aad9c2;color:var(--success)}.badge.locked{border-color:#edc4b6;color:var(--accent)}.form{display:grid;grid-gap:14px;gap:14px}.field{display:grid;grid-gap:6px;gap:6px}.field label{color:var(--muted);font-size:14px}.input,.select,.textarea{border:1px solid var(--line);border-radius:6px;padding:11px 12px;width:100%}.textarea{min-height:90px;resize:vertical}.notice{background:#fff7ed;border:1px solid #fed7aa;border-radius:8px;color:#8a4b12;padding:14px}.error{color:var(--danger);margin:0}.success{color:var(--success)}.question{display:grid;grid-gap:12px;gap:12px;margin-bottom:16px}.options{display:grid;grid-gap:8px;gap:8px}.option{align-items:center;border:1px solid var(--line);border-radius:6px;display:flex;gap:8px;padding:10px}.result-correct{border-color:#8fd3ad}.result-incorrect{border-color:#eca5a5}.table-wrap{overflow-x:auto}table{border-collapse:collapse;min-width:900px;width:100%}td,th{border-bottom:1px solid var(--line);padding:10px;text-align:left;vertical-align:top}th{color:var(--muted);font-size:13px}@media (max-width:640px){.topbar{align-items:flex-start;flex-direction:column}.button{width:100%}}