:root{
  /* === 暖白 + 朱红 + 暖金 配色（A 方案）=== */
  --bg:#FAF7F2;
  --bg-2:#F2EBDB;
  --card:#FFFFFF;
  --card-2:#F7F2E8;
  --line:#E8E0D0;
  --line-2:#EFE8DA;
  --ink:#2A2522;
  --ink-2:#6B5F52;
  --muted:#A89B8A;
  --gold:#C8932F;
  --gold-l:#E8B84B;
  --gold-d:#8B6914;
  --red:#C8102E;
  --red-d:#8B0A1F;
  --shadow:0 8px 24px rgba(74,42,20,.12);
  --radius:16px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:"Segoe UI","Roboto","Helvetica Neue",Arial,sans-serif;
  -webkit-text-size-adjust:100%;
  padding-bottom:120px;
}
img{display:block;max-width:100%}
button{font-family:inherit}
.muted{color:var(--ink-2)}
::selection{background:var(--gold);color:#1a0a0a}

/* ============ HERO ============ */
.hero{
  position:relative; overflow:visible;
  padding:22px 22px 18px;
  background:linear-gradient(135deg,#C8102E 0%,#E63946 50%,#A50E2C 100%);
  border-bottom:2px solid var(--gold);
  box-shadow:0 4px 20px rgba(200,16,46,.15);
}
.hero-bg{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse at 80% 0%, rgba(255,220,160,.22), transparent 50%),
    radial-gradient(ellipse at 0% 100%, rgba(139,10,31,.18), transparent 60%);
}
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(200,147,47,.08) 1px, transparent 1px);
  background-size:3px 3px; opacity:.7;
}
.hero-top{position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:nowrap}
.brand{display:flex; align-items:center; gap:12px; min-width:0; flex:1 1 auto; overflow:hidden}
.seal{
  flex:0 0 auto; width:50px; height:50px; border-radius:8px;
  background:linear-gradient(135deg,#C8102E,#7A0918);
  display:grid; place-items:center; position:relative;
  box-shadow:0 6px 20px rgba(200,16,46,.45), inset 0 0 0 2px rgba(232,184,75,.5);
  overflow:hidden;
}
@media (min-width:720px){
  .seal{width:64px; height:64px}
}
.seal-y{font:800 28px/1 "STKaiti","KaiTi","SimSun",serif; color:#FFE9A8; letter-spacing:-1px}
@media (min-width:720px){.seal-y{font-size:36px}}
.seal-j{position:absolute; bottom:3px; right:4px; font:800 8px/1 "Arial"; color:#FFE9A8; letter-spacing:1px}
.brand-text{min-width:0; overflow:hidden}
.brand-name{
  margin:0; font:700 22px/1.1 "Georgia","Times New Roman",serif;
  color:var(--ink); letter-spacing:.5px; text-shadow:0 2px 12px rgba(200,147,47,.14);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
@media (min-width:720px){
  .brand-name{font-size:30px; letter-spacing:1px}
}
.brand-sub{font:600 11px/1.2 "PingFang SC","Microsoft YaHei",sans-serif; color:#E8B84B; margin-top:3px; letter-spacing:.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
@media (min-width:720px){.brand-sub{font-size:12px; margin-top:4px; letter-spacing:.5px}}
@media (max-width:420px){.brand-sub{display:none}}

.hero-right{position:relative; display:flex; align-items:center; gap:8px; flex:0 0 auto}

/* ===== 站点 LOGO 容器 ===== */
.site-logo{display:inline-flex; align-items:center; justify-content:center; max-width:160px; max-height:60px; overflow:hidden; flex:0 0 auto}
.site-logo img{max-width:100%; max-height:60px; width:auto; height:auto; display:block; object-fit:contain}
@media (max-width:420px){
  .site-logo{max-width:120px; max-height:48px}
  .site-logo img{max-height:48px}
}

/* ===== 右上角 汉堡导航按钮 ===== */
.nav-btn{
  width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(135deg,rgba(232,184,75,.18),rgba(200,16,46,.10));
  border:1px solid rgba(232,184,75,.45);
  color:var(--gold-l); cursor:pointer; transition:.2s;
  outline:none; padding:0;
}
.nav-btn:hover{background:linear-gradient(135deg,rgba(232,184,75,.28),rgba(200,16,46,.16)); border-color:var(--gold); transform:translateY(-1px)}
.nav-btn[aria-expanded="true"]{background:linear-gradient(135deg,var(--gold),#B8860B); color:#FAF7F2; border-color:transparent}
.nav-bars{display:inline-flex; flex-direction:column; gap:4px; padding:3px 0}
.nav-bars i{display:block; width:16px; height:2px; background:currentColor; border-radius:1px; transition:.2s}
.nav-btn[aria-expanded="true"] .nav-bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-btn[aria-expanded="true"] .nav-bars i:nth-child(2){opacity:0}
.nav-btn[aria-expanded="true"] .nav-bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ===== 弹出菜单 ===== */
.nav-menu{
  position:absolute; top:calc(100% + 10px); right:0;
  width:min(320px, calc(100vw - 24px));
  background:linear-gradient(180deg,#FFFFFF,#F7F2E8);
  border:1px solid var(--line); border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(232,184,75,.1);
  padding:8px 0; z-index:80; animation:navIn .15s ease;
  max-height:calc(100vh - 100px); overflow-y:auto;
}
@keyframes navIn{from{opacity:0; transform:translateY(-6px)}to{opacity:1; transform:none}}
.nav-menu-head{padding:12px 16px; border-bottom:1px solid var(--line); margin-bottom:6px}
.nav-menu-name{font:700 16px/1.2 "Microsoft YaHei",serif; color:var(--gold-l)}
.nav-menu-sub{font:500 11px/1.3 inherit; color:var(--ink-2); margin-top:3px}
.nav-menu-section{padding:4px 0}
.nav-menu-cap{font:700 11px/1 inherit; color:var(--ink-2); padding:8px 16px 4px; letter-spacing:1.5px; text-transform:uppercase}
.nav-menu-item{
  display:flex; align-items:center; gap:12px;
  padding:11px 16px; color:var(--ink); text-decoration:none; cursor:pointer;
  transition:.15s; border-left:3px solid transparent;
}
.nav-menu-item:hover{background:rgba(232,184,75,.08); color:var(--gold-l); border-left-color:var(--gold)}
.nav-menu-ico{font-size:18px; width:24px; text-align:center; flex:0 0 auto}
.nav-menu-label{flex:1 1 auto; font:600 14px/1 inherit; min-width:0}
.nav-menu-arrow{font-size:12px; color:var(--ink-2)}
.nav-menu-item:hover .nav-menu-arrow{color:var(--gold-l)}
.nav-menu-empty{padding:8px 16px 12px; color:var(--ink-2); font-size:13px; font-style:italic}
.nav-menu-foot{border-top:1px solid var(--line); margin-top:6px}

.avatar{
  width:38px; height:38px; border-radius:50%; flex:0 0 auto;
  background:linear-gradient(135deg,#E8B84B,#A87A2E);
  color:var(--red-d); display:grid; place-items:center; font:800 18px Georgia,serif;
  box-shadow:0 4px 14px rgba(232,184,75,.4), inset 0 0 0 2px rgba(255,255,255,.2);
}
@media (min-width:720px){
  .avatar{width:42px; height:42px; font-size:20px}
}

.hero-pill{text-align:center; margin-top:12px; position:relative}
.hero-pill span{display:inline-block; background:rgba(200,147,47,.14); border:1px solid rgba(232,184,75,.35); padding:6px 14px; border-radius:999px; font:600 11px/1 inherit; color:#E8B84B; backdrop-filter:blur(4px)}
@media (min-width:720px){.hero-pill span{font-size:12px; padding:7px 16px}}
.hero-cta{position:relative; text-align:center; margin:14px 0 10px}
.menu-btn{
  border:0; background:transparent; color:#E8B84B;
  font:700 14px/1 inherit; letter-spacing:4px; cursor:pointer;
  padding:6px 18px; transition:.2s;
}
.menu-btn:hover{color:#FFE9A8; text-shadow:0 0 12px rgba(232,184,75,.6)}

.search-wrap{
  position:relative; margin:8px 0 6px;
}
.search-ico{position:absolute; left:14px; top:50%; transform:translateY(-50%); font-size:16px; opacity:.7}
#search{
  width:100%; padding:13px 16px 13px 40px;
  background:rgba(0,0,0,.45); border:1px solid rgba(232,184,75,.3);
  border-radius:999px; color:var(--ink);
  font:500 14px/1 inherit; outline:none; transition:.2s;
  backdrop-filter:blur(4px);
}
#search::placeholder{color:var(--ink-2)}
#search:focus{border-color:var(--gold); box-shadow:0 0 0 3px rgba(232,184,75,.15)}

/* ============ 分类 ============ */
.cats{
  display:flex; gap:10px; padding:14px 18px;
  overflow-x:auto; scrollbar-width:none;
  background:linear-gradient(180deg,#FAF7F2,#F2EBDB);
  border-bottom:1px solid var(--line-2);
}
.cats::-webkit-scrollbar{display:none}
.cat{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:6px;
  padding:9px 16px; border-radius:999px;
  background:var(--card); border:1px solid var(--line);
  color:var(--ink-2); font:600 13px/1 inherit; cursor:pointer;
  transition:.2s; white-space:nowrap;
}
.cat .ico{font-size:15px}
.cat:hover{border-color:var(--gold); color:var(--ink)}
.cat.active{
  background:linear-gradient(135deg,var(--gold),var(--gold-d));
  color:#FAF7F2; border-color:var(--gold);
  box-shadow:0 4px 14px rgba(232,184,75,.35); font-weight:700;
}

/* ============ 区块标题 ============ */
.sec-title{
  margin:18px 4px 12px; font:400 22px/1 "Georgia",serif; color:var(--gold-l);
  display:flex; align-items:center; gap:10px;
}
.sec-title::before, .sec-title::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg,transparent,var(--line),transparent);
}
.sec-title span{white-space:nowrap; letter-spacing:2px}

/* ============ 菜品网格 ============ */
.menu{padding:6px 18px 14px}
.grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.loading{padding:40px; text-align:center; color:var(--ink-2)}

/* 手机：强制两列 + 紧凑显示 */
@media (max-width:560px){
  .grid{grid-template-columns:repeat(2,1fr); gap:10px}
  .dish-img .emoji{font-size:54px}
  .dish-name{font-size:13px; min-height:34px}
  .dish-price{font-size:16px}
  .add-btn{width:34px; height:34px; font-size:20px}
  .dish-info{padding:8px 10px 10px; gap:4px}
  .no{font-size:10px; padding:2px 5px}
  .hot-scroll .dish-card{flex:0 0 140px}
  .brand-name{font-size:18px}
  .seal{width:44px; height:44px}
  .seal-y{font-size:24px}
}

/* 热门横向滚动 */
.hot-scroll{display:flex; gap:14px; overflow-x:auto; padding:4px 0 10px; scrollbar-width:none; scroll-snap-type:x mandatory; margin-bottom:6px}
.hot-scroll::-webkit-scrollbar{display:none}
.hot-scroll .dish-card{flex:0 0 158px; scroll-snap-align:start}
.hot-tag{
  position:absolute; top:8px; right:8px; z-index:2;
  background:linear-gradient(135deg,var(--red),var(--red-d)); color:#FFE9A8;
  font:800 10px/1 "Georgia",serif; padding:4px 7px; border-radius:6px;
  letter-spacing:1px; box-shadow:0 2px 6px rgba(200,16,46,.5);
}

.dish-card{
  position:relative; background:linear-gradient(160deg,var(--card),var(--card-2));
  border:1px solid var(--line-2); border-radius:var(--radius);
  overflow:hidden; box-shadow:0 6px 20px rgba(200,147,47,.10);
  display:flex; flex-direction:column; transition:.2s;
}
.dish-card:hover{transform:translateY(-2px); border-color:rgba(232,184,75,.35); box-shadow:0 10px 28px rgba(0,0,0,.5)}
.dish-card:active{transform:scale(.98)}

.dish-img{
  aspect-ratio:1/1; position:relative; overflow:hidden;
  display:grid; place-items:center;
  background:radial-gradient(circle at 50% 40%, #2A1410 0%, #150808 80%);
}
.dish-img .emoji{font-size:72px; filter:drop-shadow(0 4px 14px rgba(0,0,0,.5)); transition:transform .3s}
.dish-card:hover .dish-img .emoji{transform:scale(1.08)}
.dish-img::before{
  content:""; position:absolute; inset:-20%;
  background:radial-gradient(circle, rgba(232,184,75,.15) 0%, transparent 50%);
  pointer-events:none;
}
.dish-img img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .3s;
}
.dish-img.has-img .emoji{opacity:0}
.dish-img.has-img img{opacity:1}
.dish-img.has-img::before{opacity:.3}
.no{
  position:absolute; top:8px; left:8px;
  background:rgba(74,42,20,.75); color:var(--gold-l);
  font:700 11px/1 "Georgia",serif; padding:4px 8px; border-radius:6px;
  border:1px solid rgba(232,184,75,.3); letter-spacing:.5px;
  backdrop-filter:blur(4px); z-index:2;
}
.dish-info{padding:12px 14px 16px; display:flex; flex-direction:column; gap:6px; flex:1}
.dish-name{
  font:600 15px/1.3 inherit; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:40px;
}
.dish-cat{font:500 10px/1 inherit; color:var(--muted); letter-spacing:1px; text-transform:uppercase}
.dish-foot{display:flex; justify-content:space-between; align-items:center; margin-top:4px}
.dish-price{font:800 18px/1 var(--gold-l); text-shadow:0 1px 2px rgba(0,0,0,.5)}
.dish-weight{font:500 11px/1 var(--ink-2); margin-left:4px; letter-spacing:.3px}
.add-btn{
  width:42px; height:42px; border-radius:50%; border:0; cursor:pointer;
  background:linear-gradient(135deg,var(--red),var(--red-d)); color:#FFE9A8;
  font:800 22px/1 inherit; box-shadow:0 4px 12px rgba(200,16,46,.5);
  display:grid; place-items:center; transition:.15s;
}
.add-btn:hover{transform:scale(1.08); box-shadow:0 6px 16px rgba(200,16,46,.65)}
.add-btn.qty{background:linear-gradient(135deg,var(--gold-l),var(--gold-d)); color:#FAF7F2; box-shadow:0 4px 12px rgba(232,184,75,.5)}
.add-btn.qty::after{content:attr(data-qty); font-size:15px}

/* ============ 桌号条 ============ */
.table-strip{
  position:fixed; left:0; right:0; bottom:78px; z-index:35;
  display:flex; align-items:center; gap:10px; justify-content:center;
  padding:8px 18px; background:rgba(14,8,7,.92); backdrop-filter:blur(8px);
  border-top:1px solid var(--line-2);
}
.table-strip label{font:600 13px/1 inherit; color:var(--ink-2)}
.table-strip input{
  width:90px; padding:7px 10px; text-align:center;
  background:rgba(200,147,47,.08); border:1px solid var(--line);
  border-radius:8px; color:var(--gold-l); font:700 15px/1 inherit; outline:none;
}
.table-strip input:focus{border-color:var(--gold)}

/* ============ 购物车栏 ============ */
.cart-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:12px 18px;
  background:linear-gradient(180deg,rgba(20,10,10,.95),rgba(14,8,7,.98));
  border-top:1px solid var(--line);
  box-shadow:0 -8px 24px rgba(0,0,0,.5);
  backdrop-filter:blur(8px);
}
.cart-bar[hidden]{display:none}
.cart-info{
  display:flex; align-items:center; gap:12px;
  cursor:pointer; padding:4px 8px; margin:-4px -8px;
  border-radius:10px; transition:.15s;
  user-select:none;
}
.cart-info:hover{ background:rgba(232,184,75,.12); }
.cart-info:focus-visible{ outline:2px solid var(--gold); }
.cart-badge{
  min-width:26px; height:26px; padding:0 8px; border-radius:13px;
  background:linear-gradient(135deg,var(--red),var(--red-d)); color:#FFE9A8;
  font:800 14px/26px Georgia,serif; text-align:center;
  box-shadow:0 2px 8px rgba(200,16,46,.5);
}
.cart-total-wrap{ display:inline-flex; align-items:baseline; gap:6px; }
.cart-total-label{ font:700 13px/1 var(--gold); letter-spacing:.5px; }
.cart-total{
  font:800 22px/1 var(--gold-l); color:#FFD977;
  text-shadow:0 0 14px rgba(232,184,75,.55), 0 1px 2px rgba(0,0,0,.6);
}
.cart-info-arrow{ font:700 11px/1 var(--gold-l); opacity:.85; animation:cartArrowPulse 1.6s ease-in-out infinite; }
@keyframes cartArrowPulse{ 0%,100%{opacity:.55; transform:translateY(0)} 50%{opacity:1; transform:translateY(-2px)} }
.cart-btn{
  flex:0 0 auto; border:0; border-radius:999px;
  padding:13px 24px;
  background:linear-gradient(135deg,var(--gold-l),var(--gold-d));
  color:#FAF7F2; font:800 15px/1 inherit; cursor:pointer;
  box-shadow:0 4px 14px rgba(232,184,75,.4);
  transition:.15s;
}
.cart-btn:hover{transform:translateY(-1px); box-shadow:0 6px 18px rgba(232,184,75,.55)}

/* ============ 抽屉 ============ */
.sheet,.modal{position:fixed; inset:0; z-index:60}
/* timeSheet 是嵌套弹层, 必须高过 checkoutModal */
#timeSheet{z-index:80}
.sheet[hidden],.modal[hidden]{display:none}
.sheet-mask,.modal-mask{position:absolute; inset:0; background:rgba(74,42,20,.75)}
.sheet-panel{
  position:absolute; left:0; right:0; bottom:0;
  max-width:480px; margin:0 auto;          /* 居中 */
  max-height:88vh;
  background:linear-gradient(180deg,#FFFFFF,#F7F2E8);
  border-top:1px solid var(--line);
  border-radius:20px 20px 0 0; display:flex; flex-direction:column;
  animation:up .25s ease; color:var(--ink);
  box-shadow:0 -10px 40px rgba(200,147,47,.14);
  width:100%;
}
@keyframes up{from{transform:translateY(100%)}to{transform:translateY(0)}}
.sheet-head{display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid var(--line-2)}
.sheet-head h2{margin:0; font:600 18px/1 "Georgia",serif; color:var(--gold-l)}
.sheet-close{border:0; background:transparent; font-size:20px; cursor:pointer; color:var(--ink-2)}
.sheet-body{overflow-y:auto; padding:8px 20px; flex:1}
.cart-line{display:flex; gap:10px; padding:12px 0; border-bottom:1px dashed var(--line-2)}
.cart-line .name{flex:1; font:500 14px/1.3 inherit; color:var(--ink)}
.cart-line .qty-ctrl{display:flex; align-items:center; gap:8px}
.cart-line .qty-ctrl button{
  width:30px; height:30px; border-radius:8px;
  background:rgba(200,147,47,.08); border:1px solid var(--line);
  color:var(--gold-l); font:700 16px/1 inherit; cursor:pointer;
}
.cart-line .qty-ctrl button:hover{background:rgba(232,184,75,.15)}
.cart-line .qty-ctrl span{min-width:18px; text-align:center; font-weight:700}
.cart-line .sub{font:800 15px/1 var(--gold-l); min-width:72px; text-align:right}
.sheet-foot{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 20px; border-top:1px solid var(--line-2)}
.sheet-total{font:600 16px/1 inherit; color:var(--ink-2)}
.sheet-total b{font-size:19px; color:var(--gold-l)}

/* ============ modal ============ */
.modal-card{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(92vw,440px);
  background:linear-gradient(180deg,#FFFFFF,#F7F2E8);
  border:1px solid var(--line);
  border-radius:18px; padding:22px 22px 16px;
  box-shadow:0 20px 60px rgba(0,0,0,.6); animation:pop .2s ease;
  color:var(--ink);
}
@keyframes pop{from{transform:translate(-50%,-48%) scale(.96);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}
.modal-card h2{margin:0 0 16px; font:600 20px/1 "Georgia",serif; color:var(--gold-l)}
.form-row{margin-bottom:14px}
.form-row label{display:block; font:700 15px/1 inherit; margin-bottom:8px; color:var(--ink); letter-spacing:.2px}
.form-row input,.form-row textarea{
  width:100%; padding:11px 12px;
  background:rgba(200,147,47,.14); border:1px solid var(--line);
  border-radius:10px; color:var(--ink);
  font:500 15px/1 inherit; outline:none; transition:.15s;
}
.form-row input:focus,.form-row textarea:focus{border-color:var(--gold); box-shadow:0 0 0 3px rgba(232,184,75,.15)}
.muted{color:var(--muted)}
.modal-foot{display:flex; gap:10px; justify-content:flex-end; margin-top:18px}
.ghost,.primary{
  border:0; border-radius:10px; padding:12px 20px; font:700 14px/1 inherit; cursor:pointer;
}
.ghost{background:rgba(200,147,47,.08); color:var(--ink-2); border:1px solid var(--line)}
.primary{background:linear-gradient(135deg,var(--red),var(--red-d)); color:#FFE9A8; box-shadow:0 4px 12px rgba(200,16,46,.45)}
.primary:hover{filter:brightness(1.1)}
.primary:disabled{opacity:.6; cursor:not-allowed}

/* ============ 送餐地址 6 项 ============ */
.addr-btn{
  display:flex; align-items:center; justify-content:flex-start; gap:10px;
  width:100%; padding:12px 14px;
  background:rgba(200,147,47,.14); border:1px dashed var(--gold-d);
  border-radius:10px; color:var(--ink);
  font:600 14px/1 inherit; cursor:pointer; transition:.15s;
}
.addr-btn:hover{background:rgba(232,184,75,.08); border-style:solid; border-color:var(--gold)}
.addr-btn-ico{font-size:18px; line-height:1}
.addr-btn-txt{flex:1; text-align:left}
.addr-preview{
  margin-top:8px; padding:8px 10px;
  background:rgba(232,184,75,.08); border:1px solid var(--line-2);
  border-radius:8px; color:var(--gold-l);
  font:500 12px/1.5 inherit; word-break:break-word;
}
.addr-card{width:min(94vw,520px); max-height:88vh; overflow-y:auto; padding-right:18px}
.addr-tip{
  margin:0 0 14px; padding:8px 12px;
  background:rgba(232,184,75,.08); border-left:3px solid var(--gold);
  border-radius:6px; color:var(--ink-2);
  font:500 12px/1.5 inherit;
}
.addr-tip b{color:var(--gold-l)}
.addr-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:10px 12px;
}
.addr-field{display:block; min-width:0}
.addr-k{display:block; font:700 13px/1 inherit; margin-bottom:6px; color:var(--ink); letter-spacing:.2px}
.addr-k em{color:var(--red); font-style:normal; margin-left:2px}
.addr-field input{
  width:100%; padding:10px 12px;
  background:rgba(200,147,47,.14); border:1px solid var(--line);
  border-radius:8px; color:var(--ink);
  font:500 14px/1 inherit; outline:none; transition:.15s;
}
.addr-field input:focus{border-color:var(--gold); box-shadow:0 0 0 3px rgba(232,184,75,.15)}
.addr-field input::placeholder{color:var(--muted); font-size:13px}
@media (max-width:480px){
  .addr-grid{grid-template-columns:1fr}
}

/* ============ 历史地址 (localStorage) ============ */
.addr-history{
  margin-bottom:14px;
  background:rgba(0,0,0,.25);
  border:1px solid var(--line-2);
  border-radius:10px;
  padding:10px 12px;
}
.addr-history-h{
  display:flex; align-items:center; gap:6px;
  font:700 12px/1 inherit; color:var(--gold-l);
  margin-bottom:8px; letter-spacing:.3px;
}
.addr-history-h .ah-ico{font-size:14px}
.addr-history-h .ah-title{flex:1}
.addr-history-h .ah-clear{
  border:0; background:transparent; color:var(--muted);
  font:600 11px/1 inherit; cursor:pointer; padding:2px 4px;
}
.addr-history-h .ah-clear:hover{color:var(--red)}
.addr-history-list{
  display:flex; flex-direction:column; gap:6px;
}
.addr-hist-item{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px;
  background:linear-gradient(135deg,rgba(232,184,75,.06),rgba(200,16,46,.04));
  border:1px solid var(--line);
  border-radius:8px;
  transition:.15s;
}
.addr-hist-item:hover{
  border-color:var(--gold);
  background:linear-gradient(135deg,rgba(232,184,75,.12),rgba(200,16,46,.06));
}
.addr-hist-item .ah-text{
  flex:1; min-width:0;
  font:500 13px/1.35 inherit; color:var(--ink);
  word-break:break-word;
}
.addr-hist-item .ah-acts{display:flex; gap:4px; flex:0 0 auto}
.addr-hist-item .ah-use{
  border:1px solid var(--gold-d); background:rgba(232,184,75,.12); color:var(--gold-l);
  border-radius:6px; padding:5px 9px;
  font:700 12px/1 inherit; cursor:pointer; transition:.15s;
  white-space:nowrap;
}
.addr-hist-item .ah-use:hover{background:rgba(232,184,75,.22)}
.addr-hist-item .ah-del{
  border:0; background:transparent; color:var(--muted);
  border-radius:6px; padding:5px 7px;
  font:700 14px/1 inherit; cursor:pointer;
}
.addr-hist-item .ah-del:hover{color:var(--red); background:rgba(200,16,46,.1)}

/* 取餐方式二选一段控 */
.seg{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.seg-btn{
  border:1px solid var(--line); background:rgba(200,147,47,.10); color:var(--ink);
  border-radius:12px; padding:12px 10px; cursor:pointer;
  font:600 14px/1.25 inherit; transition:.15s;
  text-align:center;
}
.seg-btn .seg-cn{display:block; font:500 12px/1 inherit; color:var(--ink-2); margin-top:4px; letter-spacing:1px}
.seg-btn:hover{border-color:var(--gold); background:rgba(232,184,75,.06)}
.seg-btn.active{
  border-color:var(--gold); background:linear-gradient(135deg,rgba(232,184,75,.18),rgba(200,16,46,.18));
  color:var(--gold-l); box-shadow:0 4px 14px rgba(232,184,75,.18);
}
.seg-btn.active .seg-cn{color:var(--gold)}
.seg-tip{font:500 12px/1.2 inherit; color:var(--ink-2); margin-top:8px}

/* 3 列段控 (如需要); 当前只 2 个用, 居中 */
.seg-3{grid-template-columns:1fr 1fr}
.seg-btn.seg-sm{padding:10px 8px; font-size:13px}

/* 时间选择器 (简化版) */
.time-row{display:flex; align-items:stretch; gap:10px; flex-wrap:wrap}
.time-now{
  flex:1 1 140px; min-width:140px; min-height:60px;
  display:flex; align-items:center; gap:12px;
  background:linear-gradient(135deg,rgba(232,184,75,.15),rgba(200,16,46,.10));
  border:1.5px solid var(--gold); border-radius:12px;
  padding:12px 16px; cursor:pointer; text-align:left;
  color:var(--gold-l); font:700 17px/1.2 "Microsoft YaHei",sans-serif;
  transition:.15s;
}
.time-now:hover{filter:brightness(1.1)}
.time-now.active{box-shadow:0 4px 14px rgba(232,184,75,.3)}
.time-now-ico{font-size:24px; line-height:1}
.time-now-txt{font:700 17px/1 inherit}
.time-sched-link{
  flex:1 1 140px; min-width:0;
  background:rgba(232,184,75,.08); border:1.5px solid var(--gold);
  color:var(--gold-l); cursor:pointer;
  padding:12px 14px; font:700 14px/1.2 inherit; border-radius:12px;
  white-space:nowrap; transition:.15s;
  display:flex; align-items:center; justify-content:center; gap:6px;
  overflow:hidden; text-overflow:ellipsis;
}
.time-sched-link:hover{background:rgba(232,184,75,.18); transform:translateY(-1px)}
.time-sched-link:active{transform:scale(0.97)}
.time-sched-link.has-time{background:linear-gradient(135deg,var(--red),var(--red-d)); color:#FFE9A8; border-color:var(--gold); padding:12px 14px}

/* 底部弹层 - 时间选择 */
.sheet-sm{max-width:380px; padding:18px 20px}
.sheet-time{max-width:480px; padding:0}
.time-sheet-body{display:flex; flex-direction:column; gap:14px; padding:16px 20px 20px}

/* 选中日期大标题 (强化"几号"意识) */
.time-picked-date{
  display:flex; align-items:center; gap:10px;
  padding:14px 16px; background:linear-gradient(135deg,rgba(232,184,75,.18),rgba(200,16,46,.10));
  border:1.5px solid var(--gold); border-radius:12px;
  font:600 15px/1.3 inherit; color:var(--gold-l);
}
.time-picked-date .tpd-ico{font-size:22px}
.time-picked-date.has-pick{background:linear-gradient(135deg,var(--red),var(--red-d)); color:#FFE9A8; border-color:var(--gold)}
.time-picked-date .tpd-text{flex:1; font-size:15px}

/* 日期横向滚动 */
.time-dates{
  display:flex; gap:8px; overflow-x:auto; padding:2px 0 4px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.time-dates::-webkit-scrollbar{display:none}
.time-date{
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; padding:10px 4px; border-radius:12px;
  background:rgba(200,147,47,.10); border:1.5px solid var(--line);
  color:var(--ink); cursor:pointer; transition:.15s;
  scroll-snap-align: start;
  position:relative; overflow:hidden;
}
.time-date:hover{border-color:var(--gold)}
.time-date.active{background:linear-gradient(135deg,var(--red),var(--red-d)); border-color:var(--gold); color:#FFE9A8; transform:scale(1.05)}
.time-date.disabled{opacity:.35; cursor:not-allowed; pointer-events:none}
.time-date-dow{font:700 10px/1 inherit; color:var(--ink-2); letter-spacing:.5px; text-transform:uppercase; white-space:nowrap}
.time-date.active .time-date-dow{color:#FFE9A8}
.time-date-day{font:700 22px/1 "Microsoft YaHei",sans-serif; white-space:nowrap}
.time-date-mon{font:600 9px/1 inherit; color:var(--ink-2); white-space:nowrap}
.time-date.active .time-date-mon{color:#FFE9A8}
.time-date-today{position:absolute; top:2px; right:3px; font:700 8px/1 inherit; color:var(--gold-l); letter-spacing:.3px}

/* 时段网格 */
.time-slots-label{display:flex; justify-content:space-between; align-items:baseline; font:600 13px/1 inherit; color:var(--ink-2); margin-top:4px}
.time-slots-label .tsl-hint{font:500 10px/1 inherit; color:var(--gold-l); text-transform:uppercase; letter-spacing:.5px}
.time-slots{display:grid; grid-template-columns:repeat(4, 1fr); gap:8px}
@media (max-width:380px){.time-slots{grid-template-columns:repeat(3, 1fr)}}
.time-slot{
  padding:12px 4px; border-radius:10px; text-align:center; cursor:pointer;
  background:rgba(200,147,47,.10); border:1.5px solid var(--line);
  color:var(--ink); font:600 15px/1 "Microsoft YaHei",sans-serif;
  transition:.15s; position:relative;
}
.time-slot:hover:not(.disabled){border-color:var(--gold); background:rgba(232,184,75,.08)}
.time-slot:active{transform:scale(0.97)}
.time-slot.active{background:linear-gradient(135deg,var(--red),var(--red-d)); border-color:var(--gold); color:#FFE9A8}
.time-slot.disabled{opacity:.35; cursor:not-allowed; pointer-events:none}
.time-slot-hint{
  position:absolute; top:-7px; right:-5px;
  font:700 9px/1 inherit; padding:2px 5px; border-radius:6px;
  background:var(--gold); color:#FAF7F2;
}

/* 自定义时间 */
.time-custom{
  display:flex; flex-direction:column; gap:6px;
  padding:10px 12px; background:rgba(0,0,0,.25); border-radius:10px;
}
.time-custom-label{font:600 12px/1 inherit; color:var(--ink-2)}
.time-custom-row{display:flex; align-items:center; gap:10px}
.time-custom-row input[type=time]{
  flex:0 0 auto; padding:8px 12px; border-radius:8px; border:1px solid var(--line);
  background:#FAF7F2; color:var(--gold-l); font:600 15px/1 "Microsoft YaHei",sans-serif;
  cursor:pointer;
}
.time-custom-row input[type=time]::-webkit-calendar-picker-indicator{
  filter:invert(.8); cursor:pointer;
}

/* 提示 */
.time-tip{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px; background:rgba(232,184,75,.08); border-radius:10px;
  font:500 12px/1.3 inherit; color:var(--ink-2);
}
.time-tip .ico{font-size:16px}
.time-tip b{color:var(--gold-l)}

/* 确认按钮 */
.time-confirm-row{display:flex; gap:8px; padding-top:6px; border-top:1px solid var(--line-2); margin-top:6px}
.time-confirm-row button{flex:1; padding:12px; border-radius:10px; border:0; font:600 14px/1 inherit; cursor:pointer}
.time-confirm-row .ghost{background:rgba(200,147,47,.08); color:var(--ink-2); border:1px solid var(--line)}
.time-confirm-row .primary{background:linear-gradient(135deg,var(--red),var(--red-d)); color:#FFE9A8}
.time-confirm-row .primary:disabled{opacity:.4; cursor:not-allowed}


/* toast */
.toast{
  position:fixed; left:50%; bottom:148px; transform:translateX(-50%);
  z-index:90; background:rgba(74,42,20,.88); color:var(--gold-l);
  border:1px solid var(--line);
  padding:11px 18px; border-radius:999px; font:600 14px/1 inherit;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
}
.toast[hidden]{display:none}

/* ============ 菜品详情弹窗 ============ */
.detail-card{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(92vw,420px); max-height:92vh; overflow:auto;
  background:linear-gradient(180deg,#FFFFFF,#F7F2E8);
  border:1px solid var(--line); border-radius:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.6); animation:pop .2s ease;
  color:var(--ink);
}
.detail-close{
  position:absolute; top:12px; right:12px; z-index:3;
  width:36px; height:36px; border-radius:50%; border:0;
  background:rgba(0,0,0,.55); color:#fff; font-size:18px; cursor:pointer;
  backdrop-filter:blur(4px); transition:.15s;
}
.detail-close:hover{background:rgba(0,0,0,.75)}
.detail-img{
  aspect-ratio:1/1; position:relative; overflow:hidden;
  display:grid; place-items:center;
  background:radial-gradient(circle at 50% 40%, #2A1410 0%, #150808 80%);
  border-radius:18px 18px 0 0;
}
.detail-img::before{
  content:""; position:absolute; inset:-20%;
  background:radial-gradient(circle, rgba(232,184,75,.15) 0%, transparent 50%);
  pointer-events:none;
}
.detail-img .emoji{font-size:120px; filter:drop-shadow(0 6px 20px rgba(0,0,0,.5)); position:relative; z-index:1}
.detail-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.detail-body{padding:18px 20px 20px}
.detail-cat{font:600 11px/1 inherit; color:var(--gold); letter-spacing:1px; text-transform:uppercase; margin-bottom:6px}
.detail-name{margin:0; font:600 22px/1.2 "Georgia",serif; color:var(--ink)}
.detail-name-cn{font-size:13px; margin:4px 0 12px}
.detail-desc{
  font-size:14px; line-height:1.5; color:var(--ink-2); margin:0 0 16px;
  background:rgba(0,0,0,.25); padding:10px 12px; border-radius:8px;
  border:1px solid var(--line-2);
}
.detail-foot{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px}
.detail-price{font:800 24px/1 var(--gold-l)}
.qty-row{display:flex; align-items:center; gap:10px}
.qty-row button{
  width:36px; height:36px; border-radius:8px;
  border:1px solid var(--line); background:rgba(200,147,47,.08);
  color:var(--gold-l); font:700 18px/1 inherit; cursor:pointer;
}
.qty-row button:hover{background:rgba(232,184,75,.15)}
.qty-row span{min-width:24px; text-align:center; font:700 16px/1 var(--ink)}
.detail-add{
  width:100%; padding:14px; border:0; border-radius:12px;
  background:linear-gradient(135deg,var(--red),var(--red-d)); color:#FFE9A8;
  font:800 16px/1 inherit; cursor:pointer; box-shadow:0 4px 14px rgba(200,16,46,.4);
  transition:.15s;
}
.detail-add:hover{filter:brightness(1.1); transform:translateY(-1px)}

/* ============ 订单状态页 ============ */
.order-wrap{max-width:560px; margin:0 auto; padding:24px 18px}
.order-card{
  background:linear-gradient(160deg,var(--card),var(--card-2));
  border:1px solid var(--line-2);
  border-radius:18px; box-shadow:var(--shadow); padding:24px; margin-bottom:18px;
}
.status-pill{
  display:inline-flex; align-items:center; gap:8px; padding:8px 16px;
  border-radius:999px; font:700 14px/1 inherit; margin-bottom:16px;
}
.status-pending{background:rgba(232,184,75,.15); color:#E8B84B; border:1px solid rgba(232,184,75,.35)}
.status-confirmed,.status-cooking{background:rgba(80,180,100,.15); color:#7CDB95; border:1px solid rgba(80,180,100,.35)}
.status-done{background:rgba(120,180,255,.15); color:#9DC3FF; border:1px solid rgba(120,180,255,.35)}
.status-cancelled{background:rgba(220,80,80,.15); color:#FF9999; border:1px solid rgba(220,80,80,.35)}
.dot{width:10px; height:10px; border-radius:50%; background:currentColor}
.dot.pulse{animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.order-meta{font:600 13px/1.6 inherit; color:var(--ink-2)}
.order-meta b{color:var(--ink)}
.order-items{margin-top:8px}
.order-item{display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px dashed var(--line-2); font-size:15px; color:var(--ink)}
.order-item .qty{color:var(--ink-2)}
.order-total{display:flex; justify-content:space-between; align-items:center; margin-top:14px; padding-top:14px; border-top:2px solid var(--line); font:800 20px/1 var(--gold-l)}
.back-btn{display:inline-block; margin-bottom:18px; color:var(--gold-l); text-decoration:none; font-weight:700}
.center{text-align:center}
.big-status{font:600 24px/1.2 "Georgia",serif; color:var(--gold-l); margin:6px 0}
.hint{color:var(--ink-2); font-size:14px}

/* ============ 悬浮广告弹窗 ============ */
.popup-ad{position:fixed; inset:0; z-index:200; display:grid; place-items:center; animation:fadeIn .25s ease}
.popup-ad[hidden]{display:none}
.popup-ad-mask{position:absolute; inset:0; background:rgba(0,0,0,.72); backdrop-filter:blur(2px); cursor:default}
/* 弹窗按手机 9:16 比例 (竖屏), 适配手机用户 */
.popup-ad-card{
  position:relative; z-index:1;
  width:min(86vw, 360px);              /* 窄一些, 模拟手机 */
  aspect-ratio: 9 / 16;                /* 手机竖屏比例 */
  max-height:88vh;
  background:linear-gradient(180deg,#FFFFFF,#F7F2E8);
  border:1px solid var(--gold); border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.7), 0 0 0 4px rgba(232,184,75,.12);
  display:flex; flex-direction:column; overflow:hidden;
  animation:popUp .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes popUp{from{opacity:0; transform:translateY(20px) scale(.9)} to{opacity:1; transform:none}}
@keyframes fadeIn{from{opacity:0} to{opacity:1}}
.popup-ad-close{
  position:absolute; top:10px; right:10px; z-index:2;
  width:34px; height:34px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(74,42,20,.75); color:#fff; font-size:18px; line-height:1;
  display:grid; place-items:center; transition:.2s;
}
.popup-ad-close:hover{background:var(--red); transform:scale(1.08)}
.popup-ad-body{
  background:#fff; flex:1 1 auto; display:grid; place-items:center;
  padding:0; overflow:hidden; cursor:pointer;
}
.popup-ad-body img{width:100%; height:100%; object-fit:cover; display:block}  /* 9:16 比例, 填满 */
.popup-ad-body a{display:contents; cursor:pointer}
.popup-ad-foot{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px; background:rgba(200,147,47,.14); color:var(--ink-2);
  font-size:12px; letter-spacing:.3px;
}
.popup-ad-hint{color:var(--ink-2); font-size:12px}
#popupAdCountdown{color:var(--gold-l); font-weight:700}
@media (max-width:480px){
  .popup-ad-card{width:92vw; aspect-ratio: 9/16}
}
@media (min-width:1024px){
  /* 桌面端可以稍微大一点 */
  .popup-ad-card{width:min(420px, 30vw); aspect-ratio: 9/16}
}


/* ===================== 头部用户按钮 ===================== */
.hero-icon-btn{
  display:inline-flex; align-items:center; gap:6px;
  height:36px; padding:0 12px; border-radius:999px;
  background:#fff; color:var(--ink);
  border:1.5px solid var(--gold);
  font:600 13px/1 inherit; cursor:pointer; transition:.2s;
  text-decoration:none;
}
.hero-icon-btn:hover{ background:rgba(200,147,47,.10); color:var(--red); }
.hero-icon-btn-text{ white-space:nowrap; }

/* 桌面端: 显示文字 + 图标;  ≤520px 只显示图标 */
@media (max-width:520px){
  .hero-icon-btn-text{ display:none; }
  .hero-icon-btn{ padding:0; width:36px; justify-content:center; }
}

.hero-user-icon{
  display:inline-flex; align-items:center; gap:8px;
  height:36px; padding:0 8px 0 4px; border-radius:999px;
  background:#fff; color:var(--ink);
  border:1.5px solid var(--gold);
  font:600 12px/1 inherit; text-decoration:none; transition:.2s;
}
.hero-user-icon:hover{ background:rgba(200,147,47,.10); }
.hero-user-icon svg{ flex:0 0 auto; padding:0 4px; color:var(--gold-d); }
.hero-user-meta{ display:flex; align-items:center; gap:6px; min-width:0; }

.hero-vip-badge{
  display:inline-block; padding:2px 6px; border-radius:6px;
  background:linear-gradient(135deg,var(--gold),var(--gold-d));
  color:#fff; font:800 10px/1 inherit; letter-spacing:.5px;
  white-space:nowrap;
}
.hero-vip-badge.vip-2{ background:linear-gradient(135deg,#C8932F,#8B6914); }
.hero-vip-badge.vip-3,
.hero-vip-badge.vip-4,
.hero-vip-badge.vip-5,
.hero-vip-badge.vip-6{ background:linear-gradient(135deg,#C8102E,#8B0A1F); }
.hero-user-discount{
  background:rgba(200,147,47,.18); color:var(--gold-d);
  padding:2px 6px; border-radius:6px; font:700 11px/1 inherit;
  white-space:nowrap;
}

/* 已登录: ≤520px 只显示头像, 隐藏 meta */
@media (max-width:520px){
  .hero-user-meta{ display:none; }
  .hero-user-icon{ padding:0; width:36px; justify-content:center; }
  .hero-user-icon svg{ padding:0; }
}
/* ===================== Auth Modal ===================== */
.auth-modal{
  position:fixed; inset:0; z-index:200;
  background:rgba(20,10,10,.55);
  display:grid; place-items:center;
  padding:20px;
  animation:authFade .2s ease;
}
.auth-modal[hidden]{ display:none; }
@keyframes authFade{ from{opacity:0} to{opacity:1} }
.auth-modal-card{
  position:relative; width:100%; max-width:420px;
  background:#fff; border-radius:18px;
  padding:28px 24px 24px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  animation:authSlide .25s ease;
}
@keyframes authSlide{ from{transform:translateY(20px);opacity:0} to{transform:none;opacity:1} }
.auth-modal-close{
  position:absolute; top:10px; right:12px;
  width:32px; height:32px; border:0; border-radius:50%;
  background:transparent; font-size:24px; line-height:1; color:var(--ink-2);
  cursor:pointer;
}
.auth-modal-close:hover{ background:rgba(0,0,0,.05); color:var(--ink); }

.auth-tabs{ display:flex; gap:4px; margin-bottom:18px; border-bottom:1px solid var(--line); }
.auth-tab{
  flex:1; padding:10px 0; border:0; background:transparent;
  font:600 14px/1 inherit; color:var(--ink-2);
  border-bottom:2px solid transparent; cursor:pointer; transition:.2s;
}
.auth-tab:hover{ color:var(--ink); }
.auth-tab.active{ color:var(--red); border-bottom-color:var(--red); }

.auth-h{ margin:0 0 6px; font:700 20px/1.2 "Georgia",serif; color:var(--ink); }
.auth-sub{ margin:0 0 18px; color:var(--ink-2); font-size:13px; }

.auth-form{ display:flex; flex-direction:column; gap:14px; }
.auth-form[hidden]{ display:none; }
.auth-step[hidden]{ display:none; }

.auth-label{ display:flex; flex-direction:column; gap:5px; font:600 12px/1 inherit; color:var(--ink-2); }
.auth-input{
  height:44px; padding:0 14px;
  border:1.5px solid var(--line); border-radius:10px;
  font:500 15px/1 inherit; color:var(--ink);
  background:#fff; transition:.2s; outline:none;
}
.auth-input:focus{ border-color:var(--red); box-shadow:0 0 0 3px rgba(200,16,46,.10); }
.auth-input::placeholder{ color:#BDB3A5; }
.auth-hint{ font:500 11px/1 inherit; color:var(--muted); margin-top:3px; }
.auth-code{ text-align:center; letter-spacing:8px; font-size:22px; font-weight:700; }

.auth-check{ display:flex; align-items:flex-start; gap:8px; font:500 12px/1.4 inherit; color:var(--ink-2); cursor:pointer; }
.auth-check input{ width:16px; height:16px; margin-top:2px; flex:0 0 auto; }

.auth-err{
  padding:10px 12px; border-radius:8px;
  background:rgba(220,38,38,.08); color:#b91c1c;
  font:500 13px/1.4 inherit;
}
.auth-err[hidden]{ display:none; }

.auth-submit{
  height:46px; padding:0 20px; border:0; border-radius:10px;
  font:700 15px/1 inherit; cursor:pointer; transition:.2s;
}
.auth-submit.primary{ background:linear-gradient(135deg,var(--red),var(--red-d)); color:#FFE9A8; box-shadow:0 4px 12px rgba(200,16,46,.30); }
.auth-submit.primary:hover{ filter:brightness(1.05); }
.auth-submit:disabled{ opacity:.6; cursor:wait; }

.auth-foot{
  margin-top:6px; padding-top:14px; border-top:1px dashed var(--line);
  font:500 13px/1.4 inherit; color:var(--ink-2);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
}
.auth-foot a{ color:var(--red); text-decoration:none; }
.auth-foot a:hover{ text-decoration:underline; }


/* ===================== 站内聊天 ===================== */
.chat-fab{
  position:fixed; right:18px; bottom:18px; z-index:150;
  width:56px; height:56px; border-radius:50%; border:0;
  background:linear-gradient(135deg,var(--red),var(--red-d));
  color:#FFE9A8;
  display:grid; place-items:center; cursor:pointer;
  box-shadow:0 8px 20px rgba(200,16,46,.35);
  transition:transform .2s;
}
.chat-fab:hover{ transform:scale(1.05); }
.chat-fab-badge{
  position:absolute; top:-2px; right:-2px;
  min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  background:#fff; color:var(--red);
  font:800 11px/18px inherit; text-align:center;
  box-shadow:0 0 0 2px var(--red);
}
/* 手机端: 聊天按钮挪到左侧垂直居中, 聊天窗口铺满中部屏幕 */
@media (max-width:768px){
  .chat-fab{ left:14px; right:auto; top:50%; bottom:auto; margin-top:-24px; width:48px; height:48px; }
  .chat-window{ left:10px; right:10px; top:70px; bottom:96px; width:auto; height:auto; max-height:none; }
}

.chat-window{
  position:fixed; right:18px; bottom:84px; z-index:160;
  width:340px; max-width:calc(100vw - 36px); height:480px; max-height:calc(100vh - 110px);
  background:#fff; border-radius:18px;
  box-shadow:0 20px 50px rgba(0,0,0,.25);
  display:flex; flex-direction:column; overflow:hidden;
  animation:chatPop .2s ease;
}
@keyframes chatPop{ from{transform:translateY(10px);opacity:0} to{transform:none;opacity:1} }
.chat-window[hidden]{ display:none; }
.chat-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px;
  background:linear-gradient(135deg,var(--red),var(--red-d));
  color:#FFE9A8;
}
.chat-title{ font:700 14px/1.2 inherit; }
.chat-sub{ font:500 11px/1 inherit; opacity:.85; margin-top:3px; }
.chat-close{
  width:30px; height:30px; border:0; border-radius:50%;
  background:rgba(255,255,255,.15); color:#FFE9A8;
  font-size:20px; line-height:1; cursor:pointer;
}
.chat-close:hover{ background:rgba(255,255,255,.3); }

.chat-body{
  flex:1 1 auto; overflow-y:auto; padding:12px;
  background:var(--bg);
  display:flex; flex-direction:column; gap:8px;
}
.chat-empty{
  text-align:center; color:var(--muted);
  padding:30px 10px; font:500 13px/1.4 inherit;
}
.chat-msg{
  max-width:78%;
  padding:8px 12px; border-radius:14px;
  font:500 14px/1.4 inherit; word-wrap:break-word;
  position:relative;
}
.chat-msg.user{
  align-self:flex-end;
  background:linear-gradient(135deg,var(--red),var(--red-d));
  color:#FFE9A8;
  border-bottom-right-radius:4px;
}
.chat-msg.admin{
  align-self:flex-start;
  background:#fff; color:var(--ink);
  border:1px solid var(--line);
  border-bottom-left-radius:4px;
}
.chat-msg-time{
  display:block; font:500 10px/1 inherit;
  opacity:.65; margin-top:3px;
}
.chat-msg.user .chat-msg-time{ color:rgba(255,233,168,.85); }

.chat-input-row{
  display:flex; gap:6px; padding:8px;
  background:#fff; border-top:1px solid var(--line);
}
.chat-input-row input{
  flex:1; height:40px; padding:0 12px;
  border:1.5px solid var(--line); border-radius:999px;
  font:500 14px/1 inherit; outline:none; transition:.2s;
}
.chat-input-row input:focus{
  border-color:var(--red);
  box-shadow:0 0 0 3px rgba(200,16,46,.10);
}
.chat-input-row button{
  width:40px; height:40px; border:0; border-radius:50%;
  background:linear-gradient(135deg,var(--red),var(--red-d));
  color:#FFE9A8; cursor:pointer; display:grid; place-items:center;
}
.chat-input-row button:disabled{ opacity:.5; cursor:wait; }
.chat-input-row button:hover:not(:disabled){ filter:brightness(1.05); }

/* 未登录: 提示登录 */
.chat-need-login{
  text-align:center; padding:30px 20px;
  font:500 14px/1.5 inherit; color:var(--ink-2);
}
.chat-need-login a{ color:var(--red); font-weight:700; }