:root{
  --bg:#1b1a17; --panel:#232220; --panel2:#2a2926; --line:#3a3833; --text:#e8e2d4; --dim:#9d968a;
  --gold:#e0b25e; --good:#4ea56a; --warn:#d2603c; --mid:#c9a227; --blue:#8fb7ff;
  --eff:#e0b25e; --afk:#7fb069; --gp:#c9a227;
}
*{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:8px;margin-bottom:8px}
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)}
button:disabled{opacity:.5;cursor:default}
select,input{background:#141310;border:1px solid var(--line);color:var(--text);
  border-radius:3px;padding:4px 6px;font:inherit}
select:focus,input:focus{outline:none;border-color:var(--gold)}

.pickrow{display:flex;gap:6px;margin-bottom:6px}
.pickrow select{flex:1}
.pickrow input{width:64px;text-align:center}

nav#goals{display:flex;gap:4px;margin-bottom:6px}
nav#goals button{flex:1;padding:4px 0;font-size:11px}
nav#goals button.on{background:var(--gold);color:#231f16;border-color:var(--gold);font-weight:bold}

#levelnote{color:var(--dim);font-size:10px;margin:-2px 0 8px;min-height:12px}
#levelnote.warn{color:var(--warn)}
#levelnote b{color:var(--text);font-weight:normal}

.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)}

h2{font-size:11px;letter-spacing:.4px;text-transform:uppercase;color:var(--dim);margin:10px 0 5px}
.card{border:1px solid var(--line);border-left-width:4px;border-radius:5px;
  background:var(--panel);padding:7px 9px;margin-bottom:7px}
.card.now{border-left-color:var(--gold)}
.card.next{border-left-color:var(--line);opacity:.92}
.card .head{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.card .name{font-size:13px;font-weight:bold;flex:1 1 auto}
.card .name a{color:var(--text);text-decoration:none;border-bottom:1px dotted var(--dim)}
.card .name a:hover{color:var(--gold);border-color:var(--gold)}
.lvl{color:var(--gold);font-size:11px;white-space:nowrap}
.rate{color:var(--blue);font-size:11px;white-space:nowrap}
.gp{color:var(--gp);font-size:11px;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.low{color:var(--afk);border-color:var(--afk)}
.tag.high{color:var(--warn);border-color:var(--warn)}
.how{color:var(--dim);font-size:11px;margin:3px 0 4px}

.equip{display:flex;flex-wrap:wrap;gap:3px;margin:4px 0}
.equip a{font-size:10px;color:var(--text);text-decoration:none;background:var(--panel2);
  border:1px solid var(--line);border-radius:8px;padding:1px 7px}
.equip a:hover{border-color:var(--gold);color:var(--gold)}
.equip .note{color:var(--dim)}

ul.reqs{margin:3px 0 4px;padding-left:2px;list-style:none;font-size:10px;color:var(--dim)}
ul.reqs li{margin:1px 0;padding-left:14px;position:relative}
ul.reqs li:before{content:"\2022";position:absolute;left:3px;color:var(--dim)}
ul.reqs li.met:before{content:"\2713";color:var(--good)}
ul.reqs li.unmet:before{content:"\2717";color:var(--warn)}
ul.reqs li.unmet{color:var(--warn)}

.locs{margin-top:4px;border-top:1px dotted var(--line);padding-top:4px}
.loc{display:flex;align-items:center;gap:6px;margin:2px 0;font-size:11px}
.loc .ln{flex:1}
.loc .ln .acc{display:block;color:var(--dim);font-size:10px}
.loc .ln .tp{color:var(--blue);font-size:10px}
.loc button{padding:2px 8px;font-size:10px;white-space:nowrap}
.loc a.wl{color:var(--dim);text-decoration:none;font-size:11px}
.loc a.wl:hover{color:var(--gold)}

footer{border-top:1px solid var(--line);padding-top:6px;color:var(--dim);font-size:10px;margin-top:8px}
footer .btns{display:flex;gap:6px;margin-bottom:6px}
footer .btns button{flex:1;font-size:11px}
#status{min-height:13px;margin-bottom:3px}
#status.warn{color:var(--warn)}
#datanote{font-size:9px}
#datanote a{color:var(--dim)}
.dbgrow{margin-top:4px;font-size:9px}
.dbgrow a{color:var(--dim);text-decoration:none;border-bottom:1px dotted var(--line)}
.dbgrow a:hover{color:var(--gold)}
#wikicontent .dbg td{border:0;padding:2px 8px 2px 0;font-size:11px}
#wikicontent .dbg .k{color:var(--dim)}
#wikicontent .dlbtn{display:inline-block;margin:8px 0;padding:5px 10px;border:1px solid var(--gold);
  border-radius:4px;color:var(--gold);text-decoration:none}

/* full-guide overlay */
#wikipanel{position:fixed;inset:0;background:var(--bg);display:none;flex-direction:column;z-index:10}
#wikipanel.open{display:flex}
#wikipanel .bar{display:flex;align-items:center;gap:8px;padding:8px;border-bottom:1px solid var(--line)}
#wikipanel .bar b{flex:1;color:var(--gold);font-size:12px}
#wikicontent{flex:1;overflow:auto;padding:8px;-webkit-user-select:text;user-select:text}
#wikicontent img{max-width:100%;height:auto}
#wikicontent table{border-collapse:collapse;font-size:11px;max-width:100%}
#wikicontent th,#wikicontent td{border:1px solid var(--line);padding:3px 5px}
#wikicontent a{color:var(--blue)}
#wikicontent .mw-editsection{display:none}
#wikicontent h2,#wikicontent h3{color:var(--gold);font-size:13px;margin:12px 0 4px}