:root{--gold:#C9A227;--gold2:#E8C860;--bg:#12301E;--panel:rgba(16,46,30,.82);--white:#F2F2EA;--muted:#A9B8A6;--grn:#3FA34D;--red:#D64545}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;background:#061209;overflow:hidden;font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--white)}
#stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;background:radial-gradient(ellipse at 40% 35%,#1E482C 0%,#12301E 45%,#0A1E13 100%);overflow:hidden}
.bgglow{position:absolute;inset:0;background:radial-gradient(circle at 80% 10%,rgba(201,162,39,.10),transparent 40%);animation:glow 12s ease-in-out infinite alternate;pointer-events:none;will-change:transform}
@keyframes glow{from{transform:translate3d(0,0,0)}to{transform:translate3d(-120px,60px,0)}}
header{position:absolute;left:24px;right:24px;top:10px;height:80px;display:flex;align-items:center;gap:24px}
.brand h1{font-size:40px;color:var(--gold);font-weight:600;letter-spacing:.5px}.brand h1 span{color:var(--white);font-weight:300}
.brand p{color:var(--muted);font-size:15px}
.viewtabs{margin-left:auto;display:flex;gap:8px}.viewtabs span{padding:6px 16px;border:1px solid rgba(201,162,39,.5);border-radius:18px;font-size:13px;letter-spacing:2px;color:var(--muted);transition:.5s}
.viewtabs span.on{background:var(--gold);color:#12301E;font-weight:700}
.clockbox{text-align:right;min-width:230px}#clock{font-size:34px;color:var(--white);font-weight:300;line-height:1}#date{color:var(--gold);font-size:14px}#updated{color:var(--muted);font-size:12px}
.logo{background:#fff;border-radius:30px;padding:8px 18px;height:52px;display:flex;align-items:center}.logo img{height:36px}
.rule{position:absolute;left:24px;right:24px;top:94px;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
#kpis{position:absolute;left:24px;right:24px;top:108px;height:110px;display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.kpi{background:var(--panel);border:1px solid rgba(201,162,39,.75);border-radius:14px;display:flex;align-items:center;gap:14px;padding:10px 16px;position:relative;overflow:hidden}
.kpi:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--gold)}
.kpi:after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(232,200,96,.18),transparent);animation:shine 7s infinite;will-change:transform}
.kpi:nth-child(2):after{animation-delay:1s}.kpi:nth-child(3):after{animation-delay:2s}.kpi:nth-child(4):after{animation-delay:3s}.kpi:nth-child(5):after{animation-delay:4s}.kpi:nth-child(6):after{animation-delay:5s}
@keyframes shine{0%{transform:translate3d(0,0,0)}30%,100%{transform:translate3d(475%,0,0)}}
.kpi img{width:58px;height:58px}.kpi .kl{color:var(--gold);font-size:13px;letter-spacing:1.5px;font-weight:600}.kpi .kv{font-size:36px;font-weight:600;line-height:1.1}.kpi .ks{font-size:13px;color:var(--muted)}
.kpi.alert .kv{color:#FF6B5E}
.panel{background:var(--panel);border:1px solid rgba(201,162,39,.7);border-radius:16px;box-shadow:0 8px 30px rgba(0,0,0,.35)}
.ptitle,.lbl{color:var(--gold);font-size:13px;letter-spacing:1.5px;font-weight:600}.lbl.c{text-align:center}
.view{position:absolute;left:0;right:0;top:232px;bottom:58px;opacity:0;visibility:hidden}
.view.on{opacity:1;visibility:visible}
#leftcol{position:absolute;left:24px;top:0;width:230px;height:640px}
.howto{padding:14px;height:190px}.howto b{color:var(--gold);letter-spacing:2px;font-size:13px}#tourName{font-size:22px;margin:8px 0;font-weight:600;min-height:58px}
.howto small{color:var(--muted);font-size:12px}#tourDots{display:flex;gap:6px;margin:6px 0 10px}#tourDots i{flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.15);overflow:hidden;position:relative}
#tourDots i b{position:absolute;inset:0;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:0 50%;will-change:transform}
#ceo{position:absolute;left:0;bottom:0;width:230px}
#mapwrap{position:absolute;left:268px;top:0;width:1040px;height:640px;overflow:hidden}
#map{position:absolute;inset:0;background:#0B1D13;border-radius:16px}
.maptitle{position:absolute;left:16px;top:12px;z-index:500;color:var(--gold);font-size:13px;letter-spacing:1.5px;background:rgba(10,30,19,.75);padding:6px 12px;border-radius:10px;border:1px solid rgba(201,162,39,.4)}
.leaflet-container{background:#0B1D13;font-family:inherit}.leaflet-control-attribution{background:rgba(0,0,0,.4)!important;color:#888!important;font-size:9px}.leaflet-control-attribution a{color:#aaa!important}
.pin{position:relative;border-radius:50%}
.pin .core{position:absolute;inset:0;border-radius:50%;background:var(--c);border:2px solid rgba(255,255,255,.85);box-shadow:0 0 20px 2px var(--c)}
.pin .ring{position:absolute;inset:0;border-radius:50%;border:3px solid var(--c);animation:ring 2.4s ease-out infinite;will-change:transform,opacity;backface-visibility:hidden}
.pin .ring.r2{animation-delay:1.2s}
@keyframes ring{0%{transform:scale3d(1,1,1);opacity:.9}100%{transform:scale3d(2.8,2.8,1);opacity:0}}
.pin.shop .core{border-width:1px}.pin.shop .ring{border-width:2px}
.pin.active .core{border-color:var(--gold2);box-shadow:0 0 18px var(--gold2),0 0 40px var(--c)}
.plabel{color:#fff;font-size:15px;font-weight:600;text-shadow:0 0 6px #000,0 0 3px #000;white-space:nowrap;pointer-events:none}
.plabel.shopl{font-size:12px;font-weight:400;color:#E8E8DE}
#side{position:absolute;left:1324px;top:0;width:572px;height:640px;padding:16px 20px;overflow:hidden}
.sname{font-size:32px;font-weight:600;color:#fff;line-height:1.1;margin-top:2px}.stype{color:var(--muted);font-size:14px;margin-bottom:8px}
.people{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:8px 0;border-top:1px solid rgba(201,162,39,.3);border-bottom:1px solid rgba(201,162,39,.3);font-size:17px}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}.big{font-size:28px;font-weight:600}.mid{font-size:24px;font-weight:600}.red{color:#FF6B5E}.pos{color:#5FD06B}.neg{color:#FF6B5E}
.gaugerow{display:grid;grid-template-columns:250px 1fr;gap:16px;align-items:center;margin-bottom:6px}
.gauge svg{width:250px;height:132px}.gtrack{fill:none;stroke:rgba(255,255,255,.12);stroke-width:18;stroke-linecap:round}.garc{fill:none;stroke:url(#gg);stroke:var(--grn);stroke-width:18;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(63,163,77,.8))}
.gtarget{stroke:var(--gold2);stroke-width:4}#gVal{fill:#fff;font-size:30px;font-weight:600;text-anchor:middle}
.stockcol{display:grid;gap:12px}
#trend{width:100%;height:96px;margin:4px 0 8px}
#shops{width:100%;border-collapse:collapse;font-size:15px}#shops td{padding:5px 6px;border-bottom:1px solid rgba(201,162,39,.18)}#shops td.n{text-align:right;font-variant-numeric:tabular-nums}
#shops tr:nth-child(odd){background:rgba(255,255,255,.03)}#shops .rk{color:var(--gold);width:22px}
#bottomrow{position:absolute;left:24px;right:24px;top:654px;height:136px;display:grid;grid-template-columns:1fr 1fr 572px;gap:16px}
.bars{padding:10px 16px}.bar{display:grid;grid-template-columns:240px 1fr 110px;align-items:center;gap:10px;margin-top:9px;font-size:15px}
.bar .tr{height:20px;background:rgba(255,255,255,.07);border-radius:10px;overflow:hidden}.bar .fl{height:100%;width:100%;border-radius:10px;transform:scaleX(0);transform-origin:0 50%;will-change:transform}
.bar .v{text-align:right;font-weight:600}
.legend{padding:10px 16px;display:grid;grid-template-columns:1fr 1fr;align-content:start;column-gap:10px}.legend .ptitle{grid-column:1/-1;margin-bottom:6px}
.lg{font-size:15px;display:flex;align-items:center;gap:8px;margin:3px 0}.lg i{width:14px;height:14px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}
footer{position:absolute;left:0;right:0;bottom:0;height:52px;background:rgba(5,16,10,.92);border-top:2px solid var(--gold);display:flex;align-items:center}
.tlabel{background:var(--gold);color:#12301E;font-weight:800;padding:0 22px;height:100%;display:flex;align-items:center;letter-spacing:3px}
.tlabel:before{content:"";width:10px;height:10px;border-radius:50%;background:#C0392B;margin-right:10px;animation:blink 1s infinite;will-change:opacity}
@keyframes blink{50%{opacity:.2}}
.tickwrap{flex:1;overflow:hidden;white-space:nowrap;height:100%;display:flex;align-items:center}
#ticker{display:inline-block;white-space:nowrap;font-size:21px;padding-left:100%;will-change:transform}
#ticker span{margin-right:70px}#ticker span b{color:var(--gold);margin-right:10px}
.todaygrid{position:absolute;inset:0 24px 0 24px;display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:1fr 1fr;gap:16px}
.tbig,.tins,.tshops,.talerts{padding:16px 20px;overflow:hidden}
#ctrend{width:100%;height:calc(100% - 26px)}
#insights .ins{font-size:21px;padding:9px 0;border-bottom:1px solid rgba(201,162,39,.2)}
#nshops .bar{grid-template-columns:300px 1fr 120px;margin-top:6px;font-size:16px}#nshops .bar .tr{height:16px}
#alerts .al{font-size:20px;padding:10px 14px;margin:8px 0;border-radius:10px;background:rgba(214,69,69,.14);border-left:4px solid var(--red)}
#alerts .al.ok{background:rgba(63,163,77,.14);border-left-color:var(--grn)}
#srcbadge{position:absolute;right:30px;bottom:62px;font-size:12px;color:var(--muted)}
#srcbadge.sample{color:#fff;background:#C0392B;padding:4px 10px;border-radius:8px;font-weight:700}

.plgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px 14px;margin:4px 0 10px}.plgrid>div{display:flex;flex-direction:column}.plgrid .lbl{font-size:11px}.plgrid b{font-size:18px;color:#F3E6B3}.plgrid b.pos{color:#3FA34D}.plgrid b.neg{color:#D64545}

/* TV perf */
.leaflet-tooltip.plabel{background:transparent;border:0;box-shadow:none}
#stage{backface-visibility:hidden}
#side,.kpi{backface-visibility:hidden}

/* TV perf (cheap WebViews): isolate pins, cheaper paints, same animations */
.pin{contain:layout style;transform:translateZ(0)}
.pin .ring{contain:strict}
.kpi{contain:paint}
.bgglow{contain:strict}
html.paused *,html.paused *:before,html.paused *:after{animation-play-state:paused!important}
/* lowfx = slightly softer glow only on slow screens; every animation still runs */
html.lowfx .pin .core{box-shadow:0 0 12px 1px var(--c)}
html.lowfx .pin.active .core{box-shadow:0 0 16px 2px var(--gold2)}
html.lowfx .panel{box-shadow:0 4px 14px rgba(0,0,0,.35)}
html.lowfx .garc{filter:drop-shadow(0 0 3px rgba(63,163,77,.7))}
html.lowfx .lg i{box-shadow:0 0 5px var(--c)}

/* TV smooth v2 (2026-11-10): containment + layer hints only; every animation, timing and look unchanged */
.panel{contain:layout paint}
#kpis{contain:layout style}
.kpi .kv,#side .big,#side .mid,.plgrid b,.bar .v,#gVal,#tourName,#clock{contain:layout style}
#side .people,#side .trio,#side .plgrid,#side .gaugerow,#shops{contain:layout style}
.gauge svg,#trend,#ctrend{will-change:transform;transform:translateZ(0)}
.tickwrap{contain:strict;height:100%}
#ticker{backface-visibility:hidden;transform:translate3d(0,0,0)}
.leaflet-tile{backface-visibility:hidden}
.leaflet-marker-icon{contain:layout style}