:root{
  --bg:var(--tg-theme-bg-color,#07111f);
  --surface:var(--tg-theme-secondary-bg-color,#0d1a2b);
  --surface-2:#13243a;
  --surface-3:#172a43;
  --text:var(--tg-theme-text-color,#f5f8ff);
  --muted:var(--tg-theme-hint-color,#8fa2bd);
  --accent:var(--tg-theme-button-color,#45d7a0);
  --accent-text:var(--tg-theme-button-text-color,#07140f);
  --link:var(--tg-theme-link-color,#69c7ff);
  --danger:#ff6b7f;
  --warning:#ffb55f;
  --line:rgba(143,162,189,.18);
  --shadow:0 18px 50px rgba(0,0,0,.2);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{padding:env(safe-area-inset-top) 0 calc(84px + env(safe-area-inset-bottom));overscroll-behavior:none}
button,input,select{font:inherit}
button{cursor:pointer}
.app{max-width:760px;margin:0 auto;padding:15px 14px 26px}
.app-hidden{visibility:hidden}
.boot-screen{position:fixed;inset:0;z-index:100;display:grid;place-content:center;justify-items:center;background:
radial-gradient(circle at 50% 25%,rgba(69,215,160,.16),transparent 28%),var(--bg);transition:opacity .25s ease}
.boot-screen.done{opacity:0;pointer-events:none}
.boot-logo,.brand-mark{display:grid;place-items:center;color:var(--accent);font-weight:900;border:1px solid rgba(69,215,160,.36);background:rgba(69,215,160,.09);box-shadow:0 0 40px rgba(69,215,160,.12)}
.boot-logo{width:66px;height:66px;border-radius:20px;font-size:24px}
.boot-title{font-size:22px;font-weight:900;letter-spacing:.1em;margin-top:16px}
.boot-sub{font-size:11px;color:var(--muted);margin-top:5px;letter-spacing:.08em}
.boot-loader{width:110px;height:3px;border-radius:999px;background:rgba(143,162,189,.16);overflow:hidden;margin-top:24px}
.boot-loader span{display:block;width:42%;height:100%;background:var(--accent);animation:loader 1.1s ease-in-out infinite}
@keyframes loader{0%{transform:translateX(-110%)}100%{transform:translateX(290%)}}
.app-header{display:flex;align-items:center;justify-content:space-between;padding:5px 2px 20px}
.brand{display:flex;align-items:center;gap:11px}
.brand-mark{width:41px;height:41px;border-radius:13px;font-size:13px}
.kicker,.eyebrow{font-size:9px;font-weight:850;letter-spacing:.16em;color:var(--muted)}
h1,h2,h3,p{margin:0}
h1{font-size:19px;margin-top:2px;letter-spacing:-.02em}
h2{font-size:28px;letter-spacing:-.04em}
h3{font-size:17px;letter-spacing:-.015em}
.live-pill{display:flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid var(--line);border-radius:999px;font-size:9px;letter-spacing:.09em;background:rgba(255,255,255,.025)}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px var(--accent)}
.live-pill.offline .live-dot{background:var(--danger);box-shadow:none}
.welcome,.section-title,.panel-head,.modal-title,.hero-top{display:flex;align-items:center;justify-content:space-between}
.welcome{margin-bottom:13px}
.icon-button,.link-button{border:0;background:transparent;color:var(--link)}
.icon-button{width:38px;height:38px;border-radius:12px;font-size:22px;display:grid;place-items:center}
.icon-button:active{background:rgba(255,255,255,.06)}
.spin-button.loading span{display:block;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.link-button{font-size:12px;font-weight:750;padding:8px 0}
.hero-card,.panel,.report-card,.mini-card,.metric-card{background:linear-gradient(145deg,var(--surface),#0a1625);border:1px solid var(--line);box-shadow:var(--shadow)}
.hero-card{padding:20px;border-radius:22px;background:
radial-gradient(circle at 100% 0,rgba(69,215,160,.17),transparent 35%),
linear-gradient(145deg,#10273a,var(--surface));border-color:rgba(69,215,160,.23)}
.hero-label,.section-copy,.hint{font-size:11px;color:var(--muted)}
.hero-value{font-size:54px;font-weight:900;letter-spacing:-.06em;margin:7px 0 2px}
.hero-value small{font-size:18px;color:var(--muted);font-weight:700}
.occupancy-ring{width:64px;height:64px;position:relative;display:grid;place-items:center}
.occupancy-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.occupancy-ring circle{fill:none;stroke-width:4}
.ring-bg{stroke:rgba(143,162,189,.16)}
.ring-value{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:113.1;stroke-dashoffset:113.1;transition:stroke-dashoffset .4s ease}
.occupancy-ring b{font-size:11px}
.progress{height:6px;border-radius:99px;background:rgba(143,162,189,.14);overflow:hidden;margin-top:13px}
.progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),#7cecc0);border-radius:inherit;transition:width .35s ease}
.hero-foot{display:flex;justify-content:space-between;margin-top:11px;font-size:10px;color:var(--muted)}
.metric-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:10px 0}
.metric-card{display:flex;align-items:center;gap:12px;border-radius:17px;padding:14px;min-height:82px}
.metric-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--surface-2);font-size:19px}
.metric-icon.minibus,.metric-icon.bus{background:rgba(105,199,255,.08)}
.metric-icon.alert{background:rgba(255,181,95,.1);color:var(--warning);font-weight:900}
.metric-card b{display:block;font-size:24px;line-height:1}
.metric-card small{display:block;color:var(--muted);font-size:10px;margin-top:5px}
.metric-card.warning b{color:var(--warning)}
.panel{padding:16px;border-radius:19px;margin-top:10px}
.panel-chip,.status-badge{font-size:9px;font-weight:800;letter-spacing:.05em;border-radius:999px;padding:6px 8px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.status-badge.good{color:var(--accent);border-color:rgba(69,215,160,.24);background:rgba(69,215,160,.07)}
.status-badge.bad{color:var(--danger);border-color:rgba(255,107,127,.28);background:rgba(255,107,127,.08)}
.flow-row{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}
.flow{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:12px;background:rgba(255,255,255,.018)}
.flow>span{font-size:23px}
.flow.in>span,.flow.in b{color:var(--accent)}
.flow.out>span,.flow.out b{color:var(--danger)}
.flow b{display:block;font-size:21px}
.flow small{font-size:10px;color:var(--muted)}
.view{display:none}
.view.active{display:block;animation:fade .17s ease}
@keyframes fade{from{opacity:.55;transform:translateY(3px)}to{opacity:1;transform:none}}
.section-title{margin:5px 0 13px}
.section-copy{line-height:1.55;margin:-3px 0 13px}
.badge{min-width:36px;text-align:center;padding:6px 10px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-weight:850}
.search-wrap{position:sticky;top:0;z-index:4;padding:0 0 9px;background:var(--bg)}
input,select{width:100%;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--text);padding:13px 14px;outline:none}
input::placeholder{color:var(--muted)}
input:focus,select:focus{border-color:rgba(69,215,160,.62);box-shadow:0 0 0 3px rgba(69,215,160,.08)}
.list{display:grid;gap:8px;margin-top:12px}
.list-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 13px;border:1px solid var(--line);border-radius:15px;background:var(--surface)}
.list-main{min-width:0}
.plate{font:850 15px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.045em}
.meta{font-size:10px;color:var(--muted);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.type-pill,.status-pill{display:inline-flex;align-items:center;border-radius:999px;padding:5px 8px;background:rgba(105,199,255,.08);font-size:9px;color:var(--link);white-space:nowrap;border:1px solid rgba(105,199,255,.11)}
.status-pill.recent{color:var(--accent);background:rgba(69,215,160,.08);border-color:rgba(69,215,160,.15)}
.status-pill.idle{color:var(--warning);background:rgba(255,181,95,.08);border-color:rgba(255,181,95,.14)}
.status-pill.no-data,.status-pill.disabled{color:var(--muted);background:rgba(143,162,189,.07);border-color:var(--line)}
.danger-button{border:0;background:rgba(255,107,127,.1);color:var(--danger);border-radius:10px;padding:8px 10px;font-weight:700}
.primary-button,.secondary-button{border:0;border-radius:13px;padding:11px 14px;font-weight:850}
.primary-button{background:var(--accent);color:var(--accent-text)}
.secondary-button{background:var(--surface-2);color:var(--text);border:1px solid var(--line)}
.full-width{width:100%;padding:14px}
.registry-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:4px}
.registry-stats>div{padding:13px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.registry-stats small{display:block;color:var(--muted);font-size:10px}
.registry-stats b{display:block;font-size:22px;margin-top:3px}
.report-card{padding:19px;border-radius:20px}
.report-range{font-size:11px;color:var(--muted);margin-bottom:14px}
.report-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:15px}
.report-grid>div{padding:13px;border-radius:14px;background:rgba(255,255,255,.025);border:1px solid var(--line)}
.report-grid b{display:block;font-size:24px}
.report-grid small{color:var(--muted);font-size:10px}
.report-icon{float:right;font-size:16px}
.report-icon.entry{color:var(--accent)}
.report-icon.exit{color:var(--danger)}
.report-icon.alert{color:var(--warning);font-weight:900}
.hint{line-height:1.55;padding:11px 4px}
.system-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mini-card{padding:13px;border-radius:15px}
.mini-card small{display:block;color:var(--muted);font-size:9px}
.mini-card b{display:block;margin-top:5px;font-size:13px}
.timeline{display:grid;gap:0;margin-top:10px}
.timeline-item{display:grid;grid-template-columns:24px 1fr auto;gap:8px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}
.timeline-item:last-child{border-bottom:0}
.timeline-dot{width:20px;height:20px;border-radius:8px;display:grid;place-items:center;font-size:11px;background:var(--surface-2)}
.timeline-dot.entry{color:var(--accent)}
.timeline-dot.exit{color:var(--danger)}
.timeline-content{min-width:0}
.timeline-content b{display:block;font:800 12px ui-monospace,SFMono-Regular,Menlo,monospace}
.timeline-content small{display:block;color:var(--muted);font-size:9px;margin-top:2px}
.timeline-time{font-size:9px;color:var(--muted)}
.bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:20;display:grid;grid-template-columns:repeat(5,1fr);padding:7px 7px calc(7px + env(safe-area-inset-bottom));background:rgba(7,17,31,.94);backdrop-filter:blur(18px);border-top:1px solid var(--line)}
.nav-item{display:grid;place-items:center;gap:2px;border:0;background:transparent;color:var(--muted);padding:4px 0}
.nav-item>span{font-size:17px;height:21px}
.nav-item small{font-size:9px}
.nav-item.active{color:var(--accent)}
.modal{position:fixed;inset:0;z-index:40}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.58);backdrop-filter:blur(3px)}
.modal-card{position:absolute;left:0;right:0;bottom:0;padding:10px 16px calc(20px + env(safe-area-inset-bottom));background:var(--bg);border-radius:22px 22px 0 0;border-top:1px solid var(--line);display:grid;gap:13px;box-shadow:0 -18px 55px rgba(0,0,0,.28)}
.modal-card label{display:grid;gap:7px;font-size:10px;color:var(--muted)}
.modal-handle{width:42px;height:4px;border-radius:99px;background:var(--line);margin:0 auto 4px}
.toast{position:fixed;left:50%;bottom:92px;z-index:60;transform:translateX(-50%);max-width:88%;background:var(--text);color:var(--bg);padding:10px 14px;border-radius:12px;font-size:11px;font-weight:800;box-shadow:0 12px 35px rgba(0,0,0,.35);text-align:center}
.empty{padding:20px 10px;text-align:center;color:var(--muted);font-size:11px}
.skeleton{height:58px;border-radius:14px;background:linear-gradient(90deg,var(--surface) 25%,var(--surface-2) 40%,var(--surface) 60%);background-size:300% 100%;animation:skeleton 1.2s ease infinite}
@keyframes skeleton{0%{background-position:100% 0}100%{background-position:0 0}}
@media(min-width:640px){
  .metric-grid{grid-template-columns:repeat(4,1fr)}
  .app{padding-top:22px}
  .bottom-nav{left:50%;right:auto;width:760px;transform:translateX(-50%)}
}