:root{
  --bg:#fff4f6;
  --bg-2:#ffeff3;
  --sidebar:#fff0f3;
  --card:#ffffff;
  --ink:#5c4752;
  --ink-2:#8d6f7a;
  --ink-3:#b89ba4;
  --line:#ffe0e7;
  --primary:#ff5c8a;
  --primary-2:#ff8fab;
  --primary-soft:#ffe8ef;
  --primary-deep:#e83e70;
  --accent:#ff9eb5;
  --green:#7ed9a7;
  --green-soft:#e8f9ef;
  --red:#ff758c;
  --red-soft:#ffe8ec;
  --amber:#ffc078;
  --amber-soft:#fff2df;
  --blue:#7ec8ff;
  --blue-soft:#e8f4ff;
  --purple:#c9a8ff;
  --purple-soft:#f4ecff;
  --radius:22px;
  --radius-sm:14px;
  --shadow:0 8px 28px rgba(255,92,138,.10);
  --shadow-sm:0 4px 12px rgba(255,92,138,.08);
  --sidebar-w:116px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:linear-gradient(135deg,#fff8fa 0%,#fff0f4 50%,#fff7f9 100%);
  color:var(--ink);font-size:14px;line-height:1.55;
  background-attachment:fixed;
}
.app{display:flex;min-height:100vh}

/* ===== 侧边栏：参考图风格 ===== */
.sidebar{
  width:var(--sidebar-w);flex:0 0 var(--sidebar-w);
  background:var(--sidebar);border-right:1px solid var(--line);
  position:fixed;top:0;left:0;height:100vh;z-index:20;
  display:flex;flex-direction:column;align-items:center;padding:18px 8px 14px;
}
.brand{display:flex;flex-direction:column;align-items:center;gap:5px;padding-bottom:16px}
.brand-logo{width:40px;height:40px;object-fit:contain;display:block}
.brand-title{font-size:12px;font-weight:800;color:var(--primary);letter-spacing:1px}
.brand-sub{font-size:9px;color:var(--ink-3);text-transform:uppercase;letter-spacing:1.5px}
.nav{display:flex;flex-direction:column;gap:10px;width:100%;overflow-y:auto;flex:1;align-items:center;padding-top:4px}
.nav-item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  padding:9px 4px;border-radius:18px;color:var(--ink-2);text-decoration:none;font-size:11px;font-weight:600;cursor:pointer;
  transition:all .18s;width:84px;min-height:72px;text-align:center;
}
.nav-item:hover{background:#fff;color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.nav-item.active{
  background:linear-gradient(180deg,var(--primary),var(--primary-2));color:#fff;box-shadow:0 8px 18px rgba(255,92,138,.35);
}
.nav-ico{width:32px;height:32px;object-fit:contain;display:block;filter:drop-shadow(0 2px 3px rgba(0,0,0,.06))}
.nav-item.active .nav-ico{filter:drop-shadow(0 2px 4px rgba(0,0,0,.12));transform:scale(1.08)}
.sidebar-foot{display:flex;flex-direction:column;gap:7px;padding-top:12px;width:100%;align-items:center;border-top:1px solid var(--line)}
.cloud-status{font-size:9px;color:var(--ink-3);text-align:center;padding:2px}
.btn-mini{background:#fff;border:1px solid var(--line);color:var(--primary);width:84%;padding:6px 4px;border-radius:10px;font-size:10px;cursor:pointer;transition:.15s}
.btn-mini:hover{background:var(--primary-soft)}

/* ===== 主内容区 ===== */
.main{margin-left:var(--sidebar-w);flex:1;padding:26px 28px 70px;max-width:1180px}
.page-head{margin-bottom:20px;display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.page-head h1{font-size:22px;font-weight:800;display:flex;align-items:center;gap:10px;color:var(--ink)}
.page-head h1 img.ph-ico{width:30px;height:30px;object-fit:contain;display:block}
.page-head .sub{color:var(--ink-2);font-size:13px;margin-top:5px}
.date-pill{background:#fff;padding:6px 14px;border-radius:30px;font-size:12px;font-weight:700;color:var(--ink-2);box-shadow:var(--shadow-sm)}

.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:960px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

.card{background:var(--card);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);border:1px solid rgba(255,224,231,.6)}
.card-title{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:800;margin-bottom:14px;color:var(--ink)}
.card-title .ct-ico{width:22px;height:22px;object-fit:contain;display:block}
.card-title .tag{font-size:10px;font-weight:700;color:#fff;background:var(--primary);padding:3px 10px;border-radius:20px;margin-left:auto}
.card-sub{font-size:12px;color:var(--ink-3);margin:-8px 0 14px}

/* ===== 表单控件 ===== */
.input,.textarea,.select{
  width:100%;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:10px 14px;font-size:13px;font-family:inherit;color:var(--ink);background:#fffefc;transition:.15s;
}
.input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--primary);background:#fff;box-shadow:0 0 0 4px var(--primary-soft)}
.textarea{resize:vertical;min-height:84px;line-height:1.6}
label.field{display:block;font-size:12px;color:var(--ink-2);font-weight:700;margin:12px 0 5px}
.row{display:flex;gap:10px}
.row>*{flex:1}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;border:none;border-radius:30px;
  padding:10px 18px;font-size:13px;font-weight:700;cursor:pointer;transition:.15s;box-shadow:0 6px 16px rgba(255,92,138,.25);
}
.btn:hover{filter:brightness(1.05);transform:translateY(-2px);box-shadow:0 8px 20px rgba(255,92,138,.32)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:#fff;color:var(--primary);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.btn.green{background:linear-gradient(135deg,var(--green),#9de7bf);box-shadow:0 6px 16px rgba(126,217,167,.25)}
.btn.red{background:linear-gradient(135deg,var(--red),#ff9aa8);box-shadow:0 6px 16px rgba(255,117,140,.25)}
.btn.amber{background:linear-gradient(135deg,var(--amber),#ffd89a);color:#5c4752;box-shadow:0 6px 16px rgba(255,192,120,.25)}
.btn.sm{padding:7px 12px;font-size:12px}
.btn.block{width:100%}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none!important;box-shadow:none}
.icon-btn{background:none;border:none;cursor:pointer;color:var(--ink-3);font-size:15px;padding:5px 7px;border-radius:10px;transition:.15s}
.icon-btn:hover{background:var(--red-soft);color:var(--red)}

/* ===== 勾选清单 ===== */
.todo{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:14px;background:#fff;border:1px solid var(--line);margin-bottom:9px;transition:.15s}
.todo:hover{background:#fff8fa;border-color:#ffd6e2}
.todo input[type=checkbox]{width:18px;height:18px;accent-color:var(--primary);cursor:pointer;flex:0 0 18px}
.todo .txt{flex:1;border:none;background:transparent;font-size:13px;color:var(--ink);padding:3px 2px}
.todo .txt:focus{outline:none}
.todo.done .txt{text-decoration:line-through;color:var(--ink-3)}
.todo.done{background:#fff8fa;opacity:.75}
.add-line{display:flex;gap:9px;margin-top:8px}

/* ===== 进度条 ===== */
.progress{height:12px;background:#ffe8ef;border-radius:20px;overflow:hidden;position:relative}
.progress>span{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--primary-2));border-radius:20px;transition:width .4s}
.progress.green>span{background:linear-gradient(90deg,var(--green),#9de7bf)}
.progress.amber>span{background:linear-gradient(90deg,var(--amber),#ffd89a)}
.progress.red>span{background:linear-gradient(90deg,var(--red),#ff9aa8)}
.metric{display:flex;flex-direction:column;gap:6px}
.metric .v{font-size:26px;font-weight:800;color:var(--primary)}
.metric .l{font-size:12px;color:var(--ink-2)}

/* ===== 环图 ===== */
.ring{width:120px;height:120px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--primary) var(--p,0%),#ffe8ef 0);margin:0 auto}
.ring .inner{width:90px;height:90px;border-radius:50%;background:#fff;display:grid;place-items:center;font-weight:800;font-size:20px;color:var(--primary)}
.ring.amber{background:conic-gradient(var(--amber) var(--p,0%),#ffe8ef 0)}.ring.amber .inner{color:var(--amber)}
.ring.green{background:conic-gradient(var(--green) var(--p,0%),#ffe8ef 0)}.ring.green .inner{color:var(--green)}

/* ===== 条形统计 ===== */
.bars{display:flex;align-items:flex-end;gap:14px;height:150px;padding:10px 4px 0}
.bars .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;height:100%;justify-content:flex-end}
.bars .col .bar{width:60%;max-width:34px;border-radius:8px 8px 0 0;background:linear-gradient(180deg,var(--primary),var(--primary-2));min-height:4px;transition:height .4s}
.bars .col .cap{font-size:11px;color:var(--ink-2)}
.bars .col .day{font-size:11px;color:var(--ink-3)}

/* ===== 徽章 / 标签 ===== */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;padding:4px 11px;border-radius:20px;background:var(--primary-soft);color:var(--primary);font-weight:700}
.badge.green{background:var(--green-soft);color:#3fb07a}
.badge.red{background:var(--red-soft);color:#e05a70}
.badge.amber{background:var(--amber-soft);color:#d8922e}
.badge.blue{background:var(--blue-soft);color:#3b9be0}
.badge.purple{background:var(--purple-soft);color:#9b6ee0}
.badge.gray{background:#f5f0f2;color:var(--ink-2)}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:6px 12px;border-radius:20px;border:1px solid var(--line);background:#fff;cursor:pointer;transition:.15s;user-select:none;color:var(--ink-2)}
.chip:hover{border-color:var(--primary);color:var(--primary)}
.chip.on{background:var(--primary);color:#fff;border-color:var(--primary)}
.chip.heat-3.on{background:var(--red);border-color:var(--red)}
.chip.heat-2.on{background:var(--amber);border-color:var(--amber);color:#fff}

/* ===== 列表项 ===== */
.item{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin-bottom:10px;transition:.15s}
.item:hover{box-shadow:var(--shadow-sm);border-color:#ffd6e2}
.item .top{display:flex;align-items:center;gap:9px;margin-bottom:7px;flex-wrap:wrap}
.item .title{font-weight:700;font-size:13.5px;flex:1;color:var(--ink)}
.item .meta{font-size:11.5px;color:var(--ink-3)}
.item .body{font-size:13px;color:var(--ink-2);white-space:pre-wrap;line-height:1.65}
.item .body.empty{color:var(--ink-3);font-style:italic}
.item .actions{display:flex;gap:4px;margin-left:auto}
.item .foot{display:flex;gap:7px;align-items:center;margin-top:10px;flex-wrap:wrap}

.empty-tip{text-align:center;color:var(--ink-3);font-size:13px;padding:28px 12px;border:1px dashed var(--line);border-radius:16px;background:#fff}

/* ===== 表格 ===== */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;color:var(--ink-3);font-weight:700;font-size:12px;padding:10px;border-bottom:1px solid var(--line)}
.tbl td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr:hover td{background:#fff8fa}
.tbl .amt.in{color:var(--green);font-weight:800}
.tbl .amt.out{color:var(--red);font-weight:800}
.tbl .del{color:var(--ink-3);cursor:pointer}
.tbl .del:hover{color:var(--red)}

/* ===== 分段 / tabs ===== */
.seg{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.seg button{background:#fff;border:1px solid var(--line);color:var(--ink-2);padding:7px 14px;border-radius:20px;font-size:12.5px;cursor:pointer;transition:.15s;font-weight:600}
.seg button.on{background:var(--primary);color:#fff;border-color:var(--primary)}
.seg button:hover{border-color:var(--primary)}

/* ===== 提示 ===== */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:11px 22px;border-radius:16px;font-size:13px;opacity:0;transition:.25s;z-index:99;box-shadow:var(--shadow)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.note{font-size:12px;color:var(--ink-2);background:#fff8fa;border:1px solid var(--line);padding:10px 13px;border-radius:12px;margin-bottom:14px;line-height:1.6}
.divider{height:1px;background:var(--line);margin:6px 0 16px}
.hint{font-size:11.5px;color:var(--ink-3);margin-top:6px}
.kvs{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:8px}
.kvs .kv{display:flex;flex-direction:column;gap:2px}
.kvs .kv b{font-size:20px;color:var(--primary)}
.kvs .kv span{font-size:11.5px;color:var(--ink-2)}

/* ===== 首页参考图风格 ===== */
.hero-quote{
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  border-radius:var(--radius);padding:26px 22px;color:#fff;text-align:center;box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.hero-quote::before{content:"";position:absolute;right:-10px;top:-10px;width:110px;height:110px;background:url(icons/kitty.png) no-repeat center;background-size:contain;opacity:.22;transform:rotate(-12deg)}
.hero-quote .quote{font-size:18px;font-weight:700;font-style:italic;margin-bottom:8px}
.hero-quote .trans{font-size:13px;opacity:.92;margin-bottom:16px}
.hero-quote .btn{background:#fff;color:var(--primary);box-shadow:0 4px 14px rgba(0,0,0,.12)}
.hero-quote .btn:hover{background:#fff5f7}
.stat-card{text-align:center;padding:22px 14px}
.stat-card .ico{width:38px;height:38px;object-fit:contain;margin:0 auto 8px;display:block}
.stat-card .num{font-size:28px;font-weight:800;color:var(--primary)}
.stat-card .lab{font-size:12px;color:var(--ink-2);margin-top:2px}
.overview-list{display:flex;flex-direction:column;gap:10px}
.overview-row{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-2)}
.overview-row .ico{width:20px;height:20px;object-fit:contain;display:block}

/* 滚动条美化 */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#ffd6e2;border-radius:8px}
::-webkit-scrollbar-track{background:transparent}