/* app-kit.css —— 手机App外壳 (自托管, 零外网). 在 index.html 里 <link rel="stylesheet" href="shared/app-kit.css"> 即可用 */
:root{
  --ak-sp-1:4px; --ak-sp-2:8px; --ak-sp-3:12px; --ak-sp-4:16px; --ak-sp-5:24px; --ak-sp-6:32px;
  --ak-r-1:8px; --ak-r-2:12px; --ak-r-3:16px; --ak-r-4:22px;
  --ak-fs-display:28px; --ak-fs-title:20px; --ak-fs-headline:17px; --ak-fs-body:15px; --ak-fs-callout:13px; --ak-fs-caption:11px;
  --ak-fw-bold:800; --ak-fw-semibold:700; --ak-fw-medium:600; --ak-lh-tight:1.25; --ak-lh-normal:1.45;
  --ak-bg-deep:#0c0a10; --ak-bg:#15131a; --ak-surface:#1d1a24; --ak-card:#262230; --ak-card-2:#2e2a3a;
  --ak-text:#eef1f7; --ak-text-2:#c4c9d4; --ak-muted:#9aa3b2;
  --ak-primary:#6d6bf6; --ak-primary-2:#9b6bf6; --ak-on-primary:#ffffff; --ak-primary-soft:rgba(109,107,246,.16);
  --ak-border:rgba(255,255,255,.07); --ak-divider:rgba(255,255,255,.06);
  --ak-track:rgba(255,255,255,.07); --ak-track-strong:rgba(255,255,255,.18);
  --ak-header-bg:rgba(15,17,23,.72); --ak-tabbar-bg:rgba(20,23,32,.92);
  --ak-elev-1:0 2px 6px rgba(0,0,0,.25); --ak-elev-2:0 6px 20px rgba(0,0,0,.25); --ak-elev-3:0 14px 40px rgba(0,0,0,.42);
  --ak-primary-shadow:0 8px 20px rgba(109,107,246,.35);
  --ak-radius:18px; --ak-gap:14px;
  --ak-safe-t:env(safe-area-inset-top,0px); --ak-safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif;
  background:var(--ak-bg-deep); color:var(--ak-text); -webkit-font-smoothing:antialiased;
}
.app{max-width:430px; margin:0 auto; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column;
  background:linear-gradient(180deg,var(--ak-surface),var(--ak-bg)); color:var(--ak-text); position:relative; overflow:hidden;}
.app-header{position:sticky; top:0; z-index:10; padding:6px 18px 14px;
  font-size:var(--ak-fs-title); font-weight:var(--ak-fw-bold); letter-spacing:-.01em; color:var(--ak-text);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); background:var(--ak-header-bg);
  border-bottom:1px solid var(--ak-divider); display:flex; align-items:center; gap:10px;}
.app-main{flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:16px 16px calc(var(--ak-safe-b) + 84px + var(--ak-kb, 0px)); transition:padding-bottom .2s;}
.screen{display:none; animation:ak-fade .22s ease;}
.screen.active{display:block;}
.app-tabbar{position:fixed; left:50%; transform:translateX(-50%); bottom:0; width:100%; max-width:430px;
  display:flex; padding:8px 8px calc(var(--ak-safe-b) + 8px); gap:4px;
  background:var(--ak-tabbar-bg); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-top:1px solid var(--ak-divider); z-index:20;}
.tab{flex:1; border:0; background:transparent; color:var(--ak-muted); font:inherit; font-size:11px; font-weight:700;
  display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 0; border-radius:12px; cursor:pointer;
  transition:color .15s, background .15s;}
.tab .tab-ico{font-size:21px; line-height:1;}
.tab.active{color:var(--ak-primary); background:var(--ak-primary-soft);}
.tab:active{transform:scale(.94);}
.card{background:var(--ak-card); border:1px solid var(--ak-border); border-radius:var(--ak-radius);
  padding:16px; margin-bottom:var(--ak-gap); box-shadow:var(--ak-elev-2);}
.btn{appearance:none; border:0; cursor:pointer; font:inherit; font-weight:800; color:var(--ak-on-primary); padding:13px 18px;
  border-radius:14px; background:linear-gradient(135deg,var(--ak-primary),var(--ak-primary-2));
  box-shadow:var(--ak-primary-shadow); transition:transform .12s, filter .12s; min-height:44px;}
.btn:active{transform:scale(.96); filter:brightness(1.05);}
.btn.ghost{background:var(--ak-track); box-shadow:none; color:var(--ak-text);}
.field{width:100%; padding:12px 14px; border-radius:12px; border:1px solid rgba(0,0,0,.14); background:#fff; color:#1f2937; -webkit-text-fill-color:#1f2937; font:inherit; font-size:16px; outline:none; transition:border .15s;}
.field::placeholder{color:#9aa1ad; -webkit-text-fill-color:#9aa1ad;}
.field:focus{border-color:var(--ak-primary);}
@keyframes ak-fade{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}