/* ===================================================================
   榕悦花园 · 社区互助平台  样式表（淡雅温馨社区风 v7）
   暖米底色 / 柔苔绿 + 陶土橙 / 暖墨文字 / 柔和阴影 / 适老化大字号
   =================================================================== */

/* 关键修复：带 hidden 属性的弹层/抽屉/徽标真正隐藏 */
[hidden]{ display:none !important; }

:root{
  /* 淡雅温馨社区风：暖米底色 + 柔苔绿（信任/自然）+ 陶土橙（温度/行动） */
  --c-primary:   #7FA38C;   /* 柔苔绿：沉稳、亲和、自然 */
  --c-primary-2: #9DB89F;   /* 浅苔：辅助 */
  --c-primary-3: #B7CBAE;   /* 嫩绿：点缀 */
  --c-primary-soft:#eef3ec; /* 淡绿底 */

  --c-accent:    #D29377;   /* 陶土橙：温暖、有人情味，比高饱和橙更柔和 */
  --c-accent-2:  #E2B49A;   /* 暖桃：辅助温度 */
  --c-accent-soft:#f9ece4;  /* 淡陶底 */

  --grad-brand: linear-gradient(135deg,#8FB59C 0%,#A9C2A3 100%);  /* 柔绿 */
  --grad-warm:  linear-gradient(135deg,#DDA386 0%,#E6BBA1 100%);  /* 陶土→暖桃 */
  --grad-ink:   linear-gradient(135deg,#6b7d63 0%,#8a9b6f 100%);

  --c-bg:        #f6f1ea;   /* 暖米白（宣纸感） */
  --c-surface:   #fffdf9;   /* 近白暖 */
  --c-surface-2: #f1e9de;   /* 暖米 */
  --c-border:    #ece2d4;   /* 暖灰边 */
  --c-border-2:  #ddd0bd;   /* 深一档暖边 */

  --c-text:      #43382e;   /* 暖墨：比纯黑柔和，长时间阅读不刺眼 */
  --c-text-2:    #6e6354;   /* 次级文字 */
  --c-text-3:    #a99c89;   /* 辅助/弱化文字 */

  --c-red:       #c0584e;   /* 柔红：异常/危险，降饱和 */
  --c-red-soft:  #f7e6e3;
  --c-blue:      #6f95b3;   /* 柔蓝：信息/链接 */
  --c-blue-soft: #e9f0f5;
  --c-amber:     #c79a4e;   /* 柔琥珀：待处理 */
  --c-amber-soft:#f6efdf;
  --c-gray-soft: #efe8dd;

  --radius:   18px;
  --radius-s: 12px;
  /* 暖调柔和阴影，轻盈不压抑，符合「淡雅」 */
  --shadow:   0 1px 2px rgba(90,70,50,.05), 0 8px 22px rgba(90,70,50,.06);
  --shadow-lg:0 14px 40px rgba(90,70,50,.13);
  --shadow-card:0 6px 18px rgba(90,70,50,.07);

  --fs-base: 15px;
  --maxw: 1600px;
}

html[data-a11y="large"]{ --fs-base: 17.5px; }

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ height:100%; width:100%; }
body{
  display:flex; flex-direction:column; min-height:100vh; width:100%; max-width:100vw;
  background:
    radial-gradient(1200px 520px at 86% -8%, rgba(210,147,119,.10), transparent 58%),
    radial-gradient(1000px 480px at -4% 2%, rgba(127,163,140,.12), transparent 55%),
    var(--c-bg);
  background-attachment:fixed;
  color:var(--c-text);
  font-size:var(--fs-base);
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Source Han Sans CN",system-ui,-apple-system,sans-serif;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; font-size:inherit; cursor:pointer; }
img{ display:block; max-width:100%; }
h1,h2,h3,h4{ margin:0; line-height:1.4; letter-spacing:.2px; }
p{ margin:0; }
ul,ol{ margin:0; padding-left:1.25em; }

.muted{ color:var(--c-text-3); }
.dim{ color:var(--c-text-2); }
.small{ font-size:.86em; }
.center{ text-align:center; }
.nowrap{ white-space:nowrap; }
.mono{ font-family:"SF Mono",Menlo,Consolas,monospace; }

.grad-text{
  background:var(--grad-brand); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* ---------------- 顶部导航 ---------------- */
.topbar{
  position:sticky; top:0; z-index:60;
  background:rgba(255,253,249,.82);
  backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--c-border);
  flex-shrink:0;
}
.topbar-inner{
  max-width:var(--maxw); margin:0 auto; padding:0 20px;
  height:64px; display:flex; align-items:center; gap:22px;
}
.brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand-mark{
  width:36px; height:36px; border-radius:12px; flex-shrink:0;
  background:var(--grad-brand); color:#fff; font-weight:800; font-size:18px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px rgba(127,163,140,.32);
}
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-text b{ font-size:1.04em; letter-spacing:.4px; }
.brand-text em{ font-style:normal; font-size:.72em; color:var(--c-text-3); }

.nav{ display:flex; gap:4px; flex:1; min-width:0; }
.nav a{
  padding:8px 13px; border-radius:11px; color:var(--c-text-2);
  font-size:.95em; white-space:nowrap; transition:.18s; position:relative;
}
.nav a:hover{ background:var(--c-surface-2); color:var(--c-text); }
.nav a.active{ background:var(--grad-brand); color:#fff; font-weight:600; box-shadow:0 6px 16px rgba(127,163,140,.30); }

.topbar-right{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.icon-btn{
  position:relative; width:36px; height:36px; border-radius:11px;
  border:1px solid var(--c-border); background:var(--c-surface);
  color:var(--c-text-2); display:flex; align-items:center; justify-content:center; transition:.18s;
}
.icon-btn:hover{ border-color:var(--c-primary); color:var(--c-primary); transform:translateY(-1px); }
.icon-btn .ico{ font-size:14px; font-weight:600; }
.badge{
  position:absolute; top:-5px; right:-5px; min-width:17px; height:17px;
  padding:0 4px; border-radius:9px; background:var(--c-accent); color:#fff;
  font-size:10px; line-height:17px; text-align:center; font-weight:700;
  box-shadow:0 2px 6px rgba(210,147,119,.5);
}
.user-slot{ display:flex; align-items:center; gap:8px; }
.avatar{
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  background:var(--c-primary-soft); color:var(--c-primary);
  display:flex; align-items:center; justify-content:center;
  font-size:.82em; font-weight:700; border:1px solid var(--c-border);
}
.avatar.lg{ width:56px; height:56px; font-size:1.15em; }
.avatar.sm{ width:26px; height:26px; font-size:.7em; }
.hamburger{ display:none; border:none; background:none; font-size:22px; color:var(--c-text-2); }

.verify-strip{
  background:linear-gradient(90deg,#fbf3e6,#f6ecdc); border-top:1px solid #ecdcc4;
  color:#9a6a3a; font-size:.87em; padding:8px 20px; text-align:center;
}
.verify-strip a{ color:var(--c-accent); font-weight:600; text-decoration:underline; }

/* 离线提示条（P2-⑨ 离线可读） */
.offline-bar{
  background:linear-gradient(90deg,#fff4e0,#ffe9c7); border-bottom:1px solid #f0c98a;
  color:#8a5a16; font-size:.86em; padding:7px 20px; text-align:center; position:sticky; top:0; z-index:60;
}

/* 设置卡片（含 P2-⑩ 推送开关） */
.set-card{ background:#fff; border:1px solid #e6e9e8; border-radius:12px; padding:16px 18px; margin-top:16px; }
.set-card-h{ font-weight:700; font-size:1.02em; margin-bottom:6px; }

/* 头像（P2-⑪） */
.mini-avatar{ width:28px; height:28px; border-radius:50%; object-fit:cover; vertical-align:middle; }
.avatar-row{ display:flex; align-items:center; gap:12px; margin:6px 0 4px; }
.avatar-prev{ width:56px; height:56px; border-radius:50%; object-fit:cover; background:#eef1f0; display:flex; align-items:center; justify-content:center; font-size:1.4em; font-weight:700; color:#5E8B7E; overflow:hidden; }
.avatar-prev img{ width:100%; height:100%; object-fit:cover; }

/* ---------------- 布局 ---------------- */
.view{ width:100%; max-width:var(--maxw); margin:0 auto; padding:24px 20px 60px; min-height:62vh; flex:1 1 auto; animation:fadeUp .5s both; }
.view.wide{ max-width:100%; }

.page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap; }
.page-head h2{ font-size:1.5em; }
.page-head h1{ font-size:1.7em; }
.page-head .sub{ color:var(--c-text-3); font-size:.9em; margin-top:2px; }

.grid{ display:grid; gap:16px; }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }
.g-side{ grid-template-columns:1fr 320px; align-items:start; }
.flex{ display:flex; }
.between{ justify-content:space-between; }
.aic{ align-items:center; }
.wrap{ flex-wrap:wrap; }
.gap6{ gap:6px; } .gap8{ gap:8px; } .gap12{ gap:12px; } .gap16{ gap:16px; }
.col{ display:flex; flex-direction:column; }
.mt8{ margin-top:8px; } .mt12{ margin-top:12px; } .mt16{ margin-top:16px; } .mt24{ margin-top:24px; }
.mb8{ margin-bottom:8px; } .mb12{ margin-bottom:12px; } .mb16{ margin-bottom:16px; }
.f1{ flex:1; min-width:0; }

/* ---------------- 卡片（轻盈悬浮） ---------------- */
.card{
  background:var(--c-surface); border:1px solid var(--c-border);
  border-radius:var(--radius); box-shadow:var(--shadow-card);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  animation:fadeUp .5s both;
}
.card-pad{ padding:18px; }
.card-hd{
  padding:14px 18px; border-bottom:1px solid var(--c-border);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.card-hd h3{ font-size:1.02em; }
.card-bd{ padding:16px 18px; }
.card-ft{ padding:12px 18px; border-top:1px solid var(--c-border); background:var(--c-surface-2); border-radius:0 0 var(--radius) var(--radius); }
.card.hover{ cursor:pointer; }
.card.hover:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--c-primary-2); }
.card.link{ text-decoration:none; }

.section-title{ display:flex; align-items:center; justify-content:space-between; margin:28px 0 14px; }
.section-title h3{ font-size:1.18em; }
.section-title h3 span{ color:var(--c-text-3); font-weight:400; font-size:.78em; margin-left:8px; }
.link{ color:var(--c-primary); font-size:.9em; font-weight:600; }
.link:hover{ text-decoration:underline; }

/* ---------------- 按钮（柔和渐变） ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 17px; border-radius:13px;
  border:1px solid var(--c-border-2); background:var(--c-surface); color:var(--c-text);
  font-size:.93em; font-weight:600; transition:.18s; white-space:nowrap;
}
.btn:hover{ transform:translateY(-1px); border-color:var(--c-primary); color:var(--c-primary); background:var(--c-primary-soft); }
.btn.primary{ background:var(--grad-brand); border-color:transparent; color:#fff; box-shadow:0 8px 20px rgba(127,163,140,.30); }
.btn.primary:hover{ background:var(--grad-brand); color:#fff; filter:brightness(1.06); }
.btn.accent{ background:var(--grad-warm); border-color:transparent; color:#fff; box-shadow:0 8px 20px rgba(210,147,119,.30); }
.btn.accent:hover{ filter:brightness(1.04); color:#fff; }
.btn.danger{ color:var(--c-red); border-color:#e7c8c4; }
.btn.danger:hover{ background:var(--c-red-soft); border-color:var(--c-red); color:var(--c-red); }
.btn.ghost{ border-color:transparent; background:transparent; color:var(--c-text-2); }
.btn.ghost:hover{ background:var(--c-surface-2); color:var(--c-text); }
.btn.sm{ padding:6px 12px; font-size:.86em; border-radius:11px; }
.btn.lg{ padding:12px 26px; font-size:1em; }
.btn.block{ width:100%; }
.btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; }
.btn:disabled:hover{ background:var(--c-surface); border-color:var(--c-border-2); color:var(--c-text); }

/* ---------------- 标签 ---------------- */
.tag{
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px; border-radius:20px; font-size:.78em; font-weight:600;
  background:var(--c-gray-soft); color:var(--c-text-2); white-space:nowrap;
}
.tag.green{ background:var(--c-primary-soft); color:var(--c-primary); }
.tag.orange{ background:var(--c-accent-soft); color:#b06a4d; }
.tag.blue{ background:var(--c-blue-soft); color:var(--c-blue); }
.tag.red{ background:var(--c-red-soft); color:var(--c-red); }
.tag.amber{ background:var(--c-amber-soft); color:var(--c-amber); }
.tag.outline{ background:transparent; border:1px solid var(--c-border-2); color:var(--c-text-2); }
.dot{ width:6px; height:6px; border-radius:50%; background:currentColor; display:inline-block; }

.price{ color:var(--c-accent); font-weight:800; }
.price b{ font-size:1.3em; }
.price-red{ color:var(--c-red); font-weight:700; }

/* ---------------- 表单 ---------------- */
.field{ margin-bottom:14px; }
.field > label{ display:block; font-size:.88em; color:var(--c-text-2); margin-bottom:5px; font-weight:600; }
.field > label i{ color:var(--c-red); font-style:normal; margin-left:2px; }
.input, .select, .textarea{
  width:100%; padding:10px 13px; border-radius:13px;
  border:1px solid var(--c-border-2); background:var(--c-surface);
  color:var(--c-text); font-size:.95em; font-family:inherit; transition:.15s;
}
.input:focus,.select:focus,.textarea:focus{
  outline:none; border-color:var(--c-primary); box-shadow:0 0 0 4px var(--c-primary-soft);
}
.textarea{ min-height:92px; resize:vertical; line-height:1.65; }
.hint{ font-size:.82em; color:var(--c-text-3); margin-top:4px; }
.hint.warn{ color:var(--c-amber); }
.hint.err{ color:var(--c-red); }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.row3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }

.chips{ display:flex; flex-wrap:wrap; gap:7px; }
.chip{
  padding:6px 14px; border-radius:20px; border:1px solid var(--c-border-2);
  background:var(--c-surface); color:var(--c-text-2); font-size:.87em; transition:.15s;
}
.chip:hover{ border-color:var(--c-primary); color:var(--c-primary); }
.chip.on{ background:var(--grad-brand); border-color:transparent; color:#fff; font-weight:600; }

.radio-cards{ display:grid; gap:9px; }
.radio-card{
  display:flex; gap:10px; padding:11px 13px; border-radius:13px;
  border:1px solid var(--c-border-2); background:var(--c-surface); transition:.15s; align-items:flex-start;
}
.radio-card:hover{ border-color:var(--c-primary); }
.radio-card.on{ border-color:var(--c-primary); background:var(--c-primary-soft); }
.radio-card input{ margin-top:4px; accent-color:var(--c-primary); }
.radio-card b{ font-size:.94em; display:block; }
.radio-card span{ font-size:.83em; color:var(--c-text-2); }

/* ---------------- 首页 Hero（暖调遮罩，保留真实社区照片） ---------------- */
.hero{
  position:relative; border-radius:22px; overflow:hidden; margin-bottom:8px;
  height:320px; display:flex; align-items:flex-end; box-shadow:var(--shadow-lg);
  animation:fadeUp .55s both;
}
.hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(118deg, rgba(74,86,68,.78) 0%, rgba(120,92,66,.55) 46%, rgba(60,52,42,.30) 100%),
    radial-gradient(620px 320px at 90% 0%, rgba(210,147,119,.24), transparent 60%);
}
.hero-body{ position:relative; z-index:2; padding:30px 34px; color:#fff; width:100%; }
.hero-body h1{ font-size:1.95em; letter-spacing:.6px; text-shadow:0 2px 12px rgba(0,0,0,.34); }
.hero-body p{ opacity:.94; margin-top:7px; font-size:1.0em; font-weight:500; }
.hero-stats{ display:flex; gap:30px; margin-top:16px; flex-wrap:wrap; }
.hero-stats div b{ display:block; font-size:1.6em; line-height:1.2; background:linear-gradient(135deg,#fff,#f3e7da); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero-stats div span{ font-size:.82em; opacity:.88; }

.quick-entry{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-top:18px; }
.qe{
  background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius);
  padding:18px 10px; text-align:center; transition:.2s; box-shadow:var(--shadow-card);
  position:relative; overflow:hidden;
}
.qe::before{ content:""; position:absolute; inset:0; background:var(--grad-brand); opacity:0; transition:.2s; }
.qe:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--c-primary-2); }
.qe:hover::before{ opacity:.06; }
.qe .qi{ font-size:25px; display:block; margin-bottom:7px; position:relative; }
.qe b{ font-size:.92em; display:block; position:relative; }
.qe span{ font-size:.76em; color:var(--c-text-3); position:relative; }

/* ---------------- 列表项 ---------------- */
.list-item{
  display:flex; gap:14px; padding:15px 18px; border-bottom:1px solid var(--c-border);
  transition:.15s; animation:fadeUp .5s both;
}
.list-item:last-child{ border-bottom:none; }
.list-item:hover{ background:var(--c-surface-2); }
.li-title{ font-weight:600; font-size:1em; margin-bottom:3px; }
.li-meta{ font-size:.83em; color:var(--c-text-3); display:flex; gap:12px; flex-wrap:wrap; }
.li-desc{ font-size:.9em; color:var(--c-text-2); margin:4px 0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.thumb{
  width:98px; height:74px; border-radius:var(--radius-s); flex-shrink:0;
  background:var(--c-surface-2); display:flex; align-items:center; justify-content:center;
  font-size:26px; border:1px solid var(--c-border);
}
.thumb.sq{ width:100%; height:auto; aspect-ratio:1/1; font-size:44px; border-radius:var(--radius) var(--radius) 0 0; border:none; border-bottom:1px solid var(--c-border); }

.empty{ padding:44px 20px; text-align:center; color:var(--c-text-3); }
.empty .ei{ font-size:38px; opacity:.4; display:block; margin-bottom:10px; }

/* ---------------- 时间线 / 状态机 ---------------- */
.timeline{ position:relative; padding-left:22px; }
.timeline::before{ content:""; position:absolute; left:6px; top:6px; bottom:6px; width:2px; background:var(--c-border); }
.tl-item{ position:relative; padding-bottom:15px; }
.tl-item:last-child{ padding-bottom:0; }
.tl-item::before{
  content:""; position:absolute; left:-20px; top:6px; width:10px; height:10px;
  border-radius:50%; background:var(--c-surface); border:2px solid var(--c-border-2);
}
.tl-item.done::before{ background:var(--c-primary); border-color:var(--c-primary); }
.tl-item.now::before{ background:var(--c-accent); border-color:var(--c-accent); box-shadow:0 0 0 4px var(--c-accent-soft); }
.tl-item.bad::before{ background:var(--c-red); border-color:var(--c-red); }
.tl-t{ font-size:.94em; font-weight:600; }
.tl-d{ font-size:.82em; color:var(--c-text-3); }

.steps{ display:flex; align-items:center; gap:0; flex-wrap:wrap; }
.step{ display:flex; align-items:center; gap:7px; font-size:.85em; color:var(--c-text-3); }
.step .sn{
  width:21px; height:21px; border-radius:50%; flex-shrink:0;
  background:var(--c-gray-soft); color:var(--c-text-3);
  display:flex; align-items:center; justify-content:center; font-size:.78em; font-weight:600;
}
.step.done .sn{ background:var(--grad-brand); color:#fff; }
.step.done{ color:var(--c-text); }
.step.now .sn{ background:var(--grad-warm); color:#fff; }
.step.now{ color:var(--c-accent); font-weight:600; }
.step-arrow{ width:22px; height:1px; background:var(--c-border-2); margin:0 8px; flex-shrink:0; }

/* ---------------- 表格 ---------------- */
.table{ width:100%; border-collapse:collapse; font-size:.92em; }
.table th{
  text-align:left; padding:10px 12px; background:var(--c-surface-2);
  color:var(--c-text-2); font-weight:600; font-size:.9em; border-bottom:1px solid var(--c-border); white-space:nowrap;
}
.table td{ padding:10px 12px; border-bottom:1px solid var(--c-border); vertical-align:middle; }
.table tr:last-child td{ border-bottom:none; }
.table tbody tr:hover{ background:var(--c-surface-2); }
.table-wrap{ overflow-x:auto; }

/* ---------------- 进度 / 数据 ---------------- */
.bar{ height:7px; border-radius:5px; background:var(--c-gray-soft); overflow:hidden; }
.bar > i{ display:block; height:100%; border-radius:5px; background:var(--grad-brand); }
.bar > i.orange{ background:var(--grad-warm); }
.bar > i.red{ background:var(--c-red); }

.kpi{ padding:15px 16px; border-radius:var(--radius); background:var(--c-surface); border:1px solid var(--c-border); box-shadow:var(--shadow-card); }
.kpi .kv{ font-size:1.55em; font-weight:800; line-height:1.2; }
.kpi .kl{ font-size:.82em; color:var(--c-text-3); }
.kpi .kd{ font-size:.78em; margin-top:4px; }
.kpi .kd.up{ color:var(--c-red); }
.kpi .kd.down{ color:var(--c-primary); }

.credit-ring{
  width:96px; height:96px; border-radius:50%; flex-shrink:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:conic-gradient(var(--c-primary) var(--pct,70%), var(--c-gray-soft) 0);
  position:relative;
}
.credit-ring::before{ content:""; position:absolute; inset:7px; border-radius:50%; background:var(--c-surface); }
.credit-ring b{ position:relative; font-size:1.5em; line-height:1; }
.credit-ring span{ position:relative; font-size:.7em; color:var(--c-text-3); }

/* ---------------- 弹层 ---------------- */
.modal-mask,.drawer-mask{
  position:fixed; inset:0; z-index:400; background:rgba(60,50,40,.42);
  display:flex; align-items:center; justify-content:center; padding:20px;
  backdrop-filter:blur(3px);
}
.modal{
  background:var(--c-surface); border-radius:20px; box-shadow:var(--shadow-lg);
  width:100%; max-width:560px; max-height:88vh; display:flex; flex-direction:column;
  animation:pop .2s ease;
}
.modal.wide{ max-width:760px; }
@keyframes pop{ from{ transform:translateY(16px) scale(.98); opacity:0 } to{ transform:none; opacity:1 } }
.modal-head{ padding:17px 21px; border-bottom:1px solid var(--c-border); display:flex; align-items:center; justify-content:space-between; }
.modal-head h3{ font-size:1.08em; }
.modal-close{ border:none; background:none; font-size:24px; line-height:1; color:var(--c-text-3); width:32px; height:32px; border-radius:8px; }
.modal-close:hover{ background:var(--c-surface-2); color:var(--c-text); }
.modal-body{ padding:21px; overflow-y:auto; }

.drawer-mask{ justify-content:flex-end; padding:0; }
.drawer{
  width:400px; max-width:100%; height:100%; background:var(--c-surface);
  display:flex; flex-direction:column; box-shadow:var(--shadow-lg);
  animation:slidein .22s ease;
}
@keyframes slidein{ from{ transform:translateX(34px); opacity:.4 } to{ transform:none; opacity:1 } }
.drawer-head{ padding:16px 18px; border-bottom:1px solid var(--c-border); display:flex; align-items:center; justify-content:space-between; }
.drawer-body{ flex:1; overflow-y:auto; }

.toast-wrap{ position:fixed; bottom:28px; left:50%; transform:translateX(-50%); z-index:200; display:flex; flex-direction:column; gap:8px; align-items:center; }
.toast{
  padding:11px 22px; border-radius:26px; background:#4a4138; color:#fff;
  font-size:.9em; box-shadow:var(--shadow-lg); animation:tin .2s ease; max-width:80vw; text-align:center;
}
.toast.ok{ background:var(--grad-brand); }
.toast.err{ background:var(--c-red); }
.toast.warn{ background:var(--c-amber); }
@keyframes tin{ from{ transform:translateY(14px); opacity:0 } to{ transform:none; opacity:1 } }

/* ---------------- 聊天 ---------------- */
.chat{ display:flex; flex-direction:column; height:420px; }
.chat-log{ flex:1; overflow-y:auto; padding:14px; background:var(--c-surface-2); display:flex; flex-direction:column; gap:10px; }
.bubble{ max-width:74%; padding:9px 13px; border-radius:14px; font-size:.92em; line-height:1.55; }
.bubble.me{ align-self:flex-end; background:var(--grad-brand); color:#fff; border-bottom-right-radius:4px; }
.bubble.other{ align-self:flex-start; background:var(--c-surface); border:1px solid var(--c-border); border-bottom-left-radius:4px; }
.bubble.sys{ align-self:center; background:var(--c-amber-soft); color:var(--c-amber); font-size:.82em; max-width:90%; text-align:center; border-radius:8px; }
.bubble-time{ font-size:.72em; opacity:.6; margin-top:3px; }
.chat-input{ display:flex; gap:8px; padding:12px; border-top:1px solid var(--c-border); }

/* ---------------- 方案文档页 ---------------- */
.doc-layout{ display:grid; grid-template-columns:230px 1fr; gap:24px; align-items:start; }
.doc-toc{ position:sticky; top:84px; }
.doc-toc a{ display:block; padding:6px 11px; border-radius:7px; font-size:.88em; color:var(--c-text-2); border-left:2px solid transparent; }
.doc-toc a:hover{ background:var(--c-surface-2); color:var(--c-text); }
.doc-toc a.on{ color:var(--c-primary); border-left-color:var(--c-primary); background:var(--c-primary-soft); font-weight:600; }
.doc-body{ background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius); padding:30px 34px; box-shadow:var(--shadow-card); }
.doc-body h2{ font-size:1.3em; margin:34px 0 12px; padding-bottom:9px; border-bottom:2px solid var(--c-primary-soft); }
.doc-body h2:first-child{ margin-top:0; }
.doc-body h3{ font-size:1.06em; margin:22px 0 8px; color:var(--c-primary); }
.doc-body h4{ font-size:.97em; margin:16px 0 6px; }
.doc-body p{ margin:9px 0; color:var(--c-text); line-height:1.85; }
.doc-body li{ margin:5px 0; line-height:1.8; }
.doc-body table{ width:100%; border-collapse:collapse; margin:14px 0; font-size:.9em; }
.doc-body th,.doc-body td{ border:1px solid var(--c-border); padding:8px 11px; text-align:left; vertical-align:top; }
.doc-body th{ background:var(--c-surface-2); font-weight:600; }
.doc-body code{ background:var(--c-surface-2); padding:1px 6px; border-radius:4px; font-size:.9em; font-family:"SF Mono",Consolas,monospace; }

.callout{ padding:13px 16px; border-radius:var(--radius-s); margin:14px 0; border-left:3px solid var(--c-primary); background:var(--c-primary-soft); font-size:.92em; }
.callout.warn{ border-left-color:var(--c-amber); background:var(--c-amber-soft); }
.callout.bad{ border-left-color:var(--c-red); background:var(--c-red-soft); }
.callout.info{ border-left-color:var(--c-blue); background:var(--c-blue-soft); }
.callout b{ display:block; margin-bottom:3px; }

.fix-item{ display:grid; grid-template-columns:26px 1fr; gap:12px; padding:14px 0; border-bottom:1px dashed var(--c-border); }
.fix-item:last-child{ border-bottom:none; }
.fix-no{ width:26px; height:26px; border-radius:8px; background:var(--c-red-soft); color:var(--c-red); display:flex; align-items:center; justify-content:center; font-size:.8em; font-weight:700; }
.fix-old{ font-size:.89em; color:var(--c-text-2); margin:4px 0; }
.fix-new{ font-size:.89em; color:var(--c-primary); background:var(--c-primary-soft); padding:8px 11px; border-radius:7px; margin-top:6px; }

/* ---------------- 架构图 ---------------- */
.arch{ display:flex; flex-direction:column; gap:9px; }
.arch-layer{ border:1px solid var(--c-border); border-radius:var(--radius-s); overflow:hidden; background:var(--c-surface); }
.arch-layer > .al-h{ padding:7px 13px; background:var(--c-surface-2); font-size:.84em; font-weight:600; color:var(--c-text-2); display:flex; justify-content:space-between; align-items:center; }
.arch-layer > .al-b{ padding:11px 13px; display:flex; flex-wrap:wrap; gap:8px; }
.arch-box{ padding:7px 13px; border-radius:7px; font-size:.85em; background:var(--c-primary-soft); color:var(--c-primary); border:1px solid #d7e3d6; font-weight:500; }
.arch-box.b{ background:var(--c-blue-soft); color:var(--c-blue); border-color:#d4e2ec; }
.arch-box.o{ background:var(--c-accent-soft); color:#b06a4d; border-color:#f0dccd; }
.arch-box.g{ background:var(--c-gray-soft); color:var(--c-text-2); border-color:var(--c-border-2); }
.arch-box.new::after{ content:"NEW"; font-size:.62em; margin-left:5px; padding:1px 4px; border-radius:4px; background:var(--c-red); color:#fff; vertical-align:top; }

/* ---------------- 响应式 ---------------- */
@media (max-width:1080px){
  .quick-entry{ grid-template-columns:repeat(3,1fr); }
  .g4{ grid-template-columns:repeat(2,1fr); }
  .g-side{ grid-template-columns:1fr; }
  .doc-layout{ grid-template-columns:1fr; }
  .doc-toc{ position:static; display:none; }
}
@media (max-width:860px){
  .nav{ display:none; position:absolute; top:64px; left:0; right:0; flex-direction:column; background:var(--c-surface); padding:10px; border-bottom:1px solid var(--c-border); box-shadow:var(--shadow-lg); gap:2px; }
  .nav.open{ display:flex; }
  .hamburger{ display:block; }
  .g3,.g2{ grid-template-columns:1fr; }
  .row2,.row3{ grid-template-columns:1fr; }
  .brand-text em{ display:none; }
  .hero-body{ padding:20px; }
  .hero-body h1{ font-size:1.4em; }
  .doc-body{ padding:20px 18px; }
  .drawer{ width:100%; }
  .footer-inner{ flex-direction:column; gap:4px; text-align:center; padding:14px 16px; }
}

/* ---------------- 页脚 ---------------- */
.footer{ border-top:1px solid rgba(127,127,127,.1); background:linear-gradient(180deg,#fafcf9 0%,#f5f7f4 100%); margin-top:auto; flex-shrink:0; }
.footer-inner{ max-width:var(--maxw); margin:0 auto; padding:18px 24px; display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap; font-size:.82em; color:var(--c-text-3); line-height:1.8; }
.fb-brand{ font-weight:700; color:var(--c-text); white-space:nowrap; }
.fb-sep{ color:rgba(127,127,127,.25); margin:0 2px; user-select:none; }
.fb-link{ color:var(--c-text-2); text-decoration:none; padding:2px 6px; border-radius:4px; transition:all .15s; white-space:nowrap; }
.fb-link:hover{ color:var(--c-primary); background:rgba(94,139,126,.08); }
.fb-copy{ color:var(--c-text-2); font-weight:500; white-space:nowrap; }
.fb-icp{ color:var(--c-text-3); text-decoration:none; transition:color .15s; white-space:nowrap; }
.fb-icp:hover{ color:var(--c-primary); }

/* ---------------- 入场动效 ---------------- */
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .modal-mask{ animation:none !important; }
}

/* P2-⑧ 键盘可见焦点：仅键盘用户显示清晰描边，避免鼠标点击出现难看轮廓 */
:focus-visible{ outline:2px solid var(--c-primary, #4ea894); outline-offset:2px; border-radius:4px; }
.btn:focus-visible, .admin-tab:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{ outline:2px solid var(--c-primary, #4ea894); outline-offset:2px; }
/* 提升对比度：表单控件聚焦时加底色提示（弱光环境下更清晰） */
input:focus, select:focus, textarea:focus{ outline:none; box-shadow:0 0 0 2px var(--c-primary-soft, #e6f1ee) inset, 0 0 0 2px var(--c-primary, #4ea894); }

/* ============================================================
 * 皮肤风格设置（data-skin 切换，变量级覆盖，组件层零改动）
 * 默认（暖米·温馨）即上方 :root 取值；以下为不同取向预设
 * ============================================================ */
:root[data-skin="jade"]{
  --c-primary:#5E8B7E; --c-primary-2:#7BAE9F; --c-primary-3:#A7C7BC; --c-primary-soft:#eaf2ef;
  --c-accent:#C98A5E; --c-accent-2:#DDB795; --c-accent-soft:#f6ede2;
  --grad-brand:linear-gradient(135deg,#6E9C8F 0%,#8FB8A9 100%);
  --grad-warm:linear-gradient(135deg,#D2A37C 0%,#E2BC9C 100%);
  --grad-ink:linear-gradient(135deg,#4f6b62 0%,#6e8a72 100%);
  --c-bg:#eef1f0; --c-surface:#ffffff; --c-surface-2:#e6ecea; --c-border:#dde6e2; --c-border-2:#c9d6d0;
  --c-text:#3a403c; --c-text-2:#646c66; --c-text-3:#9aa39c;
  --c-red:#b85c54; --c-red-soft:#f5e6e3; --c-blue:#5f8aa8; --c-blue-soft:#e8f0f5;
  --c-amber:#bd9348; --c-amber-soft:#f4eede; --c-gray-soft:#e3eae7;
  --shadow:0 1px 2px rgba(60,80,72,.05), 0 8px 22px rgba(60,80,72,.06);
  --shadow-lg:0 14px 40px rgba(60,80,72,.13); --shadow-card:0 6px 18px rgba(60,80,72,.07);
}
:root[data-skin="indigo"]{
  --c-primary:#4F6D9C; --c-primary-2:#6E89B5; --c-primary-3:#98A9CC; --c-primary-soft:#e9eef6;
  --c-accent:#C58A5B; --c-accent-2:#DDB592; --c-accent-soft:#f5ece2;
  --grad-brand:linear-gradient(135deg,#5C7DAE 0%,#7C98C2 100%);
  --grad-warm:linear-gradient(135deg,#C99A6E 0%,#DDBA92 100%);
  --grad-ink:linear-gradient(135deg,#3f5a86 0%,#5a7aab 100%);
  --c-bg:#eef1f6; --c-surface:#ffffff; --c-surface-2:#e6ebf4; --c-border:#dde4ef; --c-border-2:#c8d3e2;
  --c-text:#353c49; --c-text-2:#5d6576; --c-text-3:#95a0b2;
  --c-red:#b85c54; --c-red-soft:#f5e6e3; --c-blue:#5f86b3; --c-blue-soft:#e8f0f7;
  --c-amber:#bd9348; --c-amber-soft:#f4eede; --c-gray-soft:#e4eaf2;
  --shadow:0 1px 2px rgba(55,75,120,.05), 0 8px 22px rgba(55,75,120,.06);
  --shadow-lg:0 14px 40px rgba(55,75,120,.13); --shadow-card:0 6px 18px rgba(55,75,120,.07);
}
:root[data-skin="sakura"]{
  --c-primary:#C77E9E; --c-primary-2:#D49DB6; --c-primary-3:#E6C2D2; --c-primary-soft:#fbeef4;
  --c-accent:#E2925E; --c-accent-2:#EEB08C; --c-accent-soft:#fdeede;
  --grad-brand:linear-gradient(135deg,#D08DAE 0%,#E3B0C7 100%);
  --grad-warm:linear-gradient(135deg,#E89E72 0%,#F0B98F 100%);
  --grad-ink:linear-gradient(135deg,#b56a8c 0%,#cd8eaa 100%);
  --c-bg:#fbf2f5; --c-surface:#fffafc; --c-surface-2:#f7e9ef; --c-border:#f1dde6; --c-border-2:#e7c9d6;
  --c-text:#4a3a42; --c-text-2:#6f5a63; --c-text-3:#a78e98;
  --c-red:#c0587a; --c-red-soft:#fbe4ee; --c-blue:#6f95b3; --c-blue-soft:#e9f0f5;
  --c-amber:#c79a4e; --c-amber-soft:#f6efdf; --c-gray-soft:#f3e6ec;
  --shadow:0 1px 2px rgba(120,70,95,.05), 0 8px 22px rgba(120,70,95,.06);
  --shadow-lg:0 14px 40px rgba(120,70,95,.13); --shadow-card:0 6px 18px rgba(120,70,95,.07);
}
:root[data-skin="ink"]{
  --c-primary:#3A4F47; --c-primary-2:#5A6F66; --c-primary-3:#87A096; --c-primary-soft:#eceeec;
  --c-accent:#B8443A; --c-accent-2:#D06A5A; --c-accent-soft:#f6e6e3;
  --grad-brand:linear-gradient(135deg,#3f544c 0%,#5d756c 100%);
  --grad-warm:linear-gradient(135deg,#C05048 0%,#D2705E 100%);
  --grad-ink:linear-gradient(135deg,#2c3531 0%,#485a52 100%);
  --c-bg:#f3efe6; --c-surface:#fbf8f1; --c-surface-2:#ece5d8; --c-border:#e2d9c8; --c-border-2:#d0c4ac;
  --c-text:#2e2a25; --c-text-2:#5b5249; --c-text-3:#978a78;
  --c-red:#b8443a; --c-red-soft:#f6e6e3; --c-blue:#5f7d8a; --c-blue-soft:#e7eef1;
  --c-amber:#b58a3e; --c-amber-soft:#f3ecdc; --c-gray-soft:#e7e0d2;
  --shadow:0 1px 2px rgba(60,50,30,.06), 0 8px 22px rgba(60,50,30,.07);
  --shadow-lg:0 14px 40px rgba(60,50,30,.14); --shadow-card:0 6px 18px rgba(60,50,30,.08);
}
:root[data-skin="forest"]{
  --c-primary:#5C7355; --c-primary-2:#7C9170; --c-primary-3:#A6B59B; --c-primary-soft:#ebefe7;
  --c-accent:#B98A4E; --c-accent-2:#D2A874; --c-accent-soft:#f4ecdd;
  --grad-brand:linear-gradient(135deg,#6b8263 0%,#8ba07f 100%);
  --grad-warm:linear-gradient(135deg,#C69862 0%,#D8B488 100%);
  --grad-ink:linear-gradient(135deg,#4c6047 0%,#6a8060 100%);
  --c-bg:#e9ebe4; --c-surface:#f6f7f2; --c-surface-2:#e0e3d8; --c-border:#d6dacd; --c-border-2:#c2c8b4;
  --c-text:#3a4035; --c-text-2:#5f6753; --c-text-3:#949b87;
  --c-red:#a85c4e; --c-red-soft:#f1e4e0; --c-blue:#5f8295; --c-blue-soft:#e6eef1;
  --c-amber:#a9893f; --c-amber-soft:#f0e9d8; --c-gray-soft:#e1e4d9;
  --shadow:0 1px 2px rgba(55,65,45,.05), 0 8px 22px rgba(55,65,45,.06);
  --shadow-lg:0 14px 40px rgba(55,65,45,.13); --shadow-card:0 6px 18px rgba(55,65,45,.07);
}
:root[data-skin="dark"]{
  --c-primary:#7FB89F; --c-primary-2:#9DCBB6; --c-primary-3:#B7D8C8; --c-primary-soft:#1f3330;
  --c-accent:#E0A57E; --c-accent-2:#EFC0A0; --c-accent-soft:#33271d;
  --grad-brand:linear-gradient(135deg,#84c0a8,#a6d8c6);
  --grad-warm:linear-gradient(135deg,#e8ac82,#efbf9e);
  --grad-ink:linear-gradient(135deg,#6a9686,#8ab9a7);
  --c-bg:#191c1a; --c-surface:#22262a; --c-surface-2:#2b3034; --c-border:#33393d; --c-border-2:#444c52;
  --c-text:#e8ecdf; --c-text-2:#b9c2b6; --c-text-3:#8a9589;
  --c-red:#e07a70; --c-red-soft:#3a2622; --c-blue:#8cb4d4; --c-blue-soft:#1f2c36;
  --c-amber:#e0b45c; --c-amber-soft:#332b1c; --c-gray-soft:#2b3034;
  --shadow:0 1px 2px rgba(0,0,0,.18), 0 8px 22px rgba(0,0,0,.22);
  --shadow-lg:0 14px 40px rgba(0,0,0,.35); --shadow-card:0 6px 18px rgba(0,0,0,.25);
}
:root[data-skin="lavender"]{
  --c-primary:#8E7CC3; --c-primary-2:#A99AD6; --c-primary-3:#C8BCE6; --c-primary-soft:#efeaf7;
  --c-accent:#C77BA6; --c-accent-2:#DE9BC3; --c-accent-soft:#f7eef4;
  --grad-brand:linear-gradient(135deg,#9b8bd0,#b9aee0);
  --grad-warm:linear-gradient(135deg,#cf8dbd,#e3afce);
  --grad-ink:linear-gradient(135deg,#7a6ba8,#9e90c5);
  --c-bg:#f4f1f8; --c-surface:#fffdfd; --c-surface-2:#eceaf4; --c-border:#e4e0ee; --c-border-2:#d3cde3;
  --c-text:#3b3548; --c-text-2:#635c72; --c-text-3:#9b93ad;
  --c-red:#c0586e; --c-red-soft:#f7e6ea; --c-blue:#6f8fb3; --c-blue-soft:#e9f0f6;
  --c-amber:#c79a4e; --c-amber-soft:#f6efdf; --c-gray-soft:#ebe7f1;
  --shadow:0 1px 2px rgba(80,60,100,.05), 0 8px 22px rgba(80,60,100,.06);
  --shadow-lg:0 14px 40px rgba(80,60,100,.13); --shadow-card:0 6px 18px rgba(80,60,100,.07);
}
:root[data-skin="mint"]{
  --c-primary:#4FB3A4; --c-primary-2:#74C8BC; --c-primary-3:#A6DCD3; --c-primary-soft:#e6f5f2;
  --c-accent:#5FB57E; --c-accent-2:#84CB9A; --c-accent-soft:#e9f5ec;
  --grad-brand:linear-gradient(135deg,#5cbdb0,#86cfc4);
  --grad-warm:linear-gradient(135deg,#6cc089,#8fd0a3);
  --grad-ink:linear-gradient(135deg,#3f8f82,#6abfb1);
  --c-bg:#eef6f4; --c-surface:#fffefd; --c-surface-2:#e3efeb; --c-border:#dcebe6; --c-border-2:#c8ded6;
  --c-text:#32433f; --c-text-2:#577069; --c-text-3:#91a6a0;
  --c-red:#c0585e; --c-red-soft:#f7e6e7; --c-blue:#5f8fb3; --c-blue-soft:#e9f0f5;
  --c-amber:#b8964a; --c-amber-soft:#f3ecdd; --c-gray-soft:#e1ebe7;
  --shadow:0 1px 2px rgba(50,90,80,.05), 0 8px 22px rgba(50,90,80,.06);
  --shadow-lg:0 14px 40px rgba(50,90,80,.13); --shadow-card:0 6px 18px rgba(50,90,80,.07);
}
:root[data-skin="sunset"]{
  --c-primary:#F08A5D; --c-primary-2:#F4A878; --c-primary-3:#F8C39E; --c-primary-soft:#fdeee5;
  --c-accent:#E5698C; --c-accent-2:#EE88A6; --c-accent-soft:#fce9f0;
  --grad-brand:linear-gradient(135deg,#f29368,#f6b08c);
  --grad-warm:linear-gradient(135deg,#ec7298,#f29bb4);
  --grad-ink:linear-gradient(135deg,#d4774f,#e89e72);
  --c-bg:#fff3ec; --c-surface:#fffdfb; --c-surface-2:#fdeae0; --c-border:#f5ddcf; --c-border-2:#eccab6;
  --c-text:#4a352b; --c-text-2:#75584a; --c-text-3:#ab8c7c;
  --c-red:#c05858; --c-red-soft:#f7e6e6; --c-blue:#6f95b3; --c-blue-soft:#e9f0f5;
  --c-amber:#c79a4e; --c-amber-soft:#f6efdf; --c-gray-soft:#f7ece4;
  --shadow:0 1px 2px rgba(140,80,50,.05), 0 8px 22px rgba(140,80,50,.06);
  --shadow-lg:0 14px 40px rgba(140,80,50,.13); --shadow-card:0 6px 18px rgba(140,80,50,.07);
}

/* ============================================================
 * 深色模式兜底：覆盖 style.css / patch.css 中未被 CSS 变量化的
 * 硬编码浅色（body 背景、顶栏、页脚、Hero 遮罩、登录门等）
 * ============================================================ */
:root[data-skin="dark"] body{ background:var(--c-bg); }
:root[data-skin="dark"] .topbar{ background:rgba(25,28,26,.85); }
:root[data-skin="dark"] .footer{ background:linear-gradient(180deg,#1a1d1b 0%,#161917 100%); border-top-color:rgba(255,255,255,.06); }
:root[data-skin="dark"] .verify-strip{ background:linear-gradient(90deg,#222a26,#2a2f2a); border-top-color:#33393d; color:#c9b48f; }
:root[data-skin="dark"] .toast{ background:#2a2f2a; }
:root[data-skin="dark"] .modal-mask,
:root[data-skin="dark"] .drawer-mask{ background:rgba(0,0,0,.55); }
:root[data-skin="dark"] .hero::after{ background:linear-gradient(118deg, rgba(15,20,16,.82) 0%, rgba(40,30,22,.6) 46%, rgba(10,15,12,.4) 100%), radial-gradient(620px 320px at 90% 0%, rgba(224,165,126,.2), transparent 60%); }
:root[data-skin="dark"] .auth-gate{ background:radial-gradient(900px 500px at 80% 10%, rgba(127,184,159,.18), transparent 60%), radial-gradient(900px 500px at 10% 90%, rgba(76,108,95,.22), transparent 60%), linear-gradient(135deg,#1a1e1c 0%,#252b28 55%,#1a1e1c 100%); }
:root[data-skin="dark"] .goods-cover{ background:linear-gradient(135deg,#2a2f2a,#383f3a); }
:root[data-skin="dark"] .tag.orange{ color:var(--c-accent); }