:root{
    --bg:#08101a;
    --bg2:#101a2b;
    --panel:#111827;
    --line:#334155;
    --text:#e5e7eb;
    --muted:#9ca3af;
    --green:#22c55e;
    --blue:#38bdf8;
    --accent:#79a5b0;
}
*{box-sizing:border-box}
body{
    margin:0;
    font-family:Calibri,Arial,sans-serif;
    background:linear-gradient(180deg,var(--bg) 0,var(--bg2) 260px,var(--bg) 100%);
    color:var(--text);
}
.wrap{
    max-width:1600px;
    margin:0 auto;
    padding:20px;
}
.hero,.panel,.summary-card,.tree-card,.node-panel{
    background:rgba(17,24,39,.95);
    border:1px solid var(--line);
    border-radius:20px;
    box-shadow:0 14px 34px rgba(0,0,0,.28);
}
.hero{
    padding:24px;
    background:linear-gradient(135deg,rgba(121,165,176,.16),rgba(56,189,248,.12));
    margin-bottom:18px;
}
.panel{
    padding:18px;
    margin-bottom:18px;
}
.panel-head,.detail-head{
    display:flex;
    justify-content:space-between;
    gap:16px;
    align-items:flex-start;
    flex-wrap:wrap;
}
h1,h2,h3,h4{
    margin:0 0 10px;
}
p{
    margin:0;
    line-height:1.45;
}
.muted{color:var(--muted)}
.small{font-size:13px}
.tree-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:16px;
    margin-top:16px;
}
.tree-card{
    padding:16px;
    text-align:left;
    color:inherit;
    cursor:pointer;
    transition:transform .15s ease,border-color .15s ease,opacity .15s ease;
}
.tree-card:hover{
    transform:translateY(-2px);
    border-color:#4b647f;
}
.tree-card.active{
    border-color:#5eead4;
    box-shadow:0 0 0 1px rgba(94,234,212,.22),0 14px 34px rgba(0,0,0,.28);
}
.tree-card.locked{
    opacity:.46;
    filter:saturate(.2);
}
.tree-head{
    display:flex;
    gap:12px;
    align-items:flex-start;
    margin-bottom:12px;
}
.tree-icon{
    width:56px;
    height:56px;
    flex:0 0 56px;
    border-radius:16px;
    background:linear-gradient(135deg,rgba(56,189,248,.12),rgba(167,139,250,.12));
    border:1px solid #334155;
    display:flex;
    align-items:center;
    justify-content:center;
}
.tree-icon svg{
    width:34px;
    height:34px;
    color:#d7eef4;
}
.tree-copy{min-width:0}
.unlock-note{
    margin-top:8px;
    font-size:12px;
    color:#cbd5e1;
}
.summary-card{
    min-width:280px;
    padding:16px;
}
.summary-label{
    font-size:13px;
    color:var(--muted);
    margin-bottom:8px;
}
.summary-value{
    font-size:28px;
    font-weight:700;
    margin-bottom:8px;
}
.summary-reqs{
    font-size:13px;
    color:#dbeafe;
    display:grid;
    gap:6px;
}
.meta-row{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:10px;
}
.meta-pill{
    display:inline-flex;
    align-items:center;
    padding:5px 10px;
    border-radius:999px;
    border:1px solid #34506d;
    font-size:12px;
    background:rgba(56,189,248,.10);
}
.tree-canvas{
    position:relative;
    margin-top:18px;
    border:1px solid var(--line);
    border-radius:22px;
    background:linear-gradient(180deg,rgba(17,24,39,.92),rgba(24,34,53,.92));
    overflow:auto;
    padding:24px;
}
.canvas-inner{
    position:relative;
    min-height:600px;
    margin:0 auto;
}
.canvas-svg{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    pointer-events:none;
    overflow:visible;
}
.canvas-svg path{
    stroke:#79a5b0;
    stroke-width:3;
    fill:none;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.tree-node{
    position:absolute;
    width:240px;
    min-height:104px;
    padding:14px 16px;
    background:rgba(17,24,39,.98);
    border:1px solid #3a4a60;
    border-radius:18px;
    box-shadow:0 12px 24px rgba(0,0,0,.24);
}
.node-effect{
    margin-top:8px;
    line-height:1.35;
    font-size:13px;
}
.node-panels{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:14px;
    margin-top:18px;
}
.node-panel{
    padding:16px;
}
.level-grid{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:12px;
}
.level-chip{
    min-width:32px;
    text-align:center;
    border-radius:10px;
    padding:5px 7px;
    font-size:12px;
    font-weight:700;
    border:1px solid #44566d;
    background:#1a2433;
    color:var(--text);
}
.level-chip.filled{
    background:rgba(125,211,252,.12);
    color:#7dd3fc;
    border-color:rgba(125,211,252,.4);
}
@media (max-width: 1200px){
    .building-groups{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
    margin-top:16px;
}
.building-group{
    background:rgba(17,24,39,.65);
    border:1px solid var(--line);
    border-radius:18px;
    padding:16px;
}
.building-grid{
    display:grid;
    gap:10px;
    margin-top:12px;
}
.building-card{
    display:grid;
    grid-template-columns:1fr 90px;
    gap:10px;
    align-items:center;
    border:1px solid #334155;
    border-radius:14px;
    padding:10px 12px;
    background:rgba(8,16,26,.45);
}
.building-name{
    display:block;
    font-weight:700;
    margin-bottom:4px;
}
.building-card input{
    width:100%;
    border:1px solid #44566d;
    border-radius:10px;
    background:#0f172a;
    color:var(--text);
    padding:10px 12px;
    font:inherit;
}
@media (max-width: 1200px){
    .building-groups{
        grid-template-columns:1fr;
    }
}


.top-menu{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:0 0 18px;
}
.menu-tab{
    background:#113047;
    color:var(--text);
    border:1px solid #34506d;
    border-radius:12px;
    padding:12px 16px;
    font:inherit;
    cursor:pointer;
}
.menu-tab.active{
    background:#79a5b0;
    border-color:#79a5b0;
    color:#08101a;
    font-weight:700;
}
.section-panel{
    display:none;
}
.section-panel.active-section{
    display:block;
}
.single-building-grid{
    max-width:420px;
}
.building-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:12px;
    margin-top:12px;
}
.building-card{
    display:grid;
    grid-template-columns:1fr 110px;
    gap:12px;
    align-items:end;
    border:1px solid #334155;
    border-radius:14px;
    padding:12px;
    background:rgba(8,16,26,.45);
}
.building-copy{
    min-width:0;
}
.building-input-wrap{
    display:grid;
    gap:6px;
}
.building-card input{
    width:100%;
    border:1px solid #44566d;
    border-radius:10px;
    background:#0f172a;
    color:var(--text);
    padding:10px 12px;
    font:inherit;
}


.interactive-node{
    text-align:left;
    color:var(--text);
    cursor:pointer;
    min-height:130px;
}
.node-progress-shell{
    height:10px;
    background:#07101c;
    border:1px solid #314155;
    border-radius:999px;
    overflow:hidden;
    margin-top:8px;
}
.node-progress-bar{
    height:100%;
    background:linear-gradient(90deg,var(--green),var(--blue));
}
.modal-shell{
    position:fixed;
    inset:0;
    background:rgba(2,6,23,.72);
    display:none;
    align-items:center;
    justify-content:center;
    padding:24px;
    z-index:2000;
}
.modal-shell.open{
    display:flex;
}
.modal-card{
    width:min(920px, 100%);
    max-height:90vh;
    overflow:auto;
    background:rgba(17,24,39,.98);
    border:1px solid var(--line);
    border-radius:20px;
    box-shadow:0 20px 44px rgba(0,0,0,.4);
    padding:20px;
}
.modal-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:16px;
    margin-bottom:16px;
}
.modal-close{
    background:transparent;
    border:1px solid #44566d;
    color:var(--text);
    border-radius:10px;
    width:40px;
    height:40px;
    font-size:26px;
    line-height:1;
    cursor:pointer;
}
.modal-controls{
    display:grid;
    gap:6px;
    margin-bottom:16px;
    max-width:220px;
}
.modal-controls select{
    border:1px solid #44566d;
    border-radius:10px;
    background:#0f172a;
    color:var(--text);
    padding:10px 12px;
    font:inherit;
}
.modal-levels{
    display:grid;
    gap:12px;
}
.modal-level-card{
    border:1px solid #334155;
    border-radius:16px;
    padding:14px;
    background:rgba(8,16,26,.45);
}
.modal-level-card.reached{
    border-color:rgba(34,197,94,.45);
    box-shadow:inset 0 0 0 1px rgba(34,197,94,.18);
}
.modal-level-head{
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
}
.modal-level-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px 14px;
}
@media (max-width: 800px){
    .modal-level-grid{
        grid-template-columns:1fr 1fr;
    }
}

.building-subgroups{display:grid;gap:18px;margin-top:12px}
.building-group-block{background:rgba(8,16,26,.35);border:1px solid #334155;border-radius:16px;padding:14px}
.building-group-block h3{margin:0 0 12px}


.tree-bulk-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin:10px 0 12px;
}
.bulk-btn{
    background:#113047;
    color:var(--text);
    border:1px solid #34506d;
    border-radius:10px;
    padding:10px 12px;
    font:inherit;
    cursor:pointer;
}
.ghost-btn{
    background:transparent;
}


.tree-card{
    position:relative;
}
.tree-percent-badge{
    position:absolute;
    top:12px;
    right:12px;
    min-width:52px;
    text-align:center;
    padding:6px 10px;
    border-radius:999px;
    border:1px solid #44566d;
    background:rgba(8,16,26,.88);
    color:#dbeafe;
    font-size:12px;
    font-weight:700;
}


.tree-card{
    overflow:hidden;
    padding-bottom:40px;
}
.tree-bottom-indicator{
    position:absolute;
    left:10px;
    right:10px;
    bottom:8px;
    height:24px;
    border-radius:3px;
    background:linear-gradient(180deg,#40624a 0%, #2f4937 52%, #294131 100%);
    border:1px solid rgba(255,255,255,.14);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        inset 0 -1px 0 rgba(0,0,0,.22);
    overflow:hidden;
}
.tree-bottom-indicator::before{
    content:'';
    position:absolute;
    left:0;
    right:0;
    top:2px;
    height:1px;
    background:rgba(255,255,255,.16);
}
.tree-bottom-indicator::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 14%, rgba(255,255,255,0) 86%, rgba(0,0,0,.08) 100%);
    pointer-events:none;
}
.tree-bottom-fill{
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
.tree-bottom-label{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:15px;
    letter-spacing:.7px;
    text-transform:uppercase;
    z-index:1;
}
.tree-bottom-label.light-text{
    color:#f5fff7;
    text-shadow:0 1px 1px rgba(0,0,0,.42);
}
.tree-bottom-label.dark-text{
    color:#17351f;
    text-shadow:0 1px 0 rgba(255,255,255,.18);
}


.profile-row{
    display:grid;
    grid-template-columns:260px 260px 1fr;
    gap:16px;
    align-items:start;
    margin:16px 0 0;
}
.profile-picker{
    display:grid;
    gap:6px;
}
.profile-picker select{
    width:100%;
    border:1px solid #44566d;
    border-radius:10px;
    background:#0f172a;
    color:var(--text);
    padding:10px 12px;
    font:inherit;
}
.profile-recommendation{
    display:grid;
    gap:10px;
}
.recommendation-card{
    display:grid;
    grid-template-columns:50px 1fr 68px;
    gap:12px;
    align-items:center;
    border:1px solid #334155;
    border-radius:14px;
    padding:12px 14px;
    background:rgba(8,16,26,.45);
}
.recommendation-rank{
    width:38px;
    height:38px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#113047;
    border:1px solid #34506d;
    font-weight:700;
}
.recommendation-title{
    font-weight:700;
}
.recommendation-percent{
    text-align:right;
    font-weight:700;
    color:#dbeafe;
}
@media (max-width: 1000px){
    .profile-row{
        grid-template-columns:1fr;
    }
}

/* Bella 'n' Co command-centre shell */
.apocalypse-hero{position:relative;overflow:hidden;text-align:center;padding:28px 26px 24px;background:radial-gradient(circle at 50% -30%,rgba(255,142,28,.28),transparent 46%),linear-gradient(135deg,#12100d 0%,#151b21 48%,#091018 100%);border-color:#785221;box-shadow:0 18px 44px rgba(0,0,0,.42),inset 0 0 80px rgba(211,99,18,.06)}
.apocalypse-hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.19;background:repeating-linear-gradient(112deg,transparent 0 28px,rgba(255,255,255,.028) 29px 30px),linear-gradient(180deg,transparent 65%,rgba(0,0,0,.42))}
.apocalypse-hero>*{position:relative;z-index:1}.apocalypse-hero h1{margin:12px 0 6px;font:800 clamp(28px,4vw,48px)/1 Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#f3f0e5;text-shadow:0 4px 0 #000}.apocalypse-hero p{color:#b9c1c7;font-size:16px}
.guide-launchers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:930px;margin:22px auto 0}.guide-launch{position:relative;display:grid;gap:4px;text-decoration:none;text-align:left;padding:14px 16px;border:1px solid #6e4d21;border-radius:12px;background:linear-gradient(145deg,rgba(61,38,18,.88),rgba(12,18,24,.94));color:#ece7dc;box-shadow:inset 0 1px 0 rgba(255,214,128,.08),0 7px 18px rgba(0,0,0,.25);transition:.16s ease}.guide-launch:hover{transform:translateY(-2px);border-color:#d38b25;box-shadow:0 10px 24px rgba(0,0,0,.32),0 0 18px rgba(211,111,25,.13)}.guide-launch strong{font:800 20px/1.05 Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;letter-spacing:.045em;text-transform:uppercase;color:#f2b33c}.guide-launch span{font-size:13px;color:#aeb6bc}
@media(max-width:760px){.guide-launchers{grid-template-columns:1fr}.apocalypse-hero{padding-inline:14px}}

.lab-level-picker{align-self:start}
.lab-level-picker .small.muted{line-height:1.3}
@media(max-width:1150px){.profile-row{grid-template-columns:1fr 1fr}.profile-recommendation{grid-column:1/-1}}
@media(max-width:700px){.profile-row{grid-template-columns:1fr}.profile-recommendation{grid-column:auto}}