:root{
  --bg-primary: #FFFFFF;
  --bg-secondary: #CFDBD5;
  --text-primary: #242423;
  --text-secondary: #333533;
  --border-color: #f5cb5c;
  --border-light: #eee;
  --shadow: rgba(0,0,0,0.06);
}
body.dark-mode{
  --bg-primary: #242423;
  --bg-secondary: #333533;
  --text-primary: #F5CB5C;
  --text-secondary: #f5cc5ccc;
  --border-color: #FFFFFF;
  --border-light: #FFFFFF;
  --shadow: rgba(0,0,0,0.4);
}
*{box-sizing:border-box;font-family:Segoe UI,Arial,Helvetica,sans-serif}
body{background:var(--bg-primary);color:var(--text-primary);padding:24px;transition:background-color 0.3s,color 0.3s}
.container{max-width:720px;margin:0 auto;background:var(--bg-primary);padding:20px;border-radius:8px;box-shadow:0 6px 18px var(--shadow)}
h1{margin-top:0}
label{display:block;margin-top:12px;font-weight:600}
input[type=text],input[type=date],input[type=number],select{width:100%;padding:8px;margin-top:6px;border:1px solid var(--border-color);border-radius:4px;background:var(--bg-primary);color:var(--text-primary)}
.items-header{display:flex;align-items:center;gap:8px}
.item-row{display:flex;gap:8px;margin-top:10px}
.item-row .item-name{flex:1}
.item-row .item-category{width:160px;padding:8px;border:1px solid var(--border-color);border-radius:4px;background:var(--bg-primary);color:var(--text-primary)}
.item-row .item-price{width:120px}
.item-row .remove-item{background:#ff6b6b;border:none;color:#fff;padding:6px 8px;border-radius:4px;cursor:pointer}
.actions{display:flex;gap:10px;margin-top:16px}
#add-item{background:#F5CB5C;border:none;color:#000000;padding:8px 12px;border-radius:4px;cursor:pointer}
button:disabled{opacity:0.5;cursor:not-allowed}
.hint{font-size:13px;color:var(--text-secondary);margin-top:8px}
@media(max-width:520px){.item-row{flex-direction:column}.item-row .item-price{width:100%}}

#category-management{margin-top:12px}
.cat-add-row{display:flex;gap:8px}
.cat-add-row input{flex:1}
.category-list{list-style:none;padding:0;margin:10px 0}
.category-list li{padding:6px 8px;border-bottom:1px solid var(--border-light)}
.overall-total{font-weight:700;margin-top:8px}
.item-row .item-category{min-width:120px}
.hidden{display:none !important}
.scan-card{background:var(--bg-secondary);border:1px solid var(--border-light);border-radius:10px;padding:16px;margin-bottom:18px}
.scan-card h2{margin-top:0}
.scan-controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.scan-controls input[type=file]{flex:1}
.scan-feedback{margin-top:10px;font-size:14px}
.scan-preview{margin-top:12px;border:1px solid var(--border-light);border-radius:8px;overflow:hidden;max-width:360px}
.scan-preview img{width:100%;display:block}

/* Dashboard layout */
.dashboard{display:flex;gap:20px;margin-top:22px}
.dashboard .history{flex:1;min-width:220px}
.dashboard .analysis{flex:2}
.receipt-row{display:flex;justify-content:space-between;padding:8px;border-bottom:1px solid var(--border-light)}
.receipt-row .receipt-actions button{margin-left:6px}
.controls{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px}
.filter-box{background:var(--bg-secondary);padding:8px;border-radius:6px;border:1px solid var(--border-light)}
.chart-legend{margin-top:10px}
.legend-list{list-style:none;padding:0;margin:0}
.legend-list li{display:flex;align-items:center;gap:10px;padding:10px 8px;border-bottom:1px solid var(--border-light);font-size:16px}
.legend-color-picker{width:40px;height:40px;border:2px solid var(--border-color);border-radius:4px;cursor:pointer}

@media(max-width:900px){.dashboard{flex-direction:column}}

/* Analysis page grid: place chart and side panel */
.analysis-grid{display:flex;gap:16px;align-items:flex-start}
.chart-panel{flex:1;min-width:280px;height:420px}
.chart-panel canvas{width:100% !important;height:100% !important;max-width:740px}
.side-panel{width:320px;min-width:220px}
.btn{display:inline-block;padding:8px 10px;background:#F5CB5C;color:#000;border-radius:6px;text-decoration:none}
.nav{margin-top:12px}

/* Dark mode toggle switch */
.theme-toggle{
  position:fixed;bottom:20px;right:20px;z-index:1000;
  display:flex;align-items:center;gap:8px;
}
.switch{
  position:relative;display:inline-block;width:50px;height:26px;
}
.switch input{display:none}
.slider{
  position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#ccc;transition:0.3s;border-radius:26px;
}
.slider:before{
  position:absolute;content:'';height:20px;width:20px;left:3px;bottom:3px;background:#fff;transition:0.3s;border-radius:50%;
}
input:checked+.slider{background:#F5CB5C}
input:checked+.slider:before{transform:translateX(24px)}
body.dark-mode .slider{background:#444}
body.dark-mode input:checked+.slider{background:#F5CB5C}