*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{font-family:var(--font-body);color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit;padding:0;}
img{display:block;}
a{color:var(--red);text-decoration:none;}a:hover{color:var(--red-700);}
.shell{display:grid;grid-template-columns:276px minmax(0,1fr) 56px;height:100vh;overflow:hidden;}
.shell.no-rail{grid-template-columns:276px minmax(0,1fr);}

/* ===== Heartbeat-style community sidebar ===== */
.hb{display:flex;flex-direction:column;height:100vh;overflow-y:auto;padding:24px 16px 24px 22px;background:#fff;scrollbar-width:thin;}
.hb-banner{position:relative;height:126px;border-radius:12px;background:var(--yellow);flex:0 0 auto;margin-bottom:58px;}
.hb-logo{position:absolute;left:12px;bottom:-34px;width:72px;height:72px;border-radius:18px;background:#fff;border:3px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,.08);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.hb-logo img{width:100%;height:100%;object-fit:contain;}
.hb-comm{position:relative;margin:0 0 14px;}
.hb-comm-btn{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;font-family:var(--font-body);font-weight:700;font-size:19px;letter-spacing:-0.01em;}
.hb-comm-btn:hover{background:var(--gray-xlight);}
.hb-comm-btn i{font-size:14px;color:var(--gray-dark);transition:transform .15s;}
.hb-comm-btn.open i{transform:rotate(180deg);}
.hb-menu{position:absolute;top:calc(100% + 6px);left:0;width:250px;background:#fff;border-radius:12px;box-shadow:0 10px 34px rgba(0,0,0,.14);border:1px solid var(--border);padding:6px;z-index:30;animation:hbpop .14s ease;}
@keyframes hbpop{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
.hb-menu a,.hb-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:8px;font-size:14px;color:var(--ink);text-align:left;}
.hb-menu a:hover,.hb-menu button:hover{background:var(--gray-xlight);color:var(--ink);}
.hb-menu i{font-size:17px;color:var(--gray-dark);}
.hb-menu hr{border:0;border-top:1px solid var(--border);margin:6px 4px;}
.hb-menu .cap{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gray);padding:6px 10px 4px;}
.hb-menu .comm-ic{width:24px;height:24px;border-radius:7px;background:var(--yellow);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.hb-menu .comm-ic img{width:100%;height:100%;object-fit:contain;background:#fff;}
.hb-menu .tick{margin-left:auto;color:var(--yellow);}
.hb-nav{display:flex;flex-direction:column;gap:2px;}
.hb-item{display:flex;align-items:center;gap:13px;padding:8px 10px;border-radius:7px;font-size:15px;color:var(--ink);line-height:22px;}
.hb-item i{font-size:19px;width:20px;text-align:center;color:var(--ink);}
.hb-item:hover{background:var(--gray-xlight);color:var(--ink);}
.hb-item.active{background:var(--yellow-100);color:var(--yellow);font-weight:700;}
.hb-item.active i{color:var(--yellow);}
.hb-item.unread{color:var(--yellow);font-weight:700;}
.hb-item.unread i{color:var(--yellow);}
.hb-item .ext{margin-left:auto;font-size:13px;color:var(--gray);opacity:0;}
.hb-item:hover .ext{opacity:1;}
.hb-item .count{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--yellow);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.hb-div{height:1px;background:var(--gray-light);margin:16px 0 14px;flex:0 0 auto;}
.hb-sec-h{display:flex;align-items:center;gap:6px;padding:4px 0 8px;font-size:13px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);}
.hb-sec-h .tog{display:flex;align-items:center;gap:6px;flex:1;text-align:left;font-weight:700;}
.hb-sec-h .tog i{font-size:11px;color:var(--gray-dark);opacity:0;transition:transform .15s,opacity .15s;}
.hb-sec-h:hover .tog i{opacity:1;}
.hb-sec-h .tog.closed i{transform:rotate(-90deg);opacity:1;}
.hb-sec-h .add{width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;opacity:0;color:var(--gray-dark);}
.hb-sec-h:hover .add{opacity:1;}
.hb-sec-h .add:hover{background:var(--gray-xlight);}
.hb-sec-list{margin-bottom:14px;}
.m-drawer,.m-scrim,.m-tabs,.t-ic.m-only{display:none;}

/* ===== main column ===== */
.col{display:flex;flex-direction:column;min-width:0;height:100vh;}
.top{display:flex;align-items:center;gap:14px;height:72px;padding:0 20px 0 18px;flex:0 0 auto;}
.top h1{font-family:var(--font-body);font-weight:700;font-size:16px;margin:0;letter-spacing:-0.01em;}
.top .burger{display:none;width:38px;height:38px;border-radius:8px;align-items:center;justify-content:center;font-size:20px;}
.top .burger:hover{background:var(--gray-xlight);}
.t-search{margin-left:auto;display:flex;align-items:center;gap:8px;width:256px;height:36px;border:1px solid var(--gray-light);border-radius:8px;padding:0 11px;color:var(--gray);}
.t-search input{border:0;outline:0;font:inherit;font-size:15px;width:100%;color:var(--ink);background:none;}
.t-search:focus-within{border-color:var(--yellow);}
.t-ic{width:38px;height:38px;border-radius:99px;display:flex;align-items:center;justify-content:center;font-size:21px;color:var(--ink);position:relative;}
.t-ic:hover{background:var(--gray-xlight);}
.t-ic .pip{position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:99px;background:var(--red-700);border:2px solid #fff;}
.panel{flex:1;min-height:0;overflow-y:auto;background:var(--gray-xlight);border-radius:14px 14px 0 0;padding:28px 32px 48px;}
.shell:not(.no-rail) .panel{border-radius:14px 14px 0 0;}

/* ===== right member rail ===== */
.rail{display:flex;flex-direction:column;align-items:center;height:100vh;padding:14px 0 16px;gap:10px;}
.rail .me{width:40px;height:40px;border-radius:99px;overflow:hidden;background:var(--gray-xlight);border:1px solid var(--border);}
.rail .me img{width:100%;height:100%;object-fit:cover;}
.rail .sep{width:28px;height:1px;background:var(--gray-light);margin:6px 0;}
.rail .ppl{display:flex;flex-direction:column;gap:12px;align-items:center;overflow-y:auto;flex:1;min-height:0;padding:6px 0;scrollbar-width:none;}
.av{position:relative;width:38px;height:38px;flex:0 0 38px;border-radius:99px;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:14px;color:#fff;cursor:pointer;}
.av img{width:100%;height:100%;object-fit:cover;border-radius:99px;background:#fff;border:1px solid var(--border);}
.av .on{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:99px;background:#1FA463;border:2px solid #fff;}
.av:hover::after{content:attr(data-name);position:absolute;right:48px;top:50%;transform:translateY(-50%);background:var(--ink);color:#fff;font-family:var(--font-body);font-weight:600;font-size:12px;padding:5px 9px;border-radius:6px;white-space:nowrap;z-index:5;}
.rail .r-ic{width:38px;height:38px;border-radius:99px;display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--ink);position:relative;}
.rail .r-ic:hover{background:var(--gray-xlight);}
.rail .r-ic .badge{position:absolute;top:0;right:0;min-width:17px;height:17px;border-radius:99px;background:var(--red-700);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px;}
.rail .help{background:var(--yellow);color:#fff;}
.rail .help:hover{background:#d18d1f;}

/* ===== dashboard modules (from Figma) ===== */
.grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:16px;max-width:1240px;margin:0 auto;}
.mod{background:#fff;border-radius:20px;padding:24px 20px;box-shadow:4px 10px 33.3px rgba(150,150,150,.05);min-width:0;}
.span2{grid-column:span 2;}
.mod-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.mod-h h2{font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:-0.01em;text-transform:uppercase;margin:0;}
.more{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);font-weight:700;font-size:15px;text-transform:uppercase;color:var(--red);}
.more i{font-size:17px;}
/* countdown */
.cd{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:160px;}
.cd .days{font-family:var(--font-display);font-weight:700;font-size:15px;text-transform:uppercase;color:var(--red);letter-spacing:.02em;}
.cd .clock{font-family:var(--font-display);font-weight:800;font-size:62px;letter-spacing:-0.02em;line-height:1;margin:6px 0 10px;font-variant-numeric:tabular-nums;}
.cd p{margin:0;font-size:15px;color:var(--gray-dark);}
/* telegram */
.tg{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding-right:130px;}.tg .btn-blk{position:relative;z-index:1;}
.tg h3{font-family:var(--font-display);font-weight:700;font-size:21px;line-height:1.02;letter-spacing:-0.01em;text-transform:uppercase;margin:0 0 20px;}
.tg img{position:absolute;right:-6px;bottom:-6px;width:110px;}
.btn-blk{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:42px;padding:0 26px;border-radius:99px;background:#000;color:#fff;font-family:var(--font-display);font-weight:700;font-size:15px;text-transform:uppercase;align-self:flex-start;white-space:nowrap;}
.btn-blk:hover{background:var(--ink);color:#fff;}
/* upgrade */
.up{position:relative;overflow:hidden;background:var(--yellow);padding-right:130px;display:flex;flex-direction:column;justify-content:center;}
.up h3{font-family:var(--font-display);font-weight:700;font-size:23px;text-transform:uppercase;letter-spacing:-0.01em;margin:0 0 6px;line-height:1;}
.up p{margin:0 0 20px;font-size:15px;}
.up .acts{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.btn-wht{height:40px;padding:0 20px;border-radius:99px;background:#fff;font-family:var(--font-display);font-weight:700;font-size:14px;text-transform:uppercase;}
.btn-wht:hover{background:var(--yellow-100);}
.up .lm{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);font-weight:700;font-size:14px;text-transform:uppercase;color:#000;}
.up .book{position:absolute;right:14px;top:18px;width:108px;height:150px;transform:rotate(4deg);background:url(assets/dash/book.png) 48.889% 59.396% / 286.131% 151.027% no-repeat;}
/* courses */
.courses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.course{background:var(--gray-xlight);border-radius:12px;padding:12px;display:flex;flex-direction:column;color:var(--ink);transition:transform .15s;}
.course:hover{transform:translateY(-2px);color:var(--ink);}
.course .th{aspect-ratio:1/0.98;border-radius:10px;overflow:hidden;margin-bottom:14px;}
.course .th img{width:100%;height:100%;object-fit:cover;}
.course h4{font-family:var(--font-display);font-weight:700;font-size:17px;text-transform:uppercase;letter-spacing:-0.01em;margin:0 0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.course .meta{display:flex;justify-content:space-between;font-size:13px;margin-bottom:8px;}
.course .meta b{font-family:var(--font-display);font-weight:700;font-size:14px;}
.bar{height:4px;border-radius:99px;background:#fff;overflow:hidden;}
.bar i{display:block;height:100%;border-radius:99px;}
/* schedule */
.sched{display:flex;flex-direction:column;}
.sched .list{overflow-y:auto;max-height:520px;padding-right:6px;display:flex;flex-direction:column;gap:8px;}
.sched .day{font-family:var(--font-display);font-weight:700;font-size:13px;text-transform:uppercase;color:var(--gray);margin:10px 0 2px;}
.sched .day:first-child{margin-top:0;color:var(--ink);}
.slot{display:flex;align-items:center;gap:16px;background:var(--gray-xlight);border-radius:10px;padding:12px 14px;}
.slot .tm{font-size:13px;line-height:1.35;color:var(--gray-dark);white-space:nowrap;}
.slot b{font-weight:600;font-size:15px;}
.slot.now{background:var(--teal);color:#fff;}
.slot.now .tm{color:#fff;}
/* recommended */
.recs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.rec{display:flex;gap:14px;background:var(--gray-xlight);border-radius:12px;padding:12px;}
.rec .th{width:120px;flex:0 0 120px;height:124px;border-radius:8px;overflow:hidden;background:#fff;}
.rec .th img{width:100%;height:100%;object-fit:cover;}
.rec .bd{display:flex;flex-direction:column;min-width:0;flex:1;}
.rec h4{font-family:var(--font-display);font-weight:700;font-size:16px;text-transform:uppercase;letter-spacing:-0.01em;margin:2px 0 5px;line-height:1.05;}
.rec p{margin:0;font-size:13px;line-height:1.4;color:var(--ink);}
.rec .ft{margin-top:auto;display:flex;align-items:center;gap:6px;padding-top:10px;}
.rec .ft b{font-size:13px;font-weight:700;margin-right:auto;}
.chip{height:28px;padding:0 12px;border-radius:99px;background:#fff;font-size:13px;display:inline-flex;align-items:center;}
.aplus{width:30px;height:28px;border-radius:99px;background:#000;color:#fff;font-family:var(--font-display);font-weight:700;font-size:13px;display:inline-flex;align-items:center;justify-content:center;}
/* reviews */
.revs{display:flex;flex-direction:column;gap:12px;}
.rev{background:var(--gray-xlight);border-radius:12px;padding:14px 16px 16px;}
.rev .who{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.rev .who img{width:30px;height:30px;border-radius:99px;object-fit:cover;background:#fff;}
.rev .who b{font-family:var(--font-display);font-weight:700;font-size:14px;text-transform:uppercase;}
.rev .stars{margin-left:auto;color:var(--yellow);font-size:13px;letter-spacing:1px;}
.rev p{margin:0;font-size:14px;line-height:1.5;}

.scrim{display:none;}

@media (max-width:1280px){
  .grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .span2{grid-column:span 2;}
  .cd{grid-column:span 2;}
}
@media (max-width:1100px){
  .shell,.shell.no-rail{grid-template-columns:260px minmax(0,1fr);}
  .rail{display:none;}
}
@media (max-width:860px){
  .shell,.shell.no-rail{grid-template-columns:minmax(0,1fr);}
  .hb{display:none;}
  /* Heartbeat mobile top bar: burger · centred title · bell + search */
  .top{height:60px;padding:0 8px;gap:4px;position:relative;}
  .top .burger{display:flex;width:44px;height:44px;font-size:24px;}
  .top h1{position:absolute;left:50%;transform:translateX(-50%);font-size:20px;}
  .t-search,.d-only{display:none;}
  .top .t-ic:first-of-type{margin-left:auto;}
  .t-ic{width:44px;height:44px;font-size:23px;}
  .t-ic.m-only{display:flex;}
  .panel{padding:16px 14px 96px;border-radius:0;}
  /* bottom tab bar */
  .m-tabs{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:70;background:#fff;border-top:1px solid var(--border);padding:8px 4px calc(8px + env(safe-area-inset-bottom));}
  .m-tabs a{display:flex;flex-direction:column;align-items:center;gap:3px;min-height:48px;justify-content:center;color:var(--gray);font-size:13px;}
  .m-tabs a i{font-size:24px;}
  .m-tabs a.on{color:var(--yellow);font-weight:700;}
  /* hamburger drawer */
  .m-scrim{display:block;position:fixed;inset:0;background:rgba(41,45,50,.55);z-index:50;opacity:0;pointer-events:none;transition:opacity .2s;}
  .m-scrim.open{opacity:1;pointer-events:auto;}
  .m-drawer{display:block;position:fixed;left:0;top:0;bottom:0;width:min(86vw,360px);z-index:60;background:#fff;overflow-y:auto;padding:28px 18px 110px;transform:translateX(-102%);transition:transform .26s cubic-bezier(.32,.72,0,1);}
  .m-drawer.open{transform:none;}
  .m-comm{display:flex;align-items:center;gap:20px;padding:0 6px;margin-bottom:26px;}
  .m-logo{width:64px;height:64px;border-radius:99px;overflow:hidden;background:var(--yellow);flex:0 0 64px;display:flex;align-items:center;justify-content:center;}
  .m-logo img{width:100%;height:100%;object-fit:contain;background:#fff;}
  .m-comm b{font-size:19px;font-weight:700;}
  .m-nav{display:flex;flex-direction:column;gap:2px;}
  .m-nav .hb-item{font-size:17px;padding:14px 10px;border-radius:8px;color:var(--gray-dark);}
  .m-nav .hb-item i{font-size:22px;color:var(--gray-dark);}
  .m-nav .hb-item.active{color:var(--ink);font-weight:400;}
  .m-nav .hb-item.active i{color:var(--ink);}
  .m-nav .hb-item.unread{color:var(--ink);font-weight:700;}
  .m-nav .hb-item.unread i{color:var(--yellow);}
  .m-nav .hb-item .ext{display:none;}
  .m-sec h3{font-size:17px;font-weight:700;margin:24px 10px 6px;color:var(--ink);}
  .grid{grid-template-columns:minmax(0,1fr);}
  .span2,.cd{grid-column:auto;}
  .courses{grid-template-columns:repeat(2,minmax(0,1fr));}
  .recs{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:520px){
  .courses{grid-template-columns:minmax(0,1fr);}
  .top .t-search{display:none;}
  .top h1{margin-right:auto;}
  .cd .clock{font-size:52px;}
  .rec .th{width:96px;flex-basis:96px;height:110px;}
}