/* ===================================================================
   TAVORA Ristorante OS · 使用手册 — 共享样式
   深色高级质感 · 导航条 + hero + 卡片 + 8级阶梯 + 方法卡 + 例表 + FAQ + footer
   =================================================================== */
:root{
  --bg:#0f1013; --card:#181a20; --card2:#20232b; --line:#2c3038;
  --tx:#eceef2; --tx2:#a7adb8; --tx3:#6e747f;
  --gold:#d4af37; --green:#4caf72; --blue:#4c9aff;
  --radius:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg);color:var(--tx);
  font-family:-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  line-height:1.75;padding:0 0 70px;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:920px;margin:0 auto;padding:0 22px}

/* ---------- 顶部导航条 ---------- */
.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(15,16,19,.86);
  backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--line);
}
.nav .inner{
  max-width:1080px;margin:0 auto;padding:0 22px;
  height:58px;display:flex;align-items:center;gap:18px;
}
.nav .brand{
  font-weight:800;font-size:16px;white-space:nowrap;
  display:flex;align-items:center;gap:8px;color:var(--tx);
}
.nav .brand .logo{color:var(--gold);font-size:20px}
.nav .brand .sep{color:var(--tx3);font-weight:500}
.nav .brand .muted{color:var(--tx2);font-weight:600;font-size:14px}
.nav .links{
  margin-left:auto;display:flex;align-items:center;gap:6px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.nav .links::-webkit-scrollbar{display:none}
.nav .links a{
  padding:7px 14px;border-radius:10px;font-size:14.5px;font-weight:600;
  color:var(--tx2);white-space:nowrap;transition:.15s;
}
.nav .links a:hover{color:var(--tx);background:var(--card2)}
.nav .links a.active{color:var(--bg);background:var(--gold);font-weight:800}
@media(max-width:640px){
  .nav .inner{gap:10px;height:auto;padding:8px 14px;flex-wrap:wrap}
  .nav .brand{font-size:14px}
  .nav .brand .muted{display:none}
  .nav .links{width:100%;margin-left:0;padding-bottom:2px}
}

/* ---------- Hero ---------- */
header.hero{padding:56px 0 40px;text-align:center;border-bottom:1px solid var(--line)}
.crown{font-size:44px}
.kick{color:var(--gold);font-weight:700;letter-spacing:3px;font-size:12px;text-transform:uppercase;margin:14px 0 10px}
.kick.green{color:var(--green)}
h1{font-size:36px;line-height:1.2;margin-bottom:14px;font-weight:800}
.sub{font-size:18px;color:var(--tx2);max-width:660px;margin:0 auto}
.draft{margin-top:20px;display:inline-block;font-size:12px;color:var(--tx3);border:1px solid var(--line);border-radius:20px;padding:4px 14px}
@media(max-width:640px){h1{font-size:28px}.sub{font-size:16px}header.hero{padding:40px 0 32px}}

/* ---------- Section ---------- */
section{padding:38px 0;border-bottom:1px solid var(--line)}
h2{font-size:24px;margin-bottom:14px;font-weight:750;text-align:center}
h2 .e{margin-right:8px}
.lead{color:var(--tx2);font-size:16px;text-align:center;max-width:700px;margin:0 auto 20px}
p{margin-bottom:12px}.muted{color:var(--tx2)}

/* ---------- 三宫格 why ---------- */
.why{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin:10px 0}
@media(max-width:720px){.why{grid-template-columns:1fr}}
.why .c{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;text-align:center}
.why .c .i{font-size:28px}
.why .c h3{font-size:16px;margin:8px 0 4px}
.why .c p{font-size:13.5px;color:var(--tx2);margin:0}

/* ---------- 主题卡片网格（首页） ---------- */
.grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin:8px 0}
@media(max-width:860px){.grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.grid{grid-template-columns:1fr}}
.tile{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 22px;display:block;transition:.18s;position:relative;
}
.tile:hover{border-color:var(--gold);transform:translateY(-3px)}
.tile .i{font-size:32px}
.tile h3{font-size:18px;margin:12px 0 6px}
.tile p{font-size:14px;color:var(--tx2);margin:0}
.tile .go{margin-top:14px;font-size:13px;color:var(--gold);font-weight:700}
.tile.soon{opacity:.6}
.tile.soon:hover{border-color:var(--line);transform:none}
.tile.soon .tag{
  position:absolute;top:16px;right:16px;font-size:11px;font-weight:800;
  color:var(--tx3);border:1px solid var(--line);border-radius:12px;padding:2px 10px;
}

/* ---------- 8级阶梯 ---------- */
.tiers{margin:16px 0}
.tier{display:flex;align-items:center;gap:16px;padding:14px 20px;border-radius:12px;margin:8px 0;border:1px solid var(--line);background:var(--card)}
.tier .lv{flex:0 0 46px;font-weight:800;font-size:15px;text-align:center;color:var(--tx3)}
.tier .badge{flex:0 0 auto;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800}
.tier .nm{flex:1}
.tier .nm .cn{font-weight:800;font-size:17px}
.tier .nm .en{font-size:12px;color:var(--tx3);letter-spacing:1px}
.tier .eg{flex:0 0 auto;font-size:13px;color:var(--tx2);background:var(--card2);border-radius:8px;padding:4px 10px}
.t1 .badge{background:linear-gradient(135deg,#cd7f32,#8a5522);color:#fff}
.t2 .badge{background:linear-gradient(135deg,#c9ccce,#8f9295);color:#2a2a2a}
.t3 .badge{background:linear-gradient(135deg,#ffd700,#c9a227);color:#3a2f00}
.t4 .badge{background:linear-gradient(135deg,#e5e4e2,#b7b6b3);color:#2a2a2a}
.t5 .badge{background:linear-gradient(135deg,#8fe3f5,#3fb6d6);color:#053540}
.t6 .badge{background:linear-gradient(135deg,#9aa0a6,#5f656b);color:#fff}
.t7 .badge{background:linear-gradient(135deg,#2b2b2b,#000);color:var(--gold);border:1px solid var(--gold)}
.t8 .badge{background:linear-gradient(135deg,#3a2d5e,#1a1230);color:var(--gold);border:1px solid var(--gold)}
@media(max-width:640px){
  .tier{gap:10px;padding:12px 14px}
  .tier .lv{flex:0 0 34px;font-size:13px}
  .tier .badge{width:42px;height:42px;font-size:18px}
  .tier .nm .cn{font-size:15px}
  .tier .eg{font-size:12px;padding:3px 8px}
}

/* ---------- 方法卡 ---------- */
.methods{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:14px 0}
@media(max-width:720px){.methods{grid-template-columns:1fr}}
.method{border-radius:var(--radius);padding:22px;border:1px solid var(--line);background:var(--card)}
.method .top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.method .no{width:34px;height:34px;border-radius:50%;background:var(--card2);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--gold)}
.method h3{font-size:18px}
.method .state{font-size:11px;font-weight:800;padding:2px 10px;border-radius:12px;margin-left:auto}
.on{background:rgba(76,175,114,.18);color:var(--green)}
.off{background:rgba(110,116,127,.2);color:var(--tx3)}
.method p{font-size:14px;color:var(--tx2)}
.method .eg{background:var(--card2);border-radius:10px;padding:12px 14px;margin-top:10px;font-size:13.5px;color:var(--tx2)}

/* ---------- 流程 flow ---------- */
.flow{display:flex;align-items:stretch;gap:10px;margin:16px 0;flex-wrap:wrap;justify-content:center}
.flow .s{flex:1;min-width:150px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;text-align:center}
.flow .s .i{font-size:26px}
.flow .s h3{font-size:15px;margin:8px 0 4px}
.flow .s p{font-size:13px;color:var(--tx2);margin:0}
.flow .arr{display:flex;align-items:center;color:var(--tx3);font-size:20px}
@media(max-width:720px){.flow .arr{display:none}}

/* ---------- 例子表 ---------- */
.egtable{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:8px 20px;margin:14px 0}
.egrow{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px}
.egrow:last-child{border-bottom:none}
.egrow .dish{font-weight:700}
.egrow .pts{color:var(--gold);font-weight:800}
.egrow .pts.red{color:var(--green)}
.card2box{background:var(--card2);border-radius:12px;padding:14px 18px;margin:12px 0;font-size:14px;color:var(--tx2)}

/* ---------- 独立钱包 ---------- */
.wallet{display:flex;gap:14px;justify-content:center;margin:14px 0;flex-wrap:wrap}
.wallet .store{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 22px;text-align:center;min-width:160px}
.wallet .store .nm{font-weight:800;font-size:16px}
.wallet .store .pt{color:var(--gold);font-weight:800;font-size:22px;margin-top:4px}
.wallet .store .pt.b{color:var(--blue)}

/* ---------- FAQ ---------- */
.faq{margin:10px 0}
.faq .q{font-weight:750;margin-top:14px;color:var(--tx)}
.faq .a{color:var(--tx2);font-size:14.5px}

/* ---------- note ---------- */
.note{background:var(--card);border:1px dashed var(--line);border-radius:var(--radius);padding:18px 22px;color:var(--tx2);font-size:14px;text-align:center}

/* ---------- 上线状态徽章 ---------- */
.stbadge{display:inline-block;font-size:11px;font-weight:800;padding:2px 10px;border-radius:12px;letter-spacing:.3px;vertical-align:middle;white-space:nowrap}
.st-built{background:rgba(76,154,255,.18);color:var(--blue)}      /* 已建·待部署 */
.st-live{background:rgba(76,175,114,.2);color:var(--green)}       /* 已上线 */
.st-m1{background:rgba(76,175,114,.16);color:var(--green)}
.st-m2{background:rgba(212,175,55,.18);color:var(--gold)}
.st-m3{background:rgba(163,113,247,.2);color:#b892f6}
.st-m4{background:rgba(76,154,255,.16);color:var(--blue)}
.st-plan{background:rgba(110,116,127,.22);color:var(--tx2)}       /* 规划中 */
h2 .stbadge{margin-left:10px;font-size:11px;position:relative;top:-2px}

/* ---------- 页顶状态条 ---------- */
.statusbar{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;margin:0 0 4px}
.statusbar .row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px;color:var(--tx2);padding:5px 0}
.statusbar .row + .row{border-top:1px solid var(--line);margin-top:2px;padding-top:9px}
.statusbar .row .k{color:var(--tx3);font-weight:700;flex:0 0 96px;font-size:12.5px}
.statusbar .row .v{flex:1;min-width:180px}

/* ---------- 上线路线图 M1-M4 ---------- */
.roadmap{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:16px 0}
@media(max-width:820px){.roadmap{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.roadmap{grid-template-columns:1fr}}
.roadmap .r{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px}
.roadmap .r .t{font-weight:800;font-size:14.5px;margin-bottom:7px;display:flex;align-items:center;gap:6px}
.roadmap .r.r1 .t{color:var(--green)}
.roadmap .r.r2 .t{color:var(--gold)}
.roadmap .r.r3 .t{color:#b892f6}
.roadmap .r.r4 .t{color:var(--blue)}
.roadmap .r .d{font-size:13px;color:var(--tx2)}

/* ---------- footer ---------- */
footer{padding:30px 0;color:var(--tx3);font-size:13px;text-align:center}

/* ===================================================================
   TASK-HELP-PRIVACY 追加：GDPR 隐私告知（法律文书专用·零回归只追加）
   独立法律文书样式：待填清单块 / 三语切换 Tab / 占位符高亮 / 条文列表
   =================================================================== */

/* ---------- ⚠️ 上线前待填清单块 ---------- */
.todo-block{
  background:rgba(212,175,55,.09);
  border:1.5px solid var(--gold);border-radius:var(--radius);
  padding:18px 22px;margin:22px 0 6px;
}
.todo-block .th{font-weight:800;color:var(--gold);font-size:15px;margin-bottom:10px;line-height:1.4}
.todo-block ul{margin:0;padding-left:20px}
.todo-block li{font-size:14px;color:var(--tx2);margin:5px 0;line-height:1.55}
.todo-block li code{color:var(--gold);font-weight:700}

/* 正文里的占位符高亮：一眼可见「待老板回填」 */
.ph{
  display:inline-block;background:rgba(212,175,55,.16);color:var(--gold);
  font-weight:800;padding:0 7px;border-radius:6px;border:1px dashed var(--gold);
  font-size:.92em;letter-spacing:.2px;
}

/* ---------- 三语切换 Tab ---------- */
.langtabs{
  display:flex;gap:8px;justify-content:center;margin:26px 0 4px;
  position:sticky;top:58px;z-index:90;
  background:rgba(15,16,19,.86);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);padding:12px 0;
}
.langtabs button{
  font-family:inherit;cursor:pointer;
  padding:8px 20px;border-radius:20px;font-size:14.5px;font-weight:700;
  color:var(--tx2);background:var(--card);border:1px solid var(--line);transition:.15s;
}
.langtabs button:hover{color:var(--tx);border-color:var(--gold)}
.langtabs button.active{color:var(--bg);background:var(--gold);border-color:var(--gold);font-weight:800}
@media(max-width:640px){.langtabs{top:0}.langtabs button{padding:7px 16px;font-size:13.5px}}

/* ---------- 法律文书正文 ---------- */
.lang{display:none}
.lang.show{display:block}
.legal h2{text-align:left;font-size:21px;margin:30px 0 6px;padding-top:22px;border-top:1px solid var(--line)}
.legal h2:first-of-type{border-top:none;padding-top:8px}
.legal .artno{color:var(--gold);font-weight:800;margin-right:8px}
.legal p{color:var(--tx2);font-size:15px;line-height:1.7}
.legal ul,.legal ol{margin:8px 0 8px;padding-left:22px;color:var(--tx2)}
.legal li{font-size:15px;line-height:1.7;margin:5px 0}
.legal b,.legal strong{color:var(--tx)}
.legal .intro{color:var(--tx2);font-size:15px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 20px;margin:8px 0 4px}
.legal .updated{color:var(--tx3);font-size:13.5px;margin-top:8px}
.legal .callout{background:var(--card2);border-radius:12px;padding:13px 18px;margin:12px 0;font-size:14.5px;color:var(--tx2)}
.legal .callout b{color:var(--gold)}