*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --navy:#040d1f;
  --navy2:#071428;
  --card:#0a1a35;
  --card2:#0c1e3d;
  --border:#1a3a6a;
  --cyan:#00e5ff;
  --cyan2:#00b8d9;
  --green:#00e676;
  --purple:#7c4dff;
  --purple2:#9c6fff;
  --text:#e8f4ff;
  --muted:#7aa0cc;
  --gold:#ffc107;
}
html,body{height:100%;background:var(--navy);color:var(--text);font-family:'Inter',sans-serif}

/* NAV */
nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 32px;
  background:rgba(4,13,31,0.95);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(10px);
  position:sticky;top:0;z-index:100;
}
.nav-brand{display:flex;align-items:center;gap:12px}
.nav-logo{
  width:40px;height:40px;border-radius:10px;
  background:linear-gradient(135deg,#0e3a7a,#1a5fb4);
  border:1.5px solid var(--cyan2);
  display:flex;align-items:center;justify-content:center;
}
.nav-logo svg{width:22px;height:22px}
.brand-title{font-family:'Sora',sans-serif;font-size:16px;font-weight:700;color:#fff}
.brand-sub{font-size:11px;color:var(--cyan);letter-spacing:0.05em}
.nav-home{
  display:flex;align-items:center;gap:8px;
  padding:8px 20px;border:1.5px solid var(--border);
  border-radius:8px;background:transparent;
  color:var(--text);font-size:14px;cursor:pointer;
  transition:border-color .2s,background .2s;font-family:'Inter',sans-serif;
}
.nav-home:hover{border-color:var(--cyan2);background:rgba(0,229,255,0.07)}
.nav-back{
  display:none;align-items:center;gap:8px;
  padding:8px 20px;border:1.5px solid var(--border);
  border-radius:8px;background:transparent;
  color:var(--text);font-size:14px;cursor:pointer;
  transition:border-color .2s,background .2s;font-family:'Inter',sans-serif;
}
.nav-back:hover{border-color:var(--cyan2);background:rgba(0,229,255,0.07)}
.nav-back.visible{display:flex}

/* LAST SCORE MODAL */
.modal-overlay{
  display:none;position:fixed;inset:0;z-index:200;
  background:rgba(2,8,20,0.82);backdrop-filter:blur(6px);
  align-items:center;justify-content:center;
}
.modal-overlay.open{display:flex}
.modal-box{
  background:var(--card);border:1px solid var(--border);
  border-radius:18px;padding:40px 36px;
  max-width:380px;width:90%;text-align:center;
  animation:fadeIn .25s ease;position:relative;
}
.modal-close{
  position:absolute;top:14px;right:16px;
  background:none;border:none;color:var(--muted);
  font-size:20px;cursor:pointer;line-height:1;padding:4px 8px;
  border-radius:6px;transition:color .15s,background .15s;
}
.modal-close:hover{color:#fff;background:rgba(255,255,255,0.08)}
.modal-score-circle{
  width:100px;height:100px;border-radius:50%;
  margin:0 auto 20px;
  display:flex;align-items:center;justify-content:center;
  position:relative;border:3px solid var(--cyan2);
  background:rgba(0,180,255,0.07);
}
.modal-score-num{font-family:'Sora',sans-serif;font-size:28px;font-weight:800;color:var(--cyan)}
.modal-title{font-family:'Sora',sans-serif;font-size:18px;font-weight:700;color:#fff;margin-bottom:6px}
.modal-date{font-size:12px;color:var(--muted);margin-bottom:24px}
.modal-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:24px}
.modal-stat{background:rgba(10,26,53,0.7);border:1px solid var(--border);border-radius:10px;padding:14px}
.modal-stat-val{font-family:'Sora',sans-serif;font-size:20px;font-weight:700;margin-bottom:3px}
.modal-stat-label{font-size:11px;color:var(--muted)}
.no-score{color:var(--muted);font-size:14px;line-height:1.7}

/* SCREENS */
.screen{display:none;min-height:calc(100vh - 65px)}
.screen.active{display:block}

/* ===== HOME SCREEN ===== */
#home{
  position:relative;overflow:hidden;
  background:#00061a;
  padding:18px;
  min-height:calc(100vh - 65px);
}
#bg-canvas{
  position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;
}
/* Outer rounded border — matches the glowing rectangle in screenshot */
.home-border-wrap{
  position:relative;z-index:2;
  border:1px solid rgba(20,80,200,0.50);
  border-radius:16px;
  padding:50px 44px;
  background:transparent;
  min-height:calc(100vh - 103px);
  display:flex;align-items:center;
}
.home-inner{
  max-width:1100px;margin:0 auto;width:100%;
  display:grid;grid-template-columns:1fr 360px;gap:60px;align-items:center;
}
.home-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 16px;border-radius:20px;
  border:1px solid var(--border);
  background:rgba(10,26,53,0.8);
  font-size:12px;color:var(--cyan);
  margin-bottom:36px;letter-spacing:0.03em;
}
.home-badge svg{width:14px;height:14px;fill:none;stroke:var(--cyan);stroke-width:2}
.home-title{
  font-family:'Sora',sans-serif;
  font-size:clamp(28px,4vw,48px);
  font-weight:800;line-height:1.2;
  color:#fff;margin-bottom:20px;
}
.home-desc{font-size:15px;color:var(--muted);line-height:1.7;max-width:700px;margin-top:50px;margin-bottom:36px;}
.btn-start{
  display:inline-flex;align-items:center;gap:12px;
  padding:16px 36px;border-radius:10px;
  background:linear-gradient(135deg,var(--purple),var(--cyan2));
  color:#fff;font-size:16px;font-weight:600;
  border:none;cursor:pointer;font-family:'Sora',sans-serif;
  transition:opacity .2s,transform .2s;
  box-shadow:0 4px 30px rgba(124,77,255,0.3);
}
.btn-start:hover{opacity:0.9;transform:translateY(-1px)}
.btn-start svg{width:20px;height:20px}
.home-meta{
  display:flex;align-items:center;gap:20px;
  margin-top:16px;font-size:12px;color:var(--muted);
}
.home-meta span{display:flex;align-items:center;gap:6px}
.home-meta svg{width:14px;height:14px;stroke:var(--muted);fill:none;stroke-width:2}

/* STAT CARDS GRID */
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.stat-card{
  background:#060f2a;
  border:1px solid rgba(20,55,120,0.65);
  border-radius:14px;
  padding:30px 20px 24px;
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
  min-height:150px;justify-content:center;
}
/* Colored bottom accent line */
.stat-card::after{
  content:'';position:absolute;bottom:0;left:8%;right:8%;height:2px;border-radius:1px;
  background:linear-gradient(90deg,transparent,#4a7fff,transparent);
}
.stat-card:nth-child(2)::after{background:linear-gradient(90deg,transparent,#00d4e8,transparent)}
.stat-card:nth-child(3)::after{background:linear-gradient(90deg,transparent,#9b59ff,transparent)}
.stat-card:nth-child(4)::after{background:linear-gradient(90deg,transparent,#00e676,transparent)}
/* Inner corner glow top-right */
.stat-card::before{
  content:'';position:absolute;top:-30px;right:-30px;width:80px;height:80px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,180,255,0.12),transparent 70%);
}
.stat-card:nth-child(2)::before{background:radial-gradient(circle,rgba(0,230,118,0.10),transparent 70%)}
.stat-card:nth-child(3)::before{background:radial-gradient(circle,rgba(124,77,255,0.12),transparent 70%)}
.stat-card:nth-child(4)::before{background:radial-gradient(circle,rgba(0,230,118,0.10),transparent 70%)}
.stat-icon{
  width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:14px;
}
.stat-icon.blue{background:rgba(0,100,255,0.12);border:1.5px solid rgba(0,200,255,0.25)}
.stat-icon.green{background:rgba(0,200,80,0.10);border:1.5px solid rgba(0,230,118,0.25)}
.stat-icon.purple{background:rgba(110,60,255,0.12);border:1.5px solid rgba(150,100,255,0.25)}
.stat-icon.green2{background:rgba(0,200,80,0.10);border:1.5px solid rgba(0,230,118,0.25)}
.stat-icon svg{width:24px;height:24px}
.stat-label{font-size:13px;color:var(--muted);margin-bottom:10px;letter-spacing:0.02em}
.stat-val{font-family:'Sora',sans-serif;font-size:32px;font-weight:700;line-height:1}
.stat-val.cyan{color:var(--cyan)}
.stat-val.white{color:#fff}
.stat-val.purple{color:var(--purple2)}
.stat-val.green{color:var(--green)}

/* card icon specific colors from image */
.stat-card:nth-child(1) .stat-icon{ background:rgba(5,20,80,0.7);   border:1.5px solid rgba(50,100,240,0.55);}
.stat-card:nth-child(2) .stat-icon{ background:rgba(0,50,55,0.6);   border:1.5px solid rgba(0,190,200,0.55);}
.stat-card:nth-child(3) .stat-icon{ background:rgba(35,8,75,0.7);   border:1.5px solid rgba(110,50,210,0.55);}
.stat-card:nth-child(4) .stat-icon{ background:rgba(0,55,25,0.6);   border:1.5px solid rgba(0,185,90,0.55);}

/* ===== QUIZ CONFIG SCREEN ===== */
#config{
  background:var(--navy);
  padding:60px 40px;
  display:none;
}
#config.active{display:flex;flex-direction:column;align-items:center}
.config-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:16px;padding:40px;
  max-width:560px;width:100%;
}
.config-title{font-family:'Sora',sans-serif;font-size:24px;font-weight:700;color:#fff;margin-bottom:8px}
.config-sub{font-size:14px;color:var(--muted);margin-bottom:32px}
.form-group{margin-bottom:24px}
.form-label{font-size:13px;color:var(--muted);margin-bottom:10px;display:block;font-weight:500;letter-spacing:0.03em}
.option-grid{display:grid;gap:10px}
.option-grid.cols2{grid-template-columns:1fr 1fr}
.option-btn{
  padding:12px 16px;border-radius:8px;
  border:1.5px solid var(--border);
  background:transparent;color:var(--text);
  font-size:14px;cursor:pointer;
  transition:all .2s;font-family:'Inter',sans-serif;
  text-align:left;
}
.option-btn:hover{border-color:var(--cyan2);background:rgba(0,229,255,0.05)}
.option-btn.selected{border-color:var(--cyan);background:rgba(0,229,255,0.1);color:#fff}
.btn-primary{
  width:100%;padding:14px;border-radius:10px;
  background:linear-gradient(135deg,var(--purple),var(--cyan2));
  color:#fff;font-size:15px;font-weight:600;
  border:none;cursor:pointer;font-family:'Sora',sans-serif;
  margin-top:8px;transition:opacity .2s;
}
.btn-primary:hover{opacity:0.9}

/* ===== QUIZ SCREEN ===== */
#quiz{
  background:var(--navy);
  padding:40px;
  display:none;
  flex-direction:column;
  align-items:center;
}
#quiz.active{display:flex}
.quiz-wrap{max-width:680px;width:100%}
.quiz-header{
  display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;
}
.quiz-progress-text{font-size:13px;color:var(--muted)}
.quiz-timer{
  display:flex;align-items:center;gap:8px;
  padding:8px 16px;border-radius:20px;
  background:var(--card);border:1px solid var(--border);
  font-size:15px;font-weight:600;font-family:'Sora',sans-serif;
}
.quiz-timer.warning{border-color:#ff5252;color:#ff5252}
.quiz-timer svg{width:16px;height:16px;stroke:var(--cyan);fill:none;stroke-width:2}
.quiz-timer.warning svg{stroke:#ff5252}
.progress-bar{height:4px;background:var(--border);border-radius:2px;margin-bottom:32px;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--purple),var(--cyan));border-radius:2px;transition:width .4s}
.category-tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 12px;border-radius:4px;
  background:rgba(0,229,255,0.08);border:1px solid rgba(0,229,255,0.2);
  font-size:11px;color:var(--cyan);letter-spacing:0.05em;
  margin-bottom:14px;text-transform:uppercase;
}
.question-text{
  font-family:'Sora',sans-serif;font-size:20px;font-weight:600;
  color:#fff;line-height:1.5;margin-bottom:28px;
}
.options-list{display:flex;flex-direction:column;gap:12px}
.opt{
  padding:16px 20px;border-radius:10px;
  border:1.5px solid var(--border);
  background:var(--card);color:var(--text);
  font-size:15px;cursor:pointer;text-align:left;
  transition:all .2s;font-family:'Inter',sans-serif;
  display:flex;align-items:center;gap:14px;
}
.opt-letter{
  width:28px;height:28px;border-radius:6px;
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;color:var(--muted);
  flex-shrink:0;transition:all .2s;
}
.opt:hover:not(.disabled){border-color:var(--cyan2);background:rgba(0,229,255,0.05)}
.opt:hover:not(.disabled) .opt-letter{border-color:var(--cyan2);color:var(--cyan)}
.opt.correct{border-color:var(--green);background:rgba(0,230,118,0.08)}
.opt.correct .opt-letter{background:rgba(0,230,118,0.2);border-color:var(--green);color:var(--green)}
.opt.wrong{border-color:#ff5252;background:rgba(255,82,82,0.08)}
.opt.wrong .opt-letter{background:rgba(255,82,82,0.15);border-color:#ff5252;color:#ff5252}
.opt.disabled{cursor:default}
.explanation{
  margin-top:20px;padding:16px 20px;
  background:rgba(0,229,255,0.05);
  border:1px solid rgba(0,229,255,0.15);
  border-radius:10px;font-size:14px;color:var(--muted);line-height:1.6;
  animation:fadeIn .3s ease;
}
.explanation strong{color:var(--cyan)}
.btn-next{
  margin-top:24px;padding:13px 32px;
  border-radius:8px;border:1.5px solid var(--cyan2);
  background:transparent;color:var(--cyan);
  font-size:14px;font-weight:600;cursor:pointer;
  font-family:'Sora',sans-serif;transition:all .2s;
}
.btn-next:hover{background:rgba(0,229,255,0.1)}

/* ===== RESULTS SCREEN ===== */
#results{
  background:var(--navy);padding:60px 40px;
  display:none;flex-direction:column;align-items:center;
}
#results.active{display:flex}
.results-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:20px;padding:48px 40px;
  max-width:600px;width:100%;text-align:center;
}
.score-circle{
  width:120px;height:120px;border-radius:50%;
  margin:0 auto 28px;
  background:conic-gradient(var(--cyan) var(--p), var(--border) 0);
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.score-circle::before{
  content:'';position:absolute;inset:8px;
  border-radius:50%;background:var(--card);
}
.score-num{
  position:relative;z-index:1;
  font-family:'Sora',sans-serif;font-size:26px;font-weight:800;color:var(--cyan);
}
.results-title{font-family:'Sora',sans-serif;font-size:24px;font-weight:700;color:#fff;margin-bottom:8px}
.results-sub{font-size:14px;color:var(--muted);margin-bottom:32px}
.results-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:32px}
.rs{background:rgba(10,26,53,0.6);border:1px solid var(--border);border-radius:10px;padding:16px}
.rs-val{font-family:'Sora',sans-serif;font-size:22px;font-weight:700;margin-bottom:4px}
.rs-val.green{color:var(--green)}
.rs-val.red{color:#ff5252}
.rs-val.cyan{color:var(--cyan)}
.rs-label{font-size:12px;color:var(--muted)}
.results-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn-outline{
  padding:12px 28px;border-radius:8px;
  border:1.5px solid var(--border);background:transparent;
  color:var(--text);font-size:14px;font-weight:600;cursor:pointer;
  font-family:'Sora',sans-serif;transition:all .2s;
}
.btn-outline:hover{border-color:var(--cyan2);background:rgba(0,229,255,0.06)}

@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* PAUSE MODAL */
.pause-overlay{
  display:none;position:fixed;inset:0;z-index:300;
  background:rgba(0,4,18,0.88);backdrop-filter:blur(8px);
  align-items:center;justify-content:center;
}
.pause-overlay.open{display:flex}
.pause-box{
  background:#060f2a;border:1px solid rgba(20,60,160,0.6);
  border-radius:20px;padding:44px 40px;
  max-width:380px;width:90%;text-align:center;
  animation:fadeIn .22s ease;
  box-shadow:0 0 60px rgba(0,80,220,0.18);
}
.pause-icon{
  width:64px;height:64px;border-radius:50%;
  background:rgba(10,30,100,0.6);border:1.5px solid rgba(60,120,255,0.4);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 20px;
}
.pause-icon svg{width:28px;height:28px;stroke:var(--cyan);fill:none;stroke-width:2}
.pause-title{font-family:'Sora',sans-serif;font-size:22px;font-weight:700;color:#fff;margin-bottom:8px}
.pause-sub{font-size:14px;color:var(--muted);margin-bottom:12px;line-height:1.6}
.pause-progress{
  background:rgba(0,0,0,0.3);border:1px solid var(--border);
  border-radius:8px;padding:12px 16px;margin-bottom:28px;
  display:flex;justify-content:space-between;align-items:center;font-size:13px;
}
.pause-progress span{color:var(--muted)}
.pause-progress strong{color:var(--cyan);font-family:'Sora',sans-serif;font-size:15px}
.pause-actions{display:flex;flex-direction:column;gap:10px}
.btn-resume{
  padding:13px;border-radius:9px;
  background:linear-gradient(135deg,var(--purple),var(--cyan2));
  color:#fff;font-size:15px;font-weight:600;
  border:none;cursor:pointer;font-family:'Sora',sans-serif;
  transition:opacity .2s;
}
.btn-resume:hover{opacity:0.88}
.btn-restart{
  padding:12px;border-radius:9px;
  border:1.5px solid var(--border);background:transparent;
  color:var(--text);font-size:14px;font-weight:600;
  cursor:pointer;font-family:'Sora',sans-serif;transition:all .2s;
}
.btn-restart:hover{border-color:var(--cyan2);background:rgba(0,229,255,0.06)}
.btn-quit{
  padding:12px;border-radius:9px;
  border:1.5px solid rgba(255,82,82,0.35);background:transparent;
  color:#ff6b6b;font-size:14px;font-weight:600;
  cursor:pointer;font-family:'Sora',sans-serif;transition:all .2s;
}
.btn-quit:hover{border-color:#ff5252;background:rgba(255,82,82,0.08)}
.pulse{animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.6}}

/* Dots background */
.dots-bg{
  position:absolute;top:0;left:0;right:0;bottom:0;
  background-image:radial-gradient(circle,rgba(100,160,255,0.15) 1px,transparent 1px);
  background-size:28px 28px;pointer-events:none;opacity:0.5;
}
@media only screen and (max-width: 900px){

  .home-inner{
    display:flex !important;
    flex-direction:column !important;
    grid-template-columns:none !important;
    gap:30px !important;
    width:100% !important;
    max-width:100% !important;
  }

  .stats-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    width:100% !important;
    max-width:100% !important;
    margin-top:30px !important;
  }

  .stat-card{
    width:100% !important;
  }

  .home-title{
    font-size:38px !important;
    line-height:1.15 !important;
  }

  .home-border-wrap{
    padding:28px 18px !important;
    overflow:hidden !important;
  }

}
/* =========================
   SCENARIO SCREEN
========================= */

#scenario{
    width:100%;
    padding:40px;
    display:none;
    justify-content:center;
    align-items:center;
}

#scenario.active{
    display:flex;
}

.scenario-card{
    width:100%;
    max-width:1100px;
    margin:0 auto;
    padding:50px;
    background:#0c1e3d;
    border:1px solid var(--border);
    border-radius:18px;
}

#scenario .category-tag{
    margin-bottom:18px;
}

#scenario .config-title{
    font-family:'Sora',sans-serif;
    font-size:clamp(30px,3vw,40px);
    font-weight:700;
    line-height:1.25;
    color:#fff;
    margin-bottom:20px;
}

#scenario .config-sub{
    font-size:18px;
    font-weight:600;
    color:var(--cyan);
    margin-bottom:28px;
}

#scenario .explanation{
    margin-top:10px;
}

#scenario ul{
    margin-left:24px;
    font-size:16px;
    line-height:1.9;
}

#scenario li{
    margin-bottom:8px;
    color:var(--text);
}

#scenario .btn-primary{
    width:320px;
    margin-top:32px;
}

body.light-mode {
  --bg: #f4f7fb;
  --navy: #f4f7fb;
  --card: #ffffff;
  --card2: #eef4fb;
  --border: #c9d8ea;
  --text: #102033;
  --muted: #526b86;
}

body.light-mode nav {
  background: rgba(255,255,255,0.95);
}

body.light-mode #home {
  background: #f4f7fb;
}

body.light-mode .stat-card,
body.light-mode .scenario-card,
body.light-mode .config-card,
body.light-mode .results-card,
body.light-mode .explanation {
  background: #ffffff;
  color: var(--text);
}

body.light-mode .home-title,
body.light-mode .config-title,
body.light-mode .results-title {
  color: #102033;
}
/* Light theme refinement */
body.light-mode .home-title,
body.light-mode .home-desc,
body.light-mode .home-meta,
body.light-mode .home-meta span {
  color: #ffffff;
}

body.light-mode .btn-outline {
  color: #ffffff;
  border-color: rgba(255,255,255,0.6);
}

body.light-mode .btn-outline:hover {
  background: rgba(255,255,255,0.12);
}

body.light-mode .home-badge {
  background: rgba(4,13,31,0.75);
  color: var(--cyan);
}

body.light-mode .brand-title {
  color: #102033;
}

body.light-mode .nav-home,
body.light-mode .nav-back {
  color: #102033;
  border-color: #c9d8ea;
}

body.light-mode .nav-home:hover,
body.light-mode .nav-back:hover {
  background: #eef4fb;
}

#scenario .config-title {
  font-size: 30px !important;
  line-height: 1.3 !important;
}

#scenario .config-sub {
  font-size: 16px !important;
}

#scenario li {
  font-size: 15px !important;
  line-height: 1.7 !important;
}

.question-text {
  font-size: 18px !important;
  line-height: 1.55 !important;
}

.opt {
  font-size: 14.5px !important;
  line-height: 1.45 !important;
}

.explanation {
  font-size: 14.5px !important;
  line-height: 1.65 !important;
}

.learning-summary-box {
  margin-top: 25px;
  text-align: left;
}

.summary-toggle {
  width: 100%;
  padding: 16px 20px;
  margin-bottom: 10px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: rgba(0,229,255,0.06);
  color: var(--cyan);
  font-size: 16px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.summary-section {
  display: none;
  padding: 18px 22px;
  margin-bottom: 16px;
  border: 1px solid rgba(0,229,255,0.15);
  border-radius: 10px;
  background: rgba(0,229,255,0.04);
  color: var(--text);
}

.summary-section.open {
  display: block;
}

.summary-section ul {
  margin-left: 20px;
  line-height: 1.8;
}

.summary-table {
  width: 100%;
  border-collapse: collapse;
}

.summary-table td {
  padding: 12px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: var(--text);
  vertical-align: top;
}

.summary-table td:first-child {
  width: 35%;
  color: var(--cyan);
  font-weight: 700;
}