:root{
  --page-ink:#eefcff;--muted:#a9c8d4;--panel:#0d1a2e;--panel2:#10243b;
  --line:rgba(102,224,255,.28);--cyan:#3ee6ff;--cyan2:#10b7dd;--blue:#3b82f6;
  --gold:#f6c553;--shadow:0 22px 60px rgba(3,15,28,.40);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--page-ink);background:#081321;overflow-x:hidden}
button,input,select{font:inherit} button{user-select:none}
.bg-media{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3}
.bg-overlay{position:fixed;inset:0;z-index:-2;background:linear-gradient(180deg,rgba(7,20,37,.42),rgba(3,12,24,.64));backdrop-filter:blur(1.2px)}
.hub-container{width:min(1540px,calc(100vw - 70px));margin:34px auto 70px;display:flex;flex-direction:column;gap:26px}

/* floating theme control */
.page-side-rail{position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:800}
.theme-rail-toggle{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;border:1px solid rgba(83,226,255,.42);background:rgba(6,21,38,.91);color:#eaffff;box-shadow:0 12px 32px rgba(0,0,0,.32);cursor:pointer;backdrop-filter:blur(14px)}
.theme-rail-icon{font-size:1.15rem}.theme-rail-copy{display:flex;flex-direction:column;text-align:left}.theme-rail-copy b{font-size:.78rem}.theme-rail-copy small{font-size:.62rem;color:#9ec6d4}

/* shared premium shells */
.hero-shell,.stock-container,.planner-workbench,.charms-board,.bottom-summary{border:1px solid rgba(102,224,255,.30);box-shadow:var(--shadow);backdrop-filter:blur(18px)}
.hero-shell{position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(5,19,36,.97),rgba(12,50,75,.94),rgba(12,83,107,.85));border-radius:32px;padding:30px 38px 36px}
.hero-shell:after{content:"";position:absolute;width:600px;height:360px;border-radius:50%;right:-130px;bottom:-220px;background:radial-gradient(circle,rgba(67,232,255,.24),transparent 68%);pointer-events:none}
.hero-top{display:flex;justify-content:flex-start;align-items:center;margin-bottom:24px}
.back-pill{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:#e7fbff;border:1px solid rgba(125,225,255,.35);border-radius:999px;padding:9px 15px;font-weight:800;font-size:.82rem;background:rgba(10,24,42,.54)}
.hero-copy{display:grid;grid-template-columns:minmax(480px,1.08fr) minmax(540px,.92fr);gap:36px;align-items:center}
.mini-label,.eyebrow,.command-eyebrow{font-size:.72rem;font-weight:950;letter-spacing:.22em;color:var(--gold);text-transform:uppercase}
.hero-title{margin:10px 0 10px;font-size:clamp(3rem,5vw,5.6rem);line-height:.92;letter-spacing:-.055em;text-transform:uppercase;font-weight:1000;color:#f3feff;text-shadow:0 8px 24px rgba(0,0,0,.48),0 0 24px rgba(61,223,255,.15)}
.hero-lead{max-width:760px;margin:0;color:#bad5df;font-size:1.02rem;line-height:1.65}
.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.feature-card{min-height:92px;border:1px solid rgba(108,228,255,.20);border-radius:17px;background:rgba(6,22,40,.55);padding:16px;display:grid;grid-template-columns:36px 1fr;column-gap:8px;align-content:center}
.feature-card>span{grid-row:1/3;color:var(--gold);font-weight:900;font-size:.72rem}.feature-card b{font-size:.86rem}.feature-card small{color:#9dbbc7;font-size:.68rem;margin-top:4px}

/* stock */
.stock-container{background:linear-gradient(135deg,rgba(7,28,47,.96),rgba(9,50,70,.90));border-radius:25px;padding:18px 22px}
.stock-heading{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:13px}.stock-title{font-size:1.04rem;font-weight:900}.stock-subtitle{color:#9ec3cf;font-size:.72rem;margin-top:2px}.live-pill{border:1px solid rgba(75,224,255,.4);border-radius:999px;padding:6px 10px;font-size:.64rem;font-weight:900;color:#8ff0ff;background:rgba(32,171,202,.12)}
.stock-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.stock-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:15px;background:rgba(6,19,35,.55);border:1px solid rgba(92,213,240,.22)}
.res-icon-img{width:32px;height:32px;object-fit:contain;flex:0 0 auto}
.stock-copy{display:flex;flex-direction:column;min-width:95px}.stock-copy b{font-size:.77rem}.stock-copy small{font-size:.63rem;color:#8fb2bf}
.stock-controls{margin-left:auto;display:flex;gap:5px;align-items:center}.stock-controls input{width:105px;text-align:center;color:#eefcff;background:#071426;border:1px solid rgba(83,213,244,.34);border-radius:9px;padding:7px;font-weight:900;outline:none}
.adj-btn{width:30px;height:30px;border-radius:8px;border:1px solid rgba(83,226,255,.42);background:rgba(25,148,189,.40);color:#fff;font-weight:950;cursor:pointer}.adj-btn:hover{background:#17b7d9}

/* Quick build section, matching Chief Gear */
.planner-workbench{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:16px;background:linear-gradient(135deg,rgba(6,27,46,.96),rgba(11,56,77,.92));border-radius:25px;padding:17px}
.planner-main,.batch-card{border:1px solid rgba(88,216,243,.20);border-radius:19px;background:rgba(5,18,34,.46);padding:16px}
.planner-head{display:flex;justify-content:space-between;gap:20px;align-items:center}.planner-head h2,.batch-card h3{margin:3px 0 0;font-size:1rem}.planner-head p{margin:4px 0 0;color:#8fb5c2;font-size:.67rem}
.strategy-row{display:grid;grid-template-columns:repeat(3,1fr) 44px;gap:8px;margin-top:13px}
.strategy-btn,.settings-btn,.route-btn,.mass-btn,.primary-btn,.ghost-btn{border-radius:11px;border:1px solid rgba(93,219,246,.27);background:rgba(11,28,50,.72);color:#dff9ff;cursor:pointer;transition:.18s ease}
.strategy-btn{min-height:56px;padding:8px 10px;text-align:left;display:grid;grid-template-columns:24px 1fr;column-gap:5px}.strategy-btn>span{grid-row:1/3;font-size:1rem;color:var(--gold)}.strategy-btn b{font-size:.72rem}.strategy-btn small{font-size:.58rem;color:#92b6c4}
.strategy-btn.active{background:linear-gradient(135deg,#0e9fbe,#2563eb);border-color:#63efff;box-shadow:0 0 0 1px rgba(100,239,255,.16) inset}.settings-btn{font-size:1rem}
.strategy-btn:hover,.settings-btn:hover,.route-btn:hover,.mass-btn:hover,.ghost-btn:hover{transform:translateY(-1px);border-color:#67e8f9}
.exchange-strip{margin-top:10px;display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:12px;background:rgba(12,85,111,.17);border:1px solid rgba(85,219,244,.18)}
.exchange-dot{width:9px;height:9px;border-radius:50%;background:#38d989;box-shadow:0 0 10px rgba(56,217,137,.7)}.exchange-copy{flex:1;display:flex;flex-direction:column}.exchange-copy b{font-size:.68rem}.exchange-copy small{font-size:.59rem;color:#93bdc9}
.mini-switch{position:relative;width:42px;height:23px;display:inline-block}.mini-switch input{display:none}.mini-switch span{position:absolute;inset:0;border-radius:999px;background:#425168;border:1px solid rgba(255,255,255,.14);cursor:pointer}.mini-switch span:after{content:"";position:absolute;width:17px;height:17px;top:2px;left:3px;border-radius:50%;background:#fff;transition:.18s}.mini-switch input:checked+span{background:#0ba8c9}.mini-switch input:checked+span:after{left:20px}
.route-btn{padding:6px 9px;font-size:.65rem}.route-btn strong{color:var(--gold)}
.batch-head{display:flex;justify-content:space-between;align-items:center}.count-badge{border:1px solid rgba(247,197,83,.35);background:rgba(247,197,83,.08);color:var(--gold);border-radius:999px;padding:4px 7px;font-size:.62rem;font-weight:900}
.batch-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}.batch-col{display:flex;flex-direction:column;gap:7px}.batch-col>span{font-size:.57rem;color:#8db9c7;font-weight:900;letter-spacing:.15em}
.mass-btn{padding:8px;font-size:.66rem;font-weight:850}.mass-btn.primary{background:linear-gradient(135deg,#0a9dbc,#1674b8);color:#fff}.mass-btn.ghost{background:rgba(13,28,47,.60)}

/* SINGLE main charm board – no per-slot outer cards */
.charms-board{position:relative;width:1220px;max-width:calc(100vw - 54px);height:1135px;margin:0 auto;border-radius:36px;color:#102a40;
background:radial-gradient(circle at 50% 38%,rgba(225,254,255,.98) 0%,rgba(151,238,246,.96) 45%,rgba(66,187,220,.96) 77%,rgba(26,126,171,.97) 100%);
border:2px solid rgba(232,254,255,.88);box-shadow:0 30px 74px rgba(3,37,55,.42),inset 0 0 52px rgba(255,255,255,.56);overflow:visible}
.board-heading{position:absolute;top:26px;left:50%;transform:translateX(-50%);z-index:10;width:410px;text-align:center;background:rgba(255,255,255,.42);border:1px solid rgba(18,130,162,.22);border-radius:17px;padding:10px 15px;box-shadow:0 10px 24px rgba(32,111,135,.12);backdrop-filter:blur(8px)}
.board-heading b{display:block;color:#103a56;font-size:.96rem;margin-top:3px}.board-heading small{display:block;color:#4a7587;font-size:.64rem;margin-top:3px}.board-heading .command-eyebrow{color:#087b9f}

.charm-slot-pair{position:absolute;width:390px;z-index:5;text-align:center}
.slot-pair-0{top:96px;left:58px}.slot-pair-1{top:96px;right:58px}
.slot-pair-2{top:430px;left:30px}.slot-pair-3{top:430px;right:30px}
.slot-pair-4{top:764px;left:58px}.slot-pair-5{top:764px;right:58px}
.slot-title-row{height:52px;display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:4px}
.slot-gear-icon{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 5px 7px rgba(8,56,73,.25))}
.slot-title-copy{text-align:left}.slot-title-copy b{display:block;color:#123d58;font-size:.79rem}.slot-title-copy small{display:block;color:#5a8090;font-size:.56rem;margin-top:1px}
.group-compare{display:grid;grid-template-columns:132px 62px 132px;justify-content:center;align-items:center;gap:2px}
.triad-side{text-align:center}.side-label{font-size:.54rem;font-weight:950;letter-spacing:.14em;color:#4a7485;text-transform:uppercase;margin-bottom:4px}
.charm-triangle{position:relative;width:132px;height:122px;margin:auto}
.charm-tile{position:absolute;width:60px;height:60px;border:1px solid rgba(13,93,120,.20);border-radius:15px;background:linear-gradient(145deg,rgba(250,255,255,.95),rgba(208,247,250,.86));box-shadow:0 7px 14px rgba(14,76,99,.18);cursor:pointer;padding:1px;transition:.16s}
.charm-tile:hover{transform:translateY(-2px) scale(1.045);border-color:#0fa9c7}.charm-tile.top{top:0;left:36px}.charm-tile.bl{bottom:0;left:0}.charm-tile.br{bottom:0;right:0}
.charm-tile img{width:48px;height:48px;object-fit:contain;display:block;margin:auto}.empty-charm{height:48px;display:grid;place-items:center;color:#75a7b8;font-size:1.18rem}
.level-pill{position:absolute;right:2px;bottom:2px;min-width:28px;padding:2px 4px;border-radius:6px;background:#073249;color:#eaffff;font-size:.46rem;font-weight:950;box-shadow:0 2px 6px rgba(0,0,0,.20)}
.mini-progress{position:absolute;left:7px;right:7px;bottom:-8px;height:4px;display:flex;gap:2px}.mini-progress i{height:4px;flex:1;border-radius:5px;background:rgba(21,99,119,.17)}.mini-progress i.on{background:#23d47d;box-shadow:0 0 4px rgba(35,212,125,.45)}
.upgrade-bridge{position:relative;width:54px;height:28px;margin-top:18px}.upgrade-bridge:before{content:"";position:absolute;left:3px;right:10px;top:13px;height:2px;border-radius:3px;background:linear-gradient(90deg,rgba(24,145,177,.20),#21c5dd 45%,rgba(46,122,203,.78));box-shadow:0 0 8px rgba(30,190,219,.28)}
.upgrade-bridge:after{content:"";position:absolute;right:4px;top:8px;width:10px;height:10px;border-top:2px solid #1b9fbe;border-right:2px solid #1b9fbe;transform:rotate(45deg);filter:drop-shadow(0 0 4px rgba(32,188,216,.3))}

.slot-subpanel{position:absolute;width:340px;border:1px solid rgba(89,219,241,.22);background:linear-gradient(145deg,rgba(5,31,50,.95),rgba(10,68,88,.94));color:#eaffff;border-radius:15px;padding:10px 12px;box-shadow:0 12px 26px rgba(5,43,60,.28);z-index:6}
.subpanel-0{top:296px;left:80px}.subpanel-1{top:296px;right:80px}
.subpanel-2{top:630px;left:52px}.subpanel-3{top:630px;right:52px}
.subpanel-4{top:964px;left:80px}.subpanel-5{top:964px;right:80px}
.subpanel-col-group{display:grid;grid-template-columns:1fr 1fr;gap:10px}.subpanel-half{display:flex;flex-direction:column;gap:5px}.subpanel-half.costs{border-left:1px solid rgba(100,225,245,.22);padding-left:10px}
.slot-change-item{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.69rem;min-height:24px}.slot-change-left{display:flex;align-items:center;gap:6px;color:#b8dce6}.slot-change-item>span:last-child{color:#ffe078;font-weight:900}
.menu-icon-img{width:18px;height:18px;object-fit:contain}

.grand-totals-panel{position:absolute;left:50%;top:51%;transform:translate(-50%,-50%);width:252px;padding:15px 17px;border-radius:20px;display:flex;flex-direction:column;gap:9px;z-index:12;color:#eaffff;background:linear-gradient(145deg,rgba(5,25,45,.96),rgba(9,62,83,.95));border:1px solid rgba(93,227,249,.30);box-shadow:0 16px 34px rgba(5,43,60,.34)}
.grand-totals-tabs{display:flex;padding:3px;border-radius:10px;background:rgba(4,17,31,.66);gap:3px}.total-tab{flex:1;border:0;border-radius:8px;padding:6px;background:transparent;color:#8eb4c2;font-weight:900;font-size:.69rem;cursor:pointer}.total-tab.active{background:#0da9c7;color:#fff}
#totals-list{display:flex;flex-direction:column;gap:8px}
.grand-total-item{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.73rem}.grand-total-left{display:flex;align-items:center;gap:8px;color:#a9d0dc}.grand-total-item b{color:#ffe078}
.conversion-plan-btn{width:100%;margin-top:3px;padding:8px;border-radius:10px;border:1px solid rgba(99,230,255,.35);background:linear-gradient(135deg,#0ea5c6,#2563eb);color:white;font-weight:900;font-size:.67rem;cursor:pointer}

/* total gains */
.bottom-summary{display:grid;grid-template-columns:250px 1fr 1fr;gap:24px;align-items:stretch;border-radius:30px;padding:22px 28px;background:linear-gradient(135deg,rgba(7,26,44,.96),rgba(12,56,75,.94))}
.bottom-heading{padding-right:22px;border-right:1px solid rgba(92,213,240,.18);display:flex;flex-direction:column;justify-content:center}.bottom-heading h2{font-size:1.05rem;margin:5px 0}.bottom-heading p{font-size:.68rem;color:#91b3c0;margin:0}
.gain-column{display:flex;flex-direction:column;justify-content:center;gap:12px}.gain-item{display:flex;align-items:center;gap:10px;font-size:.78rem}.gain-item img{width:31px;height:31px;object-fit:contain}.gain-item span{color:#a5c4cf}.gain-item strong{color:#f0fcff;margin-left:auto}
.right-gain-stack{display:grid;grid-template-columns:1fr;gap:10px}.prep-card{display:grid;grid-template-columns:94px 1fr;gap:10px;align-items:center;background:linear-gradient(145deg,rgba(70,48,4,.80),rgba(99,66,6,.67));border:1px solid rgba(247,197,83,.46);border-radius:16px;padding:8px 9px;margin-top:2px}
.prep-img{width:94px;height:64px;object-fit:cover;border:1px solid #f0b63f;border-radius:10px}.prep-label{font-size:.56rem;font-weight:950;color:#ffe7a5}.prep-score{display:block;color:#fff2b6;font-size:1rem;margin:2px 0 5px}.valeria-row{display:flex;align-items:center;gap:6px;font-size:.58rem;color:#f6ddb1}.valeria-row img{width:22px;height:22px;object-fit:cover;border-radius:50%;border:1px solid #f6c553}.valeria-row select{margin-left:auto;min-width:46px;background:#312204;color:#ffe9a0;border:1px solid #dcae42;border-radius:7px;padding:3px}

/* modal system */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(2,10,20,.70);z-index:1100;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(5px)}.modal-overlay.active{display:flex}
.modal{width:660px;max-width:calc(100vw - 38px);max-height:88vh;overflow:auto;border-radius:24px;background:linear-gradient(145deg,#092039,#0c334d);border:1px solid rgba(96,228,252,.28);box-shadow:0 30px 80px rgba(0,0,0,.55);color:#eaffff}.modal.wide{width:900px}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 21px;border-bottom:1px solid rgba(88,218,243,.18)}.modal-kicker{font-size:.59rem;letter-spacing:.18em;color:var(--gold);font-weight:950}.modal-head h3{margin:4px 0 0;font-size:1.03rem}.modal-close{border:0;background:transparent;color:#77eaff;font-size:1.75rem;cursor:pointer}.modal-body{padding:20px}
.modal-note{font-size:.67rem;color:#97bdc9;line-height:1.5;padding:10px 12px;background:rgba(11,67,88,.18);border:1px solid rgba(82,218,244,.15);border-radius:12px;margin-bottom:13px}
.state-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.state-option{min-height:112px;border-radius:14px;border:1px solid rgba(85,217,242,.20);background:rgba(6,26,43,.64);color:#dcf9ff;cursor:pointer;padding:7px;display:flex;flex-direction:column;align-items:center;gap:4px}.state-option:hover,.state-option.selected{border-color:#59e9ff;background:rgba(11,119,150,.31)}.state-option img{width:60px;height:60px;object-fit:contain}.state-option b{font-size:.65rem}.state-option small{font-size:.51rem;color:#8cb6c4}.no-art{height:60px;display:grid;place-items:center;font-size:1.25rem;color:#7197a7}
.settings-section{padding:14px;border:1px solid rgba(86,216,241,.17);background:rgba(5,25,42,.50);border-radius:16px;margin-bottom:12px}.settings-section h4{margin:0;color:#85efff;font-size:.81rem}.settings-section p{font-size:.61rem;color:#90b4c1;margin:4px 0 11px}
.check-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.check-card{display:flex;align-items:center;gap:8px;padding:10px;border-radius:11px;background:rgba(10,47,65,.48);font-size:.67rem}.check-card input{accent-color:#0bb4d3}
.priority-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.priority-box{display:flex;flex-direction:column;gap:5px}.priority-box label{font-size:.55rem;color:#82aebc;font-weight:900}.priority-box select,.priority-box input,.mass-select-row select{background:#07192d;color:#eaffff;border:1px solid rgba(84,215,242,.27);border-radius:9px;padding:8px}
.settings-actions{display:flex;justify-content:flex-end}.primary-btn{padding:9px 13px;background:linear-gradient(135deg,#0ca8c7,#236fd1);color:#fff;font-weight:900}.ghost-btn{padding:9px 13px}
.route-list{display:grid;grid-template-columns:1fr 1fr;gap:9px}.conversion-route{display:flex;align-items:center;gap:10px;padding:12px;border-radius:13px;background:rgba(11,44,63,.58);border:1px solid rgba(83,216,241,.18)}.conversion-route input{accent-color:#0cb5d4}.conversion-route b{font-size:.7rem}.conversion-route small{display:block;color:#89adba;font-size:.57rem;margin-top:2px}.route-limit{margin-left:auto;color:#f5ce69;font-size:.57rem;font-weight:900}
.plan-status{display:flex;gap:10px;align-items:center;padding:11px 12px;border-radius:14px;background:rgba(12,92,119,.17);border:1px solid rgba(82,221,246,.20);margin-bottom:12px}.plan-weeks{display:flex;flex-direction:column;gap:10px}.week-card{border:1px solid rgba(83,215,241,.18);border-radius:15px;background:rgba(5,21,37,.48);padding:12px}.week-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.week-head b{font-size:.73rem;color:#dffbff}.week-head span{font-size:.57rem;color:#8db4c0}.week-events{display:flex;flex-direction:column;gap:6px}.week-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;padding:8px 10px;border-radius:10px;background:rgba(10,50,68,.52)}.week-row.unlock{background:rgba(247,197,83,.09);border:1px solid rgba(247,197,83,.20)}.week-route{font-size:.66rem;color:#d7f9ff}.week-count{min-width:64px;text-align:center;color:#ffe17b;font-size:.68rem;font-weight:950;padding:4px 7px;border-radius:999px;background:rgba(247,197,83,.11);border:1px solid rgba(247,197,83,.24)}
.mass-select-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}.mass-select-row button{min-width:150px}
.tooltip{display:none;position:fixed;z-index:1300;max-width:330px;background:#071828;border:1px solid rgba(89,222,246,.33);border-radius:11px;padding:9px 11px;color:#dcfaff;box-shadow:0 12px 30px rgba(0,0,0,.4);font-size:.64rem;pointer-events:none;line-height:1.45}.toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,18px);opacity:0;z-index:1400;padding:9px 14px;border-radius:999px;background:#073149;color:#e9fdff;border:1px solid rgba(88,226,249,.32);font-size:.67rem;font-weight:850;transition:.18s}.toast.show{opacity:1;transform:translate(-50%,0)}

/* light theme */
body.light-theme{color:#16384f}.light-theme .bg-overlay{background:rgba(225,242,251,.36)}
.light-theme .hero-shell{background:linear-gradient(135deg,rgba(252,254,255,.97),rgba(233,249,252,.95),rgba(214,242,248,.92));border-color:rgba(29,151,183,.22)}
.light-theme .back-pill{color:#22506a;background:rgba(255,255,255,.72);border-color:rgba(31,153,184,.20)}
.light-theme .hero-title{color:#153f5b;text-shadow:0 4px 0 rgba(70,201,220,.14),0 10px 24px rgba(22,76,102,.16)}
.light-theme .hero-lead{color:#5c7b8d}.light-theme .feature-card{background:rgba(255,255,255,.64);border-color:rgba(31,153,184,.16)}.light-theme .feature-card b{color:#224b63}.light-theme .feature-card small{color:#6d8998}
body.light-theme .stock-container,body.light-theme .planner-workbench,body.light-theme .bottom-summary{background:linear-gradient(135deg,rgba(251,254,255,.97),rgba(229,247,252,.96));border-color:rgba(34,153,184,.22);color:#173c55}
.light-theme .stock-subtitle,.light-theme .planner-head p,.light-theme .bottom-heading p{color:#6a8797}.light-theme .live-pill{color:#067997;background:#e3f8fd}
.light-theme .stock-item,.light-theme .planner-main,.light-theme .batch-card{background:rgba(255,255,255,.68);border-color:rgba(36,150,180,.16)}
.light-theme .stock-controls input,.light-theme .priority-box select,.light-theme .priority-box input,.light-theme .mass-select-row select{background:#f9fdff;color:#173b54;border-color:rgba(31,139,170,.26)}
.light-theme .strategy-btn,.light-theme .settings-btn,.light-theme .route-btn,.light-theme .mass-btn,.light-theme .ghost-btn{background:#f6fcff;color:#23485f;border-color:rgba(33,142,173,.20)}.light-theme .strategy-btn small{color:#688898}.light-theme .strategy-btn.active{color:#fff;background:linear-gradient(135deg,#079bb9,#2f71d6)}
.light-theme .exchange-strip{background:#eaf9fc}.light-theme .exchange-copy b{color:#21485e}.light-theme .exchange-copy small{color:#6c8d9c}
.light-theme .bottom-heading{border-color:rgba(39,139,169,.16)}.light-theme .gain-item span{color:#577788}.light-theme .gain-item strong{color:#183f59}
.light-theme .theme-rail-toggle{background:rgba(250,254,255,.94);color:#20445c;border-color:rgba(29,143,174,.26)}.light-theme .theme-rail-copy small{color:#6e8998}
.light-theme .modal{background:linear-gradient(145deg,#f8fdff,#eaf7fb);color:#173c55;border-color:rgba(33,145,175,.22)}.light-theme .modal-head{border-color:rgba(34,145,174,.15)}.light-theme .modal-close{color:#1382a1}.light-theme .modal-note,.light-theme .settings-section{background:rgba(255,255,255,.70);color:#607f90;border-color:rgba(31,146,176,.14)}
.light-theme .settings-section h4{color:#0c809f}.light-theme .check-card,.light-theme .conversion-route,.light-theme .week-card{background:rgba(255,255,255,.72);color:#234d64}.light-theme .conversion-route small,.light-theme .settings-section p{color:#698998}
.light-theme .state-option{background:#f6fcff;color:#23485f}.light-theme .state-option small{color:#668696}.light-theme .week-route,.light-theme .week-head b{color:#21495f}.light-theme .week-row{background:#edf8fb}.light-theme .plan-status{background:#e9f8fb}

@media(max-width:1260px){
  .hub-container{width:min(1120px,calc(100vw - 40px))}.hero-copy{grid-template-columns:1fr}.planner-workbench{grid-template-columns:1fr}
  .charms-board{min-width:1120px}.bottom-summary{grid-template-columns:230px 1fr 1fr}
}
@media(max-width:760px){
  .hub-container{width:calc(100vw - 22px);margin-top:15px}.hero-shell{padding:22px}.feature-grid{grid-template-columns:1fr}.stock-grid{grid-template-columns:1fr}
  .strategy-row{grid-template-columns:1fr 1fr}.settings-btn{min-height:50px}.state-grid{grid-template-columns:repeat(3,1fr)}.priority-grid,.check-grid,.route-list{grid-template-columns:1fr}
  .page-side-rail{right:8px}.theme-rail-copy{display:none}.bottom-summary{padding:18px;grid-template-columns:1fr}.bottom-heading{border-right:0;border-bottom:1px solid rgba(92,213,240,.18);padding:0 0 12px}
}

:root{--cc-page-max:1320px}
body{overflow-x:auto}
.bg-media{filter:blur(7px) saturate(1.12) brightness(.72);transform:scale(1.045);transform-origin:center}
.bg-overlay{background:linear-gradient(180deg,rgba(5,19,34,.48),rgba(2,10,22,.70))}
.hub-container{width:100%;max-width:none;margin:0;padding:34px 190px 78px 28px;gap:24px;align-items:center}
.hero-shell,.stock-container,.planner-workbench,.charms-board-scroll,.bottom-summary{width:min(var(--cc-page-max),100%);max-width:none;margin-left:auto;margin-right:auto;box-sizing:border-box}
.charms-board-scroll{overflow-x:auto;overflow-y:hidden;padding:0 0 10px;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
.charms-board-scroll .charms-board{margin-left:auto;margin-right:auto}
.hero-shell{min-height:330px;padding:28px 34px 32px}
.hero-copy{grid-template-columns:1.04fr .96fr;gap:42px}
.hero-title{font-size:clamp(3rem,4.5vw,4.8rem)}
.hero-lead{font-size:1.08rem;max-width:680px}
.feature-card{min-height:98px;padding:16px 17px}
.stock-container{padding:20px 24px 22px;border-radius:24px}
.stock-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.stock-item{min-width:0;min-height:58px;padding:9px 12px}
.stock-copy{min-width:0;flex:1}.stock-controls{margin-left:8px;min-width:164px;justify-content:flex-end}.stock-controls input{width:96px;height:32px}.adj-btn{width:32px;height:32px;touch-action:none}
.planner-workbench{grid-template-columns:minmax(0,1.65fr) minmax(330px,.75fr);gap:18px;padding:18px;border-radius:26px}
.planner-main,.batch-card{min-width:0;padding:16px;border-radius:20px}
.strategy-row{grid-template-columns:repeat(3,minmax(0,1fr)) 42px;gap:9px}.strategy-btn{min-width:0;min-height:72px;padding:10px 11px}.strategy-btn b{font-size:.78rem}.strategy-btn small{font-size:.62rem;line-height:1.2}.settings-btn{min-width:42px}
.exchange-strip{min-width:0}.exchange-copy{min-width:0}.route-btn{white-space:nowrap}
.batch-grid{gap:10px}.mass-btn{min-height:34px}
.charms-board{height:1135px;border-radius:36px;overflow:visible}
.slot-pair-0{left:64px}.slot-pair-1{right:64px}.slot-pair-2{left:38px}.slot-pair-3{right:38px}.slot-pair-4{left:64px}.slot-pair-5{right:64px}
.subpanel-0{left:78px}.subpanel-1{right:78px}.subpanel-2{left:50px}.subpanel-3{right:50px}.subpanel-4{left:78px}.subpanel-5{right:78px}
.charm-tile{z-index:2;pointer-events:auto}.mass-btn,.strategy-btn,.settings-btn,.route-btn,.primary-btn,.ghost-btn,.adj-btn{position:relative;z-index:2;pointer-events:auto}
.modal-overlay.active,.modal-overlay.open{display:flex}
.bottom-summary{grid-template-columns:250px 1fr 1fr;gap:24px;align-items:center;padding:24px 28px;border-radius:26px;min-height:160px}
.bottom-heading{align-self:stretch}.gain-column{gap:11px}.gain-item{font-size:1rem}.gain-item img{width:34px;height:34px}
.light-theme .bg-media{filter:blur(7px) saturate(.92) brightness(1.03)}
.light-theme .bg-overlay{background:rgba(225,242,251,.56)}
@media(max-width:1600px){:root{--cc-page-max:1240px}.hub-container{padding-right:190px}}
@media(max-width:1180px){body{min-width:0}.hub-container{padding:22px 18px 60px}.hero-shell,.stock-container,.planner-workbench,.charms-board-scroll,.bottom-summary{width:100%}.charms-board{width:1120px!important;min-width:1120px}.hero-copy{grid-template-columns:1fr}.planner-workbench{grid-template-columns:1fr}.stock-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.page-side-rail{right:10px}}

/* V4: clearer quick-build controls, larger charm UI, stronger sub-stage progress */
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}
.strategy-btn{min-height:82px;grid-template-columns:25px minmax(0,1fr);grid-template-rows:auto auto;align-content:center;overflow:visible}
.strategy-btn b{font-size:.79rem;line-height:1.15}.strategy-btn small{display:block;font-size:.64rem;line-height:1.3;color:#b5d5df;white-space:normal;overflow:visible;margin-top:2px}
.light-theme .strategy-btn small{color:#527488}
.priority-gap-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.priority-gap-row .priority-box{min-width:0}
.number-stepper{display:grid;grid-template-columns:36px minmax(70px,1fr) 36px;gap:6px;align-items:center}
.number-stepper input{width:100%;text-align:center;font-weight:900}
.stepper-btn{height:36px;border-radius:9px;border:1px solid rgba(84,215,242,.27);background:rgba(13,88,119,.58);color:#fff;font-weight:950;cursor:pointer}
.stepper-btn:hover{background:#0aa4c4}.light-theme .stepper-btn{background:#e8f7fb;color:#17617b;border-color:rgba(31,139,170,.24)}
.quick-modal-hint{margin-top:7px;font-size:.58rem;color:#87aebb}

.charm-slot-pair{width:430px}
.slot-pair-0{top:98px;left:38px}.slot-pair-1{top:98px;right:38px}
.slot-pair-2{top:472px;left:20px}.slot-pair-3{top:472px;right:20px}
.slot-pair-4{top:846px;left:38px}.slot-pair-5{top:846px;right:38px}
.slot-title-row{height:58px;gap:11px;margin-bottom:8px}
.slot-gear-icon{width:50px;height:50px}.slot-title-copy b{font-size:.88rem}.slot-title-copy small{display:none}
.group-compare{grid-template-columns:158px 66px 158px;gap:3px}
.side-label{font-size:.59rem;margin-bottom:6px}
.charm-triangle{width:158px;height:166px}
.charm-tile{width:70px;height:70px;border-radius:17px;padding:2px;overflow:visible}
.charm-tile.top{top:0;left:44px}.charm-tile.bl{bottom:0;left:0}.charm-tile.br{bottom:0;right:0}
.charm-tile img{width:56px;height:56px;pointer-events:none}.empty-charm{height:56px;font-size:1.32rem}
.level-pill{left:50%;right:auto;transform:translateX(-50%);bottom:2px;min-width:32px;padding:2px 5px;font-size:.49rem;pointer-events:none}
.charm-step{position:absolute;top:50%;transform:translateY(-50%);width:20px;height:20px;padding:0;border-radius:50%;border:1px solid rgba(8,91,118,.34);background:rgba(4,45,65,.82);color:#fff;font-size:.78rem;line-height:18px;font-weight:950;cursor:pointer;z-index:8;opacity:.72;transition:.15s}
.charm-step.minus{left:2px}.charm-step.plus{right:2px}.charm-tile:hover .charm-step,.charm-tile:focus-within .charm-step{opacity:1;background:#087f9e}
.charm-tile.drag-over{outline:3px solid rgba(31,208,237,.75);outline-offset:3px}
.mini-progress{left:5px;right:5px;bottom:-11px;height:6px;gap:2px;z-index:9}
.mini-progress i{height:6px;border-radius:6px;background:rgba(6,68,91,.28);box-shadow:inset 0 0 0 1px rgba(0,70,92,.10)}
.mini-progress i.on{background:#20d879;box-shadow:0 0 7px rgba(18,199,108,.80),inset 0 0 0 1px rgba(255,255,255,.35)}
.slot-subpanel{width:360px;padding:11px 13px}
.subpanel-0{top:345px;left:72px}.subpanel-1{top:345px;right:72px}
.subpanel-2{top:719px;left:54px}.subpanel-3{top:719px;right:54px}
.subpanel-4{top:1093px;left:72px}.subpanel-5{top:1093px;right:72px}
.slot-change-item{font-size:.72rem;min-height:25px}
.grand-totals-panel{width:286px;padding:17px 19px;gap:10px}
.grand-total-item{font-size:.77rem}.conversion-plan-btn{font-size:.70rem;padding:9px}
.charms-board{height:1285px}
.light-theme .charm-step{background:rgba(255,255,255,.91);color:#12617b;border-color:rgba(22,118,147,.30)}
.light-theme .mini-progress i{background:rgba(16,94,116,.24)}

/* Backdrop closes on a true outside press only; dragging out of a modal no longer closes it. */
.modal-overlay{user-select:auto}

.charm-slot-pair{width:450px}
.group-compare{grid-template-columns:174px 66px 174px;gap:3px}
.charm-triangle{width:174px;height:190px}
.charm-tile{width:76px;height:76px;border-radius:18px}
.charm-tile.top{top:0;left:49px}.charm-tile.bl{bottom:8px;left:0}.charm-tile.br{bottom:8px;right:0}
.charm-tile img{width:61px;height:61px}.empty-charm{height:61px}
.level-pill{bottom:3px;font-size:.52rem;min-width:34px}
.charm-step{width:26px;height:26px;line-height:23px;font-size:.93rem;opacity:.96;border-width:2px;box-shadow:0 2px 7px rgba(0,34,51,.30)}
.charm-step.minus{left:-4px}.charm-step.plus{right:-4px}
.charm-tile:hover .charm-step,.charm-tile:focus-within .charm-step{background:#087f9e;transform:translateY(-50%) scale(1.06)}
.mini-progress{left:3px;right:3px;bottom:-18px;height:12px;padding:2px;gap:2px;z-index:14;border-radius:9px;background:rgba(1,38,53,.88);border:1px solid rgba(221,255,250,.76);box-shadow:0 3px 8px rgba(0,37,49,.32)}
.mini-progress i{height:6px;align-self:center;border-radius:6px;background:rgba(149,202,209,.34);box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.mini-progress i.on{background:#1fe27f;box-shadow:0 0 9px rgba(18,223,119,.95),inset 0 0 0 1px rgba(255,255,255,.48)}
.slot-pair-0{top:98px;left:28px}.slot-pair-1{top:98px;right:28px}
.slot-pair-2{top:500px;left:12px}.slot-pair-3{top:500px;right:12px}
.slot-pair-4{top:902px;left:28px}.slot-pair-5{top:902px;right:28px}
.subpanel-0{top:390px;left:66px}.subpanel-1{top:390px;right:66px}
.subpanel-2{top:792px;left:48px}.subpanel-3{top:792px;right:48px}
.subpanel-4{top:1194px;left:66px}.subpanel-5{top:1194px;right:66px}
.charms-board{height:1395px}
.light-theme .charm-step{background:#ffffff;color:#075f7c;border-color:#1499bd;box-shadow:0 2px 8px rgba(20,103,132,.22)}
.light-theme .charm-step:hover{background:#daf6ff;color:#034c66}
.light-theme .mini-progress{background:rgba(255,255,255,.96);border-color:rgba(8,117,146,.62);box-shadow:0 3px 8px rgba(15,93,118,.20)}
.light-theme .mini-progress i{background:rgba(13,111,139,.22);box-shadow:inset 0 0 0 1px rgba(10,100,125,.13)}
.light-theme .mini-progress i.on{background:#13bf6b;box-shadow:0 0 7px rgba(13,191,107,.74),inset 0 0 0 1px rgba(255,255,255,.62)}
.setting-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:18px}.setting-toggle-row h4{margin:0 0 4px}.setting-toggle-row p{margin:0;max-width:560px}
.finish-level-setting{border-color:rgba(36,196,221,.24)}
.conversion-plan-btn.plan-ready{border-color:rgba(45,220,143,.72);box-shadow:0 0 0 1px rgba(45,220,143,.15),0 7px 18px rgba(12,121,93,.20)}
.conversion-covered-note{grid-column:1/-1;margin-top:5px;padding:6px 8px;border-radius:8px;text-align:center;font-size:.56rem;font-weight:850;color:#73e5b5;background:rgba(30,158,108,.12);border:1px solid rgba(49,204,142,.23)}
.light-theme .conversion-covered-note{color:#08794f;background:rgba(38,183,126,.10);border-color:rgba(24,139,94,.22)}

/* Selected Quick-Build copy must stay readable on the cyan/blue active tile in light mode. */
body.light-theme .strategy-btn.active b,
body.light-theme .strategy-btn.active small {
    color:#f4fdff !important;
    text-shadow:0 1px 2px rgba(0,55,84,.26) !important;
}
/* Hold-to-repeat charm steppers: improve pointer/touch reliability and visibility. */
.charm-step {
    touch-action:none;
    user-select:none;
    -webkit-user-select:none;
}

/* Phase 3 responsive containment: later desktop refinements must not undo the mobile summary stack. */
@media(max-width:760px){
  .bottom-summary{grid-template-columns:minmax(0,1fr);gap:16px;padding:18px}
  .bottom-heading{border-right:0;border-bottom:1px solid rgba(92,213,240,.18);padding:0 0 12px}
  .gain-column,.right-gain-stack,.prep-card{min-width:0}
  .prep-card{grid-template-columns:82px minmax(0,1fr)}
  .prep-img{width:82px}
}
@media(max-width:760px){
  .stock-item{flex-wrap:wrap}
  .stock-controls{width:100%;min-width:0;margin-left:0;justify-content:stretch}
  .stock-controls input{width:auto;min-width:0;flex:1 1 auto}
}