/* Apple HIG: системный шрифт и цвета, grouped inset lists, large titles */
:root{
  --bg:#F2F2F7; --surface:#FFFFFF; --fill:rgba(120,120,128,.12); --fill2:rgba(120,120,128,.08);
  --label:#000000; --label2:rgba(60,60,67,.6); --label3:rgba(60,60,67,.3); --sep:rgba(60,60,67,.29);
  --tint:#007AFF; --green:#34C759; --orange:#FF9500; --red:#FF3B30; --indigo:#5856D6; --teal:#30B0C7; --gray:#8E8E93;
  --bar:rgba(242,242,247,.8);
  --f:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",system-ui,sans-serif;
  --f-round:ui-rounded,-apple-system,"SF Pro Rounded",system-ui,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#000000; --surface:#1C1C1E; --fill:rgba(120,120,128,.36); --fill2:rgba(120,120,128,.24);
  --label:#FFFFFF; --label2:rgba(235,235,245,.6); --label3:rgba(235,235,245,.3); --sep:rgba(84,84,88,.65);
  --tint:#0A84FF; --green:#30D158; --orange:#FF9F0A; --red:#FF453A; --indigo:#5E5CE6; --teal:#40C8E0;
  --bar:rgba(0,0,0,.75); color-scheme:dark}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--label);font:17px/1.47 var(--f);-webkit-font-smoothing:antialiased;letter-spacing:-.01em}
button,input,textarea,select{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:var(--tint);text-decoration:none}
:focus-visible{outline:3px solid color-mix(in srgb,var(--tint) 50%,transparent);outline-offset:1px;border-radius:8px}
.num{font-variant-numeric:tabular-nums}
.sec{color:var(--label2)}
.foot{font-size:13px;line-height:1.38;color:var(--label2)}
[hidden]{display:none!important}

/* Navigation bar */
.navbar{position:sticky;top:0;z-index:5;background:var(--bar);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:.5px solid var(--sep);padding-top:env(safe-area-inset-top,0px)}
.navbar .in{max-width:1080px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding-inline:16px}
.navbar .back{display:inline-flex;align-items:center;gap:4px;font-size:17px;color:var(--tint);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.navbar .back svg{width:12px;height:20px;flex:none}
.navbar .title{font-size:17px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.navbar .brand{font-size:15px;font-weight:600}
.navbar .brand span{color:var(--label2);font-weight:400}

.page{max-width:1080px;margin:0 auto;padding-inline:16px;padding-block:8px 64px}
.large{font-size:34px;line-height:1.2;font-weight:700;letter-spacing:.01em;margin:16px 0 6px;text-wrap:balance}
.lead{margin:0 0 24px;color:var(--label2);max-width:60ch}

/* Grouped lists */
.group{margin-bottom:32px}
.ghead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:0 16px 7px;font-size:13px;color:var(--label2);text-transform:uppercase;letter-spacing:.02em}
.gfoot{padding:7px 16px 0;font-size:13px;color:var(--label2)}
.list{background:var(--surface);border-radius:10px;overflow:hidden}
.cell{display:flex;align-items:center;gap:12px;padding:11px 16px;position:relative;width:100%;text-align:left;min-height:44px;color:var(--label)}
.cell + .cell::before{content:"";position:absolute;top:0;right:0;left:var(--inset,16px);border-top:.5px solid var(--sep)}
.cell.icon{--inset:60px}
a.cell:hover,button.cell:hover{background:var(--fill2)}
a.cell:active,button.cell:active{background:var(--fill)}
.cell .body{flex:1;min-width:0}
.cell .t{font-size:17px}
.cell .s{font-size:15px;color:var(--label2);margin-top:1px}
.cell .val{color:var(--label2);white-space:nowrap}
.chev{width:8px;height:13px;color:var(--label3);flex:none}
.sq{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:#fff;flex:none}
.sq svg{width:19px;height:19px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--tint);color:#fff;font-weight:600;font-size:17px;padding:12px 22px;border-radius:12px;min-height:44px}
.btn:disabled{opacity:.4;cursor:default}
.btn.gray{background:var(--fill);color:var(--tint)}
.btn.small{font-size:15px;padding:7px 14px;min-height:34px;border-radius:9px}
.btn.plain{background:none;color:var(--tint);padding:0;min-height:0;font-weight:400}

.progress{height:4px;border-radius:2px;background:var(--fill);overflow:hidden}
.progress i{display:block;height:100%;background:var(--tint);transition:width .3s}
.ring{--p:0;width:28px;height:28px;border-radius:50%;flex:none;background:conic-gradient(var(--tint) calc(var(--p)*1%),var(--fill) 0);display:grid;place-items:center;position:relative}
.ring::after{content:"";width:20px;height:20px;border-radius:50%;background:var(--surface)}
.ring.done{background:var(--green)}
.ring.done::after{display:none}
.ring.done svg{width:14px;height:14px;color:#fff;position:absolute}

/* Hero */
.hero{background:var(--surface);border-radius:14px;padding:20px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;margin-bottom:32px}
.hero .k{font-size:13px;color:var(--label2);font-weight:600}
.hero h2{font-size:22px;line-height:1.25;font-weight:700;margin:4px 0 12px;letter-spacing:0;text-wrap:balance}
.hero .progress{max-width:380px}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:12px;margin-bottom:32px}
.stat{background:var(--surface);border-radius:12px;padding:14px 16px}
.stat .l{font-size:13px;color:var(--label2)}
.stat .v{font-size:28px;font-weight:700;font-family:var(--f-round);margin-top:2px}

/* Lesson */
.split{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}
.split aside{position:sticky;top:60px}
.lessons .cell{gap:10px;--inset:48px}
.lessons .on{background:color-mix(in srgb,var(--tint) 12%,transparent)}
.lessons .n{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--label3);display:grid;place-items:center;font-size:13px;color:var(--label2);flex:none}
.lessons .done .n{background:var(--green);border-color:var(--green);color:#fff}
.lessons .n svg{width:14px;height:14px}
.lessons .on .n{border-color:var(--tint);color:var(--tint);font-weight:600}
.lessons .t{font-size:15px}
.lessons .s{font-size:13px}

.article{background:var(--surface);border-radius:14px;padding:24px clamp(16px,4vw,36px) 28px;min-width:0}
.article .k{font-size:13px;color:var(--label2);font-weight:600}
.article h2{font-size:28px;line-height:1.2;font-weight:700;margin:4px 0 18px;text-wrap:balance}
.article h3{font-size:20px;line-height:1.3;font-weight:600;margin:28px 0 10px}
.article p{margin:0 0 14px;max-width:64ch}
.article ul{margin:0 0 16px;padding-left:22px;max-width:64ch}
.article li{margin-bottom:8px}
.callout{display:flex;gap:12px;align-items:flex-start;border-radius:12px;padding:14px 16px;margin:4px 0 16px;font-size:15px;line-height:1.4}
.callout svg{width:20px;height:20px;flex:none;margin-top:1px}
.callout.tip{background:color-mix(in srgb,var(--tint) 10%,transparent)} .callout.tip svg{color:var(--tint)}
.callout.warn{background:color-mix(in srgb,var(--orange) 13%,transparent)} .callout.warn svg{color:var(--orange)}
.tbl{overflow-x:auto;margin:4px 0 18px;border-radius:12px;background:var(--bg)}
.tbl table{border-collapse:collapse;width:100%;font-size:15px;line-height:1.35}
.tbl th{text-align:left;font-weight:600;font-size:13px;color:var(--label2);padding:10px 14px;border-bottom:.5px solid var(--sep);white-space:nowrap}
.tbl td{padding:10px 14px;border-bottom:.5px solid var(--sep);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl td:first-child{font-weight:500;min-width:140px}
.ex{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px;margin:4px 0 18px}
.ex > div{background:var(--bg);border-radius:12px;padding:14px;font-size:15px;line-height:1.4}
.ex .h{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;margin-bottom:6px}
.ex .h i{width:8px;height:8px;border-radius:50%;display:inline-block}
mark{background:color-mix(in srgb,var(--red) 18%,transparent);color:inherit;border-radius:3px;padding:0 2px}
mark.ok{background:color-mix(in srgb,var(--green) 20%,transparent)}

.practice{margin-top:8px}
.practice .task{font-weight:600;margin-bottom:10px}
.field{width:100%;min-height:140px;resize:vertical;border:0;border-radius:12px;padding:12px 14px;background:var(--bg);font-size:17px;line-height:1.4}
.field:focus{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--tint) 35%,transparent)}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.results{margin-top:16px}
.results .list{background:var(--bg)}
.ck{width:22px;height:22px;flex:none}

.opt{display:flex;gap:12px;align-items:center;width:100%;text-align:left;padding:13px 16px;position:relative;min-height:48px}
.opt + .opt::before{content:"";position:absolute;top:0;right:0;left:16px;border-top:.5px solid var(--sep)}
.opt:hover{background:var(--fill2)}
.opt:disabled{cursor:default}
.opt:disabled:hover{background:none}
.opt .mk{margin-left:auto;width:22px;height:22px;flex:none}
.qnav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:20px;flex-wrap:wrap}
.pager{display:flex;justify-content:space-between;gap:12px;margin-top:28px;padding-top:20px;border-top:.5px solid var(--sep);flex-wrap:wrap}

/* Certificate */
.cert{background:var(--surface);border-radius:18px;padding:40px clamp(20px,5vw,56px);text-align:center;max-width:720px;margin:24px auto}
.cert .seal{width:64px;height:64px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;margin:0 auto 18px}
.cert .seal svg{width:34px;height:34px}
.cert .k{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--label2);font-weight:600}
.cert h2{font-size:30px;line-height:1.2;margin:10px 0 6px;text-wrap:balance}
.cert .who{font-size:22px;font-weight:600;margin:22px 0 4px;min-height:1.3em}
.cert input{border:0;border-bottom:1px solid var(--sep);background:none;text-align:center;font-size:17px;padding:8px;width:min(100%,360px)}
.cert input:focus{outline:none;border-color:var(--tint)}

.footer{max-width:1080px;margin:0 auto;padding:0 16px calc(32px + env(safe-area-inset-bottom,0px));display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 8px 30px rgba(0,0,0,.18);padding:12px 18px;border-radius:14px;font-size:15px;font-weight:500;z-index:9}

@media (max-width:860px){
  .split{grid-template-columns:minmax(0,1fr)}
  .split aside{position:static;order:2}
  .hero{grid-template-columns:minmax(0,1fr)}
  .large{font-size:30px}
  .article h2{font-size:24px}
}
@media print{
  .navbar,.footer,.noprint{display:none!important}
  body{background:#fff}
  .cert{box-shadow:none;border:1px solid #ccc}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}