.today-date{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);font-weight:500;white-space:nowrap;padding-inline-end:12px;border-inline-end:1px solid var(--border);margin-inline-end:12px;}
.today-date .dot-green{width:8px; height:8px; border-radius:50%; background:var(--green); display:inline-block;}

.month-picker-container { position: relative; }
.month-picker-btn { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--border); padding: 7px 14px; border-radius: 12px; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--text); transition: .16s; }
.month-picker-btn:hover { background: var(--primary-soft); border-color: var(--primary); }
.month-picker-btn svg { width: 14px; height: 14px; transition: .2s; }
.month-picker-panel { position: absolute; top: calc(100% + 8px); inset-inline-start: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.15); padding: 12px; width: 240px; z-index: 100; display: none; }
.month-picker-panel.open { display: block; animation: pop .2s ease; }
@keyframes pop { from { transform: scale(.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.mp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mp-year-row { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); margin-bottom: 6px; font-weight: 700; color: var(--primary); font-size: 14px; }
.mp-year-row .icon-btn { background: var(--surface-2); border-radius: 6px; width: 24px; height: 24px; display: grid; place-items: center; font-size: 14px; color: var(--muted); cursor: pointer; border: 0; transition: .15s; }
.mp-year-row .icon-btn:hover { background: var(--primary-soft); color: var(--primary); }
.mp-month { padding: 8px 4px; border-radius: 8px; border: 1px solid transparent; background: transparent; cursor: pointer; font-size: 12px; font-weight: 500; text-align: center; transition: .15s; color: var(--text); }
.mp-month:hover { background: var(--surface-2); }
.mp-month.active { background: var(--primary); color: #fff; font-weight: 700; }

.dash-toolbar{display:flex; justify-content:space-between; align-items:center;gap:10px; flex-wrap:wrap; padding:4px 2px;}
.dash-toolbar-info .hint{font-size:12px}
.dash-grid{display:grid;grid-template-columns: repeat(12, 1fr);gap:16px;grid-auto-flow: dense;min-width:0;}
.dash-card{position:relative;min-width:0;transition:outline-color .15s, background .15s, transform .15s;border-radius:18px;}
.dash-card[data-size="3"]  { grid-column: span 3; }
.dash-card[data-size="4"]  { grid-column: span 4; }
.dash-card[data-size="6"]  { grid-column: span 6; }
.dash-card[data-size="8"]  { grid-column: span 8; }
.dash-card[data-size="12"] { grid-column: span 12; }
.dash-card-body{min-width:0}
.dash-card-body > .card{height:100%;}

.dash-card-handle, .dash-card-actions{display:none;}
body.dash-edit-mode .dash-card{outline:2px dashed var(--border); outline-offset:3px;}
body.dash-edit-mode .dash-card-handle{display:flex;}
body.dash-edit-mode .dash-card-actions{display:flex;}
body.dash-edit-mode .dash-card-body{pointer-events:none; opacity:.92;}

.dash-card-handle{position:absolute; top:6px; inset-inline-end:6px;width:30px; height:30px; border-radius:8px;background:var(--primary); color:#fff;align-items:center; justify-content:center;cursor:grab; z-index:6; font-weight:800;font-size:14px; user-select:none;box-shadow:0 3px 10px rgba(47,111,237,.35);}
.dash-card-handle:active{cursor:grabbing;}
.dash-card-actions{position:absolute; top:6px; inset-inline-start:6px;gap:4px; z-index:6;background:rgba(255,255,255,.85);border:1px solid var(--border);border-radius:10px;padding:3px;backdrop-filter:blur(4px);}
html[data-theme="dark"] .dash-card-actions{background:rgba(22,30,46,.85);}
.dash-card-actions button{width:28px; height:28px; border-radius:7px; border:0;background:var(--surface-2); color:var(--muted);cursor:pointer; font-weight:700; font-size:13px;display:grid; place-items:center; transition:.15s;}
.dash-card-actions button:hover{background:var(--primary); color:#fff;}
.dash-card-actions button.danger:hover{background:var(--red);}
.dash-card-actions button:disabled{opacity:.35; cursor:not-allowed;}

body.dash-edit-mode .dash-card.dragging{opacity:.4; transform:scale(.98);}
body.dash-edit-mode .dash-card.drag-over{outline-color:var(--primary); background:var(--primary-soft);}
body.dash-edit-mode .dash-card.drag-over::after{content:''; position:absolute; inset:0; border-radius:18px;border:2px solid var(--primary); pointer-events:none;}

.dash-add-panel{background:var(--surface-2); border:1px dashed var(--border);border-radius:14px; padding:14px;}
.dash-add-list{display:flex; flex-wrap:wrap; gap:8px;}
.dash-add-list button{padding:8px 14px; border-radius:10px; border:1px solid var(--border);background:var(--surface); cursor:pointer; font-size:12.5px;font-weight:600; color:var(--text); transition:.15s;}
.dash-add-list button:hover{background:var(--primary-soft); border-color:var(--primary); color:var(--primary);}
.dash-add-empty{font-size:12.5px; color:var(--muted);}

.chart-seg{padding:3px;border-radius:10px;gap:2px;flex-shrink:0;}
.chart-seg .seg-btn{padding:5px 14px;font-size:12px;border-radius:7px;font-weight:600;transition:.18s;}
.chart-seg .seg-btn.active{background:var(--primary);color:#fff;box-shadow:0 2px 8px rgba(47,111,237,.35);}
.chart-wrap{position:relative;height:280px; width:100%}
.view{display:none;flex-direction:column;gap:16px}
.view.active{display:flex}

.bar{height:11px;border-radius:20px;background:var(--surface-2);overflow:hidden;border:1px solid var(--border)}
.bar > i{display:block;height:100%;border-radius:20px;transition:width .5s cubic-bezier(.4,0,.2,1)}
.budget-line{display:flex;justify-content:space-between;font-size:12.5px;margin:8px 0 6px;color:var(--muted);gap:8px;flex-wrap:wrap}
.budget-line b{color:var(--text)}

/* Progress Ring */
.progress-flex{display:flex; gap:20px; align-items:center; flex-wrap:wrap;}
.progress-flex > .progress-main{flex:1; min-width:200px;}
.progress-ring-wrap{position:relative;width:130px; height:130px;flex-shrink:0;display:grid; place-items:center;}
.progress-ring{width:100%; height:100%;transform:rotate(-90deg);overflow:visible;}
.progress-ring circle{fill:none;stroke-width:11;stroke-linecap:round;}
.progress-ring .ring-bg{ stroke:var(--surface-2); }
.progress-ring .ring-fill{ transition:stroke-dashoffset .7s cubic-bezier(.4,0,.2,1); }
.progress-ring-center{position:absolute;inset:0;display:grid;place-items:center;text-align:center;pointer-events:none;padding:0 8px;}
.progress-ring-center .pr-pct{font-size:24px;font-weight:800;line-height:1;letter-spacing:-.5px;}
.progress-ring-center .pr-sub{font-size:10.5px;color:var(--muted);margin-top:4px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.progress-style-seg{display:inline-flex; gap:2px; padding:3px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;flex-shrink:0;}
.progress-style-seg button{border:0; background:transparent; padding:5px 11px; border-radius:7px;cursor:pointer; font-size:11.5px; font-weight:600; color:var(--muted);transition:.15s; font-family:inherit; white-space:nowrap;}
.progress-style-seg button:hover{ color:var(--text); }
.progress-style-seg button.active{background:var(--surface);color:var(--primary);box-shadow:0 2px 6px rgba(0,0,0,.08);}
.progress-ring-container{display:flex; justify-content:center; padding:6px 0;}