/* =============================================================================
   沙田柚认购系统 · 前端样式（v2 · 克制专业风）
   设计原则：
     - 白底 / 极浅灰底，深灰正文，单一品牌绿，仅用少量语义色（红/琥珀/蓝）
     - 全站线性 SVG 图标（common.js ic()），不使用 emoji 作为界面图标
     - 字号阶梯 12/13/14/15/17/22，正文 14px；圆角统一 6/8px；1px 描边为主
   ============================================================================= */
:root{
  /* 品牌色 */
  --pri:#2E7D32; --pri-h:#27692C; --pri-a:#205623;
  --pri-t:#EEF4EF; --pri-t2:#D8E5DA;
  /* 文字 */
  --ink:#1F2328; --ink2:#59636E; --ink3:#8B939C;
  /* 面板 */
  --bg:#F5F6F7; --card:#FFFFFF; --line:#E4E7EB; --line2:#EEF0F2;
  /* 语义色 */
  --red:#C4392F; --red-t:#FBF0EE; --red-t2:#F0D5D2;
  --amber:#96660F; --amber-t:#FBF4E2; --amber-t2:#EDD9A8; --amber-s:#B7791F;
  --blue:#2A6395; --blue-t:#EDF3F8; --blue-t2:#D3E1EC;
  /* 圆角 / 阴影 */
  --r:8px; --r-sm:6px; --r-lg:10px;
  --sh:0 1px 2px rgba(16,24,40,.05);
  --sh-pop:0 12px 32px rgba(16,24,40,.16);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg);min-height:100vh;color:var(--ink);font-size:14px;line-height:1.6;
}
button{font-family:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}

/* 线性图标基础尺寸（common.js ic() 输出） */
.ic{width:1em;height:1em;display:inline-block;flex-shrink:0;vertical-align:-.14em}

/* ============ 布局 ============ */
#app{display:grid;grid-template-columns:240px 1fr;min-height:100vh;max-width:1440px;margin:0 auto}

/* ============ 侧栏 ============ */
.side{background:#fff;border-right:1px solid var(--line);padding:20px 14px;
  display:flex;flex-direction:column;gap:16px;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{display:flex;gap:10px;align-items:center}
.brand .logo{width:36px;height:36px;border-radius:var(--r-sm);display:flex;align-items:center;
  justify-content:center;font-size:19px;background:var(--pri);color:#fff;flex-shrink:0}
.brand h1{font-size:15px;font-weight:600;color:var(--ink);letter-spacing:0}
.brand p{font-size:12px;color:var(--ink3);margin-top:2px}

.role-switch{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:var(--bg);
  padding:3px;border-radius:var(--r)}
.role-switch button{border:none;background:transparent;padding:7px 4px;border-radius:5px;
  font-size:12px;font-weight:500;color:var(--ink2);transition:.15s}
.role-switch button.on{background:#fff;color:var(--ink);font-weight:600;box-shadow:var(--sh)}

.nav{display:flex;flex-direction:column;gap:2px;flex:1}
.nav button{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--r-sm);
  background:transparent;border:none;font-size:14px;font-weight:500;
  color:var(--ink2);text-align:left;transition:.15s;width:100%}
.nav button:hover{background:var(--bg);color:var(--ink)}
.nav button.on{background:var(--pri);color:#fff;font-weight:600}
.nav .ico{font-size:16px;width:16px;display:inline-flex;justify-content:center;flex-shrink:0}
.nav .n{margin-left:auto;font-size:12px;font-weight:600;background:var(--red);color:#fff;
  padding:0 6px;min-width:18px;line-height:18px;text-align:center;border-radius:9px}
.nav button.on .n{background:#fff;color:var(--pri)}

.sidenote{padding:12px;background:var(--bg);border-radius:var(--r)}
.sidenote h4{font-size:12px;color:var(--ink3);font-weight:600;margin-bottom:8px}
.sidenote li{font-size:12px;color:var(--ink2);line-height:1.7;list-style:none;
  padding-left:12px;position:relative}
.sidenote li::before{content:"";position:absolute;left:0;top:8px;width:4px;height:4px;
  border-radius:50%;background:var(--pri)}
.sidenote b{color:var(--ink);font-weight:600}

/* ============ 主区 ============ */
.main{display:flex;flex-direction:column;min-width:0}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 24px;background:#fff;border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:40}
#crumb{font-size:15px;font-weight:600;color:var(--ink)}
#crumb span{font-size:13px;font-weight:400;color:var(--ink3);margin-left:8px}
.topright{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--ink2)}
.clock{background:#fff;border:1px solid var(--line);color:var(--ink2);font-weight:500;
  padding:3px 10px;border-radius:var(--r-sm);font-size:12.5px;font-variant-numeric:tabular-nums}
.clock.demo{color:var(--amber);border-color:var(--amber-t2);background:var(--amber-t)}
.who{font-weight:500;color:var(--ink)}
.who i{font-style:normal;color:var(--ink3);font-weight:400}
.who .logout{margin-left:10px;padding:3px 10px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:#fff;color:var(--ink2);font-size:12.5px;font-weight:500;transition:.15s}
.who .logout:hover{border-color:var(--red-t2);color:var(--red);background:var(--red-t)}
.content{padding:24px;flex:1}

/* ============ 通用组件 ============ */
.card{background:var(--card);border-radius:var(--r);padding:16px;box-shadow:var(--sh);
  border:1px solid var(--line)}
.card+.card{margin-top:12px}
.grid{display:grid;gap:12px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.sec{margin-top:20px}
.sec-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.sec-h h3{font-size:15px;font-weight:600}
.sec-h .more{font-size:12px;color:var(--ink3)}
.muted{color:var(--ink3)}
.small{font-size:12px}
.center{text-align:center}

.tag{display:inline-block;font-size:12px;font-weight:500;padding:1px 8px;border-radius:4px;
  background:var(--pri-t);color:var(--pri);border:1px solid var(--pri-t2);white-space:nowrap;line-height:1.7}
.tag.y{background:var(--amber-t);color:var(--amber);border-color:var(--amber-t2)}
.tag.r{background:var(--red-t);color:var(--red);border-color:var(--red-t2)}
.tag.b{background:var(--blue-t);color:var(--blue);border-color:var(--blue-t2)}
.tag.gray{background:var(--bg);color:var(--ink2);border-color:var(--line)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 14px;
  border:1px solid transparent;border-radius:var(--r-sm);font-size:13px;font-weight:500;
  transition:.15s;background:var(--pri);color:#fff}
.btn:hover{background:var(--pri-h)}
.btn:active{background:var(--pri-a)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.yl{background:var(--amber-s);color:#fff}
.btn.yl:hover{background:#A06A19}
.btn.gh{background:#fff;border-color:var(--line);color:var(--ink2)}
.btn.gh:hover{border-color:var(--pri);color:var(--pri);background:var(--pri-t)}
.btn.sm{padding:4px 10px;font-size:12px}
.btn.dg{background:var(--red)}
.btn.dg:hover{background:#AE332A}
.btn.full{width:100%}
.btn.gd{background:var(--pri);color:#fff}

.bar{height:6px;background:var(--line2);border-radius:3px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:3px;background:var(--pri);transition:width .6s ease}
.bar.yl i{background:var(--amber-s)}
.bar.rd i{background:var(--red)}
.bar.b i{background:var(--blue)}

/* KPI */
.kpi{background:#fff;border-radius:var(--r);padding:16px;box-shadow:var(--sh);border:1px solid var(--line)}
.kpi .k{font-size:12px;color:var(--ink3);font-weight:500}
.kpi .v{font-size:22px;font-weight:600;margin-top:6px;color:var(--ink);
  letter-spacing:0;font-variant-numeric:tabular-nums}
.kpi .v.y{color:var(--amber)}
.kpi .v.r{color:var(--red)}
.kpi .d{font-size:12px;color:var(--ink3);margin-top:4px}

/* Hero（纯色，无装饰图形） */
.hero{border-radius:var(--r);padding:20px;position:relative;color:#fff;background:#2C5F33}
.hero h2{font-size:17px;font-weight:600;position:relative}
.hero p{font-size:13px;color:rgba(255,255,255,.82);margin-top:8px;line-height:1.7;max-width:360px}
.hero .cta{display:inline-block;margin-top:14px;padding:6px 14px;border-radius:var(--r-sm);
  background:#fff;color:#2C5F33;font-size:13px;font-weight:600}

/* 列表行 */
.row{display:flex;gap:12px;align-items:center;padding:12px;background:#fff;border-radius:var(--r);
  border:1px solid var(--line);transition:.15s}
.row+.row{margin-top:8px}
.row.hover{cursor:pointer}
.row.hover:hover{border-color:var(--pri-t2);background:#FAFCFA}
.thumb{width:48px;height:48px;border-radius:var(--r-sm);flex-shrink:0;display:flex;align-items:center;
  justify-content:center;font-size:22px;background:var(--pri-t);color:var(--pri)}
.grow1{flex:1;min-width:0}
.ell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t{font-size:14px;font-weight:600}
.m{font-size:12.5px;color:var(--ink3);margin-top:4px;line-height:1.6}
.price{font-size:17px;font-weight:600;color:var(--red);font-variant-numeric:tabular-nums}
.price span{font-size:12px;font-weight:500}
.price small{font-size:12px;color:var(--ink3);font-weight:400;text-decoration:line-through;margin-left:4px}

/* 动作网格 */
.acts{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.act{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:12px 8px 10px;
  transition:.15s;position:relative;cursor:pointer;display:flex;flex-direction:column;
  align-items:center;gap:6px}
.act:hover{border-color:var(--pri-t2);background:#FAFCFA}
.act.off{opacity:.55;cursor:not-allowed;background:var(--bg)}
.act.off:hover{border-color:var(--line);background:var(--bg)}
.act.key{border-color:var(--amber-t2);background:#FDFAF2}
.act .ai{font-size:22px;line-height:1;color:var(--pri)}
.act.key .ai{color:var(--amber-s)}
.act .an{font-size:13px;font-weight:600;line-height:1.4;text-align:center}
.act .ad{font-size:12px;color:var(--ink3);line-height:1.5;min-height:34px;
  display:flex;align-items:center;justify-content:center;text-align:center}
.act .kbadge{position:absolute;top:-7px;right:-4px;font-size:11px;font-weight:500;
  background:var(--amber-s);color:#fff;padding:0 6px;line-height:16px;border-radius:4px;white-space:nowrap}
.act .cnt{font-size:12px;color:var(--ink3);border-top:1px solid var(--line2);
  padding-top:4px;width:100%;text-align:center}
/* 动作分组：关键操作 / 日常互动 */
.acts-h{display:flex;align-items:center;gap:8px;margin:14px 0 8px;font-size:12px;
  font-weight:600;color:var(--ink2)}
.acts-h:first-of-type{margin-top:4px}
.acts-h::after{content:'';flex:1;height:1px;background:var(--line)}
.acts-h .dot{width:6px;height:6px;border-radius:50%;background:var(--pri);flex:none}
.acts-h.keyhead .dot{background:var(--amber-s)}
.acts-h .sub{font-weight:400;color:var(--ink3);font-size:12px}
.act .win{font-size:12px;font-weight:500;color:var(--amber);background:var(--amber-t);
  border-radius:4px;padding:0 6px;line-height:1.7;margin-top:1px;white-space:nowrap}
.act.done{border-color:var(--pri-t2);background:#F7FAF7;opacity:.9;cursor:default}
.act.done:hover{border-color:var(--pri-t2);background:#F7FAF7}
.act.done .win{color:var(--pri);background:var(--pri-t)}
.act .hint{font-size:12px;color:var(--amber);font-weight:500}
.act .obadge{position:absolute;top:-7px;left:-4px;font-size:11px;font-weight:500;
  background:var(--pri);color:#fff;padding:0 6px;line-height:16px;border-radius:4px;white-space:nowrap}

/* 天气 */
.wx{display:flex;gap:14px;align-items:center}
.wx .ico{font-size:38px;line-height:1;color:var(--pri)}
.wx .t{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums}
.wx .t small{font-size:12px;font-weight:400;color:var(--ink3)}
.fc{display:grid;grid-template-columns:repeat(auto-fit,minmax(74px,1fr));gap:8px;margin-top:12px}
.fc .d{background:var(--bg);border-radius:var(--r-sm);padding:8px 6px;text-align:center}
.fc .d .dd{font-size:12px;color:var(--ink3)}
.fc .d .di{font-size:18px;margin:4px 0;color:var(--ink2)}
.fc .d .dt{font-size:12px;font-weight:600}

/* 时间轴 */
.tl{position:relative;padding-left:20px}
.tl::before{content:"";position:absolute;left:5px;top:5px;bottom:5px;width:1.5px;background:var(--line)}
.tl .it{position:relative;padding-bottom:14px}
.tl .it::before{content:"";position:absolute;left:-18px;top:4px;width:9px;height:9px;border-radius:50%;
  background:#fff;border:2px solid var(--pri)}
.tl .it.warn::before{border-color:var(--red)}
.tl .it.pending::before{border-color:var(--amber-s)}
.tl .it .h{font-size:13px;font-weight:600}
.tl .it .b{font-size:12.5px;color:var(--ink2);margin-top:3px;line-height:1.6}
.tl .it .ts{font-size:12px;color:var(--ink3);margin-top:2px}

/* 表格 */
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:12px;color:var(--ink3);font-weight:500;
  padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap;background:#F7F8F9}
td{padding:10px 12px;border-bottom:1px solid var(--line2);vertical-align:middle}
tbody tr:hover{background:#FAFBFA}
.tbl-wrap{background:#fff;border-radius:var(--r);box-shadow:var(--sh);overflow:auto;
  border:1px solid var(--line)}

/* 空态 */
.empty{padding:48px 20px;text-align:center;color:var(--ink3)}
.empty .e{font-size:36px;display:block;margin-bottom:10px;color:#C4CBD2}
.empty p{font-size:13px}

/* 弹窗 */
.modal{position:fixed;inset:0;background:rgba(23,26,31,.45);display:none;align-items:center;
  justify-content:center;z-index:200;padding:20px}
.modal.on{display:flex}
.modal-box{background:#fff;border-radius:var(--r-lg);padding:20px;width:100%;max-width:430px;
  max-height:86vh;overflow-y:auto;box-shadow:var(--sh-pop);animation:pop .18s ease}
@keyframes pop{from{opacity:0;transform:scale(.97) translateY(8px)}to{opacity:1;transform:none}}
.modal-box h3{font-size:15px;font-weight:600;margin-bottom:14px;color:var(--ink)}
.fld{margin-bottom:12px}
.fld label{display:block;font-size:12.5px;font-weight:500;color:var(--ink2);margin-bottom:5px}
.fld input,.fld select,.fld textarea{width:100%;padding:8px 10px;border:1px solid var(--line);
  border-radius:var(--r-sm);font-size:13px;font-family:inherit;color:var(--ink);background:#fff;transition:.15s}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--pri);
  box-shadow:0 0 0 3px rgba(46,125,50,.1)}
.fld input.err,.fld select.err,.fld textarea.err{border-color:var(--red)}
.fld .hint{font-size:12px;color:var(--ink3);margin-top:4px}
.fld .ferr{font-size:12px;color:var(--red);margin-top:4px;display:none}
.fld.has-err .ferr{display:block}
.modal-actions{display:flex;gap:8px;margin-top:16px}
.modal-actions .btn{flex:1}

/* toast */
.toast{position:fixed;left:50%;bottom:34px;transform:translate(-50%,20px);background:#1F2328;
  color:#fff;padding:10px 18px;border-radius:var(--r);font-size:13px;font-weight:500;opacity:0;
  pointer-events:none;transition:.22s;z-index:300;max-width:88vw;box-shadow:var(--sh-pop)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.err{background:#7E2D26}
.toast.ok{background:#205623}

/* 加载 */
.loading{padding:56px;text-align:center;color:var(--ink3);font-size:13px}
.spin{display:inline-block;width:20px;height:20px;border:2px solid var(--line);
  border-top-color:var(--pri);border-radius:50%;animation:sp .8s linear infinite;margin-bottom:10px}
@keyframes sp{to{transform:rotate(360deg)}}

/* 阶段条 */
.stages{display:flex;gap:4px;margin-top:12px}
.stages .st{flex:1;text-align:center;padding:8px 3px;border-radius:var(--r-sm);background:var(--bg);
  border:1px solid transparent;transition:.15s}
.stages .st.on{background:var(--pri);color:#fff}
.stages .st.done{background:var(--pri-t);color:var(--pri)}
.stages .st .sn{font-size:12px;font-weight:600}
.stages .st .sd{font-size:12px;opacity:.72;margin-top:2px}

@media(max-width:1080px){
  #app{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;
    border-right:none;border-bottom:1px solid var(--line);padding:14px}
  .nav{flex-direction:row;flex-wrap:wrap;flex:1 0 100%}
  .nav button{width:auto}
  .sidenote{display:none}
  .g4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  .g2,.g3,.g4{grid-template-columns:1fr}
  .content{padding:16px 14px 48px}
  .topbar{padding:12px 14px}
}

/* ============ 端标识与返回入口 ============ */
.rolebar{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rolechip{font-size:12px;font-weight:500;padding:1px 8px;border-radius:4px;
  background:var(--pri-t);color:var(--pri);border:1px solid var(--pri-t2);line-height:1.7}
.backentry{font-size:12.5px;color:var(--ink3);transition:.15s}
.backentry:hover{color:var(--pri)}

/* ============ 三端入口页 ============ */
.entry{max-width:1040px;margin:0 auto;padding:52px 24px 72px}
.entry-head{text-align:center;margin-bottom:36px}
.entry-head .logo{width:52px;height:52px;border-radius:var(--r);margin:0 auto 16px;
  display:flex;align-items:center;justify-content:center;font-size:26px;
  background:var(--pri);color:#fff}
.entry-head h1{font-size:22px;font-weight:600;color:var(--ink)}
.entry-head p{font-size:13px;color:var(--ink2);margin-top:10px;line-height:1.8}
.entry-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.entry-card{background:#fff;border-radius:var(--r);padding:22px;box-shadow:var(--sh);
  border:1px solid var(--line);display:flex;flex-direction:column;transition:.15s}
.entry-card:hover{border-color:var(--pri-t2);box-shadow:0 2px 8px rgba(16,24,40,.07)}
.entry-card .ico{width:44px;height:44px;border-radius:var(--r);display:flex;align-items:center;
  justify-content:center;font-size:22px;margin-bottom:14px}
.entry-card.u .ico{background:var(--pri-t);color:var(--pri)}
.entry-card.f .ico{background:var(--blue-t);color:var(--blue)}
.entry-card.a .ico{background:var(--amber-t);color:var(--amber)}
.entry-card h2{font-size:15px;font-weight:600;color:var(--ink)}
.entry-card .who{font-size:12px;color:var(--ink3);margin-top:4px;font-weight:400}
.entry-card ul{list-style:none;margin:14px 0 18px;display:flex;flex-direction:column;gap:7px}
.entry-card li{font-size:13px;color:var(--ink2);line-height:1.6;padding-left:13px;position:relative}
.entry-card li::before{content:"";position:absolute;left:0;top:8px;width:4px;height:4px;
  border-radius:50%;background:var(--pri)}
.entry-card .btn{margin-top:auto}
.entry-foot{text-align:center;margin-top:32px;font-size:12.5px;color:var(--ink3);line-height:2}
.entry-foot code{background:#fff;border:1px solid var(--line);border-radius:4px;padding:1px 6px;font-size:12px}
@media(max-width:820px){.entry-grid{grid-template-columns:1fr}}