/* ===== Vanguard SWG ProfCalc - dark theme, after Kodan's ProfCalc V4.0 ===== */
:root{
  --bg:#06070a;
  --panel:#121519;
  --panel-2:#0b0d10;
  --edge:#39414d;
  --edge-soft:#262c34;
  --cyan:#46c7d6;
  --cyan-dim:#2c818c;
  --text:#d4dbe2;
  --text-dim:#828c98;
  --yellow:#e8c84a;
  --box:#1b1f26;
  --box-hi:#272d37;
  --gold:#b9982a;
  --gold-hi:#d4b13a;
  --gold-text:#1a1604;
  --req:#5a4a1c;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:"Trebuchet MS","Segoe UI",Tahoma,sans-serif;
  font-size:14px;
  overflow:hidden;
}
#app{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:minmax(230px,38%) 1fr;
  gap:10px;
  padding:10px;
  height:100vh;
}
.panel{
  background:linear-gradient(180deg,var(--panel) 0%,var(--panel-2) 100%);
  border:1px solid var(--edge);
  border-radius:10px;
  position:relative;
  min-height:0;
  display:flex;
  flex-direction:column;
}

/* ---------- profession picker ---------- */
.title-bar{padding:6px 12px;border-bottom:1px solid var(--edge-soft)}
.app-title{color:var(--text);font-weight:bold;letter-spacing:.3px}
.prof-columns{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:4px 14px;
  padding:10px 14px;
  overflow:auto;
  flex:1;
}
.prof-group h2{
  color:var(--cyan);
  font-size:13px;
  font-weight:bold;
  margin:0 0 4px;
  border-bottom:1px dotted var(--edge-soft);
  padding-bottom:3px;
  white-space:nowrap;
}
.prof-link{
  display:block;
  color:var(--text);
  cursor:pointer;
  padding:1px 5px;
  border-radius:4px;
  line-height:1.55;
  white-space:nowrap;
}
.prof-link:hover{background:var(--box-hi);color:#fff}
.prof-link.has-points{background:var(--gold);color:var(--gold-text);font-weight:bold}
.prof-link.active{outline:1px solid var(--cyan)}
.prof-footer{padding:6px 14px;border-top:1px solid var(--edge-soft)}
.species-pick{display:flex;gap:8px;align-items:center;color:var(--cyan)}
.species-pick select{
  background:var(--panel-2);color:var(--text);
  border:1px solid var(--edge);border-radius:6px;padding:3px 6px;
}

/* ---------- status / points ---------- */
#panel-status{padding:10px 14px;gap:10px}
.brand{
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(90deg,#1a1410,#2a1d10 60%,#120c08);
  border:1px solid var(--edge-soft);border-radius:8px;
  padding:6px 16px;overflow:hidden;position:relative;
}
.brand-text{
  color:#ffd24a;font-weight:900;font-style:italic;line-height:1.05;
  font-size:24px;letter-spacing:.5px;text-shadow:1px 1px 0 #000;
}
.brand-text small{
  display:block;color:#ff9b45;font-size:12px;font-weight:bold;
  letter-spacing:3px;text-transform:uppercase;
}
.brand-logo{
  display:block;
  width:120px;height:46px;        /* logo sits on the right, over the banner */
  object-fit:cover;object-position:center 47%;   /* crops the logo's square padding */
  mix-blend-mode:screen;          /* drops the logo's black background onto the banner */
}
.points-line{display:flex;align-items:baseline;gap:6px}
.points-label{font-size:20px;font-weight:bold;color:var(--text)}
.points-num{font-size:26px;font-weight:900;color:#fff}
.points-total{font-size:18px;color:var(--text-dim)}
.points-bar{
  margin-top:6px;height:22px;border:1px solid var(--edge);border-radius:5px;
  background:repeating-linear-gradient(90deg,#0a0b0d 0 6px,#101216 6px 8px);
  overflow:hidden;
}
.points-fill{
  height:100%;width:100%;
  background:linear-gradient(90deg,#9b1f1f 0%,#d6a82a 28%,#e6d23a 45%,#4fae3f 62%,#39c24a 100%);
  transition:width .12s ease;
}
.points-over{filter:grayscale(.4) brightness(.7)}
.controls{border-top:1px solid var(--edge-soft);padding-top:8px;margin-top:auto}
.controls-label{display:block;text-align:center;color:var(--cyan);font-size:12px;margin-bottom:4px}
.controls-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.ctl{
  background:var(--box);color:var(--text);border:1px solid var(--edge);
  border-radius:8px;padding:6px 16px;cursor:pointer;font-size:13px;
}
.ctl:hover{background:var(--box-hi);color:#fff}
.ctl[data-on="1"]{background:var(--gold);color:var(--gold-text);font-weight:bold}

/* ---------- skill tree ---------- */
#panel-tree{padding:6px 10px 12px}
.tree-title{color:var(--yellow);text-align:center;font-size:26px;margin:6px 0 2px;font-weight:800}
.tree{flex:1;overflow:auto;padding:4px 8px}
.tree-grid{display:flex;flex-direction:column;align-items:center;gap:12px;min-width:max-content;margin:0 auto}
.branch-row{display:grid;gap:18px;justify-content:center}
.prereq-line{color:var(--cyan);text-align:center;cursor:pointer;margin-top:4px}
.prereq-line:hover{text-decoration:underline}

.skill-box{
  position:relative;
  width:176px;min-height:48px;
  background:var(--box);
  border:1px solid var(--edge);
  border-radius:8px;
  color:var(--text);
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:6px 18px 8px 8px;
  cursor:pointer;
  font-size:13px;line-height:1.15;
  user-select:none;
}
.skill-box:hover{background:var(--box-hi);border-color:var(--cyan);color:#fff}
.skill-box.selected{background:var(--gold);border-color:var(--gold-hi);color:var(--gold-text);font-weight:600}
.skill-box.selected:hover{background:var(--gold-hi)}
.skill-box.novice,.skill-box.master{width:234px;font-weight:bold}
.skill-box.master{border-color:var(--yellow)}
.box-cost{position:absolute;right:6px;bottom:3px;color:var(--yellow);font-size:11px;font-weight:bold}
.skill-box.selected .box-cost{color:var(--gold-text)}

/* ---------- info / accumulated ---------- */
#panel-info{padding:10px 16px}
.info{flex:1;overflow:auto;min-height:0}
.info-hint{color:var(--text-dim)}
.info .acc-title{color:var(--text);text-align:center;font-size:20px;margin:0 0 6px}
.info .box-head{color:var(--yellow);text-align:center;font-size:18px;margin:0 0 6px}
.section-label{
  text-align:center;color:var(--cyan);font-weight:bold;font-size:13px;
  margin:14px 0 6px;position:relative;
}
.section-label::before,.section-label::after{
  content:"";position:absolute;top:50%;width:24%;height:1px;background:var(--cyan-dim);
}
.section-label::before{left:8%}.section-label::after{right:8%}
.two-col{columns:2;column-gap:24px}
.two-col .row{break-inside:avoid;line-height:1.5}
.mod-name{color:var(--text)}
.mod-val{color:var(--yellow);font-weight:bold}
.xp-row{line-height:1.5}
.xp-amt{color:var(--yellow);font-weight:bold;margin-right:6px}
.ability{color:var(--text);line-height:1.5}
.cert{color:#e8c089;line-height:1.5}
.desc{color:var(--cyan);font-style:italic;margin:2px 0 8px;line-height:1.4}
.muted{color:var(--text-dim)}
.empty{color:var(--text-dim);text-align:center;margin-top:30px}

::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:var(--edge);border-radius:6px}
::-webkit-scrollbar-track{background:transparent}