:root{
  --bg:#F2EEE2; --card:#FFFFFF; --sidebar:#1E2B22; --sidebar-soft:#2A3A2F;
  --accent:#DD6B35; --accent-dark:#C2551F; --accent-soft:#FBE9DD;
  --text:#202822; --text-muted:#767F73; --border:#E5DFCF;
  --green-soft:#E1F2E4; --green-text:#2F6B45;
  --red-soft:#FBEAE8; --red-text:#B5432E;
  --amber-soft:#FBF0DC; --amber-text:#9A6B15;
  --navy:#1F3B57;
  --font-display:'Plus Jakarta Sans',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;
}
*{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font-display); -webkit-font-smoothing:antialiased; }
.app{ max-width:1360px; margin:0 auto; padding-bottom:60px; }

.topbar{
  background:var(--sidebar); color:#fff; padding:18px 26px; border-radius:0 0 20px 20px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{ width:38px; height:38px; border-radius:10px; background:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.brand-mark svg{ width:19px; height:19px; }
.brand-text h1{ margin:0; font-size:16.5px; font-weight:800; letter-spacing:-0.01em; }
.brand-text p{ margin:1px 0 0; font-size:11.5px; color:#A9B3A6; }
.tabs{ display:flex; gap:6px; background:var(--sidebar-soft); padding:4px; border-radius:11px; }
.tab-btn{
  border:none; background:transparent; color:#B7C0B4; font-family:var(--font-display);
  font-weight:700; font-size:12.5px; padding:8px 14px; border-radius:8px; cursor:pointer;
  text-decoration:none; display:inline-block;
}
.tab-btn.active{ background:var(--accent); color:#fff; }
.tab-note{ align-self:center; padding:0 10px 0 6px; font-family:var(--font-display); font-size:11px;
  font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#8E9A8C; }

.content{ padding:16px 26px 0; }

.alert-success{
  background:var(--green-soft); color:var(--green-text); border:1px solid #BFE3C7;
  border-radius:10px; padding:10px 14px; font-size:12.5px; margin-bottom:16px; font-weight:600;
}

.panel{ background:var(--card); border:1px solid var(--border); border-radius:16px; padding:20px; margin-bottom:18px; }
.panel-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.panel-head h2{ margin:0; font-size:15px; font-weight:800; }
.panel-head p{ margin:2px 0 0; font-size:12px; color:var(--text-muted); }
.panel-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:0; padding:0; border:none; }

.btn{ border:none; border-radius:9px; padding:9px 14px; font-family:var(--font-display); font-weight:600; font-size:12.5px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:hover{ background:var(--accent-dark); }
.btn-ghost{ background:var(--bg); color:var(--text); border:1px solid var(--border); }
.btn-ghost:hover{ background:#EAE4D3; }
.btn-danger{ background:var(--red-soft); color:var(--red-text); }
.btn-danger:hover{ background:#F6D9D6; }
.btn-icon{ padding:6px 8px; }

.date-input, .text-input, .num-input, .select-input{
  border:1px solid var(--border); border-radius:8px; padding:8px 9px; font-family:var(--font-mono); font-size:12.5px; background:#fff; color:var(--text);
}

/* Stat cards */
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:18px; }
@media (max-width:800px){ .stat-grid{ grid-template-columns:1fr 1fr; } }
.stat-card{ border:1px solid var(--border); border-radius:12px; padding:13px 14px; background:var(--card); }
.stat-icon{ width:26px; height:26px; border-radius:8px; background:var(--accent-soft); color:var(--accent-dark); display:flex; align-items:center; justify-content:center; margin-bottom:8px; }
.stat-icon svg{ width:14px; height:14px; }
.stat-value{ font-family:var(--font-mono); font-weight:700; font-size:18px; }
.stat-label{ font-size:11px; color:var(--text-muted); margin-top:2px; }

/* Table */
.table-scroll{ overflow-x:auto; }
table.data-table{ border-collapse:separate; border-spacing:0; width:100%; min-width:560px; font-size:12.5px; }
table.data-table th, table.data-table td{ padding:8px 10px; border-bottom:1px solid var(--border); white-space:nowrap; }
table.data-table thead tr.grp-row th{ text-align:center; font-size:11.5px; font-weight:800; padding:8px 10px; border-bottom:1px solid #fff; }
table.data-table thead tr.sub-row th{ text-align:right; font-size:10.5px; color:var(--text-muted); font-weight:700; background:#FAF8F1; }
table.data-table thead tr.sub-row th:first-child, table.data-table thead tr.grp-row th:first-child{ text-align:left; }
table.data-table td{ font-family:var(--font-mono); text-align:right; }
table.data-table td:first-child, table.data-table td.left{ text-align:left; font-family:var(--font-display); }
table.data-table tbody tr:hover td{ background:#FBF9F3; }
table.data-table tfoot td{ font-weight:800; border-top:2px solid var(--text); border-bottom:none; background:#FAF8F1; }
.cell-input{ width:82px; border:1px solid var(--border); border-radius:6px; padding:5px 6px; font-family:var(--font-mono); font-size:12px; text-align:right; }
.cell-input:focus{ outline:2px solid var(--accent); border-color:var(--accent); }
.cell-static{ color:var(--text-muted); }
.pill{ display:inline-block; padding:2px 8px; border-radius:20px; font-size:11px; font-weight:700; }
.pill-green{ background:var(--green-soft); color:var(--green-text); }
.pill-amber{ background:var(--amber-soft); color:var(--amber-text); }
.pill-red{ background:var(--red-soft); color:var(--red-text); }
.row-del{ background:transparent; border:none; color:var(--text-muted); cursor:pointer; font-size:15px; padding:2px 8px; border-radius:6px; }
.row-del:hover{ background:var(--red-soft); color:var(--red-text); }
.add-date-row{ display:flex; align-items:center; gap:8px; margin-top:4px; flex-wrap:wrap; }

/* Charts */
.charts-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:18px; }
@media (max-width:900px){ .charts-grid{ grid-template-columns:1fr; } }
.chart-panel{ background:var(--card); border:1px solid var(--border); border-radius:16px; padding:18px; }
.chart-panel h3{ margin:0 0 6px; font-size:14px; font-weight:800; text-align:center; }
.chart-scroll{ overflow-x:auto; }
.chart-legend{ display:flex; justify-content:center; gap:16px; margin-top:6px; font-size:11.5px; color:var(--text-muted); }

.legend-bar{ display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:6px; vertical-align:-1px; }
.legend-line{ display:inline-block; width:16px; height:0; border-top:2px dashed #1F3B57; margin-right:6px; vertical-align:3px; }
.legend-dot{ width:9px; height:9px; border-radius:2px; display:inline-block; margin-right:5px; vertical-align:middle; }
.chart-empty{ text-align:center; color:var(--text-muted); font-size:12.5px; padding:40px 0; }

/* Settings */
.kebun-row{ display:flex; align-items:center; gap:8px; margin-bottom:8px; flex-wrap:wrap; padding:8px; border:1px solid var(--border); border-radius:10px; }
.kebun-row .swatch{ width:10px; height:10px; border-radius:3px; flex-shrink:0; }
.kebun-row .nama-field{ flex:1; min-width:160px; }
.chip{ display:inline-flex; align-items:center; gap:6px; background:var(--bg); border:1px solid var(--border); border-radius:20px; padding:6px 12px; font-size:12px; }
.chip b{ font-family:var(--font-mono); }
.chip-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.target-table-wrap{ overflow-x:auto; }
table.settings-table{ border-collapse:collapse; width:100%; font-size:12.5px; min-width:480px; }
table.settings-table th{ text-align:left; font-size:11px; color:var(--text-muted); font-weight:700; padding:6px 8px; border-bottom:1px solid var(--border); }
table.settings-table td{ padding:6px 8px; border-bottom:1px solid var(--border); }
table.settings-table input, table.settings-table select{ border:1px solid var(--border); border-radius:6px; padding:6px 7px; font-family:var(--font-mono); font-size:12px; width:100%; }

.danger-zone{ border:1px dashed #E7BDB4; border-radius:12px; padding:14px; margin-top:6px; }
.danger-zone p{ margin:0 0 10px; font-size:12px; color:var(--text-muted); }

form{ margin:0; }