:root{
  --bg:#0f1218;
  --panel:#171c26;
  --panel-2:#1f2530;
  --border:#2a3140;
  --text:#e9edf3;
  --muted:#8d97a8;
  --red:#e2453f;
  --orange:#e08a3c;
  --yellow:#e0c93c;
  --green:#3fae5a;
  --blue:#2f6fed;
  --radius:10px;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
#app{min-height:100vh;display:flex;flex-direction:column;}
a{color:inherit;}
button{
  font-family:inherit;
  cursor:pointer;
  border:none;
  border-radius:8px;
  padding:10px 16px;
  font-size:14px;
  font-weight:600;
  background:var(--panel-2);
  color:var(--text);
  border:1px solid var(--border);
}
button:hover{filter:brightness(1.15);}
button.primary{background:var(--blue);border-color:var(--blue);color:#fff;}
button.danger{background:transparent;border-color:var(--red);color:var(--red);}
button.ghost{background:transparent;}
button:disabled{opacity:.4;cursor:not-allowed;}
input,select,textarea{
  font-family:inherit;
  background:var(--panel-2);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:8px;
  padding:8px 10px;
  font-size:14px;
}
input::placeholder,textarea::placeholder{color:var(--muted);}
label{font-size:12px;color:var(--muted);display:block;margin-bottom:4px;}
h1,h2,h3,h4{margin:0 0 8px;}
.muted{color:var(--muted);}
.row{display:flex;gap:10px;align-items:center;}
.row.wrap{flex-wrap:wrap;}
.col{display:flex;flex-direction:column;gap:6px;}
.spacer{flex:1;}
.grid{display:grid;gap:14px;}
.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
}
.topbar{
  display:flex;align-items:center;gap:12px;
  padding:14px 24px;border-bottom:1px solid var(--border);
  background:var(--panel);
}
.topbar .logo{height:34px;}
.topbar .title{font-weight:700;letter-spacing:.5px;}
.main{flex:1;padding:24px;max-width:1100px;width:100%;margin:0 auto;}

/* Landing */
.landing{
  flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:28px;
}
.landing .logo-btn{
  background:none;border:none;padding:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:16px;
}
.landing .logo-btn img{
  width:180px;height:180px;object-fit:contain;
  filter:drop-shadow(0 0 24px rgba(47,111,237,.35));
  transition:transform .15s ease;
}
.landing .logo-btn:hover img{transform:scale(1.04);}
.landing .hint{color:var(--muted);font-size:13px;}

.login-box{
  width:320px;display:flex;flex-direction:column;gap:14px;
}
.login-box h2{text-align:center;}
.error-msg{color:var(--red);font-size:13px;min-height:18px;}

/* Dashboard */
.env-card{
  display:flex;align-items:center;gap:16px;cursor:pointer;
}
.env-card:hover{border-color:var(--blue);}
.env-card .fmt-badge{
  font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;
  background:var(--panel-2);border:1px solid var(--border);
}
.record-pill{
  font-size:13px;font-weight:700;padding:4px 10px;border-radius:999px;
}
.record-pill.good{background:rgba(63,174,90,.15);color:var(--green);}
.record-pill.bad{background:rgba(226,69,63,.15);color:var(--red);}
.record-pill.mid{background:rgba(224,201,60,.15);color:var(--yellow);}

/* Result badges */
.badge{
  font-size:11px;font-weight:700;padding:3px 9px;border-radius:6px;text-transform:uppercase;letter-spacing:.5px;
}
.badge.win{background:rgba(63,174,90,.18);color:var(--green);}
.badge.draw{background:rgba(224,201,60,.18);color:var(--yellow);}
.badge.loss{background:rgba(226,69,63,.18);color:var(--red);}
.badge.pending{background:rgba(141,151,168,.18);color:var(--muted);}

/* Rating chips 1-5 */
.rating-chip{
  width:30px;height:30px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:13px;cursor:pointer;border:1px solid var(--border);color:#fff;
}
.rating-chip[data-r="1"]{background:var(--red);}
.rating-chip[data-r="2"]{background:var(--orange);}
.rating-chip[data-r="3"]{background:var(--yellow);color:#1a1a1a;}
.rating-chip[data-r="4"]{background:var(--green);}
.rating-chip[data-r="5"]{background:var(--blue);}
.rating-chip.empty{background:var(--panel-2);color:var(--muted);}
.rating-chip.selected{outline:2px solid #fff;}

table{border-collapse:collapse;width:100%;}
table.matrix th,table.matrix td{border:1px solid var(--border);padding:6px;text-align:center;font-size:12px;vertical-align:top;}
table.matrix th{background:var(--panel-2);}
table.matrix td.rowhead, table.matrix th.rowhead{text-align:left;background:var(--panel-2);min-width:130px;}
table.simple{width:100%;}
table.simple th,table.simple td{padding:8px 10px;border-bottom:1px solid var(--border);text-align:left;font-size:13px;}
table.simple th{color:var(--muted);font-weight:600;text-transform:uppercase;font-size:11px;letter-spacing:.5px;}

.tag{font-size:11px;background:var(--panel-2);border:1px solid var(--border);padding:2px 8px;border-radius:6px;color:var(--muted);}

.module-step{
  border:1px solid var(--border);border-radius:var(--radius);padding:16px;background:var(--panel-2);
}
.pairing-row{
  display:flex;align-items:center;gap:10px;padding:10px;border-bottom:1px solid var(--border);flex-wrap:wrap;
}
.pairing-row:last-child{border-bottom:none;}
.vp-input{width:70px;}
.save-indicator{font-size:11px;color:var(--muted);min-width:52px;}
.roster-field{width:100%;}

.progress-box{
  border:1px solid var(--border);border-radius:var(--radius);padding:16px;background:linear-gradient(180deg,rgba(47,111,237,.08),transparent);
}
.target-line{font-size:14px;margin:6px 0;}
.target-line b{color:var(--blue);}

.modal-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:50;
}
.modal{
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  padding:22px;width:380px;display:flex;flex-direction:column;gap:12px;
}

.tabs{display:flex;gap:6px;border-bottom:1px solid var(--border);margin-bottom:16px;}
.tab{
  padding:10px 16px;cursor:pointer;color:var(--muted);font-weight:600;font-size:13px;
  border-bottom:2px solid transparent;
}
.tab.active{color:var(--text);border-bottom-color:var(--blue);}

.checklist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px;}
.checklist li{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);}
.checklist li.done{color:var(--green);}
.checklist li.current{color:var(--text);font-weight:700;}

.legend{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--muted);}
.legend .sw{display:inline-flex;align-items: