:root{
            --bg:#06111b;
            --panel:#071722f5;
            --panel2:#091b28;
            --line:#315268;
            --line-soft:#29485a;
            --text:#edf8ff;
            --muted:#829cac;
            --gold:#e9b33d;
            --gold2:#ffe093;
            --cyan:#71cff2;
            --shadow:0 20px 54px rgba(0,0,0,.40);
        }

        *{box-sizing:border-box}
        html{overflow-y:scroll}
        body{
            min-height:100vh;
            margin:0;
            padding:0 0 70px;
            overflow-x:hidden;
            background:var(--bg);
            color:var(--text);
            font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
        }

        button,input,select{font:inherit}
        input[type="number"]{-moz-appearance:textfield;appearance:textfield}
        input[type="number"]::-webkit-inner-spin-button,
        input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

        /* Background */
        .bg-media{
            position:fixed;inset:0;width:100vw;height:100vh;object-fit:cover;
            z-index:-3;opacity:.34;filter:saturate(.78) brightness(.55);
        }
        .bg-overlay{
            position:fixed;inset:0;z-index:-2;pointer-events:none;
            background:
                radial-gradient(circle at 18% 16%,rgba(61,164,216,.13),transparent 29%),
                radial-gradient(circle at 82% 17%,rgba(240,184,63,.10),transparent 26%),
                linear-gradient(180deg,rgba(4,12,19,.48),rgba(4,11,17,.78));
        }

        /* Top navigation */
        .top-center-nav{
            position:absolute;top:18px;left:50%;z-index:500;
            display:flex;gap:9px;transform:translateX(-50%);
        }
        .nav-pill,.theme-toggle{
            min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
            padding:8px 15px;border:1px solid #45677e;border-radius:999px;
            background:#071520e8;color:#edf8ff;text-decoration:none;
            font-size:.78rem;font-weight:900;box-shadow:0 8px 24px #0005;
            backdrop-filter:blur(12px);transition:.17s;
        }
        .nav-pill:hover,.theme-toggle:hover{border-color:var(--gold)}
        .theme-toggle{min-height:46px;cursor:pointer}
        .floating-theme-toggle{
            position:fixed;right:18px;top:50vh;z-index:10000;transform:translateY(-50%);
        }
        .floating-theme-toggle:hover{transform:translateY(-50%) translateX(-4px)}
        .theme-toggle-text{font-size:.74rem;white-space:nowrap}

        /* Page / hero */
        .dashboard-container{
            width:min(1700px,calc(100% - 28px));margin:0 auto;padding:74px 0 60px;
        }
        .tool-hero{
            position:relative;width:100%;height:292px;overflow:hidden;
            border:1px solid #36566b;border-radius:28px;background:#081824;box-shadow:var(--shadow);
        }
        .tool-hero-bg{
            position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% 44%;
            filter:saturate(.88) brightness(.63);
        }
        .tool-hero-overlay{
            position:absolute;inset:0;
            background:
                linear-gradient(90deg,rgba(4,13,21,.97),rgba(5,18,29,.89) 48%,rgba(7,18,27,.53)),
                radial-gradient(circle at 80% 28%,rgba(240,184,63,.16),transparent 28%);
        }
        .tool-hero-copy{
            position:relative;z-index:2;max-width:calc(100% - 175px);height:100%;
            display:flex;flex-direction:column;justify-content:center;padding:34px 44px;
            text-shadow:0 3px 13px #000a;
        }
        .tool-kicker{color:#ffd779;font-size:.78rem;font-weight:950;letter-spacing:.12em}
        .tool-hero h1{
            margin:8px 0 9px;color:#fff;font-size:clamp(3rem,4.2vw,4.8rem);
            line-height:.94;letter-spacing:-.045em;white-space:nowrap;
        }
        .tool-hero p{
            margin:0;max-width:880px;color:#d7e6ee;font-size:1rem;line-height:1.55;font-weight:560;
        }
        .hero-badge{
            position:absolute;right:34px;top:34px;z-index:3;min-width:138px;
            padding:11px 14px;border:1px solid #826226;border-radius:17px;
            background:#1f1b0dc7;text-align:center;backdrop-filter:blur(8px);
        }
        .hero-badge strong{display:block;color:#ffe39a;font-size:1.22rem}
        .hero-badge span{
            display:block;margin-top:3px;color:#cbb273;font-size:.60rem;
            font-weight:850;text-transform:uppercase;letter-spacing:.055em;
        }

        /* Overview */
        .panel{
            border:1px solid var(--line);border-radius:20px;
            background:linear-gradient(145deg,#081a27f5,#06131df5);
            box-shadow:0 18px 45px #0005,inset 0 1px 0 rgba(179,226,255,.04);
            backdrop-filter:blur(14px);
        }
        .overview-panel{margin-top:15px;padding:16px}
        .section-heading{display:flex;justify-content:space-between;gap:15px;margin-bottom:12px}
        .section-heading h2{margin:0;font-size:1.04rem}
        .section-heading p{margin:4px 0 0;color:var(--muted);font-size:.70rem;line-height:1.4}
        .overview-grid{
            display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) 1.25fr 1.2fr;gap:9px;
        }
        .overview-card{
            min-width:0;min-height:92px;display:flex;align-items:center;gap:9px;padding:10px;
            border:1px solid #29495d;border-radius:13px;background:#071722;
        }
        .metric-card{flex-direction:column;justify-content:center;gap:4px;text-align:center}
        .overview-icon{width:34px;height:34px;object-fit:contain}
        .overview-value{color:#ffe094;font-size:1.03rem;font-weight:950}
        .overview-label{
            color:#7f98a9;font-size:.58rem;font-weight:850;text-transform:uppercase;letter-spacing:.04em;
        }
        .resource-total-card{flex-direction:column;align-items:stretch;justify-content:center}
        .resource-total-title{
            color:#b99a58;font-size:.60rem;font-weight:950;text-transform:uppercase;
            letter-spacing:.06em;text-align:center;
        }
        .resources-subgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
        .resources-subgrid span{
            display:flex;align-items:center;justify-content:center;gap:5px;padding:5px 6px;
            border:1px solid #223d4e;border-radius:8px;background:#091a25;
            color:#dce8ee;font-size:.67rem;font-weight:850;
        }
        .res-icon-inline{width:23px;height:23px;object-fit:contain}
        .prep-overview-card{
            border-color:#6f5722;
            background:radial-gradient(circle at 20% 0%,rgba(240,184,63,.10),transparent 48%),#10180f;
        }
        .prep-thumb{width:58px;height:58px;object-fit:cover;border:1px solid #b88a2f;border-radius:11px}
        .prep-copy{min-width:0;flex:1}
        .prep-copy small{
            display:block;color:#bda45d;font-size:.58rem;font-weight:950;
            text-transform:uppercase;letter-spacing:.07em;
        }
        .prep-score-value{display:block;margin-top:2px;color:#ffe087;font-size:1.24rem;font-weight:950}
        .valeria-row{display:flex;align-items:center;gap:5px;margin-top:7px}
        .valeria-row img{width:25px;height:25px;border-radius:50%;object-fit:cover;border:1px solid #b88a2f}
        .valeria-row span{color:#9d8f68;font-size:.59rem;font-weight:800}
        .valeria-row select{
            margin-left:auto;height:28px;min-width:52px;padding:2px 5px;border:1px solid #7b6429;
            border-radius:7px;background:#0b1518;color:#ffe087;font-size:.65rem;font-weight:900;
        }
        .speed-overview-card{flex-direction:column;align-items:stretch;justify-content:center}
        .speed-overview-card label{color:#aabdc9;font-size:.66rem;font-weight:900}
        .speed-overview-card small{color:#708999;font-size:.55rem;line-height:1.3}
        .percent-input{
            display:flex;align-items:center;min-height:40px;margin-top:6px;overflow:hidden;
            border:1px solid #35596f;border-radius:9px;background:#05131c;
        }
        .percent-input input{
            width:100%;min-width:0;height:38px;padding:0 10px;border:0;outline:0;
            background:transparent;color:#fff;font-size:.93rem;font-weight:950;
        }
        .percent-input span{
            align-self:stretch;min-width:38px;display:grid;place-items:center;
            border-left:1px solid #294a5e;color:#82d8fb;font-size:.78rem;font-weight:950;
        }

        /* Add task */
        .add-task-area{display:flex;justify-content:center;margin:16px 0 18px}
        .add-task-btn{
            min-width:350px;min-height:68px;display:flex;align-items:center;justify-content:center;gap:13px;
            border:1px solid #d3a13b;border-radius:18px;
            background:radial-gradient(circle at 50% 0%,rgba(255,231,144,.18),transparent 48%),
                       linear-gradient(135deg,#65470b,#9c680d);
            color:#fff2bd;cursor:pointer;box-shadow:0 10px 24px #0005,0 0 24px rgba(240,184,63,.16);
        }
        .add-task-plus{color:#ffe397;font-size:2rem;line-height:1}
        .add-task-copy{display:flex;flex-direction:column;align-items:flex-start}
        .add-task-copy strong{font-size:1rem}
        .add-task-copy small{margin-top:4px;color:#dbc37d;font-size:.64rem;font-weight:700}

        /* ==========================================================
           LOADOUT TASK CARD
           ========================================================== */
        #active-menus-container{
            display:grid;grid-template-columns:repeat(2,minmax(0,760px));
            justify-content:center;align-items:start;gap:24px;margin:0 auto 30px;
        }
        .training-task-wrap{width:100%;max-width:760px}
        #active-menus-container>.training-task-wrap:nth-last-child(1):nth-child(odd){
            grid-column:1/-1;width:min(760px,100%);justify-self:center;
        }
        .training-task-card{
            position:relative;width:100%;overflow:visible;border:1px solid #315268;border-radius:18px;
            background:linear-gradient(145deg,#081925f7,#06131df7);
            box-shadow:0 16px 40px #0005,inset 0 1px 0 rgba(183,226,255,.035);
            backdrop-filter:blur(12px);
        }
        .remove-menu-btn{
            position:absolute;top:-11px;right:-11px;z-index:50;width:34px;height:34px;
            display:grid;place-items:center;padding:0;border:1px solid #95566a;border-radius:50%;
            background:#4a1c29;color:#ffdce3;cursor:pointer;font-size:1rem;font-weight:900;
            box-shadow:0 7px 18px #0006;
        }

        /* Header selectors are visually different on purpose */
        .loadout-header{
            display:flex;align-items:center;justify-content:space-between;gap:16px;
            padding:11px 42px 11px 12px;border-bottom:1px solid #29485a;
            background:rgba(7,21,31,.72);border-radius:18px 18px 0 0;
        }
        .troop-choice-group{display:flex;align-items:stretch;gap:6px;min-width:0}
        .troop-choice{
            min-width:92px;min-height:61px;display:flex;align-items:center;justify-content:center;
            flex-direction:column;gap:2px;padding:5px 8px;border:1px solid #34566b;border-radius:10px;
            background:#0a1b27;color:#8fa7b6;cursor:pointer;transition:.15s;
        }
        .troop-choice img{width:37px;height:37px;object-fit:contain}
        .troop-choice span{font-size:.66rem;font-weight:900;white-space:nowrap}
        .troop-choice:hover{border-color:#6da2bd;background:#102431;color:#e5f4fb}
        .troop-choice.active{
            border-color:#d2a13a;background:linear-gradient(145deg,#49380e,#765617);
            color:#ffe29a;box-shadow:0 0 15px rgba(240,184,63,.10);
        }

        .action-switch{
            flex:0 0 235px;display:grid;grid-template-columns:1fr 1fr;overflow:hidden;
            border:1px solid #3a5b6f;border-radius:10px;background:#071722;
        }
        .action-choice{
            min-height:48px;display:flex;align-items:center;justify-content:center;gap:7px;
            border:0;background:transparent;color:#91a9b8;cursor:pointer;font-size:.69rem;font-weight:900;
        }
        .action-choice + .action-choice{border-left:1px solid #3a5b6f}
        .action-choice img{width:27px;height:27px;object-fit:contain}
        .action-choice.active{background:linear-gradient(135deg,#1e5c79,#12435a);color:#eefaff}
        .action-choice.active:last-child{
            background:linear-gradient(135deg,#5b440f,#816016);color:#ffe3a0;
        }

        .training-card-body{padding:10px}
        .task-controls-grid{
            display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
            border:1px solid #29485a;border-radius:11px;overflow:hidden;background:#071722;
        }
        .config-pane{
            min-width:0;padding:10px 11px;background:transparent;
        }
        .config-pane + .config-pane{border-left:1px solid #29485a}
        .setting-heading{margin-bottom:7px}
        .setting-heading strong{display:block;color:#e5f1f6;font-size:.80rem;line-height:1.15}
        .setting-heading small{
            display:block;margin-top:3px;color:#748e9f;font-size:.59rem;line-height:1.32;
        }
        .important-setting-heading strong{font-size:.84rem}
        .important-setting-heading small{font-size:.62rem}

        /* Path controls */
        .tier-with-fc-layout,.promote-line{display:flex;align-items:center;gap:6px}
        .promote-grid{display:grid;gap:6px}
        .promote-label{
            width:42px;flex:0 0 42px;color:#718c9e;font-size:.60rem;font-weight:900;
        }
        .opt-select,.opt-input{
            height:35px;min-height:35px;padding:3px 8px;border:1px solid #35596f;
            border-radius:7px;background:#05131d;color:#eef8ff;outline:0;
            font-size:.72rem;font-weight:900;
        }
        .tier-with-fc-layout .opt-select{width:150px;flex:1 1 auto;min-width:0}
        .promote-line .opt-select{flex:1 1 auto;min-width:0}
        .fc-picker{
            position:relative;width:86px;flex:0 0 86px;height:36px;display:flex;align-items:center;gap:3px;
            padding:2px 5px 2px 2px;border:1px solid #314c5e;border-radius:8px;background:#091925;
        }
        .fc-picker strong{color:#7791a2;font-size:.59rem;font-weight:900;white-space:nowrap}
        .fc-img-wrapper{position:relative;display:flex;align-items:center}
        .fc-img-btn{
            width:31px;height:31px;border:0;background-color:transparent;background-size:contain;
            background-repeat:no-repeat;background-position:center;cursor:pointer;
        }
        .fc-vertical-slider{
            position:absolute;top:calc(100% + 5px);left:50%;z-index:1000;width:56px;max-height:240px;
            overflow-y:auto;display:flex;flex-direction:column;gap:3px;padding:5px;
            transform:translateX(-50%);border:1px solid #b28a33;border-radius:9px;
            background:#071722f5;box-shadow:0 14px 28px #0009;
        }
        .fc-slider-item{display:grid;place-items:center;min-height:39px;border-radius:6px;cursor:pointer}
        .fc-slider-item:hover{background:#2d250f}
        .fc-slider-thumb{width:33px;height:33px;background-size:contain;background-repeat:no-repeat;background-position:center}

        /* Calculate */
        .calc-mode-tabs{
            display:grid;grid-template-columns:1fr 1fr;gap:5px;width:100%;margin-bottom:7px;
        }
        .opt-btn{
            min-height:35px;padding:4px 8px;border:1px solid #36566b;border-radius:7px;
            background:#091923;color:#9bb3c2;cursor:pointer;font-size:.72rem;font-weight:900;
        }
        .opt-btn.active{
            border-color:#66b8db;background:linear-gradient(135deg,#2c637d,#184256);color:#effaff;
        }
        .amount-input-wrap,.amount-input-wrap .opt-input{width:100%}
        .duration-inputs{
            width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;
        }
        .duration-field{min-width:0}
        .duration-field span{
            display:block;margin-bottom:2px;color:#708a9b;font-size:.50rem;font-weight:900;text-align:center;
        }
        .duration-field .opt-input{width:100%;min-width:0;text-align:center}

        /* Reduction bar */
        .reduction-strip{
            grid-column:1/-1;display:flex;align-items:center;gap:7px;padding:7px 10px;
            border-top:1px solid #29485a;background:#081a25;
        }
        .reduction-strip>strong{color:#dce9ef;font-size:.65rem;white-space:nowrap}
        .mini-field{display:flex;align-items:center;gap:4px}
        .mini-field>span{color:#718b9b;font-size:.53rem;font-weight:900}
        .mini-field .opt-select{width:86px;height:30px;min-height:30px;font-size:.67rem}

        /* Footer result */
        .task-output{
            margin-top:8px;display:grid;grid-template-columns:118px 190px minmax(0,1fr);
            align-items:stretch;gap:6px;padding:6px;border:1px solid #584c28;border-radius:10px;
            background:linear-gradient(145deg,#121a13,#0a1718);
        }
        .compact-result-main{
            display:flex;flex-direction:column;justify-content:center;padding:7px 9px;
            border:1px solid #5f4d20;border-radius:8px;background:#191b0c;
        }
        .compact-result-label{
            color:#b39755;font-size:.49rem;font-weight:950;text-transform:uppercase;letter-spacing:.07em;
        }
        .compact-troop-total{margin-top:3px;color:#ffe094;font-size:.76rem;font-weight:950}
        .result-key-metrics{display:grid;grid-template-rows:1fr 1fr;gap:5px}
        .result-resource-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px}
        .compact-metric,.compact-resource{
            min-width:0;display:flex;align-items:center;gap:6px;padding:4px 7px;
            border:1px solid #294249;border-radius:7px;background:#091719;
        }
        .compact-metric img,.compact-resource img{width:20px;height:20px;flex:0 0 auto;object-fit:contain}
        .compact-metric div{min-width:0}
        .compact-metric span{
            display:block;color:#718b97;font-size:.45rem;font-weight:900;text-transform:uppercase;
        }
        .compact-metric strong,.compact-resource strong{
            display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;
            color:#dce8e9;font-size:.60rem;font-weight:900;white-space:nowrap;
        }

        /* Light theme */
        body.light-theme{color:#173247;background:#eef7fb}
        body.light-theme .bg-media{opacity:.22;filter:saturate(.62) brightness(1.12)}
        body.light-theme .bg-overlay{
            background:
                radial-gradient(circle at 18% 16%,rgba(61,164,216,.09),transparent 29%),
                radial-gradient(circle at 82% 17%,rgba(240,184,63,.07),transparent 26%),
                linear-gradient(180deg,rgba(245,251,254,.74),rgba(222,238,246,.93));
        }
        body.light-theme .nav-pill,body.light-theme .theme-toggle{
            background:#fffffff0;color:#173247;border-color:#9ebdce;box-shadow:0 8px 24px rgba(49,86,107,.14);
        }
        body.light-theme .tool-hero{border-color:#a8bdc9}
        body.light-theme .tool-hero-copy,body.light-theme .tool-hero h1{color:#fff!important}
        body.light-theme .tool-hero p{color:#edf7fb!important}
        body.light-theme .tool-kicker{color:#ffe09a!important}

        body.light-theme .panel{
            color:#173247;background:linear-gradient(145deg,#fcfeffff,#edf7fbff);
            border-color:#9dbed1;box-shadow:0 18px 48px rgba(49,84,107,.14);
        }
        body.light-theme .overview-card{
            background:#fff;border-color:#abc6d5;color:#173247;
        }
        body.light-theme .overview-value,body.light-theme .prep-score-value{color:#745000}
        body.light-theme .overview-label,body.light-theme .resource-total-title,
        body.light-theme .section-heading p{color:#607a8b}
        body.light-theme .resources-subgrid span{background:#fff;color:#36576a;border-color:#bdd1dc}
        body.light-theme .prep-overview-card{
            background:linear-gradient(145deg,#fff8e2,#f7fcff);border-color:#d2ae58;
        }
        body.light-theme .valeria-row select,
        body.light-theme .opt-select,body.light-theme .opt-input,body.light-theme .percent-input{
            background:#fff;color:#173247;border-color:#8fb0c3;
        }
        body.light-theme .percent-input input{color:#173247;-webkit-text-fill-color:#173247}

        body.light-theme .training-task-card{
            background:#f7fbfd;border-color:#9fbfce;box-shadow:0 16px 40px rgba(43,76,96,.14);
        }
        body.light-theme .loadout-header{
            background:#eef7fb;border-bottom-color:#b7ceda;
        }
        body.light-theme .troop-choice{
            background:#fff;color:#547184;border-color:#abc4d2;
        }
        body.light-theme .troop-choice:hover{background:#f3f9fc;color:#173247}
        body.light-theme .troop-choice.active{
            background:linear-gradient(145deg,#fff5d4,#ffe8a3);
            color:#6f4e00;border-color:#c99a2e;
        }
        body.light-theme .action-switch{background:#fff;border-color:#abc4d2}
        body.light-theme .action-choice{color:#567284}
        body.light-theme .action-choice + .action-choice{border-left-color:#abc4d2}
        body.light-theme .action-choice.active{
            background:linear-gradient(135deg,#dff2fa,#cbe8f4);color:#145d7b;
        }
        body.light-theme .action-choice.active:last-child{
            background:linear-gradient(135deg,#fff4d0,#ffe39a);color:#725000;
        }

        body.light-theme .task-controls-grid{
            background:#fff;border-color:#abc6d5;
        }
        body.light-theme .config-pane + .config-pane{border-left-color:#c1d4de}
        body.light-theme .setting-heading strong{color:#173247}
        body.light-theme .setting-heading small,body.light-theme .promote-label{color:#607a8b}
        body.light-theme .fc-picker{background:#f8fcff;border-color:#a9c4d2}
        body.light-theme .fc-picker strong{color:#486779}
        body.light-theme .calc-mode-tabs .opt-btn{
            background:#f6fbfd;color:#587384;border-color:#a7c3d2;
        }
        body.light-theme .calc-mode-tabs .opt-btn.active{
            background:linear-gradient(135deg,#dff2fa,#cbe8f4);color:#145d7b;border-color:#6ca9c2;
        }
        body.light-theme .reduction-strip{
            background:#f6fbfd;border-top-color:#c1d4de;
        }
        body.light-theme .reduction-strip>strong{color:#173247}
        body.light-theme .mini-field>span{color:#607a8b}
        body.light-theme .task-output{
            background:linear-gradient(145deg,#fff9e8,#f4fbfd);border-color:#d1ae5b;
        }
        body.light-theme .compact-result-main{
            background:#fff8df;border-color:#d5ba70;
        }
        body.light-theme .compact-troop-total{color:#765100}
        body.light-theme .compact-metric,body.light-theme .compact-resource{
            background:#fff;border-color:#abc6d5;
        }
        body.light-theme .compact-metric span{color:#607a8b}
        body.light-theme .compact-metric strong,body.light-theme .compact-resource strong{color:#173247}

        /* Responsive */
        @media(max-width:1450px){
            .overview-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
        }
        @media(max-width:1320px){
            #active-menus-container{grid-template-columns:minmax(0,760px)}
            .training-task-wrap,
            #active-menus-container>.training-task-wrap:nth-last-child(1):nth-child(odd){
                grid-column:auto;width:100%;max-width:760px;justify-self:center;
            }
        }
        @media(max-width:820px){
            .loadout-header{align-items:stretch;flex-direction:column;padding-right:42px}
            .action-switch{flex-basis:auto;width:100%}
            .task-controls-grid{grid-template-columns:1fr}
            .config-pane + .config-pane{border-left:0;border-top:1px solid #29485a}
            body.light-theme .config-pane + .config-pane{border-top-color:#c1d4de}
            .task-output{grid-template-columns:118px minmax(0,1fr)}
            .result-resource-grid{grid-column:1/-1}
        }
        @media(max-width:700px){
            html{overflow-y:auto}
            .dashboard-container{width:calc(100% - 14px);padding-top:68px}
            .tool-hero{height:286px}
            .tool-hero-copy{max-width:100%;padding:25px 18px}
            .tool-hero h1{white-space:normal}
            .hero-badge{display:none}
            .overview-grid{grid-template-columns:1fr}
            .troop-choice-group{display:grid;grid-template-columns:repeat(3,1fr);width:100%}
            .troop-choice{min-width:0}
            .task-output{grid-template-columns:1fr}
            .result-resource-grid{grid-column:auto}
            .add-task-btn{min-width:min(360px,94vw)}
            .floating-theme-toggle{right:10px;top:auto;bottom:12px;transform:none}
            .floating-theme-toggle:hover{transform:none}
        }


        /* ==========================================================
           V11 — LARGER TASK TYPOGRAPHY / ACTION ICONS
           ========================================================== */

        /* Larger text throughout the actual training-task menus */
        .troop-choice span{
            font-size:.76rem;
        }

        .action-choice{
            min-height:62px;
            flex-direction:column;
            gap:4px;
            font-size:.78rem;
            line-height:1.05;
        }

        .action-choice img{
            width:31px;
            height:31px;
        }

        .setting-heading strong{
            font-size:.90rem;
        }

        .setting-heading small{
            font-size:.67rem;
            line-height:1.38;
        }

        .important-setting-heading strong{
            font-size:.94rem;
        }

        .important-setting-heading small{
            font-size:.70rem;
        }

        .promote-label{
            font-size:.68rem;
        }

        .opt-select,
        .opt-input{
            font-size:.80rem;
        }

        .fc-picker strong{
            font-size:.66rem;
        }

        .opt-btn{
            font-size:.80rem;
        }

        .duration-field span{
            font-size:.58rem;
        }

        .reduction-strip>strong{
            font-size:.73rem;
        }

        .mini-field>span{
            font-size:.61rem;
        }

        .mini-field .opt-select{
            font-size:.74rem;
        }

        .compact-result-label{
            font-size:.56rem;
        }

        .compact-troop-total{
            font-size:.86rem;
        }

        .compact-metric span{
            font-size:.52rem;
        }

        .compact-metric strong,
        .compact-resource strong{
            font-size:.69rem;
        }

        /* Larger result/resource icons */
        .compact-metric img,
        .compact-resource img{
            width:27px;
            height:27px;
        }

        /* Train icon above its label */
        .action-choice img{
            display:block;
            flex:0 0 auto;
            object-fit:contain;
        }

        /* Three upward chevrons, no tail, for Promote */
        .promote-triple-arrow{
            width:34px;
            height:31px;
            display:flex;
            flex-direction:column;
            align-items:center;
            justify-content:center;
            gap:0;
            flex:0 0 auto;
        }

        .promote-triple-arrow i{
            display:block;
            width:17px;
            height:17px;
            margin-top:-9px;
            border-left:4px solid currentColor;
            border-top:4px solid currentColor;
            transform:rotate(45deg);
        }

        .promote-triple-arrow i:first-child{
            margin-top:0;
        }

        .action-choice.active .promote-triple-arrow{
            color:#ffe39a;
        }

        body.light-theme .action-choice.active .promote-triple-arrow{
            color:#725000;
        }

        @media(max-width:700px){
            .troop-choice span{
                font-size:.70rem;
            }

            .action-choice{
                font-size:.74rem;
            }
        }


        /* ==========================================================
           V12 — FC PICKER OVERFLOW FIX
           ========================================================== */

        /* The FC menu must be able to escape the Path/Calculate frame. */
        .training-task-card,
        .training-card-body,
        .task-controls-grid,
        .config-pane,
        .path-pane,
        .promote-grid,
        .promote-line,
        .tier-with-fc-layout,
        .fc-picker,
        .fc-img-wrapper{
            overflow:visible!important;
        }

        .task-controls-grid{
            position:relative;
        }

        .config-pane{
            position:relative;
        }

        .path-pane{
            z-index:8;
        }

        .training-task-card.fc-menu-open{
            z-index:250;
        }

        .training-task-card.fc-menu-open .path-pane{
            z-index:260;
        }

        .fc-picker{
            z-index:20;
        }

        .fc-img-wrapper{
            z-index:21;
        }

        .fc-vertical-slider{
            z-index:10000!important;
            width:62px;
            max-height:min(420px,calc(100vh - 40px));
            overscroll-behavior:contain;
            scrollbar-width:thin;
        }

        .fc-vertical-slider.open-up{
            top:auto!important;
            bottom:calc(100% + 5px);
        }

        .fc-slider-item{
            flex:0 0 40px;
        }


        /* ==========================================================
           V13 — GLOBAL SPEED HEADER CONTROL / UNIFIED ACTION COLOR
           ========================================================== */

        /* Training Speed is a global setting, so it sits in the
           Plan Overview heading instead of consuming a result tile. */
        .section-heading{
            align-items:center;
        }

        .overview-speed-control{
            flex:0 0 auto;
            display:flex;
            align-items:center;
            gap:9px;
            min-height:52px;
            padding:6px 7px 6px 10px;
            border:1px solid #35576c;
            border-radius:12px;
            background:#071722;
        }

        .overview-speed-control>img{
            width:34px;
            height:34px;
            flex:0 0 auto;
            object-fit:contain;
        }

        .overview-speed-copy{
            min-width:96px;
        }

        .overview-speed-copy label{
            display:block;
            color:#dce9ef;
            font-size:.72rem;
            line-height:1.1;
            font-weight:950;
        }

        .overview-speed-copy small{
            display:block;
            margin-top:3px;
            color:#708999;
            font-size:.54rem;
            line-height:1.1;
            font-weight:700;
        }

        .overview-speed-input{
            width:104px;
            height:38px;
            display:flex;
            align-items:stretch;
            overflow:hidden;
            border:1px solid #40667d;
            border-radius:8px;
            background:#05131d;
        }

        .overview-speed-input input{
            width:100%;
            min-width:0;
            border:0;
            outline:0;
            padding:0 8px;
            background:transparent;
            color:#fff;
            font-size:.88rem;
            font-weight:950;
            text-align:center;
        }

        .overview-speed-input span{
            width:34px;
            flex:0 0 34px;
            display:grid;
            place-items:center;
            border-left:1px solid #31566b;
            color:#7fd3f5;
            font-size:.72rem;
            font-weight:950;
        }

        /* With Training Speed removed from the totals grid, all six
           actual result areas remain together as one coherent group. */
        .overview-grid{
            grid-template-columns:
                repeat(4,minmax(0,1fr))
                minmax(190px,1.25fr)
                minmax(210px,1.2fr);
        }

        /* Promote now uses exactly the same selected treatment as Train. */
        .action-choice.active:last-child{
            background:linear-gradient(135deg,#1e5c79,#12435a)!important;
            color:#eefaff!important;
        }

        .action-choice.active .promote-triple-arrow{
            color:currentColor!important;
        }

        /* Light theme */
        body.light-theme .overview-speed-control{
            background:#fff;
            border-color:#aac6d5;
        }

        body.light-theme .overview-speed-copy label{
            color:#173247;
        }

        body.light-theme .overview-speed-copy small{
            color:#607a8b;
        }

        body.light-theme .overview-speed-input{
            background:#f7fbfd;
            border-color:#91b1c2;
        }

        body.light-theme .overview-speed-input input{
            color:#173247;
            -webkit-text-fill-color:#173247;
        }

        body.light-theme .overview-speed-input span{
            color:#146a8d;
            border-left-color:#c2d5df;
        }

        body.light-theme .action-choice.active:last-child{
            background:linear-gradient(135deg,#dff2fa,#cbe8f4)!important;
            color:#145d7b!important;
        }

        body.light-theme .action-choice.active .promote-triple-arrow{
            color:currentColor!important;
        }

        @media(max-width:1100px){
            .section-heading{
                align-items:flex-start;
                flex-wrap:wrap;
            }

            .overview-speed-control{
                margin-left:auto;
            }
        }

        @media(max-width:700px){
            .overview-speed-control{
                width:100%;
                margin-left:0;
            }

            .overview-speed-copy{
                flex:1;
            }
        }