@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700&display=swap');
:root{--ui-scale:.5}
/* Scale every interface overlay together; the world canvas keeps its native size. */
body > :is(.hud,.city-panel,.inspector,.map-tools,.map-caption,.bottom,#toast,dialog){zoom:var(--ui-scale)}
:root{--ink:#173f3d;--muted:#6d807c;--paper:#f7fbf7;--line:#dae5de;--yellow:#f4c659;--green:#226a51;--shadow:0 12px 40px #12332d24}*{box-sizing:border-box}body{margin:0;overflow:hidden;background:#79c1c3;color:var(--ink);font-family:'Noto Sans Thai',Tahoma,sans-serif;font-size:14px}button,select{font:inherit;color:inherit}button{cursor:pointer;border:0;background:none;transition:background .16s,transform .16s}button:hover{background:#e3ece4}button:focus-visible,select:focus-visible{outline:3px solid #dda323;outline-offset:2px}button:active{transform:translateY(1px)}canvas{display:block;width:100vw;height:100dvh;touch-action:none}.hud{position:absolute;top:20px;left:22px;right:22px;height:76px;display:flex;align-items:center;background:#f9fcf8f5;box-shadow:var(--shadow);border:1px solid #fff9;border-radius:16px;padding:0 16px;gap:12px;backdrop-filter:blur(14px)}.brand{display:flex;gap:12px;align-items:center;font-size:17px;font-weight:800;letter-spacing:1.8px;min-width:245px}.brand small{display:block;font-size:10px;letter-spacing:1.5px;color:var(--muted);margin-top:3px}.brand-mark{font-size:30px;color:var(--yellow);background:var(--ink);width:43px;height:43px;display:grid;place-items:center;border-radius:12px}.stats{display:flex;flex:1;justify-content:space-around;height:48px}.stats button{text-align:left;padding:0 22px;border-left:1px solid var(--line);flex:1}.stats small{display:block;color:var(--muted);font-size:12px}.stats strong{font-size:23px;font-weight:600;white-space:nowrap;line-height:1.55}.stats em{font-style:normal;font-size:13px;color:var(--muted);margin-left:4px}.icon-button{border:1px solid var(--line);border-radius:10px;width:36px;height:36px;font-size:20px}.city-panel{position:absolute;left:22px;top:114px;width:263px;background:#f8fbf5f2;border:1px solid #ffffffe0;border-radius:16px;box-shadow:var(--shadow);padding:20px;max-height:calc(100dvh - 365px);overflow:auto;scrollbar-width:thin;backdrop-filter:blur(16px)}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;color:#829086;display:flex;justify-content:space-between;align-items:center}.eyebrow button{font-size:20px;line-height:14px}.city-title{display:flex;align-items:center;justify-content:space-between;margin-top:6px}h1{font-size:30px;line-height:1.4;margin:0;font-weight:600}.live-label{background:#e2eddc;color:#557443;font-size:11px;border-radius:20px;padding:4px 8px}.city-sub{font-size:12px;color:var(--muted);margin:4px 0 17px}.time-card{background:#eaf0e5;border-radius:12px;padding:12px 14px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px}.time-card span{font-size:12px}.time-card strong{font-size:25px;font-weight:500}.sun-track{height:3px;background:#d2dec8;grid-column:1/-1;border-radius:5px;position:relative}.sun-track i{position:absolute;background:#e2aa32;border:3px solid #f5d477;width:10px;height:10px;border-radius:50%;top:-3px;left:25%}.section-label{display:flex;justify-content:space-between;font-size:13px;font-weight:600;margin:19px 0 9px;gap:5px}.section-label>span{font-size:11px;font-weight:400;color:var(--muted)}.guide-item{display:flex;gap:9px;font-size:12px;color:#738078;align-items:center;margin:9px 0}.guide-item b{display:grid;place-items:center;width:20px;height:20px;border:1px solid #b9c8b9;border-radius:6px;font-size:11px;flex-shrink:0}.guide-item.done b{background:var(--green);border-color:var(--green);color:white}.guide-item.current{color:var(--ink)}.demand-row{display:flex;gap:8px;align-items:center;margin:7px 0;font-size:12px}.demand-row>span:first-child{min-width:49px}.demand-row .bar{flex:1;height:5px;background:#e2e8dc;border-radius:4px;overflow:hidden}.bar i{display:block;height:100%;background:#dbad45;border-radius:4px}.demand-row strong{font-size:11px;font-weight:500;min-width:35px;text-align:right}.income{border-top:1px solid var(--line);margin-top:17px;padding-top:14px;display:flex;justify-content:space-between;font-size:12px}.income strong{color:var(--green)}.news-item{font-size:11px;line-height:1.7;color:var(--muted);padding-bottom:7px}.news-item time{color:#9ba99d;font-size:10px;margin-right:5px}.map-tools{position:absolute;right:22px;top:114px;display:flex;flex-direction:column;gap:5px;padding:6px;background:#f8fbf5ef;border:1px solid white;border-radius:12px;box-shadow:var(--shadow)}.map-tools button{width:33px;height:34px;border-radius:7px;font-size:24px}.map-tools button.active{background:var(--ink);color:var(--yellow)}.map-tools span{height:1px;background:var(--line);margin:2px 0}.map-caption{position:absolute;left:310px;top:120px;pointer-events:none;display:flex;align-items:center;gap:14px;color:#294e4380}.compass{font-size:18px;border-right:1px solid #3d605f33;padding-right:15px}#mapLabel{font-size:10px;font-weight:700;letter-spacing:3px}#mapLabel small{display:block;font-size:10px;letter-spacing:1px;margin-top:3px}.bottom{position:absolute;bottom:0;left:22px;right:22px;pointer-events:none}.tool-hint{width:fit-content;max-width:90%;margin:0 auto 10px;padding:8px 20px;background:#173f3dde;color:#f5f6dd;border:1px solid #ffffff20;border-radius:30px;font-size:12px;box-shadow:0 4px 15px #173f3d20}.build-dock{width:min(940px,100%);margin:auto;background:#f8fbf5f7;border:1px solid white;border-radius:17px;box-shadow:var(--shadow);pointer-events:auto;overflow:hidden;backdrop-filter:blur(14px)}nav{display:flex;padding:10px 14px 0;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto}nav button{padding:7px 17px 11px;color:var(--muted);font-size:13px;white-space:nowrap;border-bottom:3px solid transparent}nav button.active{color:var(--ink);border-color:var(--green);font-weight:600}.tools{display:flex;gap:9px;padding:12px 16px;min-height:96px;overflow-x:auto;align-items:stretch}.tool{min-width:105px;flex:1;display:flex;align-items:center;gap:9px;padding:9px;border:1px solid #dce5d9;border-radius:11px;background:#fff9;text-align:left;position:relative}.tool.active{border-color:#327356;background:#e6efdf;box-shadow:inset 0 0 0 1px #327356}.tool-icon{width:38px;height:40px;flex-shrink:0;display:grid;place-items:center;font-size:27px;border-radius:7px;background:#edf1e7}.tool strong{display:block;font-weight:600;font-size:12px;white-space:nowrap}.tool small{display:block;color:#7e8b7a;font-size:10px;margin-top:3px}.tool-price{color:#68845e!important;font-weight:500}footer{display:flex;justify-content:space-between;align-items:center;margin:10px 0 12px;gap:12px;color:#315847;font-size:11px}.playback{display:flex;background:#f7fbf1ef;border:1px solid #fff9;border-radius:10px;padding:4px;gap:2px;pointer-events:auto;box-shadow:0 4px 15px #173f3d14}.playback button{padding:6px 11px;border-radius:7px;font-size:12px}.playback .active{background:var(--ink);color:#f9d97b}#pause{font-size:16px;line-height:20px}.playback #skip{border-left:1px solid var(--line);border-radius:0 7px 7px 0;padding-left:12px}.edition{font-size:9px;letter-spacing:2px}.inspector{position:absolute;right:78px;top:114px;width:280px;max-height:calc(100dvh - 355px);overflow:auto;background:#f8fbf5f5;border:1px solid white;box-shadow:var(--shadow);border-radius:16px;padding:22px;backdrop-filter:blur(14px)}.hidden{display:none!important}.close{position:absolute;right:12px;top:8px;font-size:25px;border-radius:6px}.inspector h2{font-size:21px;margin:4px 0 14px;font-weight:600}.inspector h3{font-size:14px;margin:18px 0 8px}.inspector p{font-size:13px;line-height:1.8;color:var(--muted)}.inspector .tag{display:inline-block;padding:4px 9px;background:#e5eddc;border-radius:20px;font-size:11px;margin-bottom:10px}.detail-row{display:flex;justify-content:space-between;font-size:13px;margin:10px 0;gap:12px}.detail-row strong{text-align:right;font-weight:600}.inspector button.action{display:block;width:100%;padding:9px;margin-top:7px;border-radius:8px;border:1px solid var(--line);font-size:13px}#toast{position:absolute;left:50%;top:112px;transform:translate(-50%,-12px);background:#173f3df0;color:#fff8e9;box-shadow:var(--shadow);padding:12px 22px;border-radius:12px;max-width:480px;pointer-events:none;opacity:0;transition:.2s;z-index:10;font-size:14px}#toast.show{opacity:1;transform:translate(-50%,0)}dialog{border:1px solid #e4ebdc;border-radius:22px;background:#f8fbf3;color:var(--ink);width:min(520px,calc(100vw - 28px));padding:30px;box-shadow:0 30px 100px #102d4270;max-height:85dvh;overflow:auto}dialog::backdrop{background:#163d3c65;backdrop-filter:blur(5px)}dialog h2{font-size:26px;margin:4px 0 12px}dialog p,dialog li{font-size:14px;line-height:1.9;color:#607567}dialog .eyebrow{color:#789071}dialog .actions{display:flex;justify-content:flex-end;gap:8px;margin-top:23px;flex-wrap:wrap}dialog button{padding:10px 20px;border:1px solid #d6e0d0;border-radius:9px}dialog button.primary{background:var(--ink);color:#ffe098}dialog select{width:100%;padding:12px;border:1px solid #cddcc9;background:#fff;border-radius:10px;margin:12px 0}.warning{color:#ba6245!important}.city-panel.collapsed .panel-content{display:none}.city-panel.collapsed{padding-bottom:14px}.inspect-list{max-height:160px;overflow:auto}.inspect-list button{width:100%;text-align:left;font-size:12px;padding:8px;border-bottom:1px solid var(--line)}
.tool strong{font-size:14px}.tool small{font-size:12px}.guide-item,.demand-row,.income{font-size:13px}.section-label{font-size:14px}.news-item{font-size:12px}.city-sub{font-size:13px}.eyebrow{font-size:11px}.time-card span{font-size:13px}.map-caption{color:#183f3da8}.tool-hint{font-size:13px}.tools{min-height:108px}.build-dock{background:#f6faf7f2}.city-panel{background:#f5faf7eb}.tool-icon{background:#e1ece7;color:#285951}.brand-mark{background:#1b504b}.hud{border-radius:13px}.city-panel,.inspector{border-radius:13px}.stats small{font-size:13px}.playback button{font-size:14px}.city-panel{max-height:calc(100dvh - 385px)}
@media(min-width:1500px){.city-panel{width:280px;max-height:calc(100dvh - 350px)}.map-caption{left:330px}.hud{height:80px}.tools{padding:14px 16px}}
@media(max-width:1000px){.brand{min-width:160px;font-size:13px;letter-spacing:1px}.brand-mark{width:34px;height:36px}.brand small{font-size:8px;letter-spacing:1px}.stats button{padding:0 12px}.stats strong{font-size:20px}.hud{gap:8px}.city-panel{width:222px;padding:16px}.map-caption{left:268px}.tool{min-width:104px}.tool-icon{width:28px;font-size:23px}.tools{gap:6px}nav button{padding:7px 12px 11px}.edition{display:none}}
@media(max-width:700px){.hud{top:9px;left:9px;right:9px;height:64px;padding:0 9px;gap:5px}.brand{min-width:auto}.brand>div{display:none}.brand-mark{width:31px;height:36px;font-size:25px}.stats{height:42px}.stats button{padding:0 7px}.stats small{font-size:9px}.stats strong{font-size:15px}.stats em{font-size:10px;margin-left:1px}.icon-button{width:27px;height:30px;font-size:17px}.city-panel{left:9px;top:85px;width:188px;padding:12px;max-height:calc(100dvh - 310px)}.city-panel h1{font-size:24px}.city-sub{font-size:10px}.city-panel .live-label{font-size:9px}.time-card{padding:8px}.time-card span{font-size:10px}.time-card strong{font-size:21px}.section-label{margin-top:13px;font-size:12px}.guide-item{font-size:11px}.tiny{display:none}.news-item{font-size:10px}.map-tools{right:9px;top:85px}.map-tools button{width:27px;height:28px;font-size:21px}.map-caption{left:214px;top:89px;gap:7px}#mapLabel{font-size:8px;letter-spacing:1px}#mapLabel small{display:none}.compass{font-size:13px;padding-right:7px}.bottom{left:9px;right:9px}.tool-hint{font-size:10px;padding:6px 12px;margin-bottom:8px}.build-dock{border-radius:13px}nav{padding:6px 7px 0}nav button{font-size:12px;padding:7px 10px}.tools{padding:8px;min-height:82px}.tool{min-width:108px;padding:7px}.tool strong{font-size:11px}.tool small{font-size:10px}footer{margin:7px 0 9px}.playback button{padding:4px 9px}#status{display:none}.inspector{right:49px;top:85px;width:min(270px,calc(100vw - 65px));max-height:calc(100dvh - 298px);padding:19px}#toast{top:80px;width:calc(100% - 30px);font-size:12px}dialog{padding:23px}}
/* Desktop mouse controls use a larger interface. */
@media (min-width:1000px) and (hover:hover) and (pointer:fine){:root{--ui-scale:.8}}

/* City advice is one persistent conversation, updated only when facts change. */
.city-panel{width:300px;max-height:calc(100dvh / var(--ui-scale) - 360px)}.map-caption{left:330px}
.need-card{padding:10px 0;border-bottom:1px solid var(--line);font-size:0.8125rem;line-height:1.65}
.need-card>div{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.need-card b{font-weight:600}.need-card strong{font-size:0.75rem;font-weight:500;text-align:right}
.need-card small{display:block;font-size:0.6875rem;color:var(--muted);overflow-wrap:anywhere}
.need-card.has-need strong{color:#a16a1d}
.city-advisor{width:min(760px,100%);margin:0 auto 10px;background:#f6faf7f7;border:1px solid #fff;border-radius:15px;box-shadow:var(--shadow);pointer-events:auto;overflow:hidden}
.city-advisor summary{display:flex;align-items:center;gap:10px;padding:11px 16px;cursor:pointer;list-style:none}
.city-advisor summary::-webkit-details-marker{display:none}
.advisor-avatar{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:11px;background:var(--ink);color:#f9d97b;font-size:1.25rem;font-weight:600}
.city-advisor summary>span:nth-child(2){min-width:0;flex:1}.city-advisor summary small{display:block;font-size:0.6875rem;color:var(--muted)}.city-advisor summary strong{display:block;font-size:0.9375rem;line-height:1.6;font-weight:600}
.advisor-chevron{font-size:1.25rem;transition:transform .16s}.city-advisor[open] .advisor-chevron{transform:rotate(180deg)}
.advisor-body{max-height:calc(22dvh / var(--ui-scale));overflow:auto;padding:0 16px 14px;scrollbar-width:thin;font-size:0.8125rem;line-height:1.8}
.advisor-body p{margin:0 0 9px;color:#49665b}.advisor-body h3{font-size:0.75rem;margin:0 0 4px;font-weight:600}.advisor-columns{display:grid;grid-template-columns:1fr 1.5fr;gap:16px}.advisor-body ul{margin:0;padding-left:17px;color:#5e7368}.advisor-next{border-top:1px solid var(--line);padding-top:9px;margin-top:9px}.advisor-next ol{margin:0;padding-left:20px}.advisor-next li{padding:2px 0}.advisor-next button{margin-left:8px;padding:3px 9px;border:1px solid #c8d9cc;border-radius:7px;font-size:0.6875rem;background:#e8f0e5;white-space:nowrap}
@media(max-width:1000px){.city-panel{width:260px}.map-caption{left:300px}.city-advisor{width:min(700px,100%)}.advisor-body{max-height:calc(22dvh / var(--ui-scale))}}
@media(max-width:700px){.city-panel{width:218px}.map-caption{left:243px}.city-advisor summary{padding:8px 10px;gap:7px}.city-advisor summary strong{font-size:0.8125rem}.advisor-avatar{width:28px;height:28px;font-size:1.0625rem}.advisor-body{padding:0 10px 10px;font-size:0.75rem;max-height:calc(18dvh / var(--ui-scale))}.advisor-columns{grid-template-columns:1fr;gap:8px}.need-card{font-size:0.75rem;padding:8px 0}.need-card strong{font-size:0.6875rem}.need-card small{font-size:0.625rem}}
.signal-control{margin-top:15px;padding-top:10px;border-top:1px solid var(--line)}
.inspector .signal-control h3{font-size:13px;margin:12px 0 7px;color:#284d42}
.signal-current{display:flex;flex-wrap:wrap;align-items:center;gap:5px 9px;padding:10px;background:#e9f0e8;border-radius:9px;font-size:12px}
.signal-current strong{font-size:14px}.signal-current small{width:100%;font-size:11px;color:#60796f}
.signal-mode{background:#294e43;color:#f2e6b0;border-radius:10px;padding:2px 8px;font-size:10px}
.signal-direction{display:flex;align-items:center;gap:7px;padding:7px 2px;border-bottom:1px solid #e5ebe6;font-size:11px}
.signal-direction span:nth-child(2){flex:1}.signal-direction b{font-weight:600}
.signal-lamp{height:12px;width:12px;border-radius:50%;box-shadow:0 0 0 2px #fff,0 0 0 3px #cadbd1;flex:none}
.signal-lamp.green{background:#56b973}.signal-lamp.yellow{background:#f0bd46}.signal-lamp.red{background:#db665d}
.signal-times{display:grid;gap:8px}.signal-times label{display:flex;align-items:center;justify-content:space-between;font-size:12px;gap:10px}
.signal-times label span{white-space:nowrap;font-size:11px;color:#526c62}
.signal-times input{width:63px;padding:5px 6px;background:white;color:var(--ink);border:1px solid #b9d0c3;border-radius:5px;text-align:center;font:600 13px 'Noto Sans Thai',Tahoma,sans-serif}
.signal-times input:focus-visible{outline:2px solid #c99736;outline-offset:1px}
.inspector .signal-control .signal-note{font-size:10px;line-height:1.6;margin:7px 0;color:#6e8176}
.inspector .signal-control button.action{font-size:12px;padding:8px 9px;margin-top:8px;border-radius:7px;background:#e4eee5;border-color:#c8dccd;font-weight:600}
.inspector .signal-control button[data-action="signal-manual"],.inspector .signal-control button[data-action="signal-switch"]{background:#245d4b;color:#fff7ce;border-color:#245d4b}
.inspector .signal-control button[data-action="signal-auto"]{background:#f6f8f3;color:#32624f}
.signal-manual{padding-top:8px;border-top:1px solid #e0e9df;margin-top:10px}

.need-card .need-metrics{display:flex;align-items:center;gap:6px;min-width:0}
.need-metrics>small{flex:1;min-width:0;line-height:1.45}
.need-card .need-gauges{display:flex;align-items:flex-end;gap:3px;flex:none}
.need-gauge{display:flex;align-items:center;flex-direction:column;gap:2px;width:12px}
.need-tube{display:block;position:relative;width:8px;height:25px;border-radius:4px 4px 2px 2px;background:#e2e9e3;box-shadow:inset 0 0 0 1px #bbcfc2;overflow:hidden}
.need-tube-fill{display:block;width:100%;height:100%;background:linear-gradient(to top,#54ad77 0%,#54ad77 59%,#e8ad4b 60%,#e8ad4b 84%,#cf6259 85%);clip-path:inset(100% 0 0 0);transition:clip-path .38s ease-out}
.need-gauge[data-gauge="capacity"] .need-tube-fill{background:#6f9ca5}
.need-gauge-label{font-size:8px;line-height:1;color:#60766c;white-space:nowrap}
@media(prefers-reduced-motion:reduce){.need-tube-fill{transition:none}}

/* Per-building mini tubes share the existing rooftop labels; no new map popup. */
.place-label-gauges{display:flex;align-items:flex-end;gap:3px;padding-left:5px;border-left:1px solid #d6e1ce}
.place-gauge-track{position:relative;display:block;width:6px;height:18px;overflow:hidden;border-radius:3px 3px 1px 1px;background:#e2e9e3;box-shadow:inset 0 0 0 1px #bbcfc2}
.place-gauge-fill{display:block;width:100%;height:100%;background:linear-gradient(to top,#54ad77 0%,#54ad77 59%,#e8ad4b 60%,#e8ad4b 84%,#cf6259 85%);clip-path:inset(100% 0 0 0);transition:clip-path .38s ease-out}
.place-gauge-track[data-gauge="capacity"] .place-gauge-fill{background:#6f9ca5}
.member-gate{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(9,38,37,.35);backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px);font-size:14px}
.member-gate[hidden],.member-account[hidden],.member-form label[hidden]{display:none!important}
.member-card{width:min(390px,100%);max-height:min(94dvh,690px);overflow-y:auto;border:1px solid rgba(255,255,255,.9);border-radius:20px;padding:26px 27px 20px;background:rgba(248,252,247,.96);box-shadow:0 22px 75px #0b2e2a6b,0 0 0 1px #d1ded18a;color:#1a463c;text-align:center}
.member-mark{display:grid;place-items:center;width:42px;height:42px;margin:0 auto 10px;background:#194b41;color:#f4d27d;border-radius:13px;font-size:27px;font-weight:700}
.member-eyebrow{font-size:10px!important;font-weight:700;letter-spacing:1.5px;color:#628276;margin:0 0 6px!important}
.member-card h2{font-size:23px;font-weight:700;letter-spacing:-.5px;margin:0 0 5px}
.member-intro{font-size:12px;line-height:1.8;color:#658174;margin:0 0 17px}
.member-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:10px;background:#e7eee7;margin-bottom:17px}
.member-tabs button{height:37px;border-radius:8px;font-size:13px;font-weight:600;color:#61776b}
.member-tabs button.active{background:white;color:#1b5745;box-shadow:0 2px 9px #1b3f3520}
.member-form{text-align:left;display:grid;gap:11px}
.member-form label{display:grid;gap:5px;font-size:12px;font-weight:600}
.member-form input{width:100%;height:43px;border:1px solid #cbdccf;background:#fff;color:#163c33;border-radius:9px;padding:0 12px;font-size:14px;font-family:inherit;outline:none}
.member-form input:focus{border-color:#2b7962;box-shadow:0 0 0 3px #377c5e23}
.member-notice{min-height:17px;color:#376e59;font-size:11px;line-height:1.6;margin:0;text-align:center}
.member-notice.error{color:#b74c41}
.member-submit{width:100%;height:44px;border-radius:10px;background:#215c4a;color:#fff6cf;font-size:14px;font-weight:700}
.member-submit:hover{background:#174535;color:white}
.member-submit:disabled{opacity:.65;cursor:wait}
.member-account{position:fixed;z-index:15;right:20px;top:100px;border:1px solid #d9e8d9;background:#f7fbf2f5;padding:6px 10px;border-radius:9px;box-shadow:var(--shadow);font-size:12px;max-width:170px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
@media(max-width:700px){.member-gate{padding:15px}.member-card{max-width:355px;padding:21px 21px 17px;border-radius:18px}.member-card h2{font-size:21px}.member-intro{font-size:11px}.member-account{right:8px;top:48px;font-size:11px;padding:5px 7px}}
@media(prefers-reduced-motion:reduce){.place-gauge-fill{transition:none}}

/* Keep the city data panels; remove the redundant floating advisor bar. */
#cityAdvisor{display:none!important}

/* iPad native-size compatibility */
@supports (-webkit-touch-callout:none){
html{-webkit-text-size-adjust:none;text-size-adjust:none}
body > :is(.hud,.city-panel,.inspector,.map-tools,.map-caption,.bottom,#toast,dialog){zoom:1}
500;600;700&display=swap');



:root{--ink:#173f3d;--muted:#6d807c;--paper:#f7fbf7;--line:#dae5de;--yellow:#f4c659;--green:#226a51;--shadow:0 6px 20px #12332d24}*{box-sizing:border-box}body{margin:0;overflow:hidden;background:#79c1c3;color:var(--ink);font-family:'Noto Sans Thai',Tahoma,sans-serif;font-size:7px}button,select{font:inherit;color:inherit}button{cursor:pointer;border:0;background:none;transition:background .16s,transform .16s}button:hover{background:#e3ece4}button:focus-visible,select:focus-visible{outline:1.5px solid #dda323;outline-offset:1px}button:active{transform:translateY(0.5px)}canvas{display:block;width:100vw;height:100dvh;touch-action:none}.hud{position:absolute;top:10px;left:11px;right:11px;height:38px;display:flex;align-items:center;background:#f9fcf8f5;box-shadow:var(--shadow);border:0.5px solid #fff9;border-radius:8px;padding:0 8px;gap:6px;backdrop-filter:blur(7px)}.brand{display:flex;gap:6px;align-items:center;font-size:8.5px;font-weight:800;letter-spacing:0.9px;min-width:122.5px}.brand small{display:block;font-size:5px;letter-spacing:0.75px;color:var(--muted);margin-top:1.5px}.brand-mark{font-size:15px;color:var(--yellow);background:var(--ink);width:21.5px;height:21.5px;display:grid;place-items:center;border-radius:6px}.stats{display:flex;flex:1;justify-content:space-around;height:24px}.stats button{text-align:left;padding:0 11px;border-left:0.5px solid var(--line);flex:1}.stats small{display:block;color:var(--muted);font-size:6px}.stats strong{font-size:11.5px;font-weight:600;white-space:nowrap;line-height:1.55}.stats em{font-style:normal;font-size:6.5px;color:var(--muted);margin-left:2px}.icon-button{border:0.5px solid var(--line);border-radius:5px;width:18px;height:18px;font-size:10px}.city-panel{position:absolute;left:11px;top:57px;width:131.5px;background:#f8fbf5f2;border:0.5px solid #ffffffe0;border-radius:8px;box-shadow:var(--shadow);padding:10px;max-height:calc(50dvh - 182.5px);overflow:auto;scrollbar-width:thin;backdrop-filter:blur(8px)}.eyebrow{font-size:5px;font-weight:700;letter-spacing:1px;color:#829086;display:flex;justify-content:space-between;align-items:center}.eyebrow button{font-size:10px;line-height:7px}.city-title{display:flex;align-items:center;justify-content:space-between;margin-top:3px}h1{font-size:15px;line-height:1.4;margin:0;font-weight:600}.live-label{background:#e2eddc;color:#557443;font-size:5.5px;border-radius:10px;padding:2px 4px}.city-sub{font-size:6px;color:var(--muted);margin:2px 0 8.5px}.time-card{background:#eaf0e5;border-radius:6px;padding:6px 7px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:5px}.time-card span{font-size:6px}.time-card strong{font-size:12.5px;font-weight:500}.sun-track{height:1.5px;background:#d2dec8;grid-column:1/-1;border-radius:2.5px;position:relative}.sun-track i{position:absolute;background:#e2aa32;border:1.5px solid #f5d477;width:5px;height:5px;border-radius:50%;top:-1.5px;left:25%}.section-label{display:flex;justify-content:space-between;font-size:6.5px;font-weight:600;margin:9.5px 0 4.5px;gap:2.5px}.section-label>span{font-size:5.5px;font-weight:400;color:var(--muted)}.guide-item{display:flex;gap:4.5px;font-size:6px;color:#738078;align-items:center;margin:4.5px 0}.guide-item b{display:grid;place-items:center;width:10px;height:10px;border:0.5px solid #b9c8b9;border-radius:3px;font-size:5.5px;flex-shrink:0}.guide-item.done b{background:var(--green);border-color:var(--green);color:white}.guide-item.current{color:var(--ink)}.demand-row{display:flex;gap:4px;align-items:center;margin:3.5px 0;font-size:6px}.demand-row>span:first-child{min-width:24.5px}.demand-row .bar{flex:1;height:2.5px;background:#e2e8dc;border-radius:2px;overflow:hidden}.bar i{display:block;height:100%;background:#dbad45;border-radius:2px}.demand-row strong{font-size:5.5px;font-weight:500;min-width:17.5px;text-align:right}.income{border-top:0.5px solid var(--line);margin-top:8.5px;padding-top:7px;display:flex;justify-content:space-between;font-size:6px}.income strong{color:var(--green)}.news-item{font-size:5.5px;line-height:1.7;color:var(--muted);padding-bottom:3.5px}.news-item time{color:#9ba99d;font-size:5px;margin-right:2.5px}.map-tools{position:absolute;right:11px;top:57px;display:flex;flex-direction:column;gap:2.5px;padding:3px;background:#f8fbf5ef;border:0.5px solid white;border-radius:6px;box-shadow:var(--shadow)}.map-tools button{width:16.5px;height:17px;border-radius:3.5px;font-size:12px}.map-tools button.active{background:var(--ink);color:var(--yellow)}.map-tools span{height:0.5px;background:var(--line);margin:1px 0}.map-caption{position:absolute;left:155px;top:60px;pointer-events:none;display:flex;align-items:center;gap:7px;color:#294e4380}.compass{font-size:9px;border-right:0.5px solid #3d605f33;padding-right:7.5px}#mapLabel{font-size:5px;font-weight:700;letter-spacing:1.5px}#mapLabel small{display:block;font-size:5px;letter-spacing:0.5px;margin-top:1.5px}.bottom{position:absolute;bottom:0;left:11px;right:11px;pointer-events:none}.tool-hint{width:fit-content;max-width:90%;margin:0 auto 5px;padding:4px 10px;background:#173f3dde;color:#f5f6dd;border:0.5px solid #ffffff20;border-radius:15px;font-size:6px;box-shadow:0 2px 7.5px #173f3d20}.build-dock{width:min(470px,100%);margin:auto;background:#f8fbf5f7;border:0.5px solid white;border-radius:8.5px;box-shadow:var(--shadow);pointer-events:auto;overflow:hidden;backdrop-filter:blur(7px)}nav{display:flex;padding:5px 7px 0;gap:2px;border-bottom:0.5px solid var(--line);overflow-x:auto}nav button{padding:3.5px 8.5px 5.5px;color:var(--muted);font-size:6.5px;white-space:nowrap;border-bottom:1.5px solid transparent}nav button.active{color:var(--ink);border-color:var(--green);font-weight:600}.tools{display:flex;gap:4.5px;padding:6px 8px;min-height:48px;overflow-x:auto;align-items:stretch}.tool{min-width:52.5px;flex:1;display:flex;align-items:center;gap:4.5px;padding:4.5px;border:0.5px solid #dce5d9;border-radius:5.5px;background:#fff9;text-align:left;position:relative}.tool.active{border-color:#327356;background:#e6efdf;box-shadow:inset 0 0 0 0.5px #327356}.tool-icon{width:19px;height:20px;flex-shrink:0;display:grid;place-items:center;font-size:13.5px;border-radius:3.5px;background:#edf1e7}.tool strong{display:block;font-weight:600;font-size:6px;white-space:nowrap}.tool small{display:block;color:#7e8b7a;font-size:5px;margin-top:1.5px}.tool-price{color:#68845e!important;font-weight:500}footer{display:flex;justify-content:space-between;align-items:center;margin:5px 0 6px;gap:6px;color:#315847;font-size:5.5px}.playback{display:flex;background:#f7fbf1ef;border:0.5px solid #fff9;border-radius:5px;padding:2px;gap:1px;pointer-events:auto;box-shadow:0 2px 7.5px #173f3d14}.playback button{padding:3px 5.5px;border-radius:3.5px;font-size:6px}.playback .active{background:var(--ink);color:#f9d97b}#pause{font-size:8px;line-height:10px}.playback #skip{border-left:0.5px solid var(--line);border-radius:0 3.5px 3.5px 0;padding-left:6px}.edition{font-size:4.5px;letter-spacing:1px}.inspector{position:absolute;right:39px;top:57px;width:140px;max-height:calc(50dvh - 177.5px);overflow:auto;background:#f8fbf5f5;border:0.5px solid white;box-shadow:var(--shadow);border-radius:8px;padding:11px;backdrop-filter:blur(7px)}.hidden{display:none!important}.close{position:absolute;right:6px;top:4px;font-size:12.5px;border-radius:3px}.inspector h2{font-size:10.5px;margin:2px 0 7px;font-weight:600}.inspector h3{font-size:7px;margin:9px 0 4px}.inspector p{font-size:6.5px;line-height:1.8;color:var(--muted)}.inspector .tag{display:inline-block;padding:2px 4.5px;background:#e5eddc;border-radius:10px;font-size:5.5px;margin-bottom:5px}.detail-row{display:flex;justify-content:space-between;font-size:6.5px;margin:5px 0;gap:6px}.detail-row strong{text-align:right;font-weight:600}.inspector button.action{display:block;width:100%;padding:4.5px;margin-top:3.5px;border-radius:4px;border:0.5px solid var(--line);font-size:6.5px}#toast{position:absolute;left:50%;top:56px;transform:translate(-50%,-6px);background:#173f3df0;color:#fff8e9;box-shadow:var(--shadow);padding:6px 11px;border-radius:6px;max-width:240px;pointer-events:none;opacity:0;transition:.2s;z-index:10;font-size:7px}#toast.show{opacity:1;transform:translate(-50%,0)}dialog{border:0.5px solid #e4ebdc;border-radius:11px;background:#f8fbf3;color:var(--ink);width:min(260px,calc(50vw - 14px));padding:15px;box-shadow:0 15px 50px #102d4270;max-height:42.5dvh;overflow:auto}dialog::backdrop{background:#163d3c65;backdrop-filter:blur(2.5px)}dialog h2{font-size:13px;margin:2px 0 6px}dialog p,dialog li{font-size:7px;line-height:1.9;color:#607567}dialog .eyebrow{color:#789071}dialog .actions{display:flex;justify-content:flex-end;gap:4px;margin-top:11.5px;flex-wrap:wrap}dialog button{padding:5px 10px;border:0.5px solid #d6e0d0;border-radius:4.5px}dialog button.primary{background:var(--ink);color:#ffe098}dialog select{width:100%;padding:6px;border:0.5px solid #cddcc9;background:#fff;border-radius:5px;margin:6px 0}.warning{color:#ba6245!important}.city-panel.collapsed .panel-content{display:none}.city-panel.collapsed{padding-bottom:7px}.inspect-list{max-height:80px;overflow:auto}.inspect-list button{width:100%;text-align:left;font-size:6px;padding:4px;border-bottom:0.5px solid var(--line)}
.tool strong{font-size:7px}.tool small{font-size:6px}.guide-item,.demand-row,.income{font-size:6.5px}.section-label{font-size:7px}.news-item{font-size:6px}.city-sub{font-size:6.5px}.eyebrow{font-size:5.5px}.time-card span{font-size:6.5px}.map-caption{color:#183f3da8}.tool-hint{font-size:6.5px}.tools{min-height:54px}.build-dock{background:#f6faf7f2}.city-panel{background:#f5faf7eb}.tool-icon{background:#e1ece7;color:#285951}.brand-mark{background:#1b504b}.hud{border-radius:6.5px}.city-panel,.inspector{border-radius:6.5px}.stats small{font-size:6.5px}.playback button{font-size:7px}.city-panel{max-height:calc(50dvh - 192.5px)}
@media(min-width:1500px){.city-panel{width:140px;max-height:calc(50dvh - 175px)}.map-caption{left:165px}.hud{height:40px}.tools{padding:7px 8px}}
@media(max-width:1000px){.brand{min-width:80px;font-size:6.5px;letter-spacing:0.5px}.brand-mark{width:17px;height:18px}.brand small{font-size:4px;letter-spacing:0.5px}.stats button{padding:0 6px}.stats strong{font-size:10px}.hud{gap:4px}.city-panel{width:111px;padding:8px}.map-caption{left:134px}.tool{min-width:52px}.tool-icon{width:14px;font-size:11.5px}.tools{gap:3px}nav button{padding:3.5px 6px 5.5px}.edition{display:none}}
@media(max-width:700px){.hud{top:4.5px;left:4.5px;right:4.5px;height:32px;padding:0 4.5px;gap:2.5px}.brand{min-width:auto}.brand>div{display:none}.brand-mark{width:15.5px;height:18px;font-size:12.5px}.stats{height:21px}.stats button{padding:0 3.5px}.stats small{font-size:4.5px}.stats strong{font-size:7.5px}.stats em{font-size:5px;margin-left:0.5px}.icon-button{width:13.5px;height:15px;font-size:8.5px}.city-panel{left:4.5px;top:42.5px;width:94px;padding:6px;max-height:calc(50dvh - 155px)}.city-panel h1{font-size:12px}.city-sub{font-size:5px}.city-panel .live-label{font-size:4.5px}.time-card{padding:4px}.time-card span{font-size:5px}.time-card strong{font-size:10.5px}.section-label{margin-top:6.5px;font-size:6px}.guide-item{font-size:5.5px}.tiny{display:none}.news-item{font-size:5px}.map-tools{right:4.5px;top:42.5px}.map-tools button{width:13.5px;height:14px;font-size:10.5px}.map-caption{left:107px;top:44.5px;gap:3.5px}#mapLabel{font-size:4px;letter-spacing:0.5px}#mapLabel small{display:none}.compass{font-size:6.5px;padding-right:3.5px}.bottom{left:4.5px;right:4.5px}.tool-hint{font-size:5px;padding:3px 6px;margin-bottom:4px}.build-dock{border-radius:6.5px}nav{padding:3px 3.5px 0}nav button{font-size:6px;padding:3.5px 5px}.tools{padding:4px;min-height:41px}.tool{min-width:54px;padding:3.5px}.tool strong{font-size:5.5px}.tool small{font-size:5px}footer{margin:3.5px 0 4.5px}.playback button{padding:2px 4.5px}#status{display:none}.inspector{right:24.5px;top:42.5px;width:min(135px,calc(50vw - 32.5px));max-height:calc(50dvh - 149px);padding:9.5px}#toast{top:40px;width:calc(100% - 15px);font-size:6px}dialog{padding:11.5px}}
/* Desktop mouse controls use a larger interface. */
@media (min-width:1000px) and (hover:hover) and (pointer:fine){:root{--ui-scale:.8}}

/* City advice is one persistent conversation, updated only when facts change. */
.city-panel{width:150px;max-height:calc(50dvh / var(--ui-scale) - 180px)}.map-caption{left:165px}
.need-card{padding:5px 0;border-bottom:0.5px solid var(--line);font-size:6.5px;line-height:1.65}
.need-card>div{display:flex;align-items:baseline;justify-content:space-between;gap:4px}
.need-card b{font-weight:600}.need-card strong{font-size:6px;font-weight:500;text-align:right}
.need-card small{display:block;font-size:5.5px;color:var(--muted);overflow-wrap:anywhere}
.need-card.has-need strong{color:#a16a1d}
.city-advisor{width:min(380px,100%);margin:0 auto 5px;background:#f6faf7f7;border:0.5px solid #fff;border-radius:7.5px;box-shadow:var(--shadow);pointer-events:auto;overflow:hidden}
.city-advisor summary{display:flex;align-items:center;gap:5px;padding:5.5px 8px;cursor:pointer;list-style:none}
.city-advisor summary::-webkit-details-marker{display:none}
.advisor-avatar{display:grid;place-items:center;flex:none;width:17px;height:17px;border-radius:5.5px;background:var(--ink);color:#f9d97b;font-size:10px;font-weight:600}
.city-advisor summary>span:nth-child(2){min-width:0;flex:1}.city-advisor summary small{display:block;font-size:5.5px;color:var(--muted)}.city-advisor summary strong{display:block;font-size:7.5px;line-height:1.6;font-weight:600}
.advisor-chevron{font-size:10px;transition:transform .16s}.city-advisor[open] .advisor-chevron{transform:rotate(180deg)}
.advisor-body{max-height:calc(11dvh / var(--ui-scale));overflow:auto;padding:0 8px 7px;scrollbar-width:thin;font-size:6.5px;line-height:1.8}
.advisor-body p{margin:0 0 4.5px;color:#49665b}.advisor-body h3{font-size:6px;margin:0 0 2px;font-weight:600}.advisor-columns{display:grid;grid-template-columns:1fr 1.5fr;gap:8px}.advisor-body ul{margin:0;padding-left:8.5px;color:#5e7368}.advisor-next{border-top:0.5px solid var(--line);padding-top:4.5px;margin-top:4.5px}.advisor-next ol{margin:0;padding-left:10px}.advisor-next li{padding:1px 0}.advisor-next button{margin-left:4px;padding:1.5px 4.5px;border:0.5px solid #c8d9cc;border-radius:3.5px;font-size:5.5px;background:#e8f0e5;white-space:nowrap}
@media(max-width:1000px){.city-panel{width:130px}.map-caption{left:150px}.city-advisor{width:min(350px,100%)}.advisor-body{max-height:calc(11dvh / var(--ui-scale))}}
@media(max-width:700px){.city-panel{width:109px}.map-caption{left:121.5px}.city-advisor summary{padding:4px 5px;gap:3.5px}.city-advisor summary strong{font-size:6.5px}.advisor-avatar{width:14px;height:14px;font-size:8.5px}.advisor-body{padding:0 5px 5px;font-size:6px;max-height:calc(9dvh / var(--ui-scale))}.advisor-columns{grid-template-columns:1fr;gap:4px}.need-card{font-size:6px;padding:4px 0}.need-card strong{font-size:5.5px}.need-card small{font-size:5px}}
.signal-control{margin-top:7.5px;padding-top:5px;border-top:0.5px solid var(--line)}
.inspector .signal-control h3{font-size:6.5px;margin:6px 0 3.5px;color:#284d42}
.signal-current{display:flex;flex-wrap:wrap;align-items:center;gap:2.5px 4.5px;padding:5px;background:#e9f0e8;border-radius:4.5px;font-size:6px}
.signal-current strong{font-size:7px}.signal-current small{width:100%;font-size:5.5px;color:#60796f}
.signal-mode{background:#294e43;color:#f2e6b0;border-radius:5px;padding:1px 4px;font-size:5px}
.signal-direction{display:flex;align-items:center;gap:3.5px;padding:3.5px 1px;border-bottom:0.5px solid #e5ebe6;font-size:5.5px}
.signal-direction span:nth-child(2){flex:1}.signal-direction b{font-weight:600}
.signal-lamp{height:6px;width:6px;border-radius:50%;box-shadow:0 0 0 1px #fff,0 0 0 1.5px #cadbd1;flex:none}
.signal-lamp.green{background:#56b973}.signal-lamp.yellow{background:#f0bd46}.signal-lamp.red{background:#db665d}
.signal-times{display:grid;gap:4px}.signal-times label{display:flex;align-items:center;justify-content:space-between;font-size:6px;gap:5px}
.signal-times label span{white-space:nowrap;font-size:5.5px;color:#526c62}
.signal-times input{width:31.5px;padding:2.5px 3px;background:white;color:var(--ink);border:0.5px solid #b9d0c3;border-radius:2.5px;text-align:center;font:600 6.5px 'Noto Sans Thai',Tahoma,sans-serif}
.signal-times input:focus-visible{outline:1px solid #c99736;outline-offset:0.5px}
.inspector .signal-control .signal-note{font-size:5px;line-height:1.6;margin:3.5px 0;color:#6e8176}
.inspector .signal-control button.action{font-size:6px;padding:4px 4.5px;margin-top:4px;border-radius:3.5px;background:#e4eee5;border-color:#c8dccd;font-weight:600}
.inspector .signal-control button[data-action="signal-manual"],.inspector .signal-control button[data-action="signal-switch"]{background:#245d4b;color:#fff7ce;border-color:#245d4b}
.inspector .signal-control button[data-action="signal-auto"]{background:#f6f8f3;color:#32624f}
.signal-manual{padding-top:4px;border-top:0.5px solid #e0e9df;margin-top:5px}

.need-card .need-metrics{display:flex;align-items:center;gap:3px;min-width:0}
.need-metrics>small{flex:1;min-width:0;line-height:1.45}
.need-card .need-gauges{display:flex;align-items:flex-end;gap:1.5px;flex:none}
.need-gauge{display:flex;align-items:center;flex-direction:column;gap:1px;width:6px}
.need-tube{display:block;position:relative;width:4px;height:12.5px;border-radius:2px 2px 1px 1px;background:#e2e9e3;box-shadow:inset 0 0 0 0.5px #bbcfc2;overflow:hidden}
.need-tube-fill{display:block;width:100%;height:100%;background:linear-gradient(to top,#54ad77 0%,#54ad77 59%,#e8ad4b 60%,#e8ad4b 84%,#cf6259 85%);clip-path:inset(100% 0 0 0);transition:clip-path .38s ease-out}
.need-gauge[data-gauge="capacity"] .need-tube-fill{background:#6f9ca5}
.need-gauge-label{font-size:4px;line-height:1;color:#60766c;white-space:nowrap}
@media(prefers-reduced-motion:reduce){.need-tube-fill{transition:none}}

/* Per-building mini tubes share the existing rooftop labels; no new map popup. */
.place-label-gauges{display:flex;align-items:flex-end;gap:1.5px;padding-left:2.5px;border-left:0.5px solid #d6e1ce}
.place-gauge-track{position:relative;display:block;width:3px;height:9px;overflow:hidden;border-radius:1.5px 1.5px 0.5px 0.5px;background:#e2e9e3;box-shadow:inset 0 0 0 0.5px #bbcfc2}
.place-gauge-fill{display:block;width:100%;height:100%;background:linear-gradient(to top,#54ad77 0%,#54ad77 59%,#e8ad4b 60%,#e8ad4b 84%,#cf6259 85%);clip-path:inset(100% 0 0 0);transition:clip-path .38s ease-out}
.place-gauge-track[data-gauge="capacity"] .place-gauge-fill{background:#6f9ca5}
.member-gate{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(9,38,37,.35);backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px);font-size:14px}
.member-gate[hidden],.member-account[hidden],.member-form label[hidden]{display:none!important}
.member-card{width:min(390px,100%);max-height:min(94dvh,690px);overflow-y:auto;border:1px solid rgba(255,255,255,.9);border-radius:20px;padding:26px 27px 20px;background:rgba(248,252,247,.96);box-shadow:0 22px 75px #0b2e2a6b,0 0 0 1px #d1ded18a;color:#1a463c;text-align:center}
.member-mark{display:grid;place-items:center;width:42px;height:42px;margin:0 auto 10px;background:#194b41;color:#f4d27d;border-radius:13px;font-size:27px;font-weight:700}
.member-eyebrow{font-size:10px!important;font-weight:700;letter-spacing:1.5px;color:#628276;margin:0 0 6px!important}
.member-card h2{font-size:23px;font-weight:700;letter-spacing:-.5px;margin:0 0 5px}
.member-intro{font-size:12px;line-height:1.8;color:#658174;margin:0 0 17px}
.member-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:10px;background:#e7eee7;margin-bottom:17px}
.member-tabs button{height:37px;border-radius:8px;font-size:13px;font-weight:600;color:#61776b}
.member-tabs button.active{background:white;color:#1b5745;box-shadow:0 2px 9px #1b3f3520}
.member-form{text-align:left;display:grid;gap:11px}
.member-form label{display:grid;gap:5px;font-size:12px;font-weight:600}
.member-form input{width:100%;height:43px;border:1px solid #cbdccf;background:#fff;color:#163c33;border-radius:9px;padding:0 12px;font-size:14px;font-family:inherit;outline:none}
.member-form input:focus{border-color:#2b7962;box-shadow:0 0 0 3px #377c5e23}
.member-notice{min-height:17px;color:#376e59;font-size:11px;line-height:1.6;margin:0;text-align:center}
.member-notice.error{color:#b74c41}
.member-submit{width:100%;height:44px;border-radius:10px;background:#215c4a;color:#fff6cf;font-size:14px;font-weight:700}
.member-submit:hover{background:#174535;color:white}
.member-submit:disabled{opacity:.65;cursor:wait}
.member-account{position:fixed;z-index:15;right:20px;top:100px;border:1px solid #d9e8d9;background:#f7fbf2f5;padding:6px 10px;border-radius:9px;box-shadow:var(--shadow);font-size:12px;max-width:170px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
@media(max-width:700px){.member-gate{padding:15px}.member-card{max-width:355px;padding:21px 21px 17px;border-radius:18px}.member-card h2{font-size:21px}.member-intro{font-size:11px}.member-account{right:8px;top:48px;font-size:11px;padding:5px 7px}}
@media(prefers-reduced-motion:reduce){.place-gauge-fill{transition:none}}

/* Keep the city data panels; remove the redundant floating advisor bar. */
#cityAdvisor{display:none!important}
}

/* Compact citizen dashboard: preserve a large visible city map around the panel. */
.citizens-dashboard{position:fixed;z-index:18;right:14px;top:78px;bottom:auto;width:min(440px,calc(100vw - 28px));height:min(590px,calc(100dvh - 190px));min-height:240px;display:flex;flex-direction:column;background:#f8fbf6f8;border:1px solid #fff;border-radius:13px;box-shadow:0 12px 36px #102e2e36;backdrop-filter:blur(14px);overflow:hidden;color:#173f3d;font-size:11px}
.citizens-dashboard.hidden{display:none!important}
.citizens-top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start;padding:10px 13px 7px;border-bottom:1px solid #dce6dd}
.citizens-eyebrow{font-size:9px;letter-spacing:1.6px;color:#688977;font-weight:700}
.citizens-top h2{font-size:17px;line-height:1.2;margin:3px 0;color:#173f3d}.citizens-top h2 span{font-size:10px;color:#748b7d;font-weight:500}
.citizens-top p{color:#71887b;font-size:9px;margin:3px 0 0;line-height:1.4}.citizens-close{font-size:26px;color:#4f7061;width:30px;height:30px;line-height:30px;border-radius:8px;flex:none}.citizens-close:hover{background:#e7f0e8}
.citizens-toolbar{padding:7px 12px;border-bottom:1px solid #e4ebe4}.citizens-toolbar label{font-size:10px;font-weight:700;color:#658071;display:block;margin-bottom:4px}.citizens-toolbar input{display:block;width:100%;height:30px;border:1px solid #ccdcd2;background:white;color:#173f3d;border-radius:8px;padding:6px 10px;font:inherit;outline:none}
.citizens-toolbar input:focus{border-color:#428468;box-shadow:0 0 0 2px #a1c9b34d}
.citizens-filters{display:flex;gap:5px;overflow-x:auto;padding-top:9px;scrollbar-width:thin}
.citizens-filters button{flex:none;border:1px solid #dbe7dd;border-radius:16px;background:#eff4ee;color:#507160;padding:4px 8px;min-height:27px;font:600 9px 'Noto Sans Thai',Tahoma,sans-serif;white-space:nowrap}
.citizens-filters button.active{background:#245d4b;color:white;border-color:#245d4b}
.citizens-dashboard-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:9px 12px 13px;scrollbar-width:thin}
.citizen-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.citizen-kpi{background:#f0f5ed;border:1px solid #e3ebe2;border-radius:8px;padding:6px 5px;min-width:0}
.citizen-kpi b{display:block;font-size:16px;color:#255c4a;line-height:1.2;font-weight:700;font-variant-numeric:tabular-nums}
.citizen-kpi span{display:block;font-size:9px;color:#678274;line-height:1.5;margin-top:4px}
.citizen-kpi.urgent{background:#fdf0eb;border-color:#f3ddd6}.citizen-kpi.urgent b{color:#bc614d}
.citizen-section{margin-top:11px}.citizen-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:9px}
.citizen-section h3{font-size:13px;font-weight:700;color:#235b49;margin:0}.citizen-section-head small{font-size:10px;color:#789184}
.citizen-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.citizen-bar-row{display:grid;grid-template-columns:minmax(70px,1fr) 2fr auto;gap:7px;align-items:center;margin:7px 0;font-size:10px;color:#526b60}
.citizen-bar-row strong{font-size:10px;font-variant-numeric:tabular-nums;color:#275646}
.citizen-bar-track{height:8px;border-radius:9px;background:#e7ece7;overflow:hidden}.citizen-bar-fill{height:100%;display:block;border-radius:9px;background:#5c9b7a}
.citizen-bar-fill.warning{background:#dfa86c}.citizen-bar-fill.danger{background:#ca7466}.citizen-bar-fill.cool{background:#80a6ab}
.citizen-signal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.citizen-signal-grid div{background:#f5f8f4;border:1px solid #e6ede5;padding:10px 8px;border-radius:9px}
.citizen-signal-grid b{font-size:16px;display:block;color:#355f50}.citizen-signal-grid small{font-size:10px;color:#71867a;line-height:1.5}
 .citizen-rush-chart{height:69px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:5px;align-items:end;border-bottom:1px solid #d8e6dc;padding-top:3px}
 .citizen-rush-col{height:62px;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;align-items:center;min-width:0}
.citizen-rush-bar{width:min(22px,72%);border-radius:4px 4px 0 0;background:#82ad8f;min-height:2px}
.citizen-rush-col small{font-size:9px;color:#6d8275}
.citizen-issues{display:flex;gap:6px;flex-wrap:wrap}.citizen-issue{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:6px 9px;border-radius:8px;background:#f0f5f0;color:#456756;font-size:10px}
.citizen-issue strong{color:#31594c;font-size:11px}
.citizen-note{font-size:10px;line-height:1.6;color:#7d8e81;margin:8px 0}
.citizen-results{display:grid;gap:7px}.citizen-person{width:100%;display:flex;justify-content:space-between;align-items:center;text-align:left;gap:6px;padding:7px 8px;background:#fff;border-radius:10px;border:1px solid #e1ebe1;color:#284d40}
.citizen-person:hover,.citizen-person:focus-visible{background:#ecf5e9;border-color:#9ec6ad}
.citizen-person-main{min-width:0}.citizen-person b{font-size:11px;display:block}.citizen-person small{display:block;margin-top:3px;color:#708879;font-size:10px;line-height:1.45;word-break:break-word}
.citizen-person-score{flex:none;min-width:63px;text-align:right}.citizen-person-score strong{display:block;font-size:14px;font-variant-numeric:tabular-nums;color:#39775a}
.citizen-person-score strong.low{color:#c37b4d}.citizen-person-score strong.critical{color:#c25954}
.citizen-person-score em{font-size:9px;color:#7d8b81;font-style:normal}
.citizen-more{display:block;margin:12px auto 1px;background:#e8f0e6;color:#2c6752;padding:8px 16px;border:1px solid #d4e5d9;border-radius:9px;font-weight:700;font-size:11px}
.citizen-empty{text-align:center;color:#698375;background:#f3f7f2;border-radius:9px;padding:20px;font-size:12px}
@media(max-width:700px){.citizens-dashboard{right:8px;left:8px;width:auto;top:76px;bottom:94px;height:auto;max-height:none;min-height:0;border-radius:12px}.citizens-top{padding:8px 10px}.citizens-top h2{font-size:17px}.citizens-toolbar{padding:7px 10px}.citizens-dashboard-body{padding:8px 10px}.citizen-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.citizen-pair{grid-template-columns:1fr}.citizen-kpi b{font-size:16px}}

/* Rooftop labels: tiny building name and three number-only counters. */
.place-building-label{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:2px 4px;border-radius:5px;background:#f8fcf4e8;border:1px solid #d6e1ce;box-shadow:0 1px 4px #173f3d20;color:#173f3d;font:8px/1.22 "Noto Sans Thai",Tahoma,sans-serif;white-space:nowrap;text-align:center}
.place-building-label[hidden]{display:none!important}
.place-building-name{font-weight:600;font-size:8px;line-height:1.24}
.place-building-arrivals{font-size:7px;line-height:1.20;letter-spacing:-.08px;color:#547265;font-variant-numeric:tabular-nums}
/* Tablet layouts should not be dominated by the citizen dashboard. */
@media(min-width:701px) and (max-width:1400px){
 .citizens-dashboard{right:10px;top:72px;width:min(370px,calc(100vw - 22px));height:min(460px,60dvh);min-height:250px;font-size:10.5px}
 .citizens-top{padding:8px 11px 6px}
 .citizens-top h2{font-size:16px}
 .citizens-top p{font-size:9px}
 .citizens-toolbar{padding:6px 10px}
 .citizens-dashboard-body{padding:8px 10px}
 .citizen-kpis{gap:4px}
 .citizen-kpi{padding:5px 4px}
 .citizen-kpi b{font-size:15px}
 .citizen-section{margin-top:10px}
 .citizen-section h3{font-size:11px}
 .citizen-pair{gap:8px}
 .citizen-person{padding:6px 7px}
 .citizen-person b{font-size:10px}
 .citizen-person small{font-size:9px}
 .citizen-signal-grid div{padding:6px 5px}
 .citizen-rush-chart{height:64px}
 .citizen-rush-col{height:58px}
}

/* Smcity 1+ iPad layout: give the map its space back. */
.ui-legacy-hidden,[hidden].ui-legacy-hidden{display:none!important}
.city-panel .panel-content>.section-label{margin-top:5px;margin-bottom:5px}
.city-panel .panel-content>#demand{min-width:0}
.city-panel{max-height:min(56dvh,440px)}
.city-panel.collapsed .panel-content{display:none!important}

/* Keep a compact day/date/clock where the former map tutorial sat. */
.city-time-display{display:flex;justify-content:center;align-items:center;gap:9px;
 max-width:max-content;min-width:0;padding:5px 12px;border-radius:12px;
 background:#193f3de8;color:#f4f7e9;font-size:11px;line-height:1.3;
 white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:0;
 box-shadow:0 2px 8px #143d3d30}
.city-time-display strong{font-size:13px;line-height:1.2;font-weight:700;color:#f8df9d}

/* Foldable construction / control dock. The header stays reachable. */
.build-dock .dock-head{display:flex;align-items:center;justify-content:space-between;gap:6px;
 padding:3px 6px;border-bottom:1px solid #dbe7df}
.dock-head button{display:inline-flex;align-items:center;justify-content:center;gap:4px;
 min-height:26px;padding:3px 7px;border:1px solid #d5e3d8;border-radius:6px;
 font:600 9.5px/1.15 "Noto Sans Thai",Tahoma,sans-serif;white-space:nowrap;
 color:#285a4b;background:#eef5ed;cursor:pointer;touch-action:manipulation}
.dock-head button:focus-visible{outline:2px solid #4f9b7c;outline-offset:2px}
.dock-head .explore-city{background:#215a4c;color:#fff9e8;border-color:#215a4c}
.dock-head .explore-city span{font-size:12px}
.dock-head .toggle-dock{background:#f8fbf7;color:#426b5b}
.build-dock.is-collapsed .dock-body{display:none!important}
.build-dock.is-collapsed .dock-head{border-bottom:0}
.build-dock .dock-body{min-width:0}

/* Compact controls for iPad/touch: match the rest of the scaled dock. */
@media(hover:none) and (pointer:coarse){
 .dock-head button{min-height:28px;padding:4px 8px;font-size:10px}
 .dock-head .explore-city span{font-size:12px}
 .city-time-display{padding:6px 12px;font-size:12px}
 .city-time-display strong{font-size:14px}
 .city-panel{max-height:55dvh}
}
@media(max-width:700px){
 .build-dock .dock-head{gap:4px;padding:4px 5px}
 .dock-head button{min-height:26px;font-size:9px;padding:3px 6px}
 .city-time-display{max-width:96%;gap:6px;font-size:10px;padding:4px 8px}
 .city-time-display strong{font-size:12px}
}

/* Tourism keeps the existing compact HUD and citizen-panel dimensions. */
.hud .stats{min-width:0}.hud .stats button{min-width:0;padding-left:clamp(4px,1vw,16px);padding-right:clamp(4px,1vw,16px)}
.tourists-dashboard .citizens-toolbar input{width:100%;min-width:0;box-sizing:border-box;font:inherit}
.tourists-dashboard .detail-row{font-size:10px;gap:8px;padding:5px 0}.tourists-dashboard .detail-row strong{font-size:11px}
.tourists-dashboard .citizen-section>p{font-size:10px;line-height:1.65}.tourists-dashboard .citizen-person{margin-top:5px}
.tourist-itinerary{font-size:inherit}.tourist-itinerary p{padding:4px 0;border-bottom:1px solid #dce8e3}
@media(max-width:700px){.hud .brand{display:none}.hud .stats button{padding-left:3px;padding-right:3px}.hud .stats small{white-space:nowrap}}


/* RIGHT TOOLBAR V2 — touch-friendly account, save and map controls */
body > .map-tools{
  zoom:1!important;position:absolute;z-index:23;right:clamp(9px,1.4vw,22px);top:108px;
  width:62px;max-height:calc(100dvh - 120px);overflow-y:auto;overflow-x:hidden;
  box-sizing:border-box;padding:5px 5px 7px;display:flex;flex-direction:column;
  align-items:center;gap:5px;background:rgba(250,254,248,.97);
  border:1px solid rgba(255,255,255,.94);border-radius:15px;
  box-shadow:0 11px 30px rgba(16,55,47,.19),inset 0 0 0 1px rgba(88,135,105,.06);
  -webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);
  scrollbar-width:none;overscroll-behavior:contain;
}
body > .map-tools::-webkit-scrollbar{display:none}
body > .map-tools button{font-family:"Noto Sans Thai",Tahoma,sans-serif;flex:none;margin:0;border:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  touch-action:manipulation;transition:transform .12s,background .15s,box-shadow .15s;
}
body > .map-tools button:focus-visible{outline:2px solid #2e8365;outline-offset:2px}
body > .map-tools button:active{transform:scale(.95)}
body > .map-tools .map-account{
  width:49px;height:50px;gap:2px;padding:4px 2px;
  border-radius:11px;color:#315f52;background:linear-gradient(145deg,#f2f9ef,#e9f2e9);
  position:relative;
}
body > .map-tools .map-account.is-signed-in:after{
  content:"";position:absolute;top:7px;right:8px;width:8px;height:8px;
  border:2px solid #f2f9ef;border-radius:50%;background:#40a574;
}
body > .map-tools .map-account:hover{background:#dff0e2}
body > .map-tools .map-account small{font-size:9px;line-height:1.2;font-weight:700}
body > .map-tools .map-rail-svg{display:block;flex:none;overflow:visible}
body > .map-tools .account-svg{width:22px;height:22px}
body > .map-tools .map-save{
  width:50px;min-height:73px;padding:6px 2px 5px;gap:4px;
  border-radius:12px;color:#184b3f;
  background:linear-gradient(153deg,#e4f6d1 0%,#cdeaba 80%,#b7dfa9 100%);
  box-shadow:0 3px 0 #95c99b,0 5px 11px rgba(39,112,77,.17);
  border:1px solid rgba(255,255,255,.7);
}
body > .map-tools .map-save:hover{background:linear-gradient(153deg,#edfbde,#bee5ac)}
body > .map-tools .map-save-art{
  height:36px;width:36px;margin:0;display:grid;place-items:center;
  border-radius:10px;background:rgba(255,255,255,.65);
  box-shadow:0 2px 7px rgba(34,93,61,.11);
}
body > .map-tools .save-svg{height:28px;width:28px;filter:drop-shadow(0 1px 0 #fff)}
body > .map-tools .map-save small{
  font-size:9px;font-weight:800;line-height:1.15;white-space:nowrap;color:#174d3e;
  height:auto;letter-spacing:-.15px;
}
body > .map-tools .map-divider{
  width:34px;height:1px;min-height:1px;flex:none;
  margin:1px 0;background:linear-gradient(90deg,transparent,#d1e3d5,transparent);
}
body > .map-tools .map-utility-group{
  display:flex;flex-direction:column;align-items:center;gap:3px;width:100%;
}
body > .map-tools .map-utility{
  width:36px;height:32px;padding:0;border-radius:9px;color:#477467;background:transparent;
}
body > .map-tools .map-utility:hover{background:#e5efe5}
body > .map-tools .map-utility.active{color:#fce5a2;background:#205c4e}
body > .map-tools .utility-svg{width:19px;height:19px}
@media(max-width:700px){
 body > .map-tools{right:8px;top:82px;width:56px;padding:5px 4px;gap:4px;
   max-height:calc(100dvh - 90px);border-radius:13px}
 body > .map-tools .map-account{width:45px;height:46px}
 body > .map-tools .map-save{width:46px;min-height:65px}
 body > .map-tools .map-save-art{width:33px;height:33px}
 body > .map-tools .save-svg{width:25px;height:25px}
 body > .map-tools .map-save small{font-size:8.5px}
 body > .map-tools .map-utility{height:30px;width:35px}
}
@media(max-height:550px){
 body > .map-tools{top:70px;max-height:calc(100dvh - 75px);gap:3px}
 body > .map-tools .map-account{height:44px}
 body > .map-tools .map-save{min-height:60px}
 body > .map-tools .map-utility{height:27px}
}

/* SMGAME CITY-BUILDER DOCK V3
   Inspired by contextual city-builder menus: primary categories stay visible,
   only the selected group shows its actions. This does not touch the canvas. */
body > .bottom{zoom:.75!important}
.build-dock{
 width:min(1060px,100%);border-radius:13px;
 background:rgba(249,252,248,.96);
 border:1px solid rgba(255,255,255,.9);
 box-shadow:0 8px 25px rgba(16,49,43,.26);
}
.build-dock .dock-head{
 padding:5px 10px;min-height:34px;
 background:#eaf1e9;border-bottom:1px solid #cdded1;
}
.build-dock .dock-label{
 display:inline-flex;align-items:center;margin-right:auto;
 font:700 12px/1.3 "Noto Sans Thai",Tahoma,sans-serif;
 color:#264d42;white-space:nowrap;
}
.build-dock .dock-head button{
 min-height:27px;padding:4px 10px;font-size:11px;border-radius:7px;
}
.build-dock .dock-body{display:flex;flex-direction:column;min-width:0}
.build-dock .dock-context{min-width:0;background:#f5f9f3}
.build-dock #subcategories{
 display:flex;align-items:center;gap:5px;min-height:40px;
 padding:6px 11px;overflow-x:auto;scrollbar-width:thin;
 border-bottom:1px solid #d8e4da;
}
.build-dock #subcategories[hidden]{display:none!important}
.build-dock #subcategories button{
 flex:none;min-height:27px;padding:5px 13px;white-space:nowrap;
 border:1px solid transparent;border-radius:7px;background:transparent;
 color:#547267;font:600 11px/1.35 "Noto Sans Thai",Tahoma,sans-serif;
}
.build-dock #subcategories button:hover{background:#e8f1e8}
.build-dock #subcategories button.active{
 color:#fff;background:#27674f;border-color:#27674f;
}
.build-dock .tools{
 min-height:79px;max-height:145px;gap:7px;padding:8px 11px 10px;
 overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;
}
.build-dock .tool{
 flex:0 0 auto;min-width:126px;max-width:220px;
 min-height:69px;padding:7px 9px;gap:8px;
 border-radius:9px;border-color:#d5e1d6;background:#fff;
}
.build-dock .tool:hover{background:#f0f8ee}
.build-dock .tool.active{
 border-color:#277655;background:#e5f3e6;
 box-shadow:inset 0 0 0 1px #277655;
}
.build-dock .tool-icon{
 width:37px;height:39px;font-size:24px;
 border-radius:8px;background:#e8f1e8;
}
.build-dock .tool strong{font-size:12px;line-height:1.35}
.build-dock .tool small{font-size:10px;line-height:1.35;white-space:normal}
.build-dock #categories{
 display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
 gap:2px;min-height:69px;overflow:visible;
 padding:6px 7px 5px;border-top:1px solid #d6e3d7;border-bottom:0;
 background:#edf4eb;
}
.build-dock #categories button{
 display:flex;flex-direction:column;align-items:center;justify-content:center;
 gap:3px;min-width:0;min-height:55px;
 padding:5px 2px;border:1px solid transparent;border-radius:9px;
 white-space:normal;color:#517061;background:transparent;
}
.build-dock #categories button:hover{background:#e2eee0}
.build-dock #categories button.active{
 color:#fff;background:#205f49;border-color:#205f49;
 box-shadow:0 2px 6px rgba(19,83,57,.19);
}
.build-dock .dock-group-icon{font-size:23px;line-height:1.1}
.build-dock .dock-group-name{
 max-width:100%;font:700 11px/1.15 "Noto Sans Thai",Tahoma,sans-serif;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.build-dock.is-collapsed .dock-body{display:flex!important}
.build-dock.is-collapsed .dock-context{display:none!important}
.build-dock.is-collapsed .dock-head{border-bottom:1px solid #d5e1d6}
.build-dock button:focus-visible{outline:3px solid #e4a72f;outline-offset:1px}
@media(max-width:700px){
 body > .bottom{zoom:.78!important;left:8px;right:8px}
 .build-dock .dock-head{padding:5px 6px;gap:4px}
 .build-dock .dock-label{font-size:10px}
 .build-dock .dock-head button{min-height:26px;padding:4px 6px;font-size:9px}
 .build-dock #categories{padding:4px 3px;gap:1px;min-height:60px}
 .build-dock #categories button{padding:4px 1px;min-height:51px;gap:2px}
 .build-dock .dock-group-icon{font-size:20px}
 .build-dock .dock-group-name{font-size:9px}
 .build-dock #subcategories{padding:5px 6px;min-height:36px}
 .build-dock #subcategories button{padding:5px 9px;font-size:10px}
 .build-dock .tools{min-height:72px;max-height:110px;padding:6px;gap:5px}
 .build-dock .tool{min-height:60px;min-width:115px;max-width:160px;padding:6px}
 .build-dock .tool-icon{width:30px;height:33px;font-size:20px}
 .build-dock .tool strong{font-size:11px}
 .build-dock .tool small{font-size:9px}
 .bottom footer{margin-top:5px;margin-bottom:5px}
}
@media(max-height:540px){
 .build-dock .tools{max-height:78px}
 .build-dock #categories{min-height:52px}
 .build-dock #categories button{min-height:44px}
 .build-dock .dock-group-icon{font-size:17px}
 .build-dock .dock-group-name{font-size:9px}
}

/* SMGAME CITY-BUILDER REIMAGINED V4 — visibly redesigned game HUD, no simulation changes */
:root{--ui-night:#10212d;--ui-deep:#0b1822;--ui-cyan:#45d5cf;--ui-gold:#f9c965;--ui-ghost:#aec6cd}
body>.bottom{zoom:1!important;left:12px!important;right:12px!important;bottom:7px;z-index:17}
.bottom #cityAdvisor{display:none!important}
.bottom .tool-hint.city-time-display{
 position:absolute;left:0;bottom:7px;max-width:none;margin:0;
 border-radius:11px;padding:7px 11px;gap:8px;
 background:#10212dec;border:1px solid #62808a55;color:#d2e5e8;
 font-size:11px;box-shadow:0 6px 24px #0619234d;
 pointer-events:none
}
.bottom .city-time-display strong{font-size:13px;color:var(--ui-gold)}
.bottom>.build-dock{
 display:flex;flex-direction:column;width:min(710px,calc(100% - 360px));
 min-width:430px;margin:0 auto;background:rgba(13,30,41,.94)!important;
 border:1px solid rgba(110,173,178,.42)!important;border-radius:13px!important;
 box-shadow:0 10px 38px #08131f80,0 1px 0 #bbfcff16 inset!important;
 overflow:visible!important;backdrop-filter:blur(22px);
 color:#ecf5f4
}
.build-dock .dock-head{
 display:flex;align-items:center;gap:7px;min-height:28px;padding:4px 9px;
 background:transparent;border:0;border-bottom:1px solid #6e96a333!important
}
.build-dock .dock-label{display:flex;align-items:center;gap:5px;
 color:#eaf9f9;font:800 10px/1.2 "Noto Sans Thai",Tahoma,sans-serif;letter-spacing:.5px}
.build-dock .dock-logo{display:grid;place-items:center;width:18px;height:18px;
 border-radius:5px;background:#31a99d;color:#07232e;font-size:11px}
.build-dock .dock-title-secondary{font-size:9px;letter-spacing:1px;color:#a7c7cc}
.build-dock .dock-current{
 display:inline-block;margin-left:6px;padding-left:10px;border-left:1px solid #83b0b866;
 font:600 10px/1.25 "Noto Sans Thai",Tahoma,sans-serif;letter-spacing:0;color:#e6c879
}
.build-dock .dock-head button{min-height:24px;font-size:10px;
 padding:3px 8px;border-radius:6px;background:#1b3540;border:1px solid #526e77;
 color:#e6f3ef;box-shadow:none}
.build-dock .dock-head .explore-city{background:#1b8279;color:#f1fffd;border-color:#37b6a8}
.build-dock .dock-head .explore-city:hover{background:#24998d}
.build-dock .dock-head .toggle-dock{background:#233946;color:#c4dade;border-color:#456674}
.build-dock .dock-body{display:flex;flex-direction:column-reverse;min-width:0}
.build-dock #categories{
 display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
 padding:4px 6px 7px;gap:4px;min-height:62px;
 background:transparent;border:0;overflow:visible;
}
.build-dock #categories button{
 display:flex;flex-direction:column;align-items:center;justify-content:center;
 min-height:58px;gap:3px;padding:5px 4px;min-width:0;
 border:1px solid transparent!important;border-radius:8px;background:transparent!important;
 color:#afc6cd!important;text-align:center
}
.build-dock #categories button.active{
 color:#071e28!important;background:linear-gradient(150deg,#8be7dd,#42c7c5)!important;
 box-shadow:0 2px 12px #18b5b84d!important;border-color:#7bf3e3!important
}
.build-dock #categories button:hover:not(.active){background:#254756!important;color:#fff!important}
.build-dock .dock-group-icon{font-size:23px;line-height:1.05}
.build-dock .dock-group-name{font:700 10px/1.22 "Noto Sans Thai",Tahoma,sans-serif;white-space:normal}
.build-dock .dock-context{
 margin:0 6px 7px;padding:0;min-width:0;
 border:1px solid #63818b77;border-radius:10px;
 background:rgba(7,19,28,.98)!important;
 box-shadow:0 9px 24px #06161f59;
 overflow:hidden
}
.build-dock #subcategories{display:flex;align-items:center;gap:3px;
 min-height:32px;padding:4px 7px;border:0;border-bottom:1px solid #63818b3b;
 overflow-x:auto;background:#182d3a;scrollbar-width:thin}
.build-dock #subcategories[hidden]{display:none!important}
.build-dock #subcategories button{
 min-height:26px;padding:4px 11px;border-radius:5px;border:1px solid transparent;
 background:transparent;color:#b1c6cc;
 font:600 10px/1.25 "Noto Sans Thai",Tahoma,sans-serif}
.build-dock #subcategories button:hover{background:#2d4653;color:white}
.build-dock #subcategories button.active{
 background:#2d8f89!important;border-color:#44bdb5!important;color:#fff!important;
}
.build-dock .tools{display:flex;align-items:stretch;gap:5px;
 padding:7px;min-height:74px;max-height:100px;overflow-x:auto;overflow-y:hidden;
 scrollbar-width:thin;background:transparent}
.build-dock .tool{
 display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
 flex:0 0 auto;min-width:95px;max-width:126px;min-height:66px;
 padding:7px 4px 5px;gap:4px;overflow:hidden;text-align:center;
 border-radius:8px;border:1px solid #47616d!important;
 background:#1d3643!important;color:#e9f6f4!important;
 box-shadow:none!important
}
.build-dock .tool:hover{border-color:#6ec6bd!important;background:#274c58!important}
.build-dock .tool.active{
 color:#f4ffff!important;border-color:#70e6cc!important;
 background:#1b6462!important;box-shadow:0 0 0 1px #52cbbe inset!important
}
.build-dock .tool-icon{width:26px;height:25px;flex:none;border-radius:5px;
 font-size:20px;background:transparent;line-height:1}
.build-dock .tool>span:last-child{width:100%;min-width:0;display:block}
.build-dock .tool strong{font:700 10px/1.3 "Noto Sans Thai",Tahoma,sans-serif;
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.build-dock .tool small{display:none!important}
.build-dock .tool .tool-price{display:block!important;font-size:9px!important;
 line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
 color:#addfd1!important;font-weight:600}
.build-dock.is-collapsed .dock-context{display:none!important}
.build-dock.is-collapsed .dock-body{display:flex!important}
.build-dock.is-collapsed .dock-head{border-bottom:1px solid #6e96a333!important}
.build-dock button:focus-visible{outline:2px solid var(--ui-gold);outline-offset:2px}
body>.bottom footer{
 width:max-content;max-width:100%;display:flex;justify-content:center;
 gap:6px;align-items:center;margin:7px auto 0;pointer-events:none
}
body>.bottom footer .playback{
 display:flex;gap:2px;padding:3px 5px;pointer-events:auto;
 background:#10212def;border:1px solid #5b879188;border-radius:9px;
 box-shadow:0 5px 24px #06182144;color:#d1edf0
}
body>.bottom footer .playback button{
 padding:4px 9px;border-radius:6px;font-size:11px;color:#cfdee5
}
body>.bottom footer .playback button.active{background:#279b95;color:#071b25;font-weight:800}
body>.bottom footer #status,body>.bottom footer .edition{display:none!important}
body>.hud{
 zoom:.9!important;z-index:19;top:12px;left:12px;right:12px;
 width:auto;height:56px;min-height:56px;padding:5px 12px;
 gap:12px;border-radius:13px;background:rgba(14,31,41,.93);
 border:1px solid #6f99a066;box-shadow:0 7px 27px #06182164;
 backdrop-filter:blur(18px);color:#f0fbf9
}
body>.hud .brand{min-width:134px;gap:7px;font-size:12px;line-height:1.2;
 color:#ecf7f4;letter-spacing:.7px}
body>.hud .brand small{font-size:9px;letter-spacing:.2px;margin-top:4px;color:#81babd}
body>.hud .brand-mark{width:30px;height:30px;border-radius:9px;
 background:#1e827f;color:#e8fcf5;font-size:19px}
body>.hud .stats{flex:1;min-width:0;height:40px;gap:4px;justify-content:space-around}
body>.hud .stats button{
 display:flex;flex-direction:column;justify-content:center;min-width:0;
 flex:1 1 0;gap:1px;align-items:center;white-space:nowrap;text-align:center;
 padding:2px 4px;background:rgba(44,72,82,.40);
 border:1px solid #769fa01c;border-radius:8px;color:#e9f6f8;
}
body>.hud .stats button:hover{background:#2c5260}
body>.hud .stats small{font-size:9px;color:#93b9c1;white-space:nowrap}
body>.hud .stats strong{font-size:16px;color:#f4fffb;font-weight:800;white-space:nowrap;line-height:1.3}
body>.hud .stats em{color:#b8d1d2;font-size:10px}
body>.hud .stats button:first-child strong{color:#f8d07d}
body>.hud .icon-button{flex:none;border:1px solid #547f85;
 border-radius:7px;width:31px;height:32px;background:#23404c;color:#e3f4f3;font-size:17px}
body>.hud .icon-button:hover{background:#2b6870}
body>.city-panel{
 zoom:.84!important;z-index:16;top:82px;left:14px;width:260px;
 max-height:36dvh!important;min-height:0;border-radius:11px;
 padding:11px 14px;background:rgba(13,31,40,.91)!important;
 border:1px solid #6b9c9c66;box-shadow:0 6px 25px #07162280;
 color:#e8f4f5;backdrop-filter:blur(18px)
}
body>.city-panel .eyebrow{color:#bce4e1;letter-spacing:1px;font-size:11px}
body>.city-panel .eyebrow button{color:#f3d181}
body>.city-panel .section-label{color:#e4f4f3}
body>.city-panel .section-label .tiny{color:#b1cbc9}
body>.city-panel .panel-content{color:#d8e5e5}
body>.city-panel.collapsed{max-height:50px!important;overflow:hidden}
body>.map-tools{background:rgba(14,32,43,.95)!important;border-color:#638e9966!important;
 box-shadow:0 7px 24px #071b2770!important}
body>.map-tools .map-account{background:#244854!important;color:#e9f7f4!important}
body>.map-tools .map-utility{color:#c8dfe2!important}
body>.map-tools .map-utility:hover{background:#295765!important}
body>.map-tools .map-utility.active{color:#fff!important;background:#197d78!important}
body>.map-tools .map-divider{background:#74949b55}
body>.map-caption{color:#bad2d4;opacity:.65}
@media(max-width:1050px){
 body>.bottom>.build-dock{min-width:0;width:min(630px,calc(100% - 160px))}
 .bottom .tool-hint.city-time-display{font-size:9px;padding:6px 7px;bottom:10px}
 body>.hud .brand{min-width:40px}
 body>.hud .brand>div{display:none}
 body>.hud .stats strong{font-size:14px}
}
@media(max-width:700px){
 body>.bottom{zoom:1!important;left:5px!important;right:5px!important;bottom:4px}
 body>.bottom>.build-dock{width:100%;min-width:0;border-radius:10px!important}
 .build-dock .dock-head{min-height:25px;padding:3px 5px}
 .build-dock .dock-label{font-size:9px}
 .build-dock .dock-title-secondary{display:none}
 .build-dock .dock-current{font-size:9px;margin-left:3px;padding-left:6px}
 .build-dock .dock-head button{min-height:23px;padding:3px 5px;font-size:9px}
 .build-dock #categories{min-height:57px;padding:3px 3px 5px;gap:2px}
 .build-dock #categories button{min-height:50px;padding:4px 1px}
 .build-dock .dock-group-icon{font-size:20px}
 .build-dock .dock-group-name{font-size:9px;letter-spacing:-.2px}
 .build-dock .dock-context{margin:0 3px 4px}
 .build-dock #subcategories{padding:4px;min-height:30px}
 .build-dock #subcategories button{font-size:9px;padding:4px 7px}
 .build-dock .tools{min-height:62px;max-height:74px;padding:5px}
 .build-dock .tool{min-width:77px;max-width:105px;min-height:55px;padding:3px;gap:2px}
 .build-dock .tool-icon{font-size:17px;width:21px;height:20px}
 .build-dock .tool strong{font-size:9px}
 .build-dock .tool .tool-price{font-size:8px!important}
 .bottom .tool-hint.city-time-display{
  position:relative;bottom:auto;margin:0 auto 4px;padding:3px 9px;
  font-size:10px;border-radius:8px}
 body>.bottom footer{margin:4px auto 0}
 body>.bottom footer .playback button{padding:4px 6px;font-size:10px}
 body>.hud{zoom:1!important;top:5px;left:5px;right:5px;height:42px;min-height:42px;
  gap:4px;padding:3px 5px;border-radius:9px}
 body>.hud .brand{display:none}
 body>.hud .stats{height:33px;gap:2px}
 body>.hud .stats button{padding:1px;gap:1px;border-radius:5px}
 body>.hud .stats small{font-size:7.5px;letter-spacing:-.25px}
 body>.hud .stats strong{font-size:12px}
 body>.hud .stats em{font-size:8px}
 body>.hud .icon-button{width:22px;height:26px;font-size:12px}
 body>.city-panel{zoom:.76!important;top:55px;left:7px;max-height:31dvh!important;width:230px;padding:8px}
 body>.map-tools{top:57px!important}
}
@media(max-height:520px){
 .build-dock .tools{max-height:66px;min-height:55px}
 .build-dock #categories{min-height:48px}
 .build-dock #categories button{min-height:43px}
 .build-dock .dock-group-icon{font-size:18px}
 .build-dock .dock-group-name{font-size:9px}
 body>.bottom footer{margin-top:3px}
 body>.bottom footer .playback button{padding:3px 6px}
}

/* SMGAME V5 UNIFIED CONTROL DECK — 1/3 live city dashboard + 2/3 city-building tools.
   Layout-only: original game IDs and event handlers remain unchanged. */
body > .bottom{
 zoom:1!important;left:10px!important;right:10px!important;bottom:9px!important;
 z-index:20;max-width:none;pointer-events:none
}
body > .bottom > .control-deck{
 --deck-border:rgba(126,194,194,.3);
 display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);
 width:min(1420px,100%);min-height:228px;margin:0 auto;
 overflow:visible;pointer-events:auto;
 border:1px solid var(--deck-border);border-radius:16px;
 background:linear-gradient(135deg,rgba(15,37,49,.97),rgba(10,26,39,.98));
 box-shadow:0 16px 55px rgba(0,13,21,.61),inset 0 1px 0 rgba(212,255,246,.12);
 -webkit-backdrop-filter:blur(23px);backdrop-filter:blur(23px);
 color:#e6f5f6;
}
body > .bottom .city-dashboard{
 min-width:0;display:flex;flex-direction:column;gap:7px;
 padding:11px 13px 10px;
 border-radius:15px 0 0 15px;
 border-right:1px solid var(--deck-border);
 background:linear-gradient(165deg,rgba(24,64,72,.92),rgba(13,36,51,.92));
}
body > .bottom .dashboard-heading{
 display:flex;align-items:center;justify-content:space-between;gap:8px;
 min-height:29px;
}
body > .bottom .dashboard-title{display:flex;align-items:center;gap:9px;min-width:0}
body > .bottom .dashboard-mark{
 width:27px;height:27px;display:grid;place-items:center;flex:none;
 border-radius:9px;color:#8bffe9;background:#1a706f;
 border:1px solid rgba(149,245,228,.38);font-size:18px
}
body > .bottom .dashboard-title strong{display:block;font:800 13px/1.22 "Noto Sans Thai",Tahoma,sans-serif;color:#f5fffd}
body > .bottom .dashboard-title small{display:block;margin-top:2px;
 color:#8fbcbd;font:600 9px/1.1 Tahoma,sans-serif;letter-spacing:1.15px}
body > .bottom .dashboard-actions{display:flex;align-items:center;gap:4px}
body > .bottom .dashboard-actions button{
 width:29px;height:29px;display:grid;place-items:center;flex:none;
 border:1px solid #4c8290;border-radius:8px;
 background:rgba(41,82,92,.62);color:#e5f4f3;
 font:700 15px/1 Tahoma,sans-serif;touch-action:manipulation
}
body > .bottom .dashboard-actions button:hover{background:#2b7b7b}
body > .bottom .stats.dashboard-stats{
 display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));
 grid-template-rows:repeat(3,minmax(0,1fr));gap:5px;
 height:auto!important;min-height:133px;flex:1 1 auto;
 align-items:stretch;justify-content:stretch
}
body > .bottom .city-dashboard .city-metric{
 display:flex!important;position:relative;align-items:center;
 gap:7px;min-width:0;min-height:42px;max-width:none;
 padding:5px 8px!important;text-align:left!important;
 border:1px solid rgba(108,153,161,.28)!important;border-radius:9px;
 background:rgba(17,43,57,.8)!important;color:#e5f4f3!important;
 transition:background .15s,border-color .15s,transform .12s
}
body > .bottom .city-dashboard .city-metric:hover{
 background:rgba(38,82,94,.95)!important;border-color:rgba(105,219,207,.8)!important
}
body > .bottom .city-dashboard .city-metric:focus-visible{outline:2px solid #f4cf77;outline-offset:2px}
body > .bottom .city-dashboard .metric-money{
 grid-column:span 2;background:linear-gradient(110deg,rgba(30,77,78,.97),rgba(20,54,66,.94))!important;
 border-color:rgba(95,202,180,.4)!important
}
body > .bottom .city-dashboard .metric-icon{
 display:grid;place-items:center;flex:none;width:31px;height:31px;
 border-radius:8px;color:#7ce7dc;background:rgba(65,157,148,.16)
}
body > .bottom .city-dashboard .metric-icon svg{display:block;width:19px;height:19px}
body > .bottom .city-dashboard .metric-money .metric-icon{color:#f7d283;background:rgba(228,182,71,.14)}
body > .bottom .city-dashboard .metric-happiness .metric-icon{color:#9ee2a9;background:rgba(92,168,115,.13)}
body > .bottom .city-dashboard .metric-traffic .metric-icon{color:#92bdf0;background:rgba(89,148,203,.13)}
body > .bottom .city-dashboard .metric-text{
 display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto
}
body > .bottom .city-dashboard .city-metric small{
 display:block;color:#a9c6c9!important;
 font:600 10px/1.25 "Noto Sans Thai",Tahoma,sans-serif;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:0
}
body > .bottom .city-dashboard .city-metric strong{
 display:block;color:#f3fdfc!important;
 font:800 16px/1.2 "Noto Sans Thai",Tahoma,sans-serif;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
body > .bottom .city-dashboard .metric-money strong{font-size:20px;color:#ffe39d!important}
body > .bottom .city-dashboard .city-metric em{font-size:10px;color:#b7d3d5;font-style:normal;font-weight:600}
body > .bottom .city-dashboard .metric-arrow{
 flex:none;color:#80aeb5;font-size:18px;opacity:.72
}
body > .bottom .dashboard-clock{
 display:flex;align-items:center;justify-content:space-between;gap:7px;
 min-height:29px;padding:5px 8px;border-top:1px solid rgba(132,182,185,.21);
 border-radius:6px;background:rgba(7,22,32,.29)
}
body > .bottom .dashboard-clock .clock-caption{
 font:600 10px/1.2 "Noto Sans Thai",Tahoma,sans-serif;color:#96bbbd;white-space:nowrap
}
body > .bottom .city-dashboard .city-time-display{
 position:static!important;display:flex!important;align-items:center!important;
 justify-content:flex-end!important;gap:9px!important;
 margin:0!important;padding:0!important;max-width:none!important;
 border:0!important;border-radius:0!important;
 background:none!important;box-shadow:none!important;
 color:#e4f2f3!important;font:600 11px/1.25 "Noto Sans Thai",Tahoma,sans-serif!important
}
body > .bottom .city-dashboard .city-time-display strong{
 font:800 14px/1.2 "Noto Sans Thai",Tahoma,sans-serif!important;color:#f8d484!important
}
body > .bottom .builder-zone{
 display:flex;flex-direction:column;min-width:0;
 min-height:228px;padding:0 9px;
 border-radius:0 15px 15px 0;background:rgba(7,22,33,.45)
}
body > .bottom .builder-zone > .build-dock{
 display:flex!important;flex:1 1 auto;flex-direction:column;
 width:100%!important;min-width:0!important;max-width:none!important;
 margin:0!important;border:0!important;border-radius:0!important;
 overflow:visible!important;box-shadow:none!important;background:transparent!important;
 -webkit-backdrop-filter:none!important;backdrop-filter:none!important
}
body > .bottom .builder-zone .build-dock .dock-head{
 min-height:40px;padding:7px 3px 6px;
 border-bottom:1px solid rgba(132,177,181,.19)!important
}
body > .bottom .builder-zone .build-dock .dock-label{
 font-size:12px;color:#edfbfa;letter-spacing:.2px
}
body > .bottom .builder-zone .dock-logo{width:23px;height:23px;font-size:14px}
body > .bottom .builder-zone .build-dock .dock-current{font-size:10px}
body > .bottom .builder-zone .build-dock .dock-head button{min-height:28px;font-size:10px}
body > .bottom .builder-zone .build-dock .dock-body{
 display:flex!important;flex:1 1 auto;flex-direction:column!important;
 justify-content:flex-end;min-width:0;min-height:0;
}
body > .bottom .builder-zone .build-dock #categories{
 flex:1 1 auto;min-height:99px;max-height:none!important;
 margin:0;padding:8px 5px!important;align-items:stretch;overflow:visible
}
body > .bottom .builder-zone .build-dock #categories button{
 height:100%;min-height:79px;gap:8px;padding:9px 4px!important
}
body > .bottom .builder-zone .build-dock .dock-group-icon{font-size:29px}
body > .bottom .builder-zone .build-dock .dock-group-name{font-size:11px}
body > .bottom .builder-zone .build-dock .dock-context{
 display:block;flex:none;margin:5px 4px 2px;
 box-shadow:0 3px 16px #04121970
}
body > .bottom .builder-zone .build-dock.is-collapsed .dock-context{display:none!important}
body > .bottom .builder-zone .build-dock.is-collapsed .dock-body{display:flex!important}
body > .bottom .builder-zone > footer{
 display:flex!important;justify-content:center!important;align-items:center;
 width:100%!important;max-width:none!important;min-height:41px;
 padding:4px 5px;margin:0!important;gap:0;flex:none;
 border-top:1px solid rgba(132,177,181,.2)
}
body > .bottom .builder-zone > footer .playback{
 display:flex;align-items:center;justify-content:center;
 box-shadow:none;max-width:100%;
 background:rgba(25,59,70,.62);
 border-color:#426e78;border-radius:9px;
 padding:3px 5px
}
body > .bottom .builder-zone > footer .playback button{
 padding:5px clamp(5px,1.15vw,13px);font-size:11px
}
body > .bottom .builder-zone > footer :is(#status,.edition){display:none!important}
body > .map-tools{top:14px!important}
body > .city-panel{top:14px!important;max-height:40dvh!important}
body > .map-caption{top:16px!important}
/* iPad / laptop: preserve the 1:2 ratio, keeping the build zone centered
   within the whole viewport rather than pushed against the right edge. */
@media(max-width:1100px){
 body>.bottom{left:8px!important;right:8px!important;bottom:6px!important}
 body>.bottom>.control-deck{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
 body>.bottom .city-dashboard{gap:5px;padding:7px 8px}
 body>.bottom .city-dashboard .city-metric{gap:5px;padding:5px!important}
 body>.bottom .city-dashboard .metric-icon{width:25px;height:27px}
 body>.bottom .city-dashboard .metric-icon svg{width:17px;height:17px}
 body>.bottom .city-dashboard .city-metric strong{font-size:14px}
 body>.bottom .city-dashboard .metric-money strong{font-size:18px}
 body>.bottom .city-dashboard .city-metric small{font-size:9px}
 body>.bottom .city-dashboard .metric-arrow{display:none}
 body>.bottom .city-dashboard .city-time-display{gap:4px!important;font-size:9px!important}
 body>.bottom .builder-zone .build-dock .dock-head{padding:5px 2px}
 body>.bottom .builder-zone .build-dock #categories button{padding:6px 1px!important}
 body>.bottom .builder-zone .build-dock .dock-group-icon{font-size:24px}
 body>.bottom .builder-zone .build-dock .dock-group-name{font-size:10px}
 body>.bottom .builder-zone > footer .playback button{padding:4px 7px}
}
@media(max-width:680px){
 /* Phones have insufficient width for legible 1:2 columns; show a compact
    overview strip above build tools while retaining every click target. */
 body>.bottom{left:5px!important;right:5px!important;bottom:4px!important}
 body>.bottom>.control-deck{display:flex;flex-direction:column;min-height:0;border-radius:12px}
 body>.bottom .city-dashboard{
  padding:5px 6px;gap:4px;border-right:0;
  border-bottom:1px solid rgba(137,187,190,.3);
  border-radius:11px 11px 0 0
 }
 body>.bottom .dashboard-heading{min-height:23px}
 body>.bottom .dashboard-title strong{font-size:11px}
 body>.bottom .dashboard-title small{display:none}
 body>.bottom .dashboard-mark{width:20px;height:20px;font-size:13px}
 body>.bottom .dashboard-actions button{width:24px;height:24px;font-size:12px}
 body>.bottom .stats.dashboard-stats{
  grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:1fr!important;
  min-height:45px;gap:3px;flex:none
 }
 body>.bottom .city-dashboard .city-metric{
  grid-column:auto!important;min-height:46px;gap:2px;flex-direction:column;
  justify-content:center;padding:3px 1px!important;border-radius:6px
 }
 body>.bottom .city-dashboard .metric-icon{display:none}
 body>.bottom .city-dashboard .city-metric .metric-text{width:100%;text-align:center;flex:none}
 body>.bottom .city-dashboard .city-metric small{font-size:7.5px;line-height:1.35}
 body>.bottom .city-dashboard .city-metric strong{font-size:10px}
 body>.bottom .city-dashboard .metric-money strong{font-size:10px}
 body>.bottom .city-dashboard .city-metric em{font-size:7px}
 body>.bottom .dashboard-clock{min-height:19px;padding:1px 5px}
 body>.bottom .dashboard-clock .clock-caption{font-size:8px}
 body>.bottom .city-dashboard .city-time-display{font-size:9px!important}
 body>.bottom .city-dashboard .city-time-display strong{font-size:11px!important}
 body>.bottom .builder-zone{min-height:120px;padding:0 4px;border-radius:0 0 11px 11px}
 body>.bottom .builder-zone .build-dock .dock-head{min-height:26px;padding:3px 1px}
 body>.bottom .builder-zone .build-dock .dock-label{font-size:9px}
 body>.bottom .builder-zone .build-dock .dock-title-secondary{display:none}
 body>.bottom .builder-zone .build-dock .dock-current{font-size:9px}
 body>.bottom .builder-zone .build-dock .dock-head button{min-height:23px;font-size:9px;padding:3px 5px}
 body>.bottom .builder-zone .build-dock #categories{min-height:57px;padding:3px 2px!important}
 body>.bottom .builder-zone .build-dock #categories button{min-height:52px;gap:2px;padding:4px 0!important}
 body>.bottom .builder-zone .build-dock .dock-group-icon{font-size:19px}
 body>.bottom .builder-zone .build-dock .dock-group-name{font-size:9px;letter-spacing:-.35px}
 body>.bottom .builder-zone > footer{min-height:26px;padding:2px;border-radius:0 0 11px 11px}
 body>.bottom .builder-zone > footer .playback button{font-size:9px;padding:3px 7px}
 body>.bottom .builder-zone .build-dock .tools{max-height:74px}
 body>.city-panel{top:9px!important;max-height:23dvh!important}
 body>.map-tools{top:9px!important}
}
@media(max-height:530px) and (min-width:681px){
 body>.bottom>.control-deck{min-height:171px}
 body>.bottom .city-dashboard{gap:4px;padding:6px 8px}
 body>.bottom .stats.dashboard-stats{min-height:101px}
 body>.bottom .city-dashboard .city-metric{min-height:30px;padding:3px 5px!important}
 body>.bottom .city-dashboard .metric-icon{width:23px;height:23px}
 body>.bottom .city-dashboard .city-metric strong{font-size:12px}
 body>.bottom .builder-zone{min-height:171px}
 body>.bottom .builder-zone .build-dock #categories{min-height:66px}
 body>.bottom .builder-zone .build-dock #categories button{min-height:60px}
 body>.bottom .builder-zone .build-dock .dock-group-icon{font-size:22px}
 body>.bottom .builder-zone .build-dock .dock-group-name{font-size:9px}
}

/* SMGAME V6 — structural control-center rebuild.
   One connected deck, left status+demand, right build tools, centered on desktop/iPad.
   Expanded tool palette floats ABOVE the deck; opening it never resizes the city HUD. */
body > .bottom{left:0!important;right:0!important;bottom:12px!important;width:100%;zoom:1!important;z-index:22}
body > .bottom > .control-deck{
 display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,2fr)!important;
 align-items:stretch;gap:0;min-height:250px!important;
 width:min(1120px,calc(100vw - 80px))!important;max-width:none!important;
 margin:0 auto!important;transform:translateX(clamp(-80px,-5vw,0px));
 overflow:visible!important;isolation:isolate;
 border-radius:15px!important
}
body > .bottom .city-dashboard{
 display:flex!important;flex-direction:column;justify-content:space-between;
 padding:10px!important;gap:6px!important;min-height:0;
 border-radius:14px 0 0 14px!important
}
body > .bottom .city-dashboard .dashboard-heading{
 flex:0 0 auto;min-height:30px!important;
 padding-bottom:3px;border-bottom:1px solid rgba(139,196,201,.2)
}
body > .bottom .city-dashboard .stats.dashboard-stats{
 flex:0 0 auto;min-height:124px!important;
 grid-template-columns:repeat(2,minmax(0,1fr))!important;
 grid-template-rows:repeat(3,minmax(0,1fr))!important;
 gap:5px
}
body > .bottom .city-dashboard .city-metric{min-height:36px!important}
body > .bottom .city-dashboard .metric-money{
 grid-column:span 2!important;
 padding:5px 11px!important
}
body > .bottom .city-dashboard .dashboard-clock{
 flex:0 0 auto;min-height:27px;order:3;padding:4px 7px
}
body > .bottom .city-dashboard .dashboard-needs{order:2;min-height:48px;flex:1 1 auto}
body > .bottom .city-dashboard .city-demand-panel{
 display:block!important;position:relative!important;
 inset:auto!important;top:auto!important;left:auto!important;right:auto!important;
 width:100%!important;max-width:100%!important;max-height:72px!important;
 min-height:40px!important;margin:0!important;padding:5px 8px!important;
 overflow-y:auto!important;overflow-x:hidden!important;
 zoom:1!important;box-shadow:none!important;backdrop-filter:none!important;
 border:1px solid rgba(110,175,180,.32)!important;border-radius:9px!important;
 background:rgba(7,23,33,.45)!important;color:#e2f3f5;
 scrollbar-width:thin
}
body > .bottom .city-dashboard .city-demand-panel .eyebrow{
 font-size:9px;letter-spacing:.6px;color:#97cecb;line-height:1.25;
 position:sticky;top:-5px;padding:2px 0;background:#102b37
}
body > .bottom .city-dashboard .city-demand-panel .eyebrow button{
 color:#9be4db!important;padding:1px 5px!important;font-size:17px
}
body > .bottom .city-dashboard .city-demand-panel .section-label{
 margin:2px 0 4px!important;font-size:10px!important;color:#dff4f1!important
}
body > .bottom .city-dashboard .city-demand-panel .tiny{display:none}
body > .bottom .city-dashboard .city-demand-panel .panel-content{
 margin:0!important;padding:0!important;line-height:1.3
}
body > .bottom .city-dashboard .city-demand-panel .demand-row{
 font-size:10px!important;padding:3px 0!important
}
body > .bottom .city-dashboard .city-demand-panel.collapsed{
 min-height:27px!important;max-height:29px!important;overflow:hidden!important
}
body > .bottom .city-dashboard .city-demand-panel.collapsed .panel-content{
 display:none!important
}
body > .bottom .builder-zone{
 display:flex!important;flex-direction:column;justify-content:space-between;
 padding:0 9px!important;min-height:250px!important;
 border-radius:0 14px 14px 0!important
}
body > .bottom .builder-zone .build-dock{position:relative!important;min-height:0}
body > .bottom .builder-zone .build-dock .dock-head{
 min-height:39px!important;padding:6px 6px!important;
 justify-content:space-between
}
body > .bottom .builder-zone .build-dock .dock-body{
 display:flex!important;flex-direction:column!important;justify-content:center!important;
 flex:1 1 auto;min-height:108px!important;
}
body > .bottom .builder-zone .build-dock #categories{
 display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;
 align-items:stretch;justify-content:space-evenly;min-height:94px!important;
 flex:0 0 auto!important;gap:8px!important;
 width:min(610px,100%);max-width:100%;margin:0 auto!important;padding:8px 3px!important;
}
body > .bottom .builder-zone .build-dock #categories button{
 display:flex;flex-direction:column;justify-content:center;align-items:center;
 min-height:78px!important;height:auto!important;
 border-radius:10px!important;padding:6px 5px!important;gap:5px!important
}
body > .bottom .builder-zone .build-dock .dock-group-icon{font-size:29px!important}
body > .bottom .builder-zone .build-dock .dock-group-name{
 font-size:11px!important;line-height:1.2!important
}
body > .bottom .builder-zone .build-dock .dock-context{
 position:absolute!important;inset:auto 6px calc(100% + 10px) 6px!important;
 display:block;z-index:32!important;
 margin:0!important;padding:0!important;min-width:0;
 overflow:hidden!important;max-height:min(36dvh,260px);
 border:1px solid #72b1b3!important;border-radius:12px!important;
 background:rgba(9,28,40,.985)!important;
 box-shadow:0 12px 35px #07131fc9,0 1px 0 #bad9d935 inset!important;
}
body > .bottom .builder-zone .build-dock.is-collapsed .dock-context{display:none!important}
body > .bottom .builder-zone .dock-context-heading{
 display:flex;justify-content:space-between;align-items:center;gap:8px;
 padding:7px 10px;border-bottom:1px solid #50748170
}
body > .bottom .builder-zone .dock-context-heading strong{color:#f3fff9;font-size:12px}
body > .bottom .builder-zone .dock-context-heading span{color:#9ebec4;font-size:10px}
body > .bottom .builder-zone .dock-context #subcategories{
 padding:4px 8px;gap:5px;min-height:34px
}
body > .bottom .builder-zone .dock-context .tools{
 display:flex;gap:9px;padding:9px 10px 12px;
 min-height:92px!important;max-height:130px!important;
 align-items:stretch
}
body > .bottom .builder-zone .dock-context .tool{
 flex:0 0 auto;min-width:100px!important;max-width:130px;
 min-height:82px!important;gap:4px
}
body > .bottom .builder-zone .dock-context .tool strong{font-size:11px}
body > .bottom .builder-zone > footer{
 flex:0 0 auto;min-height:39px!important;
 padding:3px 0!important;margin:0!important
}
body > .bottom .builder-zone > footer .playback button{min-width:31px}
body > .map-tools{top:14px!important}
/* Laptop and iPad landscape: the entire deck moves to the left of the
   midpoint so the build zone itself lands close to the screen center. */
@media(min-width:721px) and (max-width:1199px){
 body > .bottom > .control-deck{
  width:min(980px,calc(100vw - 132px))!important;
  transform:translateX(clamp(-85px,-7vw,0px))
 }
 body > .bottom .city-dashboard{padding:7px!important;gap:4px!important}
 body > .bottom .city-dashboard .city-metric{
  padding:3px 5px!important;min-height:32px!important
 }
 body > .bottom .city-dashboard .city-metric small{font-size:9px}
 body > .bottom .city-dashboard .city-metric strong{font-size:13px}
 body > .bottom .city-dashboard .metric-money strong{font-size:16px}
 body > .bottom .city-dashboard .metric-icon{width:24px;height:25px}
 body > .bottom .city-dashboard .metric-icon svg{width:16px;height:16px}
 body > .bottom .city-dashboard .city-demand-panel{max-height:63px!important}
 body > .bottom .builder-zone .build-dock #categories{gap:3px!important}
 body > .bottom .builder-zone .build-dock #categories button{padding:5px 1px!important}
 body > .bottom .builder-zone .build-dock .dock-group-icon{font-size:22px!important}
 body > .bottom .builder-zone .build-dock .dock-group-name{font-size:9.5px!important}
 body > .bottom .builder-zone .build-dock .dock-label{font-size:10px}
 body > .bottom .builder-zone .dock-context-heading span{display:none}
}
@media(max-width:720px){
 body > .bottom{left:4px!important;right:4px!important;width:auto;bottom:4px!important}
 body > .bottom > .control-deck{
  display:flex!important;flex-direction:column!important;
  width:100%!important;min-height:0!important;transform:none!important
 }
 body > .bottom .city-dashboard{padding:5px!important;gap:3px!important;border-radius:11px 11px 0 0!important}
 body > .bottom .city-dashboard .stats.dashboard-stats{
  display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;
  grid-template-rows:1fr!important;min-height:40px!important;gap:3px
 }
 body > .bottom .city-dashboard .city-metric{grid-column:auto!important;min-height:38px!important}
 body > .bottom .city-dashboard .metric-money strong{font-size:10px}
 body > .bottom .city-dashboard .dashboard-needs{display:none!important}
 body > .bottom .city-dashboard .dashboard-clock{min-height:18px!important}
 body > .bottom .builder-zone{min-height:114px!important;padding:0 3px!important}
 body > .bottom .builder-zone .build-dock .dock-body{min-height:48px!important}
 body > .bottom .builder-zone .build-dock #categories{
  min-height:50px!important;padding:3px 0!important;gap:2px!important
 }
 body > .bottom .builder-zone .build-dock #categories button{min-height:46px!important;padding:3px 0!important;gap:2px!important}
 body > .bottom .builder-zone .build-dock .dock-group-icon{font-size:19px!important}
 body > .bottom .builder-zone .build-dock .dock-group-name{font-size:8px!important}
 body > .bottom .builder-zone .dock-context-heading span{display:none}
 body > .bottom .builder-zone .build-dock .dock-context{
  left:2px!important;right:2px!important;bottom:calc(100% + 3px)!important;
  max-height:40dvh!important
 }
 body > .bottom .builder-zone .dock-context .tools{max-height:76px!important;min-height:62px!important;padding:5px}
 body > .bottom .builder-zone .dock-context .tool{min-width:78px!important;min-height:55px!important}
 body > .bottom .builder-zone > footer{min-height:27px!important}
}

/* SMGAME WHITE V7: restore original light palette, compact unboxed category icons,
   put live day/date/time in toolbar header, center the actual construction tools. */
body > .bottom{
 --ui-w-paper:#f9fcf8;--ui-w-line:#dce9df;--ui-w-ink:#183f3d;
 --ui-w-muted:#6a857f;--ui-w-mint:#4faaa0;--ui-w-soft:#e6f3ee;
 bottom:9px!important;left:0!important;right:0!important;zoom:1!important
}
body > .bottom > .control-deck{
 display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,2fr)!important;
 width:min(1000px,75vw)!important;
 min-height:168px!important;max-width:none!important;
 margin:0 auto!important;
 transform:translateX(calc(-1 * min(166.667px,12.5vw)))!important;
 background:rgba(251,253,249,.97)!important;
 border:1px solid #fff!important;border-radius:14px!important;
 box-shadow:0 11px 31px #163c3845!important;
 color:var(--ui-w-ink)!important
}
body > .bottom .city-dashboard{
 min-height:0!important;gap:5px!important;padding:8px 10px!important;
 background:rgba(242,249,245,.98)!important;
 color:var(--ui-w-ink)!important;border-right:1px solid #dbe9e0!important
}
body > .bottom .dashboard-heading{min-height:22px!important;padding:0 0 3px!important;border-bottom:1px solid #d8e7dd}
body > .bottom .dashboard-mark{
 width:20px!important;height:20px!important;
 color:#297869!important;background:#e2f3e9!important;
 border-color:#cce2d6!important;font-size:13px!important;border-radius:6px
}
body > .bottom .dashboard-title{gap:5px!important}
body > .bottom .dashboard-title strong{color:#1c4b42!important;font-size:12px!important}
body > .bottom .dashboard-title small{color:#81968d!important;font-size:8px!important}
body > .bottom .dashboard-actions button{
 width:22px!important;height:22px!important;border-radius:6px!important;
 color:#376354!important;background:#edf5ef!important;
 border:1px solid #d6e4d8!important;font-size:12px!important;
}
body > .bottom .dashboard-actions button:hover{background:#dceee1!important}
body > .bottom .stats.dashboard-stats{
 display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
 grid-template-rows:repeat(3,minmax(0,1fr))!important;
 min-height:101px!important;max-height:none!important;gap:1px 6px!important;
 flex:0 0 auto!important;background:none!important
}
body > .bottom .city-dashboard .city-metric{
 display:flex!important;flex-direction:row!important;justify-content:flex-start!important;
 align-items:center!important;gap:5px!important;min-height:30px!important;
 padding:2px!important;border:0!important;border-radius:0!important;
 background:transparent!important;box-shadow:none!important;
 color:#244a43!important;text-align:left!important;transform:none!important
}
body > .bottom .city-dashboard .city-metric:hover{
 background:#e5f2eb!important;color:#164739!important
}
body > .bottom .city-dashboard .metric-money{
 grid-column:span 2!important;background:transparent!important;
 border-bottom:1px solid #d5e6d9!important;
 padding-bottom:3px!important;
}
body > .bottom .city-dashboard .metric-icon{
 width:21px!important;height:21px!important;border-radius:0!important;
 background:none!important;color:#568d7b!important
}
body > .bottom .city-dashboard .metric-icon svg{width:17px!important;height:17px!important}
body > .bottom .city-dashboard .metric-money .metric-icon{color:#b68832!important;background:none!important}
body > .bottom .city-dashboard .metric-happiness .metric-icon{color:#58a069!important;background:none!important}
body > .bottom .city-dashboard .metric-traffic .metric-icon{color:#5c95a4!important;background:none!important}
body > .bottom .city-dashboard .metric-text{gap:0!important;flex:1 1 auto!important;min-width:0!important}
body > .bottom .city-dashboard .city-metric small{
 color:#6d877e!important;font-size:9px!important;line-height:1.1!important
}
body > .bottom .city-dashboard .city-metric strong{
 color:#205144!important;font-size:14px!important;line-height:1.25!important;font-weight:800!important
}
body > .bottom .city-dashboard .metric-money strong{color:#a97924!important;font-size:16px!important}
body > .bottom .city-dashboard .city-metric em{color:#798e87!important;font-size:9px!important}
body > .bottom .city-dashboard .metric-arrow{display:none!important}
body > .bottom .city-dashboard .dashboard-needs{
 flex:1 1 auto!important;order:2!important;min-height:0!important;max-height:44px!important
}
body > .bottom .city-dashboard .city-demand-panel{
 zoom:1!important;position:relative!important;
 width:100%!important;max-width:none!important;min-height:29px!important;max-height:42px!important;
 margin:0!important;padding:4px 7px!important;
 background:#f1f7f1!important;border:1px solid #dbe9dc!important;
 border-radius:7px!important;color:#315d4e!important;box-shadow:none!important
}
body > .bottom .city-dashboard .city-demand-panel .eyebrow{
 position:sticky;top:-4px;background:#f1f7f1!important;
 color:#487a62!important;font-size:9px!important;padding:0!important
}
body > .bottom .city-dashboard .city-demand-panel .eyebrow button{color:#50785d!important}
body > .bottom .city-dashboard .city-demand-panel .section-label{color:#426e54!important;font-size:9px!important}
body > .bottom .city-dashboard .city-demand-panel .demand-row{color:#315b4f!important;font-size:9px!important}
body > .bottom .city-dashboard .city-demand-panel.collapsed{
 max-height:27px!important;min-height:26px!important
}
body > .bottom .city-dashboard .dashboard-clock{display:none!important}
body > .bottom .builder-zone{
 min-height:168px!important;padding:0 7px!important;
 background:#fffefa!important;color:#254a3d!important
}
body > .bottom .builder-zone > .build-dock{
 background:transparent!important;box-shadow:none!important;
 border:0!important;color:#24483e!important
}
body > .bottom .builder-zone .build-dock .dock-head{
 display:flex!important;align-items:center!important;
 min-height:38px!important;padding:4px 7px!important;
 border-bottom:1px solid #dfebdf!important;gap:8px!important
}
body > .bottom .builder-zone .dock-clock{
 flex:1 1 auto;display:flex;align-items:center;gap:12px;min-width:0;
 color:#426e5e!important;font-size:12px!important;font-weight:650!important;
 white-space:nowrap;overflow:hidden;
}
body > .bottom .builder-zone .dock-clock span{
 display:block;min-width:0;overflow:hidden;text-overflow:ellipsis
}
body > .bottom .builder-zone .dock-clock strong{
 flex:none;color:#1a6558!important;font-size:21px!important;
 letter-spacing:.25px;line-height:1.2;font-weight:800
}
body > .bottom .builder-zone .build-dock .dock-head button{
 background:#eef6ef!important;color:#416959!important;
 border:1px solid #d6e7d7!important;border-radius:7px!important;
 font-size:10px!important;min-height:25px!important;
 padding:3px 7px!important
}
body > .bottom .builder-zone .build-dock .dock-head button.explore-city{
 background:#dff3e8!important;color:#22684f!important;
 border-color:#b3ddc5!important
}
body > .bottom .builder-zone .build-dock .dock-head button:hover{background:#d3ebdc!important}
body > .bottom .builder-zone .build-dock .dock-body{
 display:flex!important;flex-direction:column!important;justify-content:center!important;
 flex:1 1 auto!important;min-height:50px!important
}
body > .bottom .builder-zone .build-dock #categories{
 display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;
 align-items:center!important;justify-content:center!important;gap:0!important;
 width:min(480px,100%)!important;min-height:50px!important;max-height:58px!important;
 margin:0 auto!important;padding:3px 3px!important;
 background:transparent!important;border:0!important;box-shadow:none!important
}
body > .bottom .builder-zone .build-dock #categories button{
 position:relative!important;display:flex!important;align-items:center!important;
 justify-content:center!important;flex-direction:column!important;
 height:49px!important;min-height:49px!important;max-height:49px!important;
 padding:2px 2px 5px!important;margin:0!important;gap:2px!important;
 background:transparent!important;border:0!important;
 color:#57786b!important;box-shadow:none!important;border-radius:0!important;
 transition:color .15s,background .15s!important
}
body > .bottom .builder-zone .build-dock #categories button:hover:not(.active){
 background:#edf6ef!important;color:#2d694e!important;
}
body > .bottom .builder-zone .build-dock #categories button.active{
 background:transparent!important;border:0!important;
 color:#1f6954!important;box-shadow:none!important
}
body > .bottom .builder-zone .build-dock #categories button.active::after{
 content:"";position:absolute;bottom:0;left:32%;right:32%;height:3px;
 border-radius:8px;background:#4ca783
}
body > .bottom .builder-zone .build-dock .dock-group-icon{
 display:block!important;font-size:21px!important;line-height:1.1!important;
 filter:none!important
}
body > .bottom .builder-zone .build-dock .dock-group-name{
 font-size:9px!important;line-height:1.15!important;font-weight:700!important;
 white-space:nowrap!important;color:inherit!important
}
body > .bottom .builder-zone > footer{
 min-height:34px!important;padding:3px 0!important;
 margin:0!important;border-top:1px solid #e3ece1!important
}
body > .bottom .builder-zone > footer .playback{
 background:#f3f8f1!important;border:1px solid #d5e4d6!important;
 box-shadow:none!important;color:#497363!important
}
body > .bottom .builder-zone > footer .playback button{
 color:#426557!important;font-size:10px!important;padding:3px 8px!important
}
body > .bottom .builder-zone > footer .playback button.active{
 background:#2c745b!important;color:#fff!important;border-radius:6px!important
}
body > .bottom .builder-zone .build-dock .dock-context{
 background:#fffffc!important;color:#254738!important;
 border:1px solid #d4e5d7!important;box-shadow:0 8px 25px #29483b36!important;
 border-radius:11px!important
}
body > .bottom .builder-zone .dock-context-heading{
 background:#f5faf3!important;border-bottom:1px solid #e1ebdf!important;
}
body > .bottom .builder-zone .dock-context-heading strong{
 color:#235546!important;font-size:12px!important
}
body > .bottom .builder-zone .dock-context-heading span{
 color:#79988a!important;font-size:10px!important
}
body > .bottom .builder-zone .dock-context #subcategories{
 background:#f6faf5!important;border-bottom:1px solid #e1ebe1!important
}
body > .bottom .builder-zone .dock-context #subcategories button{
 background:transparent!important;color:#5b7b69!important;border:1px solid transparent!important
}
body > .bottom .builder-zone .dock-context #subcategories button:hover{
 background:#e6f2e8!important;color:#235841!important
}
body > .bottom .builder-zone .dock-context #subcategories button.active{
 background:#2f896a!important;border:1px solid #2f896a!important;
 color:#fff!important
}
body > .bottom .builder-zone .dock-context .tools{
 background:#fffffc!important;gap:8px!important;min-height:85px!important;
 padding:8px 10px 10px!important
}
body > .bottom .builder-zone .dock-context .tool{
 background:#f3f9f1!important;color:#315e4d!important;
 border:1px solid #d7e7d7!important;box-shadow:none!important;
 min-width:94px!important;min-height:73px!important;border-radius:8px!important
}
body > .bottom .builder-zone .dock-context .tool:hover{
 background:#e5f3e4!important;border-color:#83baa1!important
}
body > .bottom .builder-zone .dock-context .tool.active{
 background:#d7efe1!important;border-color:#3b9a73!important;
 color:#185942!important;box-shadow:0 0 0 1px #6fbea0 inset!important
}
body > .bottom .builder-zone .dock-context .tool-icon{
 color:#397b60!important;background:transparent!important;
 font-size:23px!important;width:29px!important;height:27px!important
}
body > .bottom .builder-zone .dock-context .tool strong{color:#245c45!important;font-size:11px!important}
body > .bottom .builder-zone .dock-context .tool .tool-price{color:#638e71!important}
body > .map-tools{
 background:rgba(253,255,249,.97)!important;border:1px solid #fff!important;
 box-shadow:0 5px 18px #224f3930!important
}
body > .map-tools .map-account{background:#ecf4e9!important;color:#2a5946!important}
body > .map-tools .map-utility{color:#335b4e!important}
body > .map-tools .map-utility:hover{background:#e5f1e6!important}
body > .map-tools .map-utility.active{color:#fff!important;background:#2e8261!important}
body > .map-caption{color:#4f7c72!important}
/* Desktop + iPad landscape: keep the build menu visually centered on the viewport. */
@media(min-width:721px) and (max-width:1199px){
 body > .bottom > .control-deck{
  width:min(1000px,75vw)!important;
  transform:translateX(calc(-1 * min(166.667px,12.5vw)))!important
 }
 body > .bottom .city-dashboard{padding:5px!important;gap:3px!important}
 body > .bottom .city-dashboard .stats.dashboard-stats{min-height:99px!important}
 body > .bottom .city-dashboard .city-metric{min-height:28px!important}
 body > .bottom .city-dashboard .metric-icon{width:19px!important;height:19px!important}
 body > .bottom .city-dashboard .metric-icon svg{width:15px!important;height:15px!important}
 body > .bottom .city-dashboard .city-metric small{font-size:8px!important}
 body > .bottom .city-dashboard .city-metric strong{font-size:12px!important}
 body > .bottom .city-dashboard .metric-money strong{font-size:13px!important}
 body > .bottom .builder-zone .dock-clock{font-size:10px!important;gap:6px}
 body > .bottom .builder-zone .dock-clock strong{font-size:18px!important}
 body > .bottom .builder-zone .build-dock .dock-head{gap:5px!important}
 body > .bottom .builder-zone .build-dock .dock-head button{
  font-size:9px!important;padding:2px 5px!important
 }
 body > .bottom .builder-zone .build-dock .dock-group-icon{font-size:20px!important}
 body > .bottom .builder-zone .build-dock .dock-group-name{font-size:9px!important}
 body > .bottom .builder-zone > footer .playback button{padding:3px 5px!important}
}
@media(max-width:720px){
 body > .bottom > .control-deck{
  display:flex!important;flex-direction:column!important;
  width:100%!important;transform:none!important;min-height:0!important
 }
 body > .bottom .city-dashboard{padding:4px 6px!important;gap:3px!important}
 body > .bottom .stats.dashboard-stats{
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  grid-template-rows:1fr!important;min-height:40px!important;gap:1px!important
 }
 body > .bottom .city-dashboard .city-metric{
  grid-column:auto!important;min-height:38px!important;
  flex-direction:column!important;gap:1px!important;align-items:center!important
 }
 body > .bottom .city-dashboard .city-metric .metric-text{text-align:center!important}
 body > .bottom .city-dashboard .city-metric small{font-size:8px!important}
 body > .bottom .city-dashboard .city-metric strong{font-size:10px!important}
 body > .bottom .city-dashboard .metric-money strong{font-size:10px!important}
 body > .bottom .city-dashboard .metric-icon{display:none!important}
 body > .bottom .city-dashboard .dashboard-needs{display:none!important}
 body > .bottom .builder-zone{min-height:107px!important;padding:0 3px!important}
 body > .bottom .builder-zone .build-dock .dock-head{
  min-height:33px!important;padding:3px 4px!important;gap:4px!important
 }
 body > .bottom .builder-zone .dock-clock{font-size:9px!important;gap:5px!important}
 body > .bottom .builder-zone .dock-clock strong{font-size:16px!important}
 body > .bottom .builder-zone .build-dock .dock-head button{
  min-height:23px!important;font-size:9px!important;padding:2px 3px!important
 }
 body > .bottom .builder-zone .build-dock #categories{
  width:100%!important;min-height:46px!important;max-height:48px!important
 }
 body > .bottom .builder-zone .build-dock #categories button{
  min-height:43px!important;height:43px!important;max-height:43px!important
 }
 body > .bottom .builder-zone .build-dock .dock-group-icon{font-size:18px!important}
 body > .bottom .builder-zone .build-dock .dock-group-name{font-size:8px!important}
 body > .bottom .builder-zone > footer{min-height:27px!important}
 body > .bottom .builder-zone .dock-context .tools{min-height:66px!important}
}

/* SMGAME V8 — ONE BOX ONLY.
   Header: calendar, clock and speed. Middle: category tools. Bottom: five category icons.
   Critical: no construction palette is absolutely/fixed positioned outside .control-deck. */
body>.bottom{bottom:8px!important}
body>.bottom>.control-deck{
 --ui-v8-border:#e1e9df;
 display:grid!important;
 grid-template-columns:minmax(0,1fr) minmax(0,2fr)!important;
 min-height:205px!important;
 overflow:hidden!important;
 background:#fafdf9!important;border:1px solid #e3ede6!important;
 box-shadow:0 9px 25px #16403739!important;
}
body>.bottom .city-dashboard{
 height:100%!important;min-height:0!important;overflow:hidden!important;
 padding:7px 9px!important;gap:3px!important;
 border-radius:12px 0 0 12px!important
}
body>.bottom .city-dashboard .dashboard-heading{min-height:22px!important}
body>.bottom .city-dashboard .stats.dashboard-stats{
 min-height:102px!important;flex:0 0 auto!important;
 grid-template-columns:repeat(2,minmax(0,1fr))!important;
 grid-template-rows:repeat(3,minmax(0,1fr))!important
}
body>.bottom .city-dashboard .city-metric{min-height:27px!important;padding:2px!important}
body>.bottom .city-dashboard .dashboard-needs{
 flex:1 1 auto!important;min-height:0!important;
 max-height:51px!important;overflow:hidden!important
}
body>.bottom .city-dashboard .city-demand-panel{
 max-height:48px!important;min-height:29px!important;
 overflow-y:auto!important;overflow-x:hidden!important
}
body>.bottom .builder-zone{
 height:100%!important;min-height:205px!important;
 display:flex!important;flex-direction:column!important;
 padding:0 8px!important;overflow:hidden!important;
 border-radius:0 12px 12px 0!important
}
body>.bottom .builder-zone>.build-dock{
 display:flex!important;flex-direction:column!important;
 flex:1 1 auto!important;min-height:0!important;
 overflow:hidden!important
}
body>.bottom .builder-zone .build-dock .dock-head{
 display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;
 align-items:center!important;gap:5px!important;
 min-height:45px!important;max-height:none!important;
 padding:4px 3px!important;
 flex:0 0 auto!important;
 overflow:visible!important;
 background:#fafdf9!important;
 border-bottom:1px solid var(--ui-v8-border)!important
}
body>.bottom .builder-zone .dock-timebar{
 display:flex!important;align-items:center!important;
 flex:1 1 auto!important;gap:8px!important;
 min-width:0!important;max-width:100%!important
}
body>.bottom .builder-zone .dock-clock{
 display:flex!important;align-items:center!important;gap:7px!important;
 flex:0 0 auto!important;min-width:0!important;
 font-size:10px!important;color:#547a6a!important
}
body>.bottom .builder-zone .dock-clock span{
 flex:0 1 auto!important;overflow:hidden!important;
 white-space:nowrap!important;text-overflow:ellipsis!important
}
body>.bottom .builder-zone .dock-clock strong{
 font-size:19px!important;color:#176e57!important;
 font-weight:800!important;letter-spacing:0!important;white-space:nowrap
}
body>.bottom .builder-zone .dock-speed{
 display:flex!important;align-items:center!important;
 min-width:0!important;max-width:100%!important;flex:0 1 auto!important;
 margin:0!important;padding:0!important;overflow:hidden!important
}
body>.bottom .builder-zone .dock-speed .playback{
 display:flex!important;align-items:center!important;gap:1px!important;
 margin:0!important;padding:2px!important;max-width:100%!important;
 background:#f0f6ee!important;border:1px solid #d7e5d7!important;
 border-radius:7px!important;box-shadow:none!important
}
body>.bottom .builder-zone .dock-speed .playback button{
 display:block!important;flex:0 0 auto!important;min-width:0!important;
 padding:3px 5px!important;font-size:10px!important;line-height:1.3!important;
 white-space:nowrap!important;border-radius:5px!important;
 background:transparent!important;color:#416b56!important
}
body>.bottom .builder-zone .dock-speed .playback button.active{
 background:#368166!important;color:white!important;font-weight:800!important
}
body>.bottom .builder-zone .dock-speed #pause{font-size:13px!important}
body>.bottom .builder-zone .dock-speed #skip{
 border-left:1px solid #d5e5d7!important;margin-left:2px!important;
 padding-left:6px!important
}
body>.bottom .builder-zone .dock-speed #status,
body>.bottom .builder-zone .dock-speed .edition{display:none!important}
body>.bottom .builder-zone .build-dock .dock-head>button{
 flex:0 0 auto!important;
 min-height:26px!important;padding:3px 6px!important;
 font-size:9px!important
}
/* Dock never pushes overlays outside the shared frame */
body>.bottom .builder-zone .build-dock .dock-body{
 display:flex!important;flex-direction:column!important;
 justify-content:stretch!important;
 flex:1 1 auto!important;min-height:0!important;
 overflow:hidden!important;
 background:transparent!important
}
/* The selected category replaces the old middle icon block INSIDE the box. */
body>.bottom .builder-zone .build-dock .dock-context{
 position:relative!important;inset:auto!important;
 top:auto!important;bottom:auto!important;left:auto!important;right:auto!important;
 z-index:auto!important;order:0!important;
 display:flex!important;flex-direction:column!important;
 flex:1 1 auto!important;min-height:85px!important;
 width:100%!important;max-width:100%!important;
 max-height:none!important;margin:5px 0 2px!important;
 border:1px solid #d8e6d8!important;border-radius:9px!important;
 background:#f5faf4!important;box-shadow:none!important;
 overflow:hidden!important;transform:none!important
}
body>.bottom .builder-zone .build-dock.is-collapsed .dock-context{
 display:none!important
}
body>.bottom .builder-zone .dock-context-heading{
 display:flex!important;align-items:center!important;justify-content:space-between!important;
 flex:0 0 auto!important;
 min-height:23px!important;padding:3px 8px!important;
 background:#edf6ec!important;border-bottom:1px solid #d7e8d7!important
}
body>.bottom .builder-zone .dock-context-heading strong{
 font-size:10px!important;color:#2b644c!important
}
body>.bottom .builder-zone .dock-context-heading span{
 display:block!important;font-size:9px!important;color:#749281!important;
 white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important
}
body>.bottom .builder-zone .dock-context #subcategories{
 display:flex!important;align-items:center!important;
 gap:3px!important;min-height:27px!important;max-height:30px!important;
 margin:0!important;padding:2px 6px!important;
 flex:0 0 auto!important;overflow-x:auto!important;overflow-y:hidden!important;
 scrollbar-width:thin!important;border-bottom:1px solid #dfecdd!important
}
body>.bottom .builder-zone .dock-context #subcategories[hidden]{display:none!important}
body>.bottom .builder-zone .dock-context #subcategories button{
 padding:3px 7px!important;min-height:21px!important;
 font-size:9px!important;white-space:nowrap!important
}
body>.bottom .builder-zone .dock-context .tools{
 display:flex!important;align-items:stretch!important;
 flex:1 1 auto!important;min-height:54px!important;max-height:none!important;
 padding:5px 7px!important;gap:5px!important;
 overflow-x:auto!important;overflow-y:hidden!important;
 scrollbar-width:thin!important
}
body>.bottom .builder-zone .dock-context .tool{
 display:flex!important;flex-direction:column!important;
 flex:0 0 79px!important;min-width:79px!important;max-width:95px!important;
 min-height:51px!important;height:auto!important;
 padding:4px 3px!important;gap:2px!important;
 background:#fff!important;border:1px solid #d9e8d8!important;
 color:#315b4b!important;border-radius:7px!important;box-shadow:none!important
}
body>.bottom .builder-zone .dock-context .tool.active{
 background:#e0f3e7!important;border-color:#469f76!important
}
body>.bottom .builder-zone .dock-context .tool-icon{
 width:21px!important;height:21px!important;font-size:19px!important
}
body>.bottom .builder-zone .dock-context .tool strong{
 font-size:9px!important;line-height:1.2!important
}
body>.bottom .builder-zone .dock-context .tool .tool-price{
 display:block!important;font-size:8px!important;line-height:1.1!important
}
/* Primary five icons remain as a small fixed bottom strip */
body>.bottom .builder-zone .build-dock #categories{
 display:grid!important;
 grid-template-columns:repeat(5,minmax(0,1fr))!important;
 justify-content:center!important;align-items:center!important;
 order:1!important;flex:0 0 43px!important;
 width:min(470px,100%)!important;max-width:100%!important;
 min-height:43px!important;max-height:43px!important;
 margin:0 auto!important;padding:0!important;
 border-top:1px solid #e3eee2!important;border-bottom:0!important;
 background:transparent!important;box-shadow:none!important;
 overflow:visible!important
}
body>.bottom .builder-zone .build-dock #categories button{
 display:flex!important;justify-content:center!important;align-items:center!important;
 flex-direction:column!important;gap:1px!important;
 min-height:41px!important;max-height:41px!important;height:41px!important;
 padding:1px!important;margin:0!important;
 border:0!important;border-radius:0!important;
 background:transparent!important;color:#58786a!important;
 box-shadow:none!important
}
body>.bottom .builder-zone .build-dock #categories button.active{
 background:transparent!important;border:0!important;
 color:#23835e!important;box-shadow:none!important
}
body>.bottom .builder-zone .build-dock .dock-group-icon{
 font-size:18px!important;line-height:1.1!important
}
body>.bottom .builder-zone .build-dock .dock-group-name{
 font-size:8.5px!important;line-height:1.15!important;
 white-space:nowrap!important;letter-spacing:-.1px!important
}
body>.bottom .builder-zone .build-dock.is-collapsed .dock-body{display:flex!important}
/* On mid-size iPads, keep clock and speed in the same internal top area
   without overflowing or detaching from the single control frame. */
@media(min-width:721px) and (max-width:1100px){
 body>.bottom>.control-deck{min-height:207px!important}
 body>.bottom .builder-zone{min-height:207px!important;padding:0 5px!important}
 body>.bottom .builder-zone .build-dock .dock-head{
  flex-wrap:wrap!important;gap:2px 5px!important;
  min-height:53px!important;padding:3px 2px!important
 }
 body>.bottom .builder-zone .dock-timebar{order:0!important;flex:1 1 100%!important;gap:5px!important}
 body>.bottom .builder-zone .dock-clock{gap:4px!important;font-size:9px!important}
 body>.bottom .builder-zone .dock-clock strong{font-size:16px!important}
 body>.bottom .builder-zone .dock-speed .playback button{padding:2px 4px!important;font-size:9px!important}
 body>.bottom .builder-zone .build-dock .dock-head>button{
  order:1!important;padding:2px 6px!important;min-height:19px!important;
  font-size:9px!important
 }
 body>.bottom .builder-zone .dock-context-heading span{font-size:8px!important}
 body>.bottom .builder-zone .build-dock #categories{flex-basis:40px!important;min-height:40px!important;max-height:40px!important}
 body>.bottom .builder-zone .build-dock #categories button{min-height:39px!important;max-height:39px!important;height:39px!important}
}
@media(max-width:720px){
 body>.bottom>.control-deck{
  display:flex!important;flex-direction:column!important;
  min-height:0!important;overflow:hidden!important
 }
 body>.bottom .city-dashboard{max-height:88px!important;min-height:0!important}
 body>.bottom .builder-zone{
  min-height:167px!important;height:auto!important;
  padding:0 4px!important
 }
 body>.bottom .builder-zone .build-dock .dock-head{
  min-height:52px!important;gap:2px 4px!important;
  flex-wrap:wrap!important;padding:3px 2px!important
 }
 body>.bottom .builder-zone .dock-timebar{
  order:0!important;flex:1 1 100%!important;
  gap:5px!important;justify-content:flex-start!important
 }
 body>.bottom .builder-zone .dock-clock{font-size:9px!important;gap:4px!important}
 body>.bottom .builder-zone .dock-clock strong{font-size:15px!important}
 body>.bottom .builder-zone .dock-speed .playback button{
  padding:2px 3px!important;font-size:9px!important
 }
 body>.bottom .builder-zone .build-dock .dock-head>button{
  order:1!important;min-height:19px!important;
  padding:2px 5px!important;font-size:9px!important
 }
 body>.bottom .builder-zone .build-dock .dock-context{
  min-height:63px!important;margin:2px 0!important;border-radius:7px!important
 }
 body>.bottom .builder-zone .dock-context-heading{display:none!important}
 body>.bottom .builder-zone .dock-context #subcategories{
  min-height:24px!important;max-height:25px!important;padding:2px 3px!important
 }
 body>.bottom .builder-zone .dock-context .tools{
  min-height:45px!important;padding:3px!important;gap:3px!important
 }
 body>.bottom .builder-zone .dock-context .tool{
  min-width:68px!important;flex-basis:68px!important;
  min-height:40px!important;padding:3px 2px!important
 }
 body>.bottom .builder-zone .dock-context .tool-icon{width:19px!important;height:19px!important;font-size:17px!important}
 body>.bottom .builder-zone .dock-context .tool strong{font-size:8px!important}
 body>.bottom .builder-zone .dock-context .tool .tool-price{font-size:7px!important}
 body>.bottom .builder-zone .build-dock #categories{
  min-height:40px!important;max-height:40px!important;flex-basis:40px!important
 }
 body>.bottom .builder-zone .build-dock #categories button{
  min-height:38px!important;max-height:38px!important;height:38px!important
 }
 body>.bottom .builder-zone .build-dock .dock-group-icon{font-size:17px!important}
 body>.bottom .builder-zone .build-dock .dock-group-name{font-size:8px!important}
}

/* SMGAME V9: selected tools use the entire central in-box rectangle.
   Removed the redundant heading from HTML; keep category tabs if needed. */
body>.bottom .builder-zone .build-dock .dock-context{
 padding:0!important;margin:4px 0 2px!important;
 min-height:94px!important;
 flex:1 1 auto!important;
}
body>.bottom .builder-zone .dock-context .tools{
 display:flex!important;flex:1 1 auto!important;
 align-items:stretch!important;justify-content:stretch!important;
 width:100%!important;min-width:0!important;max-width:100%!important;
 min-height:60px!important;max-height:none!important;
 gap:6px!important;padding:6px!important;
 overflow-x:auto!important;overflow-y:hidden!important;
}
body>.bottom .builder-zone .dock-context .tool{
 flex:1 0 84px!important;min-width:84px!important;max-width:none!important;
 min-height:56px!important;height:auto!important;
 padding:5px 4px!important;justify-content:center!important;
 gap:3px!important
}
body>.bottom .builder-zone .dock-context .tool strong{
 font-size:10px!important
}
body>.bottom .builder-zone .dock-context .tool-icon{
 width:25px!important;height:25px!important;font-size:22px!important
}
body>.bottom .builder-zone .dock-context .tool .tool-price{
 font-size:9px!important
}
@media(max-width:720px){
 body>.bottom .builder-zone .build-dock .dock-context{
  min-height:64px!important;margin:2px 0!important
 }
 body>.bottom .builder-zone .dock-context .tools{
  min-height:46px!important;padding:4px!important;gap:4px!important
 }
 body>.bottom .builder-zone .dock-context .tool{
  flex:1 0 68px!important;min-width:68px!important;
  min-height:42px!important;padding:3px 2px!important
 }
 body>.bottom .builder-zone .dock-context .tool-icon{
  width:19px!important;height:19px!important;font-size:18px!important
 }
 body>.bottom .builder-zone .dock-context .tool strong{font-size:8.5px!important}
 body>.bottom .builder-zone .dock-context .tool .tool-price{font-size:7.5px!important}
}

/* SMGAME V10 — every construction category uses an identical tool tray and card grid.
   A short category does not stretch cards, and long categories scroll within the tray. */
body>.bottom>.control-deck{
 min-height:215px!important;
}
body>.bottom .builder-zone{
 min-height:215px!important;
}
body>.bottom .builder-zone .build-dock .dock-context{
 flex:0 0 116px!important;
 width:100%!important;height:116px!important;
 min-height:116px!important;max-height:116px!important;
 margin:4px 0 2px!important;padding:0!important;
 overflow:hidden!important;
}
body>.bottom .builder-zone .dock-context .tools{
 display:flex!important;align-items:center!important;justify-content:flex-start!important;
 flex:1 1 auto!important;
 gap:6px!important;
 width:100%!important;min-height:0!important;max-height:none!important;
 margin:0!important;padding:4px 6px!important;
 overflow-x:auto!important;overflow-y:hidden!important;
 scrollbar-width:thin!important;
}
body>.bottom .builder-zone .dock-context .tool{
 display:flex!important;align-items:center!important;justify-content:center!important;
 flex:0 0 106px!important;
 box-sizing:border-box!important;width:106px!important;
 min-width:106px!important;max-width:106px!important;
 height:78px!important;min-height:78px!important;max-height:78px!important;
 padding:4px 4px!important;gap:2px!important;
 border-radius:7px!important;overflow:hidden!important;
}
body>.bottom .builder-zone .dock-context .tool-icon{
 flex:0 0 20px!important;width:23px!important;height:20px!important;
 font-size:20px!important;line-height:1!important;
}
body>.bottom .builder-zone .dock-context .tool>span:last-child{
 display:flex!important;flex-direction:column!important;
 align-items:center!important;justify-content:center!important;
 gap:1px!important;width:100%!important;min-width:0!important;
 overflow:hidden!important;
}
body>.bottom .builder-zone .dock-context .tool strong{
 display:block!important;width:100%!important;
 font-size:10px!important;line-height:1.18!important;
 overflow:hidden!important;text-overflow:ellipsis!important;
 white-space:nowrap!important;
}
body>.bottom .builder-zone .dock-context .tool .tool-capacity{
 display:block!important;width:100%!important;
 font:700 9px/1.2 "Noto Sans Thai",Tahoma,sans-serif!important;
 color:#276e52!important;white-space:nowrap!important;
 overflow:hidden!important;text-overflow:ellipsis!important;
}
body>.bottom .builder-zone .dock-context .tool .tool-parking{
 display:block!important;width:100%!important;
 font:500 8px/1.15 "Noto Sans Thai",Tahoma,sans-serif!important;
 color:#658778!important;white-space:nowrap!important;
 overflow:hidden!important;text-overflow:ellipsis!important;
}
body>.bottom .builder-zone .dock-context .tool .tool-price{
 display:block!important;width:100%!important;
 font-size:9px!important;line-height:1.1!important;
 overflow:hidden!important;text-overflow:ellipsis!important;
 white-space:nowrap!important;
}
@media(max-width:720px){
 body>.bottom .builder-zone .build-dock .dock-context{
  flex-basis:91px!important;height:91px!important;
  min-height:91px!important;max-height:91px!important;
  margin:2px 0!important;
 }
 body>.bottom .builder-zone .dock-context .tools{
  gap:4px!important;padding:3px 4px!important;
 }
 body>.bottom .builder-zone .dock-context .tool{
  flex-basis:84px!important;
  width:84px!important;min-width:84px!important;max-width:84px!important;
  height:60px!important;min-height:60px!important;max-height:60px!important;
  padding:3px 2px!important;gap:1px!important;
 }
 body>.bottom .builder-zone .dock-context .tool-icon{
  flex-basis:15px!important;width:18px!important;height:15px!important;font-size:16px!important;
 }
 body>.bottom .builder-zone .dock-context .tool>span:last-child{gap:0!important}
 body>.bottom .builder-zone .dock-context .tool strong{font-size:8px!important}
 body>.bottom .builder-zone .dock-context .tool .tool-capacity{font-size:7.5px!important}
 body>.bottom .builder-zone .dock-context .tool .tool-parking{font-size:7px!important}
 body>.bottom .builder-zone .dock-context .tool .tool-price{font-size:7.5px!important}
}

/* SMGAME V12: one-line building name + capacity and visible tool-in-hand state. */
body>.bottom .builder-zone .dock-context .tool .tool-name{
 display:block!important;width:100%!important;white-space:nowrap!important;
 overflow:hidden!important;text-overflow:ellipsis!important;
}
body>.bottom .builder-zone .dock-context .tool .tool-name .tool-capacity{
 display:inline!important;width:auto!important;max-width:none!important;
 margin-left:3px!important;font-weight:800!important;font-size:inherit!important;line-height:inherit!important;
 color:#267d59!important;white-space:nowrap!important;
}
body>.bottom .builder-zone .dock-context .tool.active{
 position:relative!important;
 background:#c9eddb!important;
 border:2px solid #13815c!important;
 box-shadow:0 0 0 2px #a5ddc3!important;
 color:#124e38!important;
}
body>.bottom .builder-zone .dock-context .tool.active::after{
 content:"✓";position:absolute;top:2px;right:4px;
 display:grid;place-items:center;width:15px;height:15px;
 border-radius:50%;background:#13815c;color:#fff;
 font:bold 11px/1 Arial,sans-serif;pointer-events:none;
}
body>.bottom .builder-zone .dock-context .tool[aria-pressed="true"] .tool-name{
 color:#15573f!important
}
@media(max-width:720px){
 body>.bottom .builder-zone .dock-context .tool .tool-name .tool-capacity{margin-left:2px!important}
 body>.bottom .builder-zone .dock-context .tool.active::after{
  width:12px;height:12px;right:2px;top:2px;font-size:9px
 }
}

/* SMGAME V13: compact City Control BETWEEN city overview and builder.
   The entire three-part dashboard is one white deck and retains fixed height. */
body>.bottom>.control-deck{
 display:grid!important;
 grid-template-columns:minmax(0,27fr) minmax(0,18fr) minmax(0,55fr)!important;
 width:min(1200px,calc(100vw - 24px))!important;
 max-width:1200px!important;
 min-height:215px!important;height:215px!important;
 transform:none!important;
 align-items:stretch!important;overflow:hidden!important;
}
body>.bottom .city-dashboard{
 height:100%!important;min-width:0!important;
 border-radius:13px 0 0 13px!important;
 border-right:1px solid #d7e6db!important;
}
body>.bottom .city-control-mini{
 min-width:0!important;max-width:100%!important;
 height:100%!important;min-height:0!important;
 display:flex!important;align-items:stretch!important;overflow:hidden!important;
 padding:6px 4px!important;
 border-right:1px solid #d7e6db!important;
 background:#f8fbf6!important;
}
body>.bottom .city-control-mini .city-demand-panel{
 position:static!important;inset:auto!important;
 display:flex!important;flex-direction:column!important;flex:1 1 auto!important;
 width:100%!important;min-width:0!important;height:100%!important;
 min-height:0!important;max-height:none!important;
 margin:0!important;padding:5px 6px!important;
 zoom:1!important;overflow:hidden!important;
 border:1px solid #e2ebdf!important;border-radius:8px!important;
 color:#315d4e!important;background:#fff!important;
 box-shadow:none!important;backdrop-filter:none!important;
}
body>.bottom .city-control-mini .mini-control-heading{
 display:flex;align-items:center;justify-content:space-between;
 flex:0 0 auto;gap:3px;min-height:21px;margin:0 0 4px;
 padding:0 1px 3px;border-bottom:1px solid #e8efe6;
 color:#376d56;
}
body>.bottom .city-control-mini .mini-control-heading strong{
 color:#3b745c;font:bold 10px/1.25 "Noto Sans Thai",Tahoma,sans-serif;
 letter-spacing:.15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
body>.bottom .city-control-mini .mini-control-heading #collapse{
 flex:0 0 auto;width:18px;height:18px;
 display:grid;place-items:center;padding:0!important;
 color:#5e8571;background:#eef5ee;border:1px solid #e1eae0;
 border-radius:5px;font:700 12px/1 sans-serif;
}
body>.bottom .city-control-mini .panel-content{
 display:block!important;flex:1 1 auto;min-width:0;min-height:0;
 margin:0!important;padding:0!important;overflow:auto!important;
 scrollbar-width:thin;
}
body>.bottom .city-control-mini .mini-needs-list{
 display:flex!important;flex-direction:column!important;
 gap:1px!important;min-width:0;margin:0!important;padding:0!important;
}
body>.bottom .city-control-mini .mini-need{
 display:flex!important;align-items:center!important;justify-content:space-between!important;
 gap:4px!important;min-height:21px!important;
 padding:2px 3px!important;margin:0!important;
 border:0!important;border-bottom:1px solid #edf3eb!important;
 border-radius:0!important;background:none!important;
 font:600 10px/1.2 "Noto Sans Thai",Tahoma,sans-serif;
}
body>.bottom .city-control-mini .mini-need span{
 display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
 color:#47755f;
}
body>.bottom .city-control-mini .mini-need strong{
 flex:0 0 auto;min-width:25px;text-align:right;
 font:800 13px/1.25 "Noto Sans Thai",Tahoma,sans-serif;
 color:#66907b;
}
body>.bottom .city-control-mini .mini-need.shortage strong{
 color:#d32b37!important;
}
body>.bottom .city-control-mini .mini-need.shortage span{
 color:#804b4b;
}
body>.bottom .city-control-mini .city-demand-panel.collapsed .panel-content{
 display:none!important;
}
body>.bottom .builder-zone{
 height:100%!important;min-width:0!important;
 border-radius:0 13px 13px 0!important;
}
@media(min-width:721px) and (max-width:1100px){
 body>.bottom>.control-deck{
  grid-template-columns:minmax(0,27fr) minmax(0,18fr) minmax(0,55fr)!important;
  width:calc(100vw - 14px)!important;
  transform:none!important;
 }
 body>.bottom .city-control-mini{padding:4px 3px!important}
 body>.bottom .city-control-mini .city-demand-panel{padding:4px!important}
 body>.bottom .city-control-mini .mini-need{
  min-height:20px!important;font-size:9px!important;padding:2px 1px!important
 }
 body>.bottom .city-control-mini .mini-need strong{font-size:12px!important}
}
@media(max-width:720px){
 body>.bottom>.control-deck{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,.8fr)!important;
  height:auto!important;min-height:0!important;
  width:100%!important;transform:none!important;
  align-items:stretch!important
 }
 body>.bottom .city-dashboard{
  grid-column:1;grid-row:1;
  height:98px!important;max-height:98px!important;
  border-right:1px solid #e1eae0!important;border-radius:11px 0 0 0!important
 }
 body>.bottom .city-control-mini{
  grid-column:2;grid-row:1;height:98px!important;
  padding:3px!important;border-right:0!important;
  border-bottom:1px solid #d7e6db!important
 }
 body>.bottom .city-control-mini .city-demand-panel{
  padding:3px!important;border-radius:6px!important
 }
 body>.bottom .city-control-mini .mini-control-heading{
  min-height:15px!important;margin:0 0 2px!important;padding:0!important
 }
 body>.bottom .city-control-mini .mini-control-heading strong{font-size:9px!important}
 body>.bottom .city-control-mini .mini-control-heading #collapse{width:15px;height:15px;font-size:10px}
 body>.bottom .city-control-mini .mini-needs-list{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:1px 3px!important
 }
 body>.bottom .city-control-mini .mini-need{
  min-height:16px!important;padding:1px 0!important;font-size:8px!important
 }
 body>.bottom .city-control-mini .mini-need strong{font-size:9px!important;min-width:13px!important}
 body>.bottom .builder-zone{
  grid-column:1 / -1;grid-row:2;
  height:auto!important;min-height:167px!important;
  border-radius:0 0 11px 11px!important
 }
}

/* SMGAME V14: account/save live IN the vacant overview dashboard space.
   The former upper-right toolbar is gone; retain map utility controls as compact
   inline icons in the same overview panel, with all original element IDs. */
body>.bottom .city-dashboard{
 justify-content:space-between!important;
}
body>.bottom .city-dashboard .dashboard-heading{
 flex:0 0 auto!important;
}
body>.bottom .city-dashboard .stats.dashboard-stats{
 flex:0 0 auto!important;
}
body>.bottom .city-dashboard .dashboard-shortcuts{
 display:flex!important;flex:1 1 auto!important;
 flex-direction:column!important;align-items:center!important;
 justify-content:center!important;gap:3px!important;
 width:100%!important;min-width:0!important;min-height:0!important;
 max-height:73px!important;overflow:hidden!important;
 padding:0 2px!important;
}
body>.bottom .city-dashboard .dashboard-member-buttons{
 display:flex!important;justify-content:center!important;
 align-items:center!important;gap:12px!important;
 width:100%!important;min-width:0!important;flex:0 0 auto!important;
}
body>.bottom .city-dashboard .dashboard-member-buttons>button{
 display:flex!important;flex-direction:row!important;
 align-items:center!important;justify-content:center!important;
 gap:6px!important;flex:0 1 112px!important;
 min-width:0!important;max-width:112px!important;height:42px!important;
 padding:5px 8px!important;margin:0!important;
 border-radius:10px!important;border:1px solid #c9dfcf!important;
 box-shadow:0 2px 6px #28573b12!important;
 background:#eef7ee!important;color:#28654c!important;
 text-align:center!important;cursor:pointer!important;
}
body>.bottom .city-dashboard .dashboard-member-buttons>button:hover{
 background:#ddefdd!important;border-color:#9dc6aa!important;
}
body>.bottom .city-dashboard .dashboard-member-buttons>button:focus-visible,

body>.bottom .city-dashboard .dashboard-member-buttons>button#saveGameQuick{
 background:#e2f4d5!important;border-color:#b8dba8!important;
 color:#2b6945!important;
}
body>.bottom .city-dashboard .dashboard-member-buttons>button#saveGameQuick:hover{
 background:#d2edc0!important;
}
body>.bottom .city-dashboard .dashboard-member-buttons>button#accountQuick.is-signed-in{
 border-color:#7acb9b!important;background:#def6e6!important;
}
body>.bottom .city-dashboard .dashboard-member-buttons .map-rail-svg{
 display:block!important;width:23px!important;height:23px!important;
 flex:0 0 23px!important;color:inherit!important;
}
body>.bottom .city-dashboard .dashboard-member-buttons .map-save-art{
 width:28px!important;height:28px!important;flex:0 0 28px!important;
 display:grid!important;place-items:center!important;
 border-radius:6px!important;background:#fbfff7!important;
}
body>.bottom .city-dashboard .dashboard-member-buttons .map-save-art svg{
 width:25px!important;height:25px!important;
}
body>.bottom .city-dashboard .dashboard-member-buttons small{
 display:block!important;white-space:nowrap!important;
 color:inherit!important;font:700 11px/1.2 "Noto Sans Thai",Tahoma,sans-serif!important;
 overflow:hidden!important;text-overflow:ellipsis!important;
}





@media(min-width:721px) and (max-width:1100px){
 body>.bottom .city-dashboard .dashboard-member-buttons{gap:5px!important}
 body>.bottom .city-dashboard .dashboard-member-buttons>button{
  flex-basis:85px!important;max-width:85px!important;height:38px!important;
  padding:4px!important;gap:3px!important
 }
 body>.bottom .city-dashboard .dashboard-member-buttons small{font-size:9px!important}
 body>.bottom .city-dashboard .dashboard-member-buttons .map-rail-svg{width:19px!important;height:19px!important;flex-basis:19px!important}
 body>.bottom .city-dashboard .dashboard-member-buttons .map-save-art{width:22px!important;height:22px!important;flex-basis:22px!important}
 body>.bottom .city-dashboard .dashboard-member-buttons .map-save-art svg{width:20px!important;height:20px!important}
 
 
}
@media(max-width:720px){
 /* Keep account/save first and all five map actions accessible in a single
    horizontally swipeable shortcut row inside the narrow mobile dashboard. */
 body>.bottom .city-dashboard .dashboard-shortcuts{
  flex:0 0 25px!important;flex-direction:row!important;
  justify-content:flex-start!important;align-items:center!important;
  gap:3px!important;min-height:25px!important;max-height:25px!important;
  padding:0 1px!important;overflow-x:auto!important;overflow-y:hidden!important;
  scrollbar-width:none!important
 }
 body>.bottom .city-dashboard .dashboard-shortcuts::-webkit-scrollbar{display:none!important}
 body>.bottom .city-dashboard .dashboard-member-buttons{
  width:auto!important;flex:0 0 auto!important;gap:2px!important
 }
 body>.bottom .city-dashboard .dashboard-member-buttons>button{
  flex:0 0 48px!important;width:48px!important;max-width:48px!important;
  height:24px!important;min-height:24px!important;
  gap:2px!important;padding:2px!important;border-radius:5px!important
 }
 body>.bottom .city-dashboard .dashboard-member-buttons .map-rail-svg{
  width:14px!important;height:14px!important;flex-basis:14px!important
 }
 body>.bottom .city-dashboard .dashboard-member-buttons .map-save-art{
  width:16px!important;height:16px!important;flex-basis:16px!important
 }
 body>.bottom .city-dashboard .dashboard-member-buttons .map-save-art svg{
  width:15px!important;height:15px!important
 }
 body>.bottom .city-dashboard .dashboard-member-buttons small{font-size:7px!important}
 
 
 
}

/* V15: overview only account/save; map controls retained hidden for JS binding. */

body>.bottom .city-dashboard .dashboard-shortcuts{
 justify-content:center!important;gap:0!important;
}
body>.bottom .city-dashboard .dashboard-member-buttons{align-items:center!important}
@media(max-width:720px){
 body>.bottom .city-dashboard .dashboard-shortcuts{
  justify-content:center!important;overflow:hidden!important;
 }
}

/* V17: the obsolete zoom/center/heat/grid row is deleted from HTML and CSS.
   Compact City Overview: heading, account+save, and metrics consume the
   existing height with no phantom shortcut row or unused gap. */
body>.bottom .city-dashboard{
 display:grid!important;grid-template-columns:minmax(0,1fr)!important;
 grid-template-rows:25px minmax(44px,1fr) 112px!important;
 justify-content:stretch!important;align-content:stretch!important;
 align-items:stretch!important;
 column-gap:0!important;row-gap:5px!important;
 padding:8px 9px!important;min-height:0!important;
 overflow:hidden!important;
}
body>.bottom .city-dashboard .dashboard-heading{
 grid-row:1!important;min-height:0!important;height:25px!important;
 margin:0!important;padding:0 0 4px!important;
}
body>.bottom .city-dashboard .dashboard-shortcuts{
 grid-row:2!important;display:flex!important;
 flex:none!important;min-height:0!important;max-height:none!important;
 height:100%!important;padding:0 3px!important;
 align-items:center!important;justify-content:center!important;
 overflow:hidden!important;
}
body>.bottom .city-dashboard .dashboard-member-buttons{
 display:flex!important;width:100%!important;min-width:0!important;
 align-items:center!important;justify-content:center!important;
 gap:8px!important;margin:0!important;
}
body>.bottom .city-dashboard .dashboard-member-buttons>button{
 flex:0 1 124px!important;max-width:124px!important;
 min-width:0!important;height:42px!important;
 padding:4px 6px!important;gap:4px!important;
 border-radius:9px!important;
}
body>.bottom .city-dashboard .stats.dashboard-stats{
 grid-row:3!important;display:grid!important;
 flex:none!important;width:100%!important;height:112px!important;
 min-height:0!important;max-height:112px!important;
 grid-template-columns:repeat(2,minmax(0,1fr))!important;
 grid-template-rows:repeat(3,minmax(0,1fr))!important;
 align-items:stretch!important;justify-content:stretch!important;
 gap:2px 7px!important;margin:0!important;padding:0!important;
}
body>.bottom .city-dashboard .city-metric{
 min-height:0!important;height:auto!important;
 padding:2px 4px!important;
}
body>.bottom .city-dashboard .metric-money{grid-column:span 2!important}
@media(min-width:721px) and (max-width:1100px){
 body>.bottom .city-dashboard{grid-template-rows:23px minmax(40px,1fr) 108px!important;padding:6px!important;gap:4px!important}
 body>.bottom .city-dashboard .dashboard-heading{height:23px!important}
 body>.bottom .city-dashboard .stats.dashboard-stats{height:108px!important;max-height:108px!important}
 body>.bottom .city-dashboard .dashboard-member-buttons>button{height:39px!important}
}
@media(max-width:720px){
 body>.bottom .city-dashboard{
  grid-template-rows:20px 25px minmax(0,1fr)!important;
  height:98px!important;max-height:98px!important;
  padding:3px 4px!important;gap:2px!important
 }
 body>.bottom .city-dashboard .dashboard-heading{height:20px!important;padding:0!important}
 body>.bottom .city-dashboard .dashboard-shortcuts{
  flex:none!important;grid-row:2!important;min-height:25px!important;
  max-height:25px!important;height:25px!important;
  padding:0!important;overflow:hidden!important;
 }
 body>.bottom .city-dashboard .dashboard-member-buttons{gap:5px!important}
 body>.bottom .city-dashboard .dashboard-member-buttons>button{
  flex:0 1 55px!important;width:auto!important;
  max-width:55px!important;height:23px!important;
  min-height:23px!important;padding:2px!important;
 }
 body>.bottom .city-dashboard .stats.dashboard-stats{
  grid-row:3!important;min-height:0!important;
  max-height:none!important;height:100%!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  grid-template-rows:1fr!important;gap:1px!important;
 }
 body>.bottom .city-dashboard .city-metric{
  grid-column:auto!important;min-height:0!important;
  height:100%!important;padding:1px!important;
 }
}

/* V18: budget and city metrics ABOVE account / save in the same compact box. */
body>.bottom .city-dashboard{
 grid-template-rows:25px 112px minmax(42px,1fr)!important;
}
body>.bottom .city-dashboard .stats.dashboard-stats{
 grid-row:2!important;align-self:stretch!important;
}
body>.bottom .city-dashboard .dashboard-shortcuts{
 grid-row:3!important;align-self:stretch!important;
 margin:0!important;padding:0 3px!important;
}
body>.bottom .city-dashboard .dashboard-member-buttons>button{
 height:40px!important;
}
@media(min-width:721px) and (max-width:1100px){
 body>.bottom .city-dashboard{grid-template-rows:23px 108px minmax(40px,1fr)!important}
 body>.bottom .city-dashboard .dashboard-member-buttons>button{height:38px!important}
}
@media(max-width:720px){
 body>.bottom .city-dashboard{
  grid-template-rows:20px minmax(0,1fr) 25px!important;
 }
 body>.bottom .city-dashboard .stats.dashboard-stats{
  grid-row:2!important;height:100%!important;
 }
 body>.bottom .city-dashboard .dashboard-shortcuts{
  grid-row:3!important;height:25px!important;min-height:25px!important;max-height:25px!important;
 }
 body>.bottom .city-dashboard .dashboard-member-buttons>button{height:23px!important;min-height:23px!important}
}

/* V19 — SMCITY v2.4.0. Demand: capacity / active incl. en route / unmet. */
body>.bottom .city-dashboard .dashboard-title strong{
 letter-spacing:.6px!important
}
body>.bottom .city-dashboard .dashboard-title small{
 font-size:9px!important;letter-spacing:.15px!important
}
body>.bottom .city-control-mini .mini-control-heading{
 justify-content:flex-start!important;gap:5px!important;
}
body>.bottom .city-control-mini .mini-control-heading .mini-demand-legend{
 display:block!important;flex:0 0 auto!important;
 font:500 8px/1.2 "Noto Sans Thai",Tahoma,sans-serif!important;
 letter-spacing:-.1px!important;color:#739383!important;white-space:nowrap!important;
}
body>.bottom .city-control-mini .mini-control-heading #collapse{
 margin-left:auto!important;
}
body>.bottom .city-control-mini .mini-needs-list{
 display:flex!important;flex-direction:column!important;gap:0!important
}
body>.bottom .city-control-mini .mini-need{
 display:flex!important;align-items:center!important;justify-content:flex-start!important;
 gap:3px!important;width:100%!important;min-width:0!important;
 min-height:20px!important;max-height:21px!important;
 padding:1px 2px!important;
 font-size:10px!important;line-height:1.2!important;
}
body>.bottom .city-control-mini .mini-need>span{
 flex:0 0 58px!important;width:58px!important;max-width:58px!important;
 min-width:0!important;text-align:left!important;font-size:10px!important;
}
body>.bottom .city-control-mini .mini-need-values{
 display:grid!important;grid-template-columns:repeat(3, minmax(25px,max-content))!important;
 align-items:center!important;justify-content:start!important;
 column-gap:3px!important;flex:0 0 auto!important;min-width:0!important;
}
body>.bottom .city-control-mini .mini-need-values b,
body>.bottom .city-control-mini .mini-need-values strong{
 display:block!important;min-width:0!important;width:auto!important;
 margin:0!important;padding:0!important;
 text-align:center!important;white-space:nowrap!important;
 font:700 10px/1.2 "Noto Sans Thai",Tahoma,sans-serif!important;
 font-variant-numeric:tabular-nums!important;
 color:#547b67!important;
}
body>.bottom .city-control-mini .mini-need-values .mini-need-busy{
 color:#335e4a!important
}
body>.bottom .city-control-mini .mini-need-values .mini-need-missing{
 color:#678571!important;font-weight:800!important
}
body>.bottom .city-control-mini .mini-need.shortage .mini-need-missing{
 color:#d32835!important
}
@media(min-width:721px) and (max-width:1100px){
 body>.bottom .city-control-mini .mini-need{min-height:19px!important;max-height:20px!important;gap:2px!important;padding:1px!important}
 body>.bottom .city-control-mini .mini-need>span{flex-basis:49px!important;width:49px!important;max-width:49px!important;font-size:9px!important}
 body>.bottom .city-control-mini .mini-need-values{grid-template-columns:repeat(3,minmax(20px,max-content))!important;column-gap:2px!important}
 body>.bottom .city-control-mini .mini-need-values b,
 body>.bottom .city-control-mini .mini-need-values strong{font-size:9px!important}
 body>.bottom .city-control-mini .mini-control-heading .mini-demand-legend{font-size:7px!important}
}
@media(max-width:720px){
 body>.bottom .city-control-mini .mini-needs-list{
  display:flex!important;flex-direction:column!important;gap:0!important
 }
 body>.bottom .city-control-mini .mini-control-heading .mini-demand-legend{font-size:6.5px!important}
 body>.bottom .city-control-mini .mini-need{
  min-height:8px!important;max-height:9px!important;
  width:100%!important;gap:2px!important;padding:0!important;
  line-height:1!important;font-size:7px!important
 }
 body>.bottom .city-control-mini .mini-need>span{
  flex:0 0 39px!important;width:39px!important;max-width:39px!important;
  font-size:7px!important;line-height:1!important
 }
 body>.bottom .city-control-mini .mini-need-values{
  grid-template-columns:repeat(3,minmax(15px,max-content))!important;
  column-gap:1px!important;
 }
 body>.bottom .city-control-mini .mini-need-values b,
 body>.bottom .city-control-mini .mini-need-values strong{
  font-size:7px!important;line-height:1!important
 }
}

/* V20: neat single-line SMCITY version heading, without the ◈ ornament. */
body>.bottom .city-dashboard .dashboard-heading{
 display:flex!important;align-items:center!important;justify-content:space-between!important;
 gap:5px!important
}
body>.bottom .city-dashboard .dashboard-title{
 display:inline-flex!important;flex-direction:row!important;
 flex-wrap:nowrap!important;align-items:baseline!important;
 justify-content:flex-start!important;
 gap:6px!important;min-width:0!important;white-space:nowrap!important;
 padding-left:1px!important
}
body>.bottom .city-dashboard .dashboard-title>strong{
 display:inline!important;flex:0 0 auto!important;
 font:800 14px/1.25 Tahoma,Arial,sans-serif!important;
 letter-spacing:.35px!important;color:#225b46!important;
}
body>.bottom .city-dashboard .dashboard-title>small{
 display:inline!important;flex:0 0 auto!important;
 margin:0!important;
 font:600 10px/1.2 Tahoma,Arial,sans-serif!important;
 letter-spacing:0!important;color:#71917e!important;
}
body>.bottom .city-dashboard .dashboard-actions{
 flex:0 0 auto!important;display:flex!important;gap:4px!important
}
@media(max-width:720px){
 body>.bottom .city-dashboard .dashboard-title{gap:4px!important}
 body>.bottom .city-dashboard .dashboard-title>strong{font-size:11px!important}
 body>.bottom .city-dashboard .dashboard-title>small{display:inline!important;font-size:8px!important}
}

/* V21: Building-label visibility switch, next to Explore City in the dock head.
   It only affects building name/occupancy overlays, not warning markers. */
body>.bottom .builder-zone .build-dock .dock-head>.toggle-building-labels{
 display:inline-flex!important;align-items:center!important;
 justify-content:center!important;flex:0 0 auto!important;
 gap:4px!important;min-height:26px!important;
 padding:3px 7px!important;
 border:1px solid #cdded1!important;border-radius:7px!important;
 background:#eff6ed!important;color:#376c55!important;
 box-shadow:none!important;white-space:nowrap!important;
 font:700 10px/1.25 "Noto Sans Thai",Tahoma,sans-serif!important;
 cursor:pointer!important
}
body>.bottom .builder-zone .build-dock .dock-head>.toggle-building-labels:hover{
 border-color:#84b497!important;background:#e2f2e4!important
}
body>.bottom .builder-zone .build-dock .dock-head>.toggle-building-labels.is-hidden{
 background:#dceee2!important;color:#17633d!important;
 border-color:#85bda0!important
}
body>.bottom .builder-zone .build-dock .dock-head>.toggle-building-labels:focus-visible{
 outline:2px solid #287a53!important;outline-offset:2px!important
}
body>.bottom .builder-zone .toggle-building-labels-icon{
 font-size:13px!important;line-height:1!important
}
@media(min-width:721px) and (max-width:1100px){
 body>.bottom .builder-zone .build-dock .dock-head>.toggle-building-labels{
  min-height:19px!important;padding:2px 6px!important;
  font-size:9px!important
 }
}
@media(max-width:720px){
 body>.bottom .builder-zone .build-dock .dock-head>.toggle-building-labels{
  order:1!important;min-height:19px!important;
  padding:2px 5px!important;font-size:9px!important
 }
}

/* V22: authoritative map-label visibility, independent of legacy label CSS. */
html.building-labels-off .place-building-label,
html.building-labels-off #buildingLabels .place-building-label{
 display:none!important;visibility:hidden!important;
}
body>.bottom .builder-zone .build-dock .dock-head>.toggle-building-labels{
 position:relative!important;z-index:3!important;
 pointer-events:auto!important;touch-action:manipulation!important;
 max-width:83px!important;white-space:nowrap!important;
}
body>.bottom .builder-zone .build-dock .dock-head{
 position:relative!important;z-index:2!important;
}

/* V24: small 3D orbit/pitch joystick in the top-right map corner. */
#cameraJoystick{
 position:fixed!important;top:13px!important;right:13px!important;
 z-index:20!important;width:76px!important;height:76px!important;
 display:block!important;flex:none!important;
 border:1px solid rgba(41,103,82,.40)!important;
 border-radius:50%!important;
 background:rgba(244,251,243,.79)!important;
 box-shadow:0 2px 9px rgba(16,49,38,.20)!important;
 backdrop-filter:blur(5px)!important;-webkit-backdrop-filter:blur(5px)!important;
 touch-action:none!important;user-select:none!important;-webkit-user-select:none!important;
 pointer-events:auto!important;
}
#cameraJoystick[hidden]{display:none!important}
#cameraJoystick button{
 position:absolute!important;display:grid!important;place-items:center!important;
 width:23px!important;height:23px!important;min-height:0!important;
 padding:0!important;margin:0!important;border-radius:50%!important;
 border:1px solid transparent!important;background:transparent!important;
 color:#356a57!important;box-shadow:none!important;
 font:700 10px/1 Arial,sans-serif!important;
 touch-action:none!important;cursor:pointer!important;
 -webkit-tap-highlight-color:transparent!important;
}
#cameraJoystick button:hover,#cameraJoystick button:active{
 background:#d7ebdb!important;color:#194b3c!important;
}
#cameraJoystick button:focus-visible{
 outline:2px solid #348d6a!important;outline-offset:0!important;
}
#cameraJoystick .cam-up{top:1px;left:calc(50% - 11.5px)}
#cameraJoystick .cam-down{bottom:1px;left:calc(50% - 11.5px)}
#cameraJoystick .cam-left{left:1px;top:calc(50% - 11.5px)}
#cameraJoystick .cam-right{right:1px;top:calc(50% - 11.5px)}
#cameraJoystick .cam-reset{
 top:calc(50% - 12px);left:calc(50% - 12px);
 background:#d7eddf!important;border:1px solid #b1d3ba!important;
 color:#275e44!important;font-size:17px!important;
 width:24px!important;height:24px!important;
}
@media(max-width:720px){
 #cameraJoystick{top:8px!important;right:8px!important;width:70px!important;height:70px!important}
 #cameraJoystick button{width:22px!important;height:22px!important}
 #cameraJoystick .cam-up,#cameraJoystick .cam-down{left:calc(50% - 11px)}
 #cameraJoystick .cam-left,#cameraJoystick .cam-right{top:calc(50% - 11px)}
 #cameraJoystick .cam-reset{top:calc(50% - 12px);left:calc(50% - 12px)}
}


/* SMGame 2026-10-23 — quieter mint-slate surfaces, flat tool rail,
   right-hand facts panel and compact tourism analytics. */
:root{
 --paper:#e7eee8;
 --line:#ccd9ce;
 --muted:#607669;
 --shadow:0 7px 26px rgba(30,62,50,.16);
}
body>.bottom>.control-deck{
 background:#e7eee7!important;
 border-color:#bfcfc2!important;
 box-shadow:0 5px 22px rgba(30,57,46,.19)!important;
}
body>.bottom .city-dashboard,
body>.bottom .city-control-mini,
body>.bottom .builder-zone{
 background:#e5ede6!important;
 border-color:#c9d8cb!important;
}
body>.bottom .city-dashboard .city-metric,
body>.bottom .city-dashboard .dashboard-member-buttons>button,
body>.bottom .city-control-mini .city-demand-panel,
body>.bottom .city-control-mini .mini-need,
body>.bottom .builder-zone .build-dock,
body>.bottom .builder-zone .dock-head,
body>.bottom .builder-zone .dock-context{
 background:#e1eae2!important;
 border-color:#c7d5c9!important;
 box-shadow:none!important;
}
body>.bottom .city-dashboard .city-metric:hover,
body>.bottom .city-dashboard .dashboard-member-buttons>button:hover,
body>.bottom .builder-zone button:hover{
 background:#d4e4d6!important;
}
body>.bottom .builder-zone .dock-speed .playback,
body>.bottom .builder-zone .build-dock .dock-head>button,
body>.bottom .builder-zone .build-dock .dock-head>.toggle-building-labels,
body>.bottom .builder-zone .build-dock .dock-head>.toggle-dock{
 background:#dbe7dc!important;
 border-color:#c2d3c4!important;
 color:#325c49!important;
 box-shadow:none!important;
}
body>.bottom .builder-zone .dock-speed .playback button.active{
 background:#39745b!important;color:#f5fff6!important;
}
body>.bottom .builder-zone .dock-context{
 flex:1 1 auto!important;min-height:0!important;
 margin:4px 0!important;padding:0!important;
 border-radius:8px!important;
}
body>.bottom .builder-zone .dock-context #subcategories,
body>.bottom .builder-zone .build-dock #categories{
 display:none!important;min-height:0!important;max-height:0!important;
 height:0!important;padding:0!important;margin:0!important;
}
body>.bottom .builder-zone .dock-context .tools{
 display:flex!important;flex-direction:row!important;
 flex-wrap:nowrap!important;align-items:stretch!important;
 flex:1 1 auto!important;min-height:70px!important;
 max-height:none!important;height:100%!important;
 gap:5px!important;padding:6px!important;
 background:#e1eae2!important;
 overflow-x:auto!important;overflow-y:hidden!important;
 scroll-behavior:smooth;overscroll-behavior-x:contain;
 scrollbar-width:thin!important;scrollbar-color:#a9c2ae transparent;
}
body>.bottom .builder-zone .dock-context .tool{
 flex:0 0 91px!important;min-width:91px!important;max-width:91px!important;
 min-height:65px!important;max-height:none!important;
 background:#edf3eb!important;border-color:#cadacc!important;
 color:#355849!important;
}
body>.bottom .builder-zone .dock-context .tool:hover{
 background:#e0ece0!important;
}
body>.bottom .builder-zone .dock-context .tool-icon{
 background:#dce8da!important;color:#35614b!important;
}
body>.bottom .builder-zone .dock-context .tool.active{
 background:#c7e6d3!important;border-color:#488b69!important;
 box-shadow:inset 0 0 0 1px #488b69!important;
}
body>.bottom .builder-zone .dock-context .tool small:not(.tool-price){
 display:none!important;
}
body>.bottom .builder-zone .dock-context .tool .tool-price{
 color:#5e7665!important;
}
body>.bottom .city-control-mini #collapse,
body>.bottom .builder-zone .explore-city{display:none!important}
body>.bottom .city-control-mini .panel-content{
 display:block!important;visibility:visible!important;flex:1 1 auto!important;
}
body>.bottom .city-control-mini .city-panel.collapsed .panel-content{
 display:block!important;
}
body>.bottom .city-control-mini .mini-control-heading{
 background:transparent!important;border:0!important;
}
/* Inspector / citizen and tourist panels: facts only, on the right. */
#inspector{
 position:fixed!important;left:auto!important;right:12px!important;
 top:103px!important;bottom:auto!important;
 z-index:22!important;
 zoom:1!important;
 width:min(356px,calc(100vw - 24px))!important;
 max-height:calc(100dvh - 348px)!important;
 min-height:0!important;overflow:auto!important;
 padding:15px 15px 13px!important;
 border-radius:12px!important;
 border:1px solid #bfcec1!important;
 background:rgba(225,235,226,.97)!important;
 color:#234b3a!important;
 box-shadow:0 7px 27px rgba(27,56,44,.20)!important;
}
#inspector h2{font-size:17px!important;margin:1px 24px 9px 0!important}
#inspector h3{font-size:12px!important;margin:11px 0 5px!important}
#inspector .detail-row{margin:5px 0!important;font-size:11px!important;gap:9px!important}
#inspector .detail-row strong{font-size:11px!important;color:#2b5844!important}
#inspector .tag,#inspector .signal-note,#inspector .eyebrow{display:none!important}
#inspector button.action{
 font-size:10px!important;padding:7px!important;margin-top:5px!important;
 background:#d9e8dc!important;border:1px solid #bacfc0!important;
}
#inspector button.close{top:6px!important;right:7px!important}
.citizens-dashboard{
 background:rgba(224,234,225,.97)!important;
 color:#254d3b!important;
 border:1px solid #b8cbbc!important;
 box-shadow:0 9px 32px rgba(33,61,48,.2)!important;
}
.citizens-top{background:#dce8dd!important;border-color:#bdcebf!important}
.citizens-top .citizens-eyebrow,.citizens-top p{display:none!important}
.citizens-toolbar{background:#e0eae0!important;border-color:#c7d7c9!important}
.citizens-toolbar input{
 background:#eaf1e9!important;border-color:#b9cdbe!important;
 color:#254d3b!important;
}
.citizens-filters button{
 background:#e9f0e7!important;border-color:#c5d7c7!important;
 color:#345f47!important;
}
.citizens-filters button.active{
 background:#3b7157!important;border-color:#3b7157!important;color:#fff!important;
}
.citizen-kpi,.citizen-signal-grid div,.citizen-issue,.citizen-person,.citizen-empty,
.citizen-note,.citizen-more{
 background:#eaf1e8!important;border-color:#ccdacc!important;
}
.citizen-kpi.urgent{
 background:#f1e5df!important;border-color:#e4cfc6!important;
}
.citizen-bar-track{background:#cbd9cd!important}
.citizen-person:hover,.citizen-person:focus-visible{
 background:#d7e7d8!important;border-color:#8db89d!important;
}
#touristsDashboard .citizen-pair{
 align-items:start;
}
#touristsDashboard .citizen-section{
 min-width:0;
}
#touristsDashboard .citizen-person-score{min-width:44px}
/* The camera remains above the detail panels and never collides with them. */
#cameraJoystick{
 background:rgba(225,236,224,.85)!important;
 border-color:rgba(52,105,76,.42)!important;
}
@media(max-width:1100px){
 #inspector{
  right:9px!important;top:93px!important;
  width:min(335px,calc(100vw - 18px))!important;
  max-height:calc(100dvh - 300px)!important;
 }
}
@media(max-width:720px){
 body>.bottom .builder-zone .dock-context .tools{
  min-height:53px!important;padding:3px 4px!important;gap:4px!important;
 }
 body>.bottom .builder-zone .dock-context .tool{
  flex-basis:72px!important;min-width:72px!important;max-width:72px!important;
  min-height:50px!important;padding:3px!important;
 }
 body>.bottom .builder-zone .dock-context{min-height:53px!important}
 #inspector{
  top:86px!important;right:7px!important;
  width:min(340px,calc(100vw - 14px))!important;
  max-height:calc(100dvh - 350px)!important;
  padding:10px!important;
 }
 #touristsDashboard .citizen-pair{grid-template-columns:1fr!important}
}

/* SMCITY category navigation rebuilt 2026-10-23.
   Five primary sections; only Buildings has secondary tabs.
   Keep the softened, low-glare palette from the current design. */
body>.bottom .builder-zone .build-dock .dock-body{
 display:flex!important;flex-direction:column!important;
 justify-content:flex-start!important;overflow:hidden!important;
}
body>.bottom .builder-zone .build-dock #categories{
 display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;
 order:0!important;flex:0 0 43px!important;
 height:43px!important;min-height:43px!important;max-height:43px!important;
 width:100%!important;max-width:100%!important;
 padding:2px 5px!important;margin:0!important;
 border-top:0!important;border-bottom:1px solid #c4d5c7!important;
 background:#dae7dc!important;overflow:hidden!important;
}
body>.bottom .builder-zone .build-dock #categories button{
 display:flex!important;flex-direction:column!important;gap:0!important;
 justify-content:center!important;align-items:center!important;
 min-height:38px!important;max-height:38px!important;height:38px!important;
 margin:0 2px!important;padding:1px 2px!important;
 border:1px solid transparent!important;border-radius:7px!important;
 background:transparent!important;color:#597267!important;
 font-weight:600!important;
}
body>.bottom .builder-zone .build-dock #categories button.active{
 background:#c8ddcf!important;border:1px solid #99bba6!important;
 color:#205c43!important;box-shadow:none!important;
}
body>.bottom .builder-zone .build-dock #categories button:hover{
 background:#c5ddcb!important;
}
body>.bottom .builder-zone .build-dock .dock-group-icon{
 font-size:17px!important;line-height:19px!important;
}
body>.bottom .builder-zone .build-dock .dock-group-name{
 font-size:9px!important;line-height:13px!important;white-space:nowrap!important;
}
body>.bottom .builder-zone .build-dock .dock-context{
 display:flex!important;flex-direction:column!important;
 order:1!important;flex:1 1 auto!important;
 min-height:52px!important;margin:3px 0 1px!important;
 background:#e1eae2!important;border-color:#c7d5c9!important;
}
body>.bottom .builder-zone .dock-context #subcategories{
 display:flex!important;align-items:center!important;
 flex:0 0 25px!important;
 min-height:25px!important;max-height:25px!important;height:25px!important;
 margin:0!important;padding:2px 5px!important;gap:4px!important;
 background:#dce8de!important;
 border-bottom:1px solid #c5d9c9!important;
 overflow-x:auto!important;overflow-y:hidden!important;
}
body>.bottom .builder-zone .dock-context #subcategories[hidden]{
 display:none!important;height:0!important;min-height:0!important;
 max-height:0!important;flex-basis:0!important;padding:0!important;border:0!important;
}
body>.bottom .builder-zone .dock-context #subcategories button{
 display:inline-flex!important;align-items:center!important;
 flex:0 0 auto!important;border-radius:5px!important;
 min-height:19px!important;max-height:21px!important;
 padding:2px 8px!important;margin:0!important;
 color:#4f6a59!important;background:#e7eee6!important;
 border:1px solid #c8d8c9!important;
 font:600 9px/1.2 "Noto Sans Thai",Tahoma,sans-serif!important;
}
body>.bottom .builder-zone .dock-context #subcategories button.active{
 background:#bcd8c5!important;color:#255f43!important;
 border-color:#83b296!important;
}
body>.bottom .builder-zone .dock-context .tools{
 flex:1 1 auto!important;min-height:51px!important;
 overflow-x:auto!important;overflow-y:hidden!important;
 padding:4px 6px!important;gap:5px!important;
}
body>.bottom .builder-zone .dock-context .tool{
 flex:0 0 94px!important;min-width:94px!important;max-width:94px!important;
}
body>.bottom .builder-zone .build-dock.is-collapsed .dock-context{
 display:none!important;
}
@media(max-width:720px){
 body>.bottom .builder-zone .build-dock #categories{
  flex-basis:34px!important;height:34px!important;min-height:34px!important;
  max-height:34px!important;padding:1px 2px!important;
 }
 body>.bottom .builder-zone .build-dock #categories button{
  height:30px!important;min-height:30px!important;max-height:30px!important;
  padding:0 1px!important;margin:0 1px!important;
 }
 body>.bottom .builder-zone .build-dock .dock-group-icon{
  font-size:13px!important;line-height:15px!important;
 }
 body>.bottom .builder-zone .build-dock .dock-group-name{
  font-size:7.2px!important;line-height:11px!important;
 }
 body>.bottom .builder-zone .dock-context #subcategories{
  flex-basis:22px!important;min-height:22px!important;max-height:22px!important;
  height:22px!important;padding:1px 3px!important;gap:3px!important;
 }
 body>.bottom .builder-zone .dock-context #subcategories button{
  font-size:8px!important;min-height:18px!important;padding:1px 5px!important;
 }
 body>.bottom .builder-zone .dock-context .tools{
  min-height:49px!important;padding:3px 4px!important;gap:4px!important;
 }
 body>.bottom .builder-zone .dock-context .tool{
  flex-basis:72px!important;min-width:72px!important;max-width:72px!important;
 }
}

/* SMGame: calendar, time, playback, label visibility and tool collapse
   live on ONE line at desktop, iPad and narrow-phone widths. */
body>.bottom .builder-zone .build-dock .dock-head{
 display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;
 align-items:center!important;justify-content:space-between!important;
 width:100%!important;height:39px!important;min-height:39px!important;
 max-height:39px!important;flex:0 0 39px!important;
 gap:4px!important;padding:3px 5px!important;overflow:hidden!important;
}
body>.bottom .builder-zone .build-dock .dock-timebar{
 order:0!important;display:flex!important;flex-direction:row!important;
 flex:1 1 auto!important;align-items:center!important;
 justify-content:flex-start!important;flex-wrap:nowrap!important;
 min-width:0!important;max-width:none!important;width:auto!important;
 margin:0!important;padding:0!important;gap:5px!important;
}
body>.bottom .builder-zone .build-dock .dock-clock{
 display:flex!important;flex-direction:row!important;
 flex:0 1 auto!important;align-items:center!important;
 justify-content:flex-start!important;white-space:nowrap!important;
 min-width:0!important;max-width:none!important;width:auto!important;
 gap:5px!important;overflow:hidden!important;
}
body>.bottom .builder-zone .build-dock #day{
 display:block!important;flex:0 1 auto!important;min-width:0!important;
 overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
 font-size:10px!important;line-height:1.35!important;
}
body>.bottom .builder-zone .build-dock #clock{
 display:block!important;flex:0 0 auto!important;
 font-size:17px!important;line-height:1.2!important;
 font-variant-numeric:tabular-nums!important;white-space:nowrap!important;
}
body>.bottom .builder-zone .build-dock .dock-speed{
 order:1!important;display:flex!important;flex:0 0 auto!important;
 min-width:0!important;width:auto!important;max-width:none!important;
 padding:0!important;margin:0!important;overflow:visible!important;
}
body>.bottom .builder-zone .build-dock .dock-speed .playback{
 flex-wrap:nowrap!important;white-space:nowrap!important;
 gap:1px!important;padding:1px 2px!important;
 border-radius:7px!important;min-width:0!important;max-width:none!important;
}
body>.bottom .builder-zone .build-dock .dock-speed .playback button{
 flex:0 0 auto!important;min-width:0!important;
 padding:3px 4px!important;min-height:23px!important;
 font-size:9px!important;line-height:1.2!important;white-space:nowrap!important;
}
body>.bottom .builder-zone .build-dock .dock-head>button{
 order:2!important;display:inline-flex!important;flex:0 0 auto!important;
 align-items:center!important;justify-content:center!important;
 min-width:0!important;min-height:25px!important;height:25px!important;
 margin:0!important;padding:2px 6px!important;
 font-size:9px!important;line-height:1.2!important;white-space:nowrap!important;
}
body>.bottom .builder-zone .build-dock .dock-head>.toggle-building-labels{
 min-height:25px!important;height:25px!important;max-width:none!important;
 gap:3px!important;padding:2px 6px!important;
}
/* iPads, where the side-by-side overview reduces the builder's width. */
@media(min-width:721px) and (max-width:1100px){
 body>.bottom .builder-zone .build-dock .dock-head{
  flex-wrap:nowrap!important;height:35px!important;min-height:35px!important;
  max-height:35px!important;flex-basis:35px!important;
  gap:3px!important;padding:2px 3px!important;
 }
 body>.bottom .builder-zone .build-dock .dock-timebar{
  order:0!important;flex:1 1 auto!important;min-width:0!important;
  width:auto!important;gap:3px!important;
 }
 body>.bottom .builder-zone .build-dock .dock-clock{gap:3px!important}
 body>.bottom .builder-zone .build-dock #day{font-size:8px!important}
 body>.bottom .builder-zone .build-dock #clock{font-size:13px!important}
 body>.bottom .builder-zone .build-dock .dock-speed .playback button{
  min-height:21px!important;padding:2px 3px!important;font-size:8px!important;
 }
 body>.bottom .builder-zone .build-dock .dock-head>button,
 body>.bottom .builder-zone .build-dock .dock-head>.toggle-building-labels{
  order:2!important;height:23px!important;min-height:23px!important;
  padding:2px 4px!important;font-size:8px!important;
 }
}
/* Narrow screens: keep the full set of speed controls and accessible
   label buttons; only redundant button captions become icon-only. */
@media(max-width:720px){
 body>.bottom .builder-zone .build-dock .dock-head{
  flex-wrap:nowrap!important;height:34px!important;min-height:34px!important;
  max-height:34px!important;flex-basis:34px!important;
  gap:2px!important;padding:2px 3px!important;
 }
 body>.bottom .builder-zone .build-dock .dock-timebar{
  order:0!important;flex:1 1 auto!important;
  flex-basis:auto!important;min-width:0!important;
  width:auto!important;gap:2px!important;
 }
 body>.bottom .builder-zone .build-dock .dock-clock{
  min-width:0!important;gap:3px!important;
 }
 body>.bottom .builder-zone .build-dock #day{
  font-size:8px!important;letter-spacing:-.1px!important;
 }
 body>.bottom .builder-zone .build-dock #clock{font-size:13px!important}
 body>.bottom .builder-zone .build-dock .dock-speed .playback{
  gap:0!important;padding:1px!important;
 }
 body>.bottom .builder-zone .build-dock .dock-speed .playback button{
  min-height:22px!important;padding:2px 3px!important;
  font-size:8px!important;
 }
 body>.bottom .builder-zone .build-dock .dock-speed #pause{
  font-size:11px!important;
 }
 body>.bottom .builder-zone .build-dock .dock-speed #skip{
  margin-left:1px!important;padding-left:3px!important;
 }
 body>.bottom .builder-zone .build-dock #skip .skip-day-label{display:none!important}
 body>.bottom .builder-zone .build-dock .dock-head>button,
 body>.bottom .builder-zone .build-dock .dock-head>.toggle-building-labels{
  order:2!important;width:24px!important;min-width:24px!important;
  max-width:24px!important;height:24px!important;min-height:24px!important;
  padding:1px!important;gap:0!important;font-size:12px!important;
 }
 body>.bottom .builder-zone .build-dock #toggleBuildingLabelsText,
 body>.bottom .builder-zone .build-dock #toggleDockText{
  display:none!important;
 }
}
@media(max-width:375px){
 body>.bottom .builder-zone .build-dock #day{font-size:7.5px!important}
 body>.bottom .builder-zone .build-dock #clock{font-size:12px!important}
 body>.bottom .builder-zone .build-dock .dock-speed .playback button{
  padding:2px 2px!important;font-size:7.5px!important;
 }
 body>.bottom .builder-zone .build-dock .dock-head>button,
 body>.bottom .builder-zone .build-dock .dock-head>.toggle-building-labels{
  width:22px!important;min-width:22px!important;max-width:22px!important;
 }
}

/* Traffic incident reports live exclusively inside the hamburger main menu.
   A vertical list prevents the third option from wrapping out of view. */
dialog:has(.smcity-menu-list){width:min(360px,calc(100vw - 28px));max-height:calc(100dvh - 32px);padding:18px}
dialog .smcity-menu-list{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-top:12px}
dialog .smcity-menu-list>button{display:block;width:100%;min-height:45px;text-align:left;padding:10px 12px;border:1px solid #d1e1d6;border-radius:9px;background:#fff;font-size:13px;font-weight:600;line-height:1.5;white-space:normal}
dialog .smcity-menu-list>button:hover,dialog .smcity-menu-list>button:focus-visible{background:#eaf4ec;border-color:#78ad91}
dialog .smcity-menu-list>button>small{display:block;font-size:10px;color:#637f70;font-weight:400;margin-top:2px}


/* SMCITY v2.4.1 — high-contrast BLACK interface mode.
   Keep the current theme class and localStorage key so existing choices survive.
   Only app panels, controls and dialogs are themed; never recolor the 3D world. */
:root.smcity-gray-ui{
 --ink:#f5f7fa;
 --muted:#b4bdc9;
 --paper:#121317;
 --line:#343943;
 --green:#83d9ac;
 --shadow:0 7px 28px rgba(0,0,0,.50);
 --sm-dark-outer:#090a0c;
 --sm-dark-panel:#101115;
 --sm-dark-card:#1b1d23;
 --sm-dark-hover:#2c3039;
 --sm-dark-stroke:#353b45;
 --sm-dark-text:#f6f7fa;
 --sm-dark-muted:#bdc4cf;
}
:root.smcity-gray-ui body{
 color:var(--sm-dark-text);
}
:root.smcity-gray-ui body>.bottom>.control-deck{
 background:var(--sm-dark-outer)!important;
 border-color:#333840!important;
 box-shadow:0 6px 28px rgba(0,0,0,.56)!important;
 color:var(--sm-dark-text)!important;
 --deck-border:#363b44;
 --ui-v8-border:#363b44;
}
:root.smcity-gray-ui body>.bottom .city-dashboard,
:root.smcity-gray-ui body>.bottom .city-control-mini,
:root.smcity-gray-ui body>.bottom .builder-zone,
:root.smcity-gray-ui body>.bottom .city-control-mini .city-panel{
 background:var(--sm-dark-panel)!important;
 border-color:var(--sm-dark-stroke)!important;
 color:var(--sm-dark-text)!important;
}
:root.smcity-gray-ui body>.bottom .city-dashboard .city-metric,
:root.smcity-gray-ui body>.bottom .city-dashboard .dashboard-member-buttons>button,
:root.smcity-gray-ui body>.bottom .city-control-mini .city-demand-panel,
:root.smcity-gray-ui body>.bottom .city-control-mini .mini-need,
:root.smcity-gray-ui body>.bottom .builder-zone .build-dock,
:root.smcity-gray-ui body>.bottom .builder-zone .dock-head,
:root.smcity-gray-ui body>.bottom .builder-zone .dock-context,
:root.smcity-gray-ui body>.bottom .builder-zone .dock-timebar,
:root.smcity-gray-ui body>.bottom .city-control-mini .panel-content,
:root.smcity-gray-ui body>.bottom .builder-zone .build-dock .dock-body{
 background:var(--sm-dark-panel)!important;
 border-color:var(--sm-dark-stroke)!important;
 box-shadow:none!important;
 color:var(--sm-dark-text)!important;
}
:root.smcity-gray-ui body>.bottom .city-dashboard .city-metric,
:root.smcity-gray-ui body>.bottom .city-dashboard .dashboard-member-buttons>button,
:root.smcity-gray-ui body>.bottom .city-control-mini .mini-need{
 background:var(--sm-dark-card)!important;
}
:root.smcity-gray-ui body>.bottom .city-dashboard .city-metric:hover,
:root.smcity-gray-ui body>.bottom .city-dashboard .dashboard-member-buttons>button:hover,
:root.smcity-gray-ui body>.bottom .builder-zone button:hover{
 background:var(--sm-dark-hover)!important;
}
:root.smcity-gray-ui body>.bottom .city-dashboard :is(.dashboard-title strong,.dashboard-title small,.city-metric strong,.dashboard-actions button,.dashboard-member-buttons>button,.dashboard-member-buttons>button small),
:root.smcity-gray-ui body>.bottom .city-control-mini :is(.mini-control-heading strong,.mini-demand-legend,.mini-need span,.mini-need strong),
:root.smcity-gray-ui body>.bottom .builder-zone :is(.dock-clock,.dock-clock strong,.dock-label,#day,#clock,#status,.edition){
 color:var(--sm-dark-text)!important;
}
:root.smcity-gray-ui body>.bottom .city-dashboard :is(.city-metric small,.city-metric em,.metric-arrow),
:root.smcity-gray-ui body>.bottom .builder-zone .dock-context .tool .tool-price,
:root.smcity-gray-ui body>.bottom .city-control-mini .mini-demand-legend{
 color:var(--sm-dark-muted)!important;
}
:root.smcity-gray-ui body>.bottom .city-control-mini .mini-need.shortage strong{
 color:#ff898c!important;
}
:root.smcity-gray-ui body>.bottom .city-control-mini .mini-need.shortage span{
 color:#f7b1b1!important;
}
:root.smcity-gray-ui body>.bottom .builder-zone .dock-context .tools,
:root.smcity-gray-ui body>.bottom .builder-zone .dock-context #subcategories,
:root.smcity-gray-ui body>.bottom .builder-zone .build-dock #categories,
:root.smcity-gray-ui body>.bottom .builder-zone .dock-speed .playback,
:root.smcity-gray-ui body>.bottom .builder-zone .dock-context .dock-context-heading{
 background:var(--sm-dark-outer)!important;
 border-color:var(--sm-dark-stroke)!important;
 scrollbar-color:#5b626f transparent!important;
}
:root.smcity-gray-ui body>.bottom .builder-zone .dock-context .tool,
:root.smcity-gray-ui body>.bottom .builder-zone .dock-context #subcategories button,
:root.smcity-gray-ui body>.bottom .builder-zone .build-dock #categories button,
:root.smcity-gray-ui body>.bottom .builder-zone .dock-speed .playback button:not(.active),
:root.smcity-gray-ui body>.bottom .builder-zone .build-dock .dock-head>button{
 background:var(--sm-dark-card)!important;
 border-color:var(--sm-dark-stroke)!important;
 color:var(--sm-dark-text)!important;
 box-shadow:none!important;
}
:root.smcity-gray-ui body>.bottom .builder-zone .dock-context .tool :is(strong,small,.tool-capacity,.tool-parking,.tool-price),
:root.smcity-gray-ui body>.bottom .builder-zone .build-dock #categories button :is(.dock-group-name,.dock-group-icon),
:root.smcity-gray-ui body>.bottom .builder-zone .dock-context #subcategories button{
 color:var(--sm-dark-text)!important;
}
:root.smcity-gray-ui body>.bottom .builder-zone .dock-context .tool :is(.tool-parking,.tool-price){
 color:var(--sm-dark-muted)!important;
}
:root.smcity-gray-ui body>.bottom .builder-zone .dock-context .tool-icon{
 background:#282d35!important;
 color:#ffffff!important;
}
:root.smcity-gray-ui body>.bottom .builder-zone .dock-context .tool:hover,
:root.smcity-gray-ui body>.bottom .builder-zone .dock-context #subcategories button:hover,
:root.smcity-gray-ui body>.bottom .builder-zone .build-dock #categories button:hover{
 background:var(--sm-dark-hover)!important;
}
:root.smcity-gray-ui body>.bottom .builder-zone .dock-context .tool.active,
:root.smcity-gray-ui body>.bottom .builder-zone .dock-context #subcategories button.active,
:root.smcity-gray-ui body>.bottom .builder-zone .build-dock #categories button.active,
:root.smcity-gray-ui body>.bottom .builder-zone .dock-speed .playback button.active{
 background:#34404a!important;
 border-color:#93b2c5!important;
 color:#fff!important;
 box-shadow:inset 0 0 0 1px #708b9c!important;
}
:root.smcity-gray-ui body>.bottom .builder-zone .dock-context .tool.active .tool-icon{
 background:#3a4b57!important;
 color:#fff!important;
}
:root.smcity-gray-ui body>.bottom .builder-zone .build-dock .dock-head>button:hover,
:root.smcity-gray-ui body>.bottom .builder-zone .dock-speed .playback button:not(.active):hover{
 background:var(--sm-dark-hover)!important;
 border-color:#70808f!important;
}
:root.smcity-gray-ui :is(.hud,.city-panel,.map-tools,.city-advisor,#inspector,.citizens-dashboard,dialog,.member-card){
 background:var(--sm-dark-panel)!important;
 border-color:var(--sm-dark-stroke)!important;
 color:var(--sm-dark-text)!important;
 box-shadow:0 8px 30px rgba(0,0,0,.55)!important;
}
:root.smcity-gray-ui :is(.hud,.city-panel,.map-tools,.city-advisor,#inspector,.citizens-dashboard,dialog,.member-card) :is(h1,h2,h3,strong,summary,label){
 color:var(--sm-dark-text)!important;
}
:root.smcity-gray-ui :is(#inspector,.citizens-dashboard,dialog,.member-card) :is(p,small,em,.detail-row,.citizen-detail,.member-intro){
 color:var(--sm-dark-muted)!important;
}
:root.smcity-gray-ui #inspector :is(button.action,.detail-row,.signal-control,.tag),
:root.smcity-gray-ui :is(.citizens-top,.citizens-toolbar,.citizen-kpi,.citizen-signal-grid div,.citizen-issue,.citizen-person,.citizen-empty,.citizen-note,.citizen-more){
 background:var(--sm-dark-card)!important;
 border-color:var(--sm-dark-stroke)!important;
 color:var(--sm-dark-text)!important;
}
:root.smcity-gray-ui :is(.citizens-toolbar input,.citizens-filters button,dialog input,dialog select,dialog textarea,.member-card input){
 background:#202329!important;
 border-color:#525c68!important;
 color:#ffffff!important;
}
:root.smcity-gray-ui :is(.citizens-toolbar input,dialog input,dialog textarea,.member-card input)::placeholder{
 color:#a1aab7!important;
 opacity:1;
}
:root.smcity-gray-ui .citizens-filters button{
 background:var(--sm-dark-card)!important;
 color:var(--sm-dark-text)!important;
}
:root.smcity-gray-ui .citizens-filters button.active{
 background:#3a4c59!important;
 border-color:#7b9aae!important;
 color:#ffffff!important;
}
:root.smcity-gray-ui :is(.citizen-person:hover,.citizen-person:focus-visible){
 background:var(--sm-dark-hover)!important;
 border-color:#798897!important;
}
:root.smcity-gray-ui .citizen-bar-track{
 background:#3a4049!important;
}
:root.smcity-gray-ui dialog :is(p,li,small){
 color:var(--sm-dark-muted)!important;
}
:root.smcity-gray-ui dialog .smcity-menu-list>button{
 background:var(--sm-dark-card)!important;
 border-color:var(--sm-dark-stroke)!important;
 color:var(--sm-dark-text)!important;
}
:root.smcity-gray-ui dialog .smcity-menu-list>button:hover{
 background:var(--sm-dark-hover)!important;
 border-color:#788897!important;
}
:root.smcity-gray-ui dialog .smcity-menu-list>button>small{
 color:var(--sm-dark-muted)!important;
}
:root.smcity-gray-ui dialog :is(.actions button,button:not(.primary):not(.member-submit)){
 color:var(--sm-dark-text)!important;
}
:root.smcity-gray-ui dialog :is(.actions button:not(.primary),button:not(.primary):not(.member-submit)){
 background:var(--sm-dark-card)!important;
 border-color:var(--sm-dark-stroke)!important;
}
:root.smcity-gray-ui dialog :is(.actions button.primary,.member-submit){
 background:#395a70!important;
 color:#ffffff!important;
}
:root.smcity-gray-ui .member-card :is(.member-tabs button,.member-notice){
 background:var(--sm-dark-card)!important;
 color:var(--sm-dark-text)!important;
 border-color:var(--sm-dark-stroke)!important;
}
:root.smcity-gray-ui #cameraJoystick{
 background:rgba(17,20,26,.94)!important;
 border-color:#59626c!important;
}
:root.smcity-gray-ui #cameraJoystick button{
 color:#f2f4f8!important;
}
:root.smcity-gray-ui #cameraJoystick button:hover{
 background:#303743!important;
}
:root.smcity-gray-ui :is(.time-card,.need-card,.tool-hint){
 background:var(--sm-dark-card)!important;
 border-color:var(--sm-dark-stroke)!important;
 color:var(--sm-dark-text)!important;
}
:root.smcity-gray-ui body>.bottom .builder-zone .build-dock .dock-head .dock-display-actions>#toggleEyeComfort{
 background:#f0f3f7!important;
 border-color:#dce1e8!important;
 color:#15181c!important;
}
:root.smcity-gray-ui body>.bottom .builder-zone .build-dock .dock-head .dock-display-actions>#toggleBuildingLabels{
 background:var(--sm-dark-card)!important;
 border-color:var(--sm-dark-stroke)!important;
 color:#ffffff!important;
}
:root.smcity-gray-ui body>.bottom .builder-zone .build-dock .dock-head .dock-display-actions>#toggleBuildingLabels.is-hidden{
 background:#333b44!important;
 border-color:#7a8999!important;
}
/* The new control occupies a single icon slot beside the label toggle,
   including narrow iPhones where existing labels collapse to icons. */
body>.bottom .builder-zone .build-dock .dock-head>#toggleEyeComfort{
 order:2!important;flex:0 0 25px!important;width:25px!important;
 min-width:25px!important;max-width:25px!important;height:25px!important;
 min-height:25px!important;padding:1px!important;gap:0!important;
 font-size:15px!important;line-height:1!important;white-space:nowrap!important;
 border:1px solid #b8c7b9!important;border-radius:6px!important;
 background:#deebdf!important;color:#305d4d!important;
}
:root.smcity-gray-ui body>.bottom .builder-zone .build-dock .dock-head>#toggleEyeComfort[aria-pressed="true"]{
 background:#808d98!important;color:#fff!important;
 border-color:#687784!important;box-shadow:inset 0 0 0 1px #707f8b!important;
}
body>.bottom .builder-zone .build-dock .dock-head>#toggleEyeComfort:focus-visible{
 outline:2px solid #bd8b25!important;outline-offset:1px!important;
}
@media (max-width:1100px){
 body>.bottom .builder-zone .build-dock .dock-head>#toggleEyeComfort{
  flex-basis:23px!important;width:23px!important;min-width:23px!important;
  max-width:23px!important;height:23px!important;min-height:23px!important;
  font-size:14px!important;
 }
}
@media (max-width:720px){
 body>.bottom .builder-zone .build-dock .dock-head>#toggleEyeComfort{
  flex-basis:23px!important;width:23px!important;min-width:23px!important;
  max-width:23px!important;height:23px!important;min-height:23px!important;
  font-size:13px!important;
 }
}
@media (max-width:375px){
 body>.bottom .builder-zone .build-dock .dock-head>#toggleEyeComfort{
  flex-basis:21px!important;width:21px!important;min-width:21px!important;
  max-width:21px!important;height:23px!important;min-height:23px!important;
 }
}


/* SMCITY eye-comfort visibility repair — keep label and gray toggles together
   so responsive dock rules cannot separate or clip the new action. */
body>.bottom .builder-zone .build-dock .dock-head{
 overflow:visible!important;
}
body>.bottom .builder-zone .build-dock .dock-head>.dock-display-actions{
 order:2!important;flex:0 0 auto!important;
 display:inline-flex!important;align-items:center!important;justify-content:center!important;
 position:relative!important;z-index:10!important;
 gap:3px!important;min-width:0!important;padding:0!important;margin:0!important;
 overflow:visible!important;pointer-events:auto!important;
}
body>.bottom .builder-zone .build-dock .dock-head .dock-display-actions>button{
 display:inline-flex!important;align-items:center!important;justify-content:center!important;
 flex:0 0 auto!important;position:relative!important;z-index:10!important;
 height:25px!important;min-height:25px!important;max-height:25px!important;
 margin:0!important;border:1px solid #bfcdc4!important;border-radius:6px!important;
 background:#deebdf!important;color:#315846!important;box-shadow:none!important;
 padding:2px 5px!important;
 font:700 10px/1.2 'Noto Sans Thai',Tahoma,sans-serif!important;
 white-space:nowrap!important;touch-action:manipulation!important;cursor:pointer!important;
 pointer-events:auto!important;
}
body>.bottom .builder-zone .build-dock .dock-head .dock-display-actions>#toggleEyeComfort{
 width:29px!important;min-width:29px!important;max-width:29px!important;
 padding:0!important;font:700 11px/1 sans-serif!important;
 background:#afb9c3!important;border-color:#8999a5!important;color:#243440!important;
}
body>.bottom .builder-zone .build-dock .dock-head .dock-display-actions>#toggleBuildingLabels.is-hidden{
 background:#cfdfd4!important;border-color:#84ab94!important;color:#235b3e!important;
}
:root.smcity-gray-ui body>.bottom .builder-zone .build-dock .dock-head .dock-display-actions>#toggleEyeComfort{
 background:#596a79!important;color:#ffffff!important;border-color:#485b68!important;
}
:root.smcity-gray-ui body>.bottom .builder-zone .build-dock .dock-head .dock-display-actions>#toggleBuildingLabels{
 background:#d2d9df!important;border-color:#a1adb8!important;color:#32404d!important;
}
body>.bottom .builder-zone .build-dock .dock-head .dock-display-actions>button:focus-visible{
 outline:2px solid #b88b24!important;outline-offset:1px!important;
}
body>.bottom .builder-zone .build-dock .dock-head .dock-display-actions>#toggleEyeComfort:active{
 background:#677887!important;color:#fff!important;
}
@media(max-width:1100px){
 body>.bottom .builder-zone .build-dock .dock-head>.dock-display-actions{gap:2px!important}
 body>.bottom .builder-zone .build-dock .dock-head .dock-display-actions>button{
  height:23px!important;min-height:23px!important;max-height:23px!important;
  padding:1px 4px!important;font-size:9px!important;
 }
 body>.bottom .builder-zone .build-dock .dock-head .dock-display-actions>#toggleEyeComfort{
  width:25px!important;min-width:25px!important;max-width:25px!important;
  font-size:11px!important;
 }
}
@media(max-width:720px){
 body>.bottom .builder-zone .build-dock .dock-head>.dock-display-actions{gap:2px!important}
 body>.bottom .builder-zone .build-dock .dock-head .dock-display-actions>button{
  width:23px!important;min-width:23px!important;max-width:23px!important;
  height:23px!important;min-height:23px!important;max-height:23px!important;
  padding:0!important;font-size:11px!important;
 }
 body>.bottom .builder-zone .build-dock .dock-head .dock-display-actions>#toggleEyeComfort{
  width:23px!important;min-width:23px!important;max-width:23px!important;
 }
 body>.bottom .builder-zone .build-dock .dock-head #toggleBuildingLabelsText{display:none!important}
}
@media(max-width:375px){
 body>.bottom .builder-zone .build-dock .dock-head .dock-display-actions>button{
  width:21px!important;min-width:21px!important;max-width:21px!important;
 }
}

/* Override the original late-positioned toggle repair with true black controls. */
:root.smcity-gray-ui body>.bottom .builder-zone .build-dock .dock-head .dock-display-actions>button{
 background:#1b1d23!important;
 border-color:#454b55!important;
 color:#f6f7fa!important;
}
:root.smcity-gray-ui body>.bottom .builder-zone .build-dock .dock-head .dock-display-actions>#toggleEyeComfort[aria-pressed="true"]{
 background:#f0f3f7!important;
 border-color:#dce1e8!important;
 color:#13161c!important;
}
:root.smcity-gray-ui body>.bottom .builder-zone .build-dock .dock-head .dock-display-actions>button:hover{
 background:#313740!important;
}
:root.smcity-gray-ui body>.bottom .builder-zone .build-dock .dock-head .dock-display-actions>#toggleEyeComfort[aria-pressed="true"]:hover{
 background:#d6dfe8!important;color:#13161c!important;
}


/* SMCITY v2.4.3: collapse the WHOLE city control deck, not only its tools.
   Keep a compact one-line clock/speed rail with the reopen button. */
body>.bottom>.control-deck.tools-collapsed{
 display:flex!important;flex-direction:row!important;align-items:center!important;
 justify-content:center!important;grid-template-columns:none!important;
 width:min(660px,calc(100vw - 12px))!important;
 max-width:calc(100vw - 12px)!important;
 min-width:0!important;height:40px!important;min-height:40px!important;
 max-height:40px!important;margin:0 auto!important;
 padding:1px 4px!important;gap:0!important;
 transform:none!important;overflow:visible!important;
 border-radius:9px!important;
}
body>.bottom>.control-deck.tools-collapsed>.city-dashboard,
body>.bottom>.control-deck.tools-collapsed>.city-control-mini{
 display:none!important;visibility:hidden!important;
}
body>.bottom>.control-deck.tools-collapsed>.builder-zone{
 display:flex!important;flex:1 1 100%!important;align-items:center!important;
 width:100%!important;min-width:0!important;
 height:36px!important;min-height:0!important;max-height:36px!important;
 margin:0!important;padding:0!important;
 border:0!important;border-radius:8px!important;
 background:transparent!important;
 overflow:visible!important;
}
body>.bottom>.control-deck.tools-collapsed .builder-zone>.build-dock{
 display:flex!important;flex:1 1 100%!important;flex-direction:column!important;
 justify-content:center!important;
 width:100%!important;min-width:0!important;max-width:100%!important;
 height:36px!important;min-height:36px!important;max-height:36px!important;
 margin:0!important;padding:0!important;
 border:0!important;border-radius:8px!important;
 background:transparent!important;box-shadow:none!important;
 overflow:visible!important;
}
body>.bottom>.control-deck.tools-collapsed .builder-zone .build-dock .dock-body,
body>.bottom>.control-deck.tools-collapsed .builder-zone .build-dock #categories,
body>.bottom>.control-deck.tools-collapsed .builder-zone .build-dock .dock-context,
body>.bottom>.control-deck.tools-collapsed .builder-zone>footer{
 display:none!important;visibility:hidden!important;
 flex:0 0 0!important;width:0!important;height:0!important;
 min-height:0!important;max-height:0!important;
 margin:0!important;padding:0!important;overflow:hidden!important;
}
body>.bottom>.control-deck.tools-collapsed .builder-zone .build-dock .dock-head{
 display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;
 justify-content:space-between!important;align-items:center!important;
 flex:0 0 36px!important;
 width:100%!important;height:36px!important;min-height:36px!important;
 max-height:36px!important;min-width:0!important;
 margin:0!important;padding:2px 4px!important;gap:5px!important;
 background:transparent!important;border:0!important;
 overflow:hidden!important;
}
body>.bottom>.control-deck.tools-collapsed .builder-zone .dock-timebar{
 display:flex!important;flex-direction:row!important;align-items:center!important;
 flex:1 1 auto!important;justify-content:flex-start!important;
 width:auto!important;min-width:0!important;max-width:none!important;
 padding:0!important;margin:0!important;gap:9px!important;
 overflow:hidden!important;
}
body>.bottom>.control-deck.tools-collapsed .builder-zone .dock-clock{
 display:flex!important;flex-direction:row!important;align-items:center!important;
 flex:0 1 auto!important;min-width:0!important;width:auto!important;
 gap:5px!important;white-space:nowrap!important;overflow:hidden!important;
}
body>.bottom>.control-deck.tools-collapsed .builder-zone .dock-speed{
 display:flex!important;flex:0 0 auto!important;align-items:center!important;
 width:auto!important;min-width:0!important;max-width:none!important;
 margin:0!important;padding:0!important;
}
body>.bottom>.control-deck.tools-collapsed .builder-zone .dock-speed .playback{
 display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;
 gap:2px!important;margin:0!important;padding:2px!important;
}
body>.bottom>.control-deck.tools-collapsed .builder-zone .dock-display-actions,
body>.bottom>.control-deck.tools-collapsed .builder-zone #status,
body>.bottom>.control-deck.tools-collapsed .builder-zone .edition{
 display:none!important;visibility:hidden!important;
}
body>.bottom>.control-deck.tools-collapsed .builder-zone .dock-head>#toggleDock{
 display:inline-flex!important;order:3!important;flex:0 0 auto!important;
 align-items:center!important;justify-content:center!important;
 width:auto!important;max-width:none!important;min-width:27px!important;
 height:27px!important;min-height:27px!important;max-height:27px!important;
 margin:0!important;padding:2px 7px!important;
 white-space:nowrap!important;cursor:pointer!important;pointer-events:auto!important;
}
@media(max-width:720px){
 body>.bottom>.control-deck.tools-collapsed{
  height:36px!important;min-height:36px!important;max-height:36px!important;
  width:calc(100vw - 10px)!important;padding:1px 2px!important;
 }
 body>.bottom>.control-deck.tools-collapsed>.builder-zone,
 body>.bottom>.control-deck.tools-collapsed .builder-zone>.build-dock{
  height:33px!important;min-height:33px!important;max-height:33px!important;
 }
 body>.bottom>.control-deck.tools-collapsed .builder-zone .build-dock .dock-head{
  height:33px!important;min-height:33px!important;max-height:33px!important;
  flex-basis:33px!important;gap:2px!important;padding:1px 2px!important;
 }
 body>.bottom>.control-deck.tools-collapsed .builder-zone .dock-timebar{
  gap:3px!important;
 }
 body>.bottom>.control-deck.tools-collapsed .builder-zone .dock-clock{
  gap:3px!important;
 }
 body>.bottom>.control-deck.tools-collapsed .builder-zone .dock-speed .playback{
  gap:0!important;padding:1px!important;
 }
 body>.bottom>.control-deck.tools-collapsed .builder-zone .dock-head>#toggleDock{
  flex-basis:23px!important;width:23px!important;min-width:23px!important;
  max-width:23px!important;height:23px!important;min-height:23px!important;
  max-height:23px!important;padding:1px!important;
 }
}

/* Keep the proposed road visible while choosing whether to build. */
dialog.road-preview-confirm::backdrop{background:#163d3c12;backdrop-filter:none}

/* Construction confirmations sit beside the selected place, above the dock. */
dialog.construction-confirm{position:fixed;inset:auto;zoom:1!important;transform:none!important;margin:0;width:min(300px,calc(100vw - 20px));max-height:calc(100dvh - 20px);padding:14px;border-radius:14px;font-size:13px;overflow:auto}
dialog.construction-confirm h2{font-size:17px;margin:3px 0 8px}dialog.construction-confirm p{font-size:12px;line-height:1.6;margin:6px 0}dialog.construction-confirm .eyebrow{font-size:9px}
dialog.construction-confirm .actions{position:sticky;bottom:-1px;background:inherit;display:flex;gap:8px;padding-top:8px;margin-top:6px}dialog.construction-confirm .actions button{font-size:13px;min-height:40px;padding:8px 14px;flex:1}
dialog.construction-confirm::backdrop{background:#163d3c12;backdrop-filter:none}
.cancel-building-move{position:fixed;top:calc(env(safe-area-inset-top,0px) + 104px);left:50%;transform:translateX(-50%);z-index:90;background:#fff4ec;color:#8b3427;border:2px solid #c67056;border-radius:12px;padding:10px 18px;font-size:14px;font-weight:700;box-shadow:0 5px 18px #173f3d44;white-space:nowrap;touch-action:manipulation}.cancel-building-move[hidden]{display:none!important}

/* One clear menu surface, shared by account and cloud saves. */
dialog:has(.smcity-menu-list),dialog:has(#onlineSaveName),dialog:has(.account-identity){width:min(420px,calc(100vw - 28px));padding:24px;border:1px solid #d6e3db;border-radius:22px;background:#f8fbf6;color:#24483f;box-shadow:0 22px 80px #102e3540;max-height:calc(100dvh - 28px);overflow:auto}
.menu-heading{display:flex;align-items:center;gap:12px;margin-bottom:20px}.menu-heading h2{margin:2px 0 0}.menu-logo{display:grid;place-items:center;width:45px;height:45px;border-radius:15px;background:#245b4d;color:#fff5cc;font-size:26px;font-weight:800}.menu-heading .eyebrow{font-size:10px;letter-spacing:2px;color:#7c967f}
dialog .smcity-menu-list{gap:10px;margin:0}dialog .smcity-menu-list>button{display:flex;align-items:center;gap:12px;padding:15px 12px;border-radius:14px;background:#fff;border:1px solid #dae6dd;min-height:74px}dialog .smcity-menu-list>button>span:nth-child(2){flex:1}dialog .smcity-menu-list b{font-size:15px}dialog .smcity-menu-list small{display:block;font-size:11px;line-height:1.6;color:#73877b;margin-top:4px}.menu-symbol{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:#edf4e9;color:#39745d;font-size:24px}.menu-chevron{color:#8caa99;font-size:25px}.menu-resume{width:100%;margin-top:20px;padding:13px;border-radius:12px;font-size:14px;font-weight:700}
dialog.member-gate{width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:18px;border:0;border-radius:0;box-sizing:border-box;background:transparent;box-shadow:none;zoom:1}dialog.member-gate::backdrop{background:#183d3c80;backdrop-filter:blur(5px)}dialog.member-gate .member-card{box-sizing:border-box;width:min(390px,100%);max-height:calc(100dvh - 36px);padding:28px 24px 20px;background:#f8fbf6;border-radius:22px}dialog.member-gate:not([open]){display:none}.member-back{width:100%;margin-top:12px;min-height:42px;border-radius:10px;border:1px solid #d2e0d5;background:transparent;color:#496d5c;font-size:13px}.member-card .member-mark{background:#245b4d}.member-card .member-intro{font-size:12px}.member-card .member-notice{min-height:0}.account-identity{text-align:center;padding:8px 0 18px;overflow-wrap:anywhere}.account-avatar{display:grid;place-items:center;width:58px;height:58px;border-radius:20px;margin:0 auto 12px;background:#e5efdf;color:#52866a;font-size:34px}.account-identity strong{display:block;font-size:19px}.account-identity small{display:block;margin-top:6px;color:#748c7e}.account-password{padding:14px;border:1px solid #dae5dc;border-radius:12px}.account-password summary{cursor:pointer;font-weight:600}.account-password[open] summary{margin-bottom:15px}.account-footer{justify-content:space-between;margin-top:20px}
:root.smcity-gray-ui dialog.member-gate{background:transparent!important}:root.smcity-gray-ui .member-card,:root.smcity-gray-ui dialog:has(.account-identity),:root.smcity-gray-ui dialog:has(#onlineSaveName),:root.smcity-gray-ui dialog:has(.smcity-menu-list){background:#161b19;color:#f0f5ef;border-color:#38463e}:root.smcity-gray-ui .member-card input{background:#252d29;color:#fff;border-color:#475b4f}:root.smcity-gray-ui .member-tabs{background:#252d29}:root.smcity-gray-ui .member-tabs button.active{background:#405b4b;color:#fff}:root.smcity-gray-ui .menu-symbol,:root.smcity-gray-ui .account-avatar{background:#2d4035;color:#b7d6bc}
@media(max-width:500px){dialog:has(.smcity-menu-list),dialog:has(#onlineSaveName),dialog:has(.account-identity){padding:20px}dialog .smcity-menu-list>button{min-height:68px}.member-form input{font-size:16px}}


/* City Data: mission performance dashboard (compact counters, separate from opt-in logs). */
dialog:has(.mission-dashboard){width:min(780px,calc(100vw - 28px));}
.mission-dashboard h2{margin-top:5px;margin-bottom:2px;}
.mission-dashboard h3{font-size:16px;margin:20px 0 12px;}
.mission-dashboard .mission-sub,.mission-dashboard .mission-footnote{font-size:12px;line-height:1.7;color:var(--muted);}
.mission-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:18px 0;}
.mission-card{border:1px solid var(--line);border-radius:14px;padding:13px 14px;background:var(--paper);}
.mission-card small{display:block;font-size:11px;color:var(--muted);line-height:1.5;}
.mission-card strong{display:block;font-size:23px;line-height:1.45;margin-top:4px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;}
.mission-columns{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.mission-kind{margin:11px 0}.mission-kind>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;}
.mission-kind strong{white-space:nowrap}.mission-kind small{font-size:11px;color:var(--muted);}
.mission-track{margin:6px 0 2px;height:9px;border-radius:99px;background:var(--line);overflow:hidden;}
.mission-track i{display:block;height:100%;border-radius:99px;background:#3e9e79;}
.mission-outcomes{border:1px solid var(--line);border-radius:12px;padding:8px 12px;}
.mission-outcomes>div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:12px;}
.mission-outcomes>div:last-child{border-bottom:0}.mission-outcomes b{text-align:right;white-space:nowrap;}
.mission-chart{display:flex;align-items:end;gap:8px;border:1px solid var(--line);border-radius:14px;padding:14px 12px 10px;background:var(--paper);}
.mission-day{flex:1;min-width:0;text-align:center;display:flex;flex-direction:column;align-items:center;gap:3px;}
.mission-day-bars{position:relative;width:75%;max-width:56px;height:100px;background:var(--line);border-radius:6px 6px 2px 2px;overflow:hidden;}
.mission-day-bars i{position:absolute;bottom:0;left:0;right:0;display:block;}
.mission-day-all{background:#a8bcb3}.mission-day-success{background:#3e9e79;left:18%!important;right:18%!important;border-radius:4px 4px 0 0;}
.mission-day b{font-size:12px}.mission-day small{font-size:10px;color:var(--muted);}
:root.smcity-gray-ui .mission-card,:root.smcity-gray-ui .mission-chart{background:#1b1d23;border-color:#353b45;}
:root.smcity-gray-ui .mission-outcomes{border-color:#353b45}
@media(max-width:600px){.mission-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.mission-columns{grid-template-columns:1fr}.mission-card strong{font-size:20px}.mission-day-bars{height:68px;}}

/* Daily city report — a single 24-hour aggregate and the previous morning's statement. */
dialog:has(.daily-report-modal){width:min(860px,calc(100vw - 24px));max-height:calc(100dvh - 28px);overflow:auto}
.daily-report-body{font-size:13px;color:var(--text,#25463d);line-height:1.55}
.daily-report-body h2{font-size:22px;margin:5px 0 2px}
.daily-report-body .mission-sub{margin:6px 0;color:var(--muted,#6b8275)}
.daily-report-highlights{gap:8px;margin:12px 0}
.daily-report-highlights .mission-card{padding:10px 12px}
.daily-report-highlights .mission-card strong{font-size:18px;line-height:1.35}
.daily-report-sections{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.daily-report-section{border:1px solid var(--line,#dce5db);border-radius:14px;padding:10px 12px;min-width:0;background:var(--paper,#f9fbf8)}
.daily-report-section h3{margin:4px 0 8px;font-size:14px;line-height:1.4}
.daily-report-rows>div{display:flex;align-items:baseline;justify-content:space-between;gap:10px;border-top:1px solid var(--line,#dce5db);padding:6px 0;font-size:12px;line-height:1.45}
.daily-report-rows>div:first-child{border-top:0}
.daily-report-rows span{min-width:0;color:var(--muted,#748477);overflow-wrap:anywhere}
.daily-report-rows strong{flex-shrink:0;color:inherit;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.daily-report-body .mission-footnote{font-size:11px;line-height:1.6;color:var(--muted,#748477);margin:13px 0}
.daily-report-auto{position:fixed;top:calc(env(safe-area-inset-top,0px) + 58px);right:12px;z-index:110;width:min(455px,calc(100vw - 24px));max-height:min(77dvh,790px);overflow:auto;overscroll-behavior:contain;background:#fcfefa;color:#233f35;border:1px solid #b9cfc0;border-radius:18px;padding:14px;box-sizing:border-box;box-shadow:0 12px 54px #143b3966;font-size:12px}
.daily-report-auto .daily-report-topbar{position:sticky;top:-14px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;margin:-14px -14px 9px;padding:10px 14px;background:#27614b;color:white;border-radius:17px 17px 0 0;font-size:12px}
.daily-report-topbar button{flex:none;min-height:30px;min-width:32px;border-radius:8px;border:1px solid #ffffff66;background:#ffffff26;color:white;cursor:pointer}
.daily-report-auto .daily-report-highlights{grid-template-columns:repeat(2,minmax(0,1fr))}
.daily-report-auto .daily-report-highlights .mission-card strong{font-size:17px}
.daily-report-auto .daily-report-sections{grid-template-columns:1fr}
.daily-report-auto .daily-report-body h2{font-size:18px}
.daily-report-auto .daily-report-section{background:#f7faf5;border-color:#e0e8dc}
.daily-report-auto .daily-report-rows>div{font-size:12px}
.daily-report-auto>.actions{position:sticky;bottom:-14px;padding:10px 0;background:#fcfefa;justify-content:flex-end}
:root.smcity-gray-ui .daily-report-auto{background:#171d1a;color:#f0f6f0;border-color:#42574a;box-shadow:0 12px 52px #0009}
:root.smcity-gray-ui .daily-report-auto .daily-report-section,:root.smcity-gray-ui .daily-report-section{background:#1c2420;color:#eff7ef;border-color:#35473b}
:root.smcity-gray-ui .daily-report-auto .mission-card{background:#1c2420;color:#eff7ef;border-color:#35473b}
:root.smcity-gray-ui .daily-report-auto>.actions{background:#171d1a}
@media(max-width:680px){.daily-report-sections{grid-template-columns:1fr}.daily-report-auto{top:calc(env(safe-area-inset-top,0px) + 48px);right:6px;width:min(400px,calc(100vw - 12px));max-height:72dvh;padding:10px}.daily-report-auto .daily-report-topbar{top:-10px;margin:-10px -10px 8px;padding:8px 10px}.daily-report-highlights .mission-card strong{font-size:16px}}

/* Consistent dismiss control on every city dialog. Pinned outside dynamic content
   so changing async save screens never removes it. */
#dialog > .dialog-close-top{position:absolute;top:9px;right:9px;z-index:10;display:grid;place-items:center;width:33px;height:33px;min-width:33px;min-height:33px;padding:0;border:1px solid #cbdcd0;border-radius:10px;background:#f0f5ee;color:#37584a;font:700 24px/1 system-ui,sans-serif;cursor:pointer;touch-action:manipulation;box-shadow:0 1px 5px #143c341b}
#dialog > .dialog-close-top:hover,#dialog > .dialog-close-top:focus-visible{background:#e1eee3;outline:2px solid #7ba890;outline-offset:1px}
#dialog > #dialogContent{padding-right:26px}
#dialog.construction-confirm > .dialog-close-top{top:5px;right:6px;width:29px;height:29px;min-width:29px;min-height:29px;font-size:21px}
#dialog.construction-confirm > #dialogContent{padding-right:27px}
:root.smcity-gray-ui #dialog > .dialog-close-top{background:#29362f;color:#f1f8f0;border-color:#52695a;box-shadow:none}
:root.smcity-gray-ui #dialog > .dialog-close-top:hover{background:#3c5143}
@media(max-width:540px){#dialog > .dialog-close-top{width:31px;height:31px;min-width:31px;min-height:31px;top:7px;right:7px}#dialog > #dialogContent{padding-right:23px}}

/* Selected-building contextual actions: anchored on the rendered building.
   One light DOM element updates its position, never a list of 3D labels. */
#buildingQuickActions.building-quick-actions{position:fixed;z-index:36;display:flex;align-items:center;justify-content:center;gap:6px;transform:translate(-50%,-50%);padding:6px;border:1px solid #c8e4d3;border-radius:15px;background:rgba(246,252,247,.97);color:#244538;box-shadow:0 6px 22px rgba(18,55,43,.28);pointer-events:auto;touch-action:manipulation;isolation:isolate;white-space:nowrap;animation:building-actions-pop .16s ease-out both}
#buildingQuickActions[hidden]{display:none!important}
#buildingQuickActions .building-quick-action{display:flex;align-items:center;justify-content:center;gap:5px;min-width:63px;min-height:37px;padding:7px 10px;border-radius:10px;border:1px solid transparent;background:transparent;color:inherit;font:700 12px/1.2 'Noto Sans Thai',Tahoma,Arial,sans-serif;cursor:pointer;touch-action:manipulation}
#buildingQuickActions .building-quick-move{background:#e0f0e7;color:#235c43}
#buildingQuickActions .building-quick-demolish{background:#fae9e6;color:#a74031}
#buildingQuickActions .building-quick-action:focus-visible{outline:2px solid #538e77;outline-offset:2px}
#buildingQuickActions .building-quick-action:active{transform:scale(.96)}
#buildingQuickActions .building-quick-action svg{flex:none}
@keyframes building-actions-pop{from{opacity:0;scale:.88}to{opacity:1;scale:1}}
:root.smcity-gray-ui #buildingQuickActions{background:#19211e;color:#f7faf6;border-color:#4c6b58;box-shadow:0 6px 22px #0008}
:root.smcity-gray-ui #buildingQuickActions .building-quick-move{background:#294737;color:#d3f6d9}
:root.smcity-gray-ui #buildingQuickActions .building-quick-demolish{background:#4b2827;color:#ffd6d0}
@media(max-width:600px){#buildingQuickActions.building-quick-actions{gap:4px;padding:4px;border-radius:12px}#buildingQuickActions .building-quick-action{min-height:39px;min-width:58px;padding:7px 8px;font-size:11px}}
@media(prefers-reduced-motion:reduce){#buildingQuickActions.building-quick-actions{animation:none}}

/* SMCITY left-side quick-access rail: camera first, then five frequently used city modes.
   It sits outside the build dock and is still accessible with the dock folded. */
#cityLeftRail.city-left-rail{
 position:fixed!important;
 top:clamp(83px,14vh,142px)!important;
 left:calc(11px + env(safe-area-inset-left,0px))!important;
 right:auto!important;
 width:76px!important;
 max-height:calc(100dvh - clamp(180px,30vh,260px))!important;
 display:flex!important;flex-direction:column!important;align-items:center!important;
 gap:8px!important;z-index:26!important;
 overflow-x:hidden!important;overflow-y:auto!important;
 overscroll-behavior:contain!important;
 scrollbar-width:none!important;
 pointer-events:auto!important;
 touch-action:pan-y!important;
 -webkit-overflow-scrolling:touch!important;
}
#cityLeftRail::-webkit-scrollbar{display:none}
#cityLeftRail #cameraJoystick{
 position:relative!important;inset:auto!important;top:auto!important;right:auto!important;
 width:72px!important;height:72px!important;min-width:72px!important;min-height:72px!important;
 flex:0 0 72px!important;margin:0 auto!important;
}
#cityLeftRail #cameraJoystick[hidden]{display:none!important}
#cityQuickModes.city-quick-modes{
 display:flex!important;flex:0 0 auto!important;flex-direction:column!important;
 align-items:center!important;gap:5px!important;width:100%!important;
 padding:0 0 3px!important;margin:0!important;
 border:0!important;background:none!important;
}
#cityQuickModes [data-city-shortcut]{
 box-sizing:border-box!important;
 display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
 width:72px!important;min-width:72px!important;max-width:72px!important;
 min-height:47px!important;padding:4px 3px!important;margin:0!important;
 border-radius:11px!important;border:1px solid rgba(124,157,139,.68)!important;
 color:#29553f!important;background:rgba(244,251,244,.93)!important;
 box-shadow:0 2px 7px rgba(18,56,39,.15)!important;
 font:700 9px/1.35 "Noto Sans Thai",Tahoma,sans-serif!important;
 cursor:pointer!important;touch-action:manipulation!important;
 -webkit-tap-highlight-color:transparent!important;
 user-select:none!important;
}
#cityQuickModes [data-city-shortcut] .quick-mode-icon{font-size:19px!important;line-height:1.15!important;display:block!important}
#cityQuickModes [data-city-shortcut] .quick-mode-name{display:block!important;white-space:nowrap!important}
#cityQuickModes [data-city-shortcut]:hover{background:#e4f2e5!important;border-color:#7dab8f!important}
#cityQuickModes [data-city-shortcut].active,
#cityQuickModes [data-city-shortcut][aria-pressed="true"]{
 background:#c7e6d3!important;border-color:#4c9f74!important;
 box-shadow:0 0 0 1px rgba(76,159,116,.36),0 3px 10px rgba(29,92,57,.20)!important;
}
#cityQuickModes [data-city-shortcut]:focus-visible{outline:2px solid #397c5a!important;outline-offset:2px!important}
:root.smcity-gray-ui #cityQuickModes [data-city-shortcut]{
 color:#f1f5f3!important;background:rgba(24,28,32,.96)!important;
 border-color:#52615b!important;box-shadow:0 2px 9px #0008!important;
}
:root.smcity-gray-ui #cityQuickModes [data-city-shortcut]:hover{background:#303c35!important}
:root.smcity-gray-ui #cityQuickModes [data-city-shortcut].active,
:root.smcity-gray-ui #cityQuickModes [data-city-shortcut][aria-pressed="true"]{
 background:#345a46!important;color:#f5fff7!important;border-color:#75b992!important;
}
/* Keep details on the right, away from the camera and action rail at left. */
#inspector:not(.hidden){
 right:12px!important;
 width:min(356px,calc(100vw - 112px))!important;
}
.citizens-dashboard:not(.hidden){
 right:12px!important;
 left:auto!important;
 width:min(440px,calc(100vw - 112px))!important;
}
@media(max-width:720px){
 #cityLeftRail.city-left-rail{
  top:calc(clamp(63px,11vh,90px) + env(safe-area-inset-top,0px))!important;
  left:calc(6px + env(safe-area-inset-left,0px))!important;
  right:auto!important;
  width:66px!important;gap:5px!important;
  max-height:calc(100dvh - clamp(171px,31vh,242px))!important;
 }
 #cityLeftRail #cameraJoystick{
  width:64px!important;height:64px!important;min-width:64px!important;min-height:64px!important;
  flex-basis:64px!important;
 }
 #cityQuickModes [data-city-shortcut]{
  width:64px!important;min-width:64px!important;max-width:64px!important;
  min-height:44px!important;padding:3px 1px!important;
  border-radius:10px!important;font-size:8.6px!important;
 }
 #cityQuickModes [data-city-shortcut] .quick-mode-icon{font-size:18px!important}
 #cityQuickModes.city-quick-modes{gap:4px!important}
 #inspector:not(.hidden){
  right:7px!important;width:calc(100vw - 96px)!important;
  max-height:calc(100dvh - 240px)!important;
 }
 .citizens-dashboard:not(.hidden){
  left:78px!important;right:7px!important;width:auto!important;
 }
}
@media(prefers-reduced-motion:reduce){
 #cityQuickModes [data-city-shortcut]{transition:none!important}
}

/* ============================================================================
   SMCITY 3.0 BACKUP -> unified city information design system.
   Presentation-only. The simulation, save format and event wiring are unchanged.
   ========================================================================= */
:root{
 --sm-panel-bg:#f6faf5;
 --sm-panel-card:#ffffff;
 --sm-panel-soft:#ecf4ed;
 --sm-panel-ink:#244637;
 --sm-panel-muted:#667c6e;
 --sm-panel-line:#d6e5d8;
 --sm-panel-head:#e8f2e9;
 --sm-panel-accent:#347953;
 --sm-panel-accent-soft:#d8efdf;
 --sm-panel-danger:#ac4c42;
 --sm-panel-danger-soft:#fff0ec;
 --sm-panel-shadow:0 18px 50px rgba(28,55,40,.23),0 3px 12px rgba(28,55,40,.10);
}
:root.smcity-gray-ui{
 --sm-panel-bg:#151a17;
 --sm-panel-card:#222b25;
 --sm-panel-soft:#1b241e;
 --sm-panel-ink:#f4f7f3;
 --sm-panel-muted:#adbeaf;
 --sm-panel-line:#3c5042;
 --sm-panel-head:#202e25;
 --sm-panel-accent:#94d8ad;
 --sm-panel-accent-soft:#314e3a;
 --sm-panel-danger:#ffada5;
 --sm-panel-danger-soft:#482b2b;
 --sm-panel-shadow:0 18px 55px #000a,0 3px 12px #0006;
}
/* One visual language for inspector, both people dashboards, daily pop-up,
   every modal and account windows. Native close/outside-click behavior stays. */
#inspector,.citizens-dashboard,#dialog,.daily-report-auto,.member-card{
 box-sizing:border-box!important;
 color:var(--sm-panel-ink)!important;
 background:var(--sm-panel-bg)!important;
 border:1px solid var(--sm-panel-line)!important;
 border-radius:18px!important;
 box-shadow:var(--sm-panel-shadow)!important;
 font-family:"Noto Sans Thai",Tahoma,Arial,sans-serif!important;
 font-size:12px!important;
 line-height:1.5!important;
}
#inspector:not(.hidden){
 top:clamp(76px,11vh,105px)!important;
 width:min(392px,calc(100vw - 120px))!important;
 max-height:calc(100dvh - 230px)!important;
 overflow-x:hidden!important;
 overflow-y:auto!important;
 overscroll-behavior:contain!important;
 padding:12px!important;
 scrollbar-gutter:stable;
}
#inspector #inspectContent{
 display:grid!important;
 grid-template-columns:repeat(2,minmax(0,1fr))!important;
 gap:8px!important;
 align-items:stretch!important;
 color:var(--sm-panel-ink)!important;
}
#inspector .sm-inspector-heading{
 grid-column:1/-1!important;
 display:flex!important;align-items:center!important;
 gap:11px!important;
 background:var(--sm-panel-head)!important;
 padding:13px 45px 12px 12px!important;
 margin:-12px -12px 4px!important;
 border-bottom:1px solid var(--sm-panel-line)!important;
 border-radius:17px 17px 12px 12px!important;
 min-width:0!important;
}
#inspector .sm-inspector-mark{
 width:38px!important;height:38px!important;min-width:38px!important;
 border-radius:12px!important;display:grid!important;place-items:center!important;
 background:var(--sm-panel-accent-soft)!important;color:var(--sm-panel-accent)!important;
 font:800 23px/1 system-ui,sans-serif!important;
}
#inspector .sm-inspector-heading-text{min-width:0!important;flex:1!important}
#inspector .sm-inspector-heading .tag{
 display:block!important;visibility:visible!important;
 font:800 9px/1.4 "Noto Sans Thai",Tahoma,sans-serif!important;
 letter-spacing:.3px!important;color:var(--sm-panel-muted)!important;
 background:none!important;border:0!important;padding:0!important;margin:0 0 3px!important;
}
#inspector .sm-inspector-heading h2{
 color:var(--sm-panel-ink)!important;
 margin:0!important;padding:0!important;
 font-size:16px!important;line-height:1.35!important;font-weight:800!important;
 letter-spacing:-.25px!important;overflow-wrap:anywhere!important;
}
#inspector button.close,
.citizens-dashboard .citizens-close,#dialog>.dialog-close-top{
 box-sizing:border-box!important;
 display:grid!important;place-items:center!important;
 width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;
 border:1px solid var(--sm-panel-line)!important;
 border-radius:10px!important;background:var(--sm-panel-card)!important;
 color:var(--sm-panel-ink)!important;font:500 22px/1 system-ui,sans-serif!important;
 box-shadow:0 1px 3px #0001!important;cursor:pointer!important;
}
#inspector button.close{top:11px!important;right:10px!important;z-index:3!important}
#inspector button.close:hover,.citizens-dashboard .citizens-close:hover,#dialog>.dialog-close-top:hover{
 color:var(--sm-panel-danger)!important;background:var(--sm-panel-danger-soft)!important;
}
#inspector :is(.detail-row,.selected-car-journey .detail-row){
 box-sizing:border-box!important;min-width:0!important;
 display:flex!important;flex-direction:column!important;align-items:flex-start!important;
 justify-content:space-between!important;gap:5px!important;
 padding:10px!important;margin:0!important;
 background:var(--sm-panel-card)!important;
 border:1px solid var(--sm-panel-line)!important;
 border-radius:11px!important;
 line-height:1.4!important;
}
#inspector .detail-row span{
 font-size:10px!important;line-height:1.45!important;
 color:var(--sm-panel-muted)!important;
 max-width:100%!important;overflow-wrap:anywhere!important;
}
#inspector .detail-row strong{
 font-size:12px!important;font-weight:800!important;
 color:var(--sm-panel-ink)!important;
 max-width:100%!important;line-height:1.45!important;
 white-space:normal!important;overflow-wrap:anywhere!important;
 text-align:left!important;font-variant-numeric:tabular-nums!important;
}
#inspector #inspectContent>h3{
 grid-column:1/-1!important;
 padding:10px 2px 1px!important;margin:4px 0 0!important;
 border-top:1px solid var(--sm-panel-line)!important;
 color:var(--sm-panel-ink)!important;
 font-size:12px!important;font-weight:800!important;
}
#inspector #inspectContent>p{
 grid-column:1/-1!important;
 background:var(--sm-panel-soft)!important;
 border-radius:10px!important;
 padding:9px 11px!important;margin:0!important;
 color:var(--sm-panel-muted)!important;line-height:1.65!important;
 font-size:11px!important;overflow-wrap:anywhere!important;
}
#inspector :is(.signal-control,.inspect-list,.selected-car-journey,.tourist-itinerary){
 grid-column:1/-1!important;min-width:0!important;
}
#inspector .selected-car-journey{
 display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
 gap:7px!important;padding:9px!important;
 border:1px solid var(--sm-panel-line)!important;
 border-radius:13px!important;background:var(--sm-panel-soft)!important;
}
#inspector .selected-car-journey .detail-row{background:var(--sm-panel-card)!important}
#inspector .signal-control{
 margin:2px 0 0!important;
 padding:12px!important;border-radius:13px!important;
 background:var(--sm-panel-soft)!important;border:1px solid var(--sm-panel-line)!important;
}
#inspector .signal-control :is(h3,.signal-note){
 display:block!important;color:var(--sm-panel-ink)!important;
 font-size:11px!important;line-height:1.6!important;margin:4px 0 7px!important;
}
#inspector .signal-control .signal-note{color:var(--sm-panel-muted)!important;font-size:10px!important}
#inspector :is(.signal-current,.signal-direction,.signal-times label){
 background:var(--sm-panel-card)!important;
 border:1px solid var(--sm-panel-line)!important;
 border-radius:10px!important;color:var(--sm-panel-ink)!important;
}
#inspector .signal-current{padding:9px!important}
#inspector .signal-current strong{font-size:12px!important}
#inspector .signal-current small{color:var(--sm-panel-muted)!important}
#inspector .signal-times input{
 max-width:72px!important;min-height:33px!important;
 background:var(--sm-panel-card)!important;color:var(--sm-panel-ink)!important;
 border:1px solid var(--sm-panel-line)!important;border-radius:8px!important;
}
#inspector button.action{
 box-sizing:border-box!important;
 display:inline-flex!important;align-items:center!important;justify-content:center!important;
 width:100%!important;min-width:0!important;min-height:35px!important;
 padding:7px 9px!important;margin:0!important;
 color:var(--sm-panel-ink)!important;
 background:var(--sm-panel-card)!important;border:1px solid var(--sm-panel-line)!important;
 border-radius:10px!important;box-shadow:none!important;
 font:700 10px/1.5 "Noto Sans Thai",Tahoma,sans-serif!important;
 text-align:center!important;white-space:normal!important;overflow-wrap:anywhere!important;
 cursor:pointer!important;
}
#inspector button.action:hover{
 background:var(--sm-panel-accent-soft)!important;border-color:var(--sm-panel-accent)!important;
}
#inspector button.action[data-action="demolish"],
#inspector button.action[data-action="tow"]{
 background:var(--sm-panel-danger-soft)!important;color:var(--sm-panel-danger)!important;
 border-color:color-mix(in srgb,var(--sm-panel-danger) 40%,var(--sm-panel-line))!important;
}
#inspector .inspect-list{
 display:flex!important;flex-wrap:wrap!important;align-items:flex-start!important;
 gap:5px!important;padding:3px 0!important;max-height:200px!important;overflow-y:auto!important;
}
#inspector .inspect-list button.action{
 width:auto!important;flex:0 1 auto!important;min-height:30px!important;
 padding:5px 9px!important;font-size:10px!important;
}
#inspector :is(button,input):focus-visible,
.citizens-dashboard :is(button,input):focus-visible,
#dialog :is(button,input,select,textarea):focus-visible{
 outline:2px solid var(--sm-panel-accent)!important;outline-offset:2px!important;
}
/* Citizen and visitor dashboards share exactly the same fixed header,
   search/filter shelf, content hierarchy and scroll behavior. */
.citizens-dashboard:not(.hidden){
 top:clamp(76px,11vh,105px)!important;
 height:min(680px,calc(100dvh - 220px))!important;
 max-height:calc(100dvh - 180px)!important;
 min-height:0!important;width:min(500px,calc(100vw - 120px))!important;
 display:flex!important;flex-direction:column!important;overflow:hidden!important;
}
.citizens-dashboard .citizens-top{
 flex:0 0 auto!important;
 display:flex!important;justify-content:space-between!important;align-items:flex-start!important;
 gap:12px!important;padding:14px 14px 12px!important;
 background:var(--sm-panel-head)!important;border-bottom:1px solid var(--sm-panel-line)!important;
 border-radius:17px 17px 0 0!important;
}
.citizens-dashboard .sm-panel-title{min-width:0!important;flex:1!important}
.citizens-dashboard .sm-panel-kicker{
 display:block!important;color:var(--sm-panel-accent)!important;
 font:800 9px/1.2 system-ui,sans-serif!important;
 letter-spacing:1px!important;margin:0 0 4px!important;
}
.citizens-dashboard .citizens-top h2{
 font-size:17px!important;font-weight:800!important;
 color:var(--sm-panel-ink)!important;line-height:1.35!important;
 margin:0!important;letter-spacing:-.2px!important;
}
.citizens-dashboard .citizens-top h2 span{
 color:var(--sm-panel-muted)!important;font-size:10px!important;
 font-weight:600!important;
}
.citizens-dashboard .sm-panel-description{
 display:block!important;font-size:10px!important;line-height:1.5!important;
 color:var(--sm-panel-muted)!important;margin:5px 0 0!important;
}
.citizens-dashboard .citizens-toolbar{
 flex:0 0 auto!important;
 padding:10px 12px!important;background:var(--sm-panel-bg)!important;
 border-bottom:1px solid var(--sm-panel-line)!important;
}
.citizens-dashboard .citizens-toolbar label{
 color:var(--sm-panel-muted)!important;font-size:10px!important;
 margin:0 0 5px!important;
}
.citizens-dashboard .citizens-toolbar input{
 box-sizing:border-box!important;
 width:100%!important;height:36px!important;padding:7px 10px!important;
 background:var(--sm-panel-card)!important;color:var(--sm-panel-ink)!important;
 border:1px solid var(--sm-panel-line)!important;border-radius:10px!important;
 font-size:12px!important;
}
.citizens-dashboard .citizens-filters{
 display:flex!important;gap:5px!important;padding:9px 0 2px!important;
 overflow-x:auto!important;scrollbar-width:thin!important;
}
.citizens-dashboard .citizens-filters button{
 flex:0 0 auto!important;min-height:30px!important;
 border:1px solid var(--sm-panel-line)!important;
 background:var(--sm-panel-card)!important;
 color:var(--sm-panel-muted)!important;
 padding:5px 10px!important;border-radius:99px!important;
 font-size:10px!important;font-weight:700!important;
}
.citizens-dashboard .citizens-filters button.active{
 color:#ffffff!important;background:#347953!important;
 border-color:#347953!important;
}
.citizens-dashboard .citizens-dashboard-body{
 flex:1 1 auto!important;min-height:0!important;
 overflow-y:auto!important;overscroll-behavior:contain!important;
 padding:12px!important;background:var(--sm-panel-bg)!important;
 scrollbar-gutter:stable!important;
}
.citizens-dashboard .citizen-kpis{
 display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
 gap:7px!important;margin:0 0 12px!important;
}
.citizens-dashboard .citizen-kpi{
 min-width:0!important;padding:11px 9px!important;
 background:var(--sm-panel-card)!important;border:1px solid var(--sm-panel-line)!important;
 border-radius:12px!important;box-shadow:0 1px 2px #00000006!important;
}
.citizens-dashboard .citizen-kpi b{
 font-size:clamp(14px,1.6vw,20px)!important;line-height:1.25!important;
 font-weight:800!important;color:var(--sm-panel-accent)!important;
 white-space:normal!important;overflow-wrap:anywhere!important;
 font-variant-numeric:tabular-nums!important;
}
.citizens-dashboard .citizen-kpi span{
 font-size:9px!important;line-height:1.45!important;
 color:var(--sm-panel-muted)!important;margin:5px 0 0!important;
}
.citizens-dashboard .citizen-kpi.urgent{
 background:var(--sm-panel-danger-soft)!important;
 border-color:color-mix(in srgb,var(--sm-panel-danger) 35%,var(--sm-panel-line))!important;
}
.citizens-dashboard .citizen-kpi.urgent b{color:var(--sm-panel-danger)!important}
.citizens-dashboard .citizen-section{
 min-width:0!important;margin:0 0 10px!important;
 padding:12px!important;background:var(--sm-panel-card)!important;
 border:1px solid var(--sm-panel-line)!important;border-radius:13px!important;
}
.citizens-dashboard .citizen-section-head{
 display:flex!important;align-items:baseline!important;
 justify-content:space-between!important;gap:7px!important;margin-bottom:9px!important;
}
.citizens-dashboard .citizen-section h3{
 color:var(--sm-panel-ink)!important;font-size:12px!important;font-weight:800!important;
 margin:0!important;
}
.citizens-dashboard .citizen-section-head small{color:var(--sm-panel-muted)!important;font-size:9px!important}
.citizens-dashboard .citizen-pair{gap:9px!important;align-items:stretch!important}
.citizens-dashboard .citizen-signal-grid{gap:6px!important}
.citizens-dashboard .citizen-signal-grid div{
 background:var(--sm-panel-soft)!important;color:var(--sm-panel-ink)!important;
 border:1px solid var(--sm-panel-line)!important;border-radius:9px!important;
 padding:8px!important;
}
.citizens-dashboard .citizen-signal-grid b{color:var(--sm-panel-accent)!important;font-variant-numeric:tabular-nums!important}
.citizens-dashboard .citizen-signal-grid small{color:var(--sm-panel-muted)!important}
.citizens-dashboard .citizen-bar-row{color:var(--sm-panel-muted)!important;gap:6px!important}
.citizens-dashboard .citizen-bar-track{background:var(--sm-panel-soft)!important}
.citizens-dashboard .citizen-person{
 box-sizing:border-box!important;display:flex!important;align-items:center!important;
 gap:10px!important;min-height:51px!important;margin:5px 0!important;
 padding:9px 11px!important;color:var(--sm-panel-ink)!important;
 background:var(--sm-panel-card)!important;border:1px solid var(--sm-panel-line)!important;
 border-radius:11px!important;text-align:left!important;
}
.citizens-dashboard .citizen-person:hover{
 border-color:var(--sm-panel-accent)!important;
 background:var(--sm-panel-accent-soft)!important;
}
.citizens-dashboard .citizen-person b{font-size:11px!important;color:var(--sm-panel-ink)!important}
.citizens-dashboard .citizen-person small{font-size:10px!important;color:var(--sm-panel-muted)!important}
.citizens-dashboard .citizen-person-score strong{font-size:13px!important;color:var(--sm-panel-accent)!important}
.citizens-dashboard .citizen-person-score em{color:var(--sm-panel-muted)!important}
.citizens-dashboard .citizen-more{
 display:block!important;min-height:35px!important;
 width:100%!important;background:var(--sm-panel-soft)!important;
 border:1px solid var(--sm-panel-line)!important;border-radius:10px!important;
 color:var(--sm-panel-ink)!important;
}
.citizens-dashboard .citizen-empty,.citizens-dashboard .citizen-note,.citizens-dashboard .citizen-issue{
 background:var(--sm-panel-soft)!important;color:var(--sm-panel-muted)!important;
 border-color:var(--sm-panel-line)!important;border-radius:10px!important;
}
/* Daily report: consistent header, compact headline stats, readable two-column
   section cards on desktop, a single uninterrupted column on mobile. */
#dialog:has(.daily-report-modal){
 box-sizing:border-box!important;
 width:min(875px,calc(100vw - 28px))!important;
 max-height:calc(100dvh - 30px)!important;
 padding:16px!important;
}
.sm-report-header{
 padding:14px 14px 12px!important;margin:0 0 12px!important;
 background:var(--sm-panel-head)!important;border:1px solid var(--sm-panel-line)!important;
 border-radius:13px!important;
}
.daily-report-body .sm-report-header .eyebrow{
 display:block!important;color:var(--sm-panel-accent)!important;
 font:800 10px/1.3 system-ui,sans-serif!important;
 letter-spacing:1px!important;
}
.daily-report-body .sm-report-header h2{
 font-size:21px!important;font-weight:800!important;
 line-height:1.4!important;color:var(--sm-panel-ink)!important;
 margin:5px 0 2px!important;padding-right:30px!important;
}
.daily-report-body .sm-report-header .mission-sub{
 color:var(--sm-panel-muted)!important;
 font-size:11px!important;line-height:1.6!important;margin:2px 0!important;
}
.daily-report-body .daily-report-highlights{
 display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
 gap:8px!important;margin:11px 0 13px!important;
}
.daily-report-body .mission-card{
 box-sizing:border-box!important;min-width:0!important;
 background:var(--sm-panel-card)!important;border:1px solid var(--sm-panel-line)!important;
 border-radius:12px!important;padding:12px!important;
}
.daily-report-body .mission-card small{
 color:var(--sm-panel-muted)!important;font-size:10px!important;
}
.daily-report-body .mission-card strong{
 color:var(--sm-panel-accent)!important;font-size:clamp(15px,1.65vw,22px)!important;
 line-height:1.35!important;overflow-wrap:anywhere!important;
 font-variant-numeric:tabular-nums!important;
}
.daily-report-body .daily-report-sections{
 display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
 gap:10px!important;
}
.daily-report-body .daily-report-section{
 box-sizing:border-box!important;min-width:0!important;
 padding:14px!important;margin:0!important;
 border:1px solid var(--sm-panel-line)!important;
 border-radius:13px!important;background:var(--sm-panel-card)!important;
}
.daily-report-body .daily-report-section h3{
 font-size:13px!important;font-weight:800!important;
 color:var(--sm-panel-ink)!important;margin:0 0 7px!important;
}
.daily-report-body .daily-report-rows>div{
 display:flex!important;align-items:baseline!important;justify-content:space-between!important;
 gap:9px!important;min-width:0!important;
 padding:7px 0!important;border-color:var(--sm-panel-line)!important;
}
.daily-report-body .daily-report-rows span{
 color:var(--sm-panel-muted)!important;
 min-width:0!important;overflow-wrap:anywhere!important;
}
.daily-report-body .daily-report-rows strong{
 color:var(--sm-panel-ink)!important;
 min-width:0!important;overflow-wrap:anywhere!important;
 flex:0 1 auto!important;
 text-align:right!important;font-variant-numeric:tabular-nums!important;
}
.daily-report-body .mission-footnote{
 color:var(--sm-panel-muted)!important;font-size:10px!important;
 line-height:1.65!important;margin:13px 2px!important;
}
.daily-report-auto{
 width:min(470px,calc(100vw - 24px))!important;
 max-height:min(79dvh,800px)!important;
 padding:12px!important;
}
.daily-report-auto .daily-report-topbar{
 border-radius:13px 13px 0 0!important;
 background:var(--sm-panel-head)!important;color:var(--sm-panel-ink)!important;
 border-bottom:1px solid var(--sm-panel-line)!important;
 margin:-12px -12px 11px!important;padding:11px 12px!important;
 top:-12px!important;
}
.daily-report-auto .daily-report-topbar button{
 color:var(--sm-panel-ink)!important;background:var(--sm-panel-card)!important;
 border:1px solid var(--sm-panel-line)!important;border-radius:9px!important;
}
.daily-report-auto .daily-report-body .daily-report-highlights{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.daily-report-auto .daily-report-body .daily-report-sections{grid-template-columns:1fr!important}
.daily-report-auto .daily-report-body .sm-report-header h2{font-size:17px!important}
.daily-report-auto .daily-report-body .mission-card strong{font-size:16px!important}
.daily-report-auto .daily-report-body .daily-report-section{background:var(--sm-panel-card)!important}
.daily-report-auto>.actions{background:var(--sm-panel-bg)!important}
/* The same button, input and section treatment for save/load, logs,
   AI export, confirmation prompts, city reports and account panels. */
#dialog:not(.construction-confirm){
 background:var(--sm-panel-bg)!important;
 color:var(--sm-panel-ink)!important;
 border-radius:18px!important;
 padding:18px!important;
 max-height:calc(100dvh - 30px)!important;
 overscroll-behavior:contain!important;
}
#dialog::backdrop,#memberGate::backdrop{
 background:rgba(14,31,23,.55)!important;
 backdrop-filter:blur(3px)!important;
}
#dialog #dialogContent{min-width:0!important;overflow-wrap:anywhere!important}
#dialog #dialogContent>h2{
 font-size:20px!important;font-weight:800!important;
 margin:2px 0 9px!important;color:var(--sm-panel-ink)!important;
}
#dialog :is(h2,h3){color:var(--sm-panel-ink)!important}
#dialog :is(p,li,small){color:var(--sm-panel-muted)!important;line-height:1.7!important}
#dialog :is(.eyebrow){color:var(--sm-panel-accent)!important}
#dialog :is(input,select,textarea){
 box-sizing:border-box!important;
 background:var(--sm-panel-card)!important;color:var(--sm-panel-ink)!important;
 border:1px solid var(--sm-panel-line)!important;border-radius:10px!important;
 min-height:37px!important;padding:8px 10px!important;
}
#dialog .actions{
 display:flex!important;flex-wrap:wrap!important;align-items:center!important;
 gap:8px!important;margin:15px 0 0!important;
}
#dialog .actions button,#dialog #dialogContent button:not(.dialog-close-top){
 border-radius:10px!important;min-height:35px!important;
 padding:7px 12px!important;font-size:12px!important;
}
#dialog .actions button:not(.primary),
#dialog #dialogContent button:not(.primary):not(.danger){
 border:1px solid var(--sm-panel-line)!important;
 background:var(--sm-panel-card)!important;color:var(--sm-panel-ink)!important;
}
#dialog .actions button.primary,#dialog #dialogContent button.primary{
 color:#ffffff!important;background:#317953!important;
 border:1px solid #317953!important;
}
#dialog .actions button:not(.primary):hover,
#dialog #dialogContent button:not(.primary):hover{
 border-color:var(--sm-panel-accent)!important;
}
#dialog .mission-dashboard .actions{
 position:sticky!important;bottom:-18px!important;
 padding:12px 0 3px!important;
 background:var(--sm-panel-bg)!important;
 border-top:1px solid var(--sm-panel-line)!important;
}
.member-card{
 background:var(--sm-panel-bg)!important;color:var(--sm-panel-ink)!important;
 border:1px solid var(--sm-panel-line)!important;border-radius:18px!important;
}
.member-card :is(input,textarea){
 background:var(--sm-panel-card)!important;color:var(--sm-panel-ink)!important;
 border:1px solid var(--sm-panel-line)!important;border-radius:10px!important;
}
.member-card button:focus-visible{outline:2px solid var(--sm-panel-accent)!important;outline-offset:2px!important}
/* Narrow screens and iPad landscape: no horizontal clipping. */
@media(max-width:720px){
 #inspector:not(.hidden){
  width:calc(100vw - 90px)!important;
  right:6px!important;
  top:clamp(67px,10vh,86px)!important;
  max-height:calc(100dvh - 176px)!important;
  padding:9px!important;
 }
 #inspector .sm-inspector-heading{
  margin:-9px -9px 2px!important;padding:10px 39px 10px 10px!important;
 }
 #inspector .sm-inspector-mark{width:32px!important;height:32px!important;min-width:32px!important;font-size:19px!important}
 #inspector .sm-inspector-heading h2{font-size:14px!important}
 #inspector #inspectContent{gap:6px!important}
 #inspector .detail-row{padding:8px!important}
 .citizens-dashboard:not(.hidden){
  right:6px!important;left:76px!important;
  width:auto!important;top:clamp(67px,10vh,86px)!important;
  height:min(670px,calc(100dvh - 145px))!important;
  max-height:calc(100dvh - 145px)!important;
 }
 .citizens-dashboard .citizens-top{padding:10px!important}
 .citizens-dashboard .citizens-top h2{font-size:15px!important}
 .citizens-dashboard .citizens-kpis{gap:5px!important}
 .citizens-dashboard .citizen-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important}
 .citizens-dashboard .citizen-pair{grid-template-columns:1fr!important;gap:0!important}
 .citizens-dashboard .citizen-section{padding:10px!important}
 .daily-report-body .daily-report-highlights{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .daily-report-body .daily-report-sections{grid-template-columns:1fr!important}
 .daily-report-body .daily-report-section{padding:11px!important}
 #dialog:has(.daily-report-modal){padding:11px!important}
 #dialog .mission-dashboard .actions{bottom:-11px!important}
}
@media(max-width:410px){
 #inspector:not(.hidden){width:calc(100vw - 85px)!important}
 #inspector #inspectContent{gap:5px!important}
 #inspector .detail-row span{font-size:9px!important}
 #inspector .detail-row strong{font-size:11px!important}
 .citizens-dashboard:not(.hidden){left:70px!important;right:4px!important}
 .citizens-dashboard .citizens-dashboard-body{padding:8px!important}
}
@media(prefers-reduced-motion:reduce){
 #inspector *, .citizens-dashboard *,#dialog *{scroll-behavior:auto!important;transition:none!important}
}

/* SMCITY compact LEFT rail and left-anchored city information windows.
   Toolbar is one fixed-width column; panels start after its outside edge. */
#cityLeftRail.city-left-rail{
 left:calc(9px + env(safe-area-inset-left,0px))!important;right:auto!important;
 width:58px!important;gap:6px!important;padding:2px 0!important;
 max-height:calc(100dvh - clamp(150px,25vh,222px))!important;
}
#cityLeftRail #cameraJoystick{
 box-sizing:border-box!important;
 width:56px!important;height:56px!important;
 min-width:56px!important;min-height:56px!important;
 flex:0 0 56px!important;
}
#cityQuickModes.city-quick-modes{
 width:58px!important;gap:5px!important;margin:0!important;padding:0!important;
}
#cityQuickModes [data-city-shortcut]{
 box-sizing:border-box!important;
 width:52px!important;min-width:52px!important;max-width:52px!important;
 height:52px!important;min-height:52px!important;max-height:52px!important;
 aspect-ratio:1/1!important;
 display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
 padding:4px 2px!important;gap:3px!important;margin:0!important;
 border-radius:12px!important;font-size:9px!important;line-height:1.15!important;
}
#cityQuickModes [data-city-shortcut] .quick-mode-icon{
 font-size:19px!important;line-height:1!important;display:block!important;
}
#cityQuickModes [data-city-shortcut] .quick-mode-name{
 font-size:9px!important;line-height:1.15!important;display:block!important;white-space:nowrap!important;
}
#cityQuickModes [data-city-shortcut="erase"]{
 margin-top:2px!important;color:var(--sm-panel-danger,#a74031)!important;
 background:var(--sm-panel-danger-soft,#fff0ec)!important;
 border-color:#deada6!important;
}
#cityQuickModes [data-city-shortcut="erase"].active,
#cityQuickModes [data-city-shortcut="erase"][aria-pressed="true"]{
 color:#fff!important;background:#a9463a!important;border-color:#a9463a!important;
}
:root.smcity-gray-ui #cityQuickModes [data-city-shortcut="erase"]{
 color:#ffd2c9!important;background:#4b2827!important;border-color:#89534f!important;
}
:root.smcity-gray-ui #cityQuickModes [data-city-shortcut="erase"].active{
 color:#fff!important;background:#a9463a!important;border-color:#da8072!important;
}
/* Inspectors, dashboards and the morning daily summary all live to the
   RIGHT of the LEFT icon rail. This prevents overlap even on narrow iPads. */
#inspector:not(.hidden){
 left:calc(77px + env(safe-area-inset-left,0px))!important;right:auto!important;
 width:min(392px,calc(100vw - 94px - env(safe-area-inset-left,0px)))!important;
 max-width:calc(100vw - 94px - env(safe-area-inset-left,0px))!important;
}
#citizensDashboard.citizens-dashboard:not(.hidden),
#touristsDashboard.citizens-dashboard:not(.hidden){
 left:calc(77px + env(safe-area-inset-left,0px))!important;right:auto!important;
 width:min(500px,calc(100vw - 94px - env(safe-area-inset-left,0px)))!important;
 max-width:calc(100vw - 94px - env(safe-area-inset-left,0px))!important;
}
#missionDailyAuto.daily-report-auto{
 left:calc(77px + env(safe-area-inset-left,0px))!important;right:auto!important;
 top:calc(70px + env(safe-area-inset-top,0px))!important;
 width:min(470px,calc(100vw - 94px - env(safe-area-inset-left,0px)))!important;
 max-width:calc(100vw - 94px - env(safe-area-inset-left,0px))!important;
 max-height:calc(100dvh - 120px - env(safe-area-inset-top,0px))!important;
}
/* Data dialogs such as the daily statement, city report, save/load and AI
   diagnostics also open on the left. Preserve construction confirmations'
   separate map anchoring so a destructive action remains obvious. */
#dialog:not(.construction-confirm){
 position:fixed!important;
 left:calc(77px + env(safe-area-inset-left,0px))!important;
 right:auto!important;top:calc(70px + env(safe-area-inset-top,0px))!important;
 bottom:auto!important;margin:0!important;
 width:min(560px,calc(100vw - 94px - env(safe-area-inset-left,0px)))!important;
 max-width:calc(100vw - 94px - env(safe-area-inset-left,0px))!important;
 max-height:calc(100dvh - 104px - env(safe-area-inset-top,0px))!important;
 box-sizing:border-box!important;
}
#dialog:has(.daily-report-modal){
 width:min(820px,calc(100vw - 94px - env(safe-area-inset-left,0px)))!important;
}
/* Conserve the usable map on phones; keep icon rail readable and tappable. */
@media(max-width:720px){
 #cityLeftRail.city-left-rail{
  left:calc(5px + env(safe-area-inset-left,0px))!important;
  width:52px!important;gap:5px!important;
  max-height:calc(100dvh - clamp(140px,24vh,202px))!important;
 }
 #cityLeftRail #cameraJoystick{
  width:50px!important;height:50px!important;min-width:50px!important;
  min-height:50px!important;flex:0 0 50px!important;
 }
 #cityQuickModes.city-quick-modes{width:52px!important;gap:4px!important}
 #cityQuickModes [data-city-shortcut]{
  width:48px!important;min-width:48px!important;max-width:48px!important;
  height:48px!important;min-height:48px!important;max-height:48px!important;
  font-size:8px!important;border-radius:10px!important;
 }
 #cityQuickModes [data-city-shortcut] .quick-mode-icon{font-size:18px!important}
 #cityQuickModes [data-city-shortcut] .quick-mode-name{font-size:8px!important}
 #inspector:not(.hidden){
  left:calc(63px + env(safe-area-inset-left,0px))!important;
  right:auto!important;width:calc(100vw - 73px - env(safe-area-inset-left,0px))!important;
  max-width:calc(100vw - 73px - env(safe-area-inset-left,0px))!important;
 }
 #citizensDashboard.citizens-dashboard:not(.hidden),
 #touristsDashboard.citizens-dashboard:not(.hidden){
  left:calc(63px + env(safe-area-inset-left,0px))!important;
  right:auto!important;width:calc(100vw - 73px - env(safe-area-inset-left,0px))!important;
  max-width:calc(100vw - 73px - env(safe-area-inset-left,0px))!important;
 }
 #missionDailyAuto.daily-report-auto{
  left:calc(63px + env(safe-area-inset-left,0px))!important;
  right:auto!important;top:calc(57px + env(safe-area-inset-top,0px))!important;
  width:calc(100vw - 73px - env(safe-area-inset-left,0px))!important;
  max-width:calc(100vw - 73px - env(safe-area-inset-left,0px))!important;
  max-height:calc(100dvh - 100px - env(safe-area-inset-top,0px))!important;
 }
 #dialog:not(.construction-confirm){
  left:calc(63px + env(safe-area-inset-left,0px))!important;
  right:auto!important;top:calc(57px + env(safe-area-inset-top,0px))!important;
  width:calc(100vw - 73px - env(safe-area-inset-left,0px))!important;
  max-width:calc(100vw - 73px - env(safe-area-inset-left,0px))!important;
  max-height:calc(100dvh - 95px - env(safe-area-inset-top,0px))!important;
 }
 #dialog:has(.daily-report-modal){
  width:calc(100vw - 73px - env(safe-area-inset-left,0px))!important;
 }
}
@media(max-width:410px){
 #inspector:not(.hidden),#citizensDashboard.citizens-dashboard:not(.hidden),
 #touristsDashboard.citizens-dashboard:not(.hidden){
  left:calc(63px + env(safe-area-inset-left,0px))!important;right:auto!important;
 }
}

/* Direct construction navigation: no redundant Buildings/Landscape/City Data row.
   The category tabs (including Landscape) are the primary construction navigation. */
body>.bottom .builder-zone .build-dock #categories{
 display:none!important;visibility:hidden!important;
 flex:0 0 0!important;order:unset!important;
 height:0!important;max-height:0!important;min-height:0!important;
 width:0!important;max-width:0!important;
 overflow:hidden!important;padding:0!important;margin:0!important;border:0!important;
}
body>.bottom .builder-zone .build-dock .dock-body{
 display:flex!important;flex-direction:column!important;
 justify-content:flex-start!important;min-height:0!important;
}
body>.bottom .builder-zone .build-dock .dock-context{
 display:flex!important;flex-direction:column!important;
 order:0!important;flex:1 1 auto!important;min-height:70px!important;
 margin:3px 0 2px!important;
 background:#edf5ed!important;border:1px solid #c4d9c8!important;
 border-radius:11px!important;overflow:hidden!important;
}
body>.bottom .builder-zone .dock-context #subcategories{
 display:flex!important;align-items:center!important;justify-content:flex-start!important;
 flex:0 0 34px!important;
 width:100%!important;min-width:0!important;
 height:34px!important;max-height:34px!important;min-height:34px!important;
 padding:3px 8px!important;gap:6px!important;margin:0!important;
 overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:thin!important;
 border-bottom:1px solid #bed7c3!important;background:#e1eee3!important;
}
body>.bottom .builder-zone .dock-context #subcategories[hidden]{display:none!important}
body>.bottom .builder-zone .dock-context #subcategories::before{
 content:"สร้าง";flex:0 0 auto;
 font:800 10px/1.4 "Noto Sans Thai",Tahoma,sans-serif!important;
 color:#35614b!important;margin-right:2px!important;
}
body>.bottom .builder-zone .dock-context #subcategories button{
 box-sizing:border-box!important;flex:0 0 auto!important;
 min-height:27px!important;height:27px!important;
 padding:4px 10px!important;margin:0!important;
 color:#4a6955!important;border:1px solid #c4d8c8!important;
 border-radius:8px!important;background:rgba(255,255,255,.73)!important;
 font:700 11px/1.3 "Noto Sans Thai",Tahoma,sans-serif!important;
 white-space:nowrap!important;cursor:pointer!important;
}
body>.bottom .builder-zone .dock-context #subcategories button.active{
 background:#317853!important;color:#fff!important;
 border-color:#317853!important;box-shadow:0 2px 5px #145b3730!important;
}
body>.bottom .builder-zone .dock-context #subcategories button:hover:not(.active){
 background:#d6e9d9!important;border-color:#7faf91!important;
}
body>.bottom .builder-zone .dock-context .tools{
 display:flex!important;align-items:stretch!important;justify-content:flex-start!important;
 flex:1 1 auto!important;min-height:49px!important;
 padding:5px 7px!important;gap:5px!important;
 background:#f5faf4!important;
}
:root.smcity-gray-ui body>.bottom .builder-zone .build-dock .dock-context{
 background:#242c27!important;border-color:#465d4c!important;
}
:root.smcity-gray-ui body>.bottom .builder-zone .dock-context #subcategories{
 background:#252f29!important;border-color:#455849!important;
}
:root.smcity-gray-ui body>.bottom .builder-zone .dock-context #subcategories::before{
 color:#c8dfcf!important;
}
:root.smcity-gray-ui body>.bottom .builder-zone .dock-context #subcategories button{
 background:#303b33!important;color:#e4eee7!important;
 border-color:#4c6553!important;
}
:root.smcity-gray-ui body>.bottom .builder-zone .dock-context #subcategories button.active{
 background:#347c55!important;border-color:#75bb8e!important;color:#fff!important;
}
:root.smcity-gray-ui body>.bottom .builder-zone .dock-context .tools{
 background:#222b26!important;
}
/* Only the actual Main Menu is centered. Report is a regular left-hand
   information window, as are save, diagnostics and all other city panels. */
#dialog:not(.construction-confirm):has(.smcity-menu-list){
 position:fixed!important;left:50%!important;right:auto!important;
 top:50%!important;bottom:auto!important;
 transform:translate(-50%,-50%)!important;
 width:min(475px,calc(100vw - 28px))!important;
 max-width:calc(100vw - 28px)!important;
 max-height:calc(100dvh - 30px)!important;
 margin:0!important;
}
#dialog:has(.smcity-report-list) .menu-heading{margin-bottom:10px!important}
#dialog .smcity-report-list{
 display:grid!important;grid-template-columns:1fr!important;gap:7px!important;
 margin:12px 0!important;max-height:min(55dvh,490px)!important;
 overflow-y:auto!important;overscroll-behavior:contain!important;
}
#dialog .smcity-report-entry{
 display:flex!important;align-items:center!important;text-align:left!important;
 gap:11px!important;width:100%!important;min-height:56px!important;
 padding:9px 12px!important;
 border:1px solid var(--sm-panel-line,#d6e5d8)!important;
 border-radius:12px!important;
 background:var(--sm-panel-card,#fff)!important;
 color:var(--sm-panel-ink,#244637)!important;
 cursor:pointer!important;
}
#dialog .smcity-report-entry .menu-symbol{
 flex:0 0 36px!important;width:36px!important;height:36px!important;
 display:grid!important;place-items:center!important;
 background:var(--sm-panel-accent-soft,#d8efdf)!important;
 color:var(--sm-panel-accent,#347953)!important;
 border-radius:10px!important;font-size:19px!important;
}
#dialog .smcity-report-entry>span:nth-child(2){flex:1!important;min-width:0!important}
#dialog .smcity-report-entry b{
 display:block!important;font-size:13px!important;color:var(--sm-panel-ink,#244637)!important;
}
#dialog .smcity-report-entry small{
 display:block!important;font-size:10px!important;
 color:var(--sm-panel-muted,#667c6e)!important;
 margin-top:3px!important;line-height:1.5!important;
}
#dialog .smcity-report-entry .menu-chevron{color:var(--sm-panel-muted,#667c6e)!important}
#dialog .smcity-report-entry:hover,#dialog .smcity-report-entry:focus-visible{
 border-color:var(--sm-panel-accent,#347953)!important;
 background:var(--sm-panel-accent-soft,#d8efdf)!important;
}
#dialog .report-menu-intro{font-size:11px!important;color:var(--sm-panel-muted,#667c6e)!important}
@media(max-width:720px){
 body>.bottom .builder-zone .dock-context #subcategories{
  height:30px!important;min-height:30px!important;max-height:30px!important;
  flex-basis:30px!important;padding:2px 5px!important;gap:4px!important;
 }
 body>.bottom .builder-zone .dock-context #subcategories button{
  height:25px!important;min-height:25px!important;
  padding:3px 7px!important;font-size:10px!important;
 }
 body>.bottom .builder-zone .dock-context #subcategories::before{font-size:9px!important}
 #dialog:not(.construction-confirm):has(.smcity-menu-list){
  left:50%!important;top:50%!important;
  width:calc(100vw - 26px)!important;max-width:min(475px,calc(100vw - 26px))!important;
 }
}


/* SMCITY 2026-10-25 — responsive compact control deck */
/* This layer changes only layout. All game controls retain their existing IDs,
   events, labels, dark-mode styling and collapsed-dock behaviour. */
body>.bottom>.control-deck:not(.tools-collapsed){
 width:min(1200px,calc(100vw - 16px))!important;
 height:138px!important;min-height:138px!important;max-height:138px!important;
 grid-template-columns:minmax(0,26fr) minmax(0,18fr) minmax(0,56fr)!important;
 gap:0!important;align-items:stretch!important;
 overflow:hidden!important;
}
body>.bottom>.control-deck:not(.tools-collapsed)>.city-dashboard{
 display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;
 grid-template-rows:26px minmax(0,1fr)!important;
 align-content:stretch!important;align-items:stretch!important;
 gap:3px 4px!important;padding:5px 6px!important;
 width:auto!important;height:100%!important;min-height:0!important;max-height:none!important;
}
body>.bottom>.control-deck:not(.tools-collapsed) .dashboard-heading{
 grid-column:1!important;grid-row:1!important;
 height:25px!important;min-height:0!important;max-height:25px!important;
 min-width:0!important;margin:0!important;padding:0!important;
}
body>.bottom>.control-deck:not(.tools-collapsed) .dashboard-heading .dashboard-title{
 gap:3px!important;min-width:0!important;
}
body>.bottom>.control-deck:not(.tools-collapsed) .dashboard-shortcuts{
 display:flex!important;grid-column:2!important;grid-row:1!important;
 align-items:center!important;justify-content:flex-end!important;
 flex:none!important;width:auto!important;min-width:0!important;
 height:25px!important;min-height:0!important;max-height:25px!important;
 margin:0!important;padding:0!important;overflow:visible!important;
}
body>.bottom>.control-deck:not(.tools-collapsed) .dashboard-member-buttons{
 display:flex!important;flex:none!important;align-items:center!important;
 justify-content:flex-end!important;gap:3px!important;
 width:auto!important;min-width:0!important;max-width:none!important;margin:0!important;
}
body>.bottom>.control-deck:not(.tools-collapsed) .dashboard-member-buttons>button{
 display:inline-flex!important;flex-direction:row!important;
 flex:0 0 auto!important;align-items:center!important;justify-content:center!important;
 gap:3px!important;width:auto!important;min-width:33px!important;max-width:none!important;
 height:24px!important;min-height:24px!important;max-height:24px!important;
 padding:2px 5px!important;margin:0!important;border-radius:7px!important;
}
body>.bottom>.control-deck:not(.tools-collapsed) .dashboard-member-buttons>button small{
 display:block!important;font-size:8px!important;line-height:1!important;white-space:nowrap!important;
}
body>.bottom>.control-deck:not(.tools-collapsed) .dashboard-member-buttons .map-rail-svg{
 width:15px!important;height:15px!important;min-width:15px!important;
}
body>.bottom>.control-deck:not(.tools-collapsed) .stats.dashboard-stats{
 display:grid!important;grid-column:1 / -1!important;grid-row:2!important;
 grid-template-columns:repeat(2,minmax(0,1fr))!important;
 grid-template-rows:repeat(3,minmax(0,1fr))!important;
 width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;
 padding:0!important;margin:0!important;gap:2px 5px!important;
}
body>.bottom>.control-deck:not(.tools-collapsed) .stats.dashboard-stats .city-metric{
 height:100%!important;min-height:0!important;max-height:none!important;
 margin:0!important;padding:2px 4px!important;gap:4px!important;
 overflow:hidden!important;
}
body>.bottom>.control-deck:not(.tools-collapsed) .stats.dashboard-stats .metric-money{
 grid-column:span 2!important;
}
body>.bottom>.control-deck:not(.tools-collapsed) .city-metric .metric-icon{
 width:17px!important;height:19px!important;min-width:17px!important;
}
body>.bottom>.control-deck:not(.tools-collapsed) .city-metric .metric-icon svg{
 width:15px!important;height:15px!important;
}
body>.bottom>.control-deck:not(.tools-collapsed) .city-metric small{
 font-size:8px!important;line-height:1.1!important;
}
body>.bottom>.control-deck:not(.tools-collapsed) .city-metric strong{
 font-size:12px!important;line-height:1.12!important;
}
body>.bottom>.control-deck:not(.tools-collapsed) .city-metric.metric-money strong{
 font-size:15px!important;
}
body>.bottom>.control-deck:not(.tools-collapsed)>.city-control-mini{
 height:100%!important;min-height:0!important;max-height:none!important;
 padding:4px!important;overflow:hidden!important;
}
body>.bottom>.control-deck:not(.tools-collapsed) .city-demand-panel{
 height:100%!important;min-height:0!important;
 padding:4px!important;overflow:hidden!important;
}
body>.bottom>.control-deck:not(.tools-collapsed) .mini-control-heading{
 flex:0 0 19px!important;height:19px!important;min-height:19px!important;
 margin:0 0 2px!important;padding:0!important;
}
body>.bottom>.control-deck:not(.tools-collapsed) .city-control-mini .panel-content{
 flex:1 1 auto!important;min-height:0!important;
 overflow-x:hidden!important;overflow-y:auto!important;
 scrollbar-width:thin!important;
}
body>.bottom>.control-deck:not(.tools-collapsed) .city-control-mini .mini-need{
 min-height:16px!important;max-height:none!important;
 padding:1px 2px!important;line-height:1.2!important;
}
body>.bottom>.control-deck:not(.tools-collapsed)>.builder-zone{
 height:100%!important;min-height:0!important;max-height:none!important;
 padding:0!important;overflow:hidden!important;
}
body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .build-dock{
 display:flex!important;flex-direction:column!important;
 width:100%!important;height:100%!important;min-height:0!important;max-height:100%!important;
 margin:0!important;overflow:hidden!important;
}
body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .dock-head{
 display:flex!important;flex:0 0 34px!important;
 height:34px!important;min-height:34px!important;max-height:34px!important;
 gap:3px!important;padding:2px 5px!important;overflow:hidden!important;
}
body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .dock-body{
 display:flex!important;flex:1 1 auto!important;flex-direction:column!important;
 justify-content:flex-start!important;min-height:0!important;
 padding:0 4px 3px!important;overflow:hidden!important;
}
body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .dock-context{
 display:flex!important;flex:1 1 auto!important;flex-direction:column!important;
 min-height:0!important;height:auto!important;max-height:none!important;
 margin:2px 0 0!important;padding:0!important;overflow:hidden!important;
}
body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone #subcategories{
 flex:0 0 29px!important;height:29px!important;min-height:29px!important;max-height:29px!important;
 padding:2px 6px!important;gap:4px!important;
 overflow-x:auto!important;overflow-y:hidden!important;
}
body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone #subcategories button{
 height:24px!important;min-height:24px!important;max-height:24px!important;
 padding:3px 8px!important;font-size:10px!important;
}
body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .tools{
 display:flex!important;flex:1 1 auto!important;align-items:stretch!important;
 min-height:0!important;height:auto!important;max-height:none!important;
 padding:4px!important;gap:4px!important;
 overflow-x:auto!important;overflow-y:hidden!important;
}
body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .tools>.tool{
 min-height:0!important;height:100%!important;max-height:none!important;
 padding:3px 5px!important;gap:2px!important;
}
body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone
 .tools:not(:has(>.tool:nth-child(5)))>.tool{
 flex:1 1 0!important;width:auto!important;min-width:0!important;max-width:none!important;
}
body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .tool-icon{
 flex:0 0 17px!important;width:21px!important;height:17px!important;
 font-size:17px!important;line-height:1!important;
}
body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .tool strong{
 font-size:10px!important;line-height:1.15!important;
 overflow:hidden!important;text-overflow:ellipsis!important;
}
body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .tool .tool-price{
 font-size:9px!important;line-height:1.1!important;
}
/* iPad landscape: keep three sections, but guard the narrow action bar. */
@media (min-width:921px) and (max-width:1100px){
 body>.bottom>.control-deck:not(.tools-collapsed){height:143px!important;min-height:143px!important;max-height:143px!important}
 body>.bottom>.control-deck:not(.tools-collapsed) .dashboard-member-buttons>button{padding:2px 3px!important}
 body>.bottom>.control-deck:not(.tools-collapsed) .dashboard-member-buttons>button small{font-size:7px!important}
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone #toggleBuildingLabelsText,
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone #toggleDockText{display:none!important}
}
/* iPad portrait: builder gets a full-width row instead of an unusably narrow third column. */
@media (min-width:721px) and (max-width:920px){
 body>.bottom>.control-deck:not(.tools-collapsed){
  width:calc(100vw - 12px)!important;
  display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,.72fr)!important;
  grid-template-rows:116px 105px!important;
  height:221px!important;min-height:221px!important;max-height:221px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed)>.city-dashboard{
  grid-column:1!important;grid-row:1!important;border-radius:12px 0 0 0!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed)>.city-control-mini{
  grid-column:2!important;grid-row:1!important;border-right:0!important;border-radius:0 12px 0 0!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed)>.builder-zone{
  grid-column:1 / -1!important;grid-row:2!important;
  border-radius:0 0 12px 12px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .dock-head{
  flex-basis:32px!important;height:32px!important;min-height:32px!important;max-height:32px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone #subcategories{
  flex-basis:27px!important;height:27px!important;min-height:27px!important;max-height:27px!important;
 }
}
/* Phones: summary above a horizontally swipable demand strip, then construction.
   Nothing is deleted; each demand figure remains available by scrolling. */
@media (max-width:720px){
 body>.bottom>.control-deck:not(.tools-collapsed){
  display:grid!important;grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:61px 35px 104px!important;
  width:calc(100vw - 8px)!important;max-width:none!important;
  height:200px!important;min-height:200px!important;max-height:200px!important;
  overflow:hidden!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed)>.city-dashboard{
  grid-column:1!important;grid-row:1!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  grid-template-rows:23px minmax(0,1fr)!important;
  height:61px!important;max-height:61px!important;padding:3px 5px!important;
  border-right:0!important;border-bottom:1px solid var(--ui-v8-border,#d5e5d8)!important;
  border-radius:10px 10px 0 0!important;gap:1px 3px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .dashboard-heading{
  height:22px!important;max-height:22px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .dashboard-shortcuts{
  height:22px!important;max-height:22px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .dashboard-member-buttons>button{
  height:22px!important;min-height:22px!important;max-height:22px!important;
  padding:1px 5px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .stats.dashboard-stats{
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  grid-template-rows:minmax(0,1fr)!important;
  gap:2px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .stats.dashboard-stats .city-metric{
  grid-column:auto!important;display:flex!important;flex-direction:column!important;
  justify-content:center!important;align-items:center!important;
  text-align:center!important;padding:1px!important;gap:0!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .city-metric .metric-icon{display:none!important}
 body>.bottom>.control-deck:not(.tools-collapsed) .city-metric small{font-size:7px!important;line-height:1!important}
 body>.bottom>.control-deck:not(.tools-collapsed) .city-metric strong,
 body>.bottom>.control-deck:not(.tools-collapsed) .city-metric.metric-money strong{
  font-size:10px!important;line-height:1.3!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed)>.city-control-mini{
  grid-column:1!important;grid-row:2!important;
  display:flex!important;height:35px!important;max-height:35px!important;
  padding:2px 4px!important;border:0!important;border-bottom:1px solid var(--ui-v8-border,#d5e5d8)!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .city-demand-panel{
  flex-direction:row!important;align-items:center!important;gap:6px!important;
  padding:2px 4px!important;border-radius:7px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .mini-control-heading{
  flex:0 0 auto!important;min-width:0!important;height:24px!important;min-height:24px!important;
  display:flex!important;align-items:center!important;
  gap:3px!important;margin:0!important;padding:0!important;border:0!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .mini-control-heading strong{font-size:9px!important}
 body>.bottom>.control-deck:not(.tools-collapsed) .mini-demand-legend{display:none!important}
 body>.bottom>.control-deck:not(.tools-collapsed) .city-control-mini .panel-content{
  flex:1 1 auto!important;min-width:0!important;height:26px!important;
  overflow-x:auto!important;overflow-y:hidden!important;
  touch-action:pan-x!important;scrollbar-width:none!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .mini-needs-list{
  display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;
  align-items:center!important;width:max-content!important;min-width:100%!important;
  height:26px!important;gap:4px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .city-control-mini .mini-need{
  display:flex!important;flex:0 0 auto!important;
  width:auto!important;min-width:max-content!important;
  height:23px!important;min-height:23px!important;max-height:23px!important;
  gap:4px!important;padding:2px 6px!important;
  border:1px solid var(--ui-v8-border,#d5e5d8)!important;border-radius:6px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .city-control-mini .mini-need>span{
  flex:0 0 auto!important;width:auto!important;max-width:none!important;
  font-size:9px!important;line-height:1.2!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .city-control-mini .mini-need-values{
  display:grid!important;grid-template-columns:repeat(3,minmax(15px,max-content))!important;
  gap:2px!important;min-width:0!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .city-control-mini .mini-need-values b,
 body>.bottom>.control-deck:not(.tools-collapsed) .city-control-mini .mini-need-values strong{
  font-size:9px!important;line-height:1.15!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed)>.builder-zone{
  grid-column:1!important;grid-row:3!important;
  height:104px!important;min-height:0!important;max-height:104px!important;
  border-radius:0 0 10px 10px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .dock-head{
  flex-basis:32px!important;height:32px!important;min-height:32px!important;max-height:32px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .dock-body{
  padding:0 3px 2px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone #subcategories{
  flex-basis:27px!important;height:27px!important;min-height:27px!important;max-height:27px!important;
  padding:1px 4px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone #subcategories button{
  height:24px!important;min-height:24px!important;max-height:24px!important;
  padding:2px 6px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .tools{
  padding:3px!important;gap:3px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .tools>.tool{
  min-width:70px!important;max-width:none!important;padding:2px 4px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .tools:not(:has(>.tool:nth-child(5)))>.tool{
  min-width:0!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .dock-head #toggleBuildingLabelsText,
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .dock-head #toggleDockText{
  display:none!important;
 }
}
@media(max-width:390px){
 body>.bottom>.control-deck:not(.tools-collapsed) .dashboard-member-buttons>button small{display:none!important}
 body>.bottom>.control-deck:not(.tools-collapsed) .dashboard-member-buttons>button{
  width:24px!important;min-width:24px!important;padding:2px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .dock-head{
  gap:1px!important;padding:1px 2px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .dock-speed .playback button{
  font-size:7px!important;padding:1px 2px!important;
 }
}


/* SMCITY 2026-10-25 — equal-size construction cards and clean labels */
/* Keep the budget amount and accessible name, hide its redundant caption. */
body>.bottom>.control-deck:not(.tools-collapsed) .city-dashboard .metric-money .metric-text>small{
 display:none!important;
}
body>.bottom>.control-deck:not(.tools-collapsed) .city-dashboard .metric-money .metric-text{
 display:flex!important;align-items:center!important;min-height:0!important;
}
/* The category tabs already describe what is being built. */
body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .dock-context #subcategories::before{
 content:none!important;display:none!important;margin:0!important;
}
/* Uniform widths across Road / Housing / Office / Shops / Leisure / etc.
   Neutralize the previous fewer-than-five-items flex expansion. */
body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .tools>.tool,
body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .tools:not(:has(>.tool:nth-child(5)))>.tool{
 box-sizing:border-box!important;
 flex:0 0 94px!important;
 width:94px!important;min-width:94px!important;max-width:94px!important;
}
/* iPad portrait/landscape */
@media(min-width:721px) and (max-width:1100px){
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .tools>.tool,
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .tools:not(:has(>.tool:nth-child(5)))>.tool{
  flex-basis:88px!important;width:88px!important;min-width:88px!important;max-width:88px!important;
 }
}
/* Phones: retain a comfortable, scrollable tool strip without stretched cards. */
@media(max-width:720px){
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .tools>.tool,
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .tools:not(:has(>.tool:nth-child(5)))>.tool{
  flex-basis:82px!important;width:82px!important;min-width:82px!important;max-width:82px!important;
 }
}


/* SMCITY 2026-10-25 — mobile / iPad dock visibility and readable demand */
/* Desktop remains unchanged. Respect bottom safe areas on touch layouts. */
@media (max-width:920px), (max-width:1240px) and (hover:none) and (pointer:coarse){
 body>.bottom{
  position:absolute!important;bottom:max(5px,env(safe-area-inset-bottom,0px))!important;
  max-height:calc(100dvh - 10px - env(safe-area-inset-bottom,0px))!important;
  overflow:visible!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed){
  box-sizing:border-box!important;
  max-height:calc(100dvh - 12px - env(safe-area-inset-bottom,0px))!important;
  overflow:hidden!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone,
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone #buildDock,
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .dock-body,
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .dock-context{
  box-sizing:border-box!important;min-height:0!important;max-height:100%!important;
  overflow:hidden!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .tools{
  box-sizing:border-box!important;flex:1 1 auto!important;min-height:0!important;
  overflow-x:auto!important;overflow-y:hidden!important;
  overscroll-behavior-x:contain!important;-webkit-overflow-scrolling:touch!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .tools>.tool{
  box-sizing:border-box!important;flex-shrink:0!important;
  height:100%!important;min-height:0!important;max-height:100%!important;
 }
 /* Demand is a table: label | capacity | using | missing, not an unlabelled strip. */
 body>.bottom>.control-deck:not(.tools-collapsed) .city-control-mini .city-demand-panel{
  display:flex!important;flex-direction:column!important;
  align-items:stretch!important;min-height:0!important;overflow:hidden!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .city-control-mini .mini-control-heading{
  display:flex!important;flex-direction:row!important;
  align-items:center!important;justify-content:space-between!important;
  gap:7px!important;flex:0 0 21px!important;
  height:21px!important;min-height:21px!important;max-height:21px!important;
  padding:0 3px!important;margin:0 0 2px!important;
  border-bottom:1px solid var(--ui-v8-border,#d5e5d8)!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .city-control-mini .mini-control-heading strong{
  font-size:10px!important;line-height:1.2!important;white-space:nowrap!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .city-control-mini .mini-control-heading .mini-demand-legend{
  display:block!important;flex:0 0 auto!important;
  font-size:9px!important;line-height:1.2!important;
  white-space:nowrap!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .city-control-mini .panel-content{
  display:block!important;flex:1 1 auto!important;
  width:100%!important;height:auto!important;min-width:0!important;min-height:0!important;
  overflow-x:hidden!important;overflow-y:auto!important;
  scrollbar-width:thin!important;touch-action:pan-y!important;
  overscroll-behavior-y:contain!important;-webkit-overflow-scrolling:touch!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .city-control-mini .mini-needs-list{
  box-sizing:border-box!important;display:flex!important;
  flex-direction:column!important;flex-wrap:nowrap!important;
  width:100%!important;min-width:0!important;max-width:100%!important;
  height:auto!important;min-height:0!important;
  gap:0!important;padding:0!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .city-control-mini .mini-need{
  box-sizing:border-box!important;
  display:flex!important;flex:0 0 auto!important;flex-direction:row!important;
  justify-content:space-between!important;align-items:center!important;
  width:100%!important;min-width:0!important;max-width:100%!important;
  height:23px!important;min-height:23px!important;max-height:23px!important;
  gap:5px!important;margin:0!important;padding:2px 4px!important;
  border:0!important;border-bottom:1px solid var(--ui-v8-border,#d5e5d8)!important;
  border-radius:0!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .city-control-mini .mini-need>span{
  box-sizing:border-box!important;display:block!important;
  flex:1 1 auto!important;width:auto!important;min-width:0!important;max-width:none!important;
  font-size:10px!important;line-height:1.2!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .city-control-mini .mini-need-values{
  display:grid!important;flex:0 0 auto!important;
  grid-template-columns:repeat(3,minmax(24px,32px))!important;
  align-items:center!important;justify-content:end!important;
  gap:2px!important;width:100px!important;min-width:100px!important;max-width:100px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .city-control-mini .mini-need-values b,
 body>.bottom>.control-deck:not(.tools-collapsed) .city-control-mini .mini-need-values strong{
  display:block!important;min-width:0!important;width:auto!important;
  font-size:10px!important;line-height:1.2!important;
  text-align:center!important;font-variant-numeric:tabular-nums!important;
 }
}
/* iPad portrait: two compact panels over a full-width builder. */
@media (min-width:721px) and (max-width:920px){
 body>.bottom>.control-deck:not(.tools-collapsed){
  display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,.72fr)!important;
  grid-template-rows:116px 118px!important;
  height:234px!important;min-height:0!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed)>.builder-zone{
  grid-row:2!important;grid-column:1/-1!important;
  height:118px!important;max-height:118px!important;min-height:0!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .dock-head{
  height:35px!important;min-height:35px!important;max-height:35px!important;flex-basis:35px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone #subcategories{
  height:29px!important;min-height:29px!important;max-height:29px!important;flex-basis:29px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed)>.city-control-mini{
  height:116px!important;max-height:116px!important;min-height:0!important;
 }
}
/* Tablet landscape: prevent iPad WebKit from shrinking construction controls.
   Mouse-driven PC layouts at this width are intentionally unaffected. */
@media (min-width:921px) and (max-width:1240px) and (hover:none) and (pointer:coarse){
 body>.bottom>.control-deck:not(.tools-collapsed){
  height:151px!important;min-height:0!important;max-height:151px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .dock-head{
  height:36px!important;min-height:36px!important;max-height:36px!important;flex-basis:36px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone #subcategories{
  height:30px!important;min-height:30px!important;max-height:30px!important;flex-basis:30px!important;
 }
}
/* Phones: three non-overlapping rows, with readable vertical demand columns.
   The construction row is last and is wholly inside the visible viewport. */
@media (max-width:720px){
 body>.bottom>.control-deck:not(.tools-collapsed){
  display:grid!important;grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:67px 82px minmax(0,1fr)!important;
  width:calc(100vw - 8px)!important;
  height:min(270px,calc(100dvh - 12px - env(safe-area-inset-bottom,0px)))!important;
  min-height:0!important;
  max-height:calc(100dvh - 12px - env(safe-area-inset-bottom,0px))!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed)>.city-dashboard{
  grid-row:1!important;grid-column:1!important;
  height:67px!important;min-height:0!important;max-height:67px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed)>.city-control-mini{
  grid-row:2!important;grid-column:1!important;
  height:82px!important;min-height:0!important;max-height:82px!important;
  border-right:0!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed)>.builder-zone{
  grid-row:3!important;grid-column:1!important;
  height:100%!important;min-height:0!important;max-height:100%!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .city-control-mini .city-demand-panel{
  flex-direction:column!important;align-items:stretch!important;
  gap:0!important;padding:2px 5px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .city-control-mini .mini-control-heading{
  flex-basis:18px!important;height:18px!important;min-height:18px!important;max-height:18px!important;
  margin:0 0 1px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .city-control-mini .mini-need{
  height:22px!important;min-height:22px!important;max-height:22px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .dock-head{
  height:34px!important;min-height:34px!important;max-height:34px!important;flex-basis:34px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone #subcategories{
  height:29px!important;min-height:29px!important;max-height:29px!important;flex-basis:29px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .dock-body{
  flex:1 1 auto!important;min-height:0!important;max-height:none!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .dock-context{
  flex:1 1 auto!important;height:auto!important;min-height:0!important;max-height:none!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .tools{
  flex:1 1 auto!important;min-height:0!important;max-height:none!important;
 }
}
@media (max-width:720px) and (orientation:landscape) and (max-height:500px){
 body>.bottom>.control-deck:not(.tools-collapsed){
  grid-template-rows:51px 69px minmax(0,1fr)!important;
  height:min(220px,calc(100dvh - 12px - env(safe-area-inset-bottom,0px)))!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed)>.city-dashboard{height:51px!important;max-height:51px!important}
 body>.bottom>.control-deck:not(.tools-collapsed)>.city-control-mini{height:69px!important;max-height:69px!important}
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .dock-head{
  height:31px!important;min-height:31px!important;max-height:31px!important;flex-basis:31px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone #subcategories{
  height:26px!important;min-height:26px!important;max-height:26px!important;flex-basis:26px!important;
 }
}


/* SMCITY 2026-10-25 — iPad portrait layout on phones, readable tools */
/* Scope to tablets/phones, leaving the approved desktop layout untouched.
   Header controls share one consistent visual style; the old help entry is
   retained invisibly so its existing game-guide click handler still works. */
body>.bottom .city-dashboard #help{display:none!important}
body>.bottom .city-dashboard .dashboard-heading .dashboard-actions:empty{display:none!important}
body>.bottom>.control-deck:not(.tools-collapsed) .city-dashboard .dashboard-member-buttons{
 flex-wrap:nowrap!important;justify-content:flex-end!important;gap:4px!important;
}
body>.bottom>.control-deck:not(.tools-collapsed) .city-dashboard .dashboard-member-buttons>button,
body>.bottom>.control-deck:not(.tools-collapsed) .city-dashboard #menu{
 box-sizing:border-box!important;
 display:inline-flex!important;flex-direction:row!important;
 align-items:center!important;justify-content:center!important;
 width:auto!important;min-width:28px!important;max-width:none!important;
 height:27px!important;min-height:27px!important;max-height:27px!important;
 padding:3px 7px!important;gap:4px!important;margin:0!important;
 font:700 11px/1.2 "Noto Sans Thai",Tahoma,sans-serif!important;
 color:var(--sm-panel-ink,#315b49)!important;
 background:var(--sm-panel-card,#f1f7ed)!important;
 border:1px solid var(--sm-panel-line,#c6dccc)!important;
 border-radius:8px!important;box-shadow:none!important;
 cursor:pointer!important;
}
body>.bottom>.control-deck:not(.tools-collapsed) .city-dashboard .dashboard-member-buttons #menu{
 flex:0 0 29px!important;width:29px!important;min-width:29px!important;
 max-width:29px!important;font-size:18px!important;line-height:1!important;
}
body>.bottom>.control-deck:not(.tools-collapsed) .city-dashboard .dashboard-member-buttons>button:where(:hover,:focus-visible){
 border-color:var(--sm-panel-accent,#347953)!important;
 background:var(--sm-panel-accent-soft,#d9eee0)!important;
}
body>.bottom>.control-deck:not(.tools-collapsed) .city-dashboard .dashboard-member-buttons .map-save-art{
 display:grid!important;place-items:center!important;
 width:17px!important;height:17px!important;
}
body>.bottom>.control-deck:not(.tools-collapsed) .city-dashboard .dashboard-member-buttons .map-rail-svg{
 width:17px!important;height:17px!important;min-width:17px!important;
}
body>.bottom>.control-deck:not(.tools-collapsed) .city-dashboard .dashboard-member-buttons>button small{
 font:700 9px/1.1 "Noto Sans Thai",Tahoma,sans-serif!important;
 white-space:nowrap!important;color:inherit!important;
}
:root.smcity-gray-ui body>.bottom>.control-deck:not(.tools-collapsed) .city-dashboard .dashboard-member-buttons>button{
 color:var(--sm-dark-text,#fff)!important;
 background:var(--sm-dark-card,#1b1d23)!important;
 border-color:var(--sm-dark-stroke,#353b45)!important;
}
:root.smcity-gray-ui body>.bottom>.control-deck:not(.tools-collapsed) .city-dashboard .dashboard-member-buttons>button:is(:hover,:focus-visible){
 background:var(--sm-dark-hover,#2c3039)!important;
}

/* The same portrait tablet composition at all touch widths <= 920px:
   city KPIs + scrollable demand above, FULL-WIDTH construction below. */
@media(max-width:920px){
 body>.bottom{
  bottom:max(6px,env(safe-area-inset-bottom,0px))!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed){
  display:grid!important;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)!important;
  grid-template-rows:minmax(0,130fr) minmax(0,160fr)!important;
  width:calc(100vw - 12px)!important;
  max-width:calc(100vw - 12px)!important;
  height:min(298px,calc(100dvh - 16px - env(safe-area-inset-bottom,0px)))!important;
  min-height:0!important;max-height:calc(100dvh - 16px - env(safe-area-inset-bottom,0px))!important;
  align-items:stretch!important;overflow:hidden!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed)>.city-dashboard{
  display:grid!important;grid-column:1!important;grid-row:1!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  grid-template-rows:29px minmax(0,1fr)!important;
  width:auto!important;height:100%!important;min-height:0!important;max-height:100%!important;
  padding:4px 5px!important;gap:3px!important;
  border-right:1px solid var(--ui-v8-border,#d5e5d8)!important;
  border-bottom:1px solid var(--ui-v8-border,#d5e5d8)!important;
  border-radius:11px 0 0 0!important;overflow:hidden!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .dashboard-heading{
  grid-column:1!important;grid-row:1!important;
  height:28px!important;min-height:28px!important;max-height:28px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .dashboard-shortcuts{
  grid-column:2!important;grid-row:1!important;
  height:28px!important;min-height:28px!important;max-height:28px!important;
  padding:0!important;align-items:center!important;justify-content:flex-end!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .city-dashboard .dashboard-member-buttons>button{
  height:26px!important;min-height:26px!important;max-height:26px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .stats.dashboard-stats{
  grid-column:1/-1!important;grid-row:2!important;
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-template-rows:repeat(3,minmax(0,1fr))!important;
  width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;
  gap:2px 4px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .stats.dashboard-stats .city-metric{
  grid-column:auto!important;
  display:flex!important;flex-direction:row!important;
  align-items:center!important;justify-content:flex-start!important;
  height:100%!important;min-height:0!important;max-height:none!important;
  gap:3px!important;padding:2px 3px!important;text-align:left!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .stats.dashboard-stats .city-metric.metric-money{
  grid-column:1 / -1!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .city-metric .metric-text{
  flex:1 1 auto!important;width:auto!important;min-width:0!important;text-align:left!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .city-metric small{
  font-size:8px!important;line-height:1.1!important;white-space:nowrap!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .city-metric strong{
  font-size:12px!important;line-height:1.2!important;white-space:nowrap!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .city-metric .metric-icon{
  display:flex!important;flex:0 0 15px!important;
  width:15px!important;min-width:15px!important;height:17px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed)>.city-control-mini{
  display:flex!important;grid-column:2!important;grid-row:1!important;
  width:auto!important;height:100%!important;min-height:0!important;max-height:100%!important;
  padding:3px!important;
  border-right:0!important;border-bottom:1px solid var(--ui-v8-border,#d5e5d8)!important;
  border-radius:0 11px 0 0!important;overflow:hidden!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .city-control-mini .city-demand-panel{
  display:flex!important;flex-direction:column!important;
  width:100%!important;height:100%!important;min-height:0!important;
  padding:3px!important;gap:1px!important;overflow:hidden!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .city-control-mini .mini-control-heading{
  display:flex!important;justify-content:space-between!important;
  flex:0 0 19px!important;height:19px!important;min-height:19px!important;max-height:19px!important;
  margin:0 0 1px!important;padding:0 2px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .city-control-mini .mini-control-heading .mini-demand-legend{
  display:block!important;font-size:8px!important;line-height:1.2!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .city-control-mini .panel-content{
  display:block!important;flex:1 1 auto!important;
  width:100%!important;height:auto!important;min-width:0!important;min-height:0!important;
  overflow-x:hidden!important;overflow-y:auto!important;
  touch-action:pan-y!important;scrollbar-width:thin!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .city-control-mini .mini-needs-list{
  display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;
  width:100%!important;min-width:0!important;height:auto!important;gap:0!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .city-control-mini .mini-need{
  display:flex!important;flex-direction:row!important;align-items:center!important;
  width:100%!important;min-width:0!important;max-width:100%!important;
  height:22px!important;min-height:22px!important;max-height:22px!important;
  padding:2px 2px!important;gap:3px!important;
  border-radius:0!important;border:0!important;
  border-bottom:1px solid var(--ui-v8-border,#d5e5d8)!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .city-control-mini .mini-need>span{
  flex:1 1 auto!important;width:auto!important;min-width:0!important;max-width:none!important;
  font-size:9px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .city-control-mini .mini-need-values{
  display:grid!important;grid-template-columns:repeat(3,minmax(18px,1fr))!important;
  flex:0 0 81px!important;width:81px!important;min-width:81px!important;max-width:81px!important;
  align-items:center!important;gap:1px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .city-control-mini .mini-need-values :is(b,strong){
  width:auto!important;min-width:0!important;font-size:9px!important;text-align:center!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed)>.builder-zone{
  display:flex!important;grid-column:1/-1!important;grid-row:2!important;
  width:100%!important;height:100%!important;min-height:0!important;max-height:100%!important;
  padding:0!important;overflow:hidden!important;
  border-radius:0 0 11px 11px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone #buildDock{
  display:flex!important;flex-direction:column!important;
  width:100%!important;height:100%!important;min-height:0!important;max-height:100%!important;
  overflow:hidden!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .dock-head{
  display:flex!important;flex:0 0 35px!important;
  height:35px!important;min-height:35px!important;max-height:35px!important;
  gap:3px!important;padding:2px 4px!important;overflow:hidden!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .dock-body{
  display:flex!important;flex:1 1 auto!important;flex-direction:column!important;
  min-height:0!important;max-height:none!important;
  padding:0 4px 4px!important;overflow:hidden!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .dock-context{
  display:flex!important;flex:1 1 auto!important;flex-direction:column!important;
  width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;
  margin:1px 0 0!important;padding:0!important;overflow:hidden!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone #subcategories{
  flex:0 0 30px!important;height:30px!important;min-height:30px!important;max-height:30px!important;
  padding:2px 5px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .tools{
  display:flex!important;flex:1 1 auto!important;align-items:stretch!important;
  min-height:0!important;height:auto!important;max-height:none!important;
  padding:4px!important;gap:5px!important;overflow-x:auto!important;overflow-y:hidden!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .tools>.tool,
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .tools:not(:has(>.tool:nth-child(5)))>.tool{
  display:flex!important;flex:0 0 100px!important;flex-direction:column!important;
  align-items:center!important;justify-content:center!important;
  width:100px!important;min-width:100px!important;max-width:100px!important;
  height:100%!important;min-height:0!important;max-height:100%!important;
  padding:5px 4px!important;gap:3px!important;overflow:hidden!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .tool-icon{
  display:grid!important;flex:0 0 23px!important;place-items:center!important;
  width:26px!important;height:23px!important;font-size:21px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .tools>.tool>span:last-child{
  display:flex!important;flex-direction:column!important;
  width:100%!important;min-width:0!important;max-width:100%!important;
  justify-content:center!important;align-items:center!important;gap:2px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .tools>.tool .tool-name{
  display:block!important;max-width:100%!important;
  font-size:11px!important;line-height:1.2!important;
  white-space:normal!important;overflow:visible!important;text-align:center!important;
  overflow-wrap:anywhere!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .tools>.tool .tool-price{
  display:block!important;font-size:10px!important;line-height:1.15!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
  max-width:100%!important;
 }
}
/* Less horizontal space for portrait phones. Keep icon-only labels on small
   dashboard actions to protect the city title and preserve the menu button. */
@media(max-width:520px){
 body>.bottom>.control-deck:not(.tools-collapsed) .city-dashboard .dashboard-member-buttons{
  gap:2px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .city-dashboard .dashboard-member-buttons>button{
  flex:0 0 25px!important;width:25px!important;min-width:25px!important;
  max-width:25px!important;height:25px!important;min-height:25px!important;
  max-height:25px!important;padding:2px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .city-dashboard .dashboard-member-buttons>button small{
  display:none!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .city-dashboard .dashboard-title strong{
  font-size:13px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .city-dashboard .dashboard-title small{
  font-size:8px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .city-metric .metric-icon{display:none!important}
 body>.bottom>.control-deck:not(.tools-collapsed) .city-metric strong{font-size:11px!important}
 body>.bottom>.control-deck:not(.tools-collapsed) .city-metric small{font-size:7.5px!important}
}
@media(max-width:920px) and (max-height:520px){
 body>.bottom>.control-deck:not(.tools-collapsed){
  height:min(247px,calc(100dvh - 12px - env(safe-area-inset-bottom,0px)))!important;
  grid-template-rows:minmax(0,95fr) minmax(0,152fr)!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .dock-head{
  flex-basis:32px!important;height:32px!important;min-height:32px!important;max-height:32px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone #subcategories{
  flex-basis:28px!important;height:28px!important;min-height:28px!important;max-height:28px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .city-dashboard .city-metric small{font-size:7px!important}
}


/* SMCITY v2.5.2 — compact square construction tiles and accessible action icons */
/* Unify the visual language: save, account and main-menu symbols are
   outline SVGs, always stroked in the same colour as their button. */
body>.bottom>.control-deck:not(.tools-collapsed) .city-dashboard .dashboard-member-buttons>button:is(#accountQuick,#saveGameQuick,#menu){
 color:#244f3d!important;
 background:#f2f8f1!important;
 border:1px solid #abcbb6!important;
 border-radius:7px!important;
 box-shadow:none!important;
}
body>.bottom>.control-deck:not(.tools-collapsed) .city-dashboard .dashboard-member-buttons>button:is(#accountQuick,#saveGameQuick,#menu):is(:hover,:focus-visible){
 background:#e2f1e6!important;border-color:#598c6d!important;
}
body>.bottom>.control-deck:not(.tools-collapsed) .city-dashboard .dashboard-member-buttons .map-save-art{
 background:transparent!important;border:0!important;box-shadow:none!important;
 padding:0!important;margin:0!important;display:grid!important;place-items:center!important;
 border-radius:0!important;
}
body>.bottom>.control-deck:not(.tools-collapsed) .city-dashboard .dashboard-member-buttons .map-rail-svg{
 color:inherit!important;stroke:currentColor!important;fill:none!important;
 display:block!important;overflow:visible!important;
}
body>.bottom>.control-deck:not(.tools-collapsed) .city-dashboard .dashboard-member-buttons .map-rail-svg :is(path,circle,rect,line,polyline){
 stroke:currentColor!important;fill:none!important;
}
:root.smcity-gray-ui body>.bottom>.control-deck:not(.tools-collapsed) .city-dashboard .dashboard-member-buttons>button:is(#accountQuick,#saveGameQuick,#menu){
 color:#f2faf6!important;background:#242d33!important;
 border-color:#7e9ba2!important;
}
:root.smcity-gray-ui body>.bottom>.control-deck:not(.tools-collapsed) .city-dashboard .dashboard-member-buttons>button:is(#accountQuick,#saveGameQuick,#menu):is(:hover,:focus-visible){
 background:#34494c!important;border-color:#b7d4c8!important;
}
:root.smcity-gray-ui body>.bottom>.control-deck:not(.tools-collapsed) .city-dashboard .dashboard-member-buttons .map-rail-svg{
 color:#f2faf6!important;stroke:currentColor!important;
}
/* Mobile and iPad portrait: keep exactly the same two-row composition
   but return it to roughly the earlier compact height. */
@media(max-width:920px){
 body>.bottom>.control-deck:not(.tools-collapsed){
  height:min(222px,calc(100dvh - 14px - env(safe-area-inset-bottom,0px)))!important;
  max-height:calc(100dvh - 14px - env(safe-area-inset-bottom,0px))!important;
  grid-template-rows:minmax(0,100fr) minmax(0,122fr)!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .city-dashboard .dashboard-member-buttons{
  gap:3px!important;flex-wrap:nowrap!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .city-dashboard .dashboard-member-buttons>button:is(#accountQuick,#saveGameQuick,#menu){
  display:inline-flex!important;flex:0 0 26px!important;
  width:26px!important;min-width:26px!important;max-width:26px!important;
  height:26px!important;min-height:26px!important;max-height:26px!important;
  padding:3px!important;gap:0!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .city-dashboard .dashboard-member-buttons>button small{
  display:none!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .city-dashboard .dashboard-member-buttons .map-rail-svg,
 body>.bottom>.control-deck:not(.tools-collapsed) .city-dashboard .dashboard-member-buttons .map-save-art,
 body>.bottom>.control-deck:not(.tools-collapsed) .city-dashboard .dashboard-member-buttons .map-save-art svg{
  flex:0 0 18px!important;width:18px!important;height:18px!important;
  min-width:18px!important;max-width:18px!important;
  min-height:18px!important;max-height:18px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .dock-head{
  height:31px!important;min-height:31px!important;max-height:31px!important;
  flex:0 0 31px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone #subcategories{
  height:25px!important;min-height:25px!important;max-height:25px!important;
  flex:0 0 25px!important;padding:1px 4px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone #subcategories button{
  height:22px!important;min-height:22px!important;max-height:22px!important;
  padding:2px 6px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .tools{
  flex:1 1 auto!important;align-items:center!important;
  min-height:0!important;height:auto!important;
  padding:2px 4px!important;gap:4px!important;
  overflow-x:auto!important;overflow-y:hidden!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .tools>.tool,
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .tools:not(:has(>.tool:nth-child(5)))>.tool{
  box-sizing:border-box!important;flex:0 0 52px!important;
  width:52px!important;min-width:52px!important;max-width:52px!important;
  height:52px!important;min-height:52px!important;max-height:52px!important;
  aspect-ratio:1/1!important;
  padding:2px 2px!important;gap:1px!important;
  align-items:center!important;justify-content:center!important;
  overflow:hidden!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .tool-icon{
  display:grid!important;place-items:center!important;
  flex:0 0 16px!important;width:19px!important;height:16px!important;
  min-height:16px!important;font-size:16px!important;line-height:1!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .tools>.tool>span:last-child{
  gap:1px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .tools>.tool .tool-name{
  font-size:9px!important;line-height:1.15!important;
  text-align:center!important;white-space:normal!important;
  max-height:21px!important;overflow:hidden!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .tools>.tool .tool-price{
  font-size:8px!important;line-height:1.1!important;
  max-width:100%!important;text-align:center!important;
 }
}
/* Smaller-height touch viewports: scale the square tiles down before they
   could be clipped by the 31px clock and 25px category bar. */
@media(max-width:920px) and (max-height:520px){
 body>.bottom>.control-deck:not(.tools-collapsed){
  height:min(190px,calc(100dvh - 14px - env(safe-area-inset-bottom,0px)))!important;
  grid-template-rows:minmax(0,78fr) minmax(0,112fr)!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .dock-head{
  height:28px!important;min-height:28px!important;max-height:28px!important;flex-basis:28px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone #subcategories{
  height:23px!important;min-height:23px!important;max-height:23px!important;flex-basis:23px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .tools>.tool,
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .tools:not(:has(>.tool:nth-child(5)))>.tool{
  flex-basis:44px!important;width:44px!important;min-width:44px!important;max-width:44px!important;
  height:44px!important;min-height:44px!important;max-height:44px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .tool-icon{
  flex-basis:13px!important;width:16px!important;height:13px!important;font-size:14px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .tools>.tool .tool-name{font-size:8px!important}
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .tools>.tool .tool-price{font-size:7px!important}
}
/* Tablet landscape with touch pointer gets the same square cards without
   resizing the desktop pointer/fine version. */
@media(min-width:921px) and (max-width:1240px) and (hover:none) and (pointer:coarse){
 body>.bottom>.control-deck:not(.tools-collapsed){height:145px!important;max-height:145px!important}
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .tools{
  align-items:center!important;gap:4px!important;padding:3px 5px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .tools>.tool,
 body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .tools:not(:has(>.tool:nth-child(5)))>.tool{
  box-sizing:border-box!important;flex:0 0 56px!important;
  width:56px!important;min-width:56px!important;max-width:56px!important;
  height:56px!important;min-height:56px!important;max-height:56px!important;
  aspect-ratio:1/1!important;
 }
}


/* SMCITY — centered demolition confirmation card */
/* This is the ONLY destructive-action dialog. All other dialogs keep
   their current size/position, including the centered main menu. */
#dialog.demolition-confirm{
 position:fixed!important;inset:auto!important;
 left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;
 transform:translate(-50%,-50%)!important;zoom:1!important;
 box-sizing:border-box!important;width:min(270px,calc(100vw - 20px))!important;
 min-width:0!important;max-width:calc(100vw - 20px)!important;
 max-height:min(220px,calc(100dvh - 20px))!important;
 margin:0!important;padding:13px!important;
 background:var(--sm-panel-bg,#fafdf9)!important;
 color:var(--sm-panel-ink,#23483a)!important;
 border:1px solid var(--sm-panel-line,#c9ded1)!important;
 border-radius:13px!important;
 box-shadow:0 12px 36px rgba(6,32,25,.26)!important;
 overflow:auto!important;
}
#dialog.demolition-confirm::backdrop{
 background:rgba(13,25,22,.12)!important;backdrop-filter:none!important;
}
#dialog.demolition-confirm>.dialog-close-top{display:none!important}
#dialog.demolition-confirm>#dialogContent{
 padding:0!important;margin:0!important;overflow:visible!important;
}
#dialog.demolition-confirm .demolition-card{
 display:flex!important;align-items:flex-start!important;
 gap:9px!important;margin:0!important;
}
#dialog.demolition-confirm .demolition-symbol{
 display:grid!important;place-items:center!important;
 flex:0 0 28px!important;width:28px!important;height:28px!important;
 border-radius:9px!important;
 color:#a73b39!important;background:#ffeded!important;
 border:1px solid #f0b6ad!important;
 font:800 22px/1 system-ui,sans-serif!important;
}
#dialog.demolition-confirm .demolition-info{
 flex:1 1 auto!important;min-width:0!important;
}
#dialog.demolition-confirm .demolition-info h2{
 margin:1px 0 4px!important;padding:0!important;
 font:800 15px/1.35 "Noto Sans Thai",Tahoma,sans-serif!important;
 color:var(--sm-panel-ink,#23483a)!important;
}
#dialog.demolition-confirm .demolition-info p{
 margin:0!important;padding:0!important;
 font:400 11px/1.5 "Noto Sans Thai",Tahoma,sans-serif!important;
 color:var(--sm-panel-muted,#6b7f71)!important;
}
#dialog.demolition-confirm .demolition-actions{
 display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important;
 margin:12px 0 0!important;padding:0!important;
 position:static!important;background:transparent!important;
}
#dialog.demolition-confirm .demolition-actions>button{
 width:100%!important;min-height:34px!important;
 margin:0!important;padding:6px 9px!important;
 font:700 12px/1.3 "Noto Sans Thai",Tahoma,sans-serif!important;
 border-radius:8px!important;box-shadow:none!important;
}
#dialog.demolition-confirm .demolition-actions>#cancelDialog{
 background:var(--sm-panel-card,#edf5ef)!important;
 border:1px solid var(--sm-panel-line,#c8d9ca)!important;
 color:var(--sm-panel-ink,#244e3c)!important;
}
#dialog.demolition-confirm .demolition-actions>#confirmDialog{
 background:#b94139!important;border:1px solid #b94139!important;
 color:#fff!important;
}
#dialog.demolition-confirm .demolition-actions>#confirmDialog:hover{
 background:#9b302d!important;border-color:#9b302d!important;
}
:root.smcity-gray-ui #dialog.demolition-confirm .demolition-symbol{
 background:#4a292a!important;border-color:#8e4b4f!important;color:#ffc3bc!important;
}
:root.smcity-gray-ui #dialog.demolition-confirm .demolition-actions>#confirmDialog{
 background:#c54642!important;border-color:#e55c53!important;color:#fff!important;
}


/* Vehicle-status diamond control sits beside building-label visibility. */
body>.bottom .builder-zone .build-dock .dock-head .dock-display-actions>#toggleCarDiamonds.is-hidden{
 background:#cfdfd4!important;border-color:#84ab94!important;color:#235b3e!important;
}
:root.smcity-gray-ui body>.bottom .builder-zone .build-dock .dock-head .dock-display-actions>#toggleCarDiamonds.is-hidden{
 background:#333b44!important;border-color:#7a8999!important;color:#f6f7fa!important;
}
#toggleCarDiamonds .toggle-car-diamonds-icon{font-size:12px;line-height:1}
@media(max-width:1100px){
 body>.bottom .builder-zone .build-dock .dock-head #toggleCarDiamondsText{display:none!important;}
}


/* AI signal upgrade pins: always directly tappable above a visible intersection. */
.ai-junction-overlay{position:fixed;inset:0;pointer-events:none;z-index:21;overflow:hidden;}
.ai-junction-pin{
 position:absolute;transform:translate(-50%,-110%);
 display:inline-flex;align-items:center;justify-content:center;
 min-width:42px;height:30px;padding:3px 8px;
 border:1.5px solid #87c7e8;border-radius:9px;
 background:linear-gradient(135deg,#112c47,#20567b);
 color:#f2faff;box-shadow:0 2px 8px #061b2c8c,0 0 10px #42bcf45e;
 font:800 12px/1 system-ui,-apple-system,sans-serif;
 letter-spacing:.04em;white-space:nowrap;cursor:pointer;
 pointer-events:auto;touch-action:manipulation;
 transition:background .16s,box-shadow .16s; user-select:none;-webkit-user-select:none;min-height:32px;
}
.ai-junction-pin:hover,.ai-junction-pin:focus-visible{
 outline:2px solid #e6faff;outline-offset:2px;
 box-shadow:0 3px 12px #07324cc7,0 0 20px #1ecafaaf;
}
.ai-junction-pin.owned{
 color:#052c3a;background:linear-gradient(135deg,#c1faff,#34caed);
 border-color:#fff;box-shadow:0 0 8px #50ddfff0,0 0 20px #38cdf77a;
}
.ai-junction-pin[hidden]{display:none!important;}
.signal-ai-owned{padding:9px 12px;border-radius:9px;background:#d5f8fd;color:#155673;font-weight:700}
.signal-ai-price{margin:12px 0;font-size:1.05em}
.signal-ai-price strong{color:#1f82bb}
:root.smcity-gray-ui .signal-ai-owned{background:#163e52;color:#9aeaff}
@media(max-width:700px){
 .ai-junction-pin{height:28px;min-width:38px;padding:3px 7px;font-size:11px;}
}

/* One stable hit target: stop the hover scale from making the AI badge jump. */
.ai-junction-overlay[hidden]{display:none!important}
.ai-junction-pin:active{background:#256990!important;outline:2px solid #8cf4ff}
body>.bottom .builder-zone .build-dock .dock-head .dock-display-actions>#toggleAIPins.is-hidden{
 background:#d5e2e8!important;border-color:#9bb2c7!important;color:#355c74!important;
}
:root.smcity-gray-ui body>.bottom .builder-zone .build-dock .dock-head .dock-display-actions>#toggleAIPins.is-hidden{
 background:#313e4b!important;border-color:#8095a8!important;color:#e0f5ff!important;
}
#toggleAIPins .toggle-ai-pins-icon{font-size:12px;line-height:1}
@media(max-width:1199px){
 body>.bottom .builder-zone .build-dock .dock-head #toggleAIPinsText{display:none!important;}
}

/* Paid vehicle research, four personality cards / 1% purchase controls. */
#dialog:has(.vehicle-tech-head){width:min(980px,calc(100vw - 28px));max-width:980px;max-height:min(88vh,850px);overflow-y:auto;box-sizing:border-box;}
.vehicle-tech-head{padding:5px 2px 17px;border-bottom:1px solid #b1c6c180;margin-bottom:15px;}
.vehicle-tech-head h2{margin:5px 0;font-size:clamp(21px,2.7vw,28px);}
.vehicle-tech-head p{font-size:13px;line-height:1.6;margin:7px 0;}
.vehicle-tech-head>strong{display:inline-block;padding:7px 13px;border-radius:12px;background:#c4e8db66;color:inherit;}
.vehicle-tech-traits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;}
.vehicle-tech-trait{border:1px solid #bdd2ce88;border-radius:17px;padding:12px;background:#f4faf8;}
.vehicle-tech-trait header{display:flex;justify-content:space-between;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:10px;}
.vehicle-tech-trait h3{margin:0;font-size:17px;}
.vehicle-tech-trait header span{font-size:11px;opacity:.75;}
.vehicle-tech-row{display:grid;grid-template-columns:minmax(0,1fr) 76px 91px;gap:7px;align-items:center;border-top:1px solid #c8d8d4;padding:9px 0;}
.vehicle-tech-detail{display:flex;flex-direction:column;min-width:0;gap:3px;}
.vehicle-tech-detail strong{font-size:13px;}
.vehicle-tech-detail small{font-size:10px;opacity:.73;line-height:1.35;}
.vehicle-tech-value{text-align:center;display:flex;flex-direction:column;gap:2px;}
.vehicle-tech-value b{font-size:21px;font-variant-numeric:tabular-nums;color:#116e78;}
.vehicle-tech-value small{font-size:10px;white-space:nowrap;opacity:.72;}
.vehicle-tech-buy{border:1px solid #2999a8;border-radius:12px;background:#d7f5f3;color:#075766;font-weight:800;font-size:15px;min-height:45px;padding:5px 4px;cursor:pointer;}
.vehicle-tech-buy small{display:block;font-size:10px;font-weight:600;margin-top:2px;}
.vehicle-tech-buy:hover:not(:disabled){background:#8de2df;}
.vehicle-tech-buy:disabled{opacity:.34;cursor:not-allowed;}
.vehicle-tech-note{font-size:11px;opacity:.72;margin-top:13px;}
:root.smcity-gray-ui .vehicle-tech-trait{background:#20272e;border-color:#445760;}
:root.smcity-gray-ui .vehicle-tech-row{border-top-color:#46535b;}
:root.smcity-gray-ui .vehicle-tech-value b{color:#85f3f5;}
:root.smcity-gray-ui .vehicle-tech-buy{background:#154652;color:#a7f9ff;border-color:#528e95;}
@media(max-width:700px){.vehicle-tech-traits{grid-template-columns:1fr;}.vehicle-tech-trait{padding:10px;}.vehicle-tech-row{grid-template-columns:minmax(0,1fr) 68px 83px;gap:4px;}}


/* Technology showroom and AI junction confirmation */
.vehicle-shop{color:#edf7ff;background:linear-gradient(160deg,#101e36,#091323);padding:14px;border-radius:20px}
.vehicle-shop .vehicle-tech-head{text-align:center;padding:20px;border:1px solid #3c6385;border-radius:19px;background:radial-gradient(circle at 50% 0%,#27558188,transparent 70%),#112238;color:#effaff}
.vehicle-shop .vehicle-tech-head h2{font-size:28px;letter-spacing:1px;color:#fff;margin:9px 0}
.vehicle-shop .vehicle-tech-head h2 span{font-size:17px;display:block;letter-spacing:0;margin-top:7px}
.vehicle-shop-balance{display:inline-block;padding:9px 18px;border-radius:40px;background:#183d49;color:#9bfbe8}
.vehicle-shop .vehicle-tech-traits{margin-top:16px}
.vehicle-shop .vehicle-shop-section{background:#121e31!important;border:1px solid #36526e!important;color:#edf7ff;border-radius:20px;padding:14px}
.vehicle-shop .vehicle-shop-section header span{color:#cbdceb;opacity:1}
.vehicle-shop .vehicle-shop-section h3{color:#fff}
.vehicle-shop .vehicle-tech-row.vehicle-shop-card{background:#1c2b41;border:1px solid #3a4f65;border-radius:14px;padding:12px;margin:8px 0;grid-template-columns:minmax(0,1fr) 66px 110px;gap:7px}
.vehicle-shop .vehicle-shop-card.tech-speed{border-left:3px solid #ff4b55}
.vehicle-shop .vehicle-shop-card.tech-smart{border-left:3px solid #40c5ff}
.vehicle-shop .vehicle-shop-card.tech-fly{border-left:3px solid #ffdd4c}
.vehicle-shop .vehicle-shop-card.tech-warp{border-left:3px solid #4ce995}
.vehicle-shop .vehicle-tech-detail strong{color:#fff;font-size:13px}
.vehicle-shop .vehicle-aura{color:#daeafa;opacity:1;display:flex;align-items:center;gap:6px}
.vehicle-shop .vehicle-aura i{width:9px;height:9px;flex:none;border-radius:50%;background:var(--aura);box-shadow:0 0 10px var(--aura)}
.vehicle-shop .vehicle-tech-value b{color:#d6f7ff}
.vehicle-shop .vehicle-tech-buy{color:#071a2a;background:linear-gradient(120deg,#6bdcff,#a9f8e8);border:0;padding:6px;border-radius:10px;box-shadow:0 5px 14px #00baff33;font-size:12px}
.vehicle-shop .vehicle-tech-buy:disabled{opacity:.4;box-shadow:none}
.vehicle-shop .actions{margin-top:14px}
#dialog.ai-upgrade-center[open]{position:fixed!important;inset:0!important;margin:auto!important;top:0!important;left:0!important;right:0!important;bottom:0!important;max-width:min(520px,calc(100vw - 24px))!important;width:calc(100% - 24px);max-height:90dvh;overflow:auto}
.ai-purchase{text-align:center;background:radial-gradient(ellipse at top,#163960,#0c1429 70%);color:#e9f7ff;border:1px solid #4592bb;border-radius:21px;padding:26px 17px;box-shadow:0 0 35px #34c6ff30}
.ai-purchase .ai-orbit{margin:auto auto 9px;display:grid;place-items:center;width:64px;height:64px;border:2px solid #52dbff;border-radius:50%;font-size:35px;color:#8eecff;box-shadow:0 0 23px #38baff77,inset 0 0 18px #38baff44}
.ai-purchase h2{font-size:27px;color:#f7feff;margin:10px 0}
.ai-purchase-sub{color:#a7ddef;font-size:14px}
.ai-purchase-features{display:grid;gap:9px;margin:18px 0}
.ai-purchase-features span{padding:10px;border:1px solid #356b91;background:#173554;border-radius:10px;color:#ccefff}
.ai-purchase-price{display:grid;gap:5px;border:1px solid #4dbadd;border-radius:15px;padding:15px;background:#092536}
.ai-purchase-price small{color:#b3d9e4}
.ai-purchase-price strong{font-size:29px;color:#80edff}
.ai-purchase-actions{display:flex;gap:10px;justify-content:center;margin-top:20px}
.ai-purchase-actions button{flex:1;min-width:0;border-radius:12px;padding:12px 8px}
.ai-purchase-actions .primary{background:#35bfe5;color:#06253b}
@media(max-width:700px){.vehicle-shop .vehicle-tech-traits{grid-template-columns:1fr}.vehicle-shop{padding:8px}.vehicle-shop .vehicle-tech-row.vehicle-shop-card{grid-template-columns:minmax(0,1fr) 55px 94px}.vehicle-shop .vehicle-tech-head h2{font-size:23px}.vehicle-shop .vehicle-tech-value b{font-size:16px}}

/* SMCITY v4.1: high contrast, uncluttered vehicle shop */
#dialog:has(.vehicle-shop){width:min(1060px,calc(100vw - 20px));max-width:1060px;max-height:90dvh;overflow:auto;padding:10px}
#dialog .vehicle-shop,#dialog .vehicle-shop *{box-sizing:border-box}
#dialog .vehicle-shop{color:#f2f8ff!important;font-size:14px;line-height:1.5}
#dialog .vehicle-shop .vehicle-tech-traits{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
#dialog .vehicle-shop .vehicle-shop-section{background:#14243a!important;border:1px solid #44617e!important;color:#f2f8ff!important;min-width:0}
#dialog .vehicle-shop .vehicle-shop-section header{gap:8px}
#dialog .vehicle-shop .vehicle-shop-section h3,#dialog .vehicle-shop .vehicle-tech-detail strong{color:#ffffff!important}
#dialog .vehicle-shop .vehicle-shop-section header span{color:#d7e6f5!important;font-size:12px;opacity:1}
#dialog .vehicle-shop .vehicle-shop-card{background:#20344e!important;grid-template-columns:minmax(0,1fr) 62px 115px;min-width:0;gap:8px}
#dialog .vehicle-shop .vehicle-tech-detail{min-width:0;overflow-wrap:anywhere}
#dialog .vehicle-shop .vehicle-tech-detail strong{font-size:13px;line-height:1.35}
#dialog .vehicle-shop .vehicle-aura{color:#f2f7ff!important;font-size:12px;opacity:1}
#dialog .vehicle-shop .vehicle-tech-value b{color:#96edff!important;font-size:19px}
#dialog .vehicle-shop .vehicle-tech-value small{color:#e0edf8!important;white-space:normal;font-size:11px;opacity:1}
#dialog .vehicle-shop .vehicle-tech-buy{color:#062539!important;background:#8fe6ed!important;font-size:12px;line-height:1.25;white-space:normal;min-height:51px;padding:7px 4px}
#dialog .vehicle-shop .vehicle-tech-buy small{color:#12344b!important;font-size:11px;opacity:1}
#dialog .vehicle-shop .vehicle-tech-buy:disabled{opacity:.45}
@media(max-width:760px){#dialog .vehicle-shop .vehicle-tech-traits{grid-template-columns:1fr}#dialog .vehicle-shop .vehicle-shop-card{grid-template-columns:minmax(0,1fr) 56px 100px}#dialog .vehicle-shop .vehicle-tech-head{padding:14px 8px}}


/* SMCITY garage v2: independent full-layout replacement */
#dialog:has(.garage-v2)[open]{width:min(1230px,calc(100vw - 24px))!important;max-width:1230px!important;max-height:92dvh!important;padding:0!important;overflow:auto!important;border-radius:22px}
#dialog .garage-v2,#dialog .garage-v2 *{box-sizing:border-box;letter-spacing:normal}
#dialog .garage-v2{background:#0d1727;color:#f4f8ff;font-family:inherit;font-size:14px;line-height:1.5;min-width:0}
#dialog .garage-hero{padding:26px 30px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px;background:linear-gradient(115deg,#182a47,#0e2940);border-bottom:1px solid #365574}
#dialog .garage-hero small{display:block;color:#98c9e9;font-size:11px;line-height:1.5;font-weight:700;letter-spacing:1.5px}
#dialog .garage-hero h2{font-size:clamp(26px,3vw,38px);color:#fff;line-height:1.15;margin:7px 0;font-weight:850}
#dialog .garage-hero p{font-size:15px;color:#c5e3f5;margin:0}
#dialog .garage-wallet{background:#0c1c2e;border:1px solid #477795;border-radius:16px;padding:14px 20px;min-width:220px}
#dialog .garage-wallet strong{display:block;color:#9ceee0;font-size:22px;margin-top:4px;font-variant-numeric:tabular-nums}
#dialog .garage-catalog{padding:24px;display:grid;gap:26px}
#dialog .garage-group{min-width:0}
#dialog .garage-group-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;padding:0 2px}
#dialog .garage-group-heading h3{color:#fff;font-size:19px;line-height:1.4;margin:0;font-weight:750}
#dialog .garage-group-heading span{color:#b3cede;font-size:13px}
#dialog .garage-products{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
#dialog .garage-product{display:flex;flex-direction:column;min-width:0;overflow:hidden;border-radius:18px;padding:17px;background:#192a42;border:1px solid #3a526e;box-shadow:inset 0 3px 0 var(--garage-accent)}
#dialog .garage-product-top{display:flex;align-items:flex-start;flex-direction:column;gap:7px;min-height:56px}
#dialog .garage-product-type{color:#fff;font-size:17px;line-height:1.35;font-weight:750;white-space:normal;overflow-wrap:anywhere}
#dialog .garage-aura{display:flex;align-items:center;gap:7px;color:#dceefb;font-size:12px;line-height:1.5}
#dialog .garage-aura i{width:9px;height:9px;flex:none;border-radius:50%;background:var(--garage-accent);box-shadow:0 0 12px var(--garage-accent)}
#dialog .garage-product-symbol{height:72px;display:grid;place-items:center;font-size:43px;line-height:1}
#dialog .garage-product-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:12px 0;border-top:1px solid #3a4e65;border-bottom:1px solid #3a4e65}
#dialog .garage-product-stats>div{min-width:0}
#dialog .garage-product-stats small,#dialog .garage-price small{display:block;color:#afc8dd;font-size:11px;line-height:1.5}
#dialog .garage-product-stats strong{display:block;color:#f5faff;font-size:16px;font-weight:700;line-height:1.5;font-variant-numeric:tabular-nums}
#dialog .garage-product-footer{display:grid;gap:12px;margin-top:auto;padding-top:16px}
#dialog .garage-price strong{display:block;font-size:20px;color:#fff;line-height:1.3;white-space:nowrap;font-variant-numeric:tabular-nums}
#dialog .garage-buy{display:block;width:100%;min-height:44px;padding:10px;border:0;border-radius:11px;color:#071d30;background:#a1e9f8;font-size:14px;line-height:1.3;font-weight:800;cursor:pointer;white-space:normal}
#dialog .garage-buy:hover:not(:disabled){background:#d1faff}
#dialog .garage-buy:disabled{opacity:.38;cursor:not-allowed}
#dialog .garage-bottom{position:sticky;bottom:0;z-index:1;display:flex;justify-content:flex-end;padding:14px 24px;background:#101e32;border-top:1px solid #344f6c}
#dialog .garage-bottom button{background:#263e56;color:#fff;border:1px solid #52718b;border-radius:12px;padding:11px 24px;cursor:pointer}
@media(max-width:1050px){#dialog .garage-products{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){#dialog:has(.garage-v2)[open]{width:calc(100vw - 12px)!important;max-height:94dvh!important}#dialog .garage-hero{padding:18px;gap:14px}#dialog .garage-wallet{width:100%;min-width:0}#dialog .garage-catalog{padding:14px;gap:22px}#dialog .garage-products{grid-template-columns:1fr;gap:12px}#dialog .garage-product{padding:16px}#dialog .garage-product-symbol{height:52px;font-size:35px}#dialog .garage-group-heading{align-items:flex-start;flex-wrap:wrap}#dialog .garage-product-footer{grid-template-columns:1fr 1fr;align-items:end}#dialog .garage-price strong{font-size:17px}#dialog .garage-bottom{padding:12px 14px}}


/* Garage v3: one clean surface. White by default, dark only when theme is on. */
#dialog:has(.garage-v2)[open]{background:transparent!important;border:0!important;box-shadow:none!important;color:inherit!important}
#dialog:has(.garage-v2) #dialogContent{background:transparent!important;padding:0!important;border:0!important;box-shadow:none!important}
#dialog .garage-v2{--g-bg:#fff;--g-header:#f3f7fc;--g-card:#fff;--g-line:#dce6f1;--g-text:#16263a;--g-muted:#52677e;--g-button:#126b9b;--g-button-text:#fff;--g-bottom:#f5f8fc;background:var(--g-bg)!important;color:var(--g-text)!important;border:1px solid var(--g-line);border-radius:20px;overflow:hidden}
#dialog .garage-v2 .garage-hero{background:var(--g-header)!important;border-bottom:1px solid var(--g-line)!important;color:var(--g-text)!important}
#dialog .garage-v2 .garage-hero h2,#dialog .garage-v2 .garage-group-heading h3,#dialog .garage-v2 .garage-product-type,#dialog .garage-v2 .garage-product-stats strong,#dialog .garage-v2 .garage-price strong{color:var(--g-text)!important}
#dialog .garage-v2 .garage-hero p,#dialog .garage-v2 .garage-group-heading span,#dialog .garage-v2 .garage-aura,#dialog .garage-v2 .garage-product-stats small,#dialog .garage-v2 .garage-price small,#dialog .garage-v2 .garage-hero small,#dialog .garage-v2 .garage-wallet small{color:var(--g-muted)!important;opacity:1!important}
#dialog .garage-v2 .garage-wallet,#dialog .garage-v2 .garage-product{background:var(--g-card)!important;border:1px solid var(--g-line)!important;box-shadow:none!important}
#dialog .garage-v2 .garage-product{border-top:3px solid var(--garage-accent)!important}
#dialog .garage-v2 .garage-wallet strong{color:#116f62!important}
#dialog .garage-v2 .garage-product-stats{border-color:var(--g-line)!important}
#dialog .garage-v2 .garage-buy{background:var(--g-button)!important;color:var(--g-button-text)!important}
#dialog .garage-v2 .garage-buy:hover:not(:disabled){filter:brightness(1.12)}
#dialog .garage-v2 .garage-bottom{background:var(--g-bottom)!important;border-color:var(--g-line)!important}
#dialog .garage-v2 .garage-bottom button{background:#fff!important;color:#263d55!important;border:1px solid #b5c7db!important}
:root.smcity-gray-ui #dialog .garage-v2{--g-bg:#0d1727;--g-header:#13243d;--g-card:#1b2d45;--g-line:#405771;--g-text:#f5f9ff;--g-muted:#cad9e9;--g-button:#a1e9f8;--g-button-text:#092133;--g-bottom:#14243a}
:root.smcity-gray-ui #dialog .garage-v2 .garage-wallet strong{color:#a2f1dc!important}
:root.smcity-gray-ui #dialog .garage-v2 .garage-bottom button{background:#263e56!important;color:#fff!important;border-color:#64809b!important}
#dialog .garage-v2 .garage-product-stats strong,#dialog .garage-v2 .garage-price strong{overflow-wrap:anywhere;white-space:normal!important}


/* AI signal checkout: clean single-layer card, theme-aware */
#dialog.ai-upgrade-center[open]{position:fixed!important;inset:0!important;margin:auto!important;top:0!important;left:0!important;right:0!important;bottom:0!important;width:min(510px,calc(100vw - 24px))!important;max-width:510px!important;max-height:min(90dvh,720px)!important;overflow:auto!important;padding:0!important;background:transparent!important;border:0!important;border-radius:20px!important;box-shadow:none!important}
#dialog.ai-upgrade-center #dialogContent{padding:0!important;background:transparent!important;box-shadow:none!important;border:0!important}
#dialog.ai-upgrade-center .ai-purchase{--ai-bg:#fff;--ai-head:#f3f8fc;--ai-card:#f5f9fd;--ai-border:#d4e2ec;--ai-text:#172b40;--ai-muted:#536b7e;--ai-accent:#116a93;--ai-button:#087fa9;--ai-button-text:#fff;position:relative;box-sizing:border-box;width:100%;margin:0;background:var(--ai-bg)!important;color:var(--ai-text)!important;border:1px solid var(--ai-border)!important;box-shadow:0 18px 55px #08172b35!important;border-radius:20px!important;padding:25px!important;text-align:center}
#dialog.ai-upgrade-center .ai-purchase *{box-sizing:border-box;letter-spacing:normal}
#dialog.ai-upgrade-center .ai-orbit{border-color:var(--ai-accent)!important;color:var(--ai-accent)!important;background:var(--ai-head)!important;box-shadow:none!important}
#dialog.ai-upgrade-center .ai-purchase .eyebrow,#dialog.ai-upgrade-center .ai-purchase-sub{color:var(--ai-muted)!important;line-height:1.55}
#dialog.ai-upgrade-center .ai-purchase h2{color:var(--ai-text)!important;line-height:1.2;font-size:clamp(23px,4vw,30px);margin:12px 0 6px}
#dialog.ai-upgrade-center .ai-purchase-features{margin:20px 0;gap:9px;text-align:left}
#dialog.ai-upgrade-center .ai-purchase-features span{display:block;background:var(--ai-card)!important;border:1px solid var(--ai-border)!important;color:var(--ai-text)!important;padding:12px 14px;border-radius:12px;font-size:13px;line-height:1.5}
#dialog.ai-upgrade-center .ai-purchase-price{background:var(--ai-head)!important;border:1px solid var(--ai-border)!important;padding:17px;border-radius:14px;gap:6px}
#dialog.ai-upgrade-center .ai-purchase-price small{color:var(--ai-muted)!important;font-size:12px;line-height:1.5}
#dialog.ai-upgrade-center .ai-purchase-price strong{color:var(--ai-accent)!important;font-size:clamp(24px,5vw,32px);font-variant-numeric:tabular-nums}
#dialog.ai-upgrade-center .ai-purchase-actions{display:grid;grid-template-columns:1fr 1.35fr;gap:10px;margin-top:20px}
#dialog.ai-upgrade-center .ai-purchase-actions button{min-width:0;min-height:46px;margin:0!important;padding:11px 8px!important;border-radius:11px!important;font-size:13px;font-weight:750;white-space:normal;line-height:1.35}
#dialog.ai-upgrade-center .ai-purchase-actions #cancelDialog{background:var(--ai-card)!important;color:var(--ai-text)!important;border:1px solid var(--ai-border)!important}
#dialog.ai-upgrade-center .ai-purchase-actions #confirmDialog{background:var(--ai-button)!important;color:var(--ai-button-text)!important;border:1px solid transparent!important}
#dialog.ai-upgrade-center .ai-purchase-actions #confirmDialog:disabled{opacity:.38!important;cursor:not-allowed}
#dialog.ai-upgrade-center .signal-note{color:#ba483e!important;font-size:12px;margin:12px 0 0}
:root.smcity-gray-ui #dialog.ai-upgrade-center .ai-purchase{--ai-bg:#101c2c;--ai-head:#172b41;--ai-card:#20364e;--ai-border:#42627f;--ai-text:#f3f9ff;--ai-muted:#c3d7e7;--ai-accent:#91e8ff;--ai-button:#92e7fa;--ai-button-text:#0b2638}
:root.smcity-gray-ui #dialog.ai-upgrade-center .signal-note{color:#ffaca8!important}
@media(max-width:520px){#dialog.ai-upgrade-center .ai-purchase{padding:19px 15px!important}#dialog.ai-upgrade-center .ai-purchase-actions{grid-template-columns:1fr 1.25fr}}


/* AI checkout v2 - ONE surface, light and dark themes */
#dialog.ai-upgrade-center[open]{width:min(480px,calc(100vw - 24px))!important;max-width:480px!important;max-height:90dvh!important;inset:0!important;margin:auto!important;padding:0!important;border:0!important;border-radius:18px!important;overflow:auto!important;background:#fff!important;box-shadow:0 20px 70px #101b293f!important}
#dialog.ai-upgrade-center #dialogContent{padding:0!important;margin:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
#dialog.ai-upgrade-center .ai-checkout-v2{--ai-bg:#fff;--ai-header:#f5f8fc;--ai-text:#182c41;--ai-muted:#5d7387;--ai-line:#dbe5ed;--ai-primary:#1074a4;--ai-primary-text:#fff;--ai-panel:#f7fafc;box-sizing:border-box;background:var(--ai-bg)!important;color:var(--ai-text)!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:26px!important;font-size:14px;line-height:1.5}
#dialog.ai-upgrade-center .ai-checkout-v2 *{box-sizing:border-box;letter-spacing:normal}
#dialog.ai-upgrade-center .ai-checkout-v2 header{text-align:center;padding:2px 0 20px;border-bottom:1px solid var(--ai-line);background:transparent!important}
#dialog.ai-upgrade-center .ai-checkout-icon{display:grid;place-items:center;margin:0 auto 11px;width:54px;height:54px;border-radius:16px;background:var(--ai-panel);border:1px solid var(--ai-line);color:var(--ai-primary);font-size:31px}
#dialog.ai-upgrade-center .ai-checkout-v2 header small{font-size:11px;color:var(--ai-muted);font-weight:700}
#dialog.ai-upgrade-center .ai-checkout-v2 h2{font-size:24px;line-height:1.25;color:var(--ai-text)!important;margin:9px 0 6px}
#dialog.ai-upgrade-center .ai-checkout-v2 header p{color:var(--ai-muted)!important;margin:0;font-size:13px}
#dialog.ai-upgrade-center .ai-checkout-info{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:16px 0;border-bottom:1px solid var(--ai-line)}
#dialog.ai-upgrade-center .ai-checkout-info span{color:var(--ai-muted);font-size:13px}
#dialog.ai-upgrade-center .ai-checkout-info strong{color:var(--ai-text);font-size:16px;text-align:right;overflow-wrap:anywhere}
#dialog.ai-upgrade-center .ai-checkout-balance{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:18px 0;padding:15px;border-radius:12px;background:var(--ai-panel);color:var(--ai-muted)}
#dialog.ai-upgrade-center .ai-checkout-balance strong{color:var(--ai-primary)}
#dialog.ai-upgrade-center .ai-checkout-actions{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;margin-top:22px}
#dialog.ai-upgrade-center .ai-checkout-actions button{min-height:45px!important;padding:10px!important;border-radius:11px!important;font-size:13px!important;font-weight:750!important;white-space:normal}
#dialog.ai-upgrade-center .ai-checkout-actions #cancelDialog{background:var(--ai-panel)!important;color:var(--ai-text)!important;border:1px solid var(--ai-line)!important}
#dialog.ai-upgrade-center .ai-checkout-actions #confirmDialog{background:var(--ai-primary)!important;color:var(--ai-primary-text)!important;border:0!important}
#dialog.ai-upgrade-center .ai-checkout-actions #confirmDialog:disabled{opacity:.4}
#dialog.ai-upgrade-center .ai-checkout-warning{color:#ba423b;font-size:12px;text-align:center}
:root.smcity-gray-ui #dialog.ai-upgrade-center[open]{background:#101d2e!important}
:root.smcity-gray-ui #dialog.ai-upgrade-center .ai-checkout-v2{--ai-bg:#101d2e;--ai-header:#172b40;--ai-text:#f6faff;--ai-muted:#c3d5e4;--ai-line:#405973;--ai-primary:#9ae7f9;--ai-primary-text:#0c293b;--ai-panel:#1d3148}
:root.smcity-gray-ui #dialog.ai-upgrade-center .ai-checkout-warning{color:#ffaca6}
@media(max-width:520px){#dialog.ai-upgrade-center .ai-checkout-v2{padding:20px 16px!important}#dialog.ai-upgrade-center .ai-checkout-info strong{font-size:14px}}


/* SMCITY v4.2.2 — theme-aware unified toolbar glow.
   LIGHT: Ice Blue; DARK: Cyber Purple. Render/UI only.
   Preserve layout, active logic, save/account actions, AI's own cyan pins,
   traffic heatmaps, F1 colors and destructive-action semantics.
   No perpetual box-shadow animation or extra WebGL lights. */
:root:not(.smcity-gray-ui){
 --smg-panel-top:#f6fcff;
 --smg-panel-bottom:#e7f5ff;
 --smg-button-top:#f9fdff;
 --smg-button-bottom:#d9f2ff;
 --smg-border:#91d8f8;
 --smg-icon:#008bca;
 --smg-text:#194761;
 --smg-aura:rgba(0,170,235,.18);
 --smg-aura-strong:rgba(0,191,255,.37);
 --smg-active-top:#d5f6ff;
 --smg-active-bottom:#91dfff;
}
:root.smcity-gray-ui{
 --smg-panel-top:#171422;
 --smg-panel-bottom:#221c30;
 --smg-button-top:#302641;
 --smg-button-bottom:#21182f;
 --smg-border:#75609c;
 --smg-icon:#c88eff;
 --smg-text:#f2eaff;
 --smg-aura:rgba(168,85,247,.24);
 --smg-aura-strong:rgba(168,85,247,.52);
 --smg-active-top:#55347a;
 --smg-active-bottom:#362450;
}

/* Unified panel skins: no added overlay elements or geometry. */
:root:is(.smcity-gray-ui,:not(.smcity-gray-ui)) body>.bottom>.control-deck,
:root:is(.smcity-gray-ui,:not(.smcity-gray-ui)) body>.bottom>.control-deck .city-dashboard,
:root:is(.smcity-gray-ui,:not(.smcity-gray-ui)) body>.bottom>.control-deck .city-control-mini,
:root:is(.smcity-gray-ui,:not(.smcity-gray-ui)) body>.bottom>.control-deck .builder-zone,
:root:is(.smcity-gray-ui,:not(.smcity-gray-ui)) body>.bottom>.control-deck .builder-zone .build-dock,
:root:is(.smcity-gray-ui,:not(.smcity-gray-ui)) body>.bottom>.control-deck .builder-zone .dock-head,
:root:is(.smcity-gray-ui,:not(.smcity-gray-ui)) body>.bottom>.control-deck .city-control-mini .city-demand-panel{
 background:linear-gradient(180deg,var(--smg-panel-top),var(--smg-panel-bottom))!important;
 border-color:var(--smg-border)!important;
 color:var(--smg-text)!important;
}
:root:is(.smcity-gray-ui,:not(.smcity-gray-ui)) body>.bottom>.control-deck{
 box-shadow:0 5px 22px var(--smg-aura),0 0 14px var(--smg-aura),inset 0 1px 0 rgba(255,255,255,.20)!important;
}
:root:is(.smcity-gray-ui,:not(.smcity-gray-ui)) body>.bottom>.control-deck .city-dashboard,
:root:is(.smcity-gray-ui,:not(.smcity-gray-ui)) body>.bottom>.control-deck .city-control-mini,
:root:is(.smcity-gray-ui,:not(.smcity-gray-ui)) body>.bottom>.control-deck .builder-zone .build-dock{
 box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 8px var(--smg-aura)!important;
}

/* Toolbar buttons and tool tiles; selector specificity beats legacy theme rules. */
:root:is(.smcity-gray-ui,:not(.smcity-gray-ui)) body>.bottom>.control-deck .city-dashboard .dashboard-member-buttons>button,
:root:is(.smcity-gray-ui,:not(.smcity-gray-ui)) body>.bottom>.control-deck .city-dashboard .dashboard-actions>button,
:root:is(.smcity-gray-ui,:not(.smcity-gray-ui)) body>.bottom>.control-deck .city-dashboard .city-metric,
:root:is(.smcity-gray-ui,:not(.smcity-gray-ui)) body>.bottom>.control-deck .city-control-mini .mini-need,
:root:is(.smcity-gray-ui,:not(.smcity-gray-ui)) body>.bottom>.control-deck .builder-zone .dock-context .tool,
:root:is(.smcity-gray-ui,:not(.smcity-gray-ui)) body>.bottom>.control-deck .builder-zone .dock-context #subcategories button,
:root:is(.smcity-gray-ui,:not(.smcity-gray-ui)) body>.bottom>.control-deck .builder-zone .build-dock #categories button,
:root:is(.smcity-gray-ui,:not(.smcity-gray-ui)) body>.bottom>.control-deck .builder-zone .dock-speed .playback button,
:root:is(.smcity-gray-ui,:not(.smcity-gray-ui)) body>.bottom>.control-deck .builder-zone .build-dock .dock-head>button,
:root:is(.smcity-gray-ui,:not(.smcity-gray-ui)) body>.bottom>.control-deck .builder-zone .build-dock .dock-head .dock-display-actions>button,
#cityLeftRail #cameraJoystick,
#cityLeftRail #cameraJoystick button,
#cityQuickModes [data-city-shortcut]:not([data-city-shortcut="erase"]){
 background:linear-gradient(135deg,var(--smg-button-top),var(--smg-button-bottom))!important;
 color:var(--smg-text)!important;
 border-color:var(--smg-border)!important;
 box-shadow:0 1px 5px var(--smg-aura),0 0 7px var(--smg-aura),inset 0 1px 0 rgba(255,255,255,.23)!important;
 transition:background .16s ease,box-shadow .16s ease,border-color .16s ease,filter .16s ease!important;
}

/* All icons on the tool rails share the glow color; text retains contrast. */
:root:is(.smcity-gray-ui,:not(.smcity-gray-ui)) body>.bottom>.control-deck :is(.map-rail-svg,.metric-icon svg,.tool-icon,.toggle-ai-pins-icon,.toggle-building-labels-icon,.toggle-car-diamonds-icon,.toggle-eye-comfort span,.quick-mode-icon),
:root:is(.smcity-gray-ui,:not(.smcity-gray-ui)) body>.bottom>.control-deck .dock-display-actions button>span[aria-hidden="true"],
:root #cityLeftRail #cameraJoystick button,
:root #cityQuickModes [data-city-shortcut]:not([data-city-shortcut="erase"]) .quick-mode-icon{
 color:var(--smg-icon)!important;
 filter:drop-shadow(0 0 3px var(--smg-aura))!important;
}
:root:is(.smcity-gray-ui,:not(.smcity-gray-ui)) body>.bottom>.control-deck .builder-zone .dock-context .tool-icon{
 background:transparent!important;
 border-color:transparent!important;
}
:root:is(.smcity-gray-ui,:not(.smcity-gray-ui)) body>.bottom>.control-deck .dashboard-member-buttons .map-rail-svg :is(path,rect,circle,ellipse,line,polyline){
 stroke:currentColor!important;
 fill:none!important;
}
:root:is(.smcity-gray-ui,:not(.smcity-gray-ui)) body>.bottom>.control-deck .city-dashboard .city-metric :is(strong,small),
:root:is(.smcity-gray-ui,:not(.smcity-gray-ui)) body>.bottom>.control-deck .city-control-mini .mini-need :is(strong,span),
:root:is(.smcity-gray-ui,:not(.smcity-gray-ui)) body>.bottom>.control-deck .builder-zone .tool .tool-name{
 color:inherit!important;
}

/* Hover and keyboard focus are brighter, without always-on animation. */
:root:is(.smcity-gray-ui,:not(.smcity-gray-ui)) body>.bottom>.control-deck .city-dashboard .dashboard-member-buttons>button:is(:hover,:focus-visible),
:root:is(.smcity-gray-ui,:not(.smcity-gray-ui)) body>.bottom>.control-deck .city-dashboard .city-metric:is(:hover,:focus-visible),
:root:is(.smcity-gray-ui,:not(.smcity-gray-ui)) body>.bottom>.control-deck .builder-zone .dock-context .tool:is(:hover,:focus-visible),
:root:is(.smcity-gray-ui,:not(.smcity-gray-ui)) body>.bottom>.control-deck .builder-zone .dock-context #subcategories button:is(:hover,:focus-visible),
:root:is(.smcity-gray-ui,:not(.smcity-gray-ui)) body>.bottom>.control-deck .builder-zone .build-dock #categories button:is(:hover,:focus-visible),
:root:is(.smcity-gray-ui,:not(.smcity-gray-ui)) body>.bottom>.control-deck .builder-zone .dock-speed .playback button:is(:hover,:focus-visible),
:root:is(.smcity-gray-ui,:not(.smcity-gray-ui)) body>.bottom>.control-deck .builder-zone .build-dock .dock-head button:is(:hover,:focus-visible),
:root #cityLeftRail #cameraJoystick button:is(:hover,:focus-visible),
:root #cityQuickModes [data-city-shortcut]:not([data-city-shortcut="erase"]):is(:hover,:focus-visible){
 background:linear-gradient(135deg,var(--smg-active-top),var(--smg-button-top))!important;
 border-color:var(--smg-icon)!important;
 box-shadow:0 2px 9px var(--smg-aura),0 0 16px var(--smg-aura-strong),inset 0 1px 0 rgba(255,255,255,.25)!important;
}
:root:is(.smcity-gray-ui,:not(.smcity-gray-ui)) body>.bottom>.control-deck .builder-zone .dock-context .tool:is(:hover,:focus-visible) .tool-icon,
:root:is(.smcity-gray-ui,:not(.smcity-gray-ui)) body>.bottom>.control-deck .dashboard-member-buttons>button:is(:hover,:focus-visible) svg,
:root #cityQuickModes [data-city-shortcut]:is(:hover,:focus-visible) .quick-mode-icon{
 filter:drop-shadow(0 0 5px var(--smg-aura-strong))!important;
}

/* Chosen mode or speed: strongest aura, but keep readable text. */
:root:is(.smcity-gray-ui,:not(.smcity-gray-ui)) body>.bottom>.control-deck .builder-zone .dock-context .tool.active,
:root:is(.smcity-gray-ui,:not(.smcity-gray-ui)) body>.bottom>.control-deck .builder-zone .dock-context #subcategories button.active,
:root:is(.smcity-gray-ui,:not(.smcity-gray-ui)) body>.bottom>.control-deck .builder-zone .build-dock #categories button.active,
:root:is(.smcity-gray-ui,:not(.smcity-gray-ui)) body>.bottom>.control-deck .builder-zone .dock-speed .playback button.active,
:root:is(.smcity-gray-ui,:not(.smcity-gray-ui)) body>.bottom>.control-deck .builder-zone .dock-head .dock-display-actions>button[aria-pressed="true"],
:root #cityQuickModes [data-city-shortcut]:not([data-city-shortcut="erase"]):is(.active,[aria-pressed="true"]){
 background:linear-gradient(135deg,var(--smg-active-top),var(--smg-active-bottom))!important;
 color:var(--smg-text)!important;
 border-color:var(--smg-icon)!important;
 box-shadow:0 0 8px var(--smg-aura-strong),0 0 17px var(--smg-aura),inset 0 0 8px rgba(255,255,255,.19)!important;
}
:root:is(.smcity-gray-ui,:not(.smcity-gray-ui)) body>.bottom>.control-deck .builder-zone .dock-context .tool.active .tool-icon{
 color:var(--smg-icon)!important;
 background:transparent!important;
 filter:drop-shadow(0 0 5px var(--smg-aura-strong))!important;
}

/* Keep removal conspicuously destructive instead of disguising it as ordinary UI. */
:root #cityQuickModes [data-city-shortcut="erase"]{
 border-color:#df9389!important;
 box-shadow:0 0 7px rgba(216,69,67,.24)!important;
}
:root #cityQuickModes [data-city-shortcut="erase"]:is(:hover,:focus-visible,.active,[aria-pressed="true"]){
 box-shadow:0 0 15px rgba(230,70,67,.43)!important;
}

/* Don't make disabled actions appear purchasable/clickable. */
:root:is(.smcity-gray-ui,:not(.smcity-gray-ui)) body>.bottom>.control-deck button:disabled,
:root #cityQuickModes button:disabled{
 opacity:.45!important;
 box-shadow:none!important;
 filter:none!important;
}

/* Respect people who disable motion. No new animations in either theme. */
@media(prefers-reduced-motion:reduce){
 :root:is(.smcity-gray-ui,:not(.smcity-gray-ui)) body>.bottom>.control-deck button,
 :root #cityLeftRail button,
 :root #cityQuickModes button{
  transition:none!important;
 }
}

/* iPad / iPadOS TECH GARAGE: compact centered modal without changing purchases or desktop layouts.
   iPad browser UI uses native zoom, so viewport/height limits must be explicit here. */
@supports (-webkit-touch-callout: none) {
 @media (min-width: 560px) and (min-height: 650px) and (max-width: 1366px) {
  #dialog:has(.garage-v2)[open]{
   width:min(700px,calc(100vw - 56px))!important;
   max-width:700px!important;
   max-height:80dvh!important;
   border-radius:16px!important;
   overflow-y:auto!important;
   overflow-x:hidden!important;
   -webkit-overflow-scrolling:touch;
   overscroll-behavior:contain;
  }
  #dialog .garage-v2{font-size:12px;line-height:1.4;border-radius:16px}
  #dialog .garage-hero{padding:14px 18px;gap:10px}
  #dialog .garage-hero small{font-size:10px}
  #dialog .garage-hero h2{font-size:24px;margin:4px 0}
  #dialog .garage-hero p{font-size:12px}
  #dialog .garage-wallet{min-width:160px;padding:9px 12px;border-radius:12px}
  #dialog .garage-wallet strong{font-size:17px;margin-top:2px}
  #dialog .garage-catalog{padding:14px 16px;gap:16px}
  #dialog .garage-group-heading{margin-bottom:8px;gap:8px}
  #dialog .garage-group-heading h3{font-size:15px}
  #dialog .garage-group-heading span{font-size:11px}
  #dialog .garage-products{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  #dialog .garage-product{padding:11px 12px;border-radius:12px}
  #dialog .garage-product-top{min-height:0;gap:3px}
  #dialog .garage-product-type{font-size:13px}
  #dialog .garage-aura{font-size:10px}
  #dialog .garage-product-symbol{height:40px;font-size:28px}
  #dialog .garage-product-stats{gap:5px;padding:7px 0}
  #dialog .garage-product-stats small,#dialog .garage-price small{font-size:10px}
  #dialog .garage-product-stats strong{font-size:12px}
  #dialog .garage-product-footer{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;padding-top:9px}
  #dialog .garage-price strong{font-size:14px}
  #dialog .garage-buy{width:auto;min-width:90px;min-height:44px;padding:8px 11px;font-size:12px}
  #dialog .garage-bottom{padding:9px 16px}
  #dialog .garage-bottom button{min-height:44px;padding:8px 16px;font-size:12px}
 }
 @media (min-width: 1024px) and (min-height: 650px) and (max-width: 1366px) {
  #dialog:has(.garage-v2)[open]{width:min(860px,calc(100vw - 72px))!important;max-width:860px!important}
  #dialog .garage-products{grid-template-columns:repeat(4,minmax(0,1fr))}
  #dialog .garage-product-footer{grid-template-columns:1fr}
  #dialog .garage-buy{width:100%}
 }
 @media (min-width: 560px) and (max-width: 699px) and (min-height: 650px) {
  #dialog:has(.garage-v2)[open]{width:calc(100vw - 28px)!important}
  #dialog .garage-hero{padding:12px;flex-wrap:wrap}
  #dialog .garage-wallet{width:100%;min-width:0}
  #dialog .garage-catalog{padding:12px}
  #dialog .garage-products{grid-template-columns:1fr}
 }
}

/* Phone TECH GARAGE: native viewport bounds and compact cards, separate from iPad. */
@media (max-width:559px), (max-width:1023px) and (max-height:500px) and (pointer:coarse) {
 #dialog:has(.garage-v2)[open]{
  position:fixed!important;inset:0!important;
  margin:auto!important;transform:none!important;zoom:1!important;
  width:min(440px,calc(100vw - 16px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)))!important;
  min-width:0!important;max-width:calc(100vw - 16px)!important;
  max-height:calc(100dvh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))!important;
  padding:0!important;border-radius:14px!important;
  overflow-x:hidden!important;overflow-y:auto!important;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
 }
 #dialog .garage-v2{width:100%;min-width:0;font-size:11px;line-height:1.3;border-radius:14px}
 #dialog .garage-hero{padding:9px 10px;gap:7px}
 #dialog .garage-hero>div:first-child{min-width:0;padding-right:28px}
 #dialog .garage-hero small{font-size:8px;letter-spacing:.3px;overflow-wrap:anywhere}
 #dialog .garage-hero h2{font-size:17px;margin:2px 0}
 #dialog .garage-hero p{font-size:10px}
 #dialog .garage-wallet{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-width:0;padding:6px 8px;border-radius:8px}
 #dialog .garage-wallet strong{font-size:14px;margin-top:0;overflow-wrap:anywhere}
 #dialog .garage-catalog{padding:8px;gap:12px}
 #dialog .garage-group-heading{gap:6px;margin-bottom:6px;align-items:center}
 #dialog .garage-group-heading h3{font-size:12px}
 #dialog .garage-group-heading span{font-size:10px}
 #dialog .garage-products{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
 #dialog .garage-product{display:grid;grid-template-columns:minmax(0,1fr) 22px;align-content:start;padding:8px;border-radius:9px}
 #dialog .garage-product-top{min-width:0;min-height:0;gap:2px}
 #dialog .garage-product-type{font-size:11px}
 #dialog .garage-aura{font-size:9px;gap:4px}
 #dialog .garage-aura i{width:6px;height:6px}
 #dialog .garage-product-symbol{height:26px;font-size:19px;align-self:center}
 #dialog .garage-product-stats{grid-column:1/-1;margin-top:6px;padding:4px 0;gap:4px}
 #dialog .garage-product-stats small,#dialog .garage-price small{font-size:9px}
 #dialog .garage-product-stats strong{font-size:11px}
 #dialog .garage-product-footer{grid-column:1/-1;grid-template-columns:minmax(0,1fr);gap:5px;padding-top:5px}
 #dialog .garage-price{display:flex;align-items:baseline;justify-content:space-between;gap:4px;flex-wrap:wrap}
 #dialog .garage-price strong{font-size:12px}
 #dialog #dialogContent .garage-buy{width:100%;min-width:0;min-height:36px!important;padding:5px 6px!important;font-size:11px!important}
 #dialog .garage-bottom{padding:6px 8px}
 #dialog #dialogContent .garage-bottom button{min-height:36px!important;padding:5px 12px!important;font-size:11px!important}
 #dialog:has(.garage-v2)>.dialog-close-top{width:32px;height:32px;min-width:32px;min-height:32px;top:7px;right:7px}
}
@media (max-width:359px) {
 #dialog .garage-products{grid-template-columns:minmax(0,1fr)}
 #dialog .garage-product-footer{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
}

/* Compact floating command bar: one small font, content width, centered above tools. */
body>.bottom>.city-command-bar{
 box-sizing:border-box;display:block;pointer-events:auto;position:relative;
 width:max-content;max-width:calc(100vw - 20px);margin:0 auto 7px;
 padding:4px 5px;border:1px solid var(--smg-border);border-radius:10px;
 color:var(--smg-text);background:linear-gradient(135deg,var(--smg-panel-top),var(--smg-panel-bottom));
 box-shadow:0 3px 12px var(--smg-aura),inset 0 1px 0 #ffffff30;
}
#cityCommandBar,#cityCommandBar *{
 font:600 9px/1.2 'Noto Sans Thai',Tahoma,sans-serif!important;
 letter-spacing:normal!important;-webkit-text-size-adjust:100%;text-size-adjust:100%;
}
#cityCommandBar .dock-head{
 display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;
 justify-content:center!important;align-items:center!important;gap:5px!important;min-width:0!important;
 width:auto!important;height:auto!important;min-height:0!important;max-height:none!important;
 margin:0!important;padding:0!important;border:0!important;background:transparent!important;overflow:visible!important;
}
#cityCommandBar .dock-timebar{display:flex!important;align-items:center!important;flex:0 1 auto!important;flex-wrap:nowrap!important;gap:5px!important;min-width:0!important;width:auto!important;margin:0!important;padding:0!important;overflow:hidden!important}
#cityCommandBar .dock-clock{display:flex!important;flex:0 0 auto!important;align-items:center!important;gap:4px!important;width:auto!important;min-width:0!important;white-space:nowrap!important;color:inherit!important}
#cityCommandBar :is(#day,#clock){color:inherit!important;font-variant-numeric:tabular-nums}
#cityCommandBar .dock-speed{display:block!important;flex:0 1 auto!important;min-width:0!important;margin:0!important;padding:0!important;overflow-x:auto!important;scrollbar-width:none;touch-action:pan-x}
#cityCommandBar .playback{display:flex!important;align-items:center!important;gap:2px!important;flex-wrap:nowrap!important;margin:0!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
#cityCommandBar :is(#status,.edition){display:none!important}
#cityCommandBar .dock-display-actions{display:flex!important;align-items:center!important;gap:2px!important;position:static!important;width:auto!important;height:auto!important;visibility:visible!important;overflow:visible!important}
#cityCommandBar button{
 box-sizing:border-box!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
 flex:0 0 auto!important;width:auto!important;min-width:22px!important;max-width:none!important;
 height:24px!important;min-height:24px!important;max-height:24px!important;
 padding:3px 5px!important;margin:0!important;gap:3px!important;white-space:nowrap!important;
 color:var(--smg-text)!important;background:linear-gradient(135deg,var(--smg-button-top),var(--smg-button-bottom))!important;
 border:1px solid var(--smg-border)!important;border-radius:6px!important;
 box-shadow:0 1px 4px var(--smg-aura)!important;cursor:pointer;touch-action:manipulation;
}
#cityCommandBar button:is(.active,[aria-pressed="true"]){background:linear-gradient(135deg,var(--smg-active-top),var(--smg-active-bottom))!important;border-color:var(--smg-icon)!important;box-shadow:0 0 5px var(--smg-aura-strong)!important}
#cityCommandBar button:hover{border-color:var(--smg-icon)!important}
#cityCommandBar button:focus-visible{outline:2px solid var(--smg-icon);outline-offset:2px}
#cityCommandBar button.is-hidden{opacity:.65}
#cityCommandBar .dock-display-actions button>span[aria-hidden="true"]{color:var(--smg-icon)!important}
body>.bottom>.control-deck.tools-collapsed{display:none!important}
body>.bottom>.control-deck:not(.tools-collapsed){height:124px!important;min-height:124px!important;max-height:124px!important}
body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .dock-body{padding-top:4px!important}
body>.bottom>.control-deck:not(.tools-collapsed) .builder-zone .dock-context{margin-top:0!important}
@media(max-width:920px){
 #cityCommandBar :is(#toggleBuildingLabelsText,#toggleCarDiamondsText,#toggleAIPinsText){display:none!important}
 body>.bottom>.control-deck:not(.tools-collapsed){height:200px!important;min-height:0!important;max-height:calc(100dvh - 100px - env(safe-area-inset-bottom,0px))!important;grid-template-rows:minmax(0,1fr) minmax(0,1fr)!important}
}
@media(max-width:500px){
 body>.bottom>.city-command-bar{padding:3px;margin-bottom:6px;border-radius:8px}
 #cityCommandBar .dock-head{gap:3px!important}
 #cityCommandBar .dock-timebar{gap:4px!important}
 #cityCommandBar button{min-width:20px!important;height:22px!important;min-height:22px!important;max-height:22px!important;padding:2px 3px!important}
 #cityCommandBar :is(.skip-day-label,.command-theme-label,#toggleDockText){display:none!important}
}
@media(max-width:920px) and (max-height:520px){
 body>.bottom>.control-deck:not(.tools-collapsed){height:158px!important;grid-template-rows:minmax(0,78fr) minmax(0,80fr)!important}
}

/* Inline city metrics: each label, live value and daily delta stays on one line. */
body>.bottom>.control-deck:not(.tools-collapsed) .city-dashboard .city-metric:not(.metric-money) .metric-text{
 display:flex!important;flex-direction:row!important;align-items:baseline!important;
 flex:1 1 auto!important;flex-wrap:nowrap!important;gap:3px!important;
 width:auto!important;min-width:0!important;white-space:nowrap!important;text-align:left!important;
}
body>.bottom>.control-deck:not(.tools-collapsed) .city-dashboard .city-metric:not(.metric-money) :is(.metric-icon,.metric-arrow){display:none!important}
body>.bottom>.control-deck:not(.tools-collapsed) .city-dashboard .city-metric:not(.metric-money) .metric-text>small,
body>.bottom>.control-deck:not(.tools-collapsed) .city-dashboard .city-metric:not(.metric-money) .metric-text>strong{
 display:inline!important;flex:0 0 auto!important;margin:0!important;padding:0!important;
 font-size:9px!important;line-height:1.25!important;white-space:nowrap!important;
}
body>.bottom>.control-deck:not(.tools-collapsed) .city-dashboard .city-metric:not(.metric-money) .metric-text>strong{font-variant-numeric:tabular-nums}
body>.bottom>.control-deck:not(.tools-collapsed) .city-dashboard .city-metric:not(.metric-money) strong em{font:inherit!important;margin:0!important}
body>.bottom>.control-deck:not(.tools-collapsed) .city-dashboard .city-metric .metric-delta{
 display:inline!important;font-size:8px!important;font-weight:500!important;line-height:1!important;
 margin:0!important;white-space:nowrap!important;color:inherit!important;opacity:.85;
}
:root.smcity-gray-ui body>.bottom>.control-deck .city-control-mini .mini-need-values,
:root.smcity-gray-ui body>.bottom>.control-deck .city-control-mini .mini-need-values *{color:#fff!important;opacity:1!important}
@media(max-width:600px){
 body>.bottom>.control-deck:not(.tools-collapsed) .city-dashboard .stats.dashboard-stats{
  grid-template-columns:minmax(0,1fr)!important;grid-template-rows:repeat(5,minmax(0,1fr))!important;gap:1px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .city-dashboard .stats.dashboard-stats .city-metric{
  grid-column:1!important;display:flex!important;flex-direction:row!important;
  align-items:center!important;justify-content:flex-start!important;padding:0 2px!important;gap:2px!important;
 }
 body>.bottom>.control-deck:not(.tools-collapsed) .city-dashboard .stats.dashboard-stats .metric-money{grid-column:1!important}
}

/* SMCITY v4.3: shared compact panel/card language, independent of map and toolbar size. */
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)){
 --panel-card-radius:10px;--panel-gap:8px;
}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) :is(#inspector,.citizens-dashboard,#dialog:not(.construction-confirm),#missionDailyAuto,.member-card){
 border-radius:14px!important;scrollbar-width:thin;scrollbar-color:var(--sm-panel-line) transparent;
}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) :is(#dialog .menu-heading,#inspector .sm-inspector-heading,.citizens-dashboard .citizens-top,.daily-report-body .sm-report-header){
 display:flex!important;align-items:center!important;gap:10px!important;
 min-width:0!important;box-sizing:border-box;
 background:var(--sm-panel-head)!important;color:var(--sm-panel-ink)!important;
 border-bottom:1px solid var(--sm-panel-line)!important;
}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #dialog .menu-heading{
 margin:0 0 14px!important;padding:0 30px 12px 0!important;border-radius:0!important;
 background:transparent!important;
}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) :is(#dialog .menu-heading>div,#inspector .sm-inspector-heading-text,.citizens-dashboard .sm-panel-title,.sm-report-header>div){min-width:0;flex:1}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) :is(#dialog .menu-logo,#inspector .sm-inspector-mark,.panel-heading-icon,.member-card .member-mark){
 display:grid!important;place-items:center!important;flex:0 0 30px!important;
 width:30px!important;min-width:30px!important;height:30px!important;
 margin:0!important;padding:0!important;border-radius:9px!important;
 background:var(--sm-panel-accent-soft)!important;color:var(--sm-panel-accent)!important;
 font:700 17px/1 system-ui,sans-serif!important;
}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) :is(#dialog .menu-heading h2,#inspector .sm-inspector-heading h2,.citizens-dashboard .citizens-top h2,.daily-report-body .sm-report-header h2,.member-card h2){
 color:var(--sm-panel-ink)!important;font-size:16px!important;font-weight:750!important;
 line-height:1.35!important;margin:0!important;letter-spacing:normal!important;overflow-wrap:anywhere;
}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) :is(#dialog .menu-heading .eyebrow,.member-eyebrow){display:none!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) :is(.panel-subtitle,.daily-report-body .mission-sub){
 color:var(--sm-panel-muted)!important;font-size:10px!important;line-height:1.5!important;margin:4px 0 0!important;
}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) :is(#inspector .detail-row,.citizen-kpi,.citizen-person,.citizen-signal-grid>div,.daily-report-section,.daily-report-highlights .mission-card,.save-create-card,.save-slot-card,.account-password){
 box-sizing:border-box!important;min-width:0!important;
 border:1px solid var(--sm-panel-line)!important;border-radius:var(--panel-card-radius)!important;
 background:var(--sm-panel-card)!important;color:var(--sm-panel-ink)!important;
 box-shadow:none!important;
}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #inspector .detail-row{padding:9px!important;gap:4px!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) :is(#inspector .detail-row strong,.citizen-kpi strong,.daily-report-rows strong){color:var(--sm-panel-ink)!important;font-variant-numeric:tabular-nums}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) :is(#inspector .detail-row span,.citizen-kpi small,.daily-report-rows span){color:var(--sm-panel-muted)!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) :is(#inspector #inspectContent,.citizen-kpis,.citizen-signal-grid,.daily-report-sections,.daily-report-highlights){gap:var(--panel-gap)!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) :is(#inspector h3,.citizens-dashboard h3,.daily-report-section h3,#dialog .save-list-heading h3){
 font-size:12px!important;line-height:1.5!important;color:var(--sm-panel-ink)!important;font-weight:750!important;
}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) :is(.panel-help){
 grid-column:1/-1;min-width:0;margin-top:8px;padding:8px 10px;
 border:1px solid var(--sm-panel-line);border-radius:10px;
 background:var(--sm-panel-soft);color:var(--sm-panel-muted);font-size:10px;line-height:1.6;
}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) .panel-help summary{cursor:pointer;color:var(--sm-panel-muted);font-size:10px;font-weight:600}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) .panel-help p{margin:7px 0 0!important;background:transparent!important;padding:0!important;font-size:10px!important;color:var(--sm-panel-muted)!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) :is(#dialog .smcity-menu-list,#dialog .smcity-report-list){gap:7px!important;margin:0!important;max-height:none!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #dialog :is(.smcity-menu-list>button,.smcity-report-entry){
 min-height:45px!important;padding:9px 10px!important;margin:0!important;gap:10px!important;
 border:1px solid var(--sm-panel-line)!important;border-radius:10px!important;
 background:var(--sm-panel-card)!important;color:var(--sm-panel-ink)!important;box-shadow:none!important;
}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #dialog :is(.smcity-menu-list b,.smcity-report-entry b){font-size:12px!important;font-weight:700!important;color:var(--sm-panel-ink)!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #dialog :is(.smcity-menu-list small,.smcity-report-entry small){font-size:10px!important;line-height:1.45!important;color:var(--sm-panel-muted)!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #dialog :is(.menu-symbol,.save-slot-icon){
 display:grid!important;place-items:center!important;flex:0 0 28px!important;
 width:28px!important;height:28px!important;border-radius:8px!important;font-size:16px!important;
 background:var(--sm-panel-accent-soft)!important;color:var(--sm-panel-accent)!important;
}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #dialog .menu-chevron{font-size:18px!important;color:var(--sm-panel-muted)!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) :is(#dialog .actions,#missionDailyAuto>.actions){gap:7px!important;margin-top:12px!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) :is(#dialog .menu-resume,#dialog .actions>button,#inspector button.action,.citizens-dashboard .citizens-filters button,#missionDailyAuto button,.member-card .member-back,.member-card .member-submit){
 border-radius:8px!important;box-shadow:none!important;font-size:11px!important;font-weight:650!important;
 line-height:1.3!important;min-height:32px!important;
}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) :is(#dialog .actions>button:not(.primary):not(.danger),#inspector button.action,#missionDailyAuto button:not(.primary),.member-card .member-back){
 color:var(--sm-panel-ink)!important;background:var(--sm-panel-card)!important;border:1px solid var(--sm-panel-line)!important;
}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) :is(#dialog .actions>button.primary,#dialog .menu-resume,#missionDailyAuto button.primary,.member-card .member-submit){
 background:var(--sm-panel-accent)!important;color:var(--sm-panel-bg)!important;border:1px solid var(--sm-panel-accent)!important;
}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #dialog .actions>button.danger{background:var(--sm-panel-danger-soft)!important;color:var(--sm-panel-danger)!important;border:1px solid var(--sm-panel-danger)!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) :is(#dialog button,.citizens-dashboard button,#inspector button,#missionDailyAuto button):disabled{opacity:.45!important;cursor:not-allowed!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) :is(#dialog button,.citizens-dashboard button,#inspector button,#missionDailyAuto button):focus-visible{outline:2px solid var(--sm-panel-accent);outline-offset:2px}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) :is(#dialog input,#dialog select,.member-form input,.citizens-toolbar input){
 box-sizing:border-box!important;border:1px solid var(--sm-panel-line)!important;border-radius:8px!important;
 background:var(--sm-panel-card)!important;color:var(--sm-panel-ink)!important;min-height:36px!important;font-family:inherit!important;
}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) :is(.member-card,.citizens-dashboard){color:var(--sm-panel-ink)!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) .citizens-dashboard .citizens-top{padding:12px!important;border-radius:13px 13px 0 0!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) .citizens-dashboard .citizens-close{flex-shrink:0}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) :is(#dialog>.dialog-close-top,#inspector button.close,.citizens-dashboard .citizens-close,#missionDailyAuto #missionAutoDismiss){
 width:28px!important;min-width:28px!important;height:28px!important;min-height:28px!important;
 font-size:18px!important;border-radius:8px!important;
}
/* Upgrade products retain their compact layouts and distinctive technology colors. */
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #dialog .garage-v2{
 --g-bg:var(--sm-panel-bg);--g-header:var(--sm-panel-head);--g-card:var(--sm-panel-card);
 --g-line:var(--sm-panel-line);--g-text:var(--sm-panel-ink);--g-muted:var(--sm-panel-muted);
 --g-button:var(--sm-panel-accent);--g-button-text:var(--sm-panel-bg);--g-bottom:var(--sm-panel-head);
}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #dialog.ai-upgrade-center .ai-checkout-v2{
 --ai-bg:var(--sm-panel-bg);--ai-header:var(--sm-panel-head);--ai-text:var(--sm-panel-ink);
 --ai-muted:var(--sm-panel-muted);--ai-line:var(--sm-panel-line);--ai-primary:var(--sm-panel-accent);
 --ai-primary-text:var(--sm-panel-bg);--ai-panel:var(--sm-panel-card);
}
/* Save/load: named cards, clear primary load action and separate new-save form. */
#dialog:has(.save-workspace)[open],#dialog:has(.account-identity)[open]{
 position:fixed!important;left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;
 transform:translate(-50%,-50%)!important;zoom:1!important;margin:0!important;
 width:min(520px,calc(100vw - 24px))!important;max-width:calc(100vw - 24px)!important;
 max-height:calc(100dvh - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))!important;
 overflow:auto!important;
}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #dialog .save-workspace{font-size:11px;color:var(--sm-panel-ink)}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #dialog .save-create-card{padding:12px;margin:0 0 16px}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #dialog .save-create-card label{font-size:11px;font-weight:700}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #dialog #onlineSaveName{display:block;width:100%;margin:7px 0 0;padding:8px 10px!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #dialog #onlineSaveError{font-size:10px;color:var(--sm-panel-danger)!important;line-height:1.5!important;margin:7px 0 0}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #dialog #onlineSaveError:empty{display:none}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #dialog .save-list-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #dialog .save-list-heading h3{margin:0}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #dialog .save-list-heading>span{font-size:10px;color:var(--sm-panel-muted)}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #dialog .save-slot-list{display:grid;gap:8px;min-width:0}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #dialog .save-slot-card{padding:11px}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #dialog .save-slot-heading{display:flex;align-items:center;gap:9px;min-width:0}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #dialog .save-slot-heading>div{min-width:0;flex:1}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #dialog .save-slot-heading h3{font-size:12px;margin:0 0 3px;line-height:1.4;overflow-wrap:anywhere;color:var(--sm-panel-ink)}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #dialog .save-slot-heading time{display:block;font-size:10px;color:var(--sm-panel-muted);line-height:1.4}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #dialog .save-slot-actions{display:flex!important;flex-wrap:wrap;justify-content:flex-start!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #dialog .save-slot-actions button{flex:1 1 70px}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) .panel-empty{border:1px dashed var(--sm-panel-line);border-radius:10px;padding:16px;text-align:center;font-size:11px;color:var(--sm-panel-muted)!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #dialog .panel-footer{padding-top:10px;border-top:1px solid var(--sm-panel-line)}
/* Same centered composition for both daily summary entry points. The auto card remains nonmodal. */
#missionDailyAuto.daily-report-auto,#dialog:has(.daily-report-modal)[open]{
 position:fixed!important;left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;
 transform:translate(-50%,-50%)!important;zoom:1!important;margin:0!important;
 width:min(680px,calc(100vw - 24px))!important;max-width:calc(100vw - 24px)!important;
 max-height:min(82dvh,760px,calc(100dvh - 40px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)))!important;
 overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain!important;
}
#missionDailyAuto.daily-report-auto{padding:12px!important;z-index:110}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #missionDailyAuto .daily-report-topbar{
 top:-12px!important;margin:-12px -12px 12px!important;padding:9px 12px!important;
 border-radius:13px 13px 0 0!important;gap:8px!important;
 background:var(--sm-panel-head)!important;color:var(--sm-panel-ink)!important;
 border-bottom:1px solid var(--sm-panel-line)!important;
}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #missionDailyAuto .daily-report-topbar b{font-size:11px;font-weight:700}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #missionDailyAuto .daily-report-topbar small{flex:1;font-size:9px;color:var(--sm-panel-muted)}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #missionDailyAuto>.actions{position:sticky;bottom:-12px;padding:10px 0 0;background:var(--sm-panel-bg)!important;border-top:1px solid var(--sm-panel-line)}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) :is(#missionDailyAuto,#dialog) .daily-report-body .sm-report-header{padding:0 0 12px!important;margin-bottom:10px!important;background:transparent!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) :is(#missionDailyAuto,#dialog) .daily-report-body .daily-report-highlights{grid-template-columns:repeat(3,minmax(0,1fr))!important;margin:10px 0!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) :is(#missionDailyAuto,#dialog) .daily-report-highlights .mission-card{padding:9px!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) :is(#missionDailyAuto,#dialog) .daily-report-highlights .mission-card small{font-size:10px!important;color:var(--sm-panel-muted)!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) :is(#missionDailyAuto,#dialog) .daily-report-highlights .mission-card strong{font-size:16px!important;line-height:1.35!important;margin-top:3px!important;color:var(--sm-panel-ink)!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #missionDailyAuto .daily-report-body .daily-report-sections,:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #dialog .daily-report-body .daily-report-sections{grid-template-columns:repeat(2,minmax(0,1fr))!important;align-items:start}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) :is(#missionDailyAuto,#dialog) .daily-report-section{padding:10px!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) :is(#missionDailyAuto,#dialog) .daily-report-section h3{margin:0 0 7px!important;font-size:11px!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) :is(#missionDailyAuto,#dialog) .daily-report-rows>div{font-size:10px!important;padding:6px 0!important;border-color:var(--sm-panel-line)!important;line-height:1.5!important;gap:8px!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) :is(#missionDailyAuto,#dialog) .daily-report-rows strong{font-size:11px!important;white-space:normal!important;overflow-wrap:anywhere}
@media(max-width:600px){
 :root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) :is(#missionDailyAuto,#dialog) .daily-report-body .daily-report-highlights{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 :root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #missionDailyAuto .daily-report-body .daily-report-sections,:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #dialog .daily-report-body .daily-report-sections{grid-template-columns:minmax(0,1fr)!important}
 :root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #dialog .save-slot-actions button{flex:1 1 68px}
 :root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) .member-form input,:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #dialog :is(input,select){font-size:16px!important}
}

/* Earlier theme layers remain compatible, but no longer paint a second heading background. */
:root #inspector #inspectContent .sm-inspector-heading .tag{background:transparent!important;border:0!important;border-radius:0!important;padding:0!important;color:var(--sm-panel-muted)!important}
:root #dialog:not(.construction-confirm):not(:has(.garage-v2)){zoom:1!important}
#dialog:not(.construction-confirm):has(.smcity-menu-list)[open]{width:min(400px,calc(100vw - 24px))!important;max-width:calc(100vw - 24px)!important}
/* Reference, diagnostics and log screens follow the same panel surfaces. */
:root #dialog #playerManual{font:400 12px/1.65 'Noto Sans Thai',Tahoma,sans-serif!important;color:var(--sm-panel-ink)!important;background:transparent!important}
:root #dialog #playerManual .eyebrow{display:none!important}
:root #dialog #playerManual :is(details,.manual-toc button,.manual-tools button,.manual-footer button){border:1px solid var(--sm-panel-line)!important;border-radius:10px!important;background:var(--sm-panel-card)!important;color:var(--sm-panel-ink)!important;box-shadow:none!important}
:root #dialog #playerManual details{padding:0 10px!important;margin:8px 0!important}
:root #dialog #playerManual summary{font-size:12px!important;padding:10px 0!important;color:var(--sm-panel-ink)!important}
:root #dialog #playerManual :is(p,li,td,th){font-size:11px!important;line-height:1.65!important;color:var(--sm-panel-ink)!important}
:root #dialog #playerManual :is(.manual-intro,.manual-status){font-size:10px!important;color:var(--sm-panel-muted)!important}
:root #dialog #playerManual :is(.manual-tools button,.manual-footer button){font-size:11px!important;padding:7px 10px!important;min-height:32px!important}
:root #dialog #playerManual .manual-footer{background:var(--sm-panel-bg)!important;border-color:var(--sm-panel-line)!important}
:root #dialog #playerManual button.primary{background:var(--sm-panel-accent)!important;color:var(--sm-panel-bg)!important}
:root #dialog #playerManual #manualSearch{width:100%;font-family:inherit!important;color:var(--sm-panel-ink)!important;background:var(--sm-panel-card)!important}
:root #dialog #dialogContent :is(table,pre){max-width:100%;overflow:auto;border-color:var(--sm-panel-line)!important;color:var(--sm-panel-ink)!important;background:var(--sm-panel-card)!important}
:root #dialog #dialogContent table{display:block;border-collapse:collapse}
:root #dialog #dialogContent :is(th,td){border-color:var(--sm-panel-line)!important;color:var(--sm-panel-ink)!important;font-size:11px!important;padding:7px 9px!important}
:root #dialog #dialogContent th{background:var(--sm-panel-head)!important}
:root #dialog #dialogContent pre{font-size:10px;padding:10px;border:1px solid var(--sm-panel-line);border-radius:10px}

/* Compact map-anchored AI controls and object inspectors. */
.ai-junction-pin{
 transform:translate(-50%,-50%)!important;width:var(--ai-pin-size,24px)!important;
 min-width:0!important;height:var(--ai-pin-size,24px)!important;min-height:0!important;
 padding:0!important;border-radius:7px!important;letter-spacing:0!important;
 font:700 9px/1 system-ui,sans-serif!important;border:1px solid #8ccbd7!important;
 background:#e8fbff!important;color:#12607c!important;box-shadow:0 1px 4px #08293940!important;
}
.ai-junction-pin::after{content:"";position:absolute;inset:-8px;border-radius:12px}
.ai-junction-pin.owned{background:#147a91!important;color:#fff!important;border-color:#88ebff!important}
.ai-junction-pin[aria-expanded="true"]{outline:2px solid #38c2ed;outline-offset:2px}
:root.smcity-gray-ui .ai-junction-pin{background:#153a4e!important;color:#d5f8ff!important}
:root.smcity-gray-ui .ai-junction-pin.owned{background:#16677e!important}
.ai-pin-popover{
 position:absolute;pointer-events:auto;box-sizing:border-box;padding:10px;
 border:1px solid var(--sm-panel-line,#b5d3dd);border-radius:12px;
 background:var(--sm-panel-bg,#f8fcff);color:var(--sm-panel-ink,#173b4d);
 box-shadow:0 6px 22px #061b2c30;font:500 11px/1.5 "Noto Sans Thai",sans-serif;
}
.ai-pin-popover[hidden]{display:none!important}
.ai-pin-popover header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ai-pin-popover header strong{font-size:12px;font-weight:700}
.ai-pin-popover header button{display:grid;place-items:center;width:28px;height:28px;padding:0;border:1px solid var(--sm-panel-line);border-radius:7px;color:inherit;background:var(--sm-panel-card);font:500 18px/1 sans-serif;cursor:pointer}
.ai-pin-popover p{font-size:10px;color:var(--sm-panel-muted);margin:5px 0 9px}
.ai-pin-price{display:flex;justify-content:space-between;gap:8px;padding:7px 0;border-top:1px solid var(--sm-panel-line);font-size:10px}
.ai-pin-upgrade{width:100%;min-height:32px;padding:6px 10px;border:1px solid var(--sm-panel-accent);border-radius:7px;background:var(--sm-panel-accent);color:#fff;font:600 11px/1.4 "Noto Sans Thai",sans-serif;cursor:pointer}
.ai-pin-popover button:focus-visible{outline:2px solid #38c2ed;outline-offset:2px}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #inspector:not(.hidden){
 width:min(304px,calc(100vw - 94px - env(safe-area-inset-left,0px)))!important;
 max-width:calc(100vw - 94px - env(safe-area-inset-left,0px))!important;
 padding:10px!important;border-radius:12px!important;max-height:min(620px,calc(100dvh - 350px))!important;
 font-size:11px!important;scrollbar-gutter:auto!important;
}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #inspector #inspectContent{display:flex!important;flex-direction:column!important;gap:0!important;align-items:stretch!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #inspector .sm-inspector-heading{margin:-10px -10px 8px!important;padding:10px 40px 10px 10px!important;gap:8px!important;border-radius:11px 11px 0 0!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #inspector .sm-inspector-heading h2{font-size:13px!important;line-height:1.45!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #inspector .sm-inspector-heading .tag{font-size:9px!important;margin:0 0 1px!important;letter-spacing:0!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #inspector .sm-inspector-mark{width:26px!important;height:26px!important;min-width:26px!important;flex:0 0 26px!important;font-size:15px!important;border-radius:7px!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #inspector button.close{width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important;top:9px!important;right:8px!important;border-radius:7px!important;font-size:19px!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #inspector .detail-row{
 display:flex!important;flex-direction:row!important;align-items:baseline!important;
 justify-content:space-between!important;gap:10px!important;padding:6px 0!important;margin:0!important;
 border:0!important;border-bottom:1px solid var(--sm-panel-line)!important;border-radius:0!important;
 background:transparent!important;min-height:0!important;box-shadow:none!important;
}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #inspector .detail-row>span{font-size:10px!important;line-height:1.5!important;flex:1;min-width:0;color:var(--sm-panel-muted)!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #inspector .detail-row>strong{font-size:11px!important;line-height:1.5!important;font-weight:600!important;text-align:right!important;max-width:62%!important;min-width:0;color:var(--sm-panel-ink)!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #inspector .inspect-overview{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;margin:1px 0 8px!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #inspector .inspect-overview .detail-row{display:block!important;padding:7px 8px!important;background:var(--sm-panel-soft)!important;border:1px solid var(--sm-panel-line)!important;border-radius:7px!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #inspector .inspect-overview .detail-row>span{display:block!important;font-size:9px!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #inspector .inspect-overview .detail-row>strong{display:block!important;text-align:left!important;max-width:100%!important;font-size:12px!important;margin-top:1px!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #inspector .inspect-section,:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #inspector .panel-help{margin:7px 0 0!important;padding:0!important;border:1px solid var(--sm-panel-line)!important;border-radius:8px!important;background:transparent!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #inspector :is(.inspect-section,.panel-help)>summary{cursor:pointer;padding:8px!important;font-size:10px!important;font-weight:600!important;color:var(--sm-panel-ink)!important;line-height:1.5!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #inspector .inspect-section-body{padding:0 8px 8px!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #inspector .inspect-section:not([open])>.inspect-section-body{display:none!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #inspector .inspect-actions{display:flex!important;gap:6px!important;margin-top:8px!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #inspector .inspect-actions>.action{flex:1!important;min-width:0!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #inspector button.action{font-size:10px!important;font-weight:600!important;min-height:32px!important;margin:7px 0 0!important;padding:6px 8px!important;border-radius:7px!important;line-height:1.45!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #inspector [data-action="demolish"]{color:var(--sm-panel-danger)!important;background:var(--sm-panel-danger-soft)!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #inspector [data-action="signal-ai-buy"]{color:var(--sm-panel-accent)!important;background:var(--sm-panel-accent-soft)!important;border-color:var(--sm-panel-accent)!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #inspector :is(.selected-car-journey,.signal-control){display:block!important;margin:0 0 7px!important;padding:8px!important;border-radius:8px!important;gap:0!important;background:var(--sm-panel-soft)!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #inspector .selected-car-journey .detail-row{background:transparent!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #inspector .signal-control h3{font-size:11px!important;margin:0 0 6px!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #inspector .signal-current{display:flex!important;flex-wrap:wrap!important;gap:4px 8px!important;padding:7px!important;border-radius:6px!important;margin-bottom:5px!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #inspector .signal-current :is(strong,.signal-mode){font-size:10px!important;line-height:1.5!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #inspector .signal-current small{font-size:9px!important;line-height:1.5!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #inspector .signal-direction{padding:5px 6px!important;font-size:10px!important;border:0!important;border-bottom:1px solid var(--sm-panel-line)!important;background:transparent!important;border-radius:0!important;min-height:0!important;gap:6px!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #inspector .signal-direction b{font-size:10px!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #inspector .signal-times{display:grid!important;grid-template-columns:1fr!important;gap:4px!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #inspector .signal-times label{padding:5px 6px!important;font-size:10px!important;border-radius:6px!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #inspector .signal-minutes{font-size:12px!important;width:54px!important;min-height:30px!important;padding:4px!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #inspector .signal-note{font-size:9px!important;line-height:1.6!important;margin:5px 0!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #inspector :is(p,.inspect-section p,.panel-help p){font-size:10px!important;line-height:1.65!important;margin:5px 0!important;padding:0!important;background:transparent!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #inspector .inspect-list{max-height:150px!important;padding:0!important;border:0!important;background:transparent!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #inspector .inspect-list button{font-size:10px!important;min-height:32px!important}
@media(max-width:720px){
 :root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #inspector:not(.hidden){width:min(292px,calc(100vw - 73px - env(safe-area-inset-left,0px)))!important;max-width:calc(100vw - 73px - env(safe-area-inset-left,0px))!important;max-height:calc(100dvh - 350px)!important}
}
@media(max-height:540px){:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) #inspector:not(.hidden){top:10px!important;max-height:calc(100dvh - 205px)!important}}

/* The briefing flows naturally above the rows inside the original scroller. */
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) body>.bottom>.control-deck .city-demand-panel .city-brief{display:block!important;grid-column:1/-1!important;flex:0 0 auto!important;width:100%!important;min-width:0!important;padding:2px 0 4px!important;font:500 10px/1.45 "Noto Sans Thai",Tahoma,sans-serif!important;color:var(--sm-panel-ink)!important;white-space:normal!important;overflow-wrap:anywhere!important;letter-spacing:0!important;word-spacing:0!important}
:root[data-ui-version="4.3"]:is(.smcity-gray-ui,:not(.smcity-gray-ui)) body>.bottom>.control-deck .city-demand-panel .city-brief-line{display:inline!important;font:inherit!important;color:inherit!important;white-space:normal!important}