:root{
  --bg:#08090c;
  --panel:#141822;
  --panel-2:#1a2030;
  --border:#2b3348;
  --text:#f3f6fb;
  --muted:#aab3c4;
  --gold:#c79b39;
  --gold-soft:rgba(199,155,57,.16);
  --shadow:0 18px 50px rgba(0,0,0,.38);
  --survival:#6fd69e;
  --melee:#ff9f6e;
  --ranged:#72b8ff;
  --exploration:#b2d267;
  --support:#cb9dff;
  --utility:#c4c7d0;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:transparent;
}
.page-bg-fixed{
  position:fixed; inset:0; z-index:-2;
  background:
    linear-gradient(rgba(6,7,8,.82), rgba(10,12,17,.92)),
    url("assets/bg/page-bg.jpg") center center / cover no-repeat;
}
.bg-grid{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.05;
  background-image:
    linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:linear-gradient(180deg, rgba(255,255,255,.9), transparent 92%);
}
.shell{max-width:1320px;margin:0 auto;padding:28px 22px 48px;position:relative}
.hero{
  padding:28px 30px;
  background:
    linear-gradient(90deg, rgba(8,10,14,.82), rgba(8,10,14,.60) 45%, rgba(8,10,14,.78)),
    url("assets/bg/hero.png") center center / cover no-repeat;
  border:1px solid rgba(199,155,57,.25); border-radius:28px; box-shadow:var(--shadow);
  margin-bottom:22px; position:relative; overflow:hidden;
}
.hero::after{content:"";position:absolute;inset:auto -100px -100px auto;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle, rgba(199,155,57,.18), transparent 65%);filter:blur(8px)}
.eyebrow{font-size:.76rem;font-weight:800;letter-spacing:.18em;color:var(--gold);margin-bottom:10px}
h1{font-size:clamp(2.3rem,4.6vw,4.1rem);margin:0 0 10px;line-height:1.01}
.hero-copy{max-width:820px;margin:0;color:#dfe5ef;font-size:1.05rem}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.panel{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));border:1px solid var(--border);border-radius:24px;padding:18px;box-shadow:var(--shadow);backdrop-filter:blur(6px)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:18px}
.kpi{background:linear-gradient(180deg, rgba(20,24,34,.95), rgba(20,24,34,.88));border:1px solid #313a52;border-radius:20px;padding:18px}
.kpi-label{color:var(--muted);font-size:.84rem;margin-bottom:8px}.kpi-value{font-weight:800;font-size:1.85rem}.kpi-sub{color:#e0c480;font-size:.88rem;margin-top:6px}
.controls-panel{margin-bottom:18px; position:relative; overflow:visible; z-index:5000}
.buildgen-panel{margin-bottom:18px; position:relative; overflow:visible; z-index:1}
.panel-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.panel h2{margin:0 0 6px;font-size:1.75rem}.panel p{margin:0;color:var(--muted);line-height:1.45}
.toolbar,.toolbar-left,.toolbar-right,.toggles{display:flex;gap:12px;flex-wrap:wrap;align-items:end}
.toolbar{justify-content:space-between;margin-bottom:14px}
label{display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:.9rem}
select,input,button{border-radius:14px;border:1px solid var(--border);background:var(--panel-2);color:var(--text);padding:12px 14px;font:inherit}
select,input{outline:none}.wide-input{width:100%;min-width:0}.slot-qty-input{max-width:110px;text-align:center}
select{min-width:190px}
button{cursor:pointer;background:linear-gradient(180deg, rgba(199,155,57,.28), rgba(199,155,57,.15));border-color:rgba(199,155,57,.30);font-weight:700}
.secondary,.ghost-btn,.preset-btn,.build-card button{background:var(--panel-2);border-color:var(--border)}
button:hover{filter:brightness(1.08)}
.preset-bar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:8px 0 16px}
.preset-title{color:var(--muted);font-size:.9rem}.preset-buttons{display:flex;gap:8px;flex-wrap:wrap}
.preset-btn{padding:10px 12px;border-radius:999px;font-size:.88rem}
.preset-btn.active{border-color:rgba(199,155,57,.34);background:rgba(199,155,57,.12);color:#f0ddb0}
.selectors{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px; overflow:visible}
.slot{
  background:linear-gradient(180deg, rgba(26,32,48,.95), rgba(20,24,34,.92));
  border:1px solid #33405b;border-radius:18px;padding:14px; position:relative; overflow:visible; z-index:1;
}
.slot.open{z-index:25000}
.slot-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px;color:var(--muted);font-size:.85rem}
.slot-header-main{display:flex;align-items:center;gap:10px;min-width:0}
.slot-title-block{display:flex;flex-direction:column;min-width:0}
.slot-title-block strong{color:var(--text);font-size:1rem;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.slot-title-block span{color:var(--muted);font-size:.78rem}
.slot-picked-icon{width:28px;height:28px;flex-basis:28px;border-radius:9px}
.slot-status{display:inline-flex;align-items:center;justify-content:center;padding:4px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);color:var(--muted);font-size:.72rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.slot-status-filled{color:#7ae0b0;border-color:rgba(122,224,176,.18);background:rgba(42,130,92,.12)}
.slot-controls{display:grid;grid-template-columns:1fr 96px;gap:10px;align-items:end}
.slot-input-wrap{position:relative}
.slot input{width:100%;min-width:0}
.auto-list{
  position:absolute; left:0; top:calc(100% + 8px);
  width:max(100%, 430px); max-width:560px; max-height:360px; overflow:auto;
  background:linear-gradient(180deg, rgba(20,24,34,.99), rgba(16,18,24,.99));
  border:1px solid rgba(199,155,57,.22); border-radius:18px; box-shadow:0 18px 40px rgba(0,0,0,.48);
  z-index:26000; padding:8px;
}
.auto-list.hidden{display:none}
.auto-item{
  display:grid; grid-template-columns:36px 1fr auto; gap:10px; align-items:center;
  padding:10px; border-radius:14px; cursor:pointer;
}
.auto-item:hover,.auto-item.active{background:rgba(199,155,57,.10)}
.auto-main{min-width:0}
.auto-name{font-weight:700; line-height:1.15}
.auto-meta{color:var(--muted); font-size:.84rem; margin-top:3px}
.auto-score{text-align:right; font-size:.82rem; color:#f0ddb0; white-space:nowrap}
.hint-row{margin-top:14px;color:var(--muted);font-size:.92rem}
.results-stack{display:flex;flex-direction:column;gap:18px;margin-bottom:18px}.hidden{display:none !important}
.selection-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.recipe-card{background:linear-gradient(180deg, rgba(20,24,34,.95), rgba(20,24,34,.86));border:1px solid var(--border);border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:10px;min-height:180px}
.recipe-top{display:flex;gap:12px;align-items:flex-start}
.icon-wrap,.ingredient-mini{width:42px;height:42px;flex:0 0 42px;border-radius:12px;overflow:hidden;background:linear-gradient(180deg, rgba(199,155,57,.14), rgba(255,255,255,.04));border:1px solid rgba(199,155,57,.24);display:grid;place-items:center}
.ingredient-mini{width:32px;height:32px;flex-basis:32px;border-radius:10px}
.icon-wrap img,.ingredient-mini img{width:100%;height:100%;object-fit:cover;display:block}
.icon-fallback{font-weight:800;color:#f2ddb0;font-size:.86rem;letter-spacing:.04em}
.recipe-name{font-weight:700;font-size:1rem;line-height:1.15}
.meta-row,.buff-chips,.build-foods,.build-badges{display:flex;gap:8px;flex-wrap:wrap}
.badge,.chip,.build-badge{
  display:inline-flex;align-items:center;padding:5px 8px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--border);color:#dfe4ea;font-size:.78rem
}
.badge.tier-S,.build-badge.tier-S{background:rgba(88,214,141,.14);border-color:rgba(88,214,141,.28);color:#c5f8da}
.badge.tier-A,.build-badge.tier-A{background:rgba(127,200,255,.12);border-color:rgba(127,200,255,.28);color:#d9efff}
.badge.tier-B,.build-badge.tier-B{background:rgba(199,155,57,.12);border-color:rgba(199,155,57,.28);color:#f0ddb0}
.badge.tier-C,.badge.tier-D,.build-badge.tier-C,.build-badge.tier-D{background:rgba(255,123,123,.10);border-color:rgba(255,123,123,.24);color:#ffd0d0}
.small-muted{color:var(--muted);font-size:.87rem;line-height:1.35}
.recipe-qty{color:#f0d28b;font-weight:700}
.food-buff-list{display:flex;flex-wrap:wrap;gap:6px}
.food-buff{font-size:.75rem;padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);color:#dce1e8}
.warning{border:1px solid rgba(255,123,123,.24);background:rgba(255,123,123,.08);color:#ffd3d3;border-radius:16px;padding:12px 14px}
.dashboard-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px}
.buff-category-wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.buff-category{border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.03);border-radius:18px;padding:14px}
.buff-category.survival{box-shadow:inset 0 0 0 1px rgba(111,214,158,.12)}
.buff-category.melee{box-shadow:inset 0 0 0 1px rgba(255,159,110,.12)}
.buff-category.ranged{box-shadow:inset 0 0 0 1px rgba(114,184,255,.12)}
.buff-category.exploration{box-shadow:inset 0 0 0 1px rgba(178,210,103,.12)}
.buff-category.xp_support{box-shadow:inset 0 0 0 1px rgba(203,157,255,.12)}
.buff-category.utility{box-shadow:inset 0 0 0 1px rgba(196,199,208,.12)}
.buff-category h3{margin:0 0 10px;font-size:1rem}

.category-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.category-icon{
  width:36px;height:36px;border-radius:12px;display:grid;place-items:center;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  font-size:1rem
}
.category-sub{color:var(--muted);font-size:.82rem}
.score-top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.score-icon{
  width:34px;height:34px;border-radius:12px;display:grid;place-items:center;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  font-size:.96rem
}
.rank-sort-btn{
  appearance:none;border:0;background:transparent;color:inherit;font:inherit;font-weight:700;
  padding:0;cursor:pointer
}
.rank-sort-btn.active{color:#f0ddb0}
.rank-sort-btn:hover{color:#f0ddb0}
.score-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px}
.score-card{background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:14px}
.score-name{color:var(--muted);font-size:.86rem;margin-bottom:8px}.score-value{font-weight:800;font-size:2rem;line-height:1}
.insights{display:flex;flex-direction:column;gap:8px}
.insight{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:12px;color:#dde3ec}
.empty{color:var(--muted);padding:14px 2px}.big-empty{padding:24px 2px; font-size:1rem}
.table-wrap{overflow:auto;border:1px solid rgba(255,255,255,.06);border-radius:16px}
table{width:100%;border-collapse:collapse}
th,td{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.06);text-align:left;vertical-align:top}
th{color:#dfe5ef;font-size:.9rem;background:rgba(255,255,255,.03)}
tbody tr:hover{background:rgba(255,255,255,.02)}
.number{text-align:right;white-space:nowrap}
.rank-cell{font-weight:800;color:#f1d998}
.ingredient-cell,.recipe-cell{display:flex;align-items:center;gap:10px;min-width:200px}
.footer{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-end;color:var(--muted);margin-top:18px}
.credits-block{max-width:740px}.credits-title{font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;color:var(--gold);margin-bottom:6px}.credits-line{line-height:1.45}
.switch{display:flex;flex-direction:row;align-items:center;gap:8px}.switch input{accent-color:var(--gold)}
.scoring-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.score-note-card{border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.03);border-radius:18px;padding:14px}
.score-note-card h3{margin:0 0 6px;font-size:1.15rem}
.generator-wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
.build-card{border:1px solid rgba(199,155,57,.22);background:linear-gradient(180deg, rgba(20,24,34,.96), rgba(20,24,34,.88));border-radius:22px;padding:16px;display:flex;flex-direction:column;gap:12px}
.build-title{font-size:1.15rem;font-weight:800}
.build-subtitle{color:var(--muted);font-size:.92rem}
.build-foods{gap:10px}
.build-food-chip{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid rgba(255,255,255,.06);border-radius:14px;background:rgba(255,255,255,.03);min-width:0}
.build-food-chip span{font-weight:600; line-height:1.15}
.build-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.build-metric{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:10px}
.build-metric-label{color:var(--muted);font-size:.82rem}.build-metric-value{font-size:1.05rem;font-weight:800}
.build-card .use-build-btn{align-self:flex-start;background:linear-gradient(180deg, rgba(199,155,57,.28), rgba(199,155,57,.15));border-color:rgba(199,155,57,.30)}
@media (max-width:980px){.dashboard-grid{grid-template-columns:1fr}.score-cards{grid-template-columns:1fr 1fr}}
@media (max-width:640px){
  .shell{padding:18px 14px 34px}.hero{padding:22px 20px}.hero-actions,.toolbar-left,.toolbar-right,.preset-buttons{width:100%}
  .hero-actions button,.toolbar-right button{flex:1}.score-cards{grid-template-columns:1fr}.selectors{grid-template-columns:1fr}.slot-controls{grid-template-columns:1fr}.slot-qty-input{max-width:none}
  .auto-list{width:100%; max-width:none}
}

.planner-empty{margin-top:14px}

.category-icon img,.score-icon img{width:20px;height:20px;object-fit:contain;display:block}
.category-icon-fallback{font-size:1rem;line-height:1}
.score-icon .category-icon-fallback{font-size:.96rem}
.category-head h3{margin:0;font-size:1rem}


.control-help{display:block;color:#7f8aa1;font-size:.73rem;font-weight:500;line-height:1.25;max-width:220px}
#calculateBtn{background:linear-gradient(180deg, rgba(250,204,21,.34), rgba(245,158,11,.20));border-color:rgba(250,204,21,.42);box-shadow:0 0 0 1px rgba(250,204,21,.12), 0 10px 24px rgba(245,158,11,.12)}
#calculateBtn:hover{filter:brightness(1.12);transform:translateY(-1px)}
.share-btn{border-color:rgba(96,165,250,.30);background:linear-gradient(180deg, rgba(51,65,85,.95), rgba(30,41,59,.95));color:#dbeafe}
.share-btn:hover{border-color:rgba(96,165,250,.46)}
.slot{transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease}
.slot:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.18);border-color:rgba(199,155,57,.22)}
.preset-btn{transition:all .15s ease}
.preset-btn:hover{border-color:rgba(199,155,57,.22);background:rgba(199,155,57,.07);color:#f6e8be}
.preset-btn.active{border-color:rgba(250,204,21,.38);background:linear-gradient(180deg, rgba(250,204,21,.16), rgba(245,158,11,.10));color:#fff2c4;box-shadow:0 0 0 1px rgba(250,204,21,.12)}
.buff-category.survival{box-shadow:inset 0 0 0 1px rgba(74,222,128,.16)}
.buff-category.melee{box-shadow:inset 0 0 0 1px rgba(251,146,60,.16)}
.buff-category.ranged{box-shadow:inset 0 0 0 1px rgba(96,165,250,.16)}
.buff-category.exploration{box-shadow:inset 0 0 0 1px rgba(250,204,21,.16)}
.buff-category.xp_support{box-shadow:inset 0 0 0 1px rgba(192,132,252,.16)}
.buff-category.utility{box-shadow:inset 0 0 0 1px rgba(244,114,182,.14)}
.score-card.survival .score-value{color:#86efac}
.score-card.melee .score-value{color:#fdba74}
.score-card.ranged .score-value{color:#93c5fd}
.score-card.exploration .score-value{color:#fde047}
.score-card.xp_support .score-value{color:#d8b4fe}
.score-card.utility .score-value{color:#f9a8d4}
.stat-total{display:flex;justify-content:flex-end;align-items:baseline;gap:6px}
.stat-label-inline{color:#7f8aa1;font-size:.82rem}
.stat-value-inline{font-weight:800;color:#fff}
.build-note{padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);color:#d8dee9;font-size:.88rem;line-height:1.35}
.ghost-btn,.secondary,.preset-btn,.build-card button,#calculateBtn{transition:filter .15s ease, transform .15s ease, border-color .15s ease, box-shadow .15s ease}