/* 生活糖果家居馆发财记录系统 · 糖果色主题（移动端优先） */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root{
  /* 文字 / 线 */
  --ink:#3b2f3f; --muted:#90839a; --line:#f2e9f1;
  /* 底色 */
  --bg:#fff8f4; --card:#ffffff;
  /* 糖果色 */
  --pink:#ff7eb6; --pink-d:#ff5c9e;
  --peach:#ffb27a; --lemon:#ffd66b;
  --mint:#2ecfa0; --mint-d:#1fbc8d;
  --sky:#6fa8ff; --violet:#a78bfa; --grape:#c084fc;
  /* 语义色 */
  --inc:#10b981; --exp:#ff6f91; --blue:#6f9bff;
  /* 阴影 */
  --sh-card:0 10px 30px rgba(196,145,180,.14);
  --sh-btn:0 8px 20px rgba(167,139,250,.30);
  --grad-brand:linear-gradient(120deg,#ff9ec7 0%,#b79cff 52%,#7cc4ff 100%);
  --grad-pink:linear-gradient(135deg,#ff9ec7,#ff5c9e);
  --grad-mint:linear-gradient(135deg,#5fe6b8,#22c98a);
  --grad-coral:linear-gradient(135deg,#ffa38c,#ff6f91);
  --grad-sky:linear-gradient(135deg,#8fc9ff,#6f9bff);
  --grad-violet:linear-gradient(135deg,#c1a9ff,#a78bfa);
}

body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;
  color:var(--ink); line-height:1.6; -webkit-text-size-adjust:100%;
  background:
    radial-gradient(1100px 560px at 8% -10%, #ffe4f1 0%, rgba(255,228,241,0) 55%),
    radial-gradient(1000px 560px at 100% 0%, #e7f4ff 0%, rgba(231,244,255,0) 52%),
    radial-gradient(900px 700px at 50% 120%, #f3eaff 0%, rgba(243,234,255,0) 55%),
    linear-gradient(180deg,#fffaf7 0%,#fdf6ff 100%);
  background-attachment:fixed; min-height:100vh;
}
.wrap{max-width:1120px; margin:0 auto; padding:20px 16px 28px;}

/* ===== 顶栏 ===== */
.topbar{
  background:var(--grad-brand); color:#fff; padding:13px 20px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
  position:sticky; top:0; z-index:50;
  box-shadow:0 8px 26px rgba(190,150,220,.32);
}
.brand{font-weight:800; font-size:18px; letter-spacing:.6px; text-shadow:0 1px 2px rgba(0,0,0,.08);
  display:flex; align-items:center; gap:8px;}
.brand::before{content:""; width:15px; height:15px; border-radius:50%; flex:0 0 auto;
  background:conic-gradient(from 0deg,#ff9ec7,#ffd66b,#5fe6b8,#7cc4ff,#c084fc,#ff9ec7);
  box-shadow:0 0 0 3px rgba(255,255,255,.45);}
.nav{display:flex; gap:6px; flex-wrap:wrap;}
.nav a{color:#fff; text-decoration:none; padding:7px 15px; border-radius:999px; font-size:14px;
  font-weight:600; background:rgba(255,255,255,.16); transition:background .15s, transform .1s;}
.nav a:hover{background:rgba(255,255,255,.30); transform:translateY(-1px);}
.nav a.active{background:#fff; color:#c04f8f; box-shadow:0 4px 14px rgba(0,0,0,.12);}
.nav a.logout{background:rgba(0,0,0,.16);}
.nav a.logout:hover{background:rgba(0,0,0,.26);}

/* ===== 卡片 / 网格 ===== */
.card,.panel,.kpi{
  background:var(--card); border-radius:20px;
  border:1px solid rgba(255,255,255,.7);
  box-shadow:var(--sh-card);
}
.card{padding:20px; margin-bottom:16px;}
.panel{padding:20px;}
.grid{display:grid; gap:16px; margin-bottom:16px;}
.grid2{margin-bottom:0;}
@media(min-width:820px){ .grid2{grid-template-columns:1fr 1fr;} }

/* KPI */
.kpis{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-bottom:18px;}
@media(min-width:760px){ .kpis{grid-template-columns:repeat(4,1fr);} }
.kpi{position:relative; overflow:hidden; padding:18px 18px 16px;}
.kpi::after{content:""; position:absolute; right:-26px; top:-26px; width:78px; height:78px;
  border-radius:50%; opacity:.5; background:radial-gradient(circle at 30% 30%, #fff, transparent 70%);}
.kpi .lbl{font-size:13px; color:var(--muted); font-weight:600; letter-spacing:.3px;}
.kpi .val{font-size:23px; font-weight:800; margin-top:8px; font-variant-numeric:tabular-nums;}
.kpi.inc{background:linear-gradient(135deg,#e6fff6,#d3f9ea);} .kpi.inc .val{color:#0e9f6e;}
.kpi.exp{background:linear-gradient(135deg,#fff0f5,#ffe2ec);} .kpi.exp .val{color:#f0559a;}
.kpi.net{background:linear-gradient(135deg,#eef3ff,#e6ecff);} .kpi.net .val{color:#5578e6;}
.kpi.count{background:linear-gradient(135deg,#fff8e6,#fff1d6);} .kpi.count .val{color:#d99a2b;}
.kpi .sub{margin-top:7px; font-size:12px; font-weight:700; line-height:1.4;}

/* ===== 看板：时间区间选择 ===== */
.rangefilter{padding:16px 18px;}
.rf-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.rf-lbl{font-size:13px; font-weight:700; color:var(--muted); letter-spacing:.4px; flex:0 0 auto;}
.rf-pills{display:flex; gap:8px; flex-wrap:wrap;}
.rf-pill{display:inline-block; text-decoration:none; font-size:13px; font-weight:700;
  color:var(--muted); padding:8px 16px; border-radius:999px; background:#fff;
  border:1.5px solid var(--line); transition:all .16s; white-space:nowrap;}
.rf-pill:hover{border-color:#ffd3e6; color:var(--pink-d); transform:translateY(-1px);}
.rf-pill.on{background:var(--grad-violet); color:#fff; border-color:transparent; box-shadow:var(--sh-btn);}
.rf-custom{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:14px;}
.rf-custom input[type=date]{width:auto; flex:0 0 auto; padding:9px 12px; border-radius:12px;
  font-size:13px; font-weight:600; background:#fffdfe;}
.rf-custom button{flex:0 0 auto;}
.rf-dash{font-size:13px; color:var(--muted); font-weight:700;}
.rf-info{margin-top:13px; padding-top:12px; border-top:1px dashed var(--line);
  font-size:13px; color:var(--muted); font-weight:600; line-height:1.7;}
.rf-info b{color:var(--ink); font-weight:800;}

/* 环比标签 */
.delta{display:inline-block; padding:2px 9px; border-radius:999px; font-size:11.5px;
  font-weight:700; background:rgba(255,255,255,.72);}
.delta.good{color:#0e9f6e; background:#dcfaef;}
.delta.bad{color:#e8457e; background:#ffe4ee;}
.delta.flat{color:var(--muted); background:#f6f1f7;}

/* 标题旁的灰字注解 */
.h2note{margin-left:auto; font-size:11.5px; font-weight:700; color:var(--muted);
  background:#f8f2f9; padding:3px 10px; border-radius:999px; letter-spacing:.3px;}
.emptynote{text-align:center; color:var(--muted); font-size:14px; font-weight:600; padding:22px 18px;}
.emptynote a{color:var(--pink-d); font-weight:800; text-decoration:none;}
.emptynote a:hover{text-decoration:underline;}
.td-empty{text-align:center !important; color:var(--muted); padding:24px 10px !important; font-weight:600;}

/* 面板标题 */
.panel h2{font-size:15px; font-weight:700; margin-bottom:14px; display:flex; align-items:center; gap:9px;}
.panel h2::before{content:""; width:5px; height:17px; border-radius:4px; background:var(--grad-violet);}
.chartbox{width:100%;}

/* ===== 表单 ===== */
form .row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.field{margin-bottom:12px; display:flex; flex-direction:column;}
.field label{font-size:13px; color:var(--muted); margin-bottom:6px; font-weight:600;}
input,select,textarea{font:inherit; padding:12px 14px; border:1.5px solid var(--line);
  border-radius:14px; background:#fffdfe; color:var(--ink); width:100%; transition:border-color .15s, box-shadow .15s;}
input::placeholder,textarea::placeholder{color:#c9bccd;}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--pink);
  box-shadow:0 0 0 4px rgba(255,126,182,.16); background:#fff;}
textarea{resize:vertical; min-height:64px;}

/* ===== 按钮 ===== */
button{cursor:pointer; font:inherit; font-weight:700; color:#fff; border:none; border-radius:14px;
  padding:12px 20px; width:100%; background:var(--grad-violet); box-shadow:var(--sh-btn);
  transition:transform .12s, box-shadow .12s, filter .12s;}
button:hover{transform:translateY(-1px); box-shadow:0 12px 26px rgba(167,139,250,.40); filter:brightness(1.03);}
button:active{transform:translateY(0) scale(.99);}
button.ghost{background:#fff; color:var(--pink-d); border:1.5px solid #ffd3e6; box-shadow:none;}
button.ghost:hover{background:#fff5fa; box-shadow:0 6px 16px rgba(255,126,182,.16);}
button.sm{width:auto; padding:8px 16px; font-size:13px; border-radius:999px;}
button.del{background:none; color:#f0559a; box-shadow:none; padding:2px 8px; width:auto; font-weight:600;}
button.del:hover{transform:none; filter:none; text-decoration:underline;}
/* 链接型按钮（导出/翻页等 <a class="sm ghost">） */
a.sm{display:inline-block; text-decoration:none; font-weight:700; border-radius:999px;
  padding:9px 18px; font-size:13px; line-height:1.3; transition:all .15s;}
a.ghost{background:#fff; color:var(--pink-d); border:1.5px solid #ffd3e6;}
a.ghost:hover{background:#fff5fa; box-shadow:0 6px 16px rgba(255,126,182,.18);}

/* ===== 表格 ===== */
.table-scroll{overflow-x:auto; border-radius:16px; border:1px solid var(--line);}
table{width:100%; border-collapse:collapse; font-size:13px;}
th,td{padding:11px 10px; text-align:left; white-space:nowrap; border-bottom:1px solid #f6eff5;}
thead th{color:#8f7f97; font-weight:700; background:linear-gradient(180deg,#faf3fb,#f6eef8);
  position:sticky; top:0;}
tbody tr{transition:background .12s;}
tbody tr:hover{background:#fff6fb;}
tbody tr:last-child td{border-bottom:none;}
.pill{display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:700;}
.pill.i{background:#d7f9ea; color:#0e9f6e;} .pill.e{background:#ffe1ec; color:#f0559a;}
.money{font-variant-numeric:tabular-nums; text-align:right;}

/* ===== 提示 ===== */
.alert{padding:13px 16px; border-radius:14px; margin-bottom:16px; font-size:14px; font-weight:600;}
.alert-ok{background:linear-gradient(135deg,#e2fff4,#d6f9ec); color:#0c8a63; border:1px solid #b8f0d9;}
.alert-err{background:linear-gradient(135deg,#fff0f4,#ffe3ec); color:#d63f7e; border:1px solid #ffc9dd;}

/* ===== 登录 ===== */
.login-box{max-width:360px; margin:12vh auto; background:rgba(255,255,255,.92); border-radius:24px;
  padding:32px 26px; box-shadow:0 18px 50px rgba(196,145,180,.26); text-align:center;
  border:1px solid rgba(255,255,255,.8); backdrop-filter:blur(6px);}
.login-box h1{font-size:20px; font-weight:800; margin-bottom:6px;
  background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent;}
.login-box .muted{color:var(--muted); font-size:13px; margin-bottom:20px;}
.login-box form{display:flex; flex-direction:column; gap:14px;}
.login-box button{font-size:16px;}

/* ===== 数字看板（表格版） ===== */
table.report th.num, table.report td.num{text-align:right; font-variant-numeric:tabular-nums;}
table.report tfoot td{background:linear-gradient(180deg,#fdf6ff,#f8f0fc); font-weight:800;
  border-top:2px solid #efe0f0; border-bottom:none; color:var(--ink);}
table.report td a{color:#7a5fb8; font-weight:700; text-decoration:none;}
table.report td a:hover{text-decoration:underline;}
.pos{color:#0e9f6e; font-weight:800;}
.neg{color:#f0559a; font-weight:800;}
.sharebar{height:5px; border-radius:99px; background:#f2eaf5; margin-top:5px; overflow:hidden;}
.sharebar i{display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,#c4a9f7,#8f6ae0);}
@media(max-width:560px){ table.report{font-size:12px;} table.report th, table.report td{padding:9px 7px;} }

/* ===== 杂项 ===== */
.muted{color:var(--muted);} .right{text-align:right;} .center{text-align:center;}
.toolbar{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; margin-bottom:16px;}
.toolbar.wrap{display:flex;}
.toolbar .field{margin-bottom:0; flex:1; min-width:120px;}
.total-bar{display:flex; gap:18px; flex-wrap:wrap; margin-top:14px; font-size:14px;
  background:linear-gradient(135deg,#fff6fb,#f6f0ff); padding:12px 16px; border-radius:14px;}
.total-bar b{font-size:16px;}
.foot{text-align:center; color:#b3a6bd; font-size:12px; padding:22px 10px 8px;}
.del{color:#f0559a; cursor:pointer; border:none; background:none; padding:2px 6px; font-size:13px; width:auto;}
.tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px;}
.tabs a{padding:8px 18px; border-radius:999px; background:#f6eef8; color:var(--muted);
  text-decoration:none; font-size:14px; font-weight:600; transition:all .15s;}
.tabs a:hover{background:#efe2f4;}
.tabs a.active{background:var(--grad-violet); color:#fff; box-shadow:var(--sh-btn);}

/* ===== 向导式录入 ===== */
.wiz-mask{position:fixed; inset:0; background:rgba(60,40,70,.44); backdrop-filter:blur(3px);
  display:none; align-items:center; justify-content:center; z-index:100; padding:14px;}
.wiz{background:#fff; width:100%; max-width:470px; border-radius:24px; padding:22px;
  margin:auto; box-shadow:0 24px 60px rgba(120,80,140,.34); max-height:92vh; overflow:auto;
  border:1px solid rgba(255,255,255,.9);}
.wiz-prog{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;}
.wiz-prog .step{font-size:13px; color:var(--muted); font-weight:600;
  background:#f7eff8; padding:4px 12px; border-radius:999px;}
.wiz-prog .back{background:#f4ecf6; color:var(--ink); border:none; width:auto; padding:7px 15px;
  border-radius:999px; font-size:13px; font-weight:700; cursor:pointer; box-shadow:none;}
.wiz-prog .back:hover{background:#ece0f0; transform:none;}
.wiz-title{font-size:19px; font-weight:800; margin-bottom:18px; line-height:1.4; text-align:center; color:#4a3550;}
.wiz-body{display:grid; gap:13px; text-align:center; justify-items:stretch;}
.wiz-body input,.wiz-body select,.wiz-body textarea{text-align:center;}

/* 大按钮 */
.bbtn{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  padding:22px 16px; border-radius:18px; font-size:19px; font-weight:800; border:none;
  width:100%; text-align:center; cursor:pointer; user-select:none; color:#fff;
  box-shadow:0 8px 20px rgba(150,120,170,.20); transition:transform .1s, box-shadow .15s, filter .15s;}
.bbtn:hover{transform:translateY(-2px); filter:brightness(1.03); box-shadow:0 12px 26px rgba(150,120,170,.28);}
.bbtn:active{transform:translateY(0) scale(.985);}
.bbtn .sub{display:block; font-size:12px; font-weight:600; opacity:.92; margin-top:3px;}
.bbtn.green{background:var(--grad-mint);}
.bbtn.orange{background:var(--grad-coral);}
.bbtn.blue{background:var(--grad-sky);}
.bbtn.neutral{background:#fff; color:#5c4a63; border:1.5px solid #f0e3f2; box-shadow:0 4px 14px rgba(180,150,190,.12);}
.bbtn.neutral:hover{background:#fdf6ff;}

.wiz-input{font-size:30px; text-align:center; padding:18px; font-weight:800;
  border:2px solid #ffe0ee; background:#fff7fb; border-radius:16px; color:#c04f8f;}
.wiz-row{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px;}
.wiz-row select{padding:14px 4px; text-align:center; font-size:15px; text-align-last:center;
  border-radius:14px; font-weight:600;}
.wiz-summary{background:linear-gradient(135deg,#fff8fc,#f8f2ff); border-radius:16px; padding:10px 18px;
  font-size:14px; border:1px solid #f3e8f6;}
.wiz-summary > div{padding:9px 0; border-bottom:1px dashed #ecdff0; text-align:center;}
.wiz-summary > div:last-child{border-bottom:none;}
.wiz-summary .k{display:block; font-size:12px; color:var(--muted); margin-bottom:2px; font-weight:600;}
.wiz-summary .v{display:block; font-size:18px; font-weight:800; color:#4a3550;}

/* 分段单选 */
.seg{display:flex; gap:8px; flex-wrap:wrap;}
.seg label{display:flex; align-items:center; gap:6px; padding:10px 18px; border:1.5px solid var(--line);
  border-radius:999px; cursor:pointer; font-size:14px; background:#fff; user-select:none; font-weight:600;}
.seg input{width:auto; margin:0; accent-color:var(--pink);}
.seg label:has(input:checked){background:var(--grad-pink); color:#fff; border-color:transparent;}
.hint{font-size:12px; color:var(--muted); align-self:center; line-height:1.4;}
form .row .hint.field{justify-content:center;}

@media(max-width:560px){
  form .row{grid-template-columns:1fr;}
  .brand{font-size:15px;}
  .wrap{padding:16px 12px 24px;}
}
@media(max-width:640px){
  .topbar{padding:11px 14px;}
  .brand{flex:1 1 100%;}
  .nav{width:100%;}
  .nav a{flex:1 1 auto; text-align:center; padding:8px 10px;}
}