/* 凤翎 OA 网页版 · Claude/ChatGPT 风：暖白、克制、精致排版 */
:root{
  --ink:#1D3C46; --ink2:#2B5560; --gold:#BE9A55;
  --bg:#ffffff; --side:#f7f6f3; --panel:#ffffff;
  --text:#2a2a28; --muted:#8f8d85; --faint:#b8b6ad;
  --line:#ececE6; --line2:#e4e2da; --hover:#f0efe9;
  --radius:12px; --radius-sm:9px;
  --shadow:0 1px 2px rgba(30,30,20,.04), 0 1px 3px rgba(30,30,20,.03);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",
    "PingFang SC","Helvetica Neue",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font);color:var(--text);background:var(--bg);
  font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;
  letter-spacing:.01em}
a{text-decoration:none;color:inherit}
::selection{background:rgba(190,154,85,.22)}

/* ===== 布局：左侧栏 + 主区 ===== */
.app{display:flex;min-height:100vh}
.sidebar{width:256px;flex:none;background:var(--side);
  border-right:1px solid var(--line);display:flex;flex-direction:column;
  padding:20px 14px;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:10px;padding:8px 10px 22px}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--gold)}
.brand .bn{font-size:17px;font-weight:700;color:var(--ink);letter-spacing:.06em}
.side-sec{font-size:11px;color:var(--faint);font-weight:600;
  padding:14px 12px 6px;letter-spacing:.08em}
.navlink{display:flex;align-items:center;gap:11px;padding:9px 12px;
  border-radius:var(--radius-sm);color:#55534c;font-size:14px;
  margin:1px 0;transition:background .12s,color .12s;cursor:pointer}
.navlink .ni{font-size:16px;width:20px;text-align:center;opacity:.85}
.navlink:hover{background:var(--hover);color:var(--ink)}
.navlink.active{background:#fff;color:var(--ink);font-weight:600;
  box-shadow:var(--shadow)}
.navlink.soon{color:var(--faint);cursor:default}
.navlink.soon:hover{background:transparent}
.navlink .badge{margin-left:auto;font-size:10px;color:var(--faint)}
.side-foot{margin-top:auto;padding:12px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted)}
.side-foot .ava{width:28px;height:28px;border-radius:50%;background:var(--ink);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700}
.side-foot a{margin-left:auto;color:var(--faint);font-size:12px}
.side-foot a:hover{color:var(--ink)}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.content{max-width:1120px;width:100%;margin:0 auto;padding:40px 44px 64px}

/* ===== 首页 ===== */
.hero{margin-bottom:32px}
.hero h1{font-size:28px;font-weight:700;color:var(--ink);letter-spacing:.02em}
.hero p{color:var(--muted);margin-top:10px;font-size:15px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:16px}
.card{background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px;position:relative;
  transition:border-color .15s,transform .15s,box-shadow .15s;display:block}
.card.on:hover{border-color:var(--line2);transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(30,30,20,.06)}
.card .ic{font-size:26px}
.card .ct{font-size:16px;font-weight:700;color:var(--ink);margin-top:14px}
.card .cd{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.5}
.card .tag{position:absolute;top:20px;right:20px;font-size:10.5px;
  font-weight:600;padding:3px 9px;border-radius:20px;
  background:rgba(190,154,85,.13);color:var(--gold)}
.card .tag.soon{background:var(--hover);color:var(--faint)}
.card:not(.on){opacity:.72}

/* ===== 页头 ===== */
.page-head{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:26px}
.page-head h2{font-size:22px;font-weight:700;color:var(--ink)}
.monthsel{display:flex;align-items:center;gap:10px;color:var(--muted);
  font-size:13px}
.monthsel select{padding:8px 30px 8px 12px;border:1px solid var(--line2);
  border-radius:var(--radius-sm);background:#fff;font-family:var(--font);
  font-size:13px;color:var(--text);cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238f8d85' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center}
.empty{color:var(--muted);padding:60px;text-align:center;
  border:1px dashed var(--line2);border-radius:var(--radius)}

/* ===== KPI ===== */
.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:24px}
.kpi{background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:16px 14px}
.kpi .kv{font-size:20px;font-weight:700;color:var(--ink);
  letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.kpi .kl{font-size:11.5px;color:var(--muted);margin-top:5px}
.kpi:nth-child(3) .kv,.kpi:nth-child(6) .kv{color:var(--gold)}

/* ===== 面板 / 表格 ===== */
.grid2{display:grid;grid-template-columns:1.35fr 1fr;gap:18px;align-items:start}
.panel{background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:20px}
.panel h3{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:14px;
  display:flex;align-items:center}
.tablewrap{overflow-x:auto;margin:0 -4px}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-weight:600;color:var(--muted);font-size:12px;
  padding:0 12px 10px;border-bottom:1px solid var(--line2);white-space:nowrap}
td{padding:10px 12px;border-bottom:1px solid var(--line)}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--hover)}
.num{text-align:right;font-variant-numeric:tabular-nums}
.strong{font-weight:700;color:var(--ink)}
.muted{color:var(--muted)}
.hint{color:var(--faint);font-size:12px;margin-top:14px}

/* ===== AI 面板 ===== */
.ai .aistat{font-size:11px;font-weight:400;color:var(--muted);margin-left:10px}
.quick{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.qbtn{background:#fff;color:var(--ink);border:1px solid var(--line2);
  border-radius:20px;padding:6px 14px;font-size:12.5px;cursor:pointer;
  font-family:var(--font);transition:all .12s}
.qbtn:hover{border-color:var(--gold);color:var(--gold);
  background:rgba(190,154,85,.06)}
.chat{min-height:240px;max-height:400px;overflow-y:auto;padding:4px 2px}
.chat:empty::before{content:"选月份后点上面的快捷分析，或直接提问 ↓";
  color:var(--faint);font-size:13px}
.chat p{margin-bottom:14px;font-size:13.5px;line-height:1.7}
.chat .me{color:var(--text)}
.chat .me b{color:var(--ink)}
.chat .ai{background:var(--side);border:1px solid var(--line);
  border-radius:10px;padding:12px 14px}
.chat .ai b{color:var(--gold)}
.chat .err{color:#a5372b;background:#fbf1ef;border-color:#f0dcd8}
.askrow{display:flex;gap:10px;margin-top:14px}
.askrow input{flex:1;padding:11px 14px;border:1px solid var(--line2);
  border-radius:var(--radius-sm);font-family:var(--font);font-size:13.5px;
  color:var(--text);transition:border-color .12s,box-shadow .12s}
.askrow input:focus{outline:none;border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(29,60,70,.08)}
.askrow button{background:var(--ink);color:#fff;border:none;
  border-radius:var(--radius-sm);padding:11px 22px;cursor:pointer;
  font-weight:600;font-family:var(--font);transition:background .12s}
.askrow button:hover{background:var(--ink2)}

/* ===== 登录页 ===== */
.login-wrap{min-height:100vh;display:flex;align-items:center;
  justify-content:center;background:var(--side);padding:24px}
.login-card{width:100%;max-width:380px;background:#fff;
  border:1px solid var(--line);border-radius:16px;padding:40px 36px;
  box-shadow:0 10px 40px rgba(30,30,20,.06)}
.login-card .lb{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.login-card .lb .dot{width:9px;height:9px;border-radius:50%;background:var(--gold)}
.login-card .lb .bn{font-size:19px;font-weight:700;color:var(--ink);
  letter-spacing:.06em}
.login-card .lsub{color:var(--muted);font-size:13px;margin-bottom:28px}
.login-card label{display:block;font-size:12.5px;color:var(--muted);
  margin:16px 0 7px}
.login-card input{width:100%;padding:12px 14px;border:1px solid var(--line2);
  border-radius:var(--radius-sm);font-family:var(--font);font-size:14px;
  transition:border-color .12s,box-shadow .12s}
.login-card input:focus{outline:none;border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(29,60,70,.08)}
.coderow{display:flex;gap:10px}
.coderow input{flex:1}
.btn-code{flex:none;padding:0 16px;border:1px solid var(--line2);
  background:#fff;border-radius:var(--radius-sm);color:var(--ink);
  font-size:13px;cursor:pointer;font-family:var(--font);white-space:nowrap}
.btn-code:hover:not(:disabled){border-color:var(--gold);color:var(--gold)}
.btn-code:disabled{color:var(--faint);cursor:default}
.btn-login{width:100%;margin-top:24px;padding:13px;background:var(--ink);
  color:#fff;border:none;border-radius:var(--radius-sm);font-size:14.5px;
  font-weight:700;cursor:pointer;font-family:var(--font);transition:background .12s}
.btn-login:hover{background:var(--ink2)}
.login-msg{margin-top:16px;font-size:13px;min-height:18px;text-align:center}
.login-msg.err{color:#a5372b}
.login-msg.ok{color:#2e7d5b}
.login-foot{margin-top:24px;text-align:center;color:var(--faint);font-size:11.5px}

/* ===== SOP 板块 ===== */
.sop-wrap{display:grid;grid-template-columns:228px 1fr;gap:26px;align-items:start}
.sop-tree{position:sticky;top:24px;max-height:calc(100vh - 140px);
  overflow-y:auto;padding-right:6px}
.sop-cat{font-size:11px;font-weight:700;color:var(--gold);letter-spacing:.08em;
  margin:18px 0 6px}
.sop-cat:first-child{margin-top:0}
.sop-dept{font-size:13px;font-weight:600;color:var(--ink);margin:12px 0 4px}
.sop-doclink{display:block;padding:6px 10px;border-radius:7px;font-size:13px;
  color:#55534c;margin:1px 0;transition:background .1s,color .1s}
.sop-doclink:hover{background:var(--hover);color:var(--ink)}
.sop-doclink.on{background:var(--ink);color:#fff;font-weight:600}
.sop-empty{color:var(--faint);font-size:12px;padding:3px 10px}
.sop-body{min-width:0}
.sop-welcome{background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:32px;color:var(--muted);margin-bottom:18px}
.sop-welcome h3{color:var(--ink);font-size:18px;margin-bottom:10px}
.sop-doc{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:34px 38px;margin-bottom:18px;font-size:14.5px;line-height:1.85;
  color:#3d3b35}
.sop-doc h1{font-size:24px;color:var(--ink);margin-bottom:20px;
  padding-bottom:14px;border-bottom:1px solid var(--line2);letter-spacing:.01em}
.sop-doc h2{font-size:18px;color:var(--ink);margin:26px 0 10px}
.sop-doc h3{font-size:15px;color:var(--ink2);margin:18px 0 8px}
.sop-doc p{margin:11px 0}
.sop-doc ul,.sop-doc ol{margin:11px 0;padding-left:26px}
.sop-doc li{margin:6px 0}
.sop-doc table{border-collapse:collapse;margin:16px 0;width:100%}
.sop-doc th,.sop-doc td{border:1px solid var(--line2);padding:8px 12px;
  font-size:13.5px}
.sop-doc th{background:var(--side);font-weight:600}
.sop-doc code{background:var(--side);padding:2px 6px;border-radius:4px;
  font-size:13px}
.sop-doc blockquote{border-left:3px solid var(--gold);padding-left:16px;
  color:var(--muted);margin:14px 0}
.sop-ai{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:22px}
.sop-ai-head{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:14px}
.sop-ai-head .muted{font-weight:400;font-size:12px;margin-left:8px}

@media(max-width:920px){
  .sidebar{width:70px;padding:16px 8px}
  .sop-wrap{grid-template-columns:1fr}
  .brand .bn,.side-sec,.navlink span:not(.ni),.navlink .badge,
  .side-foot .txt{display:none}
  .navlink{justify-content:center}
  .content{padding:28px 20px}
  .kpis{grid-template-columns:repeat(3,1fr)}
  .grid2{grid-template-columns:1fr}
}