:root {
      color-scheme: dark;
      --bg: #0b1020;
      --panel: rgba(19, 27, 51, .82);
      --panel-2: rgba(30, 41, 72, .78);
      --text: #eef4ff;
      --muted: #9aa8c7;
      --line: rgba(255,255,255,.1);
      --green: #58d68d;
      --red: #ff7b7b;
      --blue: #7aa7ff;
      --yellow: #ffd166;
      --shadow: 0 24px 80px rgba(0,0,0,.38);
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      min-height: 100vh;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at 15% 10%, rgba(83, 120, 255, .36), transparent 34rem),
        radial-gradient(circle at 88% 0%, rgba(45, 212, 191, .20), transparent 30rem),
        linear-gradient(135deg, #080b16 0%, #111831 48%, #0b1020 100%);
    }
    .wrap { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 42px 0; }
    .hero { display: flex; justify-content: space-between; gap: 24px; align-items: flex-end; margin-bottom: 22px; }
    .hero-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
    .eyebrow { color: var(--blue); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: 12px; }
    h1 { margin: 8px 0 8px; font-size: clamp(32px, 5vw, 58px); line-height: 1; }
    h2 { margin: 6px 0 0; font-size: clamp(26px, 4vw, 38px); line-height: 1; }
    .subtitle { color: var(--muted); margin: 0; max-width: 680px; font-size: 16px; }
    .status { padding: 12px 16px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.06); color: var(--muted); white-space: nowrap; }
    .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow); backdrop-filter: blur(18px); }
    .filters { display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)) auto auto auto; gap: 14px; padding: 18px; align-items: end; margin-bottom: 18px; }
    label { display: grid; gap: 8px; color: var(--muted); font-size: 13px; font-weight: 650; }
    input[type="date"], input[type="text"], input[type="password"], select {
      appearance: none;
      width: 100%;
      padding: 13px 14px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.13);
      background: rgba(255,255,255,.07);
      color: var(--text);
      font: inherit;
      outline: none;
    }
    input[type="date"]:focus, input[type="text"]:focus, input[type="password"]:focus, select:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(122,167,255,.16); }
    select option { background: #111831; color: var(--text); }
    .merchant-filter { display: grid; gap: 8px; position: relative; }
    .merchant-title { color: var(--muted); font-size: 13px; font-weight: 650; }
    .merchant-options { display: none; flex-wrap: wrap; gap: 8px; position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; right: 0; max-height: 220px; overflow-y: auto; padding: 12px; border: 1px solid var(--line); border-radius: 18px; background: rgba(19, 27, 51, .98); box-shadow: var(--shadow); }
    .merchant-filter.open .merchant-options { display: flex; }
    .merchant-option { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.05); color: var(--muted); font-size: 12px; font-weight: 750; cursor: pointer; }
    .merchant-option input { accent-color: var(--blue); }
    .merchant-option span { color: var(--text); }
    .filter-hint { grid-column: 1 / -1; color: var(--muted); margin-top: 8px; font-size: 12px; }
    button {
      border: 0;
      color: var(--text);
      background: linear-gradient(135deg, #4f7cff, #23c6d3);
      padding: 14px 18px;
      border-radius: 16px;
      font: inherit;
      font-weight: 800;
      cursor: pointer;
      box-shadow: 0 10px 30px rgba(69, 126, 255, .25);
    }
    button.secondary { background: rgba(255,255,255,.08); box-shadow: none; border: 1px solid var(--line); color: var(--muted); }
    a.nav-button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 12px 16px; border-radius: 16px; text-decoration: none; font-weight: 800; }
    a.nav-button.secondary { background: rgba(255,255,255,.08); box-shadow: none; border: 1px solid var(--line); color: var(--muted); }
    button:disabled { cursor: wait; opacity: .72; transform: none; }
    button:hover { transform: translateY(-1px); }
    .logout-button { padding: 12px 16px; }
    .profile-switch { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 6px 0 14px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.08); color: var(--muted); font-weight: 800; }
    .profile-switch span { font-size: 13px; }
    .profile-switch select { min-height: 34px; padding: 6px 10px; border-radius: 12px; border: 1px solid var(--line); background: rgba(19, 27, 51, .98); color: var(--text); font: inherit; font-weight: 800; cursor: pointer; }
    .cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
    .export-menu { position: relative; }
    .export-options { display: none; position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 220px; padding: 10px; border: 1px solid var(--line); border-radius: 18px; background: rgba(19, 27, 51, .98); box-shadow: var(--shadow); }
    .export-menu.open .export-options { display: grid; gap: 8px; }
    .export-options button { width: 100%; text-align: left; padding: 11px 13px; }
    .status-details { padding: 0 20px 14px; color: var(--muted); font-size: 12px; line-height: 1.55; }
    .bottom-status { padding: 12px 4px 0; }
    .card { padding: 18px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 24px; }
    .card .label { color: var(--muted); font-size: 13px; margin-bottom: 10px; }
    .card .value { font-size: 24px; font-weight: 850; letter-spacing: -.02em; }
    .card .hint { color: var(--muted); margin-top: 8px; font-size: 12px; }
    .card-detail { color: var(--muted); margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.07); font-size: 11px; line-height: 1.45; }
    .analytics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
    .analytics-card { padding: 18px; }
    .analytics-card.chart-card { grid-column: span 1; }
    .analytics-card.wide { grid-column: span 2; }
    .analytics-card h2 { margin-bottom: 14px; font-size: 20px; }
    .analytics-head { display: flex; justify-content: space-between; gap: 14px; align-items: start; margin-bottom: 16px; }
    .analytics-head h2 { margin-bottom: 6px; }
    .analytics-head select { width: min(240px, 100%); }
    .analytics-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
    .analytics-metrics div { display: grid; gap: 6px; padding: 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 18px; background: rgba(255,255,255,.045); }
    .analytics-metrics span, .analytics-metrics em { color: var(--muted); font-size: 12px; font-style: normal; }
    .analytics-metrics strong { font-size: 18px; letter-spacing: -.02em; }
    .analytics-list { display: grid; gap: 10px; }
    .analytics-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: baseline; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.07); }
    .analytics-row:last-child { padding-bottom: 0; border-bottom: 0; }
    .analytics-row span { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .analytics-row strong { font-size: 14px; white-space: nowrap; }
    .analytics-row em { color: var(--muted); font-style: normal; font-size: 11px; white-space: nowrap; }
    .analytics-note { color: var(--muted); line-height: 1.5; }
    .analytics-note.positive, .positive { color: var(--green); }
    .analytics-note.negative, .negative { color: var(--red); }
    .chart-list { display: grid; gap: 14px; }
    .chart-row { display: grid; gap: 7px; padding-bottom: 13px; border-bottom: 1px solid rgba(255,255,255,.07); }
    .chart-row:last-child { padding-bottom: 0; border-bottom: 0; }
    .chart-head, .chart-meta { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
    .chart-head span { color: var(--text); font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .chart-head strong { font-size: 14px; white-space: nowrap; }
    .chart-track { height: 12px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); }
    .chart-fill { width: var(--chart-width); height: 100%; border-radius: inherit; background: var(--chart-color); background: linear-gradient(90deg, var(--chart-color), color-mix(in srgb, var(--chart-color) 58%, white)); box-shadow: 0 0 18px rgba(122,167,255,.18); box-shadow: 0 0 22px color-mix(in srgb, var(--chart-color) 45%, transparent); }
    .chart-meta { color: var(--muted); font-size: 11px; }
    .chart-meta em { font-style: normal; white-space: nowrap; }
    .pie-layout { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 18px; align-items: center; }
    .pie-chart { display: grid; place-items: center; width: 180px; height: 180px; border-radius: 50%; box-shadow: inset 0 0 0 20px rgba(13, 20, 39, .94), 0 18px 45px rgba(0,0,0,.22); }
    .pie-chart span { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: rgba(13, 20, 39, .96); color: var(--muted); font-weight: 850; }
    .pie-legend { display: grid; gap: 10px; min-width: 0; }
    .pie-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.07); }
    .pie-row:last-child { padding-bottom: 0; border-bottom: 0; }
    .pie-dot { width: 11px; height: 11px; margin-top: 4px; border-radius: 50%; background: var(--chart-color); box-shadow: 0 0 18px color-mix(in srgb, var(--chart-color) 55%, transparent); }
    .pie-row strong { display: block; overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }
    .pie-row em { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; font-style: normal; }
    .month-bars { display: grid; grid-template-columns: repeat(12, minmax(28px, 1fr)); gap: 10px; align-items: end; min-height: 190px; padding-top: 8px; }
    .month-bar { display: grid; grid-template-rows: 1fr auto; gap: 8px; align-items: end; height: 180px; color: var(--muted); font-size: 11px; text-align: center; }
    .month-bar-fill { align-self: end; min-height: 5px; border-radius: 999px 999px 6px 6px; background: linear-gradient(180deg, #7aa7ff, #23c6d3); box-shadow: 0 0 22px rgba(122,167,255,.22); }
    .analysis-wrap { max-width: 760px; }
    .finance-analysis { display: grid; gap: 20px; padding: clamp(18px, 4vw, 28px); }
    .analysis-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 5px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.05); }
    .analysis-tabs button { padding: 12px 14px; border-radius: 15px; background: transparent; box-shadow: none; color: var(--muted); }
    .analysis-tabs button.active { background: linear-gradient(135deg, #4f7cff, #23c6d3); color: var(--text); box-shadow: 0 10px 30px rgba(69, 126, 255, .22); }
    .analysis-total { display: grid; gap: 6px; justify-items: center; text-align: center; }
    .analysis-total span, .analysis-section-title { color: var(--muted); font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
    .analysis-total strong { font-size: clamp(28px, 8vw, 46px); letter-spacing: -.04em; }
    .analysis-amount { display: grid; gap: 3px; justify-items: end; text-align: right; }
    .analysis-total .analysis-amount { justify-items: center; text-align: center; }
    .analysis-amount .analysis-subamount,
    .analysis-total .analysis-amount .analysis-subamount,
    .analysis-category summary .analysis-amount .analysis-subamount,
    .analysis-purchase .analysis-amount .analysis-subamount { color: var(--muted); font-size: 11px; font-weight: 750; white-space: nowrap; letter-spacing: normal; text-transform: none; }
    .analysis-chart-block { display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; gap: 12px; align-items: center; }
    button.month-arrow { position: relative; display: grid; place-items: center; width: 42px; height: 58px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--muted); font-size: 0; line-height: 1; }
    button.month-arrow::before { content: ""; width: 14px; height: 14px; border: solid currentColor; border-width: 1.5px 1.5px 0 0; transform: rotate(225deg); }
    button.month-arrow:last-child::before { transform: rotate(45deg); }
    button.month-arrow:hover { background: none; color: var(--text); transform: none; }
    button.month-arrow:disabled { cursor: default; opacity: .24; }
    button.month-arrow:disabled:hover { color: var(--muted); transform: none; }
    .analysis-donut-wrap { display: grid; place-items: center; min-height: 280px; }
    .analysis-donut { display: grid; place-items: center; width: min(280px, 72vw); aspect-ratio: 1; border-radius: 50%; box-shadow: 0 22px 62px rgba(0,0,0,.28); }
    .analysis-donut span { display: grid; place-items: center; width: 132px; height: 132px; border-radius: 50%; background: rgba(13, 20, 39, .96); color: var(--text); font-size: 20px; font-weight: 900; text-align: center; }
    .analysis-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .analysis-legend-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px; align-items: start; padding: 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; background: rgba(255,255,255,.04); }
    .analysis-legend-row strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
    .analysis-legend-row em { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; font-style: normal; }
    .analysis-categories { display: grid; gap: 10px; }
    .analysis-category { border: 1px solid rgba(255,255,255,.08); border-radius: 18px; background: rgba(255,255,255,.045); overflow: hidden; }
    .analysis-category summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 15px 16px; cursor: pointer; list-style: none; }
    .analysis-category summary::-webkit-details-marker { display: none; }
    .analysis-category summary div { display: grid; gap: 4px; min-width: 0; }
    .analysis-category summary .analysis-category-title { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; }
    .analysis-category-title .pie-dot { margin-top: 5px; }
    .analysis-category summary strong:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .analysis-category summary span { color: var(--muted); font-size: 12px; }
    .analysis-category summary > .analysis-amount strong { white-space: nowrap; font-size: 15px; }
    .analysis-group-toggle { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 0 16px 12px; color: var(--muted); font-size: 12px; font-weight: 800; }
    .switch { position: relative; display: inline-flex; width: 44px; height: 24px; }
    .switch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
    .switch span { width: 100%; border-radius: 999px; background: rgba(255,255,255,.11); border: 1px solid var(--line); transition: background .15s ease, border-color .15s ease; }
    .switch span::before { content: ""; position: absolute; top: 4px; left: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transition: transform .15s ease, background .15s ease; }
    .switch input:checked + span { background: rgba(122, 167, 255, .24); border-color: rgba(122, 167, 255, .5); }
    .switch input:checked + span::before { transform: translateX(20px); background: var(--blue); }
    .analysis-purchases { display: grid; gap: 8px; padding: 0 16px 14px; }
    .analysis-purchase { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.07); }
    .analysis-purchase div { display: grid; gap: 3px; min-width: 0; }
    .analysis-purchase strong:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
    .analysis-purchase span { color: var(--muted); font-size: 11px; }
    .analysis-purchase > .analysis-amount strong { white-space: nowrap; font-size: 13px; }
    .analysis-empty { padding: 20px; text-align: center; }
    .goal { display: grid; gap: 8px; margin-top: 14px; }
    .goal-row { display: grid; gap: 8px; }
    .goal-field { position: relative; display: flex; align-items: center; }
    .goal input { width: 100%; padding: 10px 42px 10px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.13); background: rgba(255,255,255,.07); color: var(--text); font: inherit; font-weight: 800; outline: none; }
    .goal input:disabled { opacity: 1; cursor: default; }
    .goal input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(122,167,255,.16); }
    .goal-action { position: absolute; right: 7px; top: 50%; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border-radius: 9px; border: 0; background: transparent; box-shadow: none; color: var(--muted); font-size: 16px; line-height: 1; transform: translateY(-50%); }
    .goal-action:hover { transform: translateY(-50%); background: rgba(255,255,255,.08); color: var(--text); }
    .goal-action:disabled { cursor: default; opacity: .75; }
    .remaining.positive { color: var(--green); }
    .remaining.negative { color: var(--red); }
    .merchant-management { margin-bottom: 18px; overflow: hidden; }
    .merchant-management-summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 18px 20px; color: var(--muted); cursor: pointer; user-select: none; }
    .merchant-management-summary strong { color: var(--text); }
    .merchant-management-summary::-webkit-details-marker { display: none; }
    .merchant-management-summary::before { content: "▸"; color: var(--blue); transition: transform .15s ease; }
    .merchant-management[open] .merchant-management-summary::before { transform: rotate(90deg); }
    .merchant-manage-grid { display: grid; grid-template-columns: 1.2fr 1.2fr 1fr auto auto; gap: 14px; align-items: end; padding: 18px; }
    .check-row { display: flex; gap: 9px; align-items: center; min-height: 48px; }
    .check-row input { accent-color: var(--blue); }
    .category-manager { display: grid; gap: 14px; padding: 18px; border-top: 1px solid rgba(255,255,255,.07); background: linear-gradient(135deg, rgba(122, 167, 255, .07), rgba(35, 198, 211, .04)); }
    .category-manager-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .75fr); gap: 14px; align-items: end; }
    .category-manager-head strong { display: block; margin-bottom: 6px; color: var(--text); font-size: 16px; }
    .category-add { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
    .category-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .category-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px; border: 1px solid rgba(255,255,255,.09); border-radius: 18px; background: rgba(255,255,255,.045); }
    .category-marker { width: 10px; height: 34px; border-radius: 999px; background: linear-gradient(180deg, #7aa7ff, #23c6d3); box-shadow: 0 0 22px rgba(122, 167, 255, .24); }
    .category-field input { padding: 10px 42px 10px 12px; border-radius: 12px; font-weight: 800; }
    .category-field input:disabled { opacity: 1; cursor: default; }
    .category-actions { display: flex; gap: 8px; }
    .category-actions button { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border-radius: 12px; font-size: 17px; line-height: 1; white-space: nowrap; }
    button.danger { color: var(--red); border-color: rgba(255, 123, 123, .28); background: rgba(255, 123, 123, .09); }
    button.danger:disabled { color: var(--muted); border-color: var(--line); background: rgba(255,255,255,.06); }
    .category-status { min-height: 18px; font-size: 12px; }
    .table-panel { overflow: hidden; }
    .table-top { display: flex; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); color: var(--muted); }
    table { width: 100%; border-collapse: collapse; }
    th, td { padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.07); text-align: left; vertical-align: top; }
    th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; background: rgba(255,255,255,.03); }
    tbody tr:hover { background: rgba(255,255,255,.04); }
    .badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; }
    .payment { background: rgba(255, 123, 123, .14); color: var(--red); }
    .topup { background: rgba(88, 214, 141, .14); color: var(--green); }
    .refund { background: rgba(255, 209, 102, .14); color: var(--yellow); }
    .withdrawal { background: rgba(255, 123, 123, .14); color: var(--red); }
    .exchange { background: rgba(122, 167, 255, .14); color: var(--blue); }
    .amount { font-weight: 850; white-space: nowrap; }
    .balance-delta { font-weight: 850; white-space: nowrap; }
    .subamount { color: var(--muted); font-size: 12px; font-weight: 700; margin-top: 4px; }
    .category-pill { display: inline-flex; padding: 5px 9px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.05); color: var(--muted); font-size: 12px; font-weight: 750; white-space: nowrap; }
    .expense { color: var(--red); }
    .income { color: var(--green); }
    .muted { color: var(--muted); }
    .empty { padding: 48px 20px; text-align: center; color: var(--muted); }
    .pagination { display: flex; justify-content: center; align-items: center; gap: 14px; padding: 16px 20px; border-top: 1px solid var(--line); }
    .pagination[hidden] { display: none; }
    .pagination button { min-width: 104px; padding: 11px 15px; }
    .pagination button:disabled { opacity: .45; cursor: default; }
    .login-body { display: grid; place-items: center; padding: 28px; overflow-x: hidden; }
    .login-shell { width: min(1080px, 100%); min-height: min(720px, calc(100vh - 56px)); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr); gap: 22px; align-items: stretch; }
    .login-visual { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 560px; padding: clamp(28px, 5vw, 54px); border: 1px solid var(--line); border-radius: 36px; overflow: hidden; background: linear-gradient(145deg, rgba(29, 43, 84, .62), rgba(13, 19, 38, .72)); box-shadow: var(--shadow); }
    .login-visual::before { content: ""; position: absolute; inset: 1px; border-radius: 35px; background: radial-gradient(circle at 24% 20%, rgba(122, 167, 255, .22), transparent 28rem), radial-gradient(circle at 72% 76%, rgba(45, 212, 191, .18), transparent 24rem); pointer-events: none; }
    .login-brand, .login-stats { position: relative; z-index: 1; }
    .login-brand h1 { max-width: 620px; margin-top: 12px; }
    .login-orb { position: absolute; border-radius: 999px; filter: blur(2px); opacity: .75; }
    .login-orb-one { width: 260px; height: 260px; right: -84px; top: -70px; background: radial-gradient(circle, rgba(122, 167, 255, .58), rgba(122, 167, 255, 0) 70%); }
    .login-orb-two { width: 220px; height: 220px; left: 10%; bottom: 10%; background: radial-gradient(circle, rgba(45, 212, 191, .34), rgba(45, 212, 191, 0) 70%); }
    .login-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .login-stats article { padding: 18px; border: 1px solid var(--line); border-radius: 22px; background: rgba(255,255,255,.06); backdrop-filter: blur(14px); }
    .login-stats span { display: block; color: var(--blue); font-size: 12px; font-weight: 850; letter-spacing: .14em; margin-bottom: 8px; }
    .login-stats strong { display: block; font-size: 18px; }
    .login-card { align-self: center; padding: clamp(24px, 4vw, 36px); }
    .login-card-top { display: flex; gap: 16px; align-items: center; margin-bottom: 28px; }
    .login-icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 20px; background: linear-gradient(135deg, #4f7cff, #23c6d3); color: white; font-size: 34px; font-weight: 900; box-shadow: 0 18px 38px rgba(69, 126, 255, .28); }
    .login-form { display: grid; gap: 16px; }
    .password-field { position: relative; display: flex; align-items: center; }
    .password-field input { padding-right: 104px; }
    .ghost-button { position: absolute; right: 7px; width: auto; padding: 9px 11px; border-radius: 12px; background: rgba(255,255,255,.08); border: 1px solid var(--line); box-shadow: none; color: var(--muted); font-size: 12px; }
    .ghost-button:hover { color: var(--text); }
    .login-error { padding: 12px 14px; border: 1px solid rgba(255, 123, 123, .28); border-radius: 14px; background: rgba(255, 123, 123, .12); color: var(--red); font-weight: 750; }
    @media (min-width: 701px) {
      th:nth-child(2), td:nth-child(2) { width: 92px; padding-left: 12px; padding-right: 12px; }
      th:nth-child(6), td:nth-child(6) { width: 156px; min-width: 156px; white-space: nowrap; }
    }
    @media (max-width: 900px) {
      .hero { display: block; }
      .hero-actions { justify-content: flex-start; margin-top: 18px; }
      .status { display: inline-block; }
      .filters { grid-template-columns: 1fr 1fr; }
      .cards { grid-template-columns: 1fr 1fr; }
      .analytics { grid-template-columns: 1fr 1fr; }
      .merchant-manage-grid { grid-template-columns: 1fr 1fr; }
      .category-manager-head, .category-list { grid-template-columns: 1fr; }
      .analytics-card.wide { grid-column: span 2; }
      .analytics-metrics { grid-template-columns: 1fr 1fr; }
      .pie-layout { grid-template-columns: 1fr; justify-items: center; }
      table { min-width: 1080px; }
      .table-scroll { overflow-x: auto; }
      .login-shell { grid-template-columns: 1fr; }
      .login-visual { min-height: 360px; }
    }
    @media (max-width: 700px) {
      .table-panel { overflow: visible; }
      .table-top { flex-direction: column; align-items: flex-start; padding: 16px; }
      .export-menu, .export-menu > button { width: 100%; }
      .export-options { left: 0; right: auto; width: 100%; }
      .table-scroll { overflow: visible; }
      table { min-width: 0; border-collapse: separate; border-spacing: 0; }
      thead { display: none; }
      tbody { display: grid; gap: 12px; padding: 12px; }
      tbody tr { display: grid; padding: 12px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.035); }
      tbody tr:hover { background: rgba(255,255,255,.05); }
      td { display: grid; grid-template-columns: minmax(92px, .75fr) minmax(0, 1.25fr); gap: 10px; align-items: start; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.07); overflow-wrap: anywhere; }
      td:last-child { border-bottom: 0; }
      td::before { color: var(--muted); font-size: 11px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
      td:nth-child(1)::before { content: "Дата"; }
      td:nth-child(2)::before { content: "Тип"; }
      td:nth-child(3)::before { content: "Сумма"; }
      td:nth-child(4)::before { content: "Комиссия"; }
      td:nth-child(5)::before { content: "Итого"; }
      td:nth-child(6)::before { content: "Баланс"; }
      td:nth-child(7)::before { content: "Категория"; }
      td:nth-child(8)::before { content: "Торговая точка"; }
      td.amount, td.balance-delta { white-space: normal; }
      .pagination { flex-direction: column; align-items: stretch; }
      .pagination span { text-align: center; }
    }
    @media (max-width: 560px) {
      .filters, .cards, .analytics, .merchant-manage-grid, .category-add { grid-template-columns: 1fr; }
      .analysis-chart-block { grid-template-columns: 36px minmax(0, 1fr) 36px; gap: 8px; }
      .analysis-legend { grid-template-columns: 1fr; }
      button.month-arrow { width: 36px; height: 44px; }
      .analysis-donut-wrap { min-height: 230px; }
      .analysis-donut { width: min(230px, 100%); box-shadow: 0 22px 62px rgba(0,0,0,.28); }
      .analysis-donut span { width: 108px; height: 108px; font-size: 17px; }
      .analytics-head { display: grid; }
      .analytics-metrics { grid-template-columns: 1fr; }
      .month-bars { gap: 6px; }
      .category-item { grid-template-columns: minmax(0, 1fr) auto; }
      .category-marker { grid-column: 1 / -1; width: 100%; height: 4px; }
      .category-field { min-width: 0; }
      .category-actions { display: flex; }
      .analytics-card.wide { grid-column: span 1; }
      .wrap { width: min(100% - 20px, 1180px); padding: 24px 0; }
      .login-body { padding: 12px; }
      .login-shell { min-height: calc(100vh - 24px); }
      .login-visual { display: none; }
      .login-card { border-radius: 26px; }
    }