/* ═══════════════════════════════════════════════════
   个人记账系统 — 样式表
   设计：深色/浅色双主题 + 翡翠绿强调色
   ═══════════════════════════════════════════════════ */

/* ── 主题变量 ── */
:root,
[data-theme="dark"] {
    --bg:          #0c0e14;
    --surface:     #161a26;
    --surface-alt: #1c2133;
    --border:      #262b3d;
    --accent:      #10b981;
    --accent-h:    #059669;
    --accent-glow: rgba(16,185,129,.12);
    --income:      #10b981;
    --income-bg:   rgba(16,185,129,.08);
    --expense:     #f43f5e;
    --expense-bg:  rgba(244,63,94,.08);
    --text:        #e2e4e9;
    --text-sec:    #8b919e;
    --text-muted:  #555b6e;
    --danger:      #f43f5e;
    --modal-bg:    rgba(0,0,0,.6);
    --tooltip-bg:  #1c2133;
    --tooltip-bdr: #262b3d;
    --chart-grid:  rgba(38,43,61,.5);
}

[data-theme="light"] {
    --bg:          #f5f5f5;
    --surface:     #ffffff;
    --surface-alt: #f0f0f0;
    --border:      #e0e0e0;
    --accent:      #059669;
    --accent-h:    #047857;
    --accent-glow: rgba(5,150,105,.10);
    --income:      #059669;
    --income-bg:   rgba(5,150,105,.06);
    --expense:     #e11d48;
    --expense-bg:  rgba(225,29,72,.06);
    --text:        #1a1a2e;
    --text-sec:    #555;
    --text-muted:  #999;
    --danger:      #e11d48;
    --modal-bg:    rgba(0,0,0,.35);
    --tooltip-bg:  #ffffff;
    --tooltip-bdr: #e0e0e0;
    --chart-grid:  rgba(0,0,0,.08);
}

/* ── 基础 ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px;-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
::selection{background:var(--accent-glow);color:var(--accent)}

:root{
    --radius:      10px;
    --radius-sm:   6px;
    --shadow:      0 2px 20px rgba(0,0,0,.3);
    --ease:        .2s ease;
    --font:        'Noto Sans SC',-apple-system,BlinkMacSystemFont,sans-serif;
    --serif:       'Noto Serif SC',Georgia,serif;
    --mono:        'DM Mono','Menlo',monospace;
}

/* ═══════════════════════════
   Auth Pages
   ═══════════════════════════ */
.auth-page{
    display:flex;align-items:center;justify-content:center;
    min-height:100vh;padding:1rem;
}
.auth-card{
    background:var(--surface);border:1px solid var(--border);
    border-radius:var(--radius);padding:2.5rem;
    width:100%;max-width:420px;box-shadow:var(--shadow);
}
.auth-card h1{
    font-family:var(--serif);font-size:1.8rem;font-weight:700;
    text-align:center;margin-bottom:.3rem;color:var(--accent);
}
.auth-card h2{
    font-size:1rem;font-weight:400;text-align:center;
    color:var(--text-sec);margin-bottom:1.5rem;
}
.auth-card p{color:var(--text-sec);margin-bottom:1rem;font-size:.9rem}

/* ═══════════════════════════
   Header
   ═══════════════════════════ */
.app-header{
    background:var(--surface);border-bottom:1px solid var(--border);
    position:sticky;top:0;z-index:100;
}
.header-inner{
    max-width:960px;margin:0 auto;padding:.8rem 1.2rem;
    display:flex;align-items:center;justify-content:space-between;
}
.logo{font-family:var(--serif);font-size:1.3rem;font-weight:700;color:var(--accent)}
.user-info{display:flex;align-items:center;gap:.8rem}
.user-name{font-size:.85rem;color:var(--text-sec)}

.btn-icon{
    background:none;border:1px solid var(--border);
    border-radius:var(--radius-sm);padding:.35rem .5rem;
    cursor:pointer;color:var(--text-sec);font-size:1rem;
    transition:var(--ease);line-height:1;
}
.btn-icon:hover{border-color:var(--accent);color:var(--accent)}

.btn-logout{
    font-size:.8rem;color:var(--text-muted);text-decoration:none;
    padding:.3rem .7rem;border:1px solid var(--border);
    border-radius:var(--radius-sm);transition:var(--ease);
}
.btn-logout:hover{color:var(--danger);border-color:var(--danger)}

/* ═══════════════════════════
   Container & Cards
   ═══════════════════════════ */
.container{
    max-width:960px;margin:0 auto;padding:1.5rem 1.2rem 3rem;
    display:flex;flex-direction:column;gap:1.5rem;
}
.card{
    background:var(--surface);border:1px solid var(--border);
    border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow);
    animation:fadeUp .45s ease both;
}
.card:nth-child(2){animation-delay:.07s}
.card:nth-child(3){animation-delay:.14s}
.card-title{
    font-family:var(--serif);font-size:1.15rem;font-weight:700;
    margin-bottom:1.2rem;
}
.card-head{
    display:flex;align-items:center;justify-content:space-between;
    flex-wrap:wrap;gap:.8rem;margin-bottom:1rem;
}
.card-head .card-title{margin-bottom:0}

/* ═══════════════════════════
   Forms
   ═══════════════════════════ */
.form-group{margin-bottom:1rem;flex:1;min-width:0}
.form-group label,
.group-label{
    display:block;font-size:.8rem;font-weight:500;
    color:var(--text-sec);margin-bottom:.35rem;
}
.form-group label small{font-weight:400;color:var(--text-muted)}

.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="password"],
.form-group input[type="datetime-local"],
.form-group select,
.form-group textarea{
    width:100%;padding:.55rem .75rem;
    background:var(--bg);border:1px solid var(--border);
    border-radius:var(--radius-sm);color:var(--text);
    font-family:var(--font);font-size:.9rem;
    transition:border-color var(--ease);outline:none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 3px var(--accent-glow);
}
.form-group select{
    cursor:pointer;appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b919e' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right .75rem center;
    padding-right:2rem;
}

.form-row{display:flex;gap:1rem}
.form-row-3 .form-group{flex:1}
.form-row-2 .form-group{flex:1}
.fg-grow{flex:2!important}

.form-actions{display:flex;align-items:center;gap:1rem;margin-top:1.2rem}
.req{color:var(--expense);font-size:.75rem}
.shortcut-hint{font-size:.75rem;color:var(--text-muted)}

/* ═══════════════════════════
   Type Toggle
   ═══════════════════════════ */
.type-toggle{display:flex;gap:.5rem}
.radio-pill{flex:1;cursor:pointer}
.radio-pill input{display:none}
.radio-pill span{
    display:block;text-align:center;padding:.55rem .75rem;
    border:1px solid var(--border);border-radius:var(--radius-sm);
    font-size:.9rem;font-weight:500;transition:var(--ease);color:var(--text-sec);
}
.pill-expense input:checked+span{
    background:var(--expense-bg);border-color:var(--expense);color:var(--expense);
}
.pill-income input:checked+span{
    background:var(--income-bg);border-color:var(--income);color:var(--income);
}

/* ═══════════════════════════
   Radio Group
   ═══════════════════════════ */
.radio-group{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.radio-option{display:inline-flex;align-items:center;gap:.3rem;cursor:pointer;position:relative}

.radio-option input[type="radio"]{
    appearance:none;width:16px;height:16px;
    border:2px solid var(--border);border-radius:50%;
    cursor:pointer;transition:var(--ease);flex-shrink:0;
}
.radio-option input[type="radio"]:checked{
    border-color:var(--accent);background:var(--accent);
    box-shadow:inset 0 0 0 3px var(--surface);
}
.radio-option span{
    font-size:.85rem;color:var(--text-sec);transition:color var(--ease);
}
.radio-option input:checked+span{color:var(--accent);font-weight:500}

.btn-remove-opt{
    display:none;background:none;border:none;
    color:var(--text-muted);font-size:.9rem;cursor:pointer;
    padding:0 .15rem;line-height:1;transition:color var(--ease);
}
.radio-option:hover .btn-remove-opt{display:inline}
.btn-remove-opt:hover{color:var(--danger)}

.other-wrap{width:100%;position:relative;visibility:hidden;height:0;overflow:hidden;margin-top:.4rem}
.radio-group[data-active-other="true"] .other-wrap{visibility:visible;height:auto;overflow:visible}

.other-input{
    width:100%;padding:.5rem .75rem;background:var(--bg);
    border:1px solid var(--border);border-radius:var(--radius-sm);
    color:var(--text);font-family:var(--font);font-size:.85rem;
    outline:none;transition:border-color var(--ease);
}
.other-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}

.ac-list{
    position:absolute;top:100%;left:0;right:0;
    background:var(--surface-alt);border:1px solid var(--border);
    border-top:none;border-radius:0 0 var(--radius-sm) var(--radius-sm);
    max-height:200px;overflow-y:auto;z-index:50;list-style:none;
}
.ac-hidden{display:none}
.ac-list li{
    padding:.5rem .75rem;font-size:.85rem;cursor:pointer;
    color:var(--text-sec);transition:background var(--ease);
}
.ac-list li:hover{background:var(--accent-glow);color:var(--accent)}
.ac-list .ac-count{
    float:right;font-size:.7rem;color:var(--text-muted);font-family:var(--mono);
}

/* ═══════════════════════════
   Buttons
   ═══════════════════════════ */
.btn-primary{
    display:inline-block;padding:.6rem 1.5rem;
    background:var(--accent);color:#fff;border:none;
    border-radius:var(--radius-sm);font-family:var(--font);
    font-size:.9rem;font-weight:500;cursor:pointer;
    transition:background var(--ease),transform .1s;
}
.btn-primary:hover{background:var(--accent-h)}
.btn-primary:active{transform:scale(.97)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}

.btn-secondary{
    display:inline-block;padding:.6rem 1.5rem;
    background:var(--surface-alt);color:var(--text-sec);border:1px solid var(--border);
    border-radius:var(--radius-sm);font-family:var(--font);
    font-size:.9rem;font-weight:500;cursor:pointer;
    transition:var(--ease);
}
.btn-secondary:hover{border-color:var(--text-muted);color:var(--text)}

.btn-small{
    padding:.35rem .7rem;font-size:.78rem;font-weight:500;
    background:var(--accent);color:#fff;border:none;
    border-radius:var(--radius-sm);cursor:pointer;
    font-family:var(--font);transition:var(--ease);
}
.btn-small:hover{background:var(--accent-h)}

.btn-outline{
    background:transparent;border:1px solid var(--border);color:var(--text-sec);
}
.btn-outline:hover{border-color:var(--accent);color:var(--accent)}

.btn-sm{padding:.4rem .8rem;font-size:.82rem}

/* ═══════════════════════════
   Alerts & Toast
   ═══════════════════════════ */
.alert{padding:.65rem 1rem;border-radius:var(--radius-sm);font-size:.85rem;margin-bottom:1rem}
.alert-success{background:var(--income-bg);color:var(--income);border:1px solid rgba(16,185,129,.3)}
.alert-error{background:var(--expense-bg);color:var(--expense);border:1px solid rgba(244,63,94,.3)}
.alert-warn{background:rgba(251,191,36,.08);color:#fbbf24;border:1px solid rgba(251,191,36,.3)}

.toast{
    position:fixed;top:1rem;right:1rem;
    padding:.7rem 1.2rem;border-radius:var(--radius-sm);
    font-size:.85rem;z-index:999;box-shadow:var(--shadow);
    animation:slideIn .3s ease,fadeOut .3s ease 2.7s forwards;
}
.toast.success{background:var(--accent);color:#fff}
.toast.error{background:var(--danger);color:#fff}

/* ═══════════════════════════
   Toolbar (搜索 + 筛选 + 导出)
   ═══════════════════════════ */
.toolbar{
    display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;width:100%;
}
.search-wrap{flex:1;min-width:180px}
.search-wrap input{
    width:100%;padding:.4rem .7rem;background:var(--bg);
    border:1px solid var(--border);border-radius:var(--radius-sm);
    color:var(--text);font-family:var(--font);font-size:.85rem;
    outline:none;transition:border-color var(--ease);
}
.search-wrap input:focus{border-color:var(--accent)}
.filter-bar{display:flex;gap:.25rem}
.filter-bar select{
    padding:.3rem 1.8rem .3rem .6rem;background:var(--bg);
    border:1px solid var(--border);border-radius:var(--radius-sm);
    color:var(--text-sec);font-family:var(--font);font-size:.78rem;
    cursor:pointer;outline:none;appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%238b919e' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right .5rem center;
}
.export-btns{display:flex;gap:.3rem}

/* ═══════════════════════════
   Transaction Table (Desktop)
   ═══════════════════════════ */
.table-responsive{overflow-x:auto}
.tx-table{width:100%;border-collapse:collapse;font-size:.85rem}
.tx-table th{
    text-align:left;padding:.6rem .75rem;font-weight:500;
    color:var(--text-muted);font-size:.75rem;text-transform:uppercase;
    letter-spacing:.05em;border-bottom:1px solid var(--border);white-space:nowrap;
}
.tx-table td{
    padding:.65rem .75rem;border-bottom:1px solid var(--border);
    color:var(--text-sec);vertical-align:middle;
}
.tx-table tbody tr{transition:background var(--ease)}
.tx-table tbody tr:hover{background:var(--surface-alt)}
.col-amount{font-family:var(--font-mono);font-weight:500;white-space:nowrap}
.col-amount.income{color:var(--income)}
.col-amount.expense{color:var(--expense)}
.col-time{font-family:var(--font-mono);font-size:.8rem;white-space:nowrap}
.col-title{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.btn-action{
    background:none;border:none;color:var(--text-muted);cursor:pointer;
    font-size:.8rem;padding:.25rem .4rem;border-radius:var(--radius-sm);
    transition:var(--ease);font-family:var(--font);
}
.btn-action:hover{color:var(--accent);background:var(--accent-glow)}
.btn-action.btn-delete:hover{color:var(--danger);background:var(--expense-bg)}

/* ═══════════════════════════
   Transaction Cards (Mobile)
   ═══════════════════════════ */
.tx-cards{display:none}
.tx-card{
    background:var(--bg);border:1px solid var(--border);
    border-radius:var(--radius-sm);padding:.85rem 1rem;
    margin-bottom:.6rem;cursor:pointer;transition:border-color var(--ease);
}
.tx-card:hover{border-color:var(--text-muted)}
.tx-card-head{display:flex;align-items:center;justify-content:space-between}
.tx-card-title{
    font-size:.9rem;font-weight:500;color:var(--text);flex:1;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:.5rem;
}
.tx-card-amount{font-family:var(--font-mono);font-weight:500;font-size:.95rem;white-space:nowrap}
.tx-card-amount.income{color:var(--income)}
.tx-card-amount.expense{color:var(--expense)}
.tx-card-meta{
    display:flex;align-items:center;gap:.5rem;margin-top:.3rem;
    font-size:.75rem;color:var(--text-muted);font-family:var(--font-mono);
}
.type-badge{display:inline-block;padding:.1rem .4rem;border-radius:3px;font-size:.7rem;font-weight:500}
.type-badge.income{background:var(--income-bg);color:var(--income)}
.type-badge.expense{background:var(--expense-bg);color:var(--expense)}

.tx-card-detail{
    max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease;
}
.tx-card.expanded .tx-card-detail{max-height:400px;padding-top:.6rem}
.detail-grid{
    display:grid;grid-template-columns:auto 1fr;gap:.25rem .75rem;font-size:.8rem;
}
.detail-grid dt{color:var(--text-muted)}
.detail-grid dd{color:var(--text-sec);word-break:break-all}
.card-actions{margin-top:.6rem;display:flex;gap:.4rem;justify-content:flex-end}

/* ═══════════════════════════
   Summary
   ═══════════════════════════ */
.summary-row{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
    gap:.75rem;margin-bottom:1.2rem;
}
.summary-item{
    background:var(--bg);border:1px solid var(--border);
    border-radius:var(--radius-sm);padding:.8rem 1rem;text-align:center;
}
.summary-item .label{
    font-size:.7rem;color:var(--text-muted);
    text-transform:uppercase;letter-spacing:.06em;margin-bottom:.2rem;
}
.summary-item .value{font-family:var(--font-mono);font-size:1.1rem;font-weight:500}
.summary-item .value.income{color:var(--income)}
.summary-item .value.expense{color:var(--expense)}
.summary-item .value.net{color:var(--text)}

/* ═══════════════════════════
   Chart
   ═══════════════════════════ */
.chart-wrap{position:relative;height:280px}
.chart-wrap canvas{width:100%!important;height:100%!important}

.chart-type-tabs{display:flex;gap:.25rem}
.chart-type-tabs button{
    padding:.3rem .7rem;background:transparent;
    border:1px solid var(--border);border-radius:var(--radius-sm);
    color:var(--text-muted);font-family:var(--font);font-size:.78rem;
    cursor:pointer;transition:var(--ease);
}
.chart-type-tabs button.active{
    background:var(--accent-glow);border-color:var(--accent);color:var(--accent);
}
.chart-type-tabs button:hover:not(.active){border-color:var(--text-muted);color:var(--text-sec)}

.pie-controls{
    display:flex;gap:1.2rem;justify-content:center;margin-bottom:.8rem;
}
.pie-controls label{
    font-size:.85rem;color:var(--text-sec);cursor:pointer;
    display:flex;align-items:center;gap:.35rem;
}
.pie-controls input[type="radio"]{
    accent-color:var(--accent);cursor:pointer;
}

/* ═══════════════════════════
   Period Toggle
   ═══════════════════════════ */
.period-toggle{display:flex;gap:.25rem}
.period-toggle button{
    padding:.3rem .7rem;background:transparent;
    border:1px solid var(--border);border-radius:var(--radius-sm);
    color:var(--text-muted);font-family:var(--font);font-size:.78rem;
    cursor:pointer;transition:var(--ease);
}
.period-toggle button.active{
    background:var(--accent-glow);border-color:var(--accent);color:var(--accent);
}
.period-toggle button:hover:not(.active){border-color:var(--text-muted);color:var(--text-sec)}

/* ═══════════════════════════
   Pager
   ═══════════════════════════ */
.pager{display:flex;justify-content:center;gap:.3rem;margin-top:1rem;flex-wrap:wrap}
.pager button{
    min-width:2rem;height:2rem;padding:0 .4rem;
    background:transparent;border:1px solid var(--border);
    border-radius:var(--radius-sm);color:var(--text-sec);
    font-family:var(--mono);font-size:.8rem;cursor:pointer;transition:var(--ease);
}
.pager button.active{background:var(--accent);border-color:var(--accent);color:#fff}
.pager button:hover:not(.active):not(:disabled){border-color:var(--accent);color:var(--accent)}
.pager button:disabled{opacity:.3;cursor:not-allowed}
.empty-state{text-align:center;padding:2rem;color:var(--text-muted);font-size:.9rem}

/* ═══════════════════════════
   Transaction Summary Bar
   ═══════════════════════════ */
.tx-summary{
    margin-top:1rem;padding:.8rem 1rem;
    background:var(--bg);border:1px solid var(--border);
    border-radius:var(--radius-sm);font-size:.82rem;
}
.tx-summary:empty{display:none}
.summary-section{
    display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
}
.summary-section + .summary-section{margin-top:.45rem;padding-top:.45rem;border-top:1px dashed var(--border)}
.sum-label{
    font-weight:500;color:var(--text-muted);font-size:.75rem;
    text-transform:uppercase;letter-spacing:.04em;min-width:3.5rem;
}
.sum-item{display:inline-flex;align-items:center;gap:.25rem}
.sum-item .sum-dot{
    width:8px;height:8px;border-radius:50%;flex-shrink:0;
}
.sum-dot.dot-income{background:var(--income)}
.sum-dot.dot-expense{background:var(--expense)}
.sum-val{font-family:var(--mono);font-weight:500}
.sum-val.income{color:var(--income)}
.sum-val.expense{color:var(--expense)}
.sum-val.net{color:var(--text)}
.sum-sep{color:var(--border);margin:0 .15rem}

/* ═══════════════════════════
   Modal
   ═══════════════════════════ */
.modal-overlay{
    display:none;position:fixed;inset:0;
    background:var(--modal-bg);z-index:200;
    align-items:center;justify-content:center;padding:1rem;
}
.modal-overlay.is-open{display:flex}

.modal{
    background:var(--surface);border:1px solid var(--border);
    border-radius:var(--radius);padding:1.5rem;
    width:100%;max-width:680px;max-height:90vh;overflow-y:auto;
    box-shadow:0 8px 40px rgba(0,0,0,.4);animation:fadeUp .25s ease;
}
.modal-sm{max-width:420px}

.modal-head{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:1.2rem;
}
.modal-head h3{font-family:var(--serif);font-size:1.1rem;font-weight:700}
.btn-close{
    background:none;border:none;color:var(--text-muted);font-size:1.4rem;
    cursor:pointer;line-height:1;padding:.2rem;transition:color var(--ease);
}
.btn-close:hover{color:var(--danger)}

.modal-actions{
    display:flex;justify-content:flex-end;gap:.6rem;margin-top:1.5rem;
}

/* ═══════════════════════════
   Tag Manager
   ═══════════════════════════ */
.tag-add-row{
    display:flex;gap:.5rem;margin-bottom:1rem;
}
.tag-add-row input{
    flex:1;padding:.45rem .7rem;background:var(--bg);
    border:1px solid var(--border);border-radius:var(--radius-sm);
    color:var(--text);font-family:var(--font);font-size:.85rem;outline:none;
}
.tag-add-row input:focus{border-color:var(--accent)}

.tag-list{list-style:none;max-height:350px;overflow-y:auto}
.tag-item{
    display:flex;align-items:center;justify-content:space-between;
    padding:.5rem .6rem;border-bottom:1px solid var(--border);
    transition:background var(--ease);
}
.tag-item:hover{background:var(--surface-alt)}
.tag-item:last-child{border-bottom:none}
.tag-name{font-size:.88rem;color:var(--text);flex:1}
.tag-count{
    font-size:.72rem;color:var(--text-muted);font-family:var(--font-mono);
    margin-right:.6rem;
}
.tag-actions{display:flex;gap:.3rem}
.tag-actions button{
    background:none;border:none;color:var(--text-muted);
    font-size:.78rem;cursor:pointer;padding:.2rem .4rem;
    border-radius:var(--radius-sm);transition:var(--ease);
}
.tag-actions button:hover{color:var(--accent);background:var(--accent-glow)}
.tag-actions .btn-del:hover{color:var(--danger);background:var(--expense-bg)}

/* ═══════════════════════════
   Responsive
   ═══════════════════════════ */
@media(max-width:768px){
    html{font-size:14px}
    .container{padding:1rem;gap:1rem}
    .card{padding:1.2rem}
    .form-row,.form-row-3,.form-row-2{flex-direction:column;gap:0}
    .table-responsive{display:none}
    .tx-cards{display:block}
    .chart-wrap{height:220px}
    .summary-row{grid-template-columns:repeat(2,1fr)}
    .card-head{flex-direction:column;align-items:flex-start}
    .toolbar{flex-direction:column;align-items:stretch}
    .filter-bar{flex-wrap:wrap}
    .export-btns{justify-content:flex-start}
    .form-actions{flex-direction:column;align-items:stretch}
    .shortcut-hint{display:none}
    .auth-card{padding:1.5rem}
    .modal{max-width:100%;margin:0 .5rem}
    .modal-actions{flex-direction:column}
    .modal-actions button{width:100%;text-align:center}
}
@media(min-width:769px){.tx-cards{display:none!important}}

/* ═══════════════════════════
   Animations
   ═══════════════════════════ */
@keyframes fadeUp{
    from{opacity:0;transform:translateY(12px)}
    to{opacity:1;transform:translateY(0)}
}
@keyframes slideIn{
    from{transform:translateX(120%);opacity:0}
    to{transform:translateX(0);opacity:1}
}
@keyframes fadeOut{
    from{opacity:1}to{opacity:0}
}

/* ═══════════════════════════════════════════════════
   统计分析 — 新增样式
   ═══════════════════════════════════════════════════ */

/* ── 统计选项卡 ── */
.stats-tabs{
    display:flex;gap:.2rem;flex-wrap:wrap;
}
.stats-tabs button{
    padding:.35rem .7rem;background:transparent;
    border:1px solid var(--border);border-radius:var(--radius-sm);
    color:var(--text-muted);font-family:var(--font);font-size:.78rem;
    cursor:pointer;transition:var(--ease);white-space:nowrap;
}
.stats-tabs button.active{
    background:var(--accent-glow);border-color:var(--accent);color:var(--accent);
}
.stats-tabs button:hover:not(.active){border-color:var(--text-muted);color:var(--text-sec)}

/* ── 面板工具栏 ── */
.stats-panel{animation:fadeUp .3s ease both}
.panel-toolbar{
    display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:1rem;
}
.date-range{
    display:flex;align-items:center;gap:.4rem;
}
.date-range input[type="date"]{
    padding:.3rem .5rem;background:var(--bg);
    border:1px solid var(--border);border-radius:var(--radius-sm);
    color:var(--text-sec);font-family:var(--font);font-size:.78rem;
    outline:none;transition:border-color var(--ease);
}
.date-range input[type="date"]:focus{border-color:var(--accent)}
.date-range span{color:var(--text-muted);font-size:.8rem}

/* ── 饼图类型切换 ── */
.pie-type-toggle{display:flex;gap:.4rem}
.pie-type-toggle .radio-pill input{display:none}
.pie-type-toggle .radio-pill span{
    display:block;padding:.35rem .65rem;border:1px solid var(--border);
    border-radius:var(--radius-sm);font-size:.8rem;font-weight:500;
    color:var(--text-sec);cursor:pointer;transition:var(--ease);
}
.pie-type-toggle .pill-expense input:checked+span{
    background:var(--expense-bg);border-color:var(--expense);color:var(--expense);
}
.pie-type-toggle .pill-income input:checked+span{
    background:var(--income-bg);border-color:var(--income);color:var(--income);
}

.panel-toolbar select{
    padding:.3rem 1.6rem .3rem .5rem;background:var(--bg);
    border:1px solid var(--border);border-radius:var(--radius-sm);
    color:var(--text-sec);font-family:var(--font);font-size:.78rem;
    cursor:pointer;outline:none;appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%238b919e' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right .4rem center;
}

/* ── 饼图对比布局 ── */
.pie-compare-wrap{
    display:flex;gap:1rem;
}
.chart-wrap-half{flex:1;min-width:0;height:280px}

.compare-summary{
    margin-top:1rem;
}
.compare-summary:empty{display:none}
.compare-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:1rem;
}
.compare-card{
    background:var(--bg);border:1px solid var(--border);
    border-radius:var(--radius-sm);padding:.8rem 1rem;
}
.compare-card h5{
    font-size:.75rem;color:var(--text-muted);margin-bottom:.5rem;
    font-weight:500;text-transform:uppercase;letter-spacing:.04em;
}
.compare-total{
    font-family:var(--mono);font-size:1.05rem;font-weight:500;margin-bottom:.4rem;
}
.compare-total.income{color:var(--income)}
.compare-total.expense{color:var(--expense)}
.compare-item{
    display:flex;justify-content:space-between;align-items:center;
    padding:.25rem 0;font-size:.8rem;
}
.compare-item-name{color:var(--text-sec);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.compare-item-val{font-family:var(--mono);color:var(--text);margin-left:.5rem;white-space:nowrap}
.compare-change{
    font-family:var(--mono);font-size:.75rem;margin-left:.4rem;white-space:nowrap;
}
.compare-change.up{color:var(--expense)}
.compare-change.down{color:var(--income)}
.compare-change.same{color:var(--text-muted)}

/* ── 走势图摘要 ── */
.trend-balance{
    font-family:var(--mono);font-size:1.2rem;font-weight:500;
}

/* ── 消费结构网格 ── */
.struct-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;
}
.struct-col{
    background:var(--bg);border:1px solid var(--border);
    border-radius:var(--radius-sm);padding:1rem;
}
.struct-col h4{
    font-size:.82rem;font-weight:500;color:var(--text-sec);
    margin-bottom:.8rem;
}
.chart-wrap-sm{height:240px}

/* ── 消费日历 ── */
.cal-title{
    font-family:var(--serif);font-size:1rem;font-weight:600;
    color:var(--text);min-width:7rem;text-align:center;
}

.calendar-grid{
    display:grid;grid-template-columns:repeat(7,1fr);gap:4px;
}
.cal-weekday{
    text-align:center;font-size:.7rem;font-weight:500;
    color:var(--text-muted);padding:.4rem 0;
    text-transform:uppercase;
}
.cal-cell{
    aspect-ratio:1;border-radius:var(--radius-sm);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    font-size:.7rem;position:relative;cursor:default;
    border:1px solid var(--border);transition:var(--ease);
    min-height:48px;
}
.cal-cell:hover{border-color:var(--text-muted)}
.cal-empty{background:transparent;border-color:transparent}
.cal-day{font-family:var(--mono);font-weight:500;color:var(--text-sec);font-size:.72rem}
.cal-amount{font-family:var(--mono);font-size:.65rem;margin-top:2px}
.cal-amount.has-data{font-weight:500}

.calendar-legend{
    display:flex;align-items:center;gap:4px;margin-top:.8rem;justify-content:center;
}
.legend-label{font-size:.7rem;color:var(--text-muted)}
.legend-cell{
    width:16px;height:16px;border-radius:3px;
}

/* ── 固定支出 ── */
.fixed-list{display:flex;flex-direction:column;gap:.6rem}
.fixed-list:empty::after{
    content:'未检测到固定支出';color:var(--text-muted);
    text-align:center;padding:2rem;font-size:.9rem;
}

.fixed-item{
    background:var(--bg);border:1px solid var(--border);
    border-radius:var(--radius-sm);padding:.85rem 1rem;
    display:flex;align-items:center;gap:1rem;
}
.fixed-item-main{flex:1;min-width:0}
.fixed-merchant{
    font-size:.9rem;font-weight:500;color:var(--text);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.fixed-meta{
    display:flex;gap:.8rem;margin-top:.3rem;flex-wrap:wrap;
}
.fixed-meta span{
    font-size:.72rem;color:var(--text-muted);font-family:var(--mono);
}
.fixed-amount{
    text-align:right;flex-shrink:0;
}
.fixed-avg{
    font-family:var(--mono);font-size:.95rem;font-weight:500;color:var(--expense);
}
.fixed-range{
    font-size:.7rem;color:var(--text-muted);font-family:var(--mono);
    margin-top:.15rem;
}
.fixed-months{
    display:inline-block;padding:.15rem .45rem;
    background:var(--accent-glow);color:var(--accent);
    border-radius:3px;font-size:.7rem;font-weight:500;
    font-family:var(--mono);
}

/* ── 响应式 ── */
@media(max-width:768px){
    .stats-tabs{gap:.15rem}
    .stats-tabs button{padding:.3rem .5rem;font-size:.72rem}
    .panel-toolbar{flex-direction:column;align-items:flex-start}
    .pie-compare-wrap{flex-direction:column}
    .chart-wrap-half{height:240px}
    .struct-grid{grid-template-columns:1fr}
    .chart-wrap-sm{height:220px}
    .calendar-grid{gap:2px}
    .cal-cell{min-height:36px}
    .cal-amount{font-size:.58rem}
    .fixed-item{flex-direction:column;align-items:flex-start}
    .fixed-amount{text-align:left}
    .compare-grid{grid-template-columns:1fr}
}
/* ═══════════════════════════════════════════════════
   转账类型支持
   ═══════════════════════════════════════════════════ */

:root,
[data-theme="dark"] {
    --transfer:    #3b82f6;
    --transfer-bg: rgba(59,130,246,.08);
}

[data-theme="light"] {
    --transfer:    #2563eb;
    --transfer-bg: rgba(37,99,235,.06);
}

/* ── 类型切换：转账按钮 ── */
.pill-transfer input:checked+span{
    background:var(--transfer-bg);border-color:var(--transfer);color:var(--transfer);
}

/* ── 根据交易类型显隐字段 ── */
.form-card[data-tx-type="expense"] .transfer-only,
.form-card[data-tx-type="income"]  .transfer-only{
    display:none;
}
.form-card[data-tx-type="transfer"] .income-expense-only{
    display:none;
}
.form-card[data-tx-type="transfer"] #submitBtn{
    background:var(--transfer);
}
.form-card[data-tx-type="transfer"] #submitBtn:hover{
    background:#2563eb;
}

/* ── 编辑弹窗类型显隐 ── */
#editModal[data-edit-type="expense"] .edit-transfer-only,
#editModal[data-edit-type="income"]  .edit-transfer-only{
    display:none;
}
#editModal[data-edit-type="transfer"] .edit-income-expense-only{
    display:none;
}

/* ── 交易表格中的转账行 ── */
.type-badge.transfer{background:var(--transfer-bg);color:var(--transfer)}
.col-amount.transfer{color:var(--transfer)}

/* ── 转账卡片 ── */
.tx-card-amount.transfer{color:var(--transfer)}

/* ── 响应式：编辑弹窗转账字段 ── */
@media(max-width:768px){
    .edit-transfer-only .form-row{flex-direction:column;gap:0}
    .pie-type-toggle{flex-wrap:wrap}
}