.app{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--bg);overflow:hidden}

.topbar{height:calc(var(--topbar-h) + var(--safe-t));padding-top:var(--safe-t);
  display:flex;align-items:center;gap:11px;padding-left:16px;padding-right:12px;
  background:var(--accent);color:var(--on-accent);z-index:var(--z-topbar);flex:0 0 auto;
  box-shadow:var(--sh-1);transition:background .2s}
.topbar .tb-logo{width:30px;height:30px;border-radius:8px;background:#ffffff2b;display:grid;place-items:center;overflow:hidden;flex:0 0 auto}
.topbar .tb-logo img{max-width:100%;max-height:100%;object-fit:contain}
.topbar .tb-logo [data-lucide]{width:18px;height:18px;color:#fff}
.topbar .tb-name{font-size:16px;font-weight:700;letter-spacing:-.2px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .tb-btn{width:38px;height:38px;border-radius:var(--r-pill);display:grid;place-items:center;color:#fff}
.topbar .tb-btn:active{background:#ffffff26}
.tb-lang{display:flex;align-items:center;gap:5px;padding:6px 11px;border-radius:var(--r-pill);background:#ffffff24;font-size:13px;font-weight:700;text-transform:uppercase}
.tb-lang [data-lucide]{width:14px;height:14px}

.screen{position:relative;flex:1;min-height:0;overflow:hidden}
.view{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  opacity:0;transform:translateY(8px);transition:opacity .22s ease,transform .22s ease;pointer-events:none}
.view.active{opacity:1;transform:none;pointer-events:auto}
.view.full{overflow:hidden}
.view-pad{padding:18px 16px calc(18px + var(--tabbar-h) + var(--safe-b))}

.tabbar{height:calc(var(--tabbar-h) + var(--safe-b));padding-bottom:var(--safe-b);
  display:flex;background:var(--surface);border-top:1px solid var(--border);z-index:var(--z-tabbar);flex:0 0 auto;box-shadow:var(--sh-pop)}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--text-3);font-size:10.5px;font-weight:600;position:relative;transition:color .14s}
.tab [data-lucide]{width:23px;height:23px;stroke-width:1.9}
.tab.active{color:var(--accent)}
.tab.active [data-lucide]{stroke-width:2.3}
.tab .tab-dot{position:absolute;top:7px;right:50%;margin-right:-15px;width:7px;height:7px;border-radius:50%;background:var(--danger);display:none}
.tab.has-dot .tab-dot{display:block}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 18px;border-radius:var(--r-m);
  font-weight:650;font-size:15px;background:var(--surface);border:1px solid var(--border);transition:transform .08s,background .14s}
.btn:active{transform:scale(.97)}
.btn [data-lucide]{width:19px;height:19px}
.btn-primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn-block{width:100%}
.btn-lg{padding:15px 20px;font-size:16px;border-radius:var(--r-l)}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l);box-shadow:var(--sh-1)}

.splash{position:fixed;inset:0;z-index:var(--z-splash);background:var(--accent);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;transition:opacity .4s ease}
.splash.hide{opacity:0;pointer-events:none}
.splash .sp-logo{width:84px;height:84px;border-radius:22px;background:#ffffff24;display:grid;place-items:center;overflow:hidden;animation:spLogo .5s ease}
.splash .sp-logo img{max-width:62%;max-height:62%;object-fit:contain}
.splash .sp-logo [data-lucide]{width:44px;height:44px;color:#fff}
.splash .sp-name{font-size:21px;font-weight:800;letter-spacing:-.4px}
.splash .sp-spin{width:26px;height:26px;border:3px solid #ffffff40;border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spLogo{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}}

.scrim{position:fixed;inset:0;background:#1a1a1a59;z-index:var(--z-overlay);opacity:0;transition:opacity .22s;pointer-events:none}
.scrim.show{opacity:1;pointer-events:auto}

.zg-toasts{position:fixed;left:50%;bottom:calc(var(--tabbar-h) + var(--safe-b) + 14px);transform:translateX(-50%);
  z-index:calc(var(--z-overlay) + 5);display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:max-content;max-width:90vw}
.zg-toast{background:var(--text);color:#fff;padding:11px 17px;border-radius:var(--r-pill);font-size:13.5px;font-weight:600;
  box-shadow:var(--sh-float);display:flex;align-items:center;gap:8px;animation:tin .22s ease}
.zg-toast.ok{background:var(--accent)}.zg-toast.err{background:var(--danger)}.zg-toast.warn{background:var(--warn)}
.zg-toast [data-lucide]{width:17px;height:17px}
@keyframes tin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px 28px;color:var(--text-3)}
.empty .ei{width:60px;height:60px;border-radius:16px;background:var(--surface-2);display:grid;place-items:center;margin-bottom:14px}
.empty .ei [data-lucide]{width:28px;height:28px}
.empty b{color:var(--text);font-size:16px;font-weight:700;margin-bottom:5px}
.empty p{font-size:13.5px;max-width:300px}

.skel{background:linear-gradient(90deg,#0000000a 25%,#00000012 37%,#0000000a 63%);background-size:400% 100%;animation:sk 1.3s ease infinite;border-radius:8px;color:transparent}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}

.zg-install{position:fixed;left:12px;right:12px;bottom:calc(var(--tabbar-h) + var(--safe-b) + 12px);
  z-index:calc(var(--z-overlay) + 6);display:flex;align-items:center;gap:12px;padding:12px 12px 12px 14px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l);box-shadow:var(--sh-float);animation:tin .26s ease}
.zg-install .zi-ic{width:40px;height:40px;border-radius:11px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;flex:0 0 auto}
.zg-install .zi-ic [data-lucide]{width:21px;height:21px}
.zg-install .zi-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.zg-install .zi-tx b{font-size:14px;font-weight:700;color:var(--text)}
.zg-install .zi-tx span{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zg-install .zi-add{flex:0 0 auto;background:var(--accent);color:var(--on-accent);border:0;border-radius:var(--r-pill);
  padding:9px 16px;font-size:13.5px;font-weight:700}
.zg-install .zi-add:active{transform:scale(.96)}
.zg-install .zi-x{flex:0 0 auto;width:32px;height:32px;border:0;background:transparent;color:var(--text-3);display:grid;place-items:center}
.zg-install .zi-x [data-lucide]{width:18px;height:18px}

.zg-update{position:fixed;left:12px;right:12px;top:calc(var(--safe-t) + 10px);z-index:calc(var(--z-splash) + 1);
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px 11px 16px;
  background:var(--text);color:#fff;border-radius:var(--r-pill);box-shadow:var(--sh-float);font-size:13.5px;font-weight:600;animation:tin .26s ease}
.zg-update button{background:#ffffff26;color:#fff;border:0;border-radius:var(--r-pill);padding:7px 15px;font-size:13px;font-weight:700}
.zg-update button:active{transform:scale(.96)}

@media(min-width:720px){
  .app{max-width:480px;margin:0 auto;box-shadow:0 0 60px #00000014}
  .scrim,.zg-toasts{max-width:480px;left:50%;transform:translateX(-50%)}
  .zg-install,.zg-update{max-width:456px;left:50%;transform:translateX(-50%)}
}