/* 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);
}
.ak-theme-kid{--ak-bg-deep:#fbe9f6;--ak-bg:#fdf3fb;--ak-surface:#fff6fc;--ak-card:#ffffff;--ak-card-2:#fbf3fb;--ak-text:#44456a;--ak-text-2:#6c6e93;--ak-muted:#a9abce;--ak-primary:#4fd1c5;--ak-primary-2:#7eb6ff;--ak-on-primary:#0e3b3a;--ak-primary-soft:rgba(79,209,197,.16);--ak-border:rgba(68,69,106,.10);--ak-divider:rgba(68,69,106,.08);--ak-track:rgba(68,69,106,.06);--ak-track-strong:rgba(68,69,106,.18);--ak-header-bg:rgba(253,243,251,.82);--ak-tabbar-bg:rgba(255,255,255,.92);--ak-radius:20px;--ak-r-3:20px;--ak-elev-1:0 2px 8px rgba(125,90,140,.10);--ak-elev-2:0 8px 24px rgba(125,90,140,.13);--ak-elev-3:0 16px 44px rgba(125,90,140,.18);--ak-primary-shadow:0 8px 20px rgba(79,209,197,.30);}
.ak-theme-candy{--ak-bg-deep:#ffe1ee;--ak-bg:#fff0f6;--ak-surface:#fff5f9;--ak-card:#ffffff;--ak-card-2:#fff0f6;--ak-text:#6a2348;--ak-text-2:#9a4f74;--ak-muted:#d08bac;--ak-primary:#ff4f9a;--ak-primary-2:#ffc24b;--ak-on-primary:#5a1233;--ak-primary-soft:rgba(255,79,154,.14);--ak-border:rgba(106,35,72,.10);--ak-divider:rgba(106,35,72,.08);--ak-track:rgba(106,35,72,.06);--ak-track-strong:rgba(106,35,72,.18);--ak-header-bg:rgba(255,240,246,.82);--ak-tabbar-bg:rgba(255,255,255,.92);--ak-radius:22px;--ak-r-3:22px;--ak-elev-1:0 3px 10px rgba(214,70,130,.14);--ak-elev-2:0 10px 26px rgba(214,70,130,.18);--ak-elev-3:0 18px 46px rgba(214,70,130,.22);--ak-primary-shadow:0 10px 22px rgba(255,79,154,.34);}
*{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);}
.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:13px;font-weight:700;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:5px;padding:8px 0;border-radius:12px;cursor:pointer;transition:color .15s,background .15s;}
.tab .tab-ico{font-size:18px;line-height:1;}
.tab.active{color:var(--ak-primary);background:var(--ak-primary-soft);}
.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);}
.ak-toast{position:fixed;left:50%;transform:translateX(-50%) translateY(20px);bottom:calc(var(--ak-safe-b) + 92px);background:#11141d;color:#fff;padding:11px 18px;border-radius:14px;font-weight:700;font-size:14px;box-shadow:0 10px 30px rgba(0,0,0,.5);opacity:0;pointer-events:none;z-index:50;transition:opacity .2s,transform .2s;max-width:88%;}
.ak-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
@keyframes ak-fade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}