@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@400;500;600;700&display=swap');

:root {
  --bg: #060608;
  --bg2: #0a0a10;
  --card: #0e0e18;
  --card2: #141420;
  --border: #1e1e30;
  --border2: #282840;
  --gold: #f0c040;
  --red: #ff3d5a;
  --green: #00e896;
  --violet: #b060ff;
  --blue: #00c8ff;
  --orange: #ff8c00;
  --text: #ffffff;
  --text2: #6060a0;
  --text3: #303050;
  --CIRC52: 326.726;
  --CIRC42: 263.894;
}

*{margin:0;padding:0;box-sizing:border-box;}
body{
  background:var(--bg);color:var(--text);
  font-family:'Rajdhani',sans-serif;
  min-height:100vh;
  background-image:
    radial-gradient(ellipse 50% 30% at 0% 0%, rgba(176,96,255,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 50% 30% at 100% 100%, rgba(0,200,255,0.06) 0%, transparent 60%);
}
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px;}

/* ══════════════════════════════
   PIN LOCK SCREEN
══════════════════════════════ */
.lock-screen{
  position:fixed;inset:0;
  background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  z-index:9999;
  background-image:
    radial-gradient(ellipse 60% 60% at 50% 50%, rgba(176,96,255,0.08) 0%, transparent 70%);
}
.lock-box{
  background:var(--card);
  border:1px solid var(--border2);
  border-radius:24px;padding:40px 36px;
  text-align:center;width:340px;
  box-shadow:0 0 60px rgba(176,96,255,0.15);
}
.lock-logo{font-size:52px;margin-bottom:10px;animation:float 3s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
.lock-title{
  font-family:'Orbitron',monospace;
  font-size:18px;font-weight:900;
  letter-spacing:3px;margin-bottom:6px;
}
.lock-title span{color:var(--gold);}
.lock-sub{font-size:13px;color:var(--text2);margin-bottom:24px;letter-spacing:1px;}
.pin-dots{display:flex;justify-content:center;gap:14px;margin-bottom:10px;}
.pd{
  width:16px;height:16px;border-radius:50%;
  border:2px solid var(--border2);
  background:transparent;
  transition:all 0.2s;
}
.pd.filled{background:var(--gold);border-color:var(--gold);box-shadow:0 0 10px rgba(240,192,64,0.5);}
.pd.error{background:var(--red);border-color:var(--red);box-shadow:0 0 10px rgba(255,61,90,0.5);}
.pin-error{
  height:20px;font-size:12px;color:var(--red);
  margin-bottom:16px;font-weight:600;
  animation:shake 0.4s ease;
}
@keyframes shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-8px);}75%{transform:translateX(8px);}}
.pin-pad{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:10px;margin-bottom:16px;
}
.pp-btn{
  padding:16px;
  background:var(--card2);
  border:1px solid var(--border2);
  border-radius:12px;
  color:var(--text);
  font-family:'Orbitron',monospace;
  font-size:18px;font-weight:700;
  cursor:pointer;transition:all 0.2s;
}
.pp-btn:hover{background:rgba(176,96,255,0.2);border-color:var(--violet);transform:scale(1.05);}
.pp-btn:active{transform:scale(0.95);}
.pp-clear{color:var(--red);font-size:12px;font-family:'Rajdhani',sans-serif;}
.pp-del{color:var(--orange);font-size:16px;}
.lock-hint{font-size:11px;color:var(--text3);}
.lock-hint strong{color:var(--text2);}

/* ══════════════════════════════
   HEADER
══════════════════════════════ */
.hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 22px;
  background:var(--card);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:100;
  box-shadow:0 2px 20px rgba(0,0,0,0.7);
}
.hdr-left{display:flex;align-items:center;gap:12px;}
.hdr-logo{
  font-family:'Orbitron',monospace;
  font-size:16px;font-weight:900;letter-spacing:3px;
}
.hdr-logo em{color:var(--gold);font-style:normal;}
.hdr-badge{
  font-size:11px;font-weight:700;
  padding:3px 10px;border-radius:20px;
  background:rgba(176,96,255,0.15);
  border:1px solid rgba(176,96,255,0.3);
  color:var(--violet);letter-spacing:1px;
}
.period-wrap{
  display:flex;flex-direction:column;align-items:center;
  background:var(--card2);border:1px solid var(--border2);
  padding:5px 16px;border-radius:10px;
}
.pw-lbl{font-size:9px;color:var(--text2);letter-spacing:2px;}
.pw-val{font-family:'Orbitron',monospace;font-size:13px;color:var(--blue);}
.hdr-right{display:flex;align-items:center;gap:10px;}
.hdr-timer-mini{
  font-family:'Orbitron',monospace;
  font-size:18px;font-weight:700;
  color:var(--blue);
  background:var(--card2);
  border:1px solid rgba(0,200,255,0.2);
  padding:6px 14px;border-radius:10px;
  min-width:80px;text-align:center;
}
.lock-btn{
  width:36px;height:36px;
  background:rgba(255,61,90,0.15);
  border:1px solid rgba(255,61,90,0.3);
  border-radius:10px;color:var(--red);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all 0.2s;
}
.lock-btn:hover{background:rgba(255,61,90,0.3);}
.lock-btn i{width:16px;height:16px;}

/* ══════════════════════════════
   PANEL BODY
══════════════════════════════ */
.panel-body{
  display:grid;
  grid-template-columns:240px 1fr 300px;
  gap:14px;padding:14px 18px;
  max-width:1440px;margin:0 auto;
}

/* ══════════════════════════════
   SECTION CARDS
══════════════════════════════ */
.sec-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;padding:16px;
  margin-bottom:12px;
}
.sec-title{
  display:flex;align-items:center;gap:7px;
  font-size:11px;font-weight:700;letter-spacing:2px;
  color:var(--text2);margin-bottom:14px;
  text-transform:uppercase;
}
.sec-title i{width:14px;height:14px;}

/* ══════════════════════════════
   TIMER RING
══════════════════════════════ */
.timer-sec{
  display:flex;align-items:center;justify-content:center;
  position:relative;padding:20px;
  border-color:rgba(0,200,255,0.2);
}
.ring{width:110px;height:110px;transform:rotate(-90deg);}
.ring-bg{fill:none;stroke:#141420;stroke-width:9;}
.ring-fg{
  fill:none;stroke:var(--blue);stroke-width:9;
  stroke-linecap:round;
  stroke-dasharray:326.726;stroke-dashoffset:0;
  transition:stroke-dashoffset 1s linear,stroke 0.3s;
  filter:drop-shadow(0 0 5px var(--blue));
}
.ring-inner{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
}
.ring-time{
  font-family:'Orbitron',monospace;
  font-size:22px;font-weight:900;
  color:var(--blue);
  text-shadow:0 0 10px var(--blue);
}
.ring-lbl{font-size:8px;color:var(--text3);letter-spacing:2px;margin-top:2px;}

/* ══════════════════════════════
   RESULT ENTRY
══════════════════════════════ */
.entry-sec{border-color:rgba(240,192,64,0.2);}
.entry-sub{font-size:11px;color:var(--text2);margin-bottom:12px;margin-top:-10px;}
.entry-grid{
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:6px;margin-bottom:10px;
}
.en-num{
  padding:10px 4px;
  background:var(--card2);
  border:2px solid var(--border2);
  border-radius:10px;
  color:var(--text);
  font-family:'Orbitron',monospace;
  font-size:16px;font-weight:900;
  cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  transition:all 0.2s;
}
.en-num span{font-size:12px;}
.en-num:hover{transform:scale(1.08);border-color:var(--gold);box-shadow:0 0 12px rgba(240,192,64,0.3);}
.en-num:active{transform:scale(0.95);}
.en-num.flash{animation:numFlash 0.4s ease;}
@keyframes numFlash{0%{transform:scale(1.2);background:rgba(240,192,64,0.3);}100%{transform:scale(1);}}
.last-entry{
  text-align:center;font-size:13px;
  color:var(--text2);padding:8px;
  background:var(--card2);border-radius:8px;
  border:1px solid var(--border);
}

/* ══════════════════════════════
   ACCURACY RING
══════════════════════════════ */
.acc-sec{border-color:rgba(0,232,150,0.2);}
.acc-circle-wrap{position:relative;width:90px;height:90px;margin:0 auto 12px;}
.acc-ring{width:90px;height:90px;transform:rotate(-90deg);}
.acc-bg{fill:none;stroke:#141420;stroke-width:8;}
.acc-fg{
  fill:none;stroke:var(--green);stroke-width:8;
  stroke-linecap:round;
  stroke-dasharray:263.894;stroke-dashoffset:263.894;
  transition:stroke-dashoffset 0.8s ease,stroke 0.3s;
  filter:drop-shadow(0 0 4px var(--green));
}
.acc-inner{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
}
.acc-pct{font-family:'Orbitron',monospace;font-size:16px;font-weight:700;color:var(--green);}
.acc-lbl{font-size:7px;color:var(--text3);letter-spacing:1px;}
.acc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.as-item{
  background:var(--card2);border-radius:8px;
  padding:8px;text-align:center;
  border:1px solid var(--border);
}
.as-item span{display:block;font-family:'Orbitron',monospace;font-size:18px;font-weight:700;}
.as-item small{font-size:10px;color:var(--text2);}
.as-item.green span{color:var(--green);}
.as-item.red span{color:var(--red);}
.as-item.gold span{color:var(--gold);}

/* ══════════════════════════════
   SMART PREDICTION
══════════════════════════════ */
.pred-sec{border-color:rgba(176,96,255,0.25);}
.pred-sec-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.pred-sec-header .sec-title{margin-bottom:0;}
.pred-live-dot{
  font-size:11px;font-weight:700;color:var(--green);
  animation:livePulse 1.5s infinite;
}
@keyframes livePulse{0%,100%{opacity:1;}50%{opacity:0.4;}}
.pred-main-box{
  display:flex;align-items:center;justify-content:space-around;
  background:var(--card2);border-radius:14px;
  padding:16px;margin-bottom:12px;
  border:1px solid var(--border2);
}
.pmb-size{
  font-family:'Orbitron',monospace;
  font-size:26px;font-weight:900;
  color:var(--gold);
  text-shadow:0 0 14px rgba(240,192,64,0.4);
}
.pmb-ball{
  width:54px;height:54px;border-radius:50%;
  background:linear-gradient(135deg,var(--violet),var(--blue));
  display:flex;align-items:center;justify-content:center;
  font-family:'Orbitron',monospace;font-size:22px;font-weight:900;
  box-shadow:0 0 18px rgba(176,96,255,0.4);
  animation:ballGlow 2s infinite;
}
@keyframes ballGlow{0%,100%{box-shadow:0 0 18px rgba(176,96,255,0.4);}50%{box-shadow:0 0 30px rgba(176,96,255,0.7);}}
.pmb-color{font-size:14px;font-weight:700;text-align:center;}
.pred-conf-row{
  display:flex;align-items:center;gap:8px;
  font-size:12px;color:var(--text2);margin-bottom:10px;
}
.pcr-bar{flex:1;height:7px;background:var(--card2);border-radius:4px;overflow:hidden;}
.pcr-fill{height:100%;background:linear-gradient(90deg,var(--violet),var(--green));border-radius:4px;transition:width 0.5s;}
#pcrPct{color:var(--green);font-weight:700;min-width:32px;}
.pred-reason{
  font-size:12px;color:var(--text2);
  background:var(--card2);border-radius:8px;
  padding:8px 12px;margin-bottom:12px;
  border-left:3px solid var(--violet);
  font-style:italic;
}
.pred-actions{display:flex;gap:8px;}
.pa-btn{
  flex:1;padding:9px;
  background:rgba(176,96,255,0.15);
  border:1px solid rgba(176,96,255,0.3);
  border-radius:10px;color:var(--violet);
  font-family:'Rajdhani',sans-serif;
  font-size:13px;font-weight:700;
  cursor:pointer;display:flex;align-items:center;
  justify-content:center;gap:6px;transition:all 0.2s;
}
.pa-btn:hover{background:rgba(176,96,255,0.3);}
.pa-btn i{width:14px;height:14px;}
.pa-auto{background:rgba(0,232,150,0.15);border-color:rgba(0,232,150,0.3);color:var(--green);}
.pa-auto:hover{background:rgba(0,232,150,0.3);}
.pa-auto.off{background:rgba(255,61,90,0.15);border-color:rgba(255,61,90,0.3);color:var(--red);}

/* ══════════════════════════════
   NEXT 3 PREDICTIONS
══════════════════════════════ */
.next3-sec{border-color:rgba(0,200,255,0.2);}
.next3-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.n3-item{
  background:var(--card2);border-radius:10px;
  padding:12px 8px;text-align:center;
  border:1px solid var(--border2);
}
.n3-round{font-size:10px;color:var(--text2);letter-spacing:1px;margin-bottom:6px;}
.n3-pred{
  font-family:'Orbitron',monospace;
  font-size:14px;font-weight:700;
  color:var(--gold);
}

/* ══════════════════════════════
   PATTERN LOCK
══════════════════════════════ */
.plock-sec{border-color:rgba(240,192,64,0.2);}
.plock-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:6px;margin-bottom:10px;
}
.pl-btn{
  padding:9px 6px;
  background:var(--card2);
  border:1px solid var(--border2);
  border-radius:9px;
  color:var(--text2);
  font-family:'Rajdhani',sans-serif;
  font-size:12px;font-weight:600;
  cursor:pointer;transition:all 0.2s;
  text-align:center;
}
.pl-btn:hover{border-color:var(--violet);color:var(--text);background:rgba(176,96,255,0.15);}
.pl-btn.active{
  border-color:var(--gold)!important;
  background:rgba(240,192,64,0.15)!important;
  color:var(--gold)!important;
  box-shadow:0 0 12px rgba(240,192,64,0.25);
}
.plock-status{
  background:var(--card2);border-radius:8px;
  padding:8px 12px;font-size:12px;
  border:1px solid var(--border);
  margin-bottom:8px;text-align:center;
}
.pl-unlock-btn{
  width:100%;padding:8px;
  background:rgba(255,61,90,0.1);
  border:1px solid rgba(255,61,90,0.25);
  border-radius:8px;color:var(--red);
  font-family:'Rajdhani',sans-serif;
  font-size:12px;font-weight:600;
  cursor:pointer;transition:all 0.2s;
}
.pl-unlock-btn:hover{background:rgba(255,61,90,0.2);}

/* ══════════════════════════════
   BET GUIDE
══════════════════════════════ */
.guide-sec{border-color:rgba(0,200,255,0.15);}
.guide-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px;}
.gr-item{
  padding:12px 8px;border-radius:10px;
  text-align:center;border:1px solid transparent;
}
.big-gr{background:rgba(255,61,90,0.1);border-color:rgba(255,61,90,0.2);}
.small-gr{background:rgba(0,232,150,0.1);border-color:rgba(0,232,150,0.2);}
.gr-icon{font-size:20px;margin-bottom:4px;}
.gr-label{font-size:16px;font-weight:700;}
.big-gr .gr-label{color:var(--red);}
.small-gr .gr-label{color:var(--green);}
.gr-nums{font-size:11px;color:var(--text2);margin:3px 0;}
.gr-odds{font-size:13px;font-weight:700;color:var(--gold);}
.guide-colors{display:flex;flex-direction:column;gap:5px;}
.gc-item{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text2);}
.gc-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}

/* ══════════════════════════════
   LIVE TRACKER
══════════════════════════════ */
.tracker-sec{border-color:rgba(0,200,255,0.2);}
.tracker-balls{
  display:flex;flex-wrap:wrap;gap:5px;
  margin-bottom:12px;min-height:36px;
}
.tb-empty{font-size:11px;color:var(--text3);}
.tb-ball{
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Orbitron',monospace;font-size:11px;font-weight:700;
  border:2px solid transparent;
  animation:ballIn 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
}
@keyframes ballIn{from{transform:scale(0);opacity:0;}to{transform:scale(1);opacity:1;}}
.tb-red{background:rgba(255,61,90,0.2);border-color:var(--red);color:var(--red);}
.tb-green{background:rgba(0,232,150,0.2);border-color:var(--green);color:var(--green);}
.tb-violet{background:rgba(176,96,255,0.2);border-color:var(--violet);color:var(--violet);}
.tracker-stats{display:flex;flex-direction:column;gap:6px;}
.ts-row{display:flex;align-items:center;gap:8px;font-size:12px;}
.ts-row>span:first-child{min-width:38px;color:var(--text2);}
.ts-bar-wrap{flex:1;height:7px;background:var(--card2);border-radius:4px;overflow:hidden;}
.ts-bar{height:100%;border-radius:4px;transition:width 0.5s;}
.ts-big{background:var(--red);}
.ts-sml{background:var(--green);}
.ts-red{background:var(--red);}
.ts-grn{background:var(--green);}
.ts-vlt{background:var(--violet);}
.ts-row>span:last-child{min-width:28px;text-align:right;font-weight:700;font-size:11px;}

/* ══════════════════════════════
   STREAK DETECTOR
══════════════════════════════ */
.streak-sec{border-color:rgba(255,140,0,0.2);}
.streak-body{min-height:60px;}
.sb-empty{font-size:11px;color:var(--text3);text-align:center;padding:16px;}
.streak-item{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:8px;
  margin-bottom:6px;font-size:13px;font-weight:600;
}
.streak-big{background:rgba(255,61,90,0.15);border:1px solid rgba(255,61,90,0.25);color:var(--red);}
.streak-small{background:rgba(0,232,150,0.15);border:1px solid rgba(0,232,150,0.25);color:var(--green);}
.streak-mixed{background:rgba(240,192,64,0.15);border:1px solid rgba(240,192,64,0.25);color:var(--gold);}
.streak-count{
  font-family:'Orbitron',monospace;
  font-size:18px;font-weight:900;
  min-width:28px;
}

/* ══════════════════════════════
   NUMBER HEATMAP
══════════════════════════════ */
.heat-sec{border-color:rgba(255,61,90,0.15);}
.heatmap{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:8px;}
.hm-cell{
  background:var(--card2);border-radius:8px;
  padding:8px 4px;text-align:center;
  border:1px solid var(--border);
  transition:all 0.3s;
}
.hm-cell span{display:block;font-family:'Orbitron',monospace;font-size:14px;font-weight:700;}
.hm-cell small{display:block;font-size:10px;color:var(--text2);margin-top:2px;}
.hm-legend{display:flex;align-items:center;gap:8px;font-size:10px;}
.hml-bar{
  flex:1;height:6px;border-radius:3px;
  background:linear-gradient(90deg,var(--card2),var(--orange),var(--red));
}

/* ══════════════════════════════
   RESULT LOG
══════════════════════════════ */
.log-sec{border-color:rgba(176,96,255,0.2);}
.log-sec .sec-title{justify-content:space-between;}
.clr-log-btn{
  margin-left:auto;padding:2px 8px;
  background:rgba(255,61,90,0.15);
  border:1px solid rgba(255,61,90,0.3);
  border-radius:5px;color:var(--red);
  font-size:11px;cursor:pointer;
}
.log-wrap{max-height:220px;overflow-y:auto;}
.log-table{width:100%;border-collapse:collapse;font-size:11px;}
.log-table thead th{
  padding:7px 8px;text-align:left;
  background:var(--card2);color:var(--text2);
  font-size:9px;letter-spacing:1px;
  position:sticky;top:0;border-bottom:1px solid var(--border);
}
.log-table tbody tr{border-bottom:1px solid rgba(30,30,48,0.5);}
.log-table tbody tr:hover{background:rgba(255,255,255,0.02);}
.log-table tbody td{padding:7px 8px;}
.log-empty td{text-align:center;color:var(--text3);padding:20px;}
.log-hit{color:var(--green);font-weight:700;}
.log-miss{color:var(--red);font-weight:700;}
.log-ball{
  width:22px;height:22px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:'Orbitron',monospace;font-size:9px;font-weight:700;
}
.lb-red{background:rgba(255,61,90,0.2);color:var(--red);border:1px solid var(--red);}
.lb-green{background:rgba(0,232,150,0.2);color:var(--green);border:1px solid var(--green);}
.lb-violet{background:rgba(176,96,255,0.2);color:var(--violet);border:1px solid var(--violet);}

/* ══════════════════════════════
   TOAST
══════════════════════════════ */
.toast{
  position:fixed;bottom:24px;left:50%;
  transform:translateX(-50%) translateY(70px);
  background:var(--card2);border:1px solid var(--border2);
  color:var(--text);padding:10px 20px;
  border-radius:10px;font-size:13px;font-weight:600;
  transition:transform 0.3s;z-index:9998;
  pointer-events:none;white-space:nowrap;
}
.toast.show{transform:translateX(-50%) translateY(0);}

/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */
@media(max-width:1200px){
  .panel-body{grid-template-columns:220px 1fr;}
  .p-right{display:none;}
}
@media(max-width:800px){
  .panel-body{grid-template-columns:1fr;}
  .hdr{flex-wrap:wrap;gap:8px;}
}