:root {
  --ro-navy:#1e2e82; --ro-navy-dk:#141e60; --ro-navy-lt:#3a52a0;
  --ro-chrome:#c8cad8; --ro-chrome-dk:#9ea0b8;
  --ro-win-bg:#f0ece4; --ro-win-bg2:#e8e4dc; --ro-win-stripe:#dedad2;
  --ro-cell-empty:#ccc8c0; --ro-cell-bdr:#a8a49c;
  --ro-text:#1a1a1a; --ro-text-dim:#585850; --ro-text-white:#ffffff;
  --f-locked:grayscale(90%) brightness(0.45) opacity(0.55);
  --f-avail:grayscale(20%) brightness(0.78) saturate(0.7);
  --f-invested:none; --f-maxed:brightness(1.08) saturate(1.1);
  /* Surface colours (overridden in night mode) */
  --s-topbar-bg:linear-gradient(180deg,#e8e4dc 0%,#d8d4cc 100%);
  --s-topbar-bdr:#686058;
  --s-panel-bg:#e0dcd4;
  --s-panel-bdr:#a8a49c;
  --s-btn-bg:linear-gradient(180deg,#e8e4dc,#c8c4b8);
  --s-btn-bdr:#807868;
  --s-btn-color:#202020;
  --s-grid-bg:#f0ece4;
  --s-trees-bg:#b8b0a0;
  --s-info-bg:#f0ece4;
  --s-info-bdr:#686058;
  --s-info-icon-bg:linear-gradient(180deg,#d8d4cc,#c8c4b8);
  --s-info-req-bg:#ece8e0;
  --s-empty-box:#c8c4b8;
  --s-sk-frame:#c8c4b8;
  --s-modal-bg:#f0ece4;
  /* Mobile pink accent theme */
  --mob-accent-dk:#6f425a; --mob-accent:#8b5870; --mob-accent-lt:#b77d94;
  --mob-accent-text:#f2cbd9; --mob-accent-bright:#fff8fb;
  --mob-topbar-bg:linear-gradient(180deg,#8b5870 0%,#6f425a 100%);
  --mob-topbar-bdr:#4d3045;
  --mob-nav-bg:linear-gradient(180deg,#6f425a 0%,#4d3045 100%);
  --mob-nav-bdr:#3b2535;
}
body.night {
  --ro-win-bg:#1e2028; --ro-win-bg2:#252830; --ro-win-stripe:#2a2e3a;
  --ro-cell-empty:#2a2e3a; --ro-cell-bdr:#404858;
  --ro-text:#d8d4cc; --ro-text-dim:#8888a0;
  --f-locked:grayscale(90%) brightness(0.3) opacity(0.5);
  --f-avail:grayscale(20%) brightness(0.6) saturate(0.6);
  --s-topbar-bg:linear-gradient(180deg,#252830 0%,#1a1e28 100%);
  --s-topbar-bdr:#10141e;
  --s-panel-bg:#2a2e3a;
  --s-panel-bdr:#404858;
  --s-btn-bg:linear-gradient(180deg,#303440,#20242e);
  --s-btn-bdr:#484c60;
  --s-btn-color:#c0bcd0;
  --s-grid-bg:#1e2028;
  --s-trees-bg:#141820;
  --s-info-bg:#1e2028;
  --s-info-bdr:#10141e;
  --s-info-icon-bg:linear-gradient(180deg,#252830,#1e2028);
  --s-info-req-bg:#252830;
  --s-empty-box:#252830;
  --s-sk-frame:#303440;
  --s-modal-bg:#1e2028;
  /* Mobile pink accent — night overrides */
  --mob-accent-lt:#e4bac9; --mob-accent-text:#e4bac9; --mob-accent-bright:#ffe4ee;
  --mob-topbar-bg:linear-gradient(180deg,#3a2435 0%,#251622 100%);
  --mob-topbar-bdr:#1b1018;
  --mob-nav-bg:linear-gradient(180deg,#2d1a29 0%,#1b0f18 100%);
  --mob-nav-bdr:#1b1018;
}
.night .sk-lv{color:#8888a0;}
.night .skill-cell.invested .sk-lv{color:#8898ee;}
.night .skill-cell.maxed .sk-lv{color:#6080ff;}
.night .skill-cell.granted .sk-lv{color:#c0960a;}
/* Night mode button */
.theme-btn{width:100%;display:flex;align-items:center;gap:6px;padding:6px 10px 8px;background:none;border:none;border-top:1px solid rgba(255,255,255,.08);color:#8898cc;font-family:Tahoma,sans-serif;font-size:10px;cursor:pointer;text-align:left;margin-top:auto;}
.theme-btn:hover{color:#c0ccff;background:rgba(255,255,255,.05);}
.theme-btn .th-icon{font-size:13px;}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{background:#0e1428;font-family:Tahoma,'MS Sans Serif',Arial,sans-serif;font-size:11px;color:var(--ro-text);height:100vh;overflow:hidden;}
.app{display:flex;height:100vh;}

/* Sidebar */
.sidebar{width:190px;flex-shrink:0;background:linear-gradient(180deg,#1a2870 0%,#141e58 100%);border-right:2px solid var(--ro-navy-dk);overflow-y:auto;display:flex;flex-direction:column;}
.sidebar::-webkit-scrollbar{width:6px;} .sidebar::-webkit-scrollbar-track{background:#0e1840;} .sidebar::-webkit-scrollbar-thumb{background:var(--ro-navy-lt);border-radius:3px;}
.sb-title{padding:8px 10px 7px;background:linear-gradient(180deg,#2a3c94 0%,#1a2870 100%);border-bottom:1px solid #0a1240;}
.sb-title h1{font-size:11px;font-weight:bold;color:#fff;} .sb-title p{font-size:9px;color:#8898cc;margin-top:2px;}
.sb-section{font-size:8px;font-weight:bold;letter-spacing:.16em;text-transform:uppercase;color:#4a5ea0;padding:8px 10px 3px;}
.sb-btn{width:100%;display:flex;align-items:center;gap:6px;padding:5px 10px;background:none;border:none;border-left:2px solid transparent;color:#a0b0e0;font-family:Tahoma,sans-serif;font-size:11px;cursor:pointer;text-align:left;transition:all .08s;}
.sb-btn:hover{background:rgba(255,255,255,.07);color:#d0dcff;border-left-color:var(--ro-navy-lt);}
.sb-btn.active{background:rgba(255,255,255,.12);color:#fff;border-left-color:#88aaff;font-weight:bold;}
.sb-btn .ic{font-size:12px;flex-shrink:0;width:14px;text-align:center;}

/* Main */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;}
.topbar{background:var(--s-topbar-bg);border-bottom:2px solid var(--s-topbar-bdr);border-top:3px solid var(--ro-navy);padding:4px 12px;display:flex;align-items:center;gap:10px;flex-shrink:0;box-shadow:0 1px 3px rgba(0,0,0,.25);}
.topbar-title{font-size:11px;font-weight:bold;color:var(--ro-navy);}
.night .topbar-title{color:#8898ee;}
.sp-panels{margin-left:auto;display:flex;gap:6px;align-items:center;}
.sp-panel{display:flex;align-items:center;gap:4px;background:var(--s-panel-bg);border:1px solid var(--s-panel-bdr);padding:2px 7px;box-shadow:inset 1px 1px 0 rgba(255,255,255,.08);}
.sp-panel label{font-size:9.5px;color:var(--ro-text-dim);white-space:nowrap;}
.sp-panel .spent{font-size:12px;font-weight:bold;color:var(--ro-navy);min-width:22px;text-align:right;}
.night .sp-panel .spent{color:#8898ee;}
.sp-panel .slash{color:var(--ro-chrome-dk);}
.sp-panel .total{font-size:12px;font-weight:bold;color:var(--ro-text);min-width:22px;}
.sp-panel.over .spent{color:#e03030 !important;}
.sp-panel.warn .spent{color:#c07000 !important;}
.reset-btn{padding:3px 10px;cursor:pointer;font-family:Tahoma,sans-serif;font-size:10px;font-weight:bold;background:var(--s-btn-bg);border:1px solid var(--s-btn-bdr);color:var(--s-btn-color);box-shadow:inset 1px 1px 0 rgba(255,255,255,.1);transition:filter .08s;}
.reset-btn:hover{filter:brightness(1.12);}
/* Job level selector */
.jl-selector{display:flex;align-items:center;gap:4px;background:var(--s-panel-bg);border:1px solid var(--s-panel-bdr);padding:2px 7px;}
.jl-selector label{font-size:9.5px;color:var(--ro-text-dim);white-space:nowrap;}
.jl-selector select{font-size:10px;font-family:Tahoma,sans-serif;color:var(--ro-text);border:1px solid var(--s-panel-bdr);background:var(--s-panel-bg);padding:0 2px;cursor:pointer;}
/* Overflow indicator in topbar */
.sp-overflow{margin-left:4px;font-size:9px;font-weight:bold;color:#904000;background:#ffe8c0;border:1px solid #c08040;padding:0 3px;border-radius:2px;white-space:nowrap;}
.night .sp-overflow{color:#ffb060;background:#3a2800;border-color:#604000;}
/* Overflow note in panel header */
.hdr-overflow{font-size:8px;color:#ffcc88;margin-top:1px;font-style:italic;}
/* Warning banner shown on second class panel when first class incomplete */
.panel-warn-banner{background:linear-gradient(90deg,#a05000,#d07000);color:#fff8e0;font-size:9px;font-weight:bold;padding:3px 8px;text-align:center;letter-spacing:.04em;border-bottom:1px solid #804000;}

/* Trees area */
.trees-area{flex:1;overflow:auto;padding:12px;display:flex;gap:10px;align-items:flex-start;background-image:url("images/bg.png");background-position:center;background-repeat:no-repeat;background-size:cover;background-color:rgba(0,0,0,0.7);background-blend-mode:darken;}
.trees-area::-webkit-scrollbar{height:8px;width:8px;} .trees-area::-webkit-scrollbar-track{background:rgba(0,0,0,.2);} .trees-area::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:3px;}

/* Tree panel — matches RO window chrome */
.tree-panel{flex-shrink:0;background:var(--s-grid-bg);border:2px solid var(--s-topbar-bdr);box-shadow:inset 1px 1px 0 rgba(255,255,255,.15),2px 2px 6px rgba(0,0,0,.4);}
.tree-hdr{background:linear-gradient(180deg,#2a3c94 0%,#1a2870 100%);border-bottom:2px solid var(--ro-navy-dk);padding:5px 8px;display:flex;align-items:center;gap:6px;}
.tree-hdr-text{flex:1;text-align:center;}
.tree-hdr h3{font-size:10px;font-weight:bold;color:#fff;text-transform:uppercase;letter-spacing:.06em;}
.tree-hdr .sp-info{font-size:8.5px;margin-top:2px;}
.tree-hdr .sp-info .sp-spent{color:#ffdd88;font-weight:bold;}
.tree-hdr .sp-info .sp-total{color:#9aace8;}
.tree-hdr .sp-info.over .sp-spent{color:#ff6060;}

/* Trans toggle */
.trans-toggle{display:flex;align-items:center;gap:4px;flex-shrink:0;cursor:pointer;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);padding:2px 6px;border-radius:2px;transition:background .1s;}
.trans-toggle:hover{background:rgba(255,255,255,.16);}
.trans-toggle input{cursor:pointer;margin:0;accent-color:#aaccff;}
.trans-toggle label{cursor:pointer;font-size:9px;font-weight:bold;color:#aaccff;letter-spacing:.04em;white-space:nowrap;}
.trans-toggle.active{background:rgba(100,160,255,.2);border-color:rgba(100,160,255,.5);}
.trans-toggle.active label{color:#ccddff;}

/* Warning banner on second class panel when first class incomplete */
.panel-warn-banner{background:linear-gradient(90deg,#a05000,#c87000);color:#fff8e0;font-size:9.5px;font-weight:bold;padding:3px 10px;text-align:center;letter-spacing:.03em;border-bottom:1px solid #804000;}
/* Gate position helper (still used for banner insertion) */
.panel-gate{position:relative;}

/* Skill grid */
.skill-grid{display:grid;grid-template-columns:repeat(7,46px);gap:10px;padding:8px 7px 9px;background:var(--s-grid-bg);}
.skill-cell{width:46px;height:54px;position:relative;}
.skill-cell.empty{pointer-events:none;}
.sk-empty-box{width:40px;height:40px;margin:0 auto;background:var(--s-empty-box);border:1px solid var(--ro-cell-bdr);box-shadow:inset 1px 1px 2px rgba(0,0,0,.1);}
.sk-wrap{position:relative;width:40px;height:40px;margin:0 auto;user-select:none;-webkit-user-select:none;transition:transform .07s;}
.sk-wrap.available,.sk-wrap.invested,.sk-wrap.maxed{cursor:pointer;}
.sk-wrap.available:hover,.sk-wrap.invested:hover,.sk-wrap.maxed:hover{transform:scale(1.12);z-index:10;}
.sk-wrap.available:active,.sk-wrap.invested:active,.sk-wrap.maxed:active{transform:scale(.94);}
.sk-frame{position:absolute;inset:0;border:1px solid var(--ro-cell-bdr);background:var(--s-sk-frame);box-shadow:inset 1px 1px 0 rgba(255,255,255,.2);transition:border-color .1s,box-shadow .1s,background .1s;}
.sk-wrap.locked   .sk-frame{border-color:var(--ro-cell-bdr);background:var(--s-empty-box);opacity:.7;}
.sk-wrap.available .sk-frame{border-color:#6880b8;background:var(--s-sk-frame);box-shadow:inset 1px 1px 0 rgba(255,255,255,.25);}
.night .sk-wrap.available .sk-frame{border-color:#4060a0;}
.sk-wrap.invested .sk-frame{border-color:#3050a0;background:var(--s-sk-frame);box-shadow:0 0 5px rgba(40,80,200,.45),inset 1px 1px 0 rgba(255,255,255,.15);}
.night .sk-wrap.invested .sk-frame{border-color:#4070d0;box-shadow:0 0 6px rgba(60,120,255,.5);}
.sk-wrap.maxed    .sk-frame{border-color:#1838a0;background:var(--s-sk-frame);box-shadow:0 0 8px rgba(20,60,220,.55),inset 1px 1px 0 rgba(255,255,255,.15);}
.night .sk-wrap.maxed .sk-frame{border-color:#5080ff;box-shadow:0 0 10px rgba(80,140,255,.6);}
.sk-wrap.granted  .sk-frame{border-color:#a07010;background:var(--s-sk-frame);box-shadow:0 0 6px rgba(180,120,0,.45);cursor:default;}
.night .sk-wrap.granted .sk-frame{border-color:#c09020;}
.sk-img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:24px;height:24px;image-rendering:pixelated;border-radius:1px;transition:filter .12s;}
.sk-wrap.locked   .sk-img{filter:var(--f-locked);}
.sk-wrap.available .sk-img{filter:var(--f-avail);}
.sk-wrap.invested .sk-img{filter:var(--f-invested);}
.sk-wrap.maxed    .sk-img{filter:var(--f-maxed);}
.sk-wrap.granted  .sk-img{filter:sepia(.3) saturate(1.2) brightness(1.05);}
.sk-canvas{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:24px;height:24px;border-radius:1px;display:block;transition:filter .12s;}
.sk-wrap.locked   .sk-canvas{filter:var(--f-locked);}
.sk-wrap.available .sk-canvas{filter:var(--f-avail);}
.sk-wrap.invested .sk-canvas{filter:var(--f-invested);}
.sk-wrap.maxed    .sk-canvas{filter:var(--f-maxed);}
.sk-wrap.granted  .sk-canvas{filter:sepia(.3) saturate(1.2) brightness(1.05);}
.sk-lock{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:13px;opacity:0;pointer-events:none;transition:opacity .1s;color:rgba(0,0,0,.5);}
.sk-wrap.locked .sk-lock{opacity:.65;}
.sk-bar{position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(0,0,30,.15);border-radius:0 0 1px 1px;overflow:hidden;}
.sk-fill{height:100%;width:0%;background:linear-gradient(90deg,#2040a0,#4488ff);transition:width .12s;}
.sk-wrap.maxed .sk-fill{background:linear-gradient(90deg,#1030c0,#44aaff);}
.sk-grant-badge{position:absolute;top:1px;right:1px;background:linear-gradient(135deg,#c89000,#ffe060);color:#5a3a00;font-size:7px;font-weight:bold;line-height:1;padding:1px 2px;border-radius:1px;pointer-events:none;letter-spacing:.02em;box-shadow:0 1px 2px rgba(0,0,0,.3);}
.sk-trans-badge{position:absolute;top:1px;left:1px;background:linear-gradient(135deg,#6020a0,#aa60ee);color:#f0d8ff;font-size:7px;font-weight:bold;line-height:1;padding:1px 2px;border-radius:1px;pointer-events:none;letter-spacing:.02em;}
/* Remove X button */
.sk-remove{position:absolute;top:-5px;right:-5px;width:14px;height:14px;background:#c02020;color:#fff;font-size:9px;font-weight:bold;line-height:14px;text-align:center;border-radius:50%;cursor:pointer;z-index:20;box-shadow:0 1px 3px rgba(0,0,0,.5);display:none;pointer-events:all;}
.sk-wrap:hover .sk-remove{display:block;}
.sk-wrap.granted .sk-remove,.sk-wrap.locked .sk-remove{display:none!important;}
.sk-lv{text-align:center;font-size:9.5px;font-weight:bold;margin-top:2px;height:11px;line-height:11px;color:var(--ro-text-dim);}
.skill-cell.invested .sk-lv{color:var(--ro-navy);}
.skill-cell.maxed    .sk-lv{color:#1030c0;}
.skill-cell.granted  .sk-lv{color:#8a6000;}
.trans-visible .sk-empty-box{background:#ede0f8;border-color:#c0a0d8;}

/* Skill info panel (bottom bar) */
.info-bar{flex-shrink:0;height:200px;background:var(--s-info-bg);border-top:2px solid var(--s-info-bdr);display:flex;overflow:hidden;}
.info-bar.empty-info{align-items:center;justify-content:center;color:var(--ro-text-dim);font-size:10px;letter-spacing:.08em;}
.info-icon{width:68px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--s-info-icon-bg);border-right:1px solid var(--s-panel-bdr);}
.info-icon canvas{width:48px;height:48px;image-rendering:pixelated;display:block;}
.info-icon .info-img{width:48px;height:48px;image-rendering:pixelated;display:block;}
.info-content{flex:1;padding:8px 12px;overflow:hidden;display:flex;flex-direction:column;gap:5px;min-width:0;}
.info-name{font-size:13px;font-weight:bold;color:var(--ro-navy);}
.night .info-name{color:#8898ee;}
.info-sub{font-size:9.5px;color:var(--ro-text-dim);}
.info-rows{display:flex;gap:18px;flex-wrap:wrap;}
.info-row{font-size:11px;color:var(--ro-text-dim);white-space:nowrap;}
.info-row b{color:var(--ro-text);}
.info-desc{font-size:11px;line-height:1.5;color:var(--ro-text-dim);overflow-y:auto;flex:1;padding-right:4px;}
.info-desc::-webkit-scrollbar{width:4px;} .info-desc::-webkit-scrollbar-thumb{background:var(--s-panel-bdr);}
.info-req-wrap{width:200px;flex-shrink:0;border-left:1px solid var(--ro-cell-bdr);padding:8px 12px;overflow-y:auto;background:var(--s-info-req-bg);}
.info-req-hdr{font-size:9px;font-weight:bold;letter-spacing:.1em;color:#5020a0;text-transform:uppercase;margin-bottom:5px;}
.night .info-req-hdr{color:#9060e0;}
.info-req-row{font-size:11px;padding:2px 0;} .info-req-row.met{color:#186020;} .info-req-row.unmet{color:#a01818;}
.night .info-req-row.met{color:#40a060;} .night .info-req-row.unmet{color:#e04040;}
.info-lv-ctrl{display:flex;align-items:center;gap:5px;}
.info-lv-ctrl span{font-size:12px;font-weight:bold;color:var(--ro-navy);min-width:48px;}
.night .info-lv-ctrl span{color:#8898ee;}
.info-lv-btn{width:20px;height:20px;border:1px solid var(--s-panel-bdr);background:var(--s-btn-bg);cursor:pointer;font-size:12px;font-weight:bold;color:var(--s-btn-color);display:flex;align-items:center;justify-content:center;line-height:1;}
.info-lv-btn:hover{filter:brightness(1.12);}
.info-lv-btn:disabled{opacity:.38;cursor:default;}

/* Tooltip */
.tip{position:fixed;z-index:9999;width:288px;background:var(--ro-win-bg);border:2px solid #686058;box-shadow:inset 1px 1px 0 rgba(255,255,255,.5),3px 3px 8px rgba(0,0,0,.4);pointer-events:none;opacity:0;transition:opacity .06s;}
.tip.on{opacity:1;}
.tip-hdr{background:linear-gradient(180deg,#2a3c94 0%,#1a2870 100%);border-bottom:1px solid var(--ro-navy-dk);padding:4px 8px;}
.tip-name{font-size:11.5px;font-weight:bold;color:#fff;}
.tip-id{font-size:9.5px;color:#8898cc;margin-top:1px;}
.tip-body{padding:6px 8px;}
.tip-row{display:flex;justify-content:space-between;font-size:11px;color:var(--ro-text-dim);margin-bottom:2px;}
.tip-row span:last-child{color:var(--ro-text);font-weight:bold;}
.tip-hr{height:1px;background:#c8c4b8;margin:5px 0;}
.tip-desc{font-size:11px;line-height:1.5;color:var(--ro-text-dim);max-height:120px;overflow-y:auto;}
.tip-desc p{margin-bottom:1px;}
.tip-req-hdr{font-size:10px;font-weight:bold;color:#6020a0;margin:4px 0 3px;}
.tip-req-row{font-size:10.5px;padding:1px 0;}
.tip-req-row.met{color:#186020;} .tip-req-row.unmet{color:#a01818;}
.tip-state{font-size:9.5px;color:#8898cc;margin-top:1px;}
.tip-hint{margin-top:4px;font-size:10px;color:var(--ro-chrome-dk);font-style:italic;border-top:1px solid var(--ro-win-stripe);padding-top:4px;}

/* Saves modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:10000;display:flex;align-items:center;justify-content:center;}
.modal-overlay.hidden{display:none;}
.modal{background:var(--s-modal-bg);border:2px solid var(--s-topbar-bdr);box-shadow:4px 4px 20px rgba(0,0,0,.6);width:520px;max-height:80vh;display:flex;flex-direction:column;}
.modal-hdr{background:linear-gradient(180deg,#2a3c94,#1a2870);padding:6px 12px;display:flex;align-items:center;justify-content:space-between;}
.modal-hdr h2{color:#fff;font-size:12px;font-weight:bold;}
.modal-close{background:none;border:none;color:#aabfff;font-size:16px;cursor:pointer;line-height:1;padding:0 2px;}
.modal-close:hover{color:#fff;}
.modal-body{padding:12px;overflow-y:auto;flex:1;}
.modal-save-row{display:flex;gap:6px;margin-bottom:12px;}
.modal-save-row input{flex:1;font-family:Tahoma,sans-serif;font-size:11px;border:1px solid var(--s-panel-bdr);padding:3px 6px;color:var(--ro-text);background:var(--ro-win-bg);}
.modal-save-row button{padding:3px 10px;font-family:Tahoma,sans-serif;font-size:10px;font-weight:bold;background:var(--s-btn-bg);border:1px solid var(--s-btn-bdr);color:var(--s-btn-color);cursor:pointer;}
.modal-save-row button:hover{filter:brightness(1.1);}
.modal-slots{display:flex;flex-direction:column;gap:4px;}
.modal-slot{display:flex;align-items:center;gap:8px;padding:5px 8px;border:1px solid var(--s-panel-bdr);background:var(--ro-win-bg2);}
.modal-slot:hover{filter:brightness(1.04);}
.modal-slot-info{flex:1;min-width:0;}
.modal-slot-name{font-size:11px;font-weight:bold;color:var(--ro-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.modal-slot-meta{font-size:9.5px;color:var(--ro-text-dim);}
.modal-slot-btns{display:flex;gap:4px;flex-shrink:0;}
.slot-btn{padding:2px 8px;font-family:Tahoma,sans-serif;font-size:10px;border:1px solid var(--s-panel-bdr);background:var(--s-btn-bg);cursor:pointer;color:var(--s-btn-color);}
.slot-btn:hover{filter:brightness(1.1);}
.slot-btn.del{color:#c02020;border-color:#c08080;}
.slot-btn.del:hover{color:#ff4040;}
.modal-share{margin-top:12px;padding-top:10px;border-top:1px solid var(--s-panel-bdr);}
.modal-share label{font-size:10px;color:var(--ro-text-dim);display:block;margin-bottom:4px;}
.modal-share-row{display:flex;gap:6px;}
.modal-share-row input{flex:1;font-family:monospace;font-size:10px;border:1px solid var(--s-panel-bdr);padding:3px 6px;color:var(--ro-text-dim);background:var(--ro-win-bg2);}
.modal-share-row button{padding:3px 10px;font-family:Tahoma,sans-serif;font-size:10px;border:1px solid var(--s-btn-bdr);background:var(--s-btn-bg);color:var(--s-btn-color);cursor:pointer;font-weight:bold;}
.modal-share-row button:hover{filter:brightness(1.1);}
.modal-transfer{margin-top:12px;padding-top:10px;border-top:1px solid var(--s-panel-bdr);}
.modal-transfer label{font-size:10px;color:var(--ro-text-dim);display:block;margin-bottom:4px;}
.modal-transfer-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.modal-transfer-row button{padding:3px 10px;font-family:Tahoma,sans-serif;font-size:10px;border:1px solid var(--s-btn-bdr);background:var(--s-btn-bg);color:var(--s-btn-color);cursor:pointer;font-weight:bold;}
.modal-transfer-row button:hover{filter:brightness(1.1);}
.modal-transfer-status{font-size:10px;color:var(--ro-text-dim);font-style:italic;}
/* Night mode toggle button */
.theme-btn{width:100%;display:flex;align-items:center;gap:6px;padding:7px 10px;background:none;border:none;border-top:1px solid rgba(255,255,255,.08);color:#8898cc;font-family:Tahoma,sans-serif;font-size:10px;cursor:pointer;text-align:left;margin-top:auto;flex-shrink:0;}
.theme-btn:hover{color:#c0ccff;background:rgba(255,255,255,.05);}
.theme-btn .th-icon{font-size:12px;}
.empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--ro-text-dim);}
.empty .big{font-size:36px;opacity:.3;}
.empty p{font-size:11px;font-weight:bold;opacity:.4;letter-spacing:.1em;text-transform:uppercase;}


/* Sidebar collapse */
.sb-title{position:relative;}
.sidebar-toggle{position:absolute;right:6px;top:6px;width:22px;height:22px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#d0dcff;border-radius:3px;cursor:pointer;font-family:Tahoma,sans-serif;font-size:14px;line-height:18px;font-weight:bold;}
.sidebar-toggle:hover{background:rgba(255,255,255,.16);color:#fff;}
.sidebar{transition:width .16s ease;}
.sidebar.collapsed{width:44px;overflow-x:hidden;}
.sidebar.collapsed .sb-title{padding:7px 0;display:flex;justify-content:center;align-items:center;min-height:38px;}
.sidebar.collapsed .sidebar-toggle{position:static;right:auto;top:auto;}
.sidebar.collapsed .sb-title h1,
.sidebar.collapsed .sb-title p,
.sidebar.collapsed .sb-section,
.sidebar.collapsed .sb-btn span:not(.ic),
.sidebar.collapsed .theme-btn span:not(.th-icon){display:none;}
.sidebar.collapsed .sb-btn{justify-content:center;gap:0;padding:7px 0;border-left-width:0;border-right:2px solid transparent;}
.sidebar.collapsed .sb-btn:hover,
.sidebar.collapsed .sb-btn.active{border-left-color:transparent;border-right-color:#88aaff;}
.sidebar.collapsed .sb-btn .ic{width:auto;font-size:14px;}
.sidebar.collapsed .theme-btn{justify-content:center;padding:8px 0;gap:0;}
.sidebar.collapsed .theme-btn .th-icon{font-size:14px;}

/* Compact saved-build selector */
.modal-select-row{display:flex;align-items:center;gap:6px;margin-bottom:12px;}
.modal-select-row label{font-size:10px;font-weight:bold;color:var(--ro-text-dim);white-space:nowrap;}
.modal-select-row select{flex:1;min-width:0;font-family:Tahoma,sans-serif;font-size:11px;border:1px solid var(--s-panel-bdr);padding:3px 6px;color:var(--ro-text);background:var(--ro-win-bg);}

/* ──────────────────────────────────────────────────────────────
   RO CLIENT-STYLE SKILL PANEL SKIN ONLY
   Keeps the uploaded simulator layout, sidebar, topbar, panels,
   grid dimensions, and JS behaviour intact. This block only changes
   the visual treatment of the skill tree panels and skill info panel.
   ────────────────────────────────────────────────────────────── */
:root{
  --ro-client-bg:#f7f7f7;
  --ro-client-line:#b9b9b9;
  --ro-client-soft:#eeeeee;
  --ro-client-shadow:#d6d6d6;
  --ro-client-text:#202020;
  --ro-client-muted:#575757;
  --ro-client-blue:#4057b8;
}

/* Keep the existing panel placement, but skin the panels like the RO client. */
.tree-panel{
  background:var(--ro-client-bg);
  border:1px solid #777;
  border-radius:5px 5px 2px 2px;
  box-shadow:
    inset 1px 1px 0 #fff,
    inset -1px -1px 0 var(--ro-client-shadow),
    2px 3px 4px rgba(0,0,0,.22);
  overflow:hidden;
}

.tree-hdr{
  background:linear-gradient(#fbfbfb,#e9e9e9);
  border-bottom:1px solid #c8c8c8;
  color:var(--ro-client-text);
  box-shadow:inset 1px 1px 0 #fff;
}
.tree-hdr h3{
  color:var(--ro-client-text);
  text-transform:none;
  letter-spacing:0;
  font-weight:normal;
}
.tree-hdr .sp-info .sp-spent{color:#111;font-weight:bold;}
.tree-hdr .sp-info .sp-total{color:#555;}
.tree-hdr .sp-info.over .sp-spent{color:#d01818;}

.trans-toggle{
  background:#f7f7f7;
  border:1px solid #b9b9b9;
  border-radius:3px;
  box-shadow:inset 1px 1px 0 #fff;
}
.trans-toggle label{color:#202020;font-weight:normal;letter-spacing:0;}
.trans-toggle.active{background:#fff;border-color:#8f8f8f;}
.trans-toggle.active label{color:#d01818;font-weight:bold;}

.panel-warn-banner{
  background:linear-gradient(#fff5d8,#ffe0a8);
  color:#8a4200;
  border-bottom:1px solid #c8a060;
  letter-spacing:0;
}

.skill-grid{
  background:var(--ro-client-bg);
  background-image:none;
}

.sk-empty-box{
  background:#fdfdfd;
  border:1px dotted #cfcfcf;
  border-radius:4px;
  box-shadow:none;
}

.sk-frame{
  background:transparent;
  border:1px solid #d7d7d7;
  border-radius:2px;
  box-shadow:none;
}
.sk-wrap.locked .sk-frame{
  background:#fdfdfd;
  border:1px dotted #cfcfcf;
  opacity:1;
}
.sk-wrap.available .sk-frame{
  border-color:#9aa8d8;
  background:rgba(255,255,255,.55);
  box-shadow:0 0 0 1px rgba(255,255,255,.7) inset;
}
.sk-wrap.invested .sk-frame{
  border-color:#6277c8;
  background:rgba(255,255,255,.75);
  box-shadow:0 0 3px rgba(64,87,184,.35), inset 1px 1px 0 #fff;
}
.sk-wrap.maxed .sk-frame{
  border-color:#4057b8;
  background:#fff;
  box-shadow:0 0 5px rgba(64,87,184,.45), inset 1px 1px 0 #fff;
}
.sk-wrap.granted .sk-frame{
  border-color:#c8a040;
  background:#fff8dc;
  box-shadow:0 0 4px rgba(200,160,64,.35), inset 1px 1px 0 #fff;
}

.sk-img,
.sk-canvas{
  border-radius:0;
  image-rendering:pixelated;
}
.sk-wrap.locked .sk-img,
.sk-wrap.locked .sk-canvas{filter:grayscale(100%) brightness(.92) opacity(.72);}
.sk-wrap.available .sk-img,
.sk-wrap.available .sk-canvas{filter:grayscale(100%) brightness(.95) opacity(.8);}
.sk-wrap.invested .sk-img,
.sk-wrap.invested .sk-canvas,
.sk-wrap.maxed .sk-img,
.sk-wrap.maxed .sk-canvas{filter:none;}

.sk-wrap.available:hover,
.sk-wrap.invested:hover,
.sk-wrap.maxed:hover{
  outline:1px solid #7c9cff;
  outline-offset:1px;
}

.sk-lv{
  color:#111;
  font-weight:normal;
}
.skill-cell.invested .sk-lv,
.skill-cell.maxed .sk-lv,
.skill-cell.granted .sk-lv{color:#111;}

.sk-bar{background:rgba(0,0,0,.12);}
.sk-fill{background:linear-gradient(90deg,#4057b8,#8ca4ff);}
.sk-wrap.maxed .sk-fill{background:linear-gradient(90deg,#2444b0,#80a4ff);}

/* Style the existing detail/info panel without changing its size or content. */
.info-bar{
  background:#f7f7f7;
  border-top:1px solid #b9b9b9;
  box-shadow:inset 1px 1px 0 #fff;
}
.info-bar.empty-info{
  color:#202020;
  letter-spacing:0;
}
.info-icon{
  background:linear-gradient(#fdfdfd,#eeeeee);
  border-right:1px solid #c8c8c8;
}
.info-name{color:#202020;font-weight:bold;}
.info-sub,
.info-row,
.info-desc{color:#575757;}
.info-row b{color:#202020;}
.info-req-wrap{background:#eeeeee;border-color:#c8c8c8;}

body.night .tree-panel,
body.night .skill-grid,
body.night .info-bar{
  background:#f7f7f7;
  color:#202020;
}

/* RO-style hover skill info toggle */
.hover-info-toggle{
  display:flex;
  align-items:center;
  gap:3px;
  margin-left:auto;
  margin-right:6px;
  font-family:Tahoma,'MS Sans Serif',Arial,sans-serif;
  font-size:11px;
  font-weight:normal;
  color:#151515;
  white-space:nowrap;
  cursor:pointer;
  user-select:none;
}
.hover-info-toggle input{
  width:13px;
  height:13px;
  margin:0;
  accent-color:#2e5fb8;
}
.night .hover-info-toggle{color:#d8d4cc;}

/* Hovered skill prerequisite highlight, like the RO client tree glow */
.sk-wrap.prereq-source .sk-frame,
.sk-wrap.prereq-source .sk-img,
.sk-wrap.prereq-source canvas{
  filter:brightness(1.18) saturate(1.18);
}
.sk-wrap.prereq-highlight{
  z-index:12;
}
.sk-wrap.prereq-highlight .sk-frame{
  border-color:#315fc8;
  box-shadow:
    0 0 0 1px #ffffff,
    0 0 0 2px #315fc8,
    0 0 5px rgba(48,96,210,.8);
  background:rgba(232,238,255,.8);
}
.sk-wrap.prereq-highlight .sk-img,
.sk-wrap.prereq-highlight canvas{
  filter:brightness(1.15) saturate(1.2);
}
.sk-wrap.prereq-unmet .sk-frame{
  border-color:#c85f8f;
  box-shadow:
    0 0 0 1px #ffffff,
    0 0 0 2px #c85f8f,
    0 0 5px rgba(220,70,150,.75);
}
.sk-wrap.prereq-met .sk-frame{
  border-color:#315fc8;
}

/* Tooltip restyled to match the in-game white skill info window */
.tip{
  width:300px;
  background:#ffffff;
  border:1px solid #b7b7b7;
  box-shadow:2px 2px 2px rgba(0,0,0,.28);
  color:#222;
  font-family:Tahoma,'MS Sans Serif',Arial,sans-serif;
  font-size:12px;
  line-height:1.35;
  padding:7px 8px 8px;
  pointer-events:none;
  opacity:0;
  transition:none;
}
.tip.on{opacity:1;}
.tip-ro-title{
  font-size:12px;
  color:#000;
  margin-bottom:3px;
  font-weight:normal;
}
.tip-ro-body{
  max-height:260px;
  overflow-y:auto;
  padding-right:2px;
}
.tip-line{
  font-size:12px;
  color:#444;
  min-height:15px;
  white-space:normal;
}
.tip-line-max{color:#111;}
.tip-line-req{color:#ff1493;}
.tip-line-form{color:#e01818;}
.tip-line-desc-label{color:#111;margin-top:2px;}
.tip-ro-body::-webkit-scrollbar{width:5px;}
.tip-ro-body::-webkit-scrollbar-track{background:#f2f2f2;}
.tip-ro-body::-webkit-scrollbar-thumb{background:#c7c7c7;border:1px solid #aaa;}
.night .tip{
  background:#ffffff;
  border-color:#b7b7b7;
  color:#222;
}
.night .tip-line{color:#444;}
.night .tip-line-max,.night .tip-line-desc-label,.night .tip-ro-title{color:#111;}
.night .tip-line-req{color:#ff1493;}
.night .tip-line-form{color:#e01818;}


/* Compact RO-style skill names above each icon.
   This only affects the skill cells inside existing panels. */
.skill-cell{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  height:auto;
}
.sk-name{
  width:46px;
  height:12px;
  line-height:12px;
  margin:0 0 1px;
  text-align:center;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-family:Tahoma,'MS Sans Serif',Arial,sans-serif;
  font-size:9px;
  font-weight:normal;
  color:#575757;
  pointer-events:none;
}
.night .sk-name{color:#b8b8c8;}
.skill-cell.empty .sk-empty-box{margin-top:13px;}
.skill-cell .sk-name{flex-shrink:0;}
.skill-cell .sk-wrap{margin-top:0;flex-shrink:0;}
.skill-cell .sk-lv{margin-top:1px;overflow:visible;}

/* ──────────────────────────────────────────────────────────────
   Final RO panel pass: titlebar, footer skill points, recursive prereq glow.
   ────────────────────────────────────────────────────────────── */
.tree-panel{
  background:#f7f7f7;
  border:1px solid #777;
  border-radius:5px 5px 2px 2px;
  box-shadow:inset 1px 1px 0 #fff, inset -1px -1px 0 #d6d6d6, 2px 3px 4px rgba(0,0,0,.22);
  overflow:hidden;
}
.tree-hdr.ro-panel-titlebar{
  height:20px;
  min-height:20px;
  padding:0 5px;
  display:flex;
  align-items:center;
  gap:6px;
  background:linear-gradient(#fbfbfb,#e8e8e8);
  border-bottom:1px solid #bebebe;
  box-shadow:inset 1px 1px 0 #fff;
  color:#111;
  font-family:Tahoma,'MS Sans Serif',Arial,sans-serif;
}
.tree-hdr-title{
  flex:1;
  text-align:left;
  padding-left:18px;
  font-size:11px;
  line-height:20px;
  color:#111;
  font-weight:normal;
  position:relative;
}
.tree-hdr-title::before{
  content:"";
  position:absolute;
  left:2px;
  top:5px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#b9d4ff 0 2px,#5f82d8 3px,#2d4fa8 6px,#1d347d 7px);
  box-shadow:0 0 0 1px #6d80b8;
}
.panel-hover-info-toggle{
  display:flex;
  align-items:center;
  gap:3px;
  font-size:11px;
  line-height:20px;
  color:#111;
  white-space:nowrap;
  cursor:pointer;
  user-select:none;
}
.panel-hover-info-toggle input{
  width:12px;
  height:12px;
  margin:0;
  accent-color:#2e5fb8;
}
.ro-window-buttons{
  display:flex;
  align-items:center;
  gap:5px;
  color:#444;
  font-size:12px;
  line-height:18px;
  user-select:none;
}
.ro-win-dot{
  color:#4f6fbd;
  font-size:13px;
  transform:translateY(-1px);
}
.ro-win-close{
  color:#333;
  font-size:16px;
  line-height:16px;
}
.tree-hdr .trans-toggle{
  height:16px;
  padding:0 4px;
  margin-left:4px;
  order:2;
}
.tree-hdr .trans-toggle label{font-size:9px;line-height:14px;}
.skill-grid{
  background:#f7f7f7;
  background-image:none;
  border-bottom:1px solid #d2d2d2;
}
.tree-footer{
  min-height:21px;
  display:flex;
  align-items:center;
  gap:14px;
  padding:2px 10px 3px;
  background:linear-gradient(#fdfdfd,#eeeeee);
  border-top:1px solid #fff;
  color:#111;
  font-family:Tahoma,'MS Sans Serif',Arial,sans-serif;
  font-size:11px;
  line-height:16px;
}
.tree-footer b{font-weight:normal;color:#111;}
.tree-footer.over b.foot-used{color:#d01818;font-weight:bold;}
.tree-footer .foot-note{color:#8a4200;}

/* Stronger glow for full backwards prerequisite chain. */
.sk-wrap.prereq-source{
  z-index:20;
}
.sk-wrap.prereq-source .sk-img,
.sk-wrap.prereq-source canvas{
  filter:brightness(1.22) saturate(1.25) drop-shadow(0 0 3px rgba(55,96,230,.9));
}
.sk-wrap.prereq-highlight{
  z-index:18;
  filter:drop-shadow(0 0 5px rgba(60,105,255,.92));
}
.sk-wrap.prereq-highlight .sk-frame{
  border-color:#416fff;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.95),
    0 0 0 2px rgba(65,111,255,.95),
    0 0 8px rgba(65,111,255,.95),
    0 0 14px rgba(65,111,255,.55);
  background:rgba(235,240,255,.95);
}
.sk-wrap.prereq-highlight .sk-img,
.sk-wrap.prereq-highlight canvas{
  filter:brightness(1.25) saturate(1.25) drop-shadow(0 0 4px rgba(65,111,255,.95));
}
.sk-wrap.prereq-highlight[data-prereq-depth="2"]{filter:drop-shadow(0 0 4px rgba(78,125,255,.75));}
.sk-wrap.prereq-highlight[data-prereq-depth="3"]{filter:drop-shadow(0 0 3px rgba(78,125,255,.62));}
.sk-wrap.prereq-highlight[data-prereq-depth="4"]{filter:drop-shadow(0 0 3px rgba(78,125,255,.52));}
.sk-wrap.prereq-unmet{
  filter:drop-shadow(0 0 5px rgba(255,65,160,.9));
}
.sk-wrap.prereq-unmet .sk-frame{
  border-color:#df3f92;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.95),
    0 0 0 2px rgba(223,63,146,.95),
    0 0 8px rgba(223,63,146,.85),
    0 0 14px rgba(223,63,146,.5);
  background:rgba(255,235,247,.95);
}
.sk-wrap.prereq-unmet .sk-img,
.sk-wrap.prereq-unmet canvas{
  filter:brightness(1.2) saturate(1.2) drop-shadow(0 0 4px rgba(223,63,146,.88));
}

/* The checkbox now lives on the RO panel titlebar, not the app topbar. */
.topbar .hover-info-toggle{display:none;}


/* ──────────────────────────────────────────────────────────────
   Right-side invested skill list panel.
   Compact, non-scrolling checklist of the skills currently leveled.
   ────────────────────────────────────────────────────────────── */
.invested-panel{
  width:244px;
  max-width:244px;
  align-self:flex-start;
}
.invested-panel .tree-hdr-title{
  padding-left:18px;
}
.invested-list{
  padding:7px 7px 8px;
  background:#f7f7f7;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:3px 5px;
  align-content:start;
  border-bottom:1px solid #d2d2d2;
  min-height:120px;
  overflow:visible;
}
.invest-row{
  display:flex;
  align-items:center;
  gap:4px;
  min-width:0;
  height:27px;
  padding:1px 2px;
  border-radius:2px;
  cursor:default;
}
.invest-row:hover{
  background:rgba(74,108,210,.10);
  box-shadow:0 0 5px rgba(65,111,255,.38);
}
.invest-icon{
  width:24px;
  height:24px;
  flex:0 0 24px;
  position:relative;
  background:#ededed;
  border:1px solid #c9c9c9;
  box-shadow:inset 1px 1px 0 #fff;
  display:flex;
  align-items:center;
  justify-content:center;
}
.invest-icon img,
.invest-icon canvas,
.invest-canvas{
  width:20px!important;
  height:20px!important;
  image-rendering:pixelated;
  display:block;
}
.invest-text{
  min-width:0;
  flex:1;
  line-height:11px;
  font-family:Tahoma,'MS Sans Serif',Arial,sans-serif;
}
.invest-name{
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:#111;
  font-size:10px;
}
.invest-lv{
  display:block;
  color:#2448a8;
  font-size:10px;
  white-space:nowrap;
}
.invest-footer{
  justify-content:flex-start;
  min-height:21px;
}
.invest-empty{
  grid-column:1 / -1;
  height:76px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#888;
  font-size:11px;
}
.night .invested-panel,
.night .invested-list{background:#f7f7f7;color:#111;}
.night .invest-name{color:#111;}
.night .invest-lv{color:#2448a8;}
.night .invest-empty{color:#777;}

/* ──────────────────────────────────────────────────────────────
   Decorative bottom-right character/art overlay for the tree area.
   Place your 180x206 transparent PNG at: images/corner.png
   It sits over the darkened background, above the bottom info panel,
   and does not affect clicking or panel layout.
   ────────────────────────────────────────────────────────────── */
.trees-area{
  position:relative;
}
.trees-area::after{
  content:"";
  position:absolute;
  right:14px;
  bottom:14px;
  width:180px;
  height:206px;
  background-image:url("images/corner.png");
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
  pointer-events:none;
  z-index:0;
}
.tree-panel,
.invested-panel,
.empty{
  position:relative;
  z-index:1;
}

/* ──────────────────────────────────────────────────────────────
   Update: move decorative corner art from the tree background into
   the bottom of the sidebar, and recolour the sidebar dusky pink.
   Place the transparent PNG at: images/corner.png
   ────────────────────────────────────────────────────────────── */

/* Disable the previous bottom-right tree-area overlay. */
.trees-area::after{
  content:none !important;
  display:none !important;
}

/* Dusky pink sidebar skin. */
.sidebar{
  position:relative;
  background:linear-gradient(180deg,#8b5870 0%,#6f425a 48%,#4d3045 100%) !important;
  border-right:2px solid #3b2535 !important;
  scrollbar-color:#b9859b #4d3045;
}
.sidebar::-webkit-scrollbar-track{background:#4d3045 !important;}
.sidebar::-webkit-scrollbar-thumb{background:#b9859b !important;border-radius:3px;}

.sb-title{
  background:linear-gradient(180deg,#b77d94 0%,#8b5870 100%) !important;
  border-bottom:1px solid #4d3045 !important;
}
.sb-title h1{color:#fff8fb !important;text-shadow:0 1px 0 rgba(0,0,0,.35);}
.sb-title p{color:#f2cbd9 !important;}

.sb-section{
  color:#f0b8ca !important;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
}
.sb-btn{
  color:#f4d6df !important;
  border-left-color:transparent !important;
}
.sb-btn:hover{
  background:rgba(255,230,238,.16) !important;
  color:#fff !important;
  border-left-color:#ffc4d8 !important;
}
.sb-btn.active{
  background:rgba(255,230,238,.24) !important;
  color:#fff !important;
  border-left-color:#ffe0ea !important;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
}

.sidebar-toggle{
  border-color:rgba(255,240,246,.45) !important;
  background:rgba(255,240,246,.16) !important;
  color:#fff2f7 !important;
}
.sidebar-toggle:hover{
  background:rgba(255,240,246,.28) !important;
  color:#fff !important;
}

.theme-btn{
  color:#f2cbd9 !important;
  border-top:1px solid rgba(255,240,246,.18) !important;
  background:rgba(60,32,50,.18) !important;
}
.theme-btn:hover{
  color:#fff !important;
  background:rgba(255,240,246,.14) !important;
}

/* Bottom sidebar artwork. It is scaled down and faded so it decorates
   the lower edge without fighting the class list text. */
.sidebar::after{
  content:"";
  display:block;
  width:100%;
  height:150px;
  margin:4px 0 8px;
  flex-shrink:0;
  background-image:url("images/corner.png");
  background-position:center bottom;
  background-repeat:no-repeat;
  background-size:contain;
  opacity:.32;
  pointer-events:none;
  filter:saturate(.9) brightness(1.05);
}
.sidebar.collapsed::after{
  display:none;
}

/* Update: make sidebar category headings stand out with a dark left-to-right gradient. */
.sb-section{
  margin:7px 7px 3px !important;
  padding:4px 8px 5px !important;
  color:#fff1f6 !important;
  background:linear-gradient(90deg,rgba(42,22,34,.95) 0%,rgba(70,38,55,.78) 48%,rgba(70,38,55,.18) 100%) !important;
  border-left:2px solid rgba(255,204,220,.65) !important;
 /*
  border-top:1px solid rgba(255,255,255,.12) !important;
  border-bottom:1px solid rgba(0,0,0,.35) !important;
  border-radius:3px !important;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.08),0 1px 2px rgba(0,0,0,.22) !important; */
  text-shadow:0 1px 1px rgba(0,0,0,.75) !important;
}
.sidebar.collapsed .sb-section{
  display:none !important;
}


/* ──────────────────────────────────────────────────────────────
   Polish pass: responsive panel layout, full-width category headers,
   matching night toggle, and cleaner class icon badges.
   ────────────────────────────────────────────────────────────── */

/* Let the panels reflow naturally instead of forcing the whole tree area
   into one long horizontal strip. The individual RO-style panels keep their
   original internal grid dimensions. */
.trees-area{
  flex-wrap:wrap !important;
  align-content:flex-start !important;
  gap:12px !important;
  padding:12px !important;
}
.tree-panel{
  max-width:100% !important;
}
.invested-panel{
  flex:0 0 244px !important;
}

/* Make sidebar category ribbons reach the actual sidebar edges. */
.sb-section{
  margin:7px 0 3px !important;
  padding:5px 10px 5px !important;
  width:100% !important;
  border-left:0 !important;
  border-right:0 !important;
  border-radius:0 !important;
  background:linear-gradient(90deg,#2a1622 0%,#4b2a3c 48%,rgba(75,42,60,.08) 100%) !important;
/*  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.38), 0 1px 2px rgba(0,0,0,.16) !important; */
}

/* Cleaner RO-like class badges instead of loose emoji glyphs. */
.sb-btn .class-badge{
  width:22px !important;
  height:20px !important;
  flex:0 0 22px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:4px !important;
  border:1px solid rgba(55,30,45,.55) !important;
  background:linear-gradient(180deg,#fff7fb,#d8a9bd) !important;
  color:#4b2135 !important;
  font-size:9px !important;
  font-weight:bold !important;
  font-family:Tahoma,'MS Sans Serif',Arial,sans-serif !important;
  letter-spacing:-.04em !important;
  line-height:1 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.55) !important;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.65), 0 1px 2px rgba(0,0,0,.20) !important;
}
.sb-btn:hover .class-badge,
.sb-btn.active .class-badge{
  background:linear-gradient(180deg,#ffffff,#ffc9dc) !important;
  border-color:rgba(255,230,240,.88) !important;
  color:#2c1622 !important;
  box-shadow:0 0 6px rgba(255,210,226,.45), inset 1px 1px 0 rgba(255,255,255,.8) !important;
}
.class-badge.badge-melee{background:linear-gradient(180deg,#fff2f5,#d797aa) !important;}
.class-badge.badge-magic{background:linear-gradient(180deg,#f5f1ff,#b9a4dc) !important;}
.class-badge.badge-ranged{background:linear-gradient(180deg,#f1fff8,#a7d0b5) !important;}
.class-badge.badge-support{background:linear-gradient(180deg,#fffaf0,#e0c582) !important;}
.class-badge.badge-merchant{background:linear-gradient(180deg,#fff5e8,#d5a06d) !important;}
.class-badge.badge-thief{background:linear-gradient(180deg,#f3f0ff,#9f96bd) !important;}
.class-badge.badge-taekwon{background:linear-gradient(180deg,#fff8e6,#e0ab63) !important;}
.class-badge.badge-expanded{background:linear-gradient(180deg,#eef8ff,#93bad4) !important;}
.class-badge.badge-other{background:linear-gradient(180deg,#f4fff0,#9fca92) !important;}
.sidebar.collapsed .sb-btn .class-badge{
  width:26px !important;
  flex-basis:26px !important;
}

/* Night/day toggle — left = night (off), right = day (on). Icon right of track. */
.theme-btn{
  margin:8px 8px 10px !important;
  width:auto !important;
  min-height:30px !important;
  padding:4px 26px 4px 37px !important;
  position:relative !important;
  border:1px solid rgba(60,32,48,.52) !important;
  border-radius:15px !important;
  background:linear-gradient(180deg,#f4cfdb,#c7869e) !important;
  color:#422235 !important;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.55), 0 1px 3px rgba(0,0,0,.18) !important;
  font-weight:bold !important;
}
/* Track */
.theme-btn::before{
  content:"";
  position:absolute;
  left:7px;
  top:50%;
  width:24px;
  height:14px;
  transform:translateY(-50%);
  border-radius:999px;
  background:#75475e;
  box-shadow:inset 1px 1px 2px rgba(0,0,0,.42), inset -1px -1px 0 rgba(255,255,255,.16);
}
/* Knob — day mode: right side of track */
.theme-btn::after{
  content:"";
  position:absolute;
  left:19px;
  top:50%;
  width:10px;
  height:10px;
  transform:translateY(-50%);
  border-radius:50%;
  background:#fff7fb;
  box-shadow:0 1px 2px rgba(0,0,0,.35);
  transition:left .12s ease, background .12s ease;
}
/* Moon/sun icon — right of label text */
.theme-btn .th-icon{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  font-size:14px !important;
  color:inherit !important;
  line-height:1;
  pointer-events:none;
}
.theme-btn:hover{
  background:linear-gradient(180deg,#ffe3eb,#d798b0) !important;
  color:#281420 !important;
}
body.night .theme-btn{
  background:linear-gradient(180deg,#4d3045,#2a1622) !important;
  border-color:#1d1018 !important;
  color:#ffe4ee !important;
}
body.night .theme-btn::before{
  background:#17101a;
}
/* Knob — night mode: left side of track */
body.night .theme-btn::after{
  left:9px;
  background:#ffde8a;
  box-shadow:0 0 6px rgba(255,210,112,.72), 0 1px 2px rgba(0,0,0,.4);
}
/* Collapsed sidebar — show only the emoji, centred */
.sidebar.collapsed .theme-btn{
  margin:8px 5px 10px !important;
  padding:6px 0 !important;
  min-height:28px !important;
  justify-content:center;
}
.sidebar.collapsed .theme-btn::before,
.sidebar.collapsed .theme-btn::after{
  display:none;
}
.sidebar.collapsed .theme-btn .th-icon{
  position:static;
  transform:none;
  font-size:16px !important;
}

/* Night palette for the new sidebar pieces while preserving the RO-white skill panels. */
body.night .sidebar{
  background:linear-gradient(180deg,#3a2435 0%,#251622 100%) !important;
  border-right-color:#1b1018 !important;
}
body.night .sb-title{
  background:linear-gradient(180deg,#4d3045,#2d1a29) !important;
  border-bottom-color:#1b1018 !important;
}
body.night .sb-section{
  background:linear-gradient(90deg,#130c12 0%,#2a1622 48%,rgba(42,22,34,.08) 100%) !important;
  color:#ffe8ef !important;
}
body.night .sb-btn{
  color:#e4bac9 !important;
}
body.night .sb-btn:hover,
body.night .sb-btn.active{
  background:rgba(255,210,226,.13) !important;
  color:#fff6fa !important;
}
body.night .sidebar::after{
  opacity:.24;
  filter:saturate(.85) brightness(.82);
}

/* Narrower screens: keep the useful invested list visible by letting it become
   a full-width compact checklist below the skill trees. */
@media (max-width: 1180px){
  .invested-panel{
    flex:1 1 100% !important;
    width:auto !important;
    max-width:720px !important;
  }
  .invested-list{
    grid-template-columns:repeat(auto-fit,minmax(118px,1fr)) !important;
  }
}
@media (max-width: 820px){
  .app{min-width:0 !important;}
  .sidebar{width:160px !important;}
  .sidebar.collapsed{width:42px !important;}
  .topbar{
    flex-wrap:wrap !important;
    gap:6px !important;
    padding:5px 8px !important;
  }
  .sp-panels{
    margin-left:0 !important;
    flex-wrap:wrap !important;
  }
  .trees-area{
    padding:8px !important;
    gap:8px !important;
  }
  .tree-panel{
    flex:0 1 auto !important;
  }
}
@media (max-width: 620px){
  .sidebar:not(.collapsed){width:138px !important;}
  .sb-title h1{font-size:10px !important;}
  .sb-title p{font-size:8px !important;}
  .sb-btn{font-size:10px !important;padding-left:7px !important;padding-right:6px !important;}
  .trees-area{
    overflow:auto !important;
  }
  .info-bar{
    font-size:10px !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   Night-mode RO panel pass: darker skill tree panels, matching
   bottom info/footer panel, and optional night background image.
   Place the alternative night background at: images/bg-night.png
   ────────────────────────────────────────────────────────────── */

body.night{
  --ro-client-bg:#242631;
  --ro-client-text:#e4dfd8;
  --ro-client-shadow:#11131a;
  --s-grid-bg:#242631;
  --s-info-bg:#20222c;
  --s-info-bdr:#0f1016;
  --s-info-icon-bg:linear-gradient(#2d303c,#20222c);
  --s-info-req-bg:#2a2d38;
  --s-panel-bg:#292c38;
  --s-panel-bdr:#45495c;
}

/* Swap the tree background image when night mode is enabled. */
body.night .trees-area{
  background-image:url("images/bg-night.png") !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  background-size:cover !important;
  background-color:rgba(0,0,0,.74) !important;
  background-blend-mode:darken !important;
}

/* Dark RO-client-style skill windows. */
body.night .tree-panel,
body.night .skill-grid{
  background:#242631 !important;
  color:#e4dfd8 !important;
}

body.night .tree-panel{
  border-color:#0f1016 !important;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.10),
    inset -1px -1px 0 #11131a,
    2px 3px 6px rgba(0,0,0,.48) !important;
}

body.night .tree-hdr{
  background:linear-gradient(#353848,#252836) !important;
  border-bottom:1px solid #11131a !important;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.12) !important;
  color:#e8e4f0 !important;
}
body.night .tree-hdr h3,
body.night .tree-hdr-title{
  color:#f0edf6 !important;
}
body.night .tree-hdr .sp-info .sp-spent{color:#f4d394 !important;}
body.night .tree-hdr .sp-info .sp-total{color:#b6b9cf !important;}

body.night .panel-warn-banner{
  background:linear-gradient(#4c3320,#352519) !important;
  color:#ffd99a !important;
  border-bottom-color:#17100c !important;
}

/* Skill cells: keep the RO light frame shape, but make empty slots readable in dark mode. */
body.night .sk-empty-box,
body.night .sk-wrap.locked .sk-frame{
  background:#1d1f29 !important;
  border-color:#3d4152 !important;
}
body.night .sk-frame{
  border-color:#3a3e50 !important;
}
body.night .sk-wrap.available .sk-frame{
  background:rgba(70,78,110,.38) !important;
  border-color:#6573aa !important;
  box-shadow:0 0 0 1px rgba(180,195,255,.08) inset !important;
}
body.night .sk-wrap.invested .sk-frame{
  background:rgba(82,90,130,.48) !important;
  border-color:#7d8fe0 !important;
  box-shadow:0 0 6px rgba(95,125,255,.46), inset 1px 1px 0 rgba(255,255,255,.12) !important;
}
body.night .sk-wrap.maxed .sk-frame{
  background:rgba(96,108,160,.58) !important;
  border-color:#a8b8ff !important;
  box-shadow:0 0 9px rgba(120,150,255,.62), inset 1px 1px 0 rgba(255,255,255,.16) !important;
}
body.night .sk-wrap.granted .sk-frame{
  background:rgba(90,70,32,.55) !important;
  border-color:#d8a846 !important;
}
body.night .sk-lv,
body.night .skill-cell.invested .sk-lv,
body.night .skill-cell.maxed .sk-lv,
body.night .skill-cell.granted .sk-lv{
  color:#e9e6f0 !important;
  text-shadow:0 1px 1px rgba(0,0,0,.8) !important;
}
body.night .sk-name{
  color:#d9d6e6 !important;
  text-shadow:0 1px 1px rgba(0,0,0,.85) !important;
}

/* Panel footer / skill point strip. */
body.night .panel-foot,
body.night .tree-foot,
body.night .skill-panel-footer,
body.night .sp-footer{
  background:linear-gradient(#303342,#222530) !important;
  color:#e7e3ef !important;
  border-top:1px solid #11131a !important;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.09) !important;
}
body.night .panel-foot b,
body.night .tree-foot b,
body.night .skill-panel-footer b,
body.night .sp-footer b{
  color:#f4d394 !important;
}

/* Bottom skill info panel, matched to night mode instead of staying bright. */
body.night .info-bar{
  background:#20222c !important;
  color:#e4dfd8 !important;
  border-top:1px solid #0f1016 !important;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.08) !important;
}
body.night .info-bar.empty-info{
  color:#aeb2c8 !important;
}
body.night .info-icon{
  background:linear-gradient(#2d303c,#20222c) !important;
  border-right:1px solid #11131a !important;
}
body.night .info-name{color:#f0edf6 !important;}
body.night .info-sub,
body.night .info-row,
body.night .info-desc{color:#c4c0cc !important;}
body.night .info-row b{color:#f0edf6 !important;}
body.night .info-req-wrap{
  background:#2a2d38 !important;
  border-color:#44495d !important;
}
body.night .info-req-hdr{color:#d8b0ff !important;}
body.night .info-req-row.met{color:#72d68a !important;}
body.night .info-req-row.unmet{color:#ff7a7a !important;}

/* Right invested list also follows the dark panel treatment. */
body.night .invested-panel,
body.night .invested-list{
  background:#242631 !important;
  color:#e4dfd8 !important;
}
body.night .invested-panel{
  border-color:#0f1016 !important;
}
body.night .invest-name{color:#e4dfd8 !important;}
body.night .invest-lv{color:#f4d394 !important;}
body.night .invest-empty{color:#aeb2c8 !important;}


/* ──────────────────────────────────────────────────────────────
   Saved-build dashboard shown before a class is selected.
   Uses the same RO-window surfaces/buttons as the tree panels.
   ────────────────────────────────────────────────────────────── */
.build-dashboard{
  width:min(760px,calc(100vw - 250px));
  max-width:100%;
  align-self:flex-start;
  position:relative;
  z-index:1;
  background:var(--ro-client-bg,#f7f7f7);
  border:1px solid #777;
  border-radius:5px 5px 2px 2px;
  box-shadow:inset 1px 1px 0 #fff,inset -1px -1px 0 var(--ro-client-shadow,#d6d6d6),2px 3px 4px rgba(0,0,0,.28);
  overflow:hidden;
  color:var(--ro-client-text,#202020);
}
.dash-hdr{
  background:linear-gradient(#fbfbfb,#e9e9e9);
  border-bottom:1px solid #c8c8c8;
  box-shadow:inset 1px 1px 0 #fff;
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.dash-kicker{
  font-size:9px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ro-client-muted,#575757);
  margin-bottom:3px;
}
.dash-hdr h2{
  font-size:18px;
  line-height:20px;
  color:var(--ro-client-text,#202020);
  font-weight:bold;
}
.dash-hdr p{
  font-size:11px;
  color:var(--ro-client-muted,#575757);
  margin-top:4px;
}
.dash-open-saves,
.dash-load-btn,
.dash-delete-btn{
  font-family:Tahoma,'MS Sans Serif',Arial,sans-serif;
  font-size:10px;
  border:1px solid #8f8f8f;
  background:linear-gradient(#fff,#dddddd);
  color:#202020;
  box-shadow:inset 1px 1px 0 #fff;
  cursor:pointer;
}
.dash-open-saves{padding:5px 10px;white-space:nowrap;font-weight:bold;}
.dash-load-btn{padding:3px 12px;font-weight:bold;}
.dash-delete-btn{width:22px;height:22px;font-size:14px;line-height:16px;color:#8d1a1a;}
.dash-open-saves:hover,
.dash-load-btn:hover,
.dash-delete-btn:hover{filter:brightness(1.08);}
.dash-saves{
  padding:12px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:8px;
}
.dash-save-card{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
  background:#f3f3f3;
  border:1px solid #b9b9b9;
  box-shadow:inset 1px 1px 0 #fff;
  padding:8px;
}
.dash-save-card:hover{background:#fff;}
.dash-save-icon{
  width:32px;
  height:32px;
  flex:0 0 32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #a8a8a8;
  background:linear-gradient(#fdfdfd,#dedede);
  color:#4057b8;
  font-size:11px;
  font-weight:bold;
  box-shadow:inset 1px 1px 0 #fff;
}
.dash-save-info{min-width:0;flex:1;line-height:13px;}
.dash-save-name{font-size:12px;font-weight:bold;color:#111;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dash-save-meta{font-size:10px;color:#4057b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dash-save-date{font-size:9px;color:#777;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dash-save-actions{display:flex;align-items:center;gap:4px;flex-shrink:0;}
.dash-empty-state{
  grid-column:1 / -1;
  min-height:170px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  text-align:center;
  border:1px dashed #b9b9b9;
  background:#f3f3f3;
  color:#575757;
  padding:18px;
}
.dash-empty-icon{font-size:32px;color:#4057b8;opacity:.45;}
.dash-empty-title{font-size:13px;font-weight:bold;color:#202020;}
.dash-empty-copy{font-size:11px;max-width:360px;line-height:15px;}
body.night .build-dashboard{
  background:#242631 !important;
  border-color:#0f1016 !important;
  color:#e4dfd8 !important;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.08),2px 3px 5px rgba(0,0,0,.45) !important;
}
body.night .dash-hdr{
  background:linear-gradient(#303342,#222530) !important;
  border-bottom-color:#11131a !important;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.09) !important;
}
body.night .dash-kicker,
body.night .dash-hdr p,
body.night .dash-save-date,
body.night .dash-empty-state{color:#aeb2c8 !important;}
body.night .dash-hdr h2,
body.night .dash-save-name,
body.night .dash-empty-title{color:#f0edf6 !important;}
body.night .dash-save-card,
body.night .dash-empty-state{
  background:#2a2d38 !important;
  border-color:#44495d !important;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.06) !important;
}
body.night .dash-save-card:hover{background:#303342 !important;}
body.night .dash-save-icon{
  background:linear-gradient(#343847,#242631) !important;
  border-color:#44495d !important;
  color:#f4d394 !important;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.07) !important;
}
body.night .dash-save-meta{color:#f4d394 !important;}
body.night .dash-open-saves,
body.night .dash-load-btn,
body.night .dash-delete-btn{
  background:linear-gradient(#303440,#20242e) !important;
  border-color:#484c60 !important;
  color:#e4dfd8 !important;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.08) !important;
}
body.night .dash-delete-btn{color:#ff8a8a !important;}
@media (max-width:760px){
  .build-dashboard{width:100%;}
  .dash-hdr{align-items:flex-start;flex-direction:column;}
  .dash-open-saves{align-self:flex-start;}
  .dash-saves{grid-template-columns:1fr;}
  /* Responsive saves modal */
  .modal{width:calc(100vw - 24px) !important;max-height:90vh;}
  .modal-body{padding:10px;}
  .modal-save-row{flex-direction:column;}
  .modal-save-row input,.modal-save-row button{width:100%;box-sizing:border-box;}
  .modal-select-row{flex-wrap:wrap;}
  .modal-select-row select{min-width:100%;order:2;}
  .modal-select-row label{order:1;}
  .modal-slot-btns{flex-wrap:wrap;}
  .modal-share-row{flex-direction:column;}
  .modal-share-row input,.modal-share-row button{width:100%;box-sizing:border-box;}
  .modal-transfer-row{flex-direction:column;align-items:stretch;}
  .modal-transfer-row button{width:100%;padding:7px 10px;font-size:12px;}
  .modal-transfer-status{text-align:center;}
}

/* Updates panel */
.updates-panel{
  width:260px;
  flex-shrink:0;
  align-self:flex-start;
  background:var(--ro-client-bg,#f7f7f7);
  border:1px solid #777;
  border-radius:5px 5px 2px 2px;
  box-shadow:inset 1px 1px 0 #fff,inset -1px -1px 0 var(--ro-client-shadow,#d6d6d6),2px 3px 4px rgba(0,0,0,.28);
  overflow:hidden;
}
.updates-body{
  padding:12px;
  font-family:Tahoma,'MS Sans Serif',Arial,sans-serif;
  font-size:11px;
  line-height:17px;
  color:var(--ro-client-text,#202020);
}
.updates-body p{margin-bottom:8px;}
.updates-body p:first-child{
  font-size:9px;
  letter-spacing:.1em;
  color:var(--ro-client-muted,#575757);
  margin-bottom:10px;
  text-transform:uppercase;
}
.updates-body h3{font-size:13px;font-weight:bold;margin-bottom:6px;}
.updates-loading{color:var(--ro-client-muted,#575757);font-style:italic;}
body.night .updates-panel{
  background:#242631 !important;
  border-color:#0f1016 !important;
  color:#c8cce0 !important;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.08),2px 3px 5px rgba(0,0,0,.45) !important;
}
body.night .updates-body p:first-child{color:#aeb2c8 !important;}
body.night .updates-body{color:#c8cce0 !important;}

/* ── MOBILE SHELL — hide on desktop ── */
@media (min-width: 769px) { #mobShell { display: none !important; } }

@media (max-width: 768px) {
  /* Hide all desktop chrome */
  .sidebar, .topbar, .info-bar, .tip, .trees-area { display: none !important; }
  .app { overflow: hidden; height: 100dvh; background: var(--ro-win-bg); }

  /* Shell wrapper */
  #mobShell {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0; /* fallback for iOS < 14.1 */
    inset: 0;
    z-index: 200;
    display: flex; flex-direction: column;
    overflow: hidden;
    height: 100vh; /* fallback */
    height: 100dvh;
    background: var(--ro-win-bg);
  }

  /* Top bar */
  .mob-top-bar {
    flex-shrink: 0; min-height: 44px;
    display: flex; align-items: center; gap: 6px; padding: 6px 10px;
    background: var(--s-topbar-bg); border-bottom: 1px solid var(--s-topbar-bdr);
  }
  .mob-top-title {
    font-weight: 700; font-size: 15px; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--ro-navy-lt); white-space: nowrap;
  }
  .mob-top-class {
    font-size: 11px; color: var(--ro-text-dim); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; max-width: 90px;
  }
  .mob-sp-strip { display: flex; flex-direction: column; justify-content: center; gap: 3px; flex: 1; min-width: 0; }
  .mob-sp-row { display: flex; align-items: center; gap: 4px; }
  .mob-sp-lbl { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ro-text-dim); white-space: nowrap; flex-shrink: 0; }
  .mob-sp-track {
    flex: 1; height: 4px; background: var(--ro-cell-bdr); border-radius: 3px;
    overflow: hidden; min-width: 28px; max-width: 55px;
  }
  .mob-sp-fill {
    height: 100%; width: 0%; background: var(--ro-navy);
    border-radius: 3px; transition: width 0.25s;
  }
  .mob-sp-text { font-size: 9px; color: var(--ro-text-dim); white-space: nowrap; flex-shrink: 0; }
  .mob-theme-btn { display: none; } /* replaced by mob-top-icon-btn */
  .mob-top-icon-btn {
    width: 30px; height: 30px; flex-shrink: 0;
    background: var(--s-panel-bg); border: 1px solid var(--s-panel-bdr);
    border-radius: 7px; display: flex; align-items: center; justify-content: center;
    font-size: 15px; cursor: pointer; touch-action: manipulation;
  }
  .mob-top-icon-btn:active { background: var(--s-info-icon-bg); }

  /* Content and tabs */
  .mob-content { flex: 1; min-height: 0; overflow: hidden; position: relative; display: flex; flex-direction: column; }
  .mob-tab-panel {
    display: none; flex: 1; min-height: 0;
    overflow-y: auto; overflow-x: hidden;
  }
  .mob-tab-panel.active { display: flex; flex-direction: column; }

  /* Tier nav — hidden; sections are stacked vertically */
  .mob-tier-nav { display: none; }

  /* Tree scroll container — vertical */
  .mob-carousel {
    flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
    display: flex; flex-direction: column; scrollbar-width: none;
    padding-bottom: 80px;
  }
  .mob-carousel::-webkit-scrollbar { display: none; }
  .mob-car-panel {
    width: 100%; padding: 10px 10px 16px; display: flex; flex-direction: column;
    gap: 10px;
  }
  .mob-car-title {
    font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--ro-text-dim);
    display: flex; align-items: center; gap: 6px;
  }
  .mob-car-title::after { content: ''; flex: 1; height: 1px; background: var(--ro-cell-bdr); }

  /* Skill grid — columns set dynamically by JS */
  .mob-skill-grid { display: grid; gap: 6px; }
  .mob-sk-node {
    aspect-ratio: 1; background: var(--s-grid-bg); border: 1px solid var(--s-sk-frame);
    border-radius: 9px; display: flex; flex-direction: column; align-items: center;
    justify-content: center; cursor: pointer; position: relative; min-height: 48px;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  }
  .mob-sk-node.empty {
    background: transparent; border-color: transparent; cursor: default; pointer-events: none;
  }
  .mob-sk-node.invested { border-color: var(--ro-navy-lt); }
  .mob-sk-node.maxed { border-color: var(--ro-navy); background: var(--s-info-icon-bg); }
  .mob-sk-node.locked { opacity: 0.35; }
  .mob-sk-node img { width: 60%; height: 60%; object-fit: contain; display: block; }
  .mob-sk-node .sk-canvas {
    width: 60% !important; height: 60% !important;
    position: static !important; display: block !important; border-radius: 2px;
  }
  .mob-sk-lv { font-size: 8px; color: var(--ro-text-dim); line-height: 1; margin-top: 2px; }
  .mob-sk-node.invested .mob-sk-lv { color: var(--ro-navy-lt); }
  .mob-sk-node.maxed    .mob-sk-lv { color: var(--ro-navy); }
  .mob-sk-badge {
    position: absolute; top: 2px; right: 2px; background: var(--ro-navy);
    color: #fff; font-size: 7px; font-weight: 700;
    border-radius: 4px; padding: 1px 3px; line-height: 1.4;
  }
  .mob-sk-node.maxed .mob-sk-badge { background: var(--ro-navy-dk); }

  /* Class list */
  .mob-class-list {
    padding: 10px; display: flex; flex-direction: column; gap: 5px; overflow-y: auto;
  }
  .mob-class-sec {
    font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--ro-text-dim); padding: 8px 4px 3px;
  }
  .mob-class-item {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    background: var(--s-panel-bg); border: 1px solid var(--s-panel-bdr);
    border-radius: 10px; cursor: pointer;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  }
  .mob-class-item.selected { border-color: var(--ro-navy-lt); background: var(--s-info-icon-bg); }
  .mob-class-icon {
    width: 36px; height: 36px; background: var(--s-grid-bg);
    border-radius: 8px; display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0; font-weight: 700; letter-spacing: 0;
  }
  .mob-class-info { flex: 1; min-width: 0; }
  .mob-class-name { font-weight: 700; font-size: 14px; color: var(--ro-text); }
  .mob-class-desc {
    font-size: 10px; color: var(--ro-text-dim);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .mob-class-check { font-size: 16px; color: var(--ro-navy-lt); opacity: 0; }
  .mob-class-item.selected .mob-class-check { opacity: 1; }

  /* Invested list */
  .mob-invested-list {
    padding: 10px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto;
  }
  .mob-inv-sec {
    font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--ro-navy-lt);
    padding: 8px 4px 3px; display: flex; align-items: center; gap: 6px;
  }
  .mob-inv-sec::after { content: ''; flex: 1; height: 1px; background: var(--ro-cell-bdr); }
  .mob-inv-row {
    display: flex; align-items: center; padding: 8px 10px;
    background: var(--s-panel-bg); border: 1px solid var(--s-panel-bdr);
    border-radius: 7px; gap: 8px; cursor: pointer; touch-action: manipulation;
  }
  .mob-inv-icon {
    width: 22px; height: 22px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
  }
  .mob-inv-icon img { width: 22px !important; height: 22px !important; object-fit: contain; display: block !important; }
  .mob-inv-icon .sk-canvas {
    width: 22px !important; height: 22px !important;
    position: static !important; display: block !important;
  }
  .mob-inv-name {
    flex: 1; font-size: 12px; color: var(--ro-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .mob-inv-lv {
    font-size: 11px; color: var(--ro-navy-lt); background: var(--s-info-icon-bg);
    border: 1px solid var(--s-sk-frame); border-radius: 5px;
    padding: 1px 6px; white-space: nowrap; flex-shrink: 0;
  }

  /* More tab */
  .mob-more-wrap {
    padding: 14px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto;
  }
  .mob-more-sec {
    font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--ro-text-dim); padding: 6px 4px 2px;
  }
  .mob-more-item {
    display: flex; align-items: center; gap: 10px; padding: 12px;
    background: var(--s-panel-bg); border: 1px solid var(--s-panel-bdr);
    border-radius: 10px; cursor: pointer;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  }
  .mob-more-item.danger { border-color: rgba(200,40,40,.35); }
  .mob-more-item-icon { font-size: 16px; width: 24px; text-align: center; }
  .mob-more-item-label { flex: 1; font-weight: 600; font-size: 14px; color: var(--ro-text); }
  .mob-more-item.danger .mob-more-item-label { color: #c83030; }
  .mob-more-item-arrow { color: var(--ro-text-dim); font-size: 14px; }

  /* Bottom sheet */
  .mob-sheet-bd {
    position: absolute; inset: 0; background: rgba(0,0,0,.55);
    z-index: 50; opacity: 0; pointer-events: none; transition: opacity .22s;
  }
  .mob-sheet-bd.open { opacity: 1; pointer-events: all; }
  .mob-sheet {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: var(--s-panel-bg); border-top: 1px solid var(--s-panel-bdr);
    border-radius: 14px 14px 0 0; z-index: 51;
    transform: translateY(100%);
    transition: transform .28s cubic-bezier(.32,.72,0,1);
    display: flex; flex-direction: column;
  }
  .mob-sheet.open { transform: translateY(0); }
  .mob-sheet.full { max-height: 72%; }
  .mob-sheet-handle {
    width: 32px; height: 4px; background: var(--ro-cell-bdr);
    border-radius: 2px; margin: 8px auto 4px; flex-shrink: 0;
  }
  /* Mini bar: always visible */
  .mob-mini-bar {
    flex-shrink: 0; padding: 6px 14px 10px;
    display: flex; flex-direction: column; gap: 8px;
  }
  .mob-mini-expand-btn {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: transparent; border: none; border-bottom: 1px solid var(--s-panel-bdr);
    width: 100%; padding: 0 0 8px; cursor: pointer;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  }
  .mob-mini-sk-name {
    font-size: 13px; font-weight: 600; color: var(--ro-text);
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; text-align: left;
  }
  .mob-mini-arrow {
    font-size: 10px; font-weight: 700; color: var(--ro-navy-lt);
    flex-shrink: 0; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap;
  }
  /* Full section: hidden in mini mode */
  .mob-sheet-full {
    display: none; flex-direction: column; flex: 1; min-height: 0;
    border-top: 1px solid var(--s-panel-bdr);
  }
  .mob-sheet.full .mob-sheet-full { display: flex; }
  .mob-sheet-hdr {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px 10px; border-bottom: 1px solid var(--s-panel-bdr); flex-shrink: 0;
  }
  .mob-sheet-icon {
    width: 44px; height: 44px; background: var(--s-info-icon-bg);
    border: 1px solid var(--s-sk-frame); border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; overflow: hidden;
  }
  .mob-sheet-icon img { width: 32px !important; height: 32px !important; object-fit: contain; display: block !important; }
  .mob-sheet-icon .sk-canvas {
    width: 32px !important; height: 32px !important;
    position: static !important; display: block !important;
  }
  .mob-sheet-info { flex: 1; min-width: 0; }
  .mob-sheet-name { font-weight: 700; font-size: 16px; color: var(--ro-text); letter-spacing: .03em; }
  .mob-sheet-sub { font-size: 10px; color: var(--ro-text-dim); margin-top: 2px; }
  .mob-sheet-body {
    overflow-y: auto; padding: 12px 14px; flex: 1; min-height: 0;
    display: flex; flex-direction: column; gap: 12px;
  }

  /* Level control */
  .mob-lv-ctrl {
    display: flex; align-items: stretch;
    background: var(--s-grid-bg); border: 1px solid var(--s-panel-bdr);
    border-radius: 10px; overflow: hidden;
  }
  .mob-lv-btn {
    width: 72px; min-height: 56px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px;
    cursor: pointer; flex-shrink: 0;
    touch-action: manipulation; background: transparent; border: none;
  }
  .mob-lv-btn-sym { font-size: 22px; font-weight: 700; line-height: 1; }
  .mob-lv-btn-lbl { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1; }
  .mob-lv-minus { color: #c82020; }
  body.night .mob-lv-minus { color: #ff5f5f; }
  .mob-lv-plus  { color: var(--ro-navy); }
  body.night .mob-lv-plus  { color: #7a9eff; }
  .mob-lv-btn:active { background: var(--s-info-icon-bg); }
  .mob-lv-btn:disabled { opacity: 0.35; }
  .mob-lv-disp { flex: 1; text-align: center; font-size: 17px; font-weight: 700; color: var(--ro-text); display: flex; align-items: center; justify-content: center; }
  .mob-lv-max-span { color: var(--ro-text-dim); font-size: 12px; font-weight: 400; }
  .mob-lv-max {
    padding: 0 12px; font-size: 10px; min-height: 56px;
    border: none; border-left: 1px solid var(--s-panel-bdr);
    color: var(--ro-navy-lt); cursor: pointer;
    touch-action: manipulation; background: transparent; font-weight: 700;
    white-space: nowrap;
  }
  .mob-lv-max:active { background: var(--s-info-icon-bg); }
  .mob-lv-max:disabled { opacity: 0.4; }

  /* Sheet description + stats */
  .mob-sheet-desc {
    font-size: 12px; color: var(--ro-text); line-height: 1.55;
    background: var(--s-grid-bg); border-radius: 8px;
    padding: 10px 12px; border: 1px solid var(--s-panel-bdr);
  }
  .mob-sheet-desc p { margin: 0 0 4px; }
  .mob-sheet-desc p:last-child { margin: 0; }
  .mob-sheet-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
  .mob-sheet-stat {
    background: var(--s-grid-bg); border: 1px solid var(--s-panel-bdr);
    border-radius: 7px; padding: 7px 9px;
  }
  .mob-sheet-stat-k {
    font-size: 8px; color: var(--ro-text-dim);
    letter-spacing: .07em; text-transform: uppercase;
  }
  .mob-sheet-stat-v { font-size: 13px; color: var(--ro-text); margin-top: 1px; font-weight: 600; }

  /* Prereqs */
  .mob-sheet-prereqs { display: flex; flex-direction: column; gap: 5px; }
  .mob-sheet-prereqs-hdr {
    font-size: 10px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ro-text-dim);
  }
  .mob-prereq-row {
    display: flex; align-items: center; gap: 6px; padding: 6px 8px;
    background: var(--s-grid-bg); border-radius: 6px; border: 1px solid var(--s-panel-bdr);
  }
  .mob-prereq-ok { color: #44aa44; font-size: 13px; }
  .mob-prereq-no { color: #c83030; font-size: 13px; }
  .mob-prereq-name { flex: 1; font-size: 11px; color: var(--ro-text); }
  .mob-prereq-lv { font-size: 10px; color: var(--ro-text-dim); }

  /* Bottom nav */
  .mob-nav {
    flex-shrink: 0; height: 60px;
    background: var(--s-topbar-bg); border-top: 1px solid var(--s-topbar-bdr);
    display: flex; align-items: stretch;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .mob-nav-item {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 2px;
    cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    background: transparent; border: none; position: relative;
  }
  .mob-nav-item.active { background: var(--s-info-icon-bg); }
  .mob-nav-icon { font-size: 19px; line-height: 1; }
  .mob-nav-lbl {
    font-size: 9px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--ro-text-dim);
  }
  .mob-nav-item.active .mob-nav-lbl { color: var(--ro-navy-lt); }
  .mob-nav-badge {
    position: absolute; top: 5px; right: 14px; background: var(--ro-navy);
    color: #fff; font-size: 7px; font-weight: 700;
    border-radius: 5px; padding: 1px 3px; line-height: 1.4;
  }

  /* ── Mobile pink sidebar theme (day mode) ─────────────────── */

  /* ── Mobile pink theme — CSS vars handle day/night automatically ── */

  /* Top bar */
  .mob-top-bar {
    background: var(--mob-topbar-bg) !important;
    border-bottom-color: var(--mob-topbar-bdr) !important;
  }
  .mob-top-title { color: var(--mob-accent-bright) !important; text-shadow: 0 1px 0 rgba(0,0,0,.35); }
  .mob-top-class { color: var(--mob-accent-text) !important; }
  .mob-sp-lbl { color: rgba(255,240,246,.75) !important; }
  .mob-sp-track { background: rgba(0,0,0,.28) !important; }
  .mob-sp-fill { background: #ffc4d8 !important; }
  .mob-sp-text { color: var(--mob-accent-text) !important; }
  .mob-top-icon-btn {
    background: rgba(255,240,246,.14) !important;
    border-color: rgba(255,240,246,.30) !important;
    color: var(--mob-accent-bright) !important;
  }
  .mob-top-icon-btn:active { background: rgba(255,240,246,.28) !important; }

  /* Bottom nav */
  .mob-nav {
    background: var(--mob-nav-bg) !important;
    border-top-color: var(--mob-nav-bdr) !important;
  }
  .mob-nav-lbl { color: var(--mob-accent-text) !important; }
  .mob-nav-item.active { background: rgba(255,200,220,.20) !important; }
  .mob-nav-item.active .mob-nav-lbl { color: var(--mob-accent-bright) !important; }
  .mob-nav-badge { background: var(--mob-accent-lt) !important; }

  /* Skill nodes */
  .mob-sk-node.invested { border-color: var(--mob-accent-lt) !important; }
  .mob-sk-node.invested .mob-sk-lv { color: var(--mob-accent) !important; }
  .mob-sk-node.maxed { border-color: var(--mob-accent) !important; background: rgba(139,88,112,.08) !important; }
  .mob-sk-node.maxed .mob-sk-lv { color: var(--mob-accent-dk) !important; }
  .mob-sk-badge { background: var(--mob-accent) !important; }
  .mob-sk-node.maxed .mob-sk-badge { background: var(--mob-accent-dk) !important; }

  /* Class list */
  .mob-class-item.selected { border-color: var(--mob-accent-lt) !important; }
  .mob-class-check { color: var(--mob-accent-lt) !important; }

  /* Invested list */
  .mob-inv-sec { color: var(--mob-accent) !important; }
  .mob-inv-lv { color: var(--mob-accent-dk) !important; border-color: #d8a9bd !important; }

  /* Tree section titles + sheet controls */
  .mob-car-title { color: var(--mob-accent) !important; }
  .mob-mini-arrow { color: var(--mob-accent) !important; }
  .mob-lv-plus { color: var(--mob-accent) !important; }
  .mob-lv-max { color: var(--mob-accent) !important; }

  /* Night overrides for values that don't map cleanly through variables */
  body.night .mob-sp-lbl { color: rgba(255,190,210,.65) !important; }
  body.night .mob-sp-track { background: rgba(0,0,0,.45) !important; }
  body.night .mob-sp-fill { background: var(--mob-accent-lt) !important; }
  body.night .mob-top-icon-btn {
    background: rgba(255,200,220,.10) !important;
    border-color: rgba(255,200,220,.22) !important;
  }
  body.night .mob-top-icon-btn:active { background: rgba(255,200,220,.20) !important; }
  body.night .mob-nav-item.active { background: rgba(255,180,200,.13) !important; }
  body.night .mob-nav-badge { background: var(--mob-accent) !important; }
  body.night .mob-sk-node.maxed { background: rgba(228,186,201,.10) !important; }
  body.night .mob-inv-lv { border-color: rgba(228,186,201,.30) !important; }
  body.night .mob-lv-plus { color: var(--mob-accent-text) !important; }
  body.night .mob-lv-max { color: var(--mob-accent-text) !important; }
}