:root{
  --ink:#0b2a3a; --ink2:#35505f; --mute:#6b8190; --line:#e7dfd1; --sand:#fbf7f0; --card:#fff; --sea:#0d7a85; --sea-d:#09535b; --sea-l:#dff1f2;
  --coral:#e4572e; --coral-d:#c4421d; --gold:#f2a93b; --ok:#1f8a5b; --warn:#b7791f; --bad:#c0392b;
  --r:14px; --shadow:0 1px 2px rgba(11,42,58,.06),0 8px 24px rgba(11,42,58,.07);
  --serif:"Fraunces",Georgia,serif; --sans:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--sand);color:var(--ink);font:16px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.15;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2rem,5vw,3.4rem)} h2{font-size:clamp(1.4rem,3vw,2rem)} h3{font-size:1.15rem}
p{margin:0 0 1em} a{color:var(--sea-d)} img{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:6px}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
.sr{position:absolute;left:-9999px}
.muted{color:var(--mute)} .small{font-size:.875rem} .center{text-align:center}
.row{display:flex;gap:12px;align-items:center} .row.wrap-r{flex-wrap:wrap} .grow{flex:1} .gap-s{gap:6px}
.stack>*+*{margin-top:14px}

/* nav */
.nav{position:sticky;top:0;z-index:30;background:rgba(251,247,240,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:18px;height:64px}
.brand{font-family:var(--serif);font-weight:700;font-size:1.3rem;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:9px}
.brand i{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--sea),var(--coral));display:grid;place-items:center;color:#fff;font-style:normal;font-size:.95rem}
.nav .links{display:flex;gap:4px;margin-left:12px}
.nav .links a,.nav .links button{padding:8px 12px;border-radius:9px;color:var(--ink2);text-decoration:none;font-weight:500;background:none;border:0;cursor:pointer}
.nav .links a:hover,.nav .links a.on{background:var(--sea-l);color:var(--sea-d)}
.nav .right{margin-left:auto;display:flex;align-items:center;gap:10px}
.cur{border:1px solid var(--line);background:#fff;border-radius:9px;padding:7px 8px;font-size:.875rem;max-width:92px}
.btn.burger{display:none}

/* buttons / forms */
.btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border-radius:11px;border:1px solid transparent;font-weight:600;cursor:pointer;text-decoration:none;transition:transform .08s,background .15s;background:var(--coral);color:#fff;min-height:44px}
.btn:hover{background:var(--coral-d)} .btn:active{transform:translateY(1px)}
.btn.sea{background:var(--sea)} .btn.sea:hover{background:var(--sea-d)}
.btn.ghost{background:#fff;color:var(--ink);border-color:var(--line)} .btn.ghost:hover{background:var(--sea-l)}
.btn.danger{background:#fff;color:var(--bad);border-color:#efc9c3} .btn.danger:hover{background:#fdecea}
.btn.sm{padding:6px 12px;min-height:34px;font-size:.875rem;border-radius:9px}
.btn.block{width:100%} .btn[disabled]{opacity:.55;cursor:not-allowed}
label.f{display:block;font-weight:600;font-size:.875rem;margin-bottom:5px;color:var(--ink2)}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=url],input[type=search],input[type=date],select,textarea{width:100%;padding:11px 13px;border:1px solid #d9cfbd;border-radius:10px;background:#fff;min-height:44px}
textarea{min-height:100px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--sea);border-color:var(--sea)}
.field{margin-bottom:14px} .hint{font-size:.8125rem;color:var(--mute);margin-top:4px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px} .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.check{display:flex;gap:8px;align-items:center;font-weight:500;cursor:pointer} .check input{width:18px;height:18px;accent-color:var(--sea)}

/* cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.card.pad{padding:22px}
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:99px;font-size:.78rem;font-weight:700;background:var(--sea-l);color:var(--sea-d);white-space:nowrap}
.badge.ok{background:#dff5ea;color:var(--ok)} .badge.warn{background:#fdf0d5;color:var(--warn)} .badge.bad{background:#fbe3df;color:var(--bad)} .badge.gray{background:#eee9df;color:var(--ink2)}
.grid-c{display:grid;grid-template-columns:repeat(auto-fill,minmax(285px,1fr));gap:22px}
.cc{display:flex;flex-direction:column;overflow:hidden;text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s}
.cc:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(11,42,58,.06),0 16px 34px rgba(11,42,58,.12)}
.thumb{aspect-ratio:16/10;background:linear-gradient(135deg,var(--a,#0d7a85),var(--b,#0b2a3a));position:relative;overflow:hidden;display:grid;place-items:center}
.thumb img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.thumb svg.wave{position:absolute;left:0;bottom:-1px;width:100%;opacity:.28}
.thumb .mono{font-family:var(--serif);font-size:3.4rem;color:rgba(255,255,255,.92);font-weight:700;position:relative}
.cc .body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.cc h3{margin:0;font-size:1.12rem} .cc .meta{font-size:.84rem;color:var(--mute);display:flex;gap:10px;flex-wrap:wrap}
.price{font-weight:700;font-size:1.2rem} .price small{font-weight:500;color:var(--mute);font-size:.75rem}
.cc .foot{margin-top:auto;padding-top:10px;display:flex;align-items:center;justify-content:space-between}

/* hero */
.hero{padding:64px 0 110px;position:relative;overflow:hidden;background:linear-gradient(180deg,#0b2a3a 0%,#0d4a58 100%);color:#fff}
.hero h1{max-width:15ch;margin-bottom:.35em} .hero p.lead{font-size:1.2rem;color:#cfe3e8;max-width:46ch}
.hero .waves{position:absolute;left:0;right:0;bottom:-2px;width:100%;height:70px}
.hero .sun{position:absolute;right:-80px;top:-80px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,#f2a93b 0%,#e4572e 55%,transparent 70%);opacity:.5}
.feats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:34px;position:relative}
.feat{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:14px 16px;font-size:.92rem}
.feat b{display:block;font-family:var(--serif);font-size:1.02rem;margin-bottom:2px}
.sec{padding:46px 0}

/* progress */
.bar{height:8px;background:#ece5d6;border-radius:99px;overflow:hidden} .bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--sea),var(--ok));border-radius:99px;transition:width .4s}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.stat{padding:16px 18px} .stat b{display:block;font-family:var(--serif);font-size:1.9rem;line-height:1.1} .stat span{color:var(--mute);font-size:.86rem}

/* course page */
.chead{background:linear-gradient(135deg,#0b2a3a,#0d4a58);color:#fff;padding:42px 0}
.cgrid{display:grid;grid-template-columns:1fr 360px;gap:34px;align-items:start}
.buybox{color:var(--ink);position:sticky;top:84px;overflow:hidden}
.buybox .thumb{aspect-ratio:16/9}
.buybox .in{padding:20px}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:8px} .ticks li{padding-left:26px;position:relative} .ticks li::before{content:"";position:absolute;left:2px;top:.45em;width:11px;height:6px;border-left:2.5px solid var(--ok);border-bottom:2.5px solid var(--ok);transform:rotate(-45deg)}
.acc{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.acc details+details{border-top:1px solid var(--line)}
.acc summary{padding:14px 18px;font-weight:700;cursor:pointer;display:flex;gap:10px;justify-content:space-between;list-style:none}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";color:var(--mute);font-size:1.3rem;line-height:1}
.acc details[open] summary::after{content:"–"}
.lrow{display:flex;gap:10px;align-items:center;padding:10px 18px;border-top:1px solid #f2ecdf;font-size:.95rem}
.lrow .ic{width:22px;color:var(--mute);flex:none;text-align:center}

/* player */
.player{display:grid;grid-template-columns:1fr 340px;min-height:calc(100vh - 64px)}
.pmain{padding:22px 26px 60px;min-width:0}
.vwrap{background:#000;border-radius:14px;overflow:hidden;aspect-ratio:16/9;position:relative;box-shadow:var(--shadow)}
.vwrap video,.vwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vnone{position:absolute;inset:0;display:grid;place-items:center;color:#cfe3e8;text-align:center;padding:20px;background:linear-gradient(135deg,#0b2a3a,#0d4a58)}
.pside{border-left:1px solid var(--line);background:#fff;max-height:calc(100vh - 64px);overflow:auto;position:sticky;top:64px;align-self:start}
.pside .ph{padding:18px;border-bottom:1px solid var(--line)}
.pside details summary{padding:12px 18px;background:#faf6ee;font-weight:700;font-size:.92rem;cursor:pointer;border-bottom:1px solid var(--line)}
.pl{display:flex;gap:10px;padding:11px 18px;border-bottom:1px solid #f4efe4;text-decoration:none;color:var(--ink);align-items:flex-start;font-size:.93rem}
.pl:hover{background:var(--sea-l)} .pl.on{background:#e8f4f5;box-shadow:inset 3px 0 0 var(--sea);font-weight:600}
.dot{width:20px;height:20px;border-radius:50%;border:2px solid #cfc5b2;flex:none;margin-top:1px;display:grid;place-items:center;font-size:.7rem;color:#fff}
.dot.done{background:var(--ok);border-color:var(--ok)}
.res{display:flex;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:11px;background:#fff;text-decoration:none;color:var(--ink)}
.res:hover{border-color:var(--sea);background:var(--sea-l)} .res .fi{width:38px;height:38px;border-radius:9px;background:var(--sea-l);color:var(--sea-d);display:grid;place-items:center;font-weight:800;font-size:.7rem;flex:none}
.notes{white-space:pre-wrap}

/* auth */
.auth{max-width:430px;margin:48px auto;padding:30px}
.alert{padding:11px 14px;border-radius:10px;background:#fbe3df;color:#8a2a1e;font-size:.92rem;margin-bottom:14px}
.alert.ok{background:#dff5ea;color:#17613f} .alert.info{background:var(--sea-l);color:var(--sea-d)} .alert.warn{background:#fdf0d5;color:#7a5412}

/* tables */
.tbl{width:100%;border-collapse:collapse;font-size:.92rem} .tbl th{text-align:left;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--mute);padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap} .tbl td{padding:12px;border-bottom:1px solid #f2ecdf;vertical-align:middle}
.tbl tr:hover td{background:#fcfaf5}
.scroll{overflow-x:auto}

/* admin */
.adm{display:grid;grid-template-columns:210px 1fr;gap:26px;padding:28px 0 60px}
.side a{display:flex;gap:9px;padding:10px 12px;border-radius:10px;text-decoration:none;color:var(--ink2);font-weight:500} .side a.on,.side a:hover{background:var(--sea-l);color:var(--sea-d)}
.mod{border:1px solid var(--line);border-radius:12px;background:#fff;margin-bottom:14px;overflow:hidden}
.mod>.mh{display:flex;gap:10px;align-items:center;padding:10px 14px;background:#faf6ee;border-bottom:1px solid var(--line)}
.mod>.mh input{font-weight:700;background:transparent;border-color:transparent} .mod>.mh input:hover,.mod>.mh input:focus{background:#fff}
.les{border-bottom:1px solid #f2ecdf} .les>.lh{display:flex;gap:10px;align-items:center;padding:10px 14px;cursor:pointer} .les>.lh:hover{background:#fcfaf5}
.les .ed{padding:6px 18px 18px;background:#fcfaf5;border-top:1px dashed var(--line)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff} .seg button{padding:8px 14px;border:0;background:none;cursor:pointer;font-weight:600;color:var(--ink2)} .seg button.on{background:var(--sea);color:#fff}
.up{border:2px dashed #d3c7ae;border-radius:12px;padding:18px;text-align:center;background:#fff}
.prog{height:10px;background:#ece5d6;border-radius:99px;overflow:hidden;margin-top:8px} .prog>i{display:block;height:100%;background:var(--coral);width:0}
.tag{font-size:.75rem;background:#eee9df;border-radius:6px;padding:2px 7px;color:var(--ink2)}

/* toast, modal */
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:90;display:grid;gap:8px;width:min(92vw,420px)}
.t{background:var(--ink);color:#fff;padding:12px 16px;border-radius:11px;box-shadow:var(--shadow);animation:up .25s} .t.bad{background:var(--bad)}
@keyframes up{from{opacity:0;transform:translateY(10px)}}
.modal{position:fixed;inset:0;background:rgba(11,42,58,.55);display:grid;place-items:center;z-index:80;padding:16px}
.modal .box{background:#fff;border-radius:16px;padding:24px;width:min(560px,100%);max-height:90vh;overflow:auto;box-shadow:var(--shadow)}
.empty{text-align:center;padding:54px 20px;color:var(--mute)}
.foot-s{border-top:1px solid var(--line);padding:30px 0;color:var(--mute);font-size:.9rem;margin-top:30px}
.spin{width:22px;height:22px;border:3px solid var(--sea-l);border-top-color:var(--sea);border-radius:50%;animation:rot .8s linear infinite;margin:60px auto}
@keyframes rot{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

@media (max-width:960px){
  .cgrid{grid-template-columns:1fr} .buybox{position:static;order:-1}
  .player{grid-template-columns:1fr} .pside{position:static;max-height:none;border-left:0;border-top:1px solid var(--line)}
  .adm{grid-template-columns:1fr;gap:14px} .side{display:flex;overflow-x:auto;gap:4px;padding-bottom:6px} .side a{white-space:nowrap}
  .feats{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .nav .links{display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;background:var(--sand);padding:10px 20px 16px;border-bottom:1px solid var(--line);margin:0}
  .nav .links.open{display:flex} .btn.burger{display:inline-flex}
  .grid2,.grid3{grid-template-columns:1fr} .pmain{padding:14px 14px 50px} .hero{padding:44px 0 46px}
  .tbl.cards thead{display:none} .tbl.cards tr{display:block;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;background:#fff;padding:6px 0}
  .tbl.cards td{display:flex;justify-content:space-between;gap:12px;border:0;padding:6px 14px} .tbl.cards td::before{content:attr(data-l);color:var(--mute);font-size:.8rem;font-weight:600}
}