*{
  box-sizing:border-box;
}

body{
  margin:0;
  font-family:Segoe UI,sans-serif;
  background:radial-gradient(circle at top,#1e3a8a,#020617);
  min-height:100vh;
}

/* HEADER SAFE CENTER */
.page-center{
  min-height:calc(100vh - 70px);
  display:flex;
  justify-content:center;
  align-items:center;
  padding:20px;
}

/* CARD */
.card{
  background:#fff;
  width:460px;
  padding:26px;
  border-radius:22px;
  text-align:center;
  box-shadow:0 30px 70px rgba(0,0,0,.4);
}

h2{margin:0;color:#0f172a;}

.user{
  font-size:14px;
  color:#555;
  margin-bottom:10px;
}

/* ================= 3D SPEEDOMETER ================= */
.speedometer{
  position:relative;
  width:320px;
  height:180px;
  margin:25px auto;
  perspective:800px;
}

.meter-3d{
  position:relative;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  transform:rotateX(15deg);
}

/* OUTER ARC with 3D effect */
.arc{
  position:absolute;
  width:320px;
  height:320px;
  border-radius:50%;
  background:conic-gradient(
    from 270deg,
    #7f1d1d 0deg,
    #b91c1c 35deg,
    #f87171 62deg,
    #facc15 90deg,
    #fde047 115deg,
    #bbf7d0 130deg,
    #4ade80 155deg,
    #14532d 180deg
  );
  clip-path: inset(0 0 50% 0);
  box-shadow:
    0 10px 30px rgba(0,0,0,0.4),
    inset 0 -5px 20px rgba(0,0,0,0.3),
    inset 0 5px 20px rgba(255,255,255,0.2);
}

/* Inner glass effect */
.arc::before{
  content:"";
  position:absolute;
  width:220px;
  height:220px;
  background:linear-gradient(180deg, #ffffff 0%, #f0f4f8 50%, #e2e8f0 100%);
  border-radius:50%;
  top:50px;
  left:50px;
  box-shadow:
    inset 0 10px 30px rgba(0,0,0,0.1),
    inset 0 -5px 15px rgba(255,255,255,0.8),
    0 5px 15px rgba(0,0,0,0.2);
}

/* Glass overlay */
.arc::after{
  content:"";
  position:absolute;
  width:300px;
  height:150px;
  background:linear-gradient(180deg, rgba(255,255,255,0.4) 0%, transparent 60%);
  border-radius:150px 150px 0 0;
  top:10px;
  left:10px;
  pointer-events:none;
}

/* 3D NEEDLE */
.needle-wrap{
  position:absolute;
  width:100%;
  height:100%;
  left:0;
  bottom:0;
  transform:rotate(-90deg);
  transform-origin:center bottom;
  transition:transform 1.8s cubic-bezier(.22,1,.36,1);
  z-index:5;
  filter:drop-shadow(2px 4px 6px rgba(0,0,0,0.4));
}

.needle{
  position:absolute;
  left:50%;
  bottom:0;
  width:20px;
  height:130px;
  background:linear-gradient(90deg, #1e293b 0%, #475569 50%, #1e293b 100%);
  clip-path:polygon(40% 100%,60% 100%,52% 0%,48% 0%);
  transform:translateX(-50%);
  box-shadow:2px 2px 8px rgba(0,0,0,0.3);
}

/* 3D HUB */
.hub{
  position:absolute;
  width:36px;
  height:36px;
  background:linear-gradient(145deg, #4a5568, #1a202c);
  border-radius:50%;
  left:50%;
  bottom:0;
  transform:translate(-50%,50%);
  z-index:6;
  box-shadow:
    0 4px 15px rgba(0,0,0,0.5),
    inset 0 2px 4px rgba(255,255,255,0.3),
    inset 0 -2px 4px rgba(0,0,0,0.5);
}

.hub::after{
  content:"";
  position:absolute;
  width:12px;
  height:12px;
  background:radial-gradient(circle, #cbd5e1, #64748b);
  border-radius:50%;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

/* LABELS */
.labels span{
  position:absolute;
  font-size:12px;
  font-weight:600;
  color:#111;
}

.l0{left:0;bottom:0;}
.l50{left:45px;top:60px;}
.l100{left:145px;top:12px;}
.l150{right:45px;top:60px;}
.l200{right:0;bottom:0;}

/* SCORE */
.score-text{
  font-size:18px;
  margin-top:8px;
  font-weight:800;
}

/* RISK */
.risk-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-top:8px;
}

.bulb{
  width:30px;
  height:30px;
  border-radius:50%;
  animation:blink 1.1s infinite;
}

.bulb-red{background:#dc2626;box-shadow:0 0 18px #dc2626;}
.bulb-yellow{background:#facc15;box-shadow:0 0 18px #facc15;}
.bulb-green{background:#22c55e;box-shadow:0 0 18px #22c55e;}

@keyframes blink{
  0%,100%{opacity:1}
  50%{opacity:.35}
}

.risk-text{
  font-size:20px;
  font-weight:800;
}

.risk-good{color:#14532d}
.risk-mid{color:#a16207}
.risk-bad{color:#7f1d1d}

.note{
  font-size:12px;
  color:#666;
  margin-top:10px;
  background:#f1f5f9;
  padding:10px;
  border-radius:10px;
}

/* FORM (LOGIN / REGISTER) */
.form-group{
  text-align:left;
  margin-bottom:16px;
}

.form-group label{
  font-size:13px;
  font-weight:700;
  color:#0f172a;
  margin-bottom:6px;
  display:block;
}

.form-group input{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid #cbd5e1;
}

.btn{
  width:100%;
  padding:13px;
  border:none;
  border-radius:10px;
  background:#1e3a8a;
  color:#fff;
  font-size:16px;
  font-weight:800;
  cursor:pointer;
}

.btn:hover{
  background:#1d4ed8;
}

/* MOBILE */
@media(max-width:480px){
  .card{
    width:94%;
    max-width:100%;
    padding:20px 15px;
    overflow:hidden;
  }
  /* Mobile speedometer will be handled separately below */
}
/* ================= FORCE 3D SPEEDOMETER FIX ================= */
.speedometer{
  width:320px !important;
  height:180px !important;
  position:relative !important;
  perspective:800px !important;
  overflow:visible;
  margin:25px auto;
}

.meter-3d{
  position:relative;
  width:100%;
  height:100%;
  overflow:visible;
}

.arc{
  width:320px !important;
  height:320px !important;
  top:0 !important;
  left:0 !important;
  clip-path: inset(0 0 50% 0) !important;
}

.arc::before{
  width:220px !important;
  height:220px !important;
  top:50px !important;
  left:50px !important;
}

.needle-wrap{
  bottom:0 !important;
  top:auto !important;
  transform-origin:center bottom !important;
}

.hub{
  bottom:0 !important;
  top:auto !important;
  transform:translate(-50%,50%) !important;
}

/* ===== MOBILE RESPONSIVE SPEEDOMETER ===== */
@media(max-width:480px){
  .speedometer{
    width:260px !important;
    height:150px !important;
    margin:20px auto !important;
    transform:scale(0.85);
    transform-origin:center center;
  }
  
  .meter-3d{
    transform:rotateX(10deg) !important;
  }
  
  .arc{
    width:260px !important;
    height:260px !important;
  }
  
  .arc::before{
    width:180px !important;
    height:180px !important;
    top:40px !important;
    left:40px !important;
  }
  
  .arc::after{
    width:240px !important;
    height:120px !important;
  }
  
  .needle{
    height:110px !important;
  }
  
  .hub{
    width:30px !important;
    height:30px !important;
  }
  
  .labels span{
    font-size:10px !important;
  }
  
  .l50{left:35px !important;top:50px !important;}
  .l100{left:118px !important;top:8px !important;}
  .l150{right:35px !important;top:50px !important;}
  
  .qr-code img{
    width:120px !important;
    height:120px !important;
  }
  
  .qr-section{
    padding:15px !important;
  }
  
  .download-qr-btn{
    padding:10px 18px !important;
    font-size:13px !important;
  }
}

/* QR CODE SECTION */
.qr-section{
  margin-top:20px;
  padding:20px;
  background:linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-radius:16px;
  text-align:center;
}

.qr-section h4{
  margin:0 0 15px 0;
  color:#1e293b;
  font-size:16px;
}

.qr-code{
  display:inline-block;
  padding:10px;
  background:#fff;
  border-radius:12px;
  box-shadow:0 4px 15px rgba(0,0,0,0.1);
}

.qr-code img{
  display:block;
  width:150px;
  height:150px;
}

.download-qr-btn{
  display:inline-block;
  margin-top:15px;
  padding:12px 24px;
  background:linear-gradient(135deg, #3b82f6, #1d4ed8);
  color:#fff;
  text-decoration:none;
  border-radius:10px;
  font-weight:700;
  font-size:14px;
  transition:all 0.3s;
}

.download-qr-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(59,130,246,0.4);
}

/* BLINKING NOTE */
.blink-note{
  animation:blinkNote 1.5s infinite;
}

@keyframes blinkNote{
  0%,100%{opacity:1}
  50%{opacity:0.4}
}

/* SCROLL ACTIVITY */
.activity-scroll{
  max-height:170px;
  overflow-y:auto;
  padding:10px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  margin-top:15px;
}

/* MOBILE INPUT BOX */
.mobile-box{
  display:flex;
  gap:10px;
  margin:15px 0;
}

.mobile-box select{
  width:35%;
  padding:12px;
  border-radius:10px;
  border:1px solid #cbd5e1;
  font-weight:600;
}

.mobile-box input{
  width:65%;
  padding:12px;
  border-radius:10px;
  border:1px solid #cbd5e1;
}

/* MOBILE */
@media(max-width:480px){
  .mobile-box{
    flex-direction:column;
  }
  .mobile-box select,
  .mobile-box input{
    width:100%;
  }
}