/* ===== Dopest Team Hub — shared styles ===== */
:root{
  --bg:#0a0a0c; --bg2:#111114; --card:#16161a; --card2:#1c1c22;
  --line:#2a2a31; --txt:#f4f4f6; --muted:#9a9aa6; --faint:#6b6b76;
  --green:#46ff9e; --pink:#ff4d8d; --cyan:#36d6ff; --yellow:#ffd23f;
  --orange:#ff8a3d; --purple:#b98cff;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--txt);font-family:'Inter',system-ui,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;padding-bottom:40px}
a{color:inherit;text-decoration:none}
.display{font-family:'Anton',sans-serif;font-weight:400;letter-spacing:.5px;text-transform:uppercase;line-height:.95}
.wrap{max-width:680px;margin:0 auto;padding:0 18px}
.accent{color:var(--accent)}

/* draft bar */
.draftbar{background:var(--yellow);color:#0a0a0c;text-align:center;font-size:12px;font-weight:700;padding:7px 14px}

/* nav */
nav{position:sticky;top:0;z-index:50;background:rgba(10,10,12,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:56px}
.brand{font-family:'Anton',sans-serif;font-size:18px;letter-spacing:1px}
.brand .b1{color:var(--green)}
.back{font-size:13px;font-weight:600;color:var(--muted)}
.back:hover{color:var(--txt)}

/* hero */
header{padding:40px 0 26px;background:radial-gradient(1000px 360px at 50% -120px,rgba(70,255,158,.10),transparent),var(--bg)}
.kicker{font-size:11.5px;font-weight:700;letter-spacing:2px;color:var(--accent,var(--green));text-transform:uppercase;margin-bottom:12px}
header h1{font-size:clamp(34px,8vw,60px);margin-bottom:14px}
header h1 .green{color:var(--green)} header h1 .pink{color:var(--pink)}
.lede{font-size:16px;color:var(--muted);max-width:540px;margin-bottom:22px}
.truth{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--green);border-radius:12px;padding:15px 17px;font-size:15px;color:#dcdce2;margin-bottom:24px}
.truth b{color:var(--txt)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:8px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 10px;text-align:center}
.stat .n{font-family:'Anton',sans-serif;font-size:23px}
.stat:nth-child(1) .n{color:var(--green)} .stat:nth-child(2) .n{color:var(--cyan)} .stat:nth-child(3) .n{color:var(--pink)}
.stat .l{font-size:10.5px;color:var(--muted);margin-top:4px;text-transform:uppercase;letter-spacing:.4px}

/* progress */
.progwrap{padding:14px 0}
.progwrap .wrap{display:flex;align-items:center;gap:12px}
.progbar{flex:1;height:8px;background:var(--card2);border-radius:6px;overflow:hidden}
.progfill{height:100%;width:0;background:linear-gradient(90deg,var(--green),var(--cyan));transition:width .4s ease}
.progtxt{font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap}

/* section labels */
.seclabel{font-size:11.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--faint);margin:30px 0 6px}
.sechead{font-size:clamp(24px,5.5vw,36px);margin-bottom:8px}
.secsub{color:var(--muted);font-size:15px;margin-bottom:18px;max-width:560px}

/* main-page step cards (the sequence) */
.navcard{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:16px;background:var(--bg2);padding:16px 18px;margin-bottom:12px;transition:.15s;position:relative}
.navcard:hover{border-color:var(--accent)}
.navcard.locked{opacity:.55}
.navcard .num{font-family:'Anton',sans-serif;font-size:26px;color:var(--accent);width:42px;text-align:center;flex-shrink:0}
.navcard .meta{flex:1}
.navcard .days{font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--faint)}
.navcard .meta h3{font-family:'Anton',sans-serif;font-size:20px;font-weight:400;text-transform:uppercase;letter-spacing:.5px;color:var(--accent)}
.navcard .meta p{font-size:13px;color:var(--muted)}
.navcard .right{font-size:12px;font-weight:700;color:var(--faint);text-align:right;flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.navcard .go{font-size:20px;color:var(--accent)}
.navcard.locked .go,.navcard.locked .num,.navcard.locked .meta h3{color:var(--faint)}
.badge-now{font-size:9.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:#0a0a0c;background:var(--accent);border-radius:5px;padding:2px 7px}

.tile{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:14px;background:var(--card);padding:14px 16px;margin-bottom:10px;transition:.15s}
.tile:hover{border-color:var(--accent)}
.tile .ic{width:34px;height:34px;border-radius:9px;background:var(--card2);display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.tile .meta{flex:1}
.tile .meta h3{font-size:15.5px;font-weight:700}
.tile .meta p{font-size:13px;color:var(--muted)}
.tile .go{font-size:18px;color:var(--faint)}
.tile:hover .go{color:var(--accent)}

/* phase page steps */
.goalbar{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:12px;padding:13px 16px;font-size:14.5px;color:#dcdce2;margin-bottom:18px}
.goalbar b{color:var(--accent)}
.step{border:1px solid var(--line);border-radius:14px;background:var(--card);padding:15px 16px;margin:12px 0;display:flex;gap:13px}
.check{width:25px;height:25px;border-radius:7px;border:2px solid var(--line);flex-shrink:0;margin-top:2px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;color:#0a0a0c;transition:.15s}
.check.done{background:var(--accent);border-color:var(--accent)}
.step.done .what{text-decoration:line-through;color:var(--muted)}
.sbody{flex:1}
.what{font-weight:700;font-size:16px;margin-bottom:6px}
.detail{font-size:14px;color:#c9c9d2;margin-bottom:8px}
.detail .term{color:var(--faint)}
.rowlabel{font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--accent);margin:11px 0 5px}
.quote{background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:14px;color:#dcdce2;margin:6px 0}
.quote .q{display:block;margin-bottom:8px}
.quote .q:last-child{margin-bottom:0}
.btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.btn{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;padding:8px 13px;border-radius:8px;border:1px solid var(--line);background:var(--card2);color:var(--txt)}
.btn:hover{border-color:var(--accent)}
.btn.solid{background:var(--accent);color:#0a0a0c;border-color:var(--accent)}

/* placeholder */
.ph{border:1.5px dashed #45454f;border-radius:10px;background:repeating-linear-gradient(45deg,transparent,transparent 8px,rgba(255,255,255,.012) 8px,rgba(255,255,255,.012) 16px);padding:11px 13px;margin:6px 0}
.ph .tag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--yellow);background:rgba(255,210,63,.12);border:1px solid rgba(255,210,63,.3);border-radius:5px;padding:2px 7px;margin-bottom:6px}
.ph .pt{font-size:13px;color:var(--muted)}
.ph .pt b{color:#cfcfd6}

/* done banner on phase page */
.donebar{border:1px solid var(--accent);border-radius:12px;background:rgba(70,255,158,.06);padding:14px 16px;margin:18px 0 8px;font-size:14px;text-align:center}
.donebar b{color:var(--accent)}
.nextbtn{display:inline-block;margin-top:10px;font-size:13.5px;font-weight:700;padding:10px 18px;border-radius:9px;background:var(--accent);color:#0a0a0c}

.lockbanner{border:1px solid var(--line);border-radius:12px;background:var(--card2);padding:12px 15px;margin-bottom:16px;font-size:13.5px;color:var(--muted)}
.lockbanner b{color:var(--txt)}

/* reference cards */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.grid{grid-template-columns:1fr}}
.rcard{border:1px solid var(--line);border-radius:14px;background:var(--card);padding:16px}
.rcard h4{font-family:'Anton',sans-serif;font-size:17px;font-weight:400;text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px}
.ref-row{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;padding:6px 0;border-bottom:1px solid var(--line)}
.ref-row:last-child{border-bottom:0}
.ref-row .v{font-weight:700;white-space:nowrap}
.g{color:var(--green)}.c{color:var(--cyan)}.p{color:var(--pink)}.y{color:var(--yellow)}.o{color:var(--orange)}
.linklist a{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px;font-weight:600}
.linklist a:last-child{border-bottom:0}
.linklist .ico{width:28px;height:28px;border-radius:8px;background:var(--card2);display:flex;align-items:center;justify-content:center;font-size:15px}
.arrow{margin-left:auto;color:var(--faint)}

/* help library groups */
.qgroup{border:1px solid var(--line);border-radius:14px;background:var(--bg2);margin-bottom:12px;overflow:hidden}
.qgroup>summary{list-style:none;cursor:pointer;padding:15px 17px;font-family:'Anton',sans-serif;font-size:17px;text-transform:uppercase;letter-spacing:.5px;color:var(--cyan);display:flex;justify-content:space-between;align-items:center}
.qgroup>summary::-webkit-details-marker{display:none}
.qgroup[open]>summary{border-bottom:1px solid var(--line)}
.qgroup .inner{padding:6px 17px 12px}
.qlink{display:flex;align-items:center;gap:9px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.qlink:last-child{border-bottom:0}
.qlink:hover{color:var(--cyan)}
.qlink .pin{color:var(--faint);font-size:13px}
.qlink .play{margin-left:auto;font-size:12px;color:var(--cyan)}

/* leader blocks */
.leadlock{border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,rgba(185,140,255,.07),transparent);padding:18px;text-align:center;margin-bottom:18px}
.leadlock .lk{font-size:30px}
.leadlock h3{font-family:'Anton',sans-serif;font-weight:400;font-size:20px;text-transform:uppercase;margin:8px 0 4px;color:var(--purple)}
.leadlock p{font-size:14px;color:var(--muted);max-width:440px;margin:0 auto 12px}
.toggle{display:inline-block;font-size:12.5px;font-weight:700;padding:8px 14px;border-radius:8px;border:1px solid var(--purple);color:var(--purple);cursor:pointer}
.lblock{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:15px 16px;margin-top:12px}
.lblock h5{font-size:15px;font-weight:700;margin-bottom:4px;color:var(--purple)}
.lblock p{font-size:13.5px;color:var(--muted)}
.lblock ul{margin:8px 0 0 18px;font-size:13.5px;color:#c9c9d2}
.lblock li{margin:4px 0}

/* collapsible "as you grow" */
details.more{border:1px solid var(--line);border-radius:12px;background:var(--card);margin:14px 0;overflow:hidden}
details.more>summary{list-style:none;cursor:pointer;padding:13px 16px;font-weight:700;font-size:14.5px;color:var(--muted);display:flex;justify-content:space-between}
details.more>summary::-webkit-details-marker{display:none}
details.more .inner{padding:4px 16px 14px;font-size:13.5px;color:var(--muted)}
details.more .inner li{margin:5px 0 5px 18px}

footer{padding:34px 0 50px;text-align:center;color:var(--faint);font-size:12px;border-top:1px solid var(--line);margin-top:30px}
footer a{color:var(--faint);text-decoration:underline}

.pagepad{padding-top:30px}

/* skill ladder (Keep Growing) */
.skillcard{border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:16px;background:var(--bg2);padding:16px 18px;margin-bottom:14px}
.skillcard.locked{opacity:.6}
.skhead{display:flex;align-items:center;gap:13px;margin-bottom:4px}
.skhead .snum{font-family:'Anton',sans-serif;font-size:24px;color:var(--accent);width:38px;text-align:center;flex-shrink:0}
.skhead .stitle{font-family:'Anton',sans-serif;font-size:19px;font-weight:400;text-transform:uppercase;letter-spacing:.5px;color:var(--accent)}
.skhead .slock{margin-left:auto;font-size:12px;font-weight:700;color:var(--faint)}
.skillcard.locked .snum,.skillcard.locked .stitle{color:var(--faint)}
.locklabel{font-size:13px;color:var(--faint);padding:4px 0 2px 51px}
.skillbody{padding-left:51px}
.skillbody .sgoal{font-size:14px;color:#c9c9d2;margin:2px 0 10px}
.actionrow{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;background:var(--card2);padding:12px 14px;margin-top:12px}
.actionrow.done{border-color:var(--accent);background:rgba(255,255,255,.02)}
.actionrow .skillcheck{width:24px;height:24px;border-radius:7px;border:2px solid var(--line);flex-shrink:0;margin-top:1px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;color:#0a0a0c;transition:.15s}
.actionrow .skillcheck.done{background:var(--accent);border-color:var(--accent)}
.actionrow .atxt{font-size:13.5px;color:#dcdce2}
.actionrow .atxt .alabel{font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:3px}
.milestone{border:1px dashed var(--orange);border-radius:14px;background:rgba(255,138,61,.06);padding:16px 18px;margin:6px 0 16px;text-align:center}
.milestone h4{font-family:'Anton',sans-serif;font-weight:400;font-size:18px;text-transform:uppercase;color:var(--orange);margin-bottom:4px}
.milestone p{font-size:13.5px;color:var(--muted);margin-bottom:8px}

/* per-accent helpers */
.a-green{--accent:var(--green)} .a-pink{--accent:var(--pink)} .a-cyan{--accent:var(--cyan)}
.a-orange{--accent:var(--orange)} .a-purple{--accent:var(--purple)} .a-yellow{--accent:var(--yellow)}