:root{
  --bg: #f4f7fb;
  --card: #ffffff;
  --muted: #666;
  --accent: #2b90ff;
  --accent-2: #2dd4bf;
  --text: #222;
  --shadow: rgba(15, 23, 42, 0.523);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background-color: #3aa0ff;
  font-family: Inter,Segoe UI,system-ui,Roboto,"Helvetica Neue",Arial;
  background:var(--bg);
  color:#000000;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding:18px;
}

/* Header */
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:25px;
  background-color: #3aa0ff;
  border:#000000;
  border-radius: 10px;
  height: 50px;
  margin-left: -10px;
  margin-right: -10px;
}
.brand{display:flex;align-items:center;gap:12px}
.logo{height:48px;width:48px;object-fit:cover;border-radius:8px;border:2px solid rgba(0,0,0,0.06)}
.site-title{font-weight:700;font-size:1.1rem;margin-left: 12px;}
.site-sub{font-size:0.85rem;color:var(--muted); margin-left: 12px;}

/* header actions */
.header-actions{display:flex;align-items:center;gap:8px}
.icon-btn{background:transparent;border:1px solid rgb(67 67 67);padding:4px 10px;border-radius:8px;cursor:pointer;text-decoration:none;color:var(--text);transition:all .25s ; margin-right: 6px;}
.icon-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px var(--shadow)}

/* Toggle */
.toggle{position:relative;display:inline-block;width:46px;height:26px;margin-right:6px}
.toggle input{display:none}
.toggle-slider{position:absolute;cursor:pointer;inset:0;background:#ddd;border-radius:30px;transition:all .25s}
.toggle-slider:before{content:"";position:absolute;left:4px;top:4px;width:18px;height:18px;background:#fff;border-radius:50%;transition:all .25s;box-shadow:0 2px 6px rgba(0,0,0,0.12)}
.toggle input:checked + .toggle-slider{background:linear-gradient(90deg,var(--accent),#4a8bff)}
.toggle input:checked + .toggle-slider:before{transform:translateX(20px)}

/* Layout */
.main{
  display:grid;
  grid-template-columns: 1fr 320px;
  gap:18px;
  align-items:start;
  max-width:1200px;
  margin:auto;
}

/* Cards */
.card{
  background:var(--card);
  background-color: #f8fffa;
  border-radius:12px;
  padding:18px;
  box-shadow:0 8px 30px var(--shadow);
  border:1px solid rgba(0,0,0,0.03);
}

/* Calculator */
.calculator h2{margin:0 0 8px}
.muted{color:var(--muted)}
.top-inputs{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0}
.field{flex:1;min-width:160px}
.field label{display:block;font-weight:600;margin-bottom:6px}
.field input{width:100%;padding:8px;border-radius:8px;border:1px solid rgba(0,0,0,0.08);background:transparent}

/* subjects */
.subject-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.subject-actions .action{padding:8px 12px;border-radius:8px;border:none;background:linear-gradient(90deg,var(--accent),#3aa0ff);color:#fff;cursor:pointer;transition:all .25s}

/* subject card */
.subject-card{display:flex;gap:12px;align-items:center;padding:12px;border-radius:10px;border:1px solid rgba(0,0,0,0.04);transition:transform .18s,box-shadow .18s}
.subject-card:hover{transform:translateY(-6px);box-shadow:0 10px 24px rgba(9,30,66,0.08)}
.subject-card .sub-left{flex:0 0 90px;font-weight:700}
.subject-card .sub-right{flex:1;display:flex;gap:10px;align-items:center}
.subject-card select, .subject-card input{
  padding:8px;
  border-radius:8px;
  border:2px solid rgba(0,0,0,0.4); /* 🔥 bold border */
  min-width:80px;
  transition:border-color .25s, box-shadow .25s;
}
.subject-card select:hover, .subject-card input:hover,
.subject-card select:focus, .subject-card input:focus{
  border-color: var(--accent);
  box-shadow:0 0 6px rgba(43,144,255,0.5);
  outline:none;
}

/* controls */
.controls{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.primary{background:linear-gradient(90deg,var(--accent),#3aa0ff);color:#fff;border:none;padding:10px 14px;border-radius:10px;cursor:pointer;transition:all .25s}
.ghost{background-color: #96cfff;border:1px solid rgb(0, 0, 0);padding:10px 12px;border-radius:10px;cursor:pointer;transition:all .25s}
.controls a.ghost{text-decoration:none; color:inherit}

/* 🔥 Button Hover Popup */
button:hover, .action:hover, .primary:hover, .ghost:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* results */
.results{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:16px}
.visuals{display:flex;align-items:center;gap:14px}
canvas#gauge{background:transparent;border-radius:50%}
.progress-wrapper{width:200px}
.progress-bar-bg{background:linear-gradient(180deg,#eef6ff,#f8fcff);height:18px;border-radius:10px;overflow:hidden;border:1px solid rgba(0,0,0,0.04)}
.progress-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .6s ease}
.progress-label{text-align:center;margin-top:6px;font-weight:600}

.result-text p{margin:6px 0;font-weight:700}

/* ref table */
.ref-table{width:100%;border-collapse:collapse;margin-bottom:8px}
.ref-table th, .ref-table td{padding:6px;text-align:center;border-bottom:1px solid rgba(0,0,0,0.04)}
.ref-table thead th{font-weight:700}

/* tips */
.tips{padding-left:18px;margin:0}

/* footer */
.site-footer {
  margin-top: 42px;
  background-color: #d9daff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  text-align: center;
}

.footer-left a,
.footer-right a {
  margin: 0 8px;
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
}

.footer-center {
  flex: 1;
  text-align: center;
  font-weight: 600;
}

.footer-left {
  text-align: left;
}

.footer-right {
  text-align: right;
}


/* small screens */
@media (max-width:980px){
  .main{grid-template-columns:1fr}
  .visuals{justify-content:center}
}

/* Dark Mode */
body.dark {
  background-color: #35455f; /* lighter dark background */
  color: #000000;
}

body.dark header,
body.dark footer,
body.dark .subject-card,
body.dark .results-card {
  background-color: #273449; /* card shade */
  color: #e2e8f0;
  border: 1px solid #1854aa;
}

body.dark .teams-button,
body.dark button {
  background-color: #2b90ff;
  color: #fff;
}

body.dark input,
body.dark select {
  background-color: #334155;
  color: #e2e8f0;
  border: 2px solid #475569; /* keep bold border in dark mode */
}

body.dark a {
  color: #38bdf8; /* cyan for links */
}