/* ============================================================
   司厨 Sìchú · App 屏幕设计稿 — 共享底座
   mockups/shared/mockup-base.css
   与落地页同源:深色焦糖壳 · 三段式字体 · 会呼吸的墨声波
   ============================================================ */
:root{
  --espresso:#161210; --espresso-2:#1d1714;
  --mocha:#241D19; --mocha-2:#2C2420; --mocha-3:#342b25;
  --card:#1f1916; --card-2:#271f1b;
  --ivory:#F4EDE3; --oat:#B8AFA3; --oat-2:#8c847a;
  --caramel:#D97757; --caramel-soft:#b86248;
  --flame:#E89B5A; --honey:#C8842B;
  --sage:#788C5D; --slate:#3B4252; --brick:#A8321E;
  --line:rgba(244,237,227,.10); --line-2:rgba(244,237,227,.06);
  --grad-cta:linear-gradient(135deg,#D97757 0%,#E89B5A 100%);
  --ease:cubic-bezier(.16,1,.3,1);
  --font-display:"Source Serif 4","Noto Serif SC","Songti SC",serif;
  --font-sans:"Inter","Noto Sans SC",system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SF Mono","Noto Sans SC",monospace;
  --font-seal:"ZCOOL XiaoWei","Noto Serif SC",serif;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{
  background:radial-gradient(circle at 50% 0%,#1d1714,#0f0c0a 70%);color:var(--ivory);
  font-family:var(--font-sans);font-weight:400;font-size:16px;line-height:1.7;
  letter-spacing:0;text-autospace:normal;font-feature-settings:"palt" 1,"chws" 1;
  line-break:strict;word-break:keep-all;overflow-wrap:anywhere;-webkit-font-smoothing:antialiased;
  min-height:100vh;
}
.mono{font-family:var(--font-mono);letter-spacing:.04em}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--caramel);color:#1a130e}

/* ---------- seal 印章 ---------- */
.seal{font-family:var(--font-seal);display:inline-grid;place-items:center;
  background:var(--caramel);color:#1a130e;border-radius:7px;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.14),0 6px 20px -8px rgba(217,119,87,.7);transform:rotate(-4deg)}
.seal.sm{width:30px;height:30px;font-size:18px;border-radius:6px}
.seal.lg{width:64px;height:64px;font-size:42px;border-radius:11px}

/* ---------- mockup page layout ---------- */
.page{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:48px 24px 80px}
.page-head{max-width:560px;text-align:center;margin-bottom:40px}
.page-head .crumb{display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.1em;color:var(--oat)}
.page-head .crumb a{color:var(--caramel)}
.page-head .tag{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--caramel);margin-bottom:12px}
.page-head h1{font-family:var(--font-display);font-weight:700;font-size:clamp(1.6rem,3.6vw,2.2rem);line-height:1.2;margin:0 0 12px;letter-spacing:-.01em}
.page-head p{color:var(--oat);margin:0 auto;font-size:.96rem;line-height:1.8;max-width:46ch}
.page-head .sig{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-family:var(--font-mono);font-size:.72rem;color:var(--oat-2);letter-spacing:.08em}

/* ---------- iPhone device frame ---------- */
.device{position:relative;width:340px;background:#0a0807;border-radius:48px;padding:13px;
  border:1px solid rgba(244,237,227,.08);
  box-shadow:0 60px 120px -40px rgba(0,0,0,.85),0 0 0 2px rgba(0,0,0,.5),inset 0 0 0 2px rgba(40,34,30,.6)}
.device::before{content:"";position:absolute;inset:-1px;border-radius:48px;padding:1px;
  background:linear-gradient(150deg,rgba(244,237,227,.16),transparent 40%,transparent 60%,rgba(244,237,227,.06));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.screen{position:relative;width:100%;aspect-ratio:9/19.5;border-radius:36px;overflow:hidden;
  background:linear-gradient(170deg,#1f1916,#14100e);display:flex;flex-direction:column}
.island{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:100px;height:28px;background:#0a0807;border-radius:16px;z-index:30}
.statusbar{display:flex;justify-content:space-between;align-items:center;padding:16px 26px 0;font-family:var(--font-mono);font-size:.7rem;color:var(--ivory);position:relative;z-index:5}
.statusbar .right{display:flex;gap:5px;align-items:center;font-size:.66rem}
.screen-body{flex:1;display:flex;flex-direction:column;overflow:hidden;padding:0}

/* common app chrome */
.appbar{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 12px}
.appbar .back{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);font-size:.9rem;color:var(--oat)}
.appbar .title{font-family:var(--font-display);font-size:1.02rem}
.appbar .act{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);font-size:.86rem;color:var(--oat)}
.scroll{flex:1;overflow:hidden;padding:0 20px}

/* chips */
.chips{display:flex;gap:8px;overflow:hidden;padding:2px 0}
.chip{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;color:var(--oat);padding:.5em .95em;border-radius:999px;border:1px solid var(--line);white-space:nowrap}
.chip.active{color:#1a130e;background:var(--caramel);border-color:var(--caramel)}

/* cards */
.card{background:var(--card);border:1px solid var(--line-2);border-radius:14px;padding:16px}
.card-2{background:var(--card-2);border:1px solid var(--line-2);border-radius:12px;padding:14px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-weight:600;font-size:.9rem;
  padding:.85em 1.4em;border-radius:10px;transition:all .4s var(--ease);border:0;cursor:pointer}
.btn-primary{background:var(--grad-cta);color:#1a130e;box-shadow:0 8px 22px -8px rgba(217,119,87,.65)}
.btn-ghost{background:rgba(244,237,227,.05);color:var(--ivory);border:1px solid var(--line)}
.btn-block{width:100%}

/* list rows */
.row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-2)}
.row:last-child{border-bottom:0}
.dot{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--oat-2);flex:0 0 auto;display:grid;place-items:center;font-size:.6rem;color:transparent}
.dot.checked{background:var(--sage);border-color:var(--sage);color:#0f0c0a}
.dot.checked::after{content:"✓";color:#0f0c0a;font-size:.7rem;font-weight:700}

/* step progress */
.prog{height:4px;border-radius:2px;background:rgba(244,237,227,.08);overflow:hidden}
.prog i{display:block;height:100%;background:var(--grad-cta);border-radius:2px}

/* wave canvas */
.wave{width:100%;display:block}
.state-pill{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;padding:.3em .7em;border-radius:999px;border:1px solid var(--line);color:var(--oat);display:inline-flex;align-items:center;gap:.4em}
.state-pill[data-s="idle"]{color:var(--oat)}
.state-pill[data-s="speaking"]{color:var(--caramel);border-color:rgba(217,119,87,.4);background:rgba(217,119,87,.08)}
.state-pill[data-s="listening"]{color:var(--sage);border-color:rgba(120,140,93,.4);background:rgba(120,140,93,.08)}
.state-pill[data-s="interrupted"]{color:var(--flame);border-color:rgba(232,155,90,.5);background:rgba(232,155,90,.1)}

/* chat bubbles */
.bubble{max-width:82%;padding:11px 14px;border-radius:14px;font-size:.82rem;line-height:1.6}
.bubble.user{align-self:flex-end;background:var(--grad-cta);color:#1a130e;border-bottom-right-radius:5px}
.bubble.ai{align-self:flex-start;background:var(--card-2);border:1px solid var(--line);border-bottom-left-radius:5px;color:var(--ivory)}

/* tab bar */
.tabbar{display:flex;justify-content:space-around;padding:12px 16px 20px;border-top:1px solid var(--line-2);background:rgba(15,12,10,.6)}
.tabbar .tb{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:.58rem;color:var(--oat-2);font-family:var(--font-mono);letter-spacing:.04em}
.tabbar .tb.on{color:var(--caramel)}

/* helpers */
.muted{color:var(--oat)}
.tiny{font-size:.66rem}
.flex{display:flex}
.between{justify-content:space-between}
.center{align-items:center}
.gap{gap:10px}
.mt{margin-top:14px}
.mb{margin-bottom:14px}

@media(max-width:420px){ .device{width:300px} .page{padding:32px 16px 60px} }
@media(prefers-reduced-motion:reduce){ *{animation-duration:.001ms!important;transition-duration:.001ms!important} .wave{opacity:.8} }