:root{
  --bg:#1b1a17; --panel:#232220; --panel2:#2a2926; --line:#3a3833; --text:#e8e2d4; --dim:#9d968a;
  --gold:#e0b25e; --good:#4ea56a; --warn:#d2603c; --mid:#c9a227; --blue:#8fb7ff; --purple:#b085f5;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;padding:8px;background:var(--bg);color:var(--text);
  font:12px/1.45 "Trebuchet MS",Verdana,sans-serif;-webkit-user-select:none;user-select:none}
header{display:flex;align-items:center;gap:6px;margin-bottom:6px}
h1{font-size:13px;margin:0;flex:1;color:var(--gold);letter-spacing:.4px}
button{background:var(--panel);color:var(--text);border:1px solid var(--line);
  border-radius:4px;padding:4px 8px;font:inherit;cursor:pointer}
button:hover{border-color:var(--gold)}
input,select,textarea{background:#141310;border:1px solid var(--line);color:var(--text);
  border-radius:3px;padding:4px 6px;font:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold)}
a{color:var(--blue)}

.cdchip{font-size:10px;color:var(--dim);background:var(--panel);border:1px solid var(--line);
  border-radius:8px;padding:2px 7px;white-space:nowrap}
.cdchip b{color:var(--gold);font-weight:normal;font-variant-numeric:tabular-nums}

.userrow{display:flex;gap:6px;margin-bottom:6px}
.userrow input{flex:1}

nav#tabs{display:flex;gap:3px;margin-bottom:8px;flex-wrap:wrap}
nav#tabs button{flex:1;padding:4px 2px;font-size:11px;min-width:52px}
nav#tabs button.on{background:var(--gold);color:#231f16;border-color:var(--gold);font-weight:bold}

#sortrow{display:flex;align-items:center;gap:6px;margin:-2px 0 8px}
#sortrow label{color:var(--dim);font-size:10px}
#sortrow select{flex:0 1 170px;font-size:11px;padding:2px 4px}

.tag.mins{color:var(--blue);border-color:var(--line)}
.tag.eff-low{color:var(--good);border-color:var(--good)}
.tag.eff-med{color:var(--mid);border-color:var(--mid)}
.tag.eff-high{color:var(--warn);border-color:var(--warn)}
.ttips.est{color:var(--dim);cursor:help}
.task.hiddenrow{opacity:.55;border-left-color:var(--line)}

.progress{color:var(--dim);font-size:11px;margin:0 0 6px 2px}
.progress b{color:var(--gold);font-weight:normal}

h2.grp{font-size:11px;letter-spacing:.4px;text-transform:uppercase;color:var(--dim);
  margin:10px 0 5px;cursor:pointer}
h2.grp .count{color:var(--line)}

.task{border:1px solid var(--line);border-left-width:4px;border-left-color:var(--line);
  border-radius:5px;background:var(--panel);padding:6px 8px;margin-bottom:6px}
.task.locked{opacity:.55;border-left-color:var(--warn)}
.thead{display:flex;align-items:center;gap:7px}
.cb{width:26px;height:22px;min-width:26px;padding:0;border-radius:4px;font-size:13px;line-height:1;
  color:var(--good)}
.cb.on{background:var(--good);border-color:var(--good);color:#12210f;font-weight:bold}
.cb.multi{width:auto;min-width:34px;padding:0 6px;font-size:10px;color:var(--text)}
.cb.multi.on{color:#12210f}
.cb.none{border:0;background:none;color:var(--line);cursor:default;text-align:center}
.tname{flex:1;font-size:12.5px;font-weight:bold;cursor:pointer}
.tname:hover{color:var(--gold)}
.tname.noexp{cursor:default}
.tname.noexp:hover{color:var(--text)}
.live{color:var(--purple);font-size:10.5px;white-space:nowrap}
.tag{font-size:9px;border:1px solid var(--line);border-radius:8px;padding:1px 6px;color:var(--dim);white-space:nowrap}
.tag.f2p{color:var(--good);border-color:var(--good)}
.tag.unk{color:var(--mid);border-color:var(--mid);cursor:help}
.tvalue{color:var(--dim);font-size:10.5px;margin:2px 0 0 33px}
.del{color:var(--dim);text-decoration:none;font-size:14px;padding:0 4px}
.del:hover{color:var(--warn)}

.tdetail{border-top:1px dotted var(--line);margin-top:6px;padding-top:6px;font-size:11px}
.chips{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:5px}
.chip{font-size:9.5px;border:1px solid var(--line);border-radius:8px;padding:1px 7px;color:var(--dim)}
.chip.ok{color:var(--good);border-color:var(--good)}
.chip.bad{color:var(--warn);border-color:var(--warn)}
.chip.unk{color:var(--mid);border-color:var(--mid)}
.manual{display:block;margin:4px 0;color:var(--dim);cursor:pointer}
.tloc,.ttp{margin:3px 0}
.tloc b,.ttp b{color:var(--dim);font-weight:normal}
.tloc button.mini{margin-left:6px}
button.mini{padding:2px 8px;font-size:10px}
.ttips{color:var(--dim);margin:4px 0;font-size:10.5px}
.ttips.live2{color:var(--purple)}
.tlinks{display:flex;gap:12px;margin-top:5px;font-size:10px}
.tlinks a{color:var(--blue);text-decoration:none}
.tlinks a.dim{color:var(--dim)}
.tlinks a:hover{color:var(--gold)}

.foldline{margin:8px 2px;font-size:10.5px}
.foldline a{color:var(--dim)}
.foldline a:hover{color:var(--gold)}

.banner{border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:5px;
  background:var(--panel);padding:5px 8px;margin-bottom:8px;font-size:11px;color:var(--dim)}
.banner b{color:var(--text)}
.addform{display:flex;gap:5px;margin:10px 0 6px}
.addform input:first-child{flex:1}
.presets{display:flex;gap:5px;flex-wrap:wrap}

footer{border-top:1px solid var(--line);padding-top:6px;color:var(--dim);font-size:10px;margin-top:10px}
#status{min-height:13px;margin-bottom:3px}
#status.warn{color:var(--warn)}
#datanote{font-size:9px}
#datanote a{color:var(--dim)}

#mapwrap,#settings{position:fixed;inset:0;background:var(--bg);display:none;flex-direction:column;z-index:10}
#mapwrap.open,#settings.open{display:flex}
#mapwrap .bar,#settings .bar{display:flex;align-items:center;gap:8px;padding:8px;border-bottom:1px solid var(--line)}
#mapwrap .bar b,#settings .bar b{flex:1;color:var(--gold);font-size:12px}
#mapframe{flex:1;border:0;width:100%}
.setbody{flex:1;overflow:auto;padding:10px;-webkit-user-select:text;user-select:text}
.setbody h2{font-size:11px;letter-spacing:.4px;text-transform:uppercase;color:var(--dim);margin:14px 0 4px}
.setbody h2:first-child{margin-top:0}
.setbody p.dim{color:var(--dim);font-size:10px;margin:2px 0 6px}
.diary{display:block;margin:3px 0;cursor:pointer}
#proxy,#token{width:100%}
.btnrow{display:flex;gap:6px;margin-top:6px}
.danger{border-color:var(--warn);color:var(--warn)}
.danger:hover{background:var(--warn);color:#1b1a17}