/* ══════════════════════════════════════════
   CSAB COUNSELLING — predict.css
══════════════════════════════════════════ */

/* ── LOADER ── */
#loader{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity 0.7s ease,visibility 0.7s ease;}
.lbg{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 60% at 20% 20%,rgba(79,158,255,0.07) 0%,transparent 60%),radial-gradient(ellipse 60% 50% at 80% 80%,rgba(255,107,53,0.06) 0%,transparent 60%);}
#particles{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.particle{position:absolute;border-radius:50%;animation:float-up 4s infinite ease-in-out;opacity:0;}
@keyframes float-up{0%{transform:translateY(80px) scale(0);opacity:0;}20%{opacity:0.8;}80%{opacity:0.2;}100%{transform:translateY(-120px) scale(1.5);opacity:0;}}
.lcore{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:1.8rem;width:min(500px,90vw);}
.llogo{display:flex;align-items:center;gap:0.9rem;}
.llogo-box{width:52px;height:52px;background:linear-gradient(135deg,var(--orange),var(--gold));border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;animation:pglow 2s infinite ease-in-out;}
@keyframes pglow{0%,100%{box-shadow:0 0 30px rgba(255,107,53,0.35);}50%{box-shadow:0 0 60px rgba(255,107,53,0.6),0 0 100px rgba(255,107,53,0.2);}}
.llogo-text{font-size:1.4rem;font-weight:800;letter-spacing:-0.5px;}
.orbit-wrap{position:relative;width:96px;height:96px;}
.orbit-r1{position:absolute;inset:0;border-radius:50%;border:2.5px solid transparent;border-top-color:var(--orange);border-right-color:var(--gold);animation:spin 1.4s linear infinite;}
.orbit-r2{position:absolute;inset:14px;border-radius:50%;border:2px solid transparent;border-top-color:var(--blue);border-left-color:var(--teal);animation:spin 2s linear infinite reverse;}
.orbit-c{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;background:var(--card2);border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;font-size:1rem;}
@keyframes spin{to{transform:rotate(360deg);}}
.lstage{text-align:center;min-height:52px;display:flex;flex-direction:column;align-items:center;gap:0.3rem;}
.lstitle{font-size:1.1rem;font-weight:700;background:linear-gradient(90deg,var(--orange),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.lsub{font-size:0.82rem;color:var(--muted);}
.lpwrap{width:100%;}
.lptrack{width:100%;height:5px;background:var(--card2);border-radius:100px;overflow:hidden;border:1px solid var(--border);}
.lpbar{height:100%;border-radius:100px;width:0%;background:linear-gradient(90deg,var(--orange),var(--gold),var(--teal));background-size:200% 100%;animation:sbar 1.5s linear infinite;transition:width 0.5s cubic-bezier(0.4,0,0.2,1);}
@keyframes sbar{0%{background-position:0% 50%;}100%{background-position:200% 50%;}}
.lplabels{display:flex;justify-content:space-between;margin-top:0.5rem;font-family:'DM Mono',monospace;font-size:0.7rem;color:var(--dim);}
.lpct{color:var(--teal);font-weight:600;}
.lcache{display:none;align-items:center;gap:0.6rem;padding:0.6rem 1rem;border-radius:10px;background:rgba(0,229,170,0.08);border:1px solid rgba(0,229,170,0.2);font-size:0.78rem;color:var(--teal);font-weight:600;}
.lcache.show{display:flex;}
.lfiles{width:100%;display:flex;flex-direction:column;gap:0.35rem;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:1rem 1.2rem;}
.lfile{display:flex;align-items:center;gap:0.7rem;font-family:'DM Mono',monospace;font-size:0.75rem;color:var(--dim);transition:color 0.3s;}
.lfile.lactive{color:var(--text);}
.lfile.ldone{color:var(--teal);}
.fst{width:16px;height:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.fspin{width:12px;height:12px;border-radius:50%;border:1.5px solid var(--border2);border-top-color:var(--orange);animation:spin 0.8s linear infinite;}

/* ── LAYOUT ── */
.pred-layout{display:grid;grid-template-columns:330px 1fr;min-height:calc(100vh - 130px);}
.pred-sidebar{border-right:1px solid var(--border);padding:1.8rem 1.4rem;position:sticky;top:60px;height:calc(100vh - 60px);overflow-y:auto;}
.sbs{margin-bottom:1.8rem;}
.sb-label{font-size:0.68rem;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;color:var(--muted);margin-bottom:0.75rem;display:flex;align-items:center;gap:0.4rem;}
.sb-label::after{content:'';flex:1;height:1px;background:var(--border);}
.form-group{margin-bottom:0.9rem;}
.form-label{display:block;font-size:0.77rem;font-weight:600;color:var(--muted);margin-bottom:0.35rem;}
.rank-wrap{position:relative;}
.rank-icon{position:absolute;left:0.8rem;top:50%;transform:translateY(-50%);font-size:0.88rem;color:var(--orange);}
.rank-input{padding-left:2.6rem;font-size:0.98rem;font-weight:600;font-family:'DM Mono',monospace;}

/* ── RESULTS PANEL ── */
.pred-results{padding:1.8rem;}
.filter-bar{display:flex;align-items:center;gap:0.65rem;margin-bottom:1.3rem;flex-wrap:wrap;}
.filter-sel{padding:0.42rem 0.75rem;background:var(--card);border:1px solid var(--border);border-radius:8px;color:var(--muted);font-family:'Outfit',sans-serif;font-size:0.77rem;cursor:pointer;outline:none;transition:all 0.2s;}
.filter-sel:hover{border-color:var(--border2);color:var(--text);}
.filter-sel option{background:var(--surface);}
.pred-empty,.pred-running{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:380px;gap:1rem;text-align:center;color:var(--dim);}
.pred-running{display:none;flex-direction:column;}
.algo-stages{display:flex;flex-direction:column;gap:0.5rem;width:320px;margin-top:0.5rem;}
.astage{display:flex;align-items:center;gap:0.7rem;padding:0.6rem 0.9rem;border-radius:10px;background:var(--card);border:1px solid var(--border);font-size:0.79rem;transition:all 0.3s;}
.astage.active{border-color:rgba(255,107,53,0.3);background:rgba(255,107,53,0.06);}
.astage.active .astage-text{color:var(--orange);}
.astage.done{border-color:rgba(0,229,170,0.2);background:rgba(0,229,170,0.05);}
.astage.done .astage-text{color:var(--teal);}
.astage-icon{font-size:1rem;width:20px;text-align:center;}
.astage-text{font-weight:600;color:var(--muted);}

/* ── RESULT CARDS ── */
.rcard{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1.15rem 1.3rem;display:grid;grid-template-columns:1fr auto;gap:0.8rem;align-items:start;transition:all 0.25s;animation:slin 0.35s cubic-bezier(0.16,1,0.3,1) both;margin-bottom:0.85rem;}
.rcard:hover{border-color:var(--border2);transform:translateX(3px);box-shadow:0 8px 32px rgba(0,0,0,0.3);}
@keyframes slin{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.rcard.ch{border-left:3px solid var(--teal);}
.rcard.cg{border-left:3px solid var(--green);}
.rcard.cm{border-left:3px solid var(--gold);}
.rcard.cl{border-left:3px solid var(--orange);}
.rcard.cr{border-left:3px solid var(--red);}
.rctop{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.35rem;flex-wrap:wrap;}
.rcname{font-size:0.96rem;font-weight:700;line-height:1.3;margin-bottom:0.25rem;}
.rcbranch{font-size:0.79rem;color:var(--muted);margin-bottom:0.55rem;}
.rcmeta{display:flex;gap:0.4rem;flex-wrap:wrap;margin-bottom:0.7rem;}
.sbadge{font-size:0.62rem;font-weight:700;padding:0.12rem 0.45rem;border-radius:100px;letter-spacing:0.04em;}
.sb1{background:rgba(0,229,170,0.1);color:var(--teal);}
.sb2{background:rgba(255,217,61,0.1);color:var(--gold);}
.sb3{background:rgba(79,158,255,0.1);color:var(--blue);}
.cutrow{display:flex;align-items:center;gap:0.75rem;margin-bottom:0.45rem;}
.cutlbl{font-size:0.71rem;color:var(--muted);white-space:nowrap;}
.cuttrack{flex:1;height:5px;background:var(--card2);border-radius:100px;overflow:hidden;}
.cutfill{height:100%;border-radius:100px;transition:width 0.8s ease;}
.cutval{font-family:'DM Mono',monospace;font-size:0.74rem;font-weight:500;white-space:nowrap;}
.trendrow{display:flex;align-items:center;gap:0.55rem;}
/* Right col */
.rcright{display:flex;flex-direction:column;align-items:center;gap:0.45rem;min-width:76px;}
.cring{position:relative;width:68px;height:68px;}
.cring svg{transform:rotate(-90deg);}
.crbg{fill:none;stroke:var(--card2);stroke-width:5;}
.crtxt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.crpct{font-size:0.87rem;font-weight:800;font-family:'DM Mono',monospace;}
.crlbl{font-size:0.51rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.05em;}
.ctag{font-size:0.64rem;font-weight:700;padding:0.14rem 0.5rem;border-radius:100px;text-align:center;white-space:nowrap;}
.tHigh{background:rgba(0,229,170,0.12);color:var(--teal);}
.tGood{background:rgba(34,217,122,0.12);color:var(--green);}
.tMed{background:rgba(255,217,61,0.12);color:var(--gold);}
.tLow{background:rgba(255,107,53,0.12);color:var(--orange);}
.tRisk{background:rgba(255,77,106,0.12);color:var(--red);}
.wbtn{background:none;border:1px solid var(--border);border-radius:8px;padding:0.28rem 0.55rem;font-size:0.69rem;font-weight:600;color:var(--muted);cursor:pointer;font-family:'Outfit',sans-serif;display:flex;align-items:center;gap:0.3rem;transition:all 0.2s;margin-top:0.2rem;}
.wbtn:hover{border-color:rgba(244,114,182,0.3);color:var(--pink);}
.wbtn.saved{border-color:rgba(244,114,182,0.4);color:var(--pink);background:rgba(244,114,182,0.06);}

@media(max-width:960px){.pred-layout{grid-template-columns:1fr;}.pred-sidebar{position:static;height:auto;}.pred-results{padding:1.2rem;}}
@media(max-width:600px){.pred-results{padding:1rem 0.8rem;}.rcard{grid-template-columns:1fr;}.rcright{flex-direction:row;gap:1rem;align-items:center;}}