:root{
  --bg:#0d0d16; --panel:#161624; --panel2:#1d1d30; --line:#2a2a44;
  --txt:#eaeaf4; --mut:#9a9ab5; --acc:#4fd1c5; --acc2:#f4a261;
  --good:#6fdc8c; --bad:#e76f6f; --radius:14px;
}
*{box-sizing:border-box; margin:0; padding:0}
body{background:var(--bg); color:var(--txt); font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; line-height:1.55; min-height:100vh}
.center{display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:100vh; padding:20px}
.brand{font-size:2.2rem; font-weight:800; letter-spacing:1px}
.brand span{color:var(--acc)}
.brand.small{font-size:1.15rem}
.tagline{color:var(--mut); margin:6px 0 24px; letter-spacing:.5px; font-size:.95rem}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:22px}
.loginCard{width:100%; max-width:400px}
.q{display:block; font-weight:600; font-size:.9rem; margin:14px 0 6px}
input,select,textarea{width:100%; background:var(--panel2); border:1px solid var(--line); color:var(--txt); border-radius:10px; padding:11px 12px; font-size:.95rem; font-family:inherit}
textarea{min-height:80px; resize:vertical}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--acc)}
.btn{background:var(--acc); color:#08131a; border:none; border-radius:10px; padding:12px 22px; font-size:.95rem; font-weight:700; cursor:pointer; font-family:inherit}
.btn:hover{filter:brightness(1.1)}
.btn.ghost{background:transparent; border:1px solid var(--line); color:var(--txt); font-weight:600}
.btn.small{padding:8px 14px; font-size:.85rem}
.btn.full{width:100%}
.btnrow{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}
.btnrow.between{justify-content:space-between}
.btncol{display:flex; flex-direction:column; gap:8px; margin-top:12px}
.qa{color:var(--mut); font-size:.8rem; margin-top:4px}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.chip{background:var(--panel2); border:1px solid var(--line); border-radius:99px; padding:7px 14px; font-size:.85rem; cursor:pointer; user-select:none}
.chip.on{background:rgba(79,209,197,.15); border-color:var(--acc); color:var(--acc)}
.chipBtn{background:var(--panel2); border:1px solid var(--line); color:var(--txt); border-radius:10px; padding:8px 14px; font-size:.85rem; cursor:pointer; font-family:inherit; display:inline-flex; align-items:center; gap:8px}
.chipBtn:hover{border-color:var(--acc)}
.badge{background:var(--acc2); color:#08131a; border-radius:99px; padding:1px 8px; font-size:.72rem; font-weight:800}
/* header */
header{display:flex; justify-content:space-between; align-items:center; padding:16px 22px; border-bottom:1px solid var(--line); position:sticky; top:0; background:rgba(13,13,22,.92); backdrop-filter:blur(6px); z-index:20}
.headRight{display:flex; gap:8px; flex-wrap:wrap}
main{max-width:1400px; margin:0 auto; padding:20px 22px 80px}
.cols{display:grid; grid-template-columns:1fr 320px; gap:22px; align-items:start}
@media(max-width:980px){.cols{grid-template-columns:1fr}}
.secHead{display:flex; justify-content:space-between; align-items:center; margin:18px 0 12px}
.secHead h2{font-size:1.15rem}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px}
.dcard{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; cursor:pointer; transition:border-color .15s, transform .1s; display:flex; flex-direction:column}
.dcard:hover{border-color:var(--acc); transform:translateY(-2px)}
.dcard .cover{height:120px; background:linear-gradient(135deg,#1d1d30,#23234a 60%,#2a2a55); display:flex; align-items:center; justify-content:center; color:var(--mut); font-size:2rem; position:relative; overflow:hidden}
.dcard .cover img{width:100%; height:100%; object-fit:cover}
.dcard .tierChip{position:absolute; top:8px; left:8px; background:rgba(13,13,22,.75); border:1px solid var(--acc); color:var(--acc); border-radius:99px; padding:2px 10px; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:1px}
.dcard .statusChip{position:absolute; top:8px; right:8px; background:rgba(13,13,22,.75); border-radius:99px; padding:2px 10px; font-size:.68rem}
.dcard .body{padding:12px 14px; flex:1; display:flex; flex-direction:column; gap:6px}
.dcard h3{font-size:.98rem}
.dcard .meta{color:var(--mut); font-size:.78rem}
.dcard .dots{display:flex; gap:4px; margin-top:auto}
.dcard .dots i{flex:1; height:4px; border-radius:99px; background:var(--line)}
.dcard .dots i.on{background:var(--acc)}
.lks{display:flex; flex-wrap:wrap; gap:6px}
.lk{display:inline-flex; align-items:center; gap:4px; background:rgba(79,209,197,.12); border:1px solid rgba(79,209,197,.35); color:var(--acc); border-radius:99px; padding:3px 10px; font-size:.72rem; text-decoration:none; max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lk:hover{background:rgba(79,209,197,.25)}
.lk.more{background:var(--panel2); border-color:var(--line); color:var(--mut)}
.lkrow{display:flex; gap:8px; margin-top:8px; align-items:center}
.lkrow .lklabel{flex:1}
.lkrow .lkurl{flex:1.6}
.lkrow .btn{padding:8px 12px}
.goalCard{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px; margin-bottom:12px}
.goalCard h3{font-size:.98rem; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap}
.goalCard .meta{color:var(--mut); font-size:.8rem; margin-top:4px}
.progress{height:8px; background:var(--line); border-radius:99px; margin:10px 0; overflow:hidden}
.progress i{display:block; height:100%; background:linear-gradient(90deg,var(--acc),var(--acc2)); transition:width .3s}
.stepRow{display:flex; align-items:center; gap:10px; padding:7px 0; border-top:1px solid var(--line)}
.stepRow input[type=checkbox]{width:18px; height:18px; accent-color:var(--acc); flex:none}
.stepRow .t{flex:1; font-size:.9rem}
.stepRow .t.done{color:var(--mut); text-decoration:line-through}
.stepRow .if{color:var(--mut); font-size:.72rem; font-style:italic}
.stuckLink{color:var(--acc2); font-size:.78rem; cursor:pointer; text-decoration:underline}
/* mentor panel */
#mentorPanel{position:sticky; top:76px}
#mentorChat{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:12px; height:440px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; margin-bottom:10px}
.msg{max-width:92%; padding:9px 12px; border-radius:12px; font-size:.85rem}
.msg .who{font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--acc); margin-bottom:2px}
.msg.user{align-self:flex-end; background:rgba(79,209,197,.12); border:1px solid rgba(79,209,197,.3)}
.msg.ism{align-self:flex-start; background:var(--panel2)}
.ismBox{background:rgba(79,209,197,.08); border-left:3px solid var(--acc); border-radius:10px; padding:12px 14px; font-size:.9rem; margin-top:12px}
/* modal */
.modal{display:none; position:fixed; inset:0; background:rgba(5,5,10,.7); z-index:50; align-items:flex-start; justify-content:center; padding:30px 16px; overflow-y:auto}
.modal.open{display:flex}
.modalCard{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); width:100%; max-width:520px; padding:20px}
.modalCard.wide{max-width:720px}
.mHead{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.mHead h3{flex:1}
.mHead input[type=text]{flex:1}
.mHead select{width:auto}
.x{background:transparent; border:none; color:var(--mut); font-size:1.1rem; cursor:pointer; padding:4px 8px}
.steps{display:flex; gap:6px; margin:14px 0 10px}
.steps i{flex:1; height:5px; border-radius:99px; background:var(--line)}
.steps i.on{background:var(--acc)}
.fade{animation:fade .18s ease}
@keyframes fade{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none}}
.mini{font-size:.7rem; color:var(--mut); text-transform:uppercase; letter-spacing:1px; font-weight:700; margin:14px 0 2px; display:block}
.placeholder{border:1px dashed var(--acc2); border-radius:10px; padding:12px; text-align:center; color:var(--acc2); font-size:.85rem; background:rgba(244,162,97,.05)}
.placeholder small{display:block; color:var(--mut); margin-top:4px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media(max-width:640px){.grid2{grid-template-columns:1fr}}
.mentorPickCard{display:flex; align-items:center; gap:12px; background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:12px; margin-top:10px; cursor:pointer}
.mentorPickCard:hover{border-color:var(--acc)}
.mentorPickCard .emo{font-size:1.6rem}
.mentorPickCard .nm{font-weight:700}
.mentorPickCard .tg{color:var(--mut); font-size:.78rem}
#toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--panel2); border:1px solid var(--acc); color:var(--txt); padding:10px 20px; border-radius:99px; font-size:.9rem; display:none; z-index:99}
.emptyBox{border:1.5px dashed var(--line); border-radius:var(--radius); padding:26px; text-align:center; color:var(--mut)}
.emptyBox .btn{margin-top:12px}
input[type=range]{accent-color:var(--acc); padding:0; background:transparent}
::-webkit-scrollbar{width:8px} ::-webkit-scrollbar-thumb{background:var(--line); border-radius:99px}