:root{--bg:#12151a;--bg-panel:#1a1f27;--bg-card:#222834;--bg-card-hover:#2a3140;--border:#313a49;--border-light:#3d4859;--text:#d7dee9;--text-dim:#8b96a5;--text-faint:#5c6675;--accent:#67b26f;--accent-dim:#3d7043;--food:#e0a458;--wood:#a9784f;--supplies:#7fb4d6;--knowledge:#8fb7e8;--essence:#b78fe0;--danger:#d66a6a;--combat:#d68f6a;--reward:#8fc978;--milestone:#e0c568;--hp:#d66a6a;--radius:8px;font-size:14px}:root[data-theme=light]{--bg:#eee9df;--bg-panel:#e4ddcf;--bg-card:#f7f3ea;--bg-card-hover:#efe8da;--border:#cbc2af;--border-light:#b8ad96;--text:#2e3238;--text-dim:#5f6670;--text-faint:#8a8f98;--accent:#3d7c45;--accent-dim:#7cae83;--food:#a86f1f;--wood:#7d5632;--supplies:#34698c;--knowledge:#3d6cae;--essence:#7a4bb0;--danger:#b03d3d;--combat:#a85a2e;--reward:#4a8a37;--milestone:#96801f;--hp:#b03d3d}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0;font-family:Segoe UI,system-ui,-apple-system,sans-serif;line-height:1.45;overflow:hidden}button{color:inherit;background:var(--bg-card);border:1px solid var(--border);cursor:pointer;border-radius:6px;padding:5px 10px;font-family:inherit;font-size:13px;transition:background .1s,border-color .1s}button:hover:not(:disabled){background:var(--bg-card-hover);border-color:var(--border-light)}button:disabled{opacity:.4;cursor:default}button.primary{background:var(--accent-dim);border-color:var(--accent)}button.primary:hover:not(:disabled){background:var(--accent);color:#10130f}button.danger-btn{border-color:var(--danger)}.app{grid-template-columns:250px 1fr 290px;height:100vh;display:grid}.sidebar{background:var(--bg-panel);border-right:1px solid var(--border);flex-direction:column;min-height:0;padding:14px 12px;display:flex}.brand{text-align:center;margin-bottom:10px;position:relative}.brand img{width:100%;max-width:170px;margin:0 auto;display:block}.sidebar-close{padding:2px 9px;font-size:15px;line-height:1.4;display:none;position:absolute;top:-4px;right:0}.res-list{flex-direction:column;flex:1;gap:1px;display:flex;overflow-y:auto}.res{border-radius:6px;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:8px;padding:3px 8px;display:grid}.res-head{align-items:center;gap:7px;min-width:0;display:flex;overflow:hidden}.res-head svg{flex-shrink:0;translate:0 1px}.res-name{color:var(--text-dim);text-transform:capitalize;text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.res-nums{font-variant-numeric:tabular-nums;white-space:nowrap;justify-content:flex-end;align-items:baseline;gap:3px;display:flex}.res .amount{text-align:right;min-width:46px;font-size:12px;font-weight:600}.res .amount.full{color:var(--milestone)}.res .cap{color:var(--text-faint);font-size:10.5px}.res .rate{color:var(--text-faint);text-align:right;min-width:52px;margin-left:4px;font-size:10.5px}.res .rate.pos{color:var(--reward)}.res .rate.neg{color:var(--danger)}.res.food svg{color:var(--food)}.res.wood svg{color:var(--wood)}.res.supplies svg{color:var(--supplies)}.res.knowledge svg{color:var(--knowledge)}.res.population svg{color:var(--text-dim)}.res.essence svg{color:var(--essence)}.center{border-right:1px solid var(--border);flex-direction:column;min-width:0;min-height:0;display:flex}.tabbar{background:var(--bg-panel);border-bottom:1px solid var(--border);flex-shrink:0;gap:2px;padding:8px 12px 0;display:flex}.tab{color:var(--text-dim);background:0 0;border:1px solid #0000;border-bottom:none;border-radius:8px 8px 0 0;align-items:center;gap:7px;padding:8px 16px;font-size:13.5px;font-weight:600;display:flex;position:relative;top:1px}.tab:hover:not(.active){color:var(--text);background:#2a314080}.tab.active{background:var(--bg);border-color:var(--border);color:var(--text)}.tab svg{font-size:15px}.tab-badge{background:var(--accent-dim);color:var(--text);border-radius:8px;padding:0 6px;font-size:10px}.tab-scroll{flex:1;min-width:0;min-height:0;overflow:hidden auto}.tab-content{max-width:900px;padding:14px 16px 40px}.tab-content h2,.panel h2{text-transform:uppercase;letter-spacing:1.5px;color:var(--text-faint);border-bottom:1px solid var(--border);margin:20px 0 10px;padding-bottom:4px;font-size:11px}.tab-content h2:first-child{margin-top:0}.tile-grid{grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:8px;display:grid}.tile{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);-webkit-user-select:none;user-select:none;flex-wrap:wrap;align-items:flex-start;gap:10px;padding:10px 12px;transition:background .1s,border-color .1s,transform 50ms;display:flex}.tile .icon{color:var(--text-dim);flex-shrink:0;margin-top:2px;font-size:20px;display:flex}.tile .body{flex:1;min-width:0}.tile .title-line{flex-wrap:nowrap;justify-content:space-between;align-items:baseline;gap:8px;min-width:0;display:flex}.tile .name{text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:13.5px;font-weight:600;overflow:hidden}.tile .title-line .badge{flex-shrink:0}.tile .name .count,.tile .count{color:var(--text-dim);font-size:12px;font-weight:400}.tile .desc{color:var(--text-dim);margin-top:2px;font-size:11.5px}.tile .statline{font-variant-numeric:tabular-nums;color:var(--text);margin-bottom:2px}.tile .flavor{color:var(--text-faint);margin-top:3px;font-style:italic}.tile .cost{font-variant-numeric:tabular-nums;gap:10px;margin-top:5px;font-size:11.5px;display:flex}.tile .cost .ok{color:var(--text-dim)}.tile .cost .short{color:var(--danger)}.tile .badge{text-transform:uppercase;letter-spacing:.6px;color:var(--text-faint);border:1px solid var(--border);white-space:nowrap;font-variant-numeric:tabular-nums;border-radius:9px;padding:1px 7px;font-size:10px}.tile .badge.done{color:var(--accent);border-color:var(--accent-dim)}.tile .badge.warn,.tile .badge.never{color:var(--danger);border-color:var(--danger)}.tile-wrap{display:flex}.tile-wrap>.tile{flex:1}.tile-detail .tip-desc{color:var(--text-dim);margin-bottom:2px}.tile-detail .tip-section{text-transform:uppercase;letter-spacing:.6px;color:var(--text-faint);margin-top:6px;font-size:10px}.tile-detail .tip-section:first-child{margin-top:0}.tile-detail .ok{color:var(--accent)}.tile-detail .short{color:var(--danger)}.tile-detail .dim{color:var(--text-faint)}.tile-detail .tip-eta{border-top:1px solid var(--border);margin-top:6px;padding-top:5px}.tile-detail .never{color:var(--danger)}.res-tip .tip-section{text-transform:uppercase;letter-spacing:.6px;color:var(--text-faint);justify-content:space-between;gap:12px;margin-top:6px;font-size:10px;display:flex}.res-tip .tip-section:first-child{margin-top:0}.res-tip .tip-row{justify-content:space-between;gap:12px;display:flex}.res-tip .v{font-variant-numeric:tabular-nums;white-space:nowrap}.res-tip .v.pos{color:var(--accent)}.res-tip .v.neg{color:var(--danger)}.res-tip .tip-mods{border-top:1px solid var(--border);color:var(--text-faint);margin-top:6px;padding-top:5px}.tile .io-line{font-variant-numeric:tabular-nums;color:var(--text-dim)}.tile .tile-controls{flex-basis:100%;justify-content:flex-start;align-items:center;gap:8px;margin-top:2px;display:flex}.tile .tile-controls .stepper{flex-shrink:0;margin-left:auto}.tile .tile-controls .stepper button{padding:0 6px;font-size:12px;line-height:18px}.tile .tile-controls .fuel-toggle button{padding:2px 8px;font-size:11.5px}.trade-tile .body{flex-direction:column;align-self:stretch;display:flex}.trade-tile .treat-btn{margin-top:auto}.trade-tile .body>.desc:last-of-type{margin-bottom:8px}.tile.affordable{border-color:var(--accent-dim)}.tile.affordable .icon{color:var(--accent)}.tile.clickable{cursor:pointer}.tile.clickable:hover{background:var(--bg-card-hover);border-color:var(--accent)}.tile.clickable:active{transform:scale(.99)}.tile.wait{opacity:.75}.tile.stalled{opacity:.6}.tile.capped{background:#d66a6a0d;border-color:#d66a6a8c}.tile.owned{opacity:.8}.tile.owned .icon{color:var(--accent)}.tile.locked{opacity:.5;background:0 0;border-style:dashed}.job-tile{align-items:center}.stepper{flex-shrink:0;align-items:center;gap:4px;display:flex}.stepper button{width:26px;height:26px;padding:0;font-size:15px;line-height:1}.stepper .val,.stepper .stepper-count{text-align:center;font-variant-numeric:tabular-nums;min-width:22px;font-weight:600}.unit-tile .hpbar,.unit-row .hpbar{background:#333c4b;border-radius:2px;height:4px;margin-top:5px;overflow:hidden}.unit-tile .hpbar>div,.unit-row .hpbar>div{background:var(--accent);border-radius:2px;height:100%}.unit-tile.wounded .hpbar>div,.unit-row.wounded .hpbar>div{background:var(--danger)}.progress{background:#333c4b;border-radius:3px;height:6px;margin-top:6px;overflow:hidden}.progress>div{background:var(--supplies);height:100%;transition:width .25s linear}.row{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);align-items:center;gap:8px;margin-bottom:6px;padding:6px 10px;display:flex}.row .icon{color:var(--text-dim);flex-shrink:0;font-size:17px;display:flex}.row .body{flex:1;min-width:0}.row .name{font-size:13px;font-weight:600}.row .name .count{color:var(--text-dim);font-size:12px;font-weight:400}.row.job-row,.row.unit-row{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;display:grid}.row.job-row .stepper,.row.unit-row .stepper{justify-self:end}.row.job-row .stepper .val,.row.unit-row .stepper .val{width:56px;min-width:56px}.unit-row.selectable{cursor:pointer}.unit-row.selectable:hover{background:var(--bg-card-hover)}.unit-row.selected{border-color:var(--accent);background:#67b26f14}.zone-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px;margin-bottom:10px;display:flex}.zone-head .zname{align-items:center;gap:8px;font-size:17px;font-weight:700;display:flex}.zone-head .zname svg{color:var(--accent)}.strip{grid-template-columns:repeat(10,1fr);gap:6px;margin-bottom:14px;display:grid}.cell{aspect-ratio:1;border:1px solid var(--border);background:var(--bg-card);color:var(--text-faint);border-radius:6px;flex-direction:column;justify-content:center;align-items:center;gap:2px;font-size:10px;display:flex;position:relative;overflow:hidden}.cell svg{font-size:16px}.cell .idx{color:var(--text-faint);font-size:9px;position:absolute;top:2px;left:4px}.cell.cleared{opacity:.45}.cell.cleared:after{content:"";background:repeating-linear-gradient(45deg,#0000,#0000 4px,#67b26f12 4px 8px);position:absolute;inset:0}.cell.frontier{border-color:var(--milestone);color:var(--text);box-shadow:0 0 8px #e0c56840}.cell.party{border-color:var(--supplies);box-shadow:0 0 8px #7fb4d666}.cell.boss-cell svg{color:var(--danger)}.cell.combat-cell svg{color:var(--combat)}.cell.cache-cell svg{color:var(--reward)}.cell.discovery-cell svg{color:var(--milestone)}.cell.site-cell svg{color:var(--supplies)}.cell.obstacle-cell svg{color:var(--text-dim)}.party-marker{color:var(--supplies);font-size:11px;position:absolute;bottom:2px;right:3px}.exp-box{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:14px;padding:10px 12px}.exp-box .exp-title{justify-content:space-between;align-items:center;margin-bottom:6px;font-weight:600;display:flex}.exp-box .row{background:var(--bg-panel)}.party-list{margin-top:8px}.exp-stat{color:var(--text-dim);justify-content:space-between;margin:2px 0;font-size:12.5px;display:flex}.exp-stat .v{color:var(--text);font-variant-numeric:tabular-nums}.enemy-hp{background:#333c4b;border-radius:4px;height:8px;margin:4px 0 8px;overflow:hidden}.enemy-hp>div{background:var(--hp);height:100%;transition:width .2s linear}.supply-loader{align-items:center;gap:8px;margin:8px 0;font-size:12.5px;display:flex}.supply-loader input[type=range]{accent-color:var(--supplies);flex:1}.supply-loader .val{font-variant-numeric:tabular-nums;text-align:right;min-width:78px}.effects-bar{margin-bottom:6px}.effects-bar .effect{margin-bottom:7px}.effects-bar .effect-line{justify-content:space-between;font-size:12px;display:flex}.effects-bar .effect-name{font-weight:600}.effects-bar .effect-left{color:var(--text-dim);font-variant-numeric:tabular-nums}.effects-bar .effect-bar{background:#333c4b;border-radius:3px;height:5px;margin-top:3px;overflow:hidden}.effects-bar .effect-bar>div{border-radius:3px;height:100%;transition:width .25s linear}.effects-bar .effect-bar.good>div{background:var(--accent)}.effects-bar .effect-bar.bad>div{background:var(--danger)}.panel{background:var(--bg-panel);min-height:0;padding:12px;overflow-y:auto}.log{flex-direction:column-reverse;gap:3px;font-size:12px;display:flex}.log .entry{background:var(--bg-card);border-left:2px solid var(--border);border-radius:4px;padding:4px 8px}.log .entry .t{color:var(--text-faint);font-variant-numeric:tabular-nums;margin-right:6px;font-size:10.5px}.log .entry.combat{border-left-color:var(--combat)}.log .entry.reward{border-left-color:var(--reward)}.log .entry.danger{border-left-color:var(--danger);background:#d66a6a12}.log .entry.milestone{border-left-color:var(--milestone)}.log .entry.story{border-left:2px solid var(--essence);background:#b78fe00f;margin:4px 0;padding:8px 10px}.log .entry.story .story-title{letter-spacing:.8px;color:var(--essence);text-transform:uppercase;margin-bottom:3px;font-size:12px;font-weight:700}.log .entry.story .story-text{color:var(--text);font-family:Georgia,Times New Roman,serif;font-size:12.5px;font-style:italic;line-height:1.5}.hint{color:var(--text-faint);margin:6px 0 10px;font-size:11.5px}.mine-stub{opacity:.55}.pill{text-transform:uppercase;letter-spacing:1px;border:1px solid var(--border-light);color:var(--text-dim);border-radius:10px;padding:1px 8px;font-size:10px;display:inline-block}.tipbox{z-index:1000;border:1px solid var(--border);max-width:320px;color:var(--text-dim);white-space:pre-line;pointer-events:none;font-variant-numeric:tabular-nums;background:#1c2129;border-radius:6px;padding:8px 10px;font-size:11.5px;line-height:1.45;position:fixed;box-shadow:0 6px 18px #00000073}.res.stone svg{color:#a8a29a}.res.iron svg{color:#c9937a}.res.coal svg{color:#7d8794}.res.steel svg{color:#aebfd6}.res-section{text-transform:uppercase;letter-spacing:1.2px;color:var(--text-faint);border-bottom:1px solid #313a4980;padding:8px 8px 2px;font-size:10px}.res.crafted .res-nums{flex-wrap:wrap;row-gap:2px}.res.crafted .craft-btns{gap:6px;margin-left:5px;display:inline-flex}.res.crafted .craft-btns button{color:var(--accent);cursor:pointer;font-variant-numeric:tabular-nums;background:0 0;border:none;padding:0;font-size:10.5px;line-height:1}.res.crafted .craft-btns button:hover:not(:disabled){color:var(--text);text-decoration:underline}.res.crafted .craft-btns button:disabled{opacity:.35;cursor:default;text-decoration:none}.res-sub{color:var(--text-faint);font-variant-numeric:tabular-nums;padding:0 8px 4px;font-size:10.5px}.res-sub.danger{color:var(--danger)}.res-sub.provoke{padding-top:2px}.res-sub.provoke button{border-color:#d66a6a80;width:100%;padding:3px 6px;font-size:11px}.soldier-grid{grid-column:1/-1;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px 6px;padding-top:1px;font-size:11.5px;display:grid}.soldier-count{color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap;align-items:center;gap:3px;display:inline-flex}.soldier-count svg,.soldier-count.partial{color:var(--text-dim)}.res.raid{border:1px solid #d66a6a66;border-radius:6px;margin-top:6px}.res.raid .res-name{color:var(--danger);font-weight:600}.res.raid.active-raid{background:#d66a6a26;animation:1s ease-in-out infinite alternate raid-pulse}@keyframes raid-pulse{0%{border-color:#d66a6a66}to{border-color:var(--danger)}}.raid-banner{border-bottom:1px solid var(--danger);background:#d66a6a1f;flex-shrink:0;align-items:center;gap:12px;padding:8px 14px;display:flex}.raid-banner .raid-name{color:var(--danger);white-space:nowrap;font-weight:700}.raid-banner .raid-hp{background:#333c4b;border-radius:4px;flex:1;height:8px;overflow:hidden}.raid-banner .raid-hp>div{background:var(--danger);height:100%;transition:width .2s linear}.raid-banner .raid-def{color:var(--text-dim);white-space:nowrap;font-variant-numeric:tabular-nums;font-size:11.5px}.research-head{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;margin-bottom:10px;padding-bottom:6px;display:flex}.research-head .toggle{color:var(--text-dim);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:6px;font-size:12px;display:flex}.hint a{color:var(--accent)}.talent-tree{margin-bottom:26px}.talent-head{align-items:center;gap:14px;margin:14px 0 10px;display:flex}.talent-head .tname{align-items:center;gap:7px;font-size:15px;font-weight:700;display:flex}.talent-head .tname svg{color:var(--accent)}.talent-head .tpoints{color:var(--essence);font-variant-numeric:tabular-nums;align-items:center;gap:5px;font-size:12.5px;display:flex}.talent-head .respec{color:var(--text-dim);margin-left:auto;font-size:12px}.talent-row{margin-bottom:8px;position:relative}.talent-row-tiles{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.talent-row.locked-row .talent-row-tiles{opacity:.35;pointer-events:none;filter:grayscale(.6)}.row-lock{color:var(--text-faint);text-transform:uppercase;letter-spacing:1px;margin:10px 0 4px;font-size:11px}.talent-tile .name{font-size:13px}.rank-pips{align-items:center;gap:3px;display:flex}.rank-pips .pip{border:1px solid var(--border-light);background:0 0;border-radius:50%;width:8px;height:8px}.rank-pips .pip.filled{background:var(--essence);border-color:var(--essence)}.biome-switch{flex-wrap:wrap;gap:6px;margin-bottom:12px;display:flex}.biome-btn{align-items:center;gap:6px;font-weight:600;display:flex}.biome-btn.active{border-color:var(--accent);background:#67b26f1a}.cell.ws-built{border-color:var(--supplies)}.ws-marker{font-size:9px;position:absolute;top:1px;right:2px}.cell.reach{outline:2px dashed var(--supplies);outline-offset:-2px}.burn-breakdown{background:var(--bg-panel);border:1px solid var(--border);border-radius:6px;margin:8px 0;padding:6px 10px}.burn-breakdown .forecast .v{color:var(--supplies)}.burn-breakdown .dim{color:var(--text-faint);font-size:10.5px}.stepper .max-btn{width:auto;padding:0 8px;font-size:11px}.supply-loader input[type=range]{appearance:none;border:1px solid var(--border);border-radius:4px;outline:none;height:8px}.supply-loader input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--supplies);border:2px solid var(--bg);cursor:pointer;border-radius:50%;width:14px;height:14px}.supply-loader input[type=range]::-moz-range-thumb{background:var(--supplies);border:2px solid var(--bg);cursor:pointer;border-radius:50%;width:14px;height:14px}.smelter-controls{color:var(--text-dim);align-items:center;gap:10px;margin-top:8px;font-size:12.5px;display:flex}.smelter-controls .icon-inline{color:var(--combat);font-size:17px;display:flex}.fuel-toggle{gap:4px;display:flex}.fuel-toggle button.active{border-color:var(--accent);color:var(--text);background:#67b26f1f}.settings-section{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;gap:12px;max-width:620px;margin-bottom:16px;padding:12px;display:flex}.settings-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;display:flex}.settings-row.column{flex-direction:column;align-items:stretch;gap:8px}.settings-row .hint{margin:2px 0 0}.settings-label{font-weight:600}.settings-actions{flex-wrap:wrap;flex-shrink:0;gap:8px;display:flex}.settings-import{resize:vertical;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);width:100%;color:var(--text);padding:8px;font-family:inherit;font-size:12px}.settings-status{color:var(--accent)}.treat-btn{width:100%;margin-top:6px;font-size:12px}.strip{grid-template-columns:repeat(10,1fr)}.cell{min-width:0}@media (width<=1150px){.app{grid-template-columns:220px 1fr}.panel.log-panel{display:none}}.sidebar-backdrop{display:none}.tab.sidebar-toggle{padding:8px 12px;font-size:16px;display:none}@media (width<=760px){.app{grid-template-columns:1fr}.sidebar{z-index:500;width:min(320px,86vw);transition:transform .18s;position:fixed;top:0;bottom:0;left:0;transform:translate(-103%);box-shadow:0 0 32px #0000008c}.sidebar.open{transform:none}.sidebar-backdrop{z-index:490;background:#00000073;display:block;position:fixed;inset:0}.sidebar-close{display:block}.tab.sidebar-toggle{display:flex}.tabbar{-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:8px 8px 0;overflow:auto hidden}.tab{white-space:nowrap;flex-shrink:0;padding:8px 10px}.strip{gap:4px}.tab-content{max-width:100%;padding:12px 10px 40px}}
