:root {
  --ink: #18221d;
  --muted: #718078;
  --line: #e5e9e5;
  --canvas: #f5f7f3;
  --card: #ffffff;
  --forest: #173f35;
  --forest-2: #285a4c;
  --mint: #dff2e5;
  --lime: #c8f05a;
  --orange: #f59e63;
  --blue: #6da9d7;
  --purple: #a892d5;
  --red: #dc6b65;
  --shadow: 0 10px 32px rgba(26, 46, 37, 0.06);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; background: var(--canvas); }
body { margin: 0; color: var(--ink); background: var(--canvas); font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.login-screen { min-height: 100vh; display: grid; place-items: center; padding: 28px; background: radial-gradient(circle at 18% 16%, rgba(200,240,90,.19), transparent 30%), linear-gradient(135deg, #eef4ee 0%, #f8faf7 50%, #e7efe9 100%); }
.login-card { width: min(460px, 100%); padding: 40px; border: 1px solid rgba(205,218,209,.9); border-radius: 24px; background: rgba(255,255,255,.94); box-shadow: 0 28px 80px rgba(27,61,46,.13); }
.login-brand { display: flex; align-items: center; gap: 13px; margin-bottom: 38px; }
.login-brand strong, .login-brand small { display: block; }
.login-brand strong { color: var(--forest); font-size: 22px; letter-spacing: .06em; }
.login-brand small { margin-top: 2px; color: #94a49b; font-size: 10px; letter-spacing: .18em; }
.login-mark { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; color: var(--forest); background: var(--lime); }
.login-mark svg { width: 24px; height: 24px; stroke-width: 2.2; }
.login-kicker { margin-bottom: 9px; color: #759585; font-size: 11px; font-weight: 700; letter-spacing: .18em; }
.login-card h1 { margin: 0; color: #20342a; font-size: 32px; letter-spacing: -.04em; }
.login-card > p { margin: 11px 0 27px; color: #7c8c84; font-size: 14px; }
.login-card label { display: block; margin: 17px 0 7px; color: #46594f; font-size: 13px; font-weight: 600; }
.login-card input { width: 100%; height: 48px; padding: 0 14px; border: 1px solid #dce5df; border-radius: 11px; outline: none; color: #24372d; background: #fbfcfb; transition: .2s ease; }
.login-card input:focus { border-color: #6c9a82; background: #fff; box-shadow: 0 0 0 4px rgba(71,126,97,.11); }
.login-card form button { width: 100%; height: 48px; margin-top: 24px; border: 0; border-radius: 11px; color: #fff; background: var(--forest); font-weight: 700; cursor: pointer; transition: .2s ease; }
.login-card form button:hover { background: #215446; transform: translateY(-1px); }
.login-card form button:disabled { opacity: .65; cursor: wait; transform: none; }
.login-error { margin-top: 15px; padding: 10px 12px; border-radius: 9px; color: #8b443e; background: #fff0ee; font-size: 13px; }
.login-foot { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 24px; color: #93a098; font-size: 11px; }
.login-foot span { width: 7px; height: 7px; border-radius: 50%; background: #70b47f; box-shadow: 0 0 0 4px rgba(112,180,127,.12); }
.access-blocked { text-align: center; }
.blocked-icon { width: 52px; height: 52px; display: grid; place-items: center; margin: 0 auto 22px; border-radius: 50%; color: #9a514b; background: #fde6e3; font-size: 24px; font-weight: 800; }
.current-ip-box { margin-top: 22px; padding: 13px; border-radius: 10px; color: #68786f; background: #f3f6f3; font-size: 13px; }
.current-ip-box strong { color: #2e473a; }
.retry-access { width: 100%; height: 46px; margin-top: 18px; border: 0; border-radius: 10px; color: #fff; background: var(--forest); cursor: pointer; }

.app-shell { min-height: 100vh; display: flex; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; width: 238px; display: flex; flex-direction: column; padding: 26px 18px 18px; color: #eef5f1; background: var(--forest); }
.brand { display: flex; align-items: center; gap: 12px; margin: 0 10px 43px; color: inherit; text-decoration: none; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: var(--forest); background: var(--lime); }
.brand-mark svg { width: 21px; height: 21px; stroke-width: 2.2; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 17px; letter-spacing: .07em; }
.brand small { margin-top: 2px; color: #9bb7ae; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }
.main-nav { display: grid; gap: 7px; }
.nav-item { width: 100%; height: 48px; border: 0; border-radius: 11px; display: flex; align-items: center; gap: 13px; padding: 0 14px; color: #aec2ba; background: transparent; font-size: 14px; cursor: pointer; transition: .2s ease; }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav-item.active { color: #fff; background: rgba(255,255,255,.105); box-shadow: inset 3px 0 var(--lime); }
.nav-icon { display: grid; place-items: center; font-size: 19px; }
.sidebar-tip { margin-top: auto; padding: 17px 16px; border: 1px solid rgba(255,255,255,.09); border-radius: 14px; background: rgba(255,255,255,.055); }
.tip-icon { width: 25px; height: 25px; display: grid; place-items: center; margin-bottom: 11px; border-radius: 8px; color: var(--forest); background: var(--lime); font-size: 12px; }
.sidebar-tip strong { font-size: 12px; font-weight: 600; }
.sidebar-tip p { margin: 6px 0 0; color: #91aaa1; font-size: 10px; line-height: 1.6; }
.sidebar-foot { padding: 14px 3px 0; color: #78958a; text-align: center; font-size: 9px; letter-spacing: .1em; }

.main-content { width: calc(100% - 238px); min-height: 100vh; margin-left: 238px; }
.topbar { height: 74px; position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 0 34px; border-bottom: 1px solid var(--line); background: rgba(245,247,243,.91); backdrop-filter: blur(12px); }
.breadcrumb { display: flex; align-items: center; gap: 9px; color: #93a098; font-size: 12px; }
.breadcrumb i { font-style: normal; color: #c6cec9; }
.breadcrumb strong { color: #38483f; font-weight: 600; }
.top-actions { display: flex; align-items: center; gap: 22px; }
.user-pill { padding: 6px 10px; border-radius: 8px; color: #385247; background: #e8f0ea; font-size: 12px; font-weight: 600; }
.logout-btn { height: 34px; padding: 0 11px; border: 1px solid #dfe5e1; border-radius: 8px; color: #6c7b74; background: transparent; font-size: 12px; cursor: pointer; }
.logout-btn:hover { color: #8b443e; border-color: #e7c9c6; background: #fff4f2; }
.ghost-btn, .secondary-btn, .primary-btn { border: 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 9px; cursor: pointer; transition: .2s ease; }
.ghost-btn { height: 35px; padding: 0 12px; border: 1px solid var(--line); color: #506159; background: #fff; font-size: 11px; }
.ghost-btn:hover { border-color: #bac8c0; box-shadow: 0 4px 12px rgba(20,40,30,.05); }
.save-state { display: flex; align-items: center; gap: 7px; color: #76867e; font-size: 11px; }
.save-state span { width: 6px; height: 6px; border-radius: 50%; background: #6fb780; box-shadow: 0 0 0 4px rgba(111,183,128,.12); }
.mobile-menu { display: none; border: 0; background: transparent; font-size: 21px; }
.view-container { max-width: 1500px; margin: auto; padding: 34px 36px 54px; }

.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 27px; }
.eyebrow { margin-bottom: 9px; color: #80a092; font-size: 9px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.page-head h1 { margin: 0; font-size: clamp(23px, 2.2vw, 31px); line-height: 1.15; letter-spacing: -.03em; }
.page-head p { margin: 10px 0 0; color: var(--muted); font-size: 12px; }
.head-controls { display: flex; align-items: center; gap: 9px; }
.scope-switch { display:flex; padding:3px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.scope-switch button { height:32px; padding:0 13px; border:0; border-radius:7px; color:#7a8981; background:transparent; font-size:10px; cursor:pointer; }
.scope-switch button.active { color:#fff; background:var(--forest); box-shadow:0 3px 9px rgba(23,63,53,.18); }
.select-wrap, .month-wrap { position: relative; }
.select-wrap select, .month-wrap input { min-width: 150px; height: 40px; appearance: none; border: 1px solid var(--line); border-radius: 10px; outline: none; color: #34463d; background: #fff; padding: 0 34px 0 13px; font-size: 11px; cursor: pointer; }
.month-wrap input { min-width: 137px; padding-right: 10px; }

.period-banner { min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:20px; margin:-8px 0 16px; padding:11px 18px; border:1px solid #dce7df; border-radius:13px; background:linear-gradient(90deg,#f0f7f2,#f9fbf9); }
.period-banner > div { display:flex; align-items:center; gap:11px; }
.period-banner span { padding:5px 8px; border-radius:6px; color:#35634d; background:#dcefe2; font-size:8px; font-weight:700; letter-spacing:.08em; }
.period-banner strong { color:#294238; font-size:13px; }
.period-banner p { margin:0; color:#7a8981; font-size:9px; }
.entry-date-banner { border-color:#e3e8d0; background:linear-gradient(90deg,#f7faed,#fbfcf7); }
.entry-date-banner span { color:#53682c; background:#e9f3c9; }
.date-required { display:flex; align-items:center; gap:9px; padding-left:12px; border-left:3px solid var(--lime); }
.date-required > span { color:#5d6d65; font-size:9px; font-weight:600; white-space:nowrap; }
.date-shortcuts { display:flex; align-items:center; gap:6px; padding:4px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.date-shortcuts button { height:32px; padding:0 11px; border:0; border-radius:7px; color:#617169; background:transparent; font-size:12px; white-space:nowrap; cursor:pointer; transition:.18s ease; }
.date-shortcuts button:hover { color:#fff; background:var(--forest); }
.date-shortcuts button:nth-last-child(-n+2) { color:#315c47; background:#edf5ef; }
.date-shortcuts button:nth-last-child(-n+2):hover { color:#fff; background:var(--forest); }
.select-wrap::after { content: "⌄"; position: absolute; right: 13px; top: 8px; pointer-events: none; color: #7c8a83; }

.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
.kpi-card { min-height: 137px; position: relative; overflow: hidden; padding: 20px 21px; border: 1px solid #e8ece8; border-radius: 15px; background: var(--card); box-shadow: 0 3px 12px rgba(35,55,45,.025); }
.kpi-card.hero { color: #f5fbf7; border-color: transparent; background: var(--forest); }
.kpi-card.hero::after { content:""; position:absolute; right:-31px; bottom:-48px; width:115px; height:115px; border: 25px solid rgba(200,240,90,.10); border-radius:50%; }
.kpi-label { display: flex; align-items: center; justify-content: space-between; color: #7a8981; font-size: 11px; }
.hero .kpi-label { color: #b3cac1; }
.kpi-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: var(--forest-2); background: #eff5f0; }
.hero .kpi-icon { color: var(--forest); background: var(--lime); }
.kpi-value { margin-top: 18px; font-size: clamp(23px, 2vw, 30px); font-weight: 700; letter-spacing: -.04em; }
.currency { margin-right: 3px; font-size: 13px; font-weight: 500; opacity: .75; vertical-align: 6px; }
.kpi-foot { display: flex; align-items: center; gap: 5px; margin-top: 7px; color: #98a49e; font-size: 9px; }
.trend-up { color: #60a373; }
.trend-down { color: #d9766d; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(260px, .85fr); gap: 16px; margin-bottom: 16px; }
.panel { border: 1px solid #e8ece8; border-radius: 15px; background: #fff; box-shadow: var(--shadow); }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 20px 22px 11px; }
.panel-head h2 { margin: 0; font-size: 14px; }
.panel-head p { margin: 5px 0 0; color: #95a19a; font-size: 9px; }
.legend { display: flex; align-items: center; gap: 13px; color: #7e8b84; font-size: 9px; }
.legend span { display: flex; align-items: center; gap: 5px; }
.legend i { width: 7px; height: 7px; border-radius: 2px; background: var(--forest-2); }
.legend span:nth-child(2) i { background: var(--lime); }
.bar-chart { min-height: 254px; display: flex; align-items: stretch; gap: 20px; padding: 12px 25px 21px 53px; }
.chart-y { width: 1px; position: relative; flex: 0 0 1px; margin: 4px 0 32px; background: #eef1ef; }
.chart-y span { position: absolute; right: 12px; transform: translateY(50%); color: #9ba69f; font-size: 8px; white-space: nowrap; }
.chart-y::before, .chart-y::after { content:""; position:absolute; left:0; width: calc(100vw - 450px); max-width: 650px; border-top: 1px dashed #edf0ee; }
.chart-y::before { top: 33.33%; }
.chart-y::after { top: 66.66%; }
.bars { flex: 1; display: flex; align-items: flex-end; justify-content: space-around; gap: 16px; min-width: 0; }
.bar-item { height: 100%; min-width: 48px; max-width: 82px; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 9px; }
.bar-value { color: #627169; font-size: 8px; white-space: nowrap; }
.bar-stack { width: min(46px, 72%); min-height: 3px; display: flex; flex-direction: column-reverse; border-radius: 7px 7px 3px 3px; overflow: hidden; transition: .35s ease; }
.bar-order { background: var(--forest-2); }
.bar-promo { background: var(--lime); }
.bar-name { max-width: 78px; overflow: hidden; color: #66756d; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.empty-chart { width:100%; height:190px; display:grid; place-items:center; color:#9aa59f; font-size:11px; }

.donut-panel { padding-bottom: 22px; }
.donut-wrap { display: grid; place-items: center; padding: 8px 20px 17px; }
.donut { --order: 50%; width: 145px; height: 145px; position: relative; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--forest-2) 0 var(--order), var(--lime) var(--order) 100%); }
.donut::after { content:""; width: 93px; height: 93px; position: absolute; border-radius:50%; background:#fff; }
.donut-center { z-index:1; text-align:center; }
.donut-center strong { display:block; font-size:18px; letter-spacing:-.04em; }
.donut-center span { color:#99a49e; font-size:8px; }
.cost-split { display: grid; gap: 11px; padding: 0 23px; }
.split-row { display:grid; grid-template-columns: 1fr auto; gap:10px; align-items:center; font-size:10px; }
.split-label { display:flex; align-items:center; gap:7px; color:#68766f; }
.split-label i { width:8px; height:8px; border-radius:3px; background:var(--forest-2); }
.split-row:nth-child(2) .split-label i { background:var(--lime); }
.split-row strong { font-size:11px; }
.split-track { grid-column:1/-1; height:4px; overflow:hidden; border-radius:4px; background:#f0f2f0; }
.split-track span { display:block; height:100%; border-radius:4px; background:var(--forest-2); }
.split-row:nth-child(2) .split-track span { background:var(--lime); }

.table-panel { overflow: hidden; }
.table-toolbar { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:19px 22px 15px; border-bottom:1px solid #eef1ef; }
.table-toolbar h2 { margin:0; font-size:14px; }
.table-toolbar p { margin:5px 0 0; color:#96a29b; font-size:9px; }
.view-switch { display:flex; padding:3px; border-radius:8px; background:#f2f5f2; }
.view-switch button { height:28px; padding:0 12px; border:0; border-radius:6px; color:#7a8981; background:transparent; font-size:9px; cursor:pointer; }
.view-switch button.active { color:#2f4338; background:#fff; box-shadow:0 2px 8px rgba(25,45,35,.08); }
.data-table-wrap { overflow:auto; }
.data-table { width:100%; border-collapse:collapse; font-size:10px; }
.data-table th { height:39px; padding:0 18px; color:#929e97; background:#fafbfa; text-align:left; font-size:8px; font-weight:600; letter-spacing:.08em; white-space:nowrap; }
.data-table td { height:54px; padding:0 18px; border-top:1px solid #f0f2f0; color:#506058; white-space:nowrap; }
.data-table tbody tr { transition:.15s ease; }
.data-table tbody tr:hover { background:#fbfcfb; }
.business-cell { display:flex; align-items:center; gap:9px; font-weight:600; color:#31443a; }
.business-dot { width:8px; height:8px; border-radius:3px; }
.money { font-variant-numeric:tabular-nums; }
.money.total { color:#1e3027; font-weight:700; }
.cost-tag { display:inline-flex; min-width:64px; justify-content:center; padding:5px 7px; border-radius:6px; color:#37604d; background:#eef6f1; font-size:9px; }
.table-empty { height:120px!important; text-align:center; color:#9ba69f!important; }

.entry-business-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:17px; }
.business-tab { height:38px; display:flex; align-items:center; gap:8px; padding:0 15px; border:1px solid var(--line); border-radius:10px; color:#65736c; background:#fff; font-size:10px; cursor:pointer; }
.business-tab i { width:7px; height:7px; border-radius:2px; }
.business-tab.active { border-color:var(--forest); color:#fff; background:var(--forest); }
.entry-panel { overflow:hidden; }
.entry-hint { display:flex; align-items:center; gap:8px; padding:11px 22px; border-bottom:1px solid #edf0ee; color:#718078; background:#fbfcfb; font-size:9px; }
.entry-hint span { color:#3f7458; }
.cost-input { width:130px; height:34px; border:1px solid #e3e8e4; border-radius:8px; outline:none; padding:0 10px; color:#26382f; background:#fff; font-size:10px; transition:.2s; }
.cost-input:focus, .text-input:focus { border-color:#6d9984; box-shadow:0 0 0 3px rgba(88,137,112,.10); }
.note-input { width:100%; min-width:130px; }
.entry-total { font-weight:700; color:#263a30; }
.entry-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 22px; border-top:1px solid #eef1ef; background:#fafbfa; }
.entry-summary { display:flex; gap:22px; color:#7c8982; font-size:9px; }
.entry-summary strong { margin-left:5px; color:#31443a; font-size:11px; }
.primary-btn { min-height:38px; padding:0 18px; color:#fff; background:var(--forest); font-size:10px; font-weight:600; }
.primary-btn:hover { background:#215446; transform:translateY(-1px); }
.primary-btn:disabled { opacity:.58; cursor:not-allowed; transform:none; }
.secondary-btn { min-height:38px; padding:0 18px; color:#53635b; border:1px solid var(--line); background:#fff; font-size:10px; }

.manage-grid { display:grid; grid-template-columns:repeat(3, minmax(260px, 1fr)); gap:15px; }
.business-card { position:relative; overflow:hidden; padding:20px; border:1px solid #e5eae6; border-radius:15px; background:#fff; box-shadow:var(--shadow); }
.business-card::before { content:""; position:absolute; inset:0 0 auto; height:4px; background:var(--business-color); }
.business-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.business-title { display:flex; align-items:center; gap:10px; }
.business-badge { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; color:#fff; background:var(--business-color); font-size:13px; font-weight:700; }
.business-title h3 { margin:0; font-size:14px; }
.business-title small { color:#95a199; font-size:9px; }
.icon-btn { width:29px; height:29px; display:grid; place-items:center; border:0; border-radius:8px; color:#8a9790; background:#f5f7f5; cursor:pointer; }
.icon-btn:hover { color:var(--red); background:#fff0ef; }
.shop-list { display:flex; flex-wrap:wrap; gap:7px; min-height:74px; margin:19px 0 17px; align-content:flex-start; }
.shop-chip { display:inline-flex; align-items:center; gap:7px; padding:7px 9px; border:1px solid #e7ebe8; border-radius:8px; color:#526159; background:#fafbfa; font-size:9px; }
.shop-chip button { width:14px; height:14px; display:grid; place-items:center; padding:0; border:0; color:#9aa69f; background:transparent; cursor:pointer; line-height:1; }
.shop-chip button:hover { color:var(--red); }
.add-shop { width:100%; height:34px; border:1px dashed #cdd6d0; border-radius:8px; color:#698077; background:#fbfcfb; font-size:9px; cursor:pointer; }
.add-shop:hover { border-color:#779c89; color:#315843; background:#f4f9f5; }
.add-business-card { min-height:227px; display:grid; place-items:center; border:1px dashed #c7d0ca; border-radius:15px; color:#718078; background:rgba(255,255,255,.4); cursor:pointer; }
.add-business-card:hover { border-color:#719781; color:#335c46; background:#f7faf7; }
.add-business-card span { display:grid; place-items:center; text-align:center; font-size:10px; }
.add-business-card i { width:38px; height:38px; display:grid; place-items:center; margin:0 auto 10px; border-radius:50%; color:#fff; background:var(--forest); font-size:21px; font-style:normal; }

.admin-layout { display:grid; grid-template-columns:minmax(300px,.78fr) minmax(420px,1.22fr); gap:16px; align-items:start; }
.settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start; }
.settings-grid.single { grid-template-columns:minmax(320px,650px); }
.settings-panel { overflow:hidden; }
.settings-head { padding:22px 24px 17px; border-bottom:1px solid #edf0ee; }
.settings-head span { color:#709380; font-size:10px; font-weight:700; letter-spacing:.16em; }
.settings-head h2 { margin:5px 0 0; font-size:19px; }
.settings-head p { margin:7px 0 0; color:#89958e; font-size:12px; line-height:1.65; }
.settings-form { display:grid; gap:17px; padding:22px 24px 25px; }
.settings-form > label:not(.switch-row) { display:grid; gap:7px; color:#4b5c53; font-size:13px; font-weight:600; }
.settings-form .text-input { font-size:13px; }
.permission-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.permission-option { position:relative; cursor:pointer; }
.permission-option input { position:absolute; opacity:0; pointer-events:none; }
.permission-option span { min-height:42px; display:grid; place-items:center; padding:6px; border:1px solid #dfe6e1; border-radius:9px; color:#63736a; background:#fbfcfb; font-size:12px; text-align:center; transition:.18s; }
.permission-option input:checked + span { color:#fff; border-color:var(--forest); background:var(--forest); box-shadow:0 5px 12px rgba(23,63,53,.14); }
.switch-row { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px; border:1px solid #e4e9e5; border-radius:11px; background:#fafbfa; }
.switch-row span { display:grid; gap:2px; }
.switch-row strong { font-size:13px; }
.switch-row small { color:#8b9790; font-size:11px; }
.switch-row input { width:42px; height:22px; accent-color:var(--forest); cursor:pointer; }
.form-actions { display:flex; justify-content:flex-end; gap:9px; padding-top:3px; }
.employee-list { display:grid; }
.employee-row { display:flex; align-items:center; gap:13px; min-height:88px; padding:15px 22px; border-top:1px solid #eff2f0; }
.employee-row:first-child { border-top:0; }
.employee-avatar { width:40px; height:40px; flex:0 0 40px; display:grid; place-items:center; border-radius:12px; color:#fff; background:var(--forest-2); font-weight:700; }
.employee-info { min-width:0; flex:1; }
.employee-info > strong { display:block; margin-bottom:5px; font-size:14px; }
.employee-info p { margin:7px 0 0; overflow:hidden; color:#819087; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.role-tag,.status-tag { display:inline-flex; margin-right:6px; padding:3px 6px; border-radius:5px; font-size:9px; }
.role-tag.admin { color:#405d31; background:#eaf4d3; }
.role-tag.employee { color:#3b6250; background:#e8f2ec; }
.status-tag.on { color:#39704d; background:#e6f4ea; }
.status-tag.off { color:#8b5550; background:#fae9e7; }
.employee-actions { display:flex; gap:6px; }
.employee-actions button { padding:6px 9px; border:1px solid #e1e6e3; border-radius:7px; color:#65756c; background:#fff; font-size:11px; cursor:pointer; }
.employee-actions button.danger { color:#a3534d; }
.current-ip-notice { display:grid; grid-template-columns:1fr auto; gap:3px 10px; padding:14px; border-radius:11px; color:#66766d; background:#eef5f0; }
.current-ip-notice span { font-size:11px; }
.current-ip-notice strong { grid-row:2; color:#28483a; font-size:15px; }
.current-ip-notice button { grid-row:1/3; grid-column:2; align-self:center; padding:7px 10px; border:0; border-radius:7px; color:#fff; background:var(--forest-2); font-size:11px; cursor:pointer; }
.ip-textarea { height:auto!important; min-height:120px; padding:10px 13px!important; resize:vertical; line-height:1.7; }

.modal-backdrop { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px; background:rgba(12,29,22,.5); backdrop-filter:blur(5px); }
.modal-backdrop[hidden] { display:none; }
.modal { width:min(430px, 100%); position:relative; padding:30px; border-radius:18px; background:#fff; box-shadow:0 30px 80px rgba(5,25,15,.25); animation:modalIn .2s ease; }
@keyframes modalIn { from { opacity:0; transform:translateY(8px) scale(.98); } }
.modal-close { position:absolute; top:16px; right:16px; width:30px; height:30px; border:0; border-radius:8px; color:#809087; background:#f4f6f4; cursor:pointer; font-size:18px; }
.modal-kicker { margin-bottom:8px; color:#6d9a83; font-size:9px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.modal h2 { margin:0; font-size:22px; }
.modal > p { margin:9px 0 22px; color:#829087; font-size:10px; }
.field-label { display:block; margin:0 0 7px; color:#4b5c53; font-size:10px; font-weight:600; }
.text-input { width:100%; height:42px; border:1px solid #dfe5e1; border-radius:9px; outline:none; padding:0 13px; font-size:11px; }
.color-field { margin-top:18px; }
.color-options { display:flex; gap:10px; }
.color-option { width:27px; height:27px; position:relative; border:3px solid #fff; border-radius:50%; background:var(--swatch); box-shadow:0 0 0 1px #dde3df; cursor:pointer; }
.color-option.active { box-shadow:0 0 0 2px var(--swatch); }
.modal-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:27px; }
.toast { min-width:190px; position:fixed; z-index:150; left:50%; bottom:25px; display:flex; align-items:center; gap:9px; padding:13px 17px; border-radius:11px; color:#eef9f3; background:#173f35; box-shadow:0 14px 40px rgba(15,45,32,.25); opacity:0; transform:translate(-50%, 15px); pointer-events:none; transition:.25s ease; font-size:10px; }
.toast.show { opacity:1; transform:translate(-50%, 0); }
.toast span { width:19px; height:19px; display:grid; place-items:center; border-radius:50%; color:var(--forest); background:var(--lime); font-weight:700; }
.toast.error { background:#713f3b; }
.toast.error span { background:#ffc3bd; }

.loading-state, .error-state { min-height:calc(100vh - 180px); display:grid; place-items:center; align-content:center; text-align:center; color:#6f7e76; }
.loading-state strong { margin-top:15px; color:#31453a; font-size:13px; }
.loading-state small { margin-top:6px; color:#9aa69f; font-size:9px; }
.loading-ring { width:35px; height:35px; border:3px solid #dfe7e1; border-top-color:var(--forest-2); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.error-state > span { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; color:#9a514b; background:#fde6e3; font-size:19px; font-weight:700; }
.error-state h2 { margin:15px 0 0; color:#293b32; font-size:18px; }
.error-state p { margin:8px 0 18px; color:#8b625f; font-size:10px; }
.error-state small { margin-top:13px; color:#9aa59f; font-size:9px; }

/* 阅读增强：主要信息整体提升一个字号层级 */
body { font-size: 16px; }
.brand strong { font-size: 20px; }
.brand small { font-size: 11px; }
.nav-item { font-size: 16px; }
.sidebar-tip strong { font-size: 14px; }
.sidebar-tip p { font-size: 12px; }
.sidebar-foot { font-size: 11px; }
.breadcrumb { font-size: 14px; }
.ghost-btn, .save-state { font-size: 13px; }
.eyebrow { font-size: 11px; }
.page-head h1 { font-size: clamp(28px, 2.4vw, 36px); }
.page-head p { font-size: 14px; line-height: 1.6; }
.scope-switch button, .select-wrap select, .month-wrap input { font-size: 13px; }
.period-banner span { font-size: 10px; }
.period-banner strong { font-size: 16px; }
.period-banner p { font-size: 12px; }
.date-required > span { font-size: 12px; }
.date-shortcuts button { font-size: 13px; }
.kpi-label { font-size: 13px; }
.kpi-value { font-size: clamp(28px, 2.2vw, 34px); }
.currency { font-size: 15px; }
.kpi-foot { font-size: 11px; }
.panel-head h2, .table-toolbar h2 { font-size: 17px; }
.panel-head p, .table-toolbar p { font-size: 12px; }
.legend { font-size: 11px; }
.bar-value, .chart-y span { font-size: 10px; }
.bar-name { font-size: 12px; }
.donut-center strong { font-size: 22px; }
.donut-center span { font-size: 10px; }
.split-row { font-size: 12px; }
.split-row strong { font-size: 13px; }
.view-switch button { font-size: 12px; }
.data-table { font-size: 13px; }
.data-table th { height: 45px; font-size: 11px; }
.data-table td { height: 62px; }
.cost-tag { font-size: 11px; }
.business-tab { font-size: 13px; }
.entry-hint { font-size: 12px; }
.cost-input { height: 38px; font-size: 13px; }
.entry-summary { font-size: 12px; }
.entry-summary strong { font-size: 14px; }
.primary-btn, .secondary-btn { font-size: 13px; }
.business-title h3 { font-size: 17px; }
.business-title small, .shop-chip, .add-shop { font-size: 12px; }
.add-business-card span { font-size: 13px; }
.modal-kicker { font-size: 11px; }
.modal h2 { font-size: 25px; }
.modal > p, .field-label, .text-input { font-size: 13px; }
.toast { font-size: 13px; }
.loading-state strong { font-size: 16px; }
.loading-state small, .error-state p, .error-state small { font-size: 12px; }
.error-state h2 { font-size: 21px; }

@media (max-width: 1050px) {
  .kpi-grid { grid-template-columns:repeat(2,1fr); }
  .dashboard-grid { grid-template-columns:1fr; }
  .manage-grid { grid-template-columns:repeat(2,1fr); }
  .chart-y::before, .chart-y::after { width:calc(100vw - 380px); }
  .admin-layout,.settings-grid { grid-template-columns:1fr; }
}
@media (max-width: 740px) {
  .login-screen { padding: 16px; }
  .login-card { padding: 28px 23px; }
  .sidebar { transform:translateX(-100%); transition:.25s ease; box-shadow:20px 0 50px rgba(0,0,0,.15); }
  .sidebar.open { transform:translateX(0); }
  .main-content { width:100%; margin:0; }
  .topbar { height:62px; padding:0 17px; }
  .mobile-menu { display:block; }
  .breadcrumb { display:none; }
  .top-actions { margin-left:auto; }
  .save-state { display:none; }
  .top-actions { gap: 7px; }
  .user-pill { display: none; }
  .view-container { padding:25px 16px 40px; }
  .page-head { flex-direction:column; }
  .head-controls { width:100%; }
  .head-controls { flex-wrap:wrap; }
  .scope-switch { flex:0 0 auto; }
  .date-shortcuts { order:2; width:100%; overflow-x:auto; }
  .date-required { order:1; }
  .select-wrap, .month-wrap { flex:1; }
  .select-wrap select, .month-wrap input { width:100%; min-width:0; }
  .kpi-grid { gap:9px; }
  .kpi-card { min-height:123px; padding:16px; }
  .kpi-value { font-size:22px; }
  .manage-grid { grid-template-columns:1fr; }
  .table-toolbar { align-items:flex-start; flex-direction:column; }
  .entry-footer { align-items:flex-start; flex-direction:column; }
  .entry-summary { flex-wrap:wrap; gap:8px 16px; }
  .period-banner { align-items:flex-start; flex-direction:column; gap:6px; }
  .permission-grid { grid-template-columns:1fr; }
  .employee-row { align-items:flex-start; flex-wrap:wrap; }
  .employee-actions { width:100%; justify-content:flex-end; }
}
@media (max-width: 460px) {
  .kpi-grid { grid-template-columns:1fr; }
  .top-actions .ghost-btn { font-size:0; width:37px; padding:0; }
  .top-actions .ghost-btn svg { font-size:14px; }
  .bar-chart { padding-left:41px; gap:10px; }
  .bars { gap:7px; }
  .bar-item { min-width:30px; }
  .bar-stack { width:31px; }
}