/* 一呼百应 H5 — 与原型同一套视觉语言：信息行、奶油底、红 accent */
:root{
  --bg:#f4f2ee; --card:#fff; --ink:#1f1c19; --ink2:#6b635a; --ink3:#9c948a;
  --line:#e6e1d9; --accent:#c8452f; --accent-soft:#fdf1ee; --green:#3f8f5f;
  --green-soft:#eef4ee; --r:14px; --shadow:0 1px 3px rgba(31,28,25,.06),0 8px 24px -12px rgba(31,28,25,.12);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:#dedad3; color:var(--ink); line-height:1.5;
}
#app{max-width:480px;margin:0 auto;min-height:100vh;background:var(--bg);position:relative;box-shadow:0 0 40px rgba(0,0,0,.18)}
.booting{padding:80px 0;text-align:center;color:var(--ink3);font-size:14px}
.hidden{display:none!important}

/* 顶栏 */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 4px}
.loc{font-size:14px;font-weight:700}
.loc small{color:var(--ink3);font-weight:400;margin-left:4px;font-size:11px}
.rolelink{font-size:12px;color:var(--ink2)}
.rolelink b{color:var(--accent)}

/* 喊一嗓子 */
.shout{width:calc(100% - 36px);margin:12px 18px 0;border:none;cursor:pointer;
  background:linear-gradient(158deg,#d9533a,#b8381f);color:#fff;border-radius:var(--r);
  padding:22px 20px;text-align:left;box-shadow:0 10px 28px -8px rgba(184,56,31,.55);
  position:relative;overflow:hidden}
.shout:active{transform:scale(.985)}
.shout::after{content:"";position:absolute;right:-30px;top:50%;transform:translateY(-50%);
  width:140px;height:140px;border-radius:50%;border:1.5px solid rgba(255,255,255,.18);
  box-shadow:0 0 0 26px rgba(255,255,255,.07)}
.shout .t{font-size:22px;font-weight:800;letter-spacing:3px}
.shout .d{font-size:12px;opacity:.88;margin-top:5px}

/* 通用卡片 */
.card{background:var(--card);border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--shadow);
  margin:10px 18px 0;padding:14px 15px}
.card h4{font-size:13.5px;margin-bottom:8px}
.chip{display:inline-block;font-size:11px;padding:3px 9px;border-radius:20px;background:#f2efe9;color:var(--ink2);margin:0 6px 6px 0}
.chip.on{background:var(--accent-soft);color:var(--accent);font-weight:700}
.chip.g{background:var(--green-soft);color:var(--green);font-weight:700}
.btn{border:none;border-radius:9px;padding:9px 16px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;background:var(--ink);color:#fff}
.btn.pri{background:var(--accent)}
.btn.ghost{background:var(--card);border:1px solid var(--line);color:var(--ink)}
.btn.blk{width:100%;padding:13px;font-size:14px}
.btn:disabled{opacity:.5}
.link{color:var(--accent);font-weight:700;font-size:12px;cursor:pointer}

/* 首页三段标题 */
.sechead{display:flex;justify-content:space-between;align-items:baseline;padding:20px 18px 6px}
.sechead b{font-size:15.5px}
.sechead span{font-size:11px;color:var(--ink3)}

/* 动静条目 */
.fitem{background:var(--card);border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--shadow);
  margin:8px 18px 0;padding:12px 14px;display:flex;gap:11px;align-items:flex-start}
.fava{width:34px;height:34px;border-radius:10px;flex:0 0 34px;display:flex;align-items:center;justify-content:center;font-size:16px;background:#f2efe9}
.fava.shop{background:var(--accent-soft)} .fava.deal{background:#f0eef7}
.fbody{flex:1;min-width:0}
.fname{font-size:12.5px;font-weight:700;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.ftext{font-size:12.5px;color:var(--ink2);margin-top:2px}
.fmeta{font-size:11px;color:var(--ink3);margin-top:4px;display:flex;gap:10px}

/* 进度 */
.prog{display:flex;gap:6px;margin:8px 0 0;flex-wrap:wrap}
.prog span{font-size:11px;padding:3px 8px;border-radius:20px;background:#f2efe9;color:var(--ink2)}
.prog span.on{background:var(--accent-soft);color:var(--accent);font-weight:700}

/* 连接器 */
.conns{display:flex;gap:9px;margin:12px 18px 0}
.conn{flex:1;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px 6px;text-align:center;box-shadow:var(--shadow)}
.conn .ic{font-size:19px;display:block}
.conn .nm{font-size:11.5px;font-weight:700;margin-top:4px}
.conn .ds{font-size:9.5px;color:var(--ink3)}

/* 搜索 */
.ruler{margin:12px 18px 0;position:relative}
.ruler input{width:100%;border:1px solid var(--line);background:var(--card);border-radius:12px;padding:13px 14px 13px 40px;font-size:13.5px;outline:none;font-family:inherit;box-shadow:var(--shadow)}
.ruler svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;fill:var(--ink3)}
.hotwords{padding:9px 18px 0;display:flex;flex-wrap:wrap;gap:7px}
.hw{font-size:11px;padding:4.5px 11px;background:#eae6df;color:var(--ink2);border-radius:20px;cursor:pointer}

/* 比较台行 */
.row{background:var(--card);border-radius:12px;border:1px solid var(--line);margin:9px 18px 0;
  padding:13px 14px;box-shadow:var(--shadow);display:flex;align-items:center;gap:12px;position:relative;overflow:hidden}
.row.best{border-color:#e8b9ac}
.row.best::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3.5px;background:var(--accent)}
.bestbadge{position:absolute;right:0;top:0;font-size:9.5px;font-weight:800;background:var(--accent);color:#fff;padding:2.5px 9px;border-radius:0 11px 0 10px}
.row.dim{opacity:.6}
.shopcol{flex:1;min-width:0}
.shopnm{font-size:14px;font-weight:800;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.repeat{font-size:10px;font-weight:700;color:var(--green);background:var(--green-soft);padding:1.5px 6px;border-radius:5px}
.shopmeta{font-size:11.5px;color:var(--ink3);margin-top:4px;display:flex;gap:8px;flex-wrap:wrap}
.open{color:var(--green);font-weight:700} .closed{color:var(--ink3);font-weight:700}
.pricecol{text-align:right;flex:0 0 auto}
.price{font-size:18px;font-weight:800}
.price small{font-size:11px;color:var(--ink3);font-weight:600}
.reply{font-size:10.5px;color:var(--ink3);margin-top:2px}
.rowact{flex:0 0 auto}
.mini{font-size:11.5px;font-weight:700;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:8px;padding:7px 12px;cursor:pointer;font-family:inherit}
.mini.pri{background:var(--accent);border-color:var(--accent);color:#fff}
.sortbar{display:flex;gap:7px;padding:10px 18px 0;flex-wrap:wrap}
.sort{font-size:11.5px;font-weight:700;padding:5px 12px;border-radius:20px;background:var(--card);border:1px solid var(--line);color:var(--ink2);cursor:pointer;font-family:inherit}
.sort.on{background:var(--ink);border-color:var(--ink);color:#fff}
.shoutbar{margin:12px 18px 0;width:calc(100% - 36px);border:none;cursor:pointer;background:var(--accent-soft);
  border:1.5px dashed #e0b3a6;color:var(--accent);font-family:inherit;font-size:13px;font-weight:800;padding:14px;border-radius:12px}
.sealed{margin:10px 18px 0;font-size:10.5px;color:var(--ink3);text-align:center}
.sealed b{color:var(--ink2)}

/* 表单 */
.form{padding:4px 0}
.form label{display:block;font-size:12px;font-weight:700;color:var(--ink2);margin:14px 18px 6px}
.form input,.form textarea,.form select{width:calc(100% - 36px);margin:0 18px;border:1px solid var(--line);background:var(--card);
  border-radius:11px;padding:12px 14px;font-size:14px;font-family:inherit;outline:none}
.form textarea{resize:none;height:80px}
.optchips{display:flex;gap:7px;margin:0 18px;flex-wrap:wrap}
.ochip{font-size:12px;font-weight:700;padding:7px 14px;border-radius:20px;background:var(--card);border:1px solid var(--line);cursor:pointer}
.ochip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.formbtns{padding:18px}

/* 报价行 */
.qprice{font-size:18px;font-weight:800;color:var(--accent)}
.steps{display:flex;margin:10px 0 4px}
.step{flex:1;text-align:center;position:relative;font-size:10.5px;color:var(--ink3)}
.step::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--line);display:block;margin:0 auto 5px}
.step.done{color:var(--green)} .step.done::before{background:var(--green)}
.step.cur{color:var(--accent);font-weight:700} .step.cur::before{background:var(--accent)}

/* 聊天 */
.chat{display:flex;flex-direction:column;gap:8px;padding:6px 0}
.msg{max-width:78%;padding:8px 12px;border-radius:12px;font-size:13px;background:#f2efe9;align-self:flex-start}
.msg.mine{background:var(--accent);color:#fff;align-self:flex-end}
.msg .who{font-size:9.5px;opacity:.7;margin-bottom:2px}
.chatinput{display:flex;gap:8px;padding:10px 18px}
.chatinput input{flex:1;border:1px solid var(--line);border-radius:20px;padding:9px 14px;font-size:13px;outline:none}

/* 底部tab */
#tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;
  background:rgba(252,251,249,.97);backdrop-filter:blur(14px);border-top:1px solid var(--line);
  display:flex;padding:8px 4px calc(8px + env(safe-area-inset-bottom));z-index:50}
#tabbar button{flex:1;background:none;border:none;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--ink3);cursor:pointer;font-family:inherit}
#tabbar button svg{width:21px;height:21px;fill:currentColor}
#tabbar button span{font-size:10px;font-weight:600}
#tabbar button.on{color:var(--accent)}
#app{padding-bottom:76px}

/* toast */
#toast{position:fixed;bottom:110px;left:50%;transform:translateX(-50%);max-width:80%;background:rgba(31,28,25,.92);
  color:#fff;padding:10px 18px;border-radius:22px;font-size:13px;z-index:99;opacity:0;pointer-events:none;transition:.25s}
#toast.show{opacity:1}

/* 登录页 */
.login-hero{text-align:center;padding:64px 30px 10px}
.login-hero .logo{font-size:40px}
.login-hero h1{font-size:24px;letter-spacing:6px;margin-top:10px}
.login-hero p{font-size:12.5px;color:var(--ink2);margin-top:8px}
.demologins{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:16px 18px}
.demologins button{border:1px solid var(--line);background:var(--card);border-radius:10px;padding:10px 8px;font-size:12px;font-family:inherit;cursor:pointer}
.demologins button b{display:block;font-size:12.5px}
.demologins button span{color:var(--ink3);font-size:10px}
.empty{padding:44px 18px;text-align:center;color:var(--ink3);font-size:13px}
.mine-row{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.mine-row:last-child{border-bottom:none}
.switch{width:42px;height:24px;border-radius:20px;background:#ddd6cc;position:relative;cursor:pointer;transition:.2s;flex:0 0 42px}
.switch.on{background:var(--green)}
.switch i{position:absolute;top:2.5px;left:3px;width:19px;height:19px;border-radius:50%;background:#fff;transition:.2s;font-style:normal}
.switch.on i{left:20px}
.status-pill{font-size:11px;font-weight:700;padding:2px 8px;border-radius:6px;background:#f2efe9;color:var(--ink2)}
.status-pill.paid{background:#fff7e6;color:#c98a1e}
.status-pill.paid.delivered{background:#e8f0fb;color:#3a6ea8}
.status-pill.completed{background:var(--green-soft);color:var(--green)}
.status-pill.cancelled{background:#f7e8e8;color:#a85}

/* ---------- v0.2 ---------- */
/* 首页快捷三连 */
.quickrow{display:flex;gap:9px;margin:10px 18px 0}
.qbtn{flex:1;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:11px 6px;
  box-shadow:var(--shadow);font-family:inherit;font-size:11.5px;font-weight:700;color:var(--ink);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:3px}
.qbtn .ic{font-size:17px}
.qbtn:active{transform:scale(.97)}

/* 分段控件（消息页） */
.segbar{display:flex;gap:4px;margin:12px 18px 0;background:#eae6df;border-radius:11px;padding:3px}
.seg{flex:1;border:none;background:none;font-family:inherit;font-size:12.5px;font-weight:700;color:var(--ink2);
  padding:8px 0;border-radius:9px;cursor:pointer;position:relative}
.seg.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(31,28,25,.1)}
.segdot{display:inline-block;min-width:16px;height:16px;line-height:16px;padding:0 4px;border-radius:9px;
  background:var(--accent);color:#fff;font-size:10px;font-weight:800;margin-left:3px;vertical-align:1px}

/* 未读通知 */
.fitem.unread{background:var(--accent-soft);border-color:#eccdc4}
.fitem.unread::before{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-left:-16px;margin-top:14px}
.fitem{position:relative}

/* tabbar 角标 */
.tabbadge{position:absolute;top:2px;left:calc(50% + 5px);min-width:16px;height:16px;line-height:16px;padding:0 4px;
  border-radius:9px;background:var(--accent);color:#fff;font-size:9.5px;font-weight:800;font-style:normal;
  box-shadow:0 0 0 2px rgba(252,251,249,.97)}
#tabbar button{position:relative}

/* 骑手卡片 */
.rowpick{display:flex;gap:7px;margin-top:9px}