:root {
  --ink: #17201c; --muted: #68736d; --line: #e1e7e3; --paper: #fff; --canvas: #f2f5f3;
  --green: #176b4d; --green-2: #38a276; --green-soft: #e7f4ee; --orange: #f0643b;
  --orange-soft: #fff0e9; --blue-soft: #eaf2f8; --blue: #39759a; --red: #bb4848;
  --shadow: 0 12px 32px rgba(24,47,37,.07);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--canvas); }
button, input, select { font: inherit; }
button, label[for] { cursor: pointer; }
.app-shell { display: grid; grid-template-columns: 236px minmax(0,1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 24px 18px; color: #e9f7f0; background: #103f30; }
.brand { display: flex; align-items: center; margin: 3px 13px 35px; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 15px; }.brand small { margin-top: 2px; color: #9ebcaf; font-size: 12px; }
nav { display: grid; gap: 5px; }
.nav-link { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 10px; color: #b9d1c7; text-decoration: none; font-size: 14px; }
.nav-link:hover, .nav-link.active { color: white; background: rgba(255,255,255,.1); }
.nav-link span { width: 18px; text-align: center; }
.privacy-card { position: absolute; right: 18px; bottom: 20px; left: 18px; display: flex; gap: 9px; padding: 13px; border: 1px solid rgba(255,255,255,.11); border-radius: 12px; background: rgba(255,255,255,.06); }
.privacy-card strong, .privacy-card small { display: block; }.privacy-card strong { font-size: 13px; }.privacy-card small { margin-top: 3px; color: #9ebcaf; font-size: 11px; }
.privacy-dot { width: 8px; height: 8px; margin-top: 3px; border-radius: 50%; background: #8fdfb8; }
main { min-width: 0; padding: 26px 30px 50px; }
.topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 20px; }
.eyebrow { margin: 0 0 5px; color: var(--green); font-size: 11px; font-weight: 800; letter-spacing: .14em; }
h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(29px,3vw,40px); font-weight: 600; letter-spacing: -.03em; }
.subtitle { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.top-actions { display: flex; gap: 9px; }
.mobile-nav { display: none; }
.readonly-banner { display:flex; align-items:center; gap:10px; margin-bottom:16px; padding:11px 14px; border:1px solid #c9ddd4; border-radius:11px; color:#315d4a; background:#edf8f2; font-size:12px; }.readonly-banner span { flex:0 0 auto; padding:4px 7px; border-radius:6px; color:white; background:var(--green); font-size:10px; font-weight:800; text-transform:uppercase; }.readonly-banner p { margin:0; line-height:1.45; }
.platform-switcher { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:18px; padding:12px 14px; border:1px solid var(--line); border-radius:14px; background:white; box-shadow:var(--shadow); }
.platform-switcher-copy { flex:0 0 auto; min-width:130px; }.platform-switcher-copy span,.platform-switcher-copy strong { display:block; }.platform-switcher-copy span { color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.08em; }.platform-switcher-copy strong { margin-top:4px; font-size:14px; }
.platform-tabs { display:flex; justify-content:flex-end; gap:6px; min-width:0; }.platform-tabs button { display:flex; align-items:center; gap:7px; min-height:39px; padding:8px 11px; border:1px solid transparent; border-radius:10px; color:var(--muted); background:#f4f6f5; font-size:12px; font-weight:750; white-space:nowrap; }.platform-tabs button:hover { color:var(--ink); background:#edf1ef; }.platform-tabs button.active { color:var(--green); border-color:#bcdaca; background:var(--green-soft); }.platform-tabs b { display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 6px; border-radius:11px; color:#59655f; background:white; font-size:10px; }.platform-tabs button.active b { color:white; background:var(--green); }.platform-dot { width:8px; height:8px; border-radius:50%; background:#999; }.platform-dot.shopee { background:#ee4d2d; }.platform-dot.grab { background:#00b14f; }.platform-dot.gofood { background:#e5232a; }
.button { display: inline-flex; justify-content: center; align-items: center; min-height: 41px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 10px; color: #35423c; background: white; font-size: 13px; font-weight: 700; text-decoration: none; }
.button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(0,0,0,.07); }
.button.primary { color: white; border-color: var(--green); background: var(--green); }.button.ghost { background: transparent; }
.button.compact { min-height: 34px; padding: 7px 10px; }.button.large { padding: 12px 20px; }.button.danger { color: var(--red); border-color: #e8c3c3; }
.button:disabled { cursor: not-allowed; opacity: .45; }
.empty-state { display: grid; justify-items: center; max-width: 650px; margin: 80px auto; padding: 54px 30px; border: 1px dashed #bac9c1; border-radius: 20px; background: rgba(255,255,255,.65); text-align: center; }
.empty-icon { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 18px; color: var(--green); background: var(--green-soft); font-size: 25px; }
.empty-state h2 { margin: 18px 0 7px; font-size: 22px; }.empty-state p { max-width: 470px; margin: 0 0 20px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.empty-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:9px; }
.app-page:not(.active) { display: none; }
.app-page.active { animation: page-in .18s ease-out; }
@keyframes page-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.notice { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; padding: 12px 14px; border: 1px solid #cce2d7; border-radius: 11px; color: #315d4a; background: #edf8f2; font-size: 13px; }.notice p { margin: 0; }
.filter-row { display: flex; align-items: flex-end; gap: 9px; margin-bottom: 14px; }.filter-group label { display: block; margin: 0 0 5px 3px; color: var(--muted); font-size: 12px; }.filter-group input, .search { min-height: 38px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: white; font-size: 13px; outline: none; }.filter-group input:focus, .search:focus { border-color: var(--green-2); }.period-label { margin-left: auto; padding-bottom: 8px; color: var(--muted); font-size: 12px; }
.kpi-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 11px; margin-bottom: 14px; }
.kpi-card { position: relative; overflow: hidden; min-height: 122px; padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: white; box-shadow: var(--shadow); }.kpi-card::after { content:""; position:absolute; right:-28px; bottom:-38px; width:100px; height:100px; border-radius:50%; background:var(--green-soft); }.kpi-card.warm::after { background:var(--orange-soft); }.kpi-card.chicken::after { background:#fff3dc; }.kpi-card.rice::after { background:var(--blue-soft); }
.kpi-card span, .kpi-card strong, .kpi-card small { position: relative; z-index: 1; display:block; }.kpi-card span { color:var(--muted); font-size:11px; font-weight:800; }.kpi-card strong { margin-top:11px; font-size:clamp(22px,2vw,29px); letter-spacing:-.04em; }.kpi-card small { margin-top:7px; color:var(--muted); font-size:11px; line-height:1.45; }
.panel, .insight { border:1px solid var(--line); border-radius:15px; background:white; box-shadow:var(--shadow); }.overview-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(280px,.7fr); gap:14px; margin-bottom:14px; }.panel { padding:18px; }.panel-head { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:15px; }.panel-head.wrap { flex-wrap:wrap; }.panel-head h2, .data-panel h2 { margin:0; font-size:16px; }.panel-head p, .data-panel p { margin:5px 0 0; color:var(--muted); font-size:12px; }
.segmented { display:inline-flex; padding:3px; border-radius:9px; background:#f0f3f1; }.segmented button { padding:7px 9px; border:0; border-radius:7px; color:var(--muted); background:transparent; font-size:11px; }.segmented button.active { color:var(--ink); background:white; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.daily-chart { display:flex; align-items:stretch; gap:8px; height:240px; overflow-x:auto; padding:12px 2px 0; }.day-column { flex:1 0 48px; display:grid; grid-template-rows:31px 1fr 38px; text-align:center; }.bar-label { color:#536059; font-size:10px; font-weight:700; }.bar-stage { display:flex; align-items:flex-end; justify-content:center; border-bottom:1px solid var(--line); }.daily-bar { width:min(32px,72%); min-height:2px; border-radius:7px 7px 2px 2px; background:linear-gradient(180deg,#58b48b,var(--green)); transition:height .3s ease; }.day-column.zero .daily-bar { background:#dce2df; }.day-name { padding-top:7px; color:var(--muted); font-size:10px; }.day-name strong { display:block; color:#435048; font-size:11px; }
.empty-inline { display:grid; place-items:center; width:100%; color:var(--muted); font-size:13px; }.empty-cell { padding:28px!important; color:var(--muted); text-align:center!important; }
.money-stack { padding:8px 2px; }.money-row { display:flex; justify-content:space-between; gap:10px; margin:16px 0; color:var(--muted); font-size:12px; }.money-row strong { color:var(--ink); }.money-divider { height:1px; background:var(--line); }.money-row.total { color:var(--ink); font-weight:800; }.money-row.total strong { color:var(--green); }.retention div { height:7px; overflow:hidden; border-radius:10px; background:#edf0ee; }.retention span { display:block; height:100%; border-radius:inherit; background:var(--green-2); }.retention small { display:block; margin-top:7px; color:var(--muted); font-size:11px; text-align:right; }
.insight-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:11px; margin-bottom:14px; }.insight { padding:15px; box-shadow:none; }.tag { display:inline-block; padding:4px 7px; border-radius:6px; color:var(--green); background:var(--green-soft); font-size:10px; font-weight:800; }.tag.orange { color:#a74729; background:var(--orange-soft); }.tag.blue { color:var(--blue); background:var(--blue-soft); }.insight h3 { margin:10px 0 5px; font-size:14px; }.insight p { margin:0; color:var(--muted); font-size:12px; line-height:1.5; }
.section-panel { margin-bottom:14px; scroll-margin-top:15px; }.search { width:220px; }.table-wrap { overflow:auto; max-height:560px; }table { width:100%; border-collapse:collapse; }th,td { padding:12px 9px; border-bottom:1px solid #edf0ee; font-size:12px; text-align:right; white-space:nowrap; }th { position:sticky; top:0; z-index:1; color:var(--muted); background:white; font-size:10px; font-weight:800; }th:first-child,td:first-child { text-align:left; }.product-name { display:inline-block; max-width:360px; overflow:hidden; vertical-align:middle; text-overflow:ellipsis; }.rank { display:inline-grid; place-items:center; width:24px; height:24px; margin-right:8px; border-radius:7px; color:var(--green); background:var(--green-soft); font-size:10px; font-weight:800; }.sales { color:var(--green); font-weight:750; }.material { font-weight:750; }
.rule-explanation { display:flex; align-items:center; gap:12px; margin-bottom:13px; padding:11px 13px; border-radius:10px; color:#486256; background:#f0f7f3; font-size:12px; }.rule-explanation span { flex:0 0 auto; padding:4px 6px; border-radius:5px; color:white; background:var(--green); font-weight:800; }.rule-explanation p { margin:0; }.rule-input { width:68px; padding:7px; border:1px solid var(--line); border-radius:7px; font-size:13px; text-align:center; }.rule-input:focus { outline:2px solid #bde2d1; border-color:var(--green); }
.settlement-empty,.settlement-toolbar { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:26px; }.settlement-empty h2,.settlement-toolbar h2 { margin:0; font-size:20px; }.settlement-empty p,.settlement-toolbar p { max-width:690px; margin:7px 0 0; color:var(--muted); font-size:13px; line-height:1.6; }.data-settlement { margin-top:14px; }.settlement-toolbar { margin-bottom:14px; }.settlement-kpis { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; margin-bottom:14px; }.settlement-main { color:white; border-color:var(--green); background:var(--green); }.settlement-main::after { background:rgba(255,255,255,.1); }.settlement-main span,.settlement-main small { color:#d6eee3; }.reconciliation-panel { margin-bottom:14px; }.comparison-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }.comparison-item { padding:14px; border-radius:11px; background:#f4f7f5; }.comparison-item span,.comparison-item strong,.comparison-item small { display:block; }.comparison-item span { color:var(--muted); font-size:11px; font-weight:750; }.comparison-item strong { margin-top:8px; font-size:18px; }.comparison-item small { margin-top:5px; color:var(--muted); font-size:11px; line-height:1.4; }.comparison-item.highlight { background:var(--green-soft); }.comparison-note { grid-column:1/-1; margin:2px 0 0; color:var(--muted); font-size:12px; line-height:1.55; }.settlement-table-panel { margin-bottom:14px; }
.data-panel { display:flex; justify-content:space-between; align-items:center; min-height:230px; gap:28px; padding:28px; }.data-copy { max-width:650px; }.data-badge { display:inline-block; margin-bottom:12px; padding:5px 8px; border-radius:6px; color:var(--green); background:var(--green-soft); font-size:10px; font-weight:800; letter-spacing:.06em; }.data-help { max-width:590px; margin-top:16px!important; line-height:1.65; }.data-actions { display:grid; gap:16px; min-width:330px; }.data-import-actions { display:flex; flex-wrap:wrap; gap:8px; }.delete-actions { display:grid; grid-template-columns:1fr auto; gap:7px; padding-top:15px; border-top:1px solid var(--line); }.delete-actions label { grid-column:1/-1; color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }.delete-actions select { min-height:41px; min-width:190px; padding:8px 34px 8px 11px; border:1px solid var(--line); border-radius:10px; color:var(--ink); background:white; outline:none; }.delete-actions select:focus { border-color:var(--green-2); box-shadow:0 0 0 3px var(--green-soft); }.toast { position:fixed; right:22px; bottom:22px; z-index:20; max-width:390px; padding:12px 15px; border-radius:11px; color:white; background:#173f32; box-shadow:0 10px 30px rgba(0,0,0,.18); font-size:13px; opacity:0; pointer-events:none; transform:translateY(8px); transition:.2s ease; }.toast.show { opacity:1; transform:none; }.toast.error { background:#8d3434; }
@media (max-width:1200px) { .kpi-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:960px) { .app-shell { grid-template-columns:76px minmax(0,1fr); }.sidebar { padding:20px 10px; }.brand { display:none; }.nav-link:not(.active){font-size:0}.nav-link { justify-content:center; }.nav-link span { font-size:15px; }.privacy-card { display:none; }.overview-grid { grid-template-columns:1fr; }.comparison-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:700px) { .app-shell { display:block; }.sidebar { display:none; }main { padding:18px 13px 36px; }.topbar { display:block; }.top-actions { margin-top:14px; }.readonly-banner { align-items:flex-start; flex-direction:column; }.mobile-nav { position:sticky; top:0; z-index:8; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:3px; overflow:hidden; margin:0 -4px 16px; padding:4px; border:1px solid var(--line); border-radius:11px; background:rgba(255,255,255,.94); backdrop-filter:blur(10px); }.mobile-nav a { min-width:0; padding:9px 2px; border-radius:8px; color:var(--muted); font-size:11px; font-weight:700; text-align:center; text-decoration:none; }.mobile-nav a.active { color:white; background:var(--green); }.platform-switcher { align-items:flex-start; flex-direction:column; gap:10px; }.platform-tabs { justify-content:flex-start; width:100%; overflow-x:auto; padding-bottom:2px; }.platform-tabs button { flex:0 0 auto; }.kpi-grid,.insight-grid,.settlement-kpis { grid-template-columns:repeat(2,1fr); }.filter-row { flex-wrap:wrap; }.period-label { width:100%; margin:0; }.data-panel,.settlement-empty,.settlement-toolbar { align-items:flex-start; flex-direction:column; }.data-actions { width:100%; min-width:0; }.product-name { max-width:180px; } }
@media (max-width:450px) { .kpi-grid,.insight-grid,.settlement-kpis,.comparison-grid { grid-template-columns:1fr; }.top-actions { display:grid; grid-template-columns:1fr 1fr; }.segmented { overflow-x:auto; max-width:100%; }.delete-actions { grid-template-columns:1fr; }.delete-actions label { grid-column:auto; }.delete-actions select { width:100%; min-width:0; }.panel { padding:14px; } }