*{scrollbar-width:thin;scrollbar-color:#293345 #0b1017} body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.panel{border:1px solid #202938;background:#0e131b;border-radius:14px;box-shadow:0 16px 40px rgba(0,0,0,.22)}.brand-mark{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-weight:800;color:#f59e0b;border:1px solid #3a2b12;background:linear-gradient(145deg,#19140c,#0d1117)}.label{display:block;margin-bottom:6px;font-size:10px;line-height:1;text-transform:uppercase;letter-spacing:.16em;color:#778397}.control{height:38px;border:1px solid #273244;border-radius:8px;background:#0a0f16;padding:0 34px 0 11px;font-size:13px;outline:none}.control:focus{border-color:#b7791f;box-shadow:0 0 0 2px rgba(245,158,11,.08)}.realm-btn{height:38px;padding:0 13px;background:#0a0f16;color:#778397;font-size:12px;font-weight:600;border-right:1px solid #202938}.realm-btn:last-child{border-right:0}.realm-btn:hover{color:#e2e8f0;background:#121923}.realm-btn.active{background:#2a1d0b;color:#fbbf24}.browser-col{min-width:0;display:flex;flex-direction:column;background:#0c1118}.browser-head{height:43px;flex:none;padding:0 12px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #202938;color:#8794a7;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.13em}.count{padding:2px 6px;border-radius:999px;background:#171e29;color:#667388;font-size:9px}.browser-list{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:6px;overscroll-behavior:contain}.nav-row{width:100%;text-align:left;border-radius:7px;padding:8px 9px;color:#aab4c3;font-size:12px;line-height:1.35}.nav-row:hover{background:#151c27;color:#f1f5f9}.nav-row.active{background:#2a1d0b;color:#fbbf24}.detail-title{font-size:17px;font-weight:650;color:#f8fafc;line-height:1.3}.detail-sub{margin-top:4px;font-size:11px;color:#778397}.detail-grid{margin-top:16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.detail-card{border:1px solid #202938;border-radius:8px;background:#0e141d;padding:9px}.detail-key{font-size:9px;text-transform:uppercase;letter-spacing:.11em;color:#667388}.detail-value{margin-top:3px;font-size:12px;color:#cbd5e1;overflow-wrap:anywhere}.materials{margin-top:14px;border-top:1px solid #202938;padding-top:12px}.material-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid #171e29;font-size:12px}.empty{height:100%;min-height:180px;display:flex;align-items:center;justify-content:center;text-align:center;color:#596579;font-size:12px;padding:24px}.workspace-grid{background-image:linear-gradient(#202938 1px,transparent 1px),linear-gradient(90deg,#202938 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(to bottom right,black,transparent 75%)}@media(max-width:1279px){main{overflow:auto}.panel{min-height:650px}.workspace{min-height:360px}}@media(max-width:760px){main{padding:10px}.browser-col:nth-child(1){grid-column:span 1}.panel>div:nth-child(2){grid-template-columns:150px minmax(0,1fr);grid-template-rows:280px 1fr}.panel>div:nth-child(2)>div:nth-child(3){grid-column:1/-1;border-left:0;border-top:1px solid #202938}.detail-grid{grid-template-columns:1fr}}

.item-row{display:flex;align-items:center;gap:8px;min-height:38px}.craft-icon{width:26px;height:26px;flex:none;object-fit:contain;image-rendering:auto}.detail-heading{display:flex;align-items:center;gap:12px}.detail-icon{width:48px;height:48px;flex:none;object-fit:contain;border:1px solid #273244;border-radius:8px;background:#080c12;padding:3px}

html,body{overflow:auto}
main{overflow:auto}
.vulnerable-card{background:rgba(127,29,29,.16);border-color:rgba(239,68,68,.30)}
.vulnerable-card .detail-key{color:#f87171}
.resistant-card{background:rgba(20,83,45,.18);border-color:rgba(34,197,94,.28)}
.resistant-card .detail-key{color:#4ade80}
.material-name{min-width:0;display:flex;align-items:center;gap:8px}
.material-icon{width:24px;height:24px;flex:none;object-fit:contain;border:1px solid #273244;border-radius:5px;background:#080c12;padding:1px}
@media(max-width:1279px){body{overflow-y:auto}main{overflow-y:auto}.panel{overflow:hidden}}
@media(max-width:760px){.panel{min-height:650px}.browser-list,#detailPanel{overscroll-behavior:contain}}

/* Compact-window fix: never clip the detail/materials area. On narrow screens
   the category/craft pickers stay compact and the detail pane expands into
   normal page flow so Materials is always reachable with the page scrollbar. */
@media(max-width:760px){
  html,body{height:auto;min-height:100%;overflow-y:auto}
  body>div{min-height:100vh}
  main{overflow:visible!important}
  main>div{height:auto!important;min-height:0!important;display:grid}
  .panel{min-height:0!important;overflow:visible!important}
  .panel>div:nth-child(2){
    flex:none!important;
    min-height:0!important;
    display:grid;
    grid-template-columns:minmax(120px,1fr) minmax(0,1.55fr);
    grid-template-rows:220px auto;
  }
  .browser-col{min-height:0;overflow:hidden}
  .browser-list{height:177px;min-height:0;overflow-y:auto}
  .panel>div:nth-child(2)>div:nth-child(3){
    grid-column:1/-1;
    min-height:0;
    overflow:visible;
  }
  #detailPanel{flex:none!important;overflow:visible!important;padding:12px}
  .detail-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:12px}
  .detail-card{padding:7px}
  .materials{margin-top:10px;padding-top:9px}
  .material-row{padding:6px 0}
  .workspace{min-height:360px!important}
}
@media(max-width:390px){
  .detail-grid{grid-template-columns:1fr}
}


/* v7: desktop browser columns must be real bounded scroll containers. */
.panel>div:nth-child(2){min-height:0;overflow:hidden}
.browser-col{min-height:0;overflow:hidden}
.browser-list{height:0;flex:1 1 0;min-height:0;overflow-y:scroll!important;scrollbar-gutter:stable}
.browser-list::-webkit-scrollbar,#detailPanel::-webkit-scrollbar{width:10px}
.browser-list::-webkit-scrollbar-track,#detailPanel::-webkit-scrollbar-track{background:#090e15;border-left:1px solid #18202c}
.browser-list::-webkit-scrollbar-thumb,#detailPanel::-webkit-scrollbar-thumb{background:#344157;border-radius:999px;border:2px solid #090e15}
.browser-list::-webkit-scrollbar-thumb:hover,#detailPanel::-webkit-scrollbar-thumb:hover{background:#4a5a73}
.material-prices{margin-left:auto;display:flex;align-items:center;gap:12px;white-space:nowrap}
.material-unit{font-size:10px;color:#7f8b9d}
.material-total{font-size:11px;color:#fbbf24;font-weight:700;min-width:70px;text-align:right}
.material-summary{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0 2px;font-size:12px}
.material-summary-label{color:#94a3b8;font-weight:600}
.material-summary-value{color:#fbbf24;font-weight:800}
@media(max-width:760px){
  .browser-list{height:177px;flex:none;overflow-y:scroll!important}
  .material-prices{gap:7px}.material-unit{font-size:9px}.material-total{min-width:58px}
}

/* v8: Details/materials determine the left panel height.
   Category and craft lists keep their own viewport-height scroll areas. */
@media(min-width:761px){
  main{overflow:visible!important}
  main>div{
    height:auto!important;
    min-height:calc(100vh - 6.5rem)!important;
    align-items:start;
  }
  .panel{min-height:0!important}
  main>div>.panel:first-child{overflow:visible!important}
  main>div>.panel:first-child>div:nth-child(2){
    flex:none!important;
    min-height:0!important;
    overflow:visible!important;
    align-items:start;
  }
  main>div>.panel:first-child .browser-col{
    height:calc(100vh - 181px);
    min-height:360px;
    max-height:720px;
    overflow:hidden!important;
  }
  main>div>.panel:first-child .browser-list{
    height:0!important;
    flex:1 1 0!important;
    min-height:0!important;
    overflow-y:scroll!important;
  }
  main>div>.panel:first-child>div:nth-child(2)>div:nth-child(3){
    min-height:0!important;
    overflow:visible!important;
  }
  #detailPanel{
    flex:none!important;
    overflow:visible!important;
  }
  .workspace{
    min-height:calc(100vh - 6.5rem)!important;
    align-self:start;
  }
}