:root { --bg:#f5f7fb; --fg:#141a2a; --mut:#5d6679; --card:#fff; --line:#e3e7ef; --acc:#1f3fbf; --acc2:#ffd166;
  --ok:#1e8e4f; --warn:#b26a00; --bad:#c0392b; color-scheme: light; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,sans-serif; }
a { color:var(--acc); }
.top { display:flex; flex-wrap:wrap; gap:8px 20px; align-items:center; justify-content:space-between; padding:12px 20px; background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; }
.brand { display:flex; align-items:center; gap:8px; font-weight:800; font-size:18px; color:var(--fg); text-decoration:none; }
.top nav { display:flex; flex-wrap:wrap; gap:4px 14px; align-items:center; }
.top nav a, .linkbtn { color:var(--mut); text-decoration:none; font-weight:600; font-size:15px; }
.top nav a:hover, .linkbtn:hover { color:var(--acc); }
.top nav .lang { border:1px solid var(--line); border-radius:999px; padding:3px 10px; font-size:13px; }
.inl { display:inline; margin:0; }
.linkbtn { background:none; border:0; padding:0; cursor:pointer; font:inherit; color:var(--acc); }
.top .linkbtn { color:var(--mut); font-weight:600; font-size:15px; }
main { max-width:1080px; margin:0 auto; padding:24px 20px 48px; }
main.narrow { max-width:520px; }
h1 { font-size:clamp(1.6rem,4vw,2.1rem); margin:8px 0 14px; letter-spacing:-.01em; }
h2 { font-size:1.15rem; margin:24px 0 12px; }
h3 { margin:0 0 6px; }
.muted { color:var(--mut); } .small { font-size:13px; }
.hero { text-align:center; padding:28px 10px 18px; }
.hero p { color:var(--mut); max-width:36rem; margin:0 auto 18px; text-wrap:balance; }
.btn { display:inline-block; background:var(--acc); color:#fff; border:0; border-radius:10px; padding:10px 18px; font:600 15px/1.2 inherit; font-family:inherit; text-decoration:none; cursor:pointer; text-align:center; }
.btn:hover { filter:brightness(1.1); }
.btn.sm { padding:6px 12px; font-size:14px; color:#fff !important; }
.btn.lg { padding:13px 26px; font-size:17px; }
.btn.ghost { background:transparent; color:var(--acc); border:1.5px solid var(--acc); }
.btn.danger { background:var(--bad); }
.grid { display:grid; gap:18px; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); }
.card { background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.card.pad { padding:18px; margin-bottom:16px; } .card.pad h2 { margin-top:0; }
.card.danger { border-color:#f1c4bf; }
.course .cover { height:110px; display:flex; align-items:center; justify-content:center; font-size:46px; }
.cover span { filter:drop-shadow(0 4px 10px rgba(0,0,0,.25)); }
.cbody { padding:16px 18px 18px; display:flex; flex-direction:column; gap:8px; }
.cbody p { margin:0; color:var(--mut); }
.meta { font-size:13px; color:var(--mut); }
.tags { display:flex; flex-wrap:wrap; gap:6px; } .tag { font-size:12px; background:#eef1fb; color:var(--acc); border-radius:999px; padding:2px 10px; }
.bar { height:8px; background:#e8ebf3; border-radius:99px; overflow:hidden; }
.bar span { display:block; height:100%; background:linear-gradient(90deg,var(--acc),#4f74ff); border-radius:99px; }
.mine { display:grid; grid-template-columns:72px 1fr auto; align-items:center; gap:14px; padding:12px 16px; margin-bottom:12px; }
.mine .cbody { padding:0; } .cover.sm { width:72px; height:72px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:32px; }
.stack { display:flex; flex-direction:column; gap:14px; margin:8px 0 16px; }
label { display:flex; flex-direction:column; gap:5px; font-weight:600; font-size:14px; }
input, select { font:inherit; font-weight:400; padding:10px 12px; border:1.5px solid var(--line); border-radius:10px; background:#fff; color:var(--fg); }
input:focus, select:focus { outline:none; border-color:var(--acc); box-shadow:0 0 0 3px rgba(31,63,191,.15); }
fieldset { border:0; padding:0; margin:0; } legend { font-weight:600; font-size:14px; margin-bottom:5px; }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
label.chk { flex-direction:row; align-items:flex-start; gap:10px; font-weight:400; }
label.chk input { margin-top:4px; width:18px; height:18px; flex:none; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.note { background:#eef3ff; border-left:4px solid var(--acc); padding:10px 12px; border-radius:8px; font-size:14px; }
.note.warn { background:#fff6e5; border-color:var(--warn); }
.flash { padding:12px 14px; border-radius:10px; margin:10px 0; background:#e8f6ee; color:#145c35; border:1px solid #bfe5cf; }
.flash.err { background:#fdecea; color:#8a1f14; border-color:#f5c2bb; }
.flash.warn { background:#fff6e5; color:#7a4a00; border-color:#f3d9a6; }
footer { text-align:center; color:var(--mut); font-size:13px; padding:10px 20px 30px; }
main h3 { margin-top:18px; }
@media (max-width:600px) { .top { padding:10px 14px; } .mine { grid-template-columns:56px 1fr; } .mine .btn { grid-column:1/-1; } .cover.sm { width:56px; height:56px; } }