:root{--bg:#f4f2ee;--card:#fff;--tx:#1f1f23;--mu:#80808a;--ac:#e8590c;--acs:#fff0e6;--bd:#ebe8e2;--ok:#2b8a3e;--oks:#e6f6e9;--bad:#c92a2a;--wr:#fff4db}
@media(prefers-color-scheme:dark){:root{--bg:#111114;--card:#1d1d22;--tx:#f0f0f2;--mu:#9a9aa4;--ac:#ff8a4c;--acs:#2e2118;--bd:#2c2c33;--ok:#69db7c;--oks:#17291c;--bad:#ff8787;--wr:#2b2514;color-scheme:dark}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overscroll-behavior:none}
body{background:var(--bg);color:var(--tx);font:16px/1.4 -apple-system,system-ui,Roboto,"Segoe UI",sans-serif;-webkit-user-select:none;user-select:none;display:flex;justify-content:center}
.sel{-webkit-user-select:text;user-select:text}
#app{width:100%;max-width:480px;height:100%;display:flex;flex-direction:column;position:relative;background:var(--bg);overflow:hidden}
#top{display:flex;align-items:center;gap:6px;padding:calc(env(safe-area-inset-top,0px) + 12px) 16px 8px}
#top h1{font-size:24px;margin:0;flex:1;letter-spacing:-.3px}
.logo{font-size:26px}
#main{flex:1;min-height:0;overflow-y:auto;padding:4px 16px 96px;-webkit-overflow-scrolling:touch}
#tabs{display:flex;background:var(--card);border-top:1px solid var(--bd);padding-bottom:env(safe-area-inset-bottom,0px)}
#tabs button{flex:1;border:0;background:none;color:var(--mu);padding:9px 0 7px;font:inherit;font-size:11px;display:flex;flex-direction:column;align-items:center;gap:2px;transition:color .15s}
#tabs button.on{color:var(--ac);font-weight:600}
#tabs .lo{display:none}
#bar{display:none;align-items:center;gap:12px;background:var(--card);border-top:1px solid var(--bd);padding:12px 16px calc(env(safe-area-inset-bottom,0px) + 12px)}
.visit #bar{display:flex}
#bar .sum{flex:1;display:flex;flex-direction:column}
svg.i{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
button{font:inherit;color:inherit;cursor:pointer;transition:opacity .12s,transform .12s,background .15s}
.ib{border:0;background:none;padding:4px;margin-left:-8px;color:var(--tx)}
.card{background:var(--card);border-radius:16px;padding:14px;margin-bottom:10px;border:1px solid var(--bd)}
.tap{cursor:pointer}.tap:active,.btn:active,.qb:active,.chip:active,.ib:active{opacity:.7;transform:scale(.98)}
.row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.m{color:var(--mu);font-size:13px}h2{font-size:15px;margin:18px 2px 8px;color:var(--mu);font-weight:600}
.hero{background:linear-gradient(135deg,var(--ac),#f59f00);color:#fff;border-radius:20px;padding:18px;margin-bottom:12px}
.hero .big{font-size:32px;font-weight:700;letter-spacing:-.5px}.hs{display:flex;gap:14px;font-size:13px;opacity:.92;flex-wrap:wrap}
.qa{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.qb{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:12px 4px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:13px;color:var(--ac)}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px;font-size:12px;color:var(--mu)}.trio b{display:block;font-size:16px;color:var(--tx)}
.warn{background:var(--wr)}.pill{background:var(--acs);color:var(--ac);padding:3px 10px;border-radius:99px;font-size:13px;font-weight:600;white-space:nowrap}.pill.ok{background:var(--oks);color:var(--ok)}
.btn{background:var(--ac);color:#fff;border:0;border-radius:14px;padding:14px 20px;font-weight:600;width:100%}.btn.s{background:var(--card);color:var(--ac);border:1px solid var(--bd);margin-top:4px}.btn.d{color:var(--bad)}#bar .btn{width:auto}
input{width:100%;height:48px;border:1px solid var(--bd);border-radius:12px;padding:0 14px;background:var(--bg);color:var(--tx);font:inherit;-webkit-user-select:text;user-select:text;transition:border-color .15s}
input:focus{outline:0;border-color:var(--ac)}
.lb{font-size:13px;color:var(--mu);margin:12px 2px 6px}
.chips{display:flex;gap:8px;flex-wrap:wrap}.chip{border:1px solid var(--bd);background:var(--bg);border-radius:99px;padding:8px 14px}.chip.on{background:var(--ac);color:#fff;border-color:var(--ac)}
.seg{display:flex;background:var(--bg);border-radius:12px;padding:3px;margin:8px 0}.seg button{flex:1;border:0;background:none;padding:9px;border-radius:10px}.seg button.on{background:var(--card);color:var(--ac);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.line{display:flex;justify-content:space-between;align-items:center;padding-top:10px}
.st{display:flex;align-items:center;gap:6px}.st b{min-width:36px;text-align:center;font-size:20px}.st button{width:42px;height:42px;border-radius:12px;border:1px solid var(--bd);background:var(--bg);display:flex;align-items:center;justify-content:center}
.fab{position:absolute;right:18px;bottom:calc(env(safe-area-inset-bottom,0px) + 74px);width:56px;height:56px;border-radius:50%;background:var(--ac);color:#fff;border:0;display:none;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.3);animation:pop .25s ease-out}
.fab:active{transform:scale(.92)}
#sh{position:absolute;inset:0;z-index:5;pointer-events:none}#sh>*{pointer-events:auto}
.bk{position:absolute;inset:0;background:rgba(0,0,0,.45);animation:fade .2s}
.pn{position:absolute;left:0;right:0;bottom:0;background:var(--card);border-radius:22px 22px 0 0;padding:18px 18px calc(env(safe-area-inset-bottom,0px) + 18px);max-height:85%;overflow:auto;animation:up .22s ease-out;transition:transform .18s ease-in,opacity .18s}
.pn h3{margin:0 0 6px;font-size:18px}
#sh.ns *{animation:none!important}
#sh.out *{animation:none!important}#sh.out{pointer-events:none}#sh.out .bk{opacity:0;transition:opacity .18s}#sh.out .pn{transform:translateY(100%)}
#toast{position:absolute;left:50%;top:calc(env(safe-area-inset-top,0px) + 14px);transform:translate(-50%,-90px);background:#222;color:#fff;padding:10px 18px;border-radius:99px;font-size:14px;z-index:9;transition:transform .25s;white-space:nowrap}#toast.on{transform:translate(-50%,0)}
.wrap.in>*{animation:rise .32s ease-out both}
.wrap.in>:nth-child(n+2){animation-delay:.04s}.wrap.in>:nth-child(n+4){animation-delay:.08s}.wrap.in>:nth-child(n+7){animation-delay:.12s}.wrap.in>:nth-child(n+10){animation-delay:.16s}
@keyframes up{from{transform:translateY(100%)}}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{transform:scale(.4);opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}

/* ---------- Login ---------- */
body.lg{align-items:center;padding:20px}
.lgc{width:100%;max-width:380px;background:var(--card);border:1px solid var(--bd);border-radius:24px;padding:28px 24px;animation:rise .4s ease-out}
.lgc h1{margin:4px 0 2px;font-size:26px;letter-spacing:-.3px}.lgc p{margin:0 0 8px}
.logo.big{font-size:52px;animation:pop .4s ease-out}
.err{background:var(--wr);color:var(--bad);border-radius:12px;padding:10px 12px;font-size:14px;margin-top:10px}

/* ---------- Desktop ---------- */
@media(max-width:819px){.visit #tabs{display:none}}
@media(min-width:820px){
  body{display:block}
  #app{max-width:none;display:grid;grid-template-columns:240px 1fr;grid-template-rows:auto 1fr auto}
  #tabs{grid-area:1/1/4/2;flex-direction:column;border-top:0;border-right:1px solid var(--bd);padding:24px 14px;gap:4px}
  #tabs::before{content:"🍘 Xiao Xiao";font-size:20px;font-weight:700;padding:4px 12px 20px}
  #tabs button{flex:none;flex-direction:row;font-size:15px;gap:12px;padding:12px 14px;border-radius:12px;text-align:left}
  #tabs button:hover{background:var(--bg)}#tabs button.on{background:var(--acs)}
  #tabs .lo{display:flex;margin-top:auto}
  #top{grid-area:1/2;padding:28px 40px 8px}#top .logo{display:none}#top h1{font-size:28px}
  #main{grid-area:2/2;padding:8px 40px 40px}
  #bar{grid-area:3/2;padding:14px 40px}
  .wrap{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;align-content:start}
  .wrap>*{grid-column:1/-1;margin:0}
  .wrap>h2{margin:10px 2px 0}
  .wrap>.card:not(.full){grid-column:auto}
  .wrap>.btn{width:auto;min-width:260px;justify-self:start}
  .qa{max-width:560px}
  .card.tap:hover,.qb:hover{border-color:var(--ac)}
  .fab{right:40px;bottom:40px}
  .pn{left:50%;right:auto;top:50%;bottom:auto;width:440px;max-width:92%;border-radius:22px;transform:translate(-50%,-50%);animation:dpop .2s ease-out}
  #sh.out .pn{transform:translate(-50%,-46%) scale(.97);opacity:0}
  #toast{top:20px}
}
@keyframes dpop{from{opacity:0;transform:translate(-50%,-46%) scale(.97)}}