/* ---------- layout & panel ---------- */
:root {
  --bg: #f6f7fb; --ink: #0f172a; --ink-2: #475569; --ink-3: #8a94a8;
  --glass: rgba(255, 255, 255, .86); --line: rgba(15, 23, 42, .09); --tile: rgba(15, 23, 42, .035);
  --panel-w: 400px;
  /* sky palette, swapped per time phase */
  --sky1: #5fb4f0; --sky2: #a6d8f7; --sky3: #e8f4fb;
  --mtn-far: #8fb0c9; --mtn-mid: #6f97ae; --mtn-near: #4f8a68; --snow: #f6fbff;
  --grass1: #78c35a; --grass2: #4f9a3e; --water: #4cb3e6; --water-hi: #bfe8ff;
  --glass1: #9cc7e4; --glass2: #4f7ea3; --window-glow: 0;
  --night: 0;
}
body { margin: 0; background: var(--bg); color: var(--ink); overflow: hidden; }
.app { display: grid; grid-template-columns: 1fr var(--panel-w); height: 100dvh; }
.stage { position: relative; overflow: hidden; min-height: 0; background: var(--sky2); }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.topbar {
  position: absolute; top: calc(env(safe-area-inset-top, 0px) + 16px); left: 16px; right: 16px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px; pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.brand, .topbar-right {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 14px;
  background: var(--glass); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid var(--line); color: var(--ink); text-decoration: none; box-shadow: 0 8px 30px rgba(0, 0, 0, .18);
}
.topbar-right { padding: 8px 14px; gap: 14px; }
.brand-mark { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, #0ea5e9, #6366f1); }
.brand-mark svg { width: 20px; height: 20px; fill: #fff; }
.brand b { display: block; font-size: 15px; letter-spacing: .02em; }
.brand small, .clock small { display: block; font-size: 11px; color: var(--ink-2); }
.clock { text-align: right; line-height: 1.1; }
.clock b { font-size: 16px; font-variant-numeric: tabular-nums; }
.live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--good); }
.live i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; animation: pulse 2s infinite; }
.live.off { color: var(--ink-3); }
.live.off i { animation: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); } 70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }

.panel {
  background: linear-gradient(180deg, #ffffff, #f8fafc); border-left: 1px solid var(--line);
  overflow-y: auto; padding: 20px 18px calc(env(safe-area-inset-bottom, 0px) + 18px); scrollbar-width: thin; scrollbar-color: #253148 transparent;
}
.panel-head h1 { font-size: 18px; margin: 0 0 2px; letter-spacing: -.01em; }
.muted { color: var(--ink-3); font-size: 12px; margin: 0; }
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0; }
.kpi {
  background: var(--tile); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 12px 11px;
  display: flex; flex-direction: column; gap: 3px; min-width: 0; transition: border-color .3s, transform .3s var(--ease);
}
.kpi:hover { border-color: rgba(15, 23, 42, .16); transform: translateY(-1px); }
.kpi-wide { grid-column: span 2; }
.kpi-label { font-size: 11px; color: var(--ink-2); font-weight: 500; }
.kpi-val { font-size: 22px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; align-self: flex-start; max-width: 100%; }
.kpi-wide .kpi-val { font-size: 28px; }
.kpi-sub { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; align-self: flex-start; max-width: 100%; }
.accent-gold { background: linear-gradient(135deg, rgba(250, 204, 21, .16), rgba(250, 204, 21, .04)); border-color: rgba(202, 138, 4, .28); }
.accent-gold .kpi-val { color: #a16207; }
.flash { animation: flash .9s var(--ease); }
@keyframes flash { 30% { color: #4f46e5; text-shadow: 0 0 18px rgba(79, 70, 229, .35); } }

.card { background: var(--tile); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px; margin-bottom: 12px; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.card-head h2 { font-size: 13px; margin: 0; font-weight: 700; }
.seg { display: inline-flex; background: rgba(15, 23, 42, .05); border-radius: 9px; padding: 2px; }
.seg button { border: 0; background: transparent; font-size: 11.5px; padding: 5px 9px; border-radius: 7px; color: var(--ink-2); transition: background .2s, color .2s; }
.seg button[aria-selected="true"] { background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .12); color: var(--ink); }

.chart { position: relative; height: 130px; }
.chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.chart .grid { stroke: rgba(15, 23, 42, .07); }
.chart .axis { fill: var(--ink-3); font-size: 10px; }
.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .hit { fill: transparent; }
.chart .cross { stroke: rgba(15, 23, 42, .25); stroke-dasharray: 3 3; }
.chart .dot { stroke: #0d1526; stroke-width: 2; }
.chart-tip {
  position: absolute; pointer-events: none; background: #111a2e; border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 9px; font-size: 11.5px; white-space: nowrap; transform: translate(-50%, -110%); box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}
.chart-tip b { display: block; font-size: 12.5px; }
.chart-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-3); font-size: 12px; text-align: center; padding: 0 20px; }

.floors { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.floors li { border-radius: 10px; }
.floor-row {
  width: 100%; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; text-align: left;
  padding: 8px 10px; border-radius: 10px; border: 1px solid transparent; background: rgba(15, 23, 42, .02);
  transition: background .2s, border-color .2s, transform .25s var(--ease);
}
.floor-row:hover, .floor-row.on { background: rgba(15, 23, 42, .05); border-color: var(--line); transform: translateX(2px); }
.floor-badge { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-size: 12px; color: #0b1220; }
.floor-row strong { display: block; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.floor-row small { color: var(--ink-3); font-size: 11.5px; }
.floor-state { font-size: 11px; color: var(--ink-3); display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.floor-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
.floor-state.busy { color: var(--good); }
.floor-state.busy i { background: var(--good); animation: pulse 1.6s infinite; }

.feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 340px; overflow-y: auto; scrollbar-width: thin; }
.feed li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; padding: 7px 6px; border-radius: 8px; font-size: 12.5px; line-height: 1.35; }
.feed li.new { animation: feedIn .6s var(--ease); background: rgba(56, 189, 248, .07); }
@keyframes feedIn { from { opacity: 0; transform: translateY(-6px); } }
.feed .ico { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-size: 12px; background: rgba(15, 23, 42, .05); }
.feed time { display: block; color: var(--ink-3); font-size: 11px; margin-top: 1px; }
.feed .empty { display: block; color: var(--ink-3); text-align: center; padding: 14px 0; }
.panel-foot { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; color: var(--ink-3); padding: 8px 2px 0; }
.admin-link { color: var(--ink-2); text-decoration: none; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); transition: background .2s; }
.admin-link:hover { background: rgba(15, 23, 42, .05); }

/* ---------- floor tooltip & drawer ---------- */
.floor-tip {
  position: absolute; z-index: 5; pointer-events: none; padding: 7px 11px; border-radius: 10px; font-size: 12px;
  background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--line);
  transform: translate(-50%, calc(-100% - 10px)); white-space: nowrap; box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}
.floor-tip b { display: block; font-size: 13px; }
.drawer {
  position: absolute; z-index: 6; left: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); width: min(380px, calc(100% - 32px));
  max-height: calc(100% - 120px); overflow-y: auto; padding: 18px; border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .94); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--line); box-shadow: 0 20px 60px rgba(0, 0, 0, .4); animation: drawerIn .45s var(--ease-spring);
}
@keyframes drawerIn { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.drawer-close { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 9px; border: 0; background: rgba(15, 23, 42, .06); color: var(--ink); font-size: 18px; line-height: 1; }
.drawer-close:hover { background: rgba(15, 23, 42, .12); }
.dr-head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; padding-right: 30px; }
.dr-head .floor-badge { width: 42px; height: 42px; font-size: 14px; border-radius: 12px; }
.dr-head h3 { margin: 0; font-size: 16px; }
.dr-head p { margin: 2px 0 0; color: var(--ink-2); font-size: 12px; }
.dr-desc { color: var(--ink-2); font-size: 12.5px; line-height: 1.5; margin: 0 0 12px; }
.dr-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 12px; }
.dr-stats div { background: rgba(15, 23, 42, .04); border-radius: 9px; padding: 8px; }
.dr-stats b { display: block; font-size: 15px; }
.dr-stats small { color: var(--ink-3); font-size: 10.5px; }
.agents { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.agents li { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 8px; border-radius: 10px; background: rgba(15, 23, 42, .03); }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; color: #0b1220; position: relative; }
.avatar.working::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--good); animation: ring 1.4s var(--ease) infinite; }
@keyframes ring { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.25); opacity: 0; } }
.agents strong { font-size: 13px; display: block; }
.agents small { color: var(--ink-3); font-size: 11.5px; }
.pill { font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 99px; letter-spacing: .03em; white-space: nowrap; }
.pill.working { background: rgba(34, 197, 94, .15); color: #15803d; }
.pill.idle { background: rgba(56, 189, 248, .14); color: #0369a1; }
.pill.off { background: rgba(148, 163, 184, .16); color: #64748b; }

/* ---------- scene ---------- */
.phase-dawn { --sky1: #3d5a99; --sky2: #e99a7a; --sky3: #ffd9a8; --mtn-far: #8e8fb2; --mtn-mid: #6f7799; --mtn-near: #4c7560; --grass1: #6aa857; --grass2: #437f39; --water: #6f9fd0; --glass1: #e3b9a6; --glass2: #5a6f98; --window-glow: .25; --night: .25; }
.phase-dusk { --sky1: #2b2f6b; --sky2: #d9677a; --sky3: #ffb36b; --mtn-far: #7d6e95; --mtn-mid: #5e5a80; --mtn-near: #3f5f52; --grass1: #5b8f4c; --grass2: #3b6d33; --water: #6e7fc0; --glass1: #e7a38f; --glass2: #4a4f86; --window-glow: .55; --night: .45; }
.phase-night { --sky1: #050a1c; --sky2: #0f1d3d; --sky3: #213a63; --mtn-far: #1f2c48; --mtn-mid: #18233a; --mtn-near: #13261f; --snow: #b7c5dc; --grass1: #1d3a24; --grass2: #142b1a; --water: #1d3b66; --water-hi: #5d86c0; --glass1: #2a3b5c; --glass2: #121c33; --window-glow: 1; --night: 1; }

.sky1 { stop-color: var(--sky1); } .sky2 { stop-color: var(--sky2); } .sky3 { stop-color: var(--sky3); }
.g1 { stop-color: var(--grass1); } .g2 { stop-color: var(--grass2); }
.gl1 { stop-color: var(--glass1); } .gl2 { stop-color: var(--glass2); }
.mtn-far { fill: var(--mtn-far); } .mtn-mid { fill: var(--mtn-mid); } .mtn-near { fill: var(--mtn-near); } .snow { fill: var(--snow); }
.water { fill: var(--water); }
.stars { opacity: var(--night); transition: opacity 2s; }
.stars circle { animation: twinkle 3s ease-in-out infinite; }
.stars circle:nth-child(3n) { animation-delay: -1s; } .stars circle:nth-child(3n+1) { animation-delay: -2s; }
@keyframes twinkle { 50% { opacity: .3; } }
.sun { transition: transform 3s var(--ease), opacity 2s; }
.night-only { opacity: var(--night); transition: opacity 2s; }
.day-only { opacity: calc(1 - var(--night)); transition: opacity 2s; }
.glow { opacity: var(--window-glow); transition: opacity 2s; }

.drift { animation: drift linear infinite; }
@keyframes drift { from { transform: translateX(-420px); } to { transform: translateX(1900px); } }
.mist { animation: mist 26s ease-in-out infinite alternate; }
@keyframes mist { to { transform: translateX(60px); } }
.flow { stroke: var(--water-hi); stroke-width: 2; fill: none; stroke-dasharray: 14 26; opacity: .55; animation: flow 3.5s linear infinite; stroke-linecap: round; }
@keyframes flow { to { stroke-dashoffset: -80; } }

.tree { transform-box: fill-box; transform-origin: 50% 100%; animation: sway 5s ease-in-out infinite alternate; }
@keyframes sway { from { transform: rotate(-1.4deg); } to { transform: rotate(1.4deg); } }
.flag { transform-box: fill-box; transform-origin: 0 50%; animation: flag 1.6s ease-in-out infinite alternate; }
@keyframes flag { from { transform: skewY(-6deg) scaleX(.96); } to { transform: skewY(5deg) scaleX(1.03); } }
.jet { transform-box: fill-box; transform-origin: 50% 100%; animation: jet 1.2s ease-in-out infinite alternate; }
@keyframes jet { from { transform: scaleY(.75); } to { transform: scaleY(1.08); } }

.car-r { animation: carR linear infinite; }
.car-l { animation: carL linear infinite; }
@keyframes carR { from { transform: translateX(-260px); } to { transform: translateX(1860px); } }
@keyframes carL { from { transform: translateX(1860px); } to { transform: translateX(-260px); } }
.wheel { transform-box: fill-box; transform-origin: center; animation: spin .5s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.bird { animation: birds linear infinite; }
@keyframes birds { from { transform: translate(-100px, 0); } 50% { transform: translate(800px, -40px); } to { transform: translate(1750px, 10px); } }
.wing { transform-box: fill-box; transform-origin: 50% 100%; animation: flap .45s ease-in-out infinite alternate; }
@keyframes flap { to { transform: scaleY(-.6); } }

.floor { cursor: pointer; }
.floor .band { transition: filter .3s; }
.floor:hover .band, .floor.on .band { filter: brightness(1.18) saturate(1.1); }
.floor .outline { fill: none; stroke: transparent; stroke-width: 3; transition: stroke .3s; }
.floor.on .outline, .floor:focus-visible .outline { stroke: #fff; }
.floor:focus { outline: none; }
.floor .tint { transition: opacity .6s; }
.floor.busy .tint { opacity: .45 !important; animation: busy 2.4s ease-in-out infinite; }
@keyframes busy { 50% { opacity: .2; } }
.floor-label { font: 700 13px var(--font); fill: #fff; paint-order: stroke; stroke: rgba(0, 0, 0, .35); stroke-width: 3px; letter-spacing: .04em; pointer-events: none; }
.floor-name { font: 600 11px var(--font); fill: rgba(255, 255, 255, .92); paint-order: stroke; stroke: rgba(0, 0, 0, .35); stroke-width: 3px; pointer-events: none; }
.person { transition: opacity .4s; }
.person.working { animation: bob .9s ease-in-out infinite alternate; }
@keyframes bob { to { transform: translateY(-2.5px); } }
.person.off { opacity: .35; }
.led { animation: led 1s steps(2) infinite; }
.led:nth-child(2n) { animation-delay: -.5s; }
@keyframes led { 50% { opacity: .2; } }
.beacon { animation: beacon 1.6s ease-in-out infinite; }
@keyframes beacon { 50% { opacity: .15; } }
.shimmer { stroke: rgba(255, 255, 255, .7); stroke-width: 1.4; stroke-dasharray: 6 10; animation: flow 2.5s linear infinite; }
#heli { transform-box: view-box; }
.rotor { transform-box: fill-box; transform-origin: center; animation: rotor .12s linear infinite; }
@keyframes rotor { 50% { transform: scaleX(.15); } }
.tail-rotor { transform-box: fill-box; transform-origin: center; animation: spin .15s linear infinite; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) { :root { --panel-w: 340px; } }
@media (max-width: 860px) {
  body { overflow: auto; }
  .app { display: block; height: auto; }
  .stage { height: 72svh; min-height: 460px; }
  .panel { border-left: 0; border-top: 1px solid var(--line); overflow: visible; }
  .drawer { position: fixed; left: 8px; right: 8px; width: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); max-height: 70svh; }
  .brand small { display: none; }
}
@media (max-width: 420px) {
  .kpi-val { font-size: 19px; } .kpi-wide .kpi-val { font-size: 24px; }
  .topbar { left: 10px; right: 10px; }
  .clock small { display: none; }
}

.shop-link { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 9px; border-radius: 99px; background: #16a34a; color: #fff; font-weight: 700; font-size: 12.5px; text-decoration: none; transition: background .15s; }
.shop-link:hover { background: #15803d; }
.shop-link svg { width: 15px; height: 15px; }
.etalase-link { background: #f97316; }
.etalase-link:hover { background: #ea580c; }