/* ============================================================
 * 宣愉食谱官网 · 全站共享样式 site.css
 * 模块：tokens / reset / 统一顶部导航(.xy-nav*) / 共享组件
 *
 * 约定：
 *  - 统一导航只拥有 960px 一个断点（汉堡折叠）；页面内容断点各页自理
 *    （index 900/720/520、workbench 760、ceping 640 单列）
 *  - 页面私有样式写在各页 <style>（后于本文件加载，可直接覆盖）
 *  - 版本：改动本文件须全局升版引用 ?v=YYYYMMDD（四页同步改）
 * ============================================================ */

/* ===== 1. 设计 tokens（原四页并集） ===== */
:root{
  --primary:#51BF73;--primary-light:#E8F8ED;--primary-10:#F4FBEF;--primary-dark:#388E3C;
  --text:#1A1A1A;--text-2:#666666;--text-3:#999999;--bg:#F7F8FA;--line:#EBEEF5;
  --danger:#F56C6C;--warn:#E6A23C;
  --shadow:0 6px 24px rgba(26,26,26,.06);
  --card-shadow:0 6px 24px rgba(26,26,26,.06);
}

/* ===== 2. reset ===== */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{font-family:"PingFang SC","-apple-system","Helvetica Neue","Microsoft YaHei",sans-serif;
  color:var(--text);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
.hide{display:none!important}
[hidden]{display:none!important}  /* hidden 属性兜底：作者 display:flex 等会盖掉 UA 的 [hidden] 默认隐藏 */

/* ===== 3. 统一顶部导航（nav.js 渲染进 #xy-nav 占位） ===== */
/* sticky 放在容器 #xy-nav 上：若直接给 header 设 sticky，其粘滞范围被 #xy-nav
 * 自身高度（=header 高度）限死，滚过一个导航高就失效随页面滚走 */
#xy-nav{position:sticky;top:0;z-index:50;min-height:64px}  /* min-height 预留高度，防内容跳动 */
html[data-nonav] #xy-nav{display:none}  /* ceping 渠道直达：不挂导航也不占位 */
.xy-nav{background:rgba(255,255,255,.9);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(26,26,26,.06)}
.xy-nav-in{max-width:1100px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:22px;height:64px}
.xy-brand{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:600;flex:none;color:var(--text)}
.xy-brand img{width:32px;height:32px;border-radius:8px}
.xy-brand .xy-slogan{height:20px;width:auto;margin-left:4px}
.xy-menu{display:flex;align-items:center;gap:14px;flex:none}
.xy-menu a{color:var(--text-2);font-size:14px;font-weight:500;padding:6px 4px;transition:color .2s}
.xy-menu a:hover{color:var(--primary-dark)}
.xy-menu a.on{color:var(--primary-dark);font-weight:600}
.xy-sp{flex:1}
.xy-me{display:flex;align-items:center;flex:none}
.xy-login{border:1.5px solid var(--primary);color:var(--primary-dark);font-size:14px;font-weight:500;
  padding:7px 18px;border-radius:999px;transition:all .2s}
.xy-login:hover{background:var(--primary-light)}
.xy-login.on{background:var(--primary);color:#fff}
.xy-user{display:flex;align-items:center;gap:8px;font-size:14px}
.xy-user img{width:30px;height:30px;border-radius:50%;background:var(--primary-light)}
.xy-user .xy-name{max-width:9em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xy-user .xy-tag{font-size:11px;color:var(--primary-dark);background:var(--primary-light);
  padding:1px 8px;border-radius:999px;font-weight:500;flex:none}
.xy-user .xy-logout{border:none;background:none;color:var(--text-3);font-size:13px;padding:6px 8px;flex:none}
.xy-user .xy-logout:hover{color:var(--danger)}
.xy-burger{display:none;border:none;background:none;color:var(--text);font-size:21px;line-height:1;
  padding:8px 2px;flex:none}

/* 移动端（<960px，导航唯一断点）：菜单/登录区折叠，汉堡展开为面板 */
@media (max-width:960px){
  #xy-nav{min-height:52px}
  .xy-nav-in{flex-wrap:wrap;height:auto;min-height:52px;padding-top:6px;padding-bottom:6px;gap:0 14px}
  .xy-brand{height:40px;font-size:17px}
  .xy-brand .xy-slogan{display:none}
  .xy-burger{display:block;height:40px;margin-left:auto}
  .xy-menu,.xy-me{display:none;flex-basis:100%}
  .xy-nav.open .xy-menu{display:flex;flex-direction:column;align-items:stretch;gap:2px;
    padding:8px 0 6px;border-top:1px solid var(--line)}
  .xy-nav.open .xy-menu a{display:block;padding:11px 4px;font-size:15px}
  .xy-nav.open .xy-me{display:flex;padding:10px 0 6px;border-top:1px solid var(--line)}
}

/* ===== 4. 共享组件（≥2 页一致才上提；同名异义者留页内覆盖） ===== */

/* 按钮（workbench/login 版；ceping 的全宽 pill 按钮在其页内覆盖 .btn） */
.btn{border:none;border-radius:8px;background:var(--primary);color:#fff;font-size:14px;
  font-weight:600;padding:10px 22px;transition:background .2s}
.btn:active{background:var(--primary-dark)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.ghost{background:var(--primary-light);color:var(--primary-dark);font-weight:500}
.btn.plain{background:#fff;color:var(--text-2);border:1px solid var(--line);font-weight:500}
.btn.danger{background:#fff;color:var(--danger);border:1px solid rgba(245,108,108,.4);font-weight:500}
.btn.sm{padding:6px 14px;font-size:13px}

/* 居中卡片区（登录/门禁/失败页；64px = 顶栏高） */
.full{min-height:calc(100vh - 64px);display:flex;align-items:center;justify-content:center;padding:24px}
.card{background:#fff;border-radius:20px;box-shadow:var(--shadow);padding:40px 44px;max-width:420px;width:100%;text-align:center}
.card .logo{width:56px;height:56px;border-radius:14px;margin:0 auto 14px;display:block}
.card h1{font-size:22px;font-weight:700}
.card .sub{font-size:13px;color:var(--text-3);margin:8px 0 22px}
.card .qr-box{border:1px solid var(--line);border-radius:14px;padding:10px;min-height:300px;
  display:flex;align-items:center;justify-content:center;color:var(--text-3);font-size:13px}
.card .qr-box iframe{border:none}
.card .links{margin-top:16px;font-size:13px;color:var(--text-3)}
.card .links a{color:var(--primary-dark);cursor:pointer}
.card .note{margin-top:14px;font-size:12px;color:var(--text-3);background:var(--bg);border-radius:10px;padding:10px 12px;text-align:left}
.deny-ico{font-size:46px;margin-bottom:12px}
.deny-title{font-size:18px;font-weight:700;margin-bottom:8px}
.deny-desc{font-size:14px;color:var(--text-2);margin-bottom:24px;white-space:pre-line}
.deny-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* 加载态 */
.spin{width:26px;height:26px;margin:60px auto 12px;display:block;border:3px solid var(--primary-light);
  border-top-color:var(--primary);border-radius:50%;animation:xy-rot .8s linear infinite}
@keyframes xy-rot{to{transform:rotate(360deg)}}
.load-txt{text-align:center;color:var(--text-3);font-size:14px}

/* 弹窗骨架 */
.modal-mask{position:fixed;inset:0;background:rgba(26,26,26,.45);display:none;
  align-items:center;justify-content:center;z-index:100;padding:20px}
.modal-mask.show{display:flex}
.modal{background:#fff;border-radius:18px;max-width:640px;width:100%;max-height:86vh;
  display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.2)}
.modal-hd{display:flex;align-items:center;padding:18px 22px 0}
.modal-hd h3{font-size:17px;font-weight:700;flex:1}
.modal-hd .x{border:none;background:var(--bg);color:var(--text-3);width:30px;height:30px;border-radius:50%;font-size:15px}
.modal-bd{padding:16px 22px;overflow:auto}
.modal-ft{padding:14px 22px 18px;display:flex;gap:10px;justify-content:flex-end;border-top:1px solid var(--line)}

/* 轻提示（XY.toast 懒建；ceping 要底部位置在其页内覆盖 .xy-toast） */
.xy-toast{position:fixed;top:14%;left:50%;transform:translateX(-50%);max-width:80vw;
  background:rgba(26,26,26,.78);color:#fff;font-size:14px;padding:10px 18px;border-radius:10px;
  z-index:999;display:none}
.xy-toast.show{display:block}

@media (max-width:520px){ .card{padding:28px 22px} }