/* app-kit.css —— 手机App外壳 (自托管, 零外网) */
: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);}
*{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-statusbar{display:flex; align-items:center; justify-content:space-between; padding:7px 20px 3px;
  font-size:13px; font-weight:700; color:var(--ak-text); user-select:none; flex:0 0 auto;}
.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; 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);}
.btn.block{width:100%;display:block;}
.btn[disabled],.btn:disabled{opacity:.5;pointer-events:none;}
.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);}
.ak-empty{text-align:center;padding:46px 20px;color:var(--ak-muted);}
.big-emoji{font-size:60px;display:block;margin-bottom:10px;}
.muted{color:var(--ak-muted);}
.sec{color:var(--ak-muted);font-size:var(--ak-fs-caption);font-weight:var(--ak-fw-semibold);letter-spacing:.04em;margin:var(--ak-sp-5) 6px var(--ak-sp-2);}
.chip{display:inline-block;padding:4px 11px;border-radius:999px;background:var(--ak-track);color:var(--ak-text);font-size:12px;font-weight:700;margin:2px;cursor:pointer;}
.chip:active{transform:scale(.93);}
.bubble{max-width:78%;padding:10px 13px;border-radius:16px;margin:5px 0;font-size:14px;line-height:1.42;word-break:break-word;}
.bubble.them{background:var(--ak-card);border-bottom-left-radius:5px;}
.bubble.me{background:linear-gradient(135deg,var(--ak-primary),var(--ak-primary-2));color:#fff;border-bottom-right-radius:5px;margin-left:auto;}
.bubble-row{display:flex;gap:8px;align-items:flex-end;}
.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;}}