/* ===== RESET & VARS ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0b0d13;
  --surface:#13161f;
  --surface2:#1a1e2a;
  --surface3:#242938;
  --border:#2a2f40;
  --border2:#363c52;
  --text:#e8eaf4;
  --text2:#9499b3;
  --text3:#5f6480;
  --accent:#6c5ce7;
  --accent2:#a29bfe;
  --accent-glow:rgba(108,92,231,.15);
  --green:#00b894;
  --green2:#55efc4;
  --red:#d63031;
  --red2:#ff7675;
  --orange:#fdcb6e;
  --blue:#74b9ff;
  --radius:14px;
  --radius-sm:10px;
  --radius-xs:6px;
  --shadow:0 8px 32px rgba(0,0,0,.4);
  --shadow-sm:0 2px 12px rgba(0,0,0,.25);
  --transition:.2s cubic-bezier(.4,0,.2,1);
  --sidebar-w:240px;
}
html{font-size:14px;scroll-behavior:smooth}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;line-height:1.6;display:flex}
a{color:var(--accent2);text-decoration:none}
button{cursor:pointer;font-family:inherit}
input,select,textarea{font-family:inherit;font-size:.9rem}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--text3)}

/* ===== SIDEBAR ===== */
.sidebar{position:fixed;top:0;left:0;width:var(--sidebar-w);height:100vh;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:100;transition:transform .3s ease}
.sidebar-brand{padding:1.5rem 1.25rem 1rem;display:flex;align-items:center;gap:.6rem;font-size:1.15rem;font-weight:800;color:var(--accent2)}
.sidebar-brand i{font-size:1.3rem}
.sidebar-nav{flex:1;padding:.5rem .75rem;display:flex;flex-direction:column;gap:.2rem}
.nav-item{display:flex;align-items:center;gap:.65rem;padding:.7rem 1rem;border-radius:var(--radius-sm);border:none;background:none;color:var(--text3);font-size:.88rem;font-weight:600;transition:var(--transition);width:100%;text-align:left}
.nav-item:hover{color:var(--text);background:var(--surface2)}
.nav-item.active{color:#fff;background:var(--accent);box-shadow:0 2px 12px rgba(108,92,231,.3)}
.nav-item i{width:20px;text-align:center;font-size:.95rem}
.sidebar-footer{padding:1rem 1.25rem;border-top:1px solid var(--border)}
.sidebar-budget{text-align:center}
.sb-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text3);margin-bottom:.15rem}
.sb-value{font-size:1.3rem;font-weight:800;color:var(--green2)}
.sb-value.negative{color:var(--red2)}

.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:99}

/* ===== MOBILE BAR ===== */
.mobile-bar{display:none;position:fixed;top:0;left:0;right:0;height:52px;background:var(--surface);border-bottom:1px solid var(--border);z-index:90;padding:0 1rem;align-items:center;gap:.75rem}
.mobile-menu-btn{background:none;border:none;color:var(--text);font-size:1.2rem}
.mobile-title{font-weight:700;color:var(--accent2);font-size:1rem}

/* ===== MAIN ===== */
.main{margin-left:var(--sidebar-w);flex:1;min-height:100vh;padding:2rem 2.5rem}

/* ===== PAGES ===== */
.page{display:none;animation:fadeIn .25s ease}
.page.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.page-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1.75rem;flex-wrap:wrap;gap:1rem}
.page-header h1{font-size:1.65rem;font-weight:800;letter-spacing:-.02em}
.page-sub{color:var(--text3);font-size:.85rem;margin-top:.15rem}
.header-actions{display:flex;gap:.5rem;align-items:center}

/* ===== DASHBOARD CARDS ===== */
.dashboard-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(195px,1fr));gap:.85rem;margin-bottom:1.5rem}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem 1.25rem;display:flex;align-items:flex-start;gap:1rem;transition:var(--transition)}
.card:hover{border-color:var(--border2);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.card-icon{width:40px;height:40px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
.card-budget .card-icon{background:rgba(108,92,231,.15);color:var(--accent2)}
.card-expenses .card-icon{background:rgba(214,48,49,.15);color:var(--red2)}
.card-paid .card-icon{background:rgba(0,184,148,.15);color:var(--green2)}
.card-unpaid .card-icon{background:rgba(253,203,110,.15);color:var(--orange)}
.card-remaining .card-icon{background:rgba(116,185,255,.15);color:var(--blue)}
.card-body{min-width:0}
.card-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;color:var(--text3);margin-bottom:.2rem;font-weight:600}
.card-value{font-size:1.35rem;font-weight:800;line-height:1.2}
.card-sub{font-size:.72rem;color:var(--text3);margin-top:.15rem}

/* ===== PROGRESS BAR ===== */
.progress-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem 1.3rem;margin-bottom:1.5rem}
.progress-header{display:flex;justify-content:space-between;margin-bottom:.5rem;font-size:.82rem;color:var(--text2)}
.progress-bar{height:14px;background:var(--surface3);border-radius:99px;overflow:hidden;position:relative}
.progress-fill-paid{height:100%;background:linear-gradient(90deg,var(--green),var(--green2));border-radius:99px;position:absolute;left:0;top:0;z-index:2;transition:width .5s ease}
.progress-fill-unpaid{height:100%;background:linear-gradient(90deg,var(--red),var(--red2));border-radius:99px;position:absolute;left:0;top:0;z-index:1;transition:width .5s ease;opacity:.7}
.progress-legend{display:flex;gap:1.25rem;margin-top:.5rem;font-size:.72rem;color:var(--text3)}
.progress-legend i{font-size:.5rem;vertical-align:middle;margin-right:.2rem}

/* ===== PANELS ===== */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.panel-header{padding:1rem 1.25rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.panel-header h3{font-size:.9rem;font-weight:700;display:flex;align-items:center;gap:.45rem}
.panel-header h3 i{color:var(--accent2);font-size:.85rem}
.panel-body{padding:1rem 1.25rem;max-height:360px;overflow-y:auto}
.dashboard-two-col{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.25rem}

/* Mini list in panel */
.mini-item{display:flex;align-items:center;gap:.75rem;padding:.55rem 0;border-bottom:1px solid var(--border)}
.mini-item:last-child{border-bottom:none}
.mini-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.mini-info{flex:1;min-width:0}
.mini-name{font-size:.82rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-meta{font-size:.7rem;color:var(--text3)}
.mini-amount{font-size:.88rem;font-weight:700;white-space:nowrap}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;gap:.35rem;padding:.5rem 1rem;border-radius:var(--radius-xs);font-size:.82rem;font-weight:600;border:none;transition:var(--transition);white-space:nowrap}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:#5b4bd4;box-shadow:0 2px 10px rgba(108,92,231,.3)}
.btn-success{background:var(--green);color:#fff}
.btn-success:hover{background:#00a381}
.btn-danger{background:var(--red);color:#fff}
.btn-danger:hover{background:#c0292a}
.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--text2)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent2)}
.btn-sm{padding:.35rem .7rem;font-size:.75rem}
.btn-icon{width:30px;height:30px;padding:0;justify-content:center;border-radius:50%}

/* ===== INPUT ===== */
.input{background:var(--surface2);border:1px solid var(--border);color:var(--text);padding:.5rem .8rem;border-radius:var(--radius-xs);transition:var(--transition);outline:none}
.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.input::placeholder{color:var(--text3)}

/* ===== FILTER BAR ===== */
.filter-bar{margin-bottom:1.25rem}
.filter-controls{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.75rem;align-items:center}
.search-box{position:relative;flex:1;min-width:180px}
.search-box input{width:100%;padding-left:2rem}
.search-box i{position:absolute;left:.7rem;top:50%;transform:translateY(-50%);color:var(--text3);font-size:.8rem}
.filter-controls select{min-width:130px}

/* ===== TABS ===== */
.tabs{display:flex;gap:2px;background:var(--surface2);border-radius:var(--radius-xs);padding:3px;width:fit-content}
.tab{padding:.4rem .9rem;border-radius:var(--radius-xs);font-size:.78rem;font-weight:600;color:var(--text3);background:transparent;border:none;transition:var(--transition)}
.tab:hover{color:var(--text)}
.tab.active{background:var(--accent);color:#fff}

/* ===== EXPENSE LIST ===== */
.expense-list{display:flex;flex-direction:column;gap:.55rem}
.expense-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:var(--transition)}
.expense-item:hover{border-color:var(--border2)}
.expense-item.fully-paid{border-left:3px solid var(--green)}
.expense-item.partially-paid{border-left:3px solid var(--orange)}
.expense-item.unpaid{border-left:3px solid var(--red)}

.expense-main{display:flex;align-items:center;padding:.85rem 1.1rem;gap:.85rem;cursor:pointer;user-select:none;transition:var(--transition)}
.expense-main:hover{background:var(--surface2)}

.expense-check{width:20px;height:20px;border-radius:var(--radius-xs);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--transition);font-size:.65rem;color:transparent}
.expense-check.checked{background:var(--green);border-color:var(--green);color:#fff}
.expense-check.partial{background:var(--orange);border-color:var(--orange);color:#fff}

.expense-info{flex:1;min-width:0}
.expense-info .name{font-weight:700;font-size:.88rem;display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.cat-badge{font-size:.6rem;padding:.12rem .45rem;border-radius:99px;font-weight:600;white-space:nowrap}
.badge-recurring{font-size:.6rem;padding:.12rem .4rem;border-radius:99px;background:var(--accent-glow);color:var(--accent2);font-weight:600}
.expense-info .meta{font-size:.72rem;color:var(--text3);display:flex;gap:.75rem;margin-top:.15rem;flex-wrap:wrap}

.expense-amount{font-weight:800;font-size:1rem;white-space:nowrap}
.expense-amount.paid{color:var(--green2)}
.expense-amount.unpaid{color:var(--red2)}
.expense-amount.partial{color:var(--orange)}

.expense-progress{width:70px;height:5px;background:var(--surface3);border-radius:99px;overflow:hidden;flex-shrink:0}
.expense-progress .bar{height:100%;background:var(--green);border-radius:99px;transition:width .3s ease}

.expense-actions{display:flex;gap:.25rem;flex-shrink:0}
.expense-arrow{color:var(--text3);transition:var(--transition);flex-shrink:0;font-size:.75rem}
.expense-arrow.open{transform:rotate(180deg)}

/* ===== SPLITS ===== */
.splits-panel{background:var(--surface2);border-top:1px solid var(--border);max-height:0;overflow:hidden;transition:max-height .35s ease,padding .35s ease;padding:0 1.1rem}
.splits-panel.open{max-height:2000px;padding:1rem 1.1rem}
.splits-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem}
.splits-header span{font-size:.78rem;font-weight:600;color:var(--text2)}
.split-row{display:flex;align-items:center;gap:.65rem;padding:.5rem .65rem;background:var(--surface);border-radius:var(--radius-xs);margin-bottom:.35rem;transition:var(--transition)}
.split-row:hover{background:var(--surface3)}
.split-row .split-check{width:16px;height:16px;border-radius:4px;border:2px solid var(--border);cursor:pointer;flex-shrink:0;transition:var(--transition);font-size:.55rem;color:transparent;display:flex;align-items:center;justify-content:center}
.split-row .split-check.checked{background:var(--green);border-color:var(--green);color:#fff}
.split-row .split-name{flex:1;font-size:.8rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.split-row .split-amount{font-weight:700;font-size:.85rem;white-space:nowrap}
.split-row .split-amount.paid{color:var(--green2)}
.split-row .split-date{font-size:.7rem;color:var(--text3)}
.split-row .split-actions{display:flex;gap:.2rem}

/* ===== MODAL ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s ease}
.modal-overlay.active{opacity:1;pointer-events:all}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);width:95%;max-width:560px;max-height:90vh;display:flex;flex-direction:column;transform:translateY(15px) scale(.98);transition:transform .25s ease;box-shadow:0 24px 80px rgba(0,0,0,.5)}
.modal-overlay.active .modal{transform:translateY(0) scale(1)}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid var(--border)}
.modal-header h2{font-size:1.1rem;font-weight:800;display:flex;align-items:center;gap:.4rem}
.modal-header h2 i{color:var(--accent2)}
.modal-close{background:none;border:none;color:var(--text3);font-size:1.1rem;padding:.3rem;transition:var(--transition)}
.modal-close:hover{color:var(--text)}
.modal-body{padding:1.25rem 1.5rem;overflow-y:auto;flex:1}
.modal-footer{padding:1rem 1.5rem;border-top:1px solid var(--border);display:flex;gap:.6rem;justify-content:flex-end}

.form-group{margin-bottom:.9rem}
.form-group label{display:block;font-size:.72rem;font-weight:700;color:var(--text3);margin-bottom:.25rem;text-transform:uppercase;letter-spacing:.05em}
.form-group .input{width:100%}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}

/* Split builder */
.split-builder{margin-top:.75rem;padding:.85rem;background:var(--surface2);border-radius:var(--radius-xs);border:1px solid var(--border)}
.split-builder-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem}
.split-builder-header h4{font-size:.82rem;font-weight:700;color:var(--accent2);display:flex;align-items:center;gap:.3rem}
.split-builder-row{display:flex;gap:.4rem;margin-bottom:.35rem;align-items:center}
.split-builder-row .input{flex:1}
.split-builder-total{font-size:.78rem;color:var(--text2);margin-top:.45rem;padding-top:.45rem;border-top:1px solid var(--border);display:flex;justify-content:space-between}
.split-builder-total .ok{color:var(--green2)}
.split-builder-total .warn{color:var(--red2)}

/* ===== CONFIRM ===== */
.confirm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);z-index:1500;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s}
.confirm-overlay.active{opacity:1;pointer-events:all}
.confirm-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;max-width:380px;width:90%;text-align:center;box-shadow:var(--shadow)}
.confirm-icon{font-size:2rem;color:var(--orange);margin-bottom:.75rem}
.confirm-box p{margin-bottom:1.25rem;font-size:.9rem;color:var(--text2)}
.confirm-actions{display:flex;gap:.5rem;justify-content:center}

/* ===== TOAST ===== */
.toast-container{position:fixed;bottom:1.25rem;right:1.25rem;z-index:2000;display:flex;flex-direction:column;gap:.3rem}
.toast{padding:.55rem 1rem;border-radius:var(--radius-xs);font-size:.78rem;font-weight:600;color:#fff;animation:toastIn .25s ease,toastOut .25s ease 2.75s forwards;box-shadow:var(--shadow-sm)}
.toast.success{background:var(--green)}
.toast.error{background:var(--red)}
.toast.info{background:var(--accent)}
@keyframes toastIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}
@keyframes toastOut{from{opacity:1}to{opacity:0;transform:translateX(30px)}}

/* ===== SETTINGS ===== */
.settings-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;margin-bottom:1.25rem}
.settings-section h2{font-size:1.05rem;font-weight:800;margin-bottom:.3rem;display:flex;align-items:center;gap:.4rem}
.settings-section h2 i{color:var(--accent2);font-size:.95rem}
.settings-desc{font-size:.78rem;color:var(--text3);margin-bottom:1rem}
.setting-row{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0;border-bottom:1px solid var(--border);flex-wrap:wrap;gap:.5rem}
.setting-label{font-size:.82rem;font-weight:600;color:var(--text2)}
.setting-value{font-size:1.25rem;font-weight:800;color:var(--green2)}
.settings-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1rem 0}
.input-group{display:flex;flex-direction:column;gap:.35rem}
.input-group label{font-size:.72rem;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.04em}
.input-combo{display:flex;gap:.4rem}
.input-combo .input{flex:1}

/* Category list */
.category-list{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.75rem}
.category-item{display:flex;align-items:center;gap:.65rem;padding:.55rem .75rem;background:var(--surface2);border-radius:var(--radius-xs);transition:var(--transition)}
.category-item:hover{background:var(--surface3)}
.category-item .cat-color{width:14px;height:14px;border-radius:4px;flex-shrink:0}
.category-item .cat-icon{font-size:1.1rem;flex-shrink:0}
.category-item .cat-label{flex:1;font-size:.85rem;font-weight:600}
.category-item .cat-count{font-size:.72rem;color:var(--text3);margin-right:.5rem}
.add-category-form{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.cat-icon-input{width:50px;text-align:center;font-size:1.2rem}
.color-input{width:38px;height:36px;padding:2px;cursor:pointer;border-radius:var(--radius-xs)}

/* Sub panels */
.sub-panel{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-xs);overflow:hidden;margin-top:.75rem}
.sub-panel-header{padding:.7rem 1rem;border-bottom:1px solid var(--border);font-size:.82rem}
.sub-panel-header h4{font-weight:700;font-size:.82rem;display:flex;align-items:center;gap:.35rem;color:var(--text2)}
.sub-panel-header h4 i{color:var(--accent2);font-size:.75rem}
.sub-panel-body{padding:.75rem 1rem;max-height:250px;overflow-y:auto}
.history-scroll{max-height:300px}

/* History items */
.history-item{display:flex;gap:.6rem;padding:.4rem 0;border-bottom:1px solid var(--border);color:var(--text2);font-size:.78rem}
.history-item:last-child{border-bottom:none}
.h-time{color:var(--text3);flex-shrink:0;width:105px;font-size:.72rem}
.h-action{flex:1}
.h-amount{font-weight:700;flex-shrink:0}

/* Income history */
.income-item{display:flex;align-items:center;gap:.75rem;padding:.5rem 0;border-bottom:1px solid var(--border);font-size:.82rem}
.income-item:last-child{border-bottom:none}
.income-icon{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;flex-shrink:0}
.income-icon.budget{background:rgba(108,92,231,.15);color:var(--accent2)}
.income-icon.income{background:rgba(0,184,148,.15);color:var(--green2)}
.income-info{flex:1;min-width:0}
.income-desc{font-weight:600}
.income-date{font-size:.7rem;color:var(--text3)}
.income-amount{font-weight:800;white-space:nowrap}
.income-amount.pos{color:var(--green2)}

/* Stats */
.stats-summary{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:.75rem;margin-bottom:1.25rem}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.1rem;text-align:center}
.stat-card .stat-value{font-size:1.5rem;font-weight:800;margin-bottom:.15rem}
.stat-card .stat-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);font-weight:600}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}

/* Category bar chart in stats */
.cat-bar-row{display:flex;align-items:center;gap:.65rem;margin-bottom:.6rem}
.cat-bar-icon{font-size:1rem;flex-shrink:0;width:24px;text-align:center}
.cat-bar-info{flex:1;min-width:0}
.cat-bar-name{font-size:.78rem;font-weight:600;margin-bottom:.2rem;display:flex;justify-content:space-between}
.cat-bar-track{height:8px;background:var(--surface3);border-radius:99px;overflow:hidden}
.cat-bar-fill{height:100%;border-radius:99px;transition:width .5s ease}

/* Pie chart (CSS) */
.pie-container{display:flex;flex-direction:column;align-items:center;gap:1rem}
.pie-chart{width:160px;height:160px;border-radius:50%;position:relative}
.pie-legend{display:flex;flex-direction:column;gap:.3rem;width:100%}
.pie-legend-item{display:flex;align-items:center;gap:.4rem;font-size:.78rem}
.pie-legend-dot{width:10px;height:10px;border-radius:3px;flex-shrink:0}
.pie-legend-label{flex:1}
.pie-legend-value{font-weight:700}
.pie-legend-pct{color:var(--text3);font-size:.72rem;width:40px;text-align:right}

/* Monthly chart */
.monthly-chart{display:flex;align-items:flex-end;gap:3px;height:140px;padding-bottom:22px;position:relative}
.month-col{flex:1;display:flex;flex-direction:column;align-items:center;position:relative;height:100%}
.month-bar{width:100%;max-width:32px;border-radius:4px 4px 0 0;position:absolute;bottom:22px;transition:height .5s ease}
.month-bar.total-bar{opacity:.4}
.month-label{position:absolute;bottom:0;font-size:.58rem;color:var(--text3);text-align:center}

/* Top expenses */
.top-expense{display:flex;align-items:center;gap:.75rem;padding:.55rem 0;border-bottom:1px solid var(--border)}
.top-expense:last-child{border-bottom:none}
.top-rank{width:22px;height:22px;border-radius:50%;background:var(--surface3);display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:800;color:var(--text3);flex-shrink:0}
.top-rank.r1{background:rgba(253,203,110,.2);color:var(--orange)}
.top-rank.r2{background:rgba(162,155,254,.15);color:var(--accent2)}
.top-rank.r3{background:rgba(116,185,255,.15);color:var(--blue)}
.top-info{flex:1;min-width:0}
.top-name{font-size:.82rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-meta{font-size:.7rem;color:var(--text3)}
.top-amount{font-size:.95rem;font-weight:800;white-space:nowrap}

/* Empty state */
.empty-state{text-align:center;padding:2.5rem 1rem;color:var(--text3)}
.empty-state i{font-size:2rem;margin-bottom:.5rem;display:block;color:var(--border2)}
.empty-state p{font-size:.85rem}

/* Dropdown */
.dropdown{position:relative}
.dropdown-menu{position:absolute;top:100%;right:0;margin-top:.2rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xs);min-width:140px;box-shadow:var(--shadow);z-index:500;display:none}
.dropdown-menu.show{display:block}
.dropdown-menu button{display:flex;align-items:center;gap:.4rem;width:100%;text-align:left;padding:.5rem .75rem;border:none;background:none;color:var(--text);font-size:.78rem;transition:var(--transition)}
.dropdown-menu button:hover{background:var(--surface2);color:var(--accent2)}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){
  :root{--sidebar-w:0px}
  .sidebar{transform:translateX(-260px);width:260px}
  .sidebar.open{transform:translateX(0)}
  .sidebar-overlay.active{display:block}
  .mobile-bar{display:flex}
  .main{margin-left:0;padding:68px 1rem 2rem}
  .dashboard-two-col{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr}
  .settings-form-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
}
@media(max-width:480px){
  .dashboard-grid{grid-template-columns:1fr 1fr}
  .stats-summary{grid-template-columns:1fr 1fr}
  .filter-controls{flex-direction:column}
}