/* ==========================================================================
   订阅账单自动扣费审计 · 独立设计「年度账单驾驶舱」
   --------------------------------------------------------------------------
   设计概念：把一年被自动扣的钱做成一块仪表盘——四个 KPI 大数 + 一条分类占比条，
   下面是账目明细表与取消路径速查表，读完就知道该退哪几笔。
   配色：薄荷灰 + 翡翠绿 + 琥珀金 + 砖红，安静但有数字感。
   所有规则限定在 .tsk.sba 作用域内。
   ========================================================================== */

.tsk.sba {
    --bg: #edf3f0;
    --bg-2: #e2ece7;
    --card: #ffffff;
    --card-2: #f4f8f6;
    --ink: #10201b;
    --ink-2: #4b605a;
    --faint: #859a93;
    --line: #d9e5df;
    --line-2: #e8f0ec;
    --line-3: #bcd0c8;

    --pri: #0f6b52;
    --pri-2: #109c78;
    --pri-soft: #dff0e9;
    --pri-ink: #0b5540;

    --gold: #a8720f;
    --gold-soft: #f9efd9;
    --danger: #b23b3b;
    --danger-soft: #f9e5e3;
    --info: #1f6a86;
    --info-soft: #e0eef4;
    --violet: #6b4bb5;
    --violet-soft: #ece7fa;

    --shadow-sm: 0 1px 2px rgba(16, 32, 27, .05), 0 6px 16px rgba(16, 32, 27, .05);
    --shadow: 0 2px 6px rgba(16, 32, 27, .07), 0 20px 46px rgba(16, 32, 27, .10);
    --r: 16px;
    --r-sm: 10px;
    --num: "Bahnschrift", "Segoe UI Variable Text", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    background:
        radial-gradient(880px 400px at 4% -8%, rgba(15, 107, 82, .11), transparent 60%),
        radial-gradient(700px 360px at 100% 0%, rgba(168, 114, 15, .07), transparent 58%),
        var(--bg);
    color: var(--ink);
    font-size: 15.5px;
    line-height: 1.85;
    overflow-x: clip;
}
:root[data-theme="dark"] .tsk.sba {
    --bg: #07110d;
    --bg-2: #0c1713;
    --card: #0f1b17;
    --card-2: #142320;
    --ink: #e8f2ee;
    --ink-2: #a6bcb4;
    --faint: #75897f;
    --line: #22332d;
    --line-2: #1a2823;
    --line-3: #334a41;

    --pri: #4fd6a8;
    --pri-2: #6ee7c0;
    --pri-soft: rgba(79, 214, 168, .13);
    --pri-ink: #86e8c2;

    --gold: #e7b45f;
    --gold-soft: rgba(231, 180, 95, .13);
    --danger: #f08b84;
    --danger-soft: rgba(240, 139, 132, .13);
    --info: #62bfdc;
    --info-soft: rgba(98, 191, 220, .13);
    --violet: #b49bf0;
    --violet-soft: rgba(180, 155, 240, .13);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 16px rgba(0, 0, 0, .3);
    --shadow: 0 2px 6px rgba(0, 0, 0, .55), 0 20px 46px rgba(0, 0, 0, .38);
}

.sba-wrap { max-width: 1340px; margin: 0 auto; padding: 0 28px 70px; }
.sba-wrap * { box-sizing: border-box; }
.sba-wrap p { margin: 0; }
.sba-wrap b, .sba-wrap strong { color: var(--ink); font-weight: 750; }

/* ---------------- 首屏 ---------------- */
.sba-hero { padding: 28px 0 20px; max-width: 860px; }
.sba-kicker {
    display: inline-flex; align-items: center; gap: 9px;
    background: var(--card);
    border: 1px solid var(--line-3);
    border-radius: 999px;
    padding: 7px 16px;
    box-shadow: var(--shadow-sm);
    font: 700 11.5px/1 var(--num);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pri-ink);
}
.sba-kicker i {
    width: 22px; height: 22px; border-radius: 7px;
    background: var(--pri-soft);
    display: inline-grid; place-items: center;
    font: 800 13px/1 var(--num);
    color: var(--pri-ink);
    font-style: normal;
}
.sba-kicker i::before { content: "¥"; }
.sba-hero h1 {
    margin: 15px 0 0;
    font-size: clamp(26px, 3.9vw, 39px);
    line-height: 1.24;
    font-weight: 800;
    letter-spacing: -.015em;
}
.sba-hero h1 em { font-style: normal; color: var(--pri-ink); }
.sba-lead {
    margin-top: 13px;
    font-size: 16px;
    line-height: 1.95;
    color: var(--ink-2);
}
.sba-lead b { color: var(--pri-ink); }

/* ---------------- 驾驶舱 ---------------- */
.sba-dash {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 372px;
    gap: 20px;
    align-items: start;
    margin-top: 6px;
}
.sba-board {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    padding: 22px 24px 24px;
}
.sba-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.sba-kpi {
    background: var(--card-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 14px 16px 13px;
    position: relative;
    overflow: hidden;
}
.sba-kpi::after {
    content: "";
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--pri);
}
.sba-kpi.warn::after { background: var(--danger); }
.sba-kpi.good::after { background: var(--gold); }
.sba-kpi .k { font-size: 12px; font-weight: 750; color: var(--faint); letter-spacing: .03em; }
.sba-kpi .v {
    font: 800 clamp(24px, 3vw, 32px)/1.15 var(--num);
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    margin-top: 4px;
    letter-spacing: -.02em;
}
.sba-kpi .v small { font-size: .48em; font-weight: 700; color: var(--faint); margin-left: 3px; }
.sba-kpi .s { font-size: 12px; color: var(--ink-2); line-height: 1.7; margin-top: 3px; }
.sba-kpi.warn .v { color: var(--danger); }
.sba-kpi.good .v { color: var(--gold); }

.sba-split { margin-top: 20px; }
.sba-split-hd {
    display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; flex-wrap: wrap;
}
.sba-split-hd h3 { margin: 0; font-size: 14.5px; font-weight: 800; }
.sba-split-hd span { font-size: 12.5px; color: var(--faint); }
.sba-bar {
    display: flex;
    height: 30px;
    border-radius: 9px;
    overflow: hidden;
    background: var(--card-2);
    border: 1px solid var(--line);
}
.sba-bar i {
    display: block;
    height: 100%;
    transition: width .3s;
    min-width: 0;
}
.sba-legend {
    display: flex; flex-wrap: wrap; gap: 8px 16px;
    margin-top: 12px;
}
.sba-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); }
.sba-legend i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.sba-legend b { font-family: var(--num); font-variant-numeric: tabular-nums; }
.sba-hint {
    margin-top: 16px;
    font-size: 13px;
    line-height: 1.8;
    color: var(--ink-2);
    background: var(--pri-soft);
    border-left: 3px solid var(--pri);
    border-radius: var(--r-sm);
    padding: 11px 14px;
}
.sba-hint b { color: var(--pri-ink); }

/* ---------------- 录入卡 ---------------- */
.sba-add {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    padding: 18px 20px 20px;
}
.sba-add > h3 { margin: 0 0 4px; font-size: 15.5px; font-weight: 800; }
.sba-add > .s { font-size: 12.5px; color: var(--faint); margin-bottom: 14px; }
.sba-f { margin-bottom: 11px; }
.sba-f > label {
    display: block; font-size: 12.5px; font-weight: 750;
    color: var(--ink-2); margin-bottom: 5px;
}
.sba-f input, .sba-f select {
    width: 100%;
    border: 1.5px solid var(--line-3);
    border-radius: var(--r-sm);
    background: var(--card-2);
    color: var(--ink);
    font: 600 14.5px/1.5 var(--num);
    padding: 9px 12px;
    outline: none;
    transition: .15s;
}
.sba-f input:focus, .sba-f select:focus {
    border-color: var(--pri); background: var(--card);
    box-shadow: 0 0 0 3px var(--pri-soft);
}
.sba-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ---------------- 按钮 ---------------- */
.sba-btn {
    border: 1.5px solid var(--line-3);
    background: var(--card-2);
    color: var(--ink-2);
    border-radius: var(--r-sm);
    padding: 10px 17px;
    font: 700 13.5px/1.4 inherit;
    cursor: pointer;
    transition: .16s;
    display: inline-flex; align-items: center; gap: 7px;
}
.sba-btn:hover { border-color: var(--pri); color: var(--pri-ink); }
.sba-btn:focus-visible { outline: 3px solid var(--pri-soft); outline-offset: 2px; }
.sba-btn.pri {
    background: linear-gradient(135deg, var(--pri), var(--pri-2));
    border-color: transparent; color: #fff;
    box-shadow: 0 8px 18px rgba(15, 107, 82, .26);
}
.sba-btn.pri:hover { color: #fff; filter: brightness(1.07); }
:root[data-theme="dark"] .sba-btn.pri { color: #07110d; }
:root[data-theme="dark"] .sba-btn.pri:hover { color: #07110d; }
.sba-btn.block { width: 100%; justify-content: center; }
.sba-btn.sm { padding: 6px 12px; font-size: 12.5px; border-radius: 8px; }

/* ---------------- 账目表 ---------------- */
.sba-card {
    margin-top: 20px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.sba-card > header {
    display: flex; align-items: center; gap: 10px;
    padding: 15px 20px;
    background: var(--card-2);
    border-bottom: 1px solid var(--line-2);
    flex-wrap: wrap;
}
.sba-card > header h2 { margin: 0; font-size: 15.5px; font-weight: 800; }
.sba-card > header .en {
    margin-left: auto;
    font: 700 10.5px/1 var(--num); letter-spacing: .18em;
    color: var(--faint); text-transform: uppercase;
}
.sba-card > header .note { font-size: 12.5px; color: var(--faint); }
.sba-card .body { padding: 18px 20px 20px; }
.sba-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sba-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 720px; }
.sba-table th {
    text-align: left; font-size: 11.5px; font-weight: 800;
    letter-spacing: .04em; color: var(--faint);
    padding: 0 12px 9px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.sba-table th.num, .sba-table td.num { text-align: right; font-family: var(--num); font-variant-numeric: tabular-nums; }
.sba-table td {
    padding: 11px 12px; border-bottom: 1px solid var(--line-2);
    color: var(--ink-2); line-height: 1.7; vertical-align: middle;
}
.sba-table td:first-child { font-weight: 750; color: var(--ink); }
.sba-table tr:last-child td { border-bottom: 0; }
.sba-table .catbar {
    display: inline-block; width: 4px; height: 20px;
    border-radius: 3px; vertical-align: middle; margin-right: 8px;
}
.sba-pill {
    display: inline-block; border-radius: 999px; padding: 3px 10px;
    font: 700 11.5px/1.6 inherit; white-space: nowrap;
}
.sba-pill.active { background: var(--ok, var(--pri-soft)); background: var(--pri-soft); color: var(--pri-ink); }
.sba-pill.sometimes { background: var(--gold-soft); color: var(--gold); }
.sba-pill.idle { background: var(--danger-soft); color: var(--danger); }
.sba-tip { font-size: 12.5px; color: var(--ink-2); }
.sba-del {
    border: 1px solid var(--line); background: var(--card); color: var(--faint);
    width: 26px; height: 26px; border-radius: 7px; cursor: pointer; font-size: 13px; line-height: 1;
}
.sba-del:hover { border-color: var(--danger); color: var(--danger); }
.sba-empty {
    text-align: center; padding: 34px 14px; color: var(--faint);
    font-size: 13.5px; border: 1px dashed var(--line-3); border-radius: var(--r-sm);
}
.sba-empty .ic { font-size: 28px; display: block; margin-bottom: 7px; }

/* ---------------- 取消路径表 ---------------- */
.sba-cancel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
    gap: 12px;
}
.sba-cancel {
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--card-2);
    padding: 14px 16px;
}
.sba-cancel h4 {
    margin: 0 0 6px; font-size: 14px; font-weight: 800;
    display: flex; align-items: center; gap: 7px;
}
.sba-cancel h4 i { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.sba-cancel p { font-size: 12.5px; color: var(--ink-2); line-height: 1.8; }
.sba-cancel .path {
    display: block; margin-top: 8px;
    font: 700 12px/1.7 var(--num);
    color: var(--pri-ink);
    background: var(--pri-soft);
    border-radius: 7px;
    padding: 6px 9px;
    word-break: break-word;
}
.sba-out {
    margin-top: 14px;
    background: var(--card-2); border: 1px solid var(--line);
    border-radius: var(--r-sm); padding: 14px 16px;
    font-size: 13.5px; line-height: 1.85; color: var(--ink-2);
    white-space: pre-wrap; word-break: break-word;
    max-height: 340px; overflow: auto; font-family: var(--num);
}
.sba-foot { margin-top: 26px; font-size: 12.5px; color: var(--faint); text-align: center; line-height: 1.9; }

/* ---------------- 响应式 ---------------- */
@media (max-width: 1080px) {
    .sba-dash { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .sba-wrap { padding: 0 16px 52px; }
    .sba-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sba-row2 { grid-template-columns: 1fr; }
    .sba-card > header .en { display: none; }
}