/* ============================================================
   嘟嘟有机农场 · 设计系统 v1.0
   一套 token，四端共用（官网 / 小程序 / 后台 / 农场端 PWA）
   原则：大地色、克制的视觉、不克制的交互（对齐 16 号文档）
   ============================================================ */

:root{
  /* ---------- 品牌色：取土地与作物的真实色 ---------- */
  --soil:#41321F;        /* 深耕土 · 主文字 */
  --loam:#6B4F35;        /* 壤土 · 次级文字 */
  --sprout:#5C8A4A;      /* 苗 · 主行动色 */
  --leaf:#2F5D3A;        /* 叶 · 深绿强调 */
  --dew:#C7DAC0;         /* 露 · 浅绿底 */
  --rice:#F5F1E8;        /* 米 · 页面底 */
  --paper:#FFFDF8;       /* 纸 · 卡片 */
  --sun:#D9A441;         /* 阳 · 徽标/高亮 */
  --clay:#B5533C;        /* 陶 · 警示 */
  --ash:#8A8172;         /* 灰烬 · 弱化 */
  --line:#E4DDCE;        /* 分割线 */
  --line-soft:#EFEAE0;

  /* 状态色（语义固定，不随主题变） */
  --ok:#4E7F52;
  --warn:#C98A2E;
  --danger:#B5533C;
  --info:#4A7A93;

  /* 地块四色（全端统一，来自 19R §4.1） */
  --plot-growing:#6FA25B;   /* 绿=在长 */
  --plot-resting:#D9C27A;   /* 黄=歇 */
  --plot-harvesting:#6E9CB8;/* 蓝=本周采 */
  --plot-vacant:#CFC9BC;    /* 灰=未认领 */

  /* ---------- 字体 ---------- */
  --font:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",-apple-system,"Segoe UI",sans-serif;
  --font-serif:"Songti SC","SimSun",Georgia,serif;
  --font-hand:"Kaiti SC","STKaiti","KaiTi",var(--font-serif);

  /* ---------- 字号（4pt 阶梯） ---------- */
  --t-h1:30px; --t-h2:23px; --t-h3:19px; --t-h4:16px;
  --t-body:14px; --t-sm:13px; --t-xs:11.5px;

  /* ---------- 间距 ---------- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s7:32px; --s8:40px; --s9:56px;

  /* ---------- 圆角 / 阴影 ---------- */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(65,50,31,.05);
  --sh-2:0 2px 8px rgba(65,50,31,.07);
  --sh-3:0 8px 28px rgba(65,50,31,.12);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font); font-size:var(--t-body); color:var(--soil);
  background:var(--rice); line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--leaf); text-decoration:none}
img{max-width:100%;display:block}

/* ============================================================
   通用排版
   ============================================================ */
.h1{font-size:var(--t-h1);line-height:1.25;font-weight:700;letter-spacing:-.4px;margin:0 0 var(--s3)}
.h2{font-size:var(--t-h2);line-height:1.3;font-weight:700;letter-spacing:-.2px;margin:0 0 var(--s3)}
.h3{font-size:var(--t-h3);line-height:1.4;font-weight:650;margin:0 0 var(--s2)}
.h4{font-size:var(--t-h4);line-height:1.5;font-weight:650;margin:0 0 var(--s2)}
.sm{font-size:var(--t-sm)}
.xs{font-size:var(--t-xs)}
.muted{color:var(--ash)}
.loam{color:var(--loam)}
.hand{font-family:var(--font-hand)}
.serif{font-family:var(--font-serif)}
.center{text-align:center}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace}

/* ============================================================
   组件：按钮
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:11px 20px;border-radius:var(--r-pill);border:1px solid transparent;
  font-size:var(--t-body);font-weight:600;font-family:inherit;cursor:pointer;
  transition:.16s ease;white-space:nowrap;
}
.btn-primary{background:var(--sprout);color:#fff;box-shadow:0 2px 10px rgba(92,138,74,.28)}
.btn-primary:hover{background:var(--leaf)}
.btn-ghost{background:transparent;color:var(--leaf);border-color:var(--line)}
.btn-ghost:hover{background:var(--paper);border-color:var(--sprout)}
.btn-dark{background:var(--soil);color:#fff}
.btn-sun{background:var(--sun);color:#3B2B12}
.btn-block{display:flex;width:100%}
.btn-sm{padding:7px 14px;font-size:var(--t-sm)}
.btn-xs{padding:4px 10px;font-size:var(--t-xs);border-radius:var(--r-sm)}
.btn[disabled],.btn.is-disabled{opacity:.42;pointer-events:none}

/* ============================================================
   组件：卡片 / 面板
   ============================================================ */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);box-shadow:var(--sh-1)}
.card-flat{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5)}
.card-tight{padding:var(--s4)}
.card-link{cursor:pointer;transition:.16s}
.card-link:hover{box-shadow:var(--sh-2);transform:translateY(-1px);border-color:var(--dew)}

/* 徽标 / 标签 / 胶囊 */
.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:var(--r-pill);font-size:var(--t-xs);font-weight:600;background:var(--dew);color:var(--leaf)}
.chip-soil{background:#EAE3D4;color:var(--loam)}
.chip-sun{background:#FAEBCB;color:#8A6414}
.chip-clay{background:#F5E0DA;color:var(--clay)}
.chip-info{background:#DCE8EE;color:#33586B}
.chip-line{background:transparent;border:1px solid var(--line);color:var(--loam)}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex:0 0 auto}

/* ============================================================
   组件：表格
   ============================================================ */
.tbl{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
.tbl th{
  text-align:left;font-weight:650;color:var(--loam);font-size:var(--t-xs);
  letter-spacing:.03em;padding:9px 12px;background:#F7F3EA;
  border-bottom:1px solid var(--line);white-space:nowrap;
}
.tbl td{padding:10px 12px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:#FCFAF4}
.tbl .r{text-align:right;font-variant-numeric:tabular-nums}

/* ============================================================
   组件：表单
   ============================================================ */
.field{margin-bottom:var(--s4)}
.label{display:block;font-size:var(--t-sm);font-weight:600;color:var(--loam);margin-bottom:6px}
.input,.select,.textarea{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);
  font-family:inherit;font-size:var(--t-body);color:var(--soil);background:var(--paper);
}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--sprout);box-shadow:0 0 0 3px rgba(92,138,74,.13)}
.input::placeholder{color:#B6AE9E}
.switch{width:44px;height:26px;border-radius:var(--r-pill);background:var(--line);position:relative;transition:.18s;flex:0 0 auto}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.18s;box-shadow:var(--sh-1)}
.switch.on{background:var(--sprout)}
.switch.on::after{left:21px}
.check{display:inline-flex;gap:8px;align-items:flex-start;font-size:var(--t-sm);cursor:pointer}
.check i{width:18px;height:18px;border:1.5px solid var(--line);border-radius:4px;flex:0 0 auto;margin-top:2px;background:var(--paper)}
.check.on i{background:var(--sprout);border-color:var(--sprout);position:relative}
.check.on i::after{content:"";position:absolute;left:5px;top:1.5px;width:5px;height:9px;border:2px solid #fff;border-top:0;border-left:0;transform:rotate(42deg)}

/* ============================================================
   组件：时间轴（信任链的视觉主体）
   ============================================================ */
.tl{position:relative;padding-left:26px}
.tl::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:linear-gradient(180deg,var(--dew),var(--line-soft))}
.tl-item{position:relative;padding-bottom:var(--s5)}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{
  content:"";position:absolute;left:-23px;top:5px;width:12px;height:12px;border-radius:50%;
  background:var(--paper);border:2.5px solid var(--sprout);
}
.tl-item.is-late::before{border-color:var(--warn);background:#FBF3E3}
.tl-item.is-key::before{background:var(--sprout)}
.tl-time{font-size:var(--t-xs);color:var(--ash);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.tl-title{font-weight:650;font-size:var(--t-body);margin-top:1px}
.tl-desc{font-size:var(--t-sm);color:var(--loam)}

/* ============================================================
   组件：地块色块（全端统一语义）
   ============================================================ */
.plot-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}
.plot{
  aspect-ratio:1/1;border-radius:5px;display:flex;align-items:center;justify-content:center;
  font-size:9.5px;font-weight:700;color:#fff;letter-spacing:.02em;cursor:pointer;
  transition:.15s;
}
.plot:hover{outline:2px solid var(--soil);outline-offset:1px}
.p-growing{background:var(--plot-growing)}
.p-resting{background:var(--plot-resting);color:#5C4A19}
.p-harvesting{background:var(--plot-harvesting)}
.p-vacant{background:var(--plot-vacant);color:#6B6455}
.p-mine{box-shadow:inset 0 0 0 2.5px #fff,0 0 0 2.5px var(--soil)}
.legend{display:flex;gap:var(--s4);flex-wrap:wrap;font-size:var(--t-xs);color:var(--loam)}
.legend span{display:inline-flex;align-items:center;gap:5px}

/* ============================================================
   组件：数据条 / 进度 / 占比
   ============================================================ */
.bar{height:7px;background:var(--line-soft);border-radius:var(--r-pill);overflow:hidden}
.bar>i{display:block;height:100%;background:var(--sprout);border-radius:var(--r-pill)}
.bar.thin{height:4px}
.bar-sun>i{background:var(--sun)}
.bar-info>i{background:var(--info)}

/* 指标块 */
.stat{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px}
.stat .k{font-size:var(--t-xs);color:var(--ash);font-weight:600;letter-spacing:.03em}
.stat .v{font-size:26px;font-weight:700;line-height:1.25;font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.stat .d{font-size:var(--t-xs);color:var(--loam)}
.stat.up .v{color:var(--ok)}
.stat.down .v{color:var(--danger)}

/* ============================================================
   组件：四态（loading / error / empty / data）
   ============================================================ */
.state{padding:var(--s8) var(--s4);text-align:center;color:var(--ash)}
.state .ico{font-size:30px;opacity:.45;margin-bottom:var(--s2)}
.state .ttl{font-weight:650;color:var(--loam);margin-bottom:4px}
.state .hint{font-size:var(--t-sm)}
.skel{background:linear-gradient(90deg,#F0EBE0 25%,#F8F5EE 37%,#F0EBE0 63%);background-size:400% 100%;animation:sk 1.4s ease infinite;border-radius:var(--r-sm)}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* ============================================================
   组件：提示条
   ============================================================ */
.note{border-left:3px solid var(--sun);background:#FBF5E7;padding:11px 14px;border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:var(--t-sm);color:#6B5518}
.note-danger{border-left-color:var(--clay);background:#FAEBE7;color:#7C3626}
.note-info{border-left-color:var(--info);background:#ECF2F6;color:#2B5566}
.note-ok{border-left-color:var(--ok);background:#EDF4EC;color:#33582F}

/* ============================================================
   手机框（小程序 375×812）
   ============================================================ */
.phone{
  width:375px;background:var(--rice);border-radius:38px;padding:0;
  box-shadow:0 0 0 9px #26302B,0 0 0 11px #3C4842,var(--sh-3);
  overflow:hidden;position:relative;flex:0 0 auto;
}
.phone .statusbar{
  height:44px;display:flex;align-items:center;justify-content:space-between;
  padding:0 22px;font-size:12px;font-weight:650;color:var(--soil);background:transparent;
  position:relative;z-index:5;
}
.phone .statusbar .icons{display:flex;gap:5px;align-items:center;font-size:10px}
.phone .screen{height:724px;overflow-y:auto;overflow-x:hidden;position:relative;scrollbar-width:none}
.phone .screen::-webkit-scrollbar{display:none}

/* 小程序顶栏 */
.navbar{
  height:44px;display:flex;align-items:center;padding:0 16px;gap:10px;
  background:var(--rice);position:sticky;top:0;z-index:4;
  border-bottom:1px solid transparent;
}
.navbar.on-card{background:var(--paper);border-bottom-color:var(--line-soft)}
.navbar .t{font-weight:650;font-size:15px;flex:1}
.navbar .back{font-size:17px;color:var(--loam);width:18px}

/* 自绘底部导航（只在设计稿的手机壳里用；真实页面用 #app .tabbar） */
.phone .tabbar{
  position:absolute;bottom:0;left:0;right:0;height:64px;
  background:rgba(255,253,248,.94);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);display:flex;z-index:6;
}
.phone .tabbar a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-size:10px;color:var(--ash);font-weight:600;
}
.phone .tabbar a.on{color:var(--sprout)}
.phone .tabbar .ic{font-size:18px;line-height:1}

/* 手机内边距容器 */
.pad{padding:0 16px}
.pad-y{padding-top:var(--s4);padding-bottom:var(--s4)}
.stack>*+*{margin-top:var(--s3)}
.row{display:flex;align-items:center;gap:var(--s2)}
.row-b{display:flex;align-items:center;justify-content:space-between;gap:var(--s2)}
.wrap{display:flex;flex-wrap:wrap;gap:6px}
.grow{flex:1;min-width:0}
.hr{height:1px;background:var(--line-soft);border:0;margin:var(--s4) 0}

/* ============================================================
   浏览器框（官网 / 后台）
   ============================================================ */
.browser{
  background:var(--paper);border-radius:12px;overflow:hidden;
  box-shadow:0 0 0 1px var(--line),var(--sh-2);display:flex;flex-direction:column;
}
.browser .chrome{
  height:36px;background:#F1ECE1;display:flex;align-items:center;gap:7px;
  padding:0 13px;border-bottom:1px solid var(--line);flex:0 0 auto;
}
.browser .chrome .dots{display:flex;gap:5px}
.browser .chrome .dots i{width:9px;height:9px;border-radius:50%;background:#D3CCBE;display:block}
.browser .chrome .url{
  flex:1;background:var(--paper);border-radius:var(--r-pill);height:21px;display:flex;
  align-items:center;padding:0 11px;font-size:10.5px;color:var(--ash);
  font-family:ui-monospace,monospace;overflow:hidden;
}
.browser .view{overflow:hidden;position:relative;background:var(--rice)}

/* 后台侧边栏 */
.shell{display:flex;height:100%;min-height:620px}
.side{
  width:196px;background:#3A2E1E;color:#D9D1C2;flex:0 0 auto;
  display:flex;flex-direction:column;font-size:12.5px;
}
.side .brand{padding:15px 16px;font-weight:700;color:#fff;font-size:13px;border-bottom:1px solid rgba(255,255,255,.09);display:flex;align-items:center;gap:8px}
.side .brand span.logo{width:19px;height:19px;border-radius:5px;background:var(--sprout);display:grid;place-items:center;font-size:10px;color:#fff}
.side nav{padding:9px 0;overflow-y:auto;flex:1}
.side .grp{padding:11px 16px 5px;font-size:10.5px;color:#8C8069;letter-spacing:.07em;font-weight:700}
.side a{display:flex;align-items:center;gap:8px;padding:7px 16px;color:#CDC4B3;border-left:2.5px solid transparent}
.side a:hover{background:rgba(255,255,255,.05);color:#fff}
.side a.on{background:rgba(92,138,74,.2);border-left-color:var(--sprout);color:#fff;font-weight:650}
.side a .ic{width:15px;text-align:center;opacity:.85}
.side .foot{padding:11px 16px;border-top:1px solid rgba(255,255,255,.09);font-size:11px;color:#8C8069}
.main{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--rice)}
.topbar{
  height:48px;background:var(--paper);border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;padding:0 18px;flex:0 0 auto;
}
.topbar .ttl{font-weight:700;font-size:14px}
.topbar .who{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--loam)}
.avatar{width:26px;height:26px;border-radius:50%;background:var(--dew);color:var(--leaf);display:grid;place-items:center;font-size:11px;font-weight:700}
.content{padding:18px;overflow-y:auto;flex:1}

/* ============================================================
   展示容器（把稿件排成一页）
   ============================================================ */
.book{max-width:1400px;margin:0 auto;padding:var(--s8) var(--s6) var(--s9)}
.book-head{max-width:820px;margin-bottom:var(--s7)}
.eyebrow{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--sprout);font-weight:700;margin-bottom:var(--s2)}
.frames{display:flex;flex-wrap:wrap;gap:var(--s7) var(--s6);align-items:flex-start}
.frame-cell{display:flex;flex-direction:column;gap:var(--s3)}
.frame-cap{display:flex;align-items:baseline;gap:var(--s2);font-size:var(--t-sm);font-weight:650;color:var(--loam);max-width:375px}
.frame-cap .no{font-family:ui-monospace,monospace;font-size:var(--t-xs);background:var(--dew);color:var(--leaf);padding:1px 7px;border-radius:4px;font-weight:700}
.frame-cap .note{font-weight:400;color:var(--ash);font-size:var(--t-xs)}
.sec-h{display:flex;align-items:center;gap:var(--s3);margin:var(--s8) 0 var(--s5);padding-bottom:var(--s3);border-bottom:2px solid var(--line)}
.sec-h .idx{width:30px;height:30px;border-radius:9px;background:var(--soil);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px;flex:0 0 auto}
.sec-h h2{margin:0;font-size:var(--t-h3)}
.sec-h p{margin:0;font-size:var(--t-sm);color:var(--ash)}

/* 顶栏导航（设计稿之间的跳转） */
.topnav{
  position:sticky;top:0;z-index:50;background:rgba(245,241,232,.92);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
}
.topnav .in{max-width:1400px;margin:0 auto;padding:11px var(--s6);display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap}
.topnav .logo{font-weight:700;display:flex;align-items:center;gap:8px;font-size:14px;margin-right:auto}
.topnav .logo i{width:22px;height:22px;border-radius:6px;background:var(--sprout);color:#fff;display:grid;place-items:center;font-size:11px;font-style:normal}
.topnav a.nv{font-size:12.5px;color:var(--loam);font-weight:600;padding:5px 11px;border-radius:var(--r-pill)}
.topnav a.nv:hover{background:var(--dew);color:var(--leaf)}
.topnav a.nv.on{background:var(--soil);color:#fff}

/* 表格包裹 */
.tbl-wrap{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.tbl-wrap .hd{padding:13px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.scroll-x{overflow-x:auto}

/* 小工具 */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)}
.g-sb{display:grid;grid-template-columns:1.6fr 1fr;gap:var(--s4)}
.mt0{margin-top:0}.mb0{margin-bottom:0}
.hide{display:none}

/* ============================================================
   v1.1 响应式：三档断点
   v1.0 的官网 8 页全部是 1000px 桌面稿，@media 命中 0 次 —— 这是重大遗漏。
   实际流量 90% 来自微信内浏览器（手机），必须补。
   硬指标：375px 下无横向滚动、正文 ≥14px、点击区 ≥44×44px。
   ============================================================ */

/* 移动端专用工具（桌面隐藏） */
.only-m{display:none}
.only-d{display:block}

/* ---------- < 640px：手机（主要场景） ---------- */
@media (max-width:639px){
  :root{
    --t-h1:25px; --t-h2:20px; --t-h3:17px; --t-h4:15px;
    --s6:18px; --s7:22px; --s8:28px; --s9:36px;
  }
  .book{padding:var(--s5) var(--s4) var(--s8)}
  .book-head{max-width:none}
  .only-m{display:block}
  .only-d{display:none}

  /* 顶栏：横向滚动而非换行，避免撑破 */
  .topnav .in{padding:9px var(--s4);gap:var(--s3);flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .topnav .in::-webkit-scrollbar{display:none}
  .topnav .logo{font-size:12.5px;flex:0 0 auto}
  .topnav a.nv{font-size:11.5px;padding:4px 9px;flex:0 0 auto}

  /* 网格全部降为单列 */
  .g2,.g3,.g4,.g-sb{grid-template-columns:1fr}
  .frames{flex-direction:column;gap:var(--s6)}
  .frame-cell{max-width:100%}

  /* 桌面框在手机上改为自适应宽度 */
  .browser,.browser.admin{width:100% !important;max-width:100% !important}
  .browser.admin .view{height:auto !important}
  .browser .view{overflow:visible}

  /* 后台在手机上：侧栏收起为顶部横条 */
  .shell{flex-direction:column;min-height:0}
  .side,.side2{width:100% !important;flex:0 0 auto}
  .side nav,.side2 nav{display:flex;overflow-x:auto;padding:6px 0;gap:2px;scrollbar-width:none}
  .side nav::-webkit-scrollbar,.side2 nav::-webkit-scrollbar{display:none}
  .side .grp,.side2 .grp{display:none}
  .side a,.side2 a{flex:0 0 auto;border-left:0;border-bottom:2.5px solid transparent;padding:7px 11px;font-size:11.5px}
  .side a.on,.side2 a.on{border-left:0;border-bottom-color:var(--sprout);background:transparent}
  .side .foot{display:none}
  .content{padding:var(--s4)}

  /* 表格：横向滚动容器（不做卡片化，保持可读） */
  .scroll-x{-webkit-overflow-scrolling:touch}
  .tbl th,.tbl td{white-space:nowrap}

  /* 按钮：满足 44px 最小点击区 */
  .btn{padding:13px 18px;min-height:44px;font-size:15px}
  .btn-sm{padding:9px 14px;min-height:36px;font-size:13px}
  .btn-xs{padding:6px 10px;min-height:30px;font-size:11.5px}

  /* 手机框本身在小屏上缩放，避免溢出 */
  .phone{transform:scale(.92);transform-origin:top left;margin-bottom:-56px}

  /* 官网专用：hero 与栏目改单列 */
  .wp .nav{padding:11px var(--s4);gap:10px}
  .wp .nav .lk{display:none}
  .wp .nav .lg{font-size:13px}
  .wp section{padding:var(--s6) var(--s4)}
  .wp h1.big{font-size:26px}
  .wp h2.mid{font-size:19px}
  .wp p.lead{font-size:13.5px;max-width:none}
  .hero .in{padding:32px var(--s4) 30px}
  .hero .slogan{font-size:22px;margin-bottom:12px}
  .hero .field{height:64px}
  .hero .scan{margin-top:18px}
  .hero .qrw{width:64px;height:64px}
  .six-a{grid-template-columns:1fr}
  .tiers{grid-template-columns:1fr;gap:11px}
  .live-wide{grid-template-columns:1fr}
  .tl-wide{grid-template-columns:1fr 1fr;gap:14px 0}
  .tl-wide .st:nth-child(3n)::before{display:none}
  .wplots{grid-template-columns:repeat(6,1fr)}
  .trace-grid{grid-template-columns:1fr}
  .lvc{grid-template-columns:1fr}
  .wfoot .cols{grid-template-columns:1fr 1fr;gap:16px}
  .wfoot{padding:var(--s6) var(--s4)}
  .legal{max-width:none;padding:18px}

  /* 手机内排版：正文不小于 14px */
  .sm{font-size:13.5px}
  .xs{font-size:12px}
}

/* ---------- 640–1023px：平板 ---------- */
@media (min-width:640px) and (max-width:1023px){
  :root{--s7:28px;--s8:34px}
  .book{padding:var(--s7) var(--s5) var(--s8)}
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)}
  .g-sb{grid-template-columns:1fr}
  .frames{gap:var(--s6) var(--s5)}

  .browser,.browser.admin{width:100% !important;max-width:100% !important}
  .browser.admin .view{height:auto !important;min-height:520px}

  .wp section{padding:var(--s7) var(--s5)}
  .wp h1.big{font-size:31px}
  .six-a{grid-template-columns:repeat(2,1fr)}
  .tiers{grid-template-columns:repeat(3,1fr);gap:10px}
  .live-wide{grid-template-columns:1.2fr 1fr}
  .trace-grid{grid-template-columns:1fr}
  .lvc{grid-template-columns:repeat(2,1fr)}
  .wplots{grid-template-columns:repeat(9,1fr)}
  .wfoot .cols{grid-template-columns:1.4fr 1fr 1fr}
  .phone{transform:scale(.95);transform-origin:top left}
}

/* ---------- ≥ 1024px：桌面（维持 v1.0 设计） ---------- */
@media (min-width:1024px){
  .only-m{display:none}
}

/* ---------- 无障碍与弱网优化 ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}
/* 打印：设计稿评审时导出 PDF */
@media print{
  .topnav,.tabbar,.phone .statusbar{display:none}
  .phone{box-shadow:none;border:1px solid #ccc;page-break-inside:avoid}
  .browser{box-shadow:none;border:1px solid #ccc;page-break-inside:avoid}
  body{background:#fff}
  .frames{gap:10mm}
}


/* ── .p1 / .p2 / .tbl.dense / .chip.chip-xs 跨多文件使用，语义统一，进设计系统 ── */
/* 优先级标记：P1 琥珀 / P2 灰 */
.p1{color:#8E6A17}
.p2{color:var(--ash)}
/* 紧凑表格：行多时用，信息密度高 */
.tbl.dense th,.tbl.dense td{padding:4px 7px;font-size:10.5px;line-height:1.55}
.tbl.dense th{font-size:9.5px}
/* 超小号标记 */
.chip.chip-xs{padding:1px 6px;font-size:8.5px;border-radius:var(--r-pill)}
/* ══════════════════════════════════════════════════════════════════
 * 键盘可达性（全站生效）
 * 为什么必须有：原来全站没有 :focus-visible，只有 .input:focus{outline:none}
 * —— 键盘/读屏用户按 Tab 时**看不到焦点在哪**，等于无法操作。
 * 用 outline 而不是 box-shadow：outline 不占布局，且在高对比模式下仍然可见。
 * ══════════════════════════════════════════════════════════════════ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--sprout, #5C8A4A);
  outline-offset: 2px;
  border-radius: 6px;
}

/* 已经用 box-shadow 做了自定义焦点环的控件，不再叠加 outline（避免双层） */
.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible {
  outline: none;
}

/* 尊重"减少动态效果"的系统设置 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}