/* Lifted from planner_build/tplcur.html by scripts/build_era_planner.py.
   Do not hand-edit. The palette is remapped to the site's blue on the
   way through — see PALETTE in that script. */
:root{
  --bg:#0A0C11; --card:#101c33; --line:#1c2c4a; --line2:#2f4366;
  --txt:#eef2fb; --mute:#9fb4ff; --hdr:#cfd9ff; --foot:#7184b5;
  --gold:#ffd23f; --goldbg:#2a2410; --cyan:#4fd1ff; --violet:#b98cff;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);
  font:14px/1.5 "Segoe UI",Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.wrap{max-width:1500px;margin:0 auto;padding:26px 24px 90px}
h1{font-size:25px;margin:0 0 4px;letter-spacing:.5px;font-weight:800}
h1 .sub{color:var(--gold)}
h1 .wip{color:var(--foot);font-size:16px;font-weight:600;letter-spacing:0}
.tag{color:var(--foot);font-size:12.5px;margin:0 0 20px}
h2{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--hdr);
  margin:26px 0 10px;font-weight:700;display:flex;align-items:center;gap:10px}
h2::after{content:"";flex:1;height:1px;background:var(--line)}
.panel{background:var(--card);border:1px solid var(--line);border-radius:12px}

.strip{display:flex;flex-wrap:wrap;gap:10px;padding:14px 16px;align-items:center}
.lbl{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--hdr);font-weight:700;margin-right:2px}
.seg{display:flex;background:#0c1729;border:1px solid var(--line);border-radius:9px;padding:3px;gap:2px}
.seg button{background:none;border:0;color:var(--hdr);font:inherit;font-size:12.5px;font-weight:700;
  padding:7px 14px;border-radius:6px;cursor:pointer;white-space:nowrap}
.seg button:hover{color:var(--txt)}
.seg button.on{background:var(--gold);color:#221a05}
.chk{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--hdr);cursor:pointer;user-select:none}
.chk input{accent-color:#ffd23f;width:15px;height:15px}
.sep{width:1px;height:28px;background:var(--line)}

/* roster */
.rost{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}
.rc{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:10px;text-align:center}
.rc.none{opacity:.45}
.rc.pre{opacity:.35}
.rc .pre-tag{font-size:8.5px;letter-spacing:.09em;color:var(--mute);font-weight:700;margin-top:5px}
.rc img{width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid var(--line2);
  background:#0a1428;display:block;margin:0 auto 7px}
.rc .nm{font-size:10.5px;font-weight:800;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sset{display:flex;justify-content:center;gap:2px;margin-top:7px}
.sset button{background:#0c1729;border:1px solid var(--line);color:var(--mute);font:inherit;
  font-size:9px;font-weight:800;width:19px;height:19px;border-radius:4px;cursor:pointer;padding:0}
.sset button:hover{color:var(--txt)}
.sset button.on{background:var(--gold);border-color:var(--gold);color:#221a05}
.sset button.off{opacity:.35;cursor:default}

/* stats */
.stats{display:flex;flex-wrap:wrap;gap:16px;align-items:center;padding:15px 18px}
.stat .v{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
.stat .k{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--hdr);font-weight:700;margin-top:3px}

/* slider */
.dayrow{display:flex;align-items:center;gap:14px;padding:14px 18px;border-top:1px solid var(--line)}
input[type=range]{flex:1;accent-color:var(--gold);height:4px}
.dayv{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;min-width:330px;text-align:right}
.dayv span{color:var(--hdr);font-weight:600}

svg{display:block;width:100%;height:auto;overflow:visible}
.chartbox{padding:16px 18px 8px}
.axl{fill:#cfd9ff;font-size:10px;font-variant-numeric:tabular-nums}
.gl{stroke:#2f4366;stroke-width:1}

/* level readout */
.lvgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:9px}
.lv{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:12px 8px;text-align:center}
.lv.best{border-color:var(--gold)}
.lv .n{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--hdr);font-weight:700}
.lv .el{font-size:30px;font-weight:900;font-variant-numeric:tabular-nums;margin:5px 0 1px}
.lv .ea{font-size:10px;color:var(--mute);font-variant-numeric:tabular-nums}
.lv .ez{font-size:10px;color:var(--violet);opacity:.85;font-variant-numeric:tabular-nums;height:14px}
.lv.zero .el{color:var(--mute)}
.lv.out{opacity:.4}
.lv img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid var(--line2);
  background:#0a1428;display:block;margin:0 auto 6px}
.lvrow{display:flex;align-items:center;gap:6px;margin-top:9px}
.lv input[type=range]{flex:1;min-width:0;accent-color:var(--gold);height:4px}
.lvstep{background:#0c1729;border:1px solid var(--line);color:var(--hdr);font:inherit;font-size:14px;
  font-weight:800;width:24px;height:24px;flex:none;border-radius:6px;cursor:pointer;padding:0;line-height:1}
.lvstep:hover:not(:disabled){color:var(--txt);border-color:var(--gold)}
.lvstep:disabled{opacity:.3;cursor:default}
.lv.over{border-color:#C0392B}
.lv.over .el{color:#E4695C}
.bbar{display:flex;flex-wrap:wrap;gap:16px;align-items:center;padding:14px 18px 0;margin-bottom:12px}
.zbar{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin:12px -18px 0;padding:10px 18px;border-top:1px solid var(--line)}
.zbar img{width:20px;height:20px;object-fit:contain}
.zbar .zk{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--hdr);font-weight:700;margin-right:4px}
.zbar .zv{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--violet)}
.zbar .zs{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--hdr);font-weight:700}
.zsep{width:1px;height:16px;background:var(--line);margin:0 6px}
.bbar .v{font-size:22px}
.over-k{color:#E4695C!important}
.repbar{display:flex;flex-wrap:wrap;gap:14px;align-items:center;padding:11px 16px;border-top:1px solid var(--line)}
.repbar label{font-size:11px;color:var(--hdr);display:flex;align-items:center;gap:6px}
.repbar input{width:84px;background:#0c1729;border:1px solid var(--line);color:var(--violet);font:inherit;
  font-weight:800;font-size:12.5px;padding:4px 7px;border-radius:5px;text-align:right;font-variant-numeric:tabular-nums}
.repbar input:focus{outline:none;border-color:var(--violet)}
.packin{width:180px;background:#0c1729;border:1px solid var(--line2);color:var(--gold);font:inherit;
  font-weight:800;font-size:17px;padding:9px 12px;border-radius:8px;text-align:right;font-variant-numeric:tabular-nums}
.packin::placeholder{color:#5b6c93;font-weight:700}
.packin:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 2px #ffd23f33}
.repbar .t{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--hdr);font-weight:700}
.allocnote{font-size:11.5px;color:var(--foot);margin-top:10px;line-height:1.6}
.allocnote b{color:var(--gold)}

table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--hdr);text-align:left;
  font-weight:700;padding:11px 14px;border-bottom:1px solid var(--line)}
td{padding:9px 14px;border-bottom:1px solid #1c2c4a;font-size:13px}
tr:last-child td{border-bottom:0}
td.n,th.n{text-align:right}
td.g{color:var(--gold);font-weight:800}
.note{font-size:11.5px;color:var(--foot);padding:12px 16px;border-top:1px solid var(--line);line-height:1.65}
.note b{color:var(--gold)}
.phead{display:flex;align-items:center;gap:10px;padding:13px 16px;cursor:pointer;user-select:none;
  font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--hdr);font-weight:700;
  list-style:none;border-radius:12px}
.phead::-webkit-details-marker{display:none}
.phead::before{content:"";width:0;height:0;border:5px solid transparent;border-left-color:var(--hdr);
  margin-right:2px;transition:transform .15s;transform-origin:25% 50%}
details[open] > .phead::before{transform:rotate(90deg)}
.phead:hover{color:var(--txt)}
.phead .ptot{margin-left:auto;font-size:14px;font-weight:800;color:var(--gold);
  letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums}
details[open] > .phead{border-bottom:1px solid var(--line);border-radius:12px 12px 0 0}
details.panel > table{margin-top:0}
.grid2{display:grid;grid-template-columns:1.15fr 1fr;gap:16px}
@media(max-width:1150px){.grid2{grid-template-columns:1fr}.rost{grid-template-columns:repeat(3,1fr)}
  .lvgrid{grid-template-columns:repeat(4,1fr)}}