/* ══════════════════════════════════════════════════════
   Settings Page — Appearance & Customization
   ══════════════════════════════════════════════════════ */

.settings-hero { padding:28px 24px 20px; border-radius:16px; background:linear-gradient(135deg,rgb(var(--fd-card-rgb) / var(--fd-surface-hover-alpha, .46)),rgb(var(--fd-card-rgb) / var(--fd-surface-subtle-alpha, .24))); border:1px solid var(--fd-card-border); margin-bottom:8px; }
.settings-hero h1 { margin:0 0 8px; font-size:1.65rem; font-weight:800; color:var(--fd-text); }
.settings-hero p { margin:0; color:var(--fd-muted); font-size:.92rem; line-height:1.55; max-width:640px; }

.settings-section { background:rgb(var(--fd-card-rgb) / var(--fd-surface-alpha, .38)); border:1px solid var(--fd-card-border); border-radius:16px; padding:22px 24px 26px; }
.settings-section-header { margin-bottom:20px; padding-bottom:14px; border-bottom:1px solid rgba(var(--fd-card-rgb),.5); }
.settings-section-header h2 { margin:0 0 6px; font-size:1.18rem; font-weight:700; color:var(--fd-text); }
.settings-section-header p { margin:0; font-size:.82rem; color:var(--fd-muted); line-height:1.45; }

/* ── Color Grid ── */
.color-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.color-control { display:flex; flex-direction:column; gap:8px; padding:14px 16px; border-radius:12px; background:rgb(var(--fd-card-rgb) / var(--fd-surface-subtle-alpha, .24)); border:1px solid rgb(var(--fd-card-rgb) / var(--fd-surface-alpha, .38)); transition:border-color .2s,background .2s; }
.color-control:hover { border-color:var(--fd-card-border); background:rgb(var(--fd-card-rgb) / var(--fd-surface-hover-alpha, .46)); }
.color-control label { display:flex; flex-direction:column; gap:2px; }
.color-label { font-size:.88rem; font-weight:700; color:var(--fd-text); }
.color-hint { font-size:.72rem; color:var(--fd-muted); line-height:1.3; }
.color-input-row { display:flex; align-items:center; gap:10px; }
.color-input-row input[type="color"] { width:52px; height:38px; border-radius:8px; border:2px solid rgba(255,255,255,.08); background:rgba(var(--fd-card-rgb),.5); cursor:pointer; padding:3px; flex-shrink:0; }
.color-hex { font-family:var(--font-family-mono); font-size:.78rem; color:var(--fd-muted); min-width:62px; -webkit-user-select:all; user-select:all; }

/* ══════════════════════════════════════════════════════
   Rich Preview Preset Cards
   ══════════════════════════════════════════════════════ */
.preset-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(216px,1fr)); gap:12px; }

.preset-card { display:flex; flex-direction:column; overflow:hidden; border-radius:12px; cursor:pointer; transition:transform .2s,box-shadow .2s,border-color .2s; position:relative; border:1px solid rgba(255,255,255,.08); background:var(--preset-shell-bg,rgba(var(--fd-card-rgb),.18)); box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 8px 22px rgba(0,0,0,.20); -webkit-user-select:none; user-select:none; outline:none; }
.preset-card::before { content:""; position:absolute; inset:0; background:var(--preset-shell-glow,transparent); pointer-events:none; z-index:0; }
.preset-card > * { position:relative; z-index:1; }
.preset-card:hover { transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 12px 26px rgba(0,0,0,.28); border-color:rgba(255,255,255,.18); }
.preset-card:focus-visible { outline:2px solid var(--fd-accent-strong,#3b82f6); outline-offset:2px; }
.preset-card.preset-active { border-color:var(--fd-accent-strong,#3b82f6); box-shadow:0 0 0 3px rgba(96,165,250,.22),0 6px 20px rgba(0,0,0,.2); }

/* Header bar with name */
.preset-header { display:flex; align-items:center; justify-content:space-between; padding:7px 9px; border-bottom:1px solid rgba(255,255,255,.06); }
.preset-header .preset-name { font-size:.75rem; font-weight:700; }
.preset-badge { font-size:.54rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:2px 6px; border-radius:999px; background:rgba(255,255,255,.12); opacity:.8; }
.preset-tag { position:absolute; top:26px; right:6px; font-size:.48rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; padding:2px 4px; border-radius:4px; background:rgba(0,0,0,.5); color:#fbbf24; z-index:2; line-height:1; }

/* Mini dashboard preview */
.preset-preview { display:flex; height:132px; overflow:hidden; border-radius:0 0 11px 11px; position:relative; isolation:isolate; }
.preset-preview::before { content:""; position:absolute; inset:0; background:var(--preset-preview-overlay,transparent); pointer-events:none; z-index:0; }
.preset-preview::after { content:""; position:absolute; inset:0; background:var(--preset-preview-grid,none); opacity:.24; pointer-events:none; z-index:0; }
.preset-preview > * { position:relative; z-index:1; }

/* Sidebar column */
.pp-sidebar { width:46px; min-width:46px; display:flex; flex-direction:column; padding:6px 4px; gap:2px; border-right-width:1px; border-right-style:solid; flex-shrink:0; box-shadow:inset -1px 0 0 rgba(255,255,255,.05); }
.pp-brand { font-size:5.5px; font-weight:700; margin-bottom:2px; padding:0 2px; }
.pp-nav-item { font-size:4.7px; padding:2px 4px; border-radius:3px; opacity:.55; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pp-nav-item.pp-active { opacity:1; font-weight:600; }

/* Main area */
.pp-main { flex:1; padding:6px; display:flex; flex-direction:column; gap:4px; min-width:0; }

/* Summary cards row */
.pp-cards { display:flex; gap:3px; }
.pp-card { flex:1; border-radius:5px; padding:4px 5px; border-width:1px; border-style:solid; min-width:0; box-shadow:inset 0 1px 0 rgba(255,255,255,.06); }
.pp-label { font-size:4.5px; opacity:.55; }
.pp-value { font-size:7.5px; font-weight:700; margin-top:2px; white-space:nowrap; }

/* Table */
.pp-table { flex:1; border-radius:5px; overflow:hidden; border-width:1px; border-style:solid; min-width:0; box-shadow:inset 0 1px 0 rgba(255,255,255,.04); }
.pp-thead { padding:3px 5px; font-size:4.5px; font-weight:600; }
.pp-tr { padding:2px 5px; font-size:4px; opacity:.6; }
.pp-tr:nth-child(odd) { opacity:.45; }

/* Action buttons */
.pp-actions { display:flex; gap:3px; margin-top:auto; }
.pp-btn { font-size:4.8px; padding:2px 6px; border-radius:3px; font-weight:600; white-space:nowrap; }

.preset-card {
  --preset-shell-bg: linear-gradient(160deg, rgba(26, 16, 48, .96), rgba(12, 18, 32, .98));
  --preset-shell-glow: radial-gradient(circle at 88% 4%, rgba(243, 201, 106, .18), transparent 34%), radial-gradient(circle at 8% 100%, rgba(99, 102, 241, .12), transparent 28%);
  --preset-header-bg: linear-gradient(90deg, #24133e, #181534 60%, #101a31);
  --preset-header-text: #f0f4f8;
  --preset-preview-bg: linear-gradient(180deg, #0a0f1e, #101936 62%, #0c1429);
  --preset-preview-overlay: radial-gradient(circle at 84% 14%, rgba(243, 201, 106, .14), transparent 24%), linear-gradient(135deg, rgba(99, 102, 241, .14), transparent 54%);
  --preset-preview-grid: repeating-linear-gradient(90deg, rgba(243, 201, 106, .05) 0 1px, transparent 1px 18px), repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 18px);
  --preset-sidebar-bg: #080d1c;
  --preset-sidebar-text: #94a3b8;
  --preset-sidebar-border: rgba(255,255,255,.06);
  --preset-brand: #c9a44c;
  --preset-active-bg: rgba(201,164,76,.12);
  --preset-card-bg: rgba(26,37,71,.35);
  --preset-card-border: #2a3660;
  --preset-card-text: #f0f4f8;
  --preset-table-bg: rgba(26,37,71,.2);
  --preset-income: #34d399;
  --preset-expense: #f87171;
  --preset-balance: #c9a44c;
  --preset-primary-btn-text: #0a0f1e;
  --preset-badge-color: inherit;
  --preset-badge-bg: rgba(255,255,255,.12);
}

.preset-card .preset-header { background: var(--preset-header-bg); color: var(--preset-header-text); }
.preset-card .preset-preview { background: var(--preset-preview-bg); }
.preset-card .pp-sidebar { background: var(--preset-sidebar-bg); color: var(--preset-sidebar-text); border-color: var(--preset-sidebar-border); }
.preset-card .pp-brand { color: var(--preset-brand); }
.preset-card .pp-nav-item.pp-active { background: var(--preset-active-bg); color: var(--preset-brand); }
.preset-card .pp-card { background: var(--preset-card-bg); border-color: var(--preset-card-border); color: var(--preset-card-text); }
.preset-card .pp-table { background: var(--preset-table-bg); border-color: var(--preset-card-border); color: var(--preset-card-text); }
.preset-card .pp-thead { background: var(--preset-active-bg); color: var(--preset-brand); }
.preset-card .pp-btn:first-child { background: var(--preset-brand); color: var(--preset-primary-btn-text); }
.preset-card .pp-btn:last-child { background: var(--preset-active-bg); color: var(--preset-brand); }
.preset-card .pp-card:nth-child(1) .pp-value { color: var(--preset-income); }
.preset-card .pp-card:nth-child(2) .pp-value { color: var(--preset-expense); }
.preset-card .pp-card:nth-child(3) .pp-value { color: var(--preset-balance); }
.preset-card .preset-badge { color: var(--preset-badge-color); background: var(--preset-badge-bg); }

.preset-card[data-preset="ocean"] {
  --preset-shell-bg: linear-gradient(160deg, rgba(6, 28, 49, .96), rgba(5, 20, 34, .98));
  --preset-shell-glow: radial-gradient(circle at 90% 0%, rgba(34, 211, 238, .16), transparent 34%), radial-gradient(circle at 0% 100%, rgba(14, 165, 233, .16), transparent 30%);
  --preset-header-bg: linear-gradient(90deg, #0f3556, #0a263f 60%, #071b2f);
  --preset-header-text: #e8f4f8;
  --preset-preview-bg: linear-gradient(180deg, #071826, #0b2740 62%, #0a2033);
  --preset-preview-overlay: radial-gradient(circle at 80% 16%, rgba(34, 211, 238, .16), transparent 24%), linear-gradient(135deg, rgba(14, 165, 233, .18), transparent 58%);
  --preset-preview-grid: repeating-linear-gradient(90deg, rgba(34, 211, 238, .05) 0 1px, transparent 1px 18px), repeating-linear-gradient(0deg, rgba(125, 211, 252, .03) 0 1px, transparent 1px 18px);
  --preset-sidebar-bg: #081420;
  --preset-sidebar-text: #8baabe;
  --preset-brand: #14b8a6;
  --preset-active-bg: rgba(20,184,166,.12);
  --preset-card-bg: rgba(19,62,94,.35);
  --preset-card-border: #1c5478;
  --preset-card-text: #e8f4f8;
  --preset-table-bg: rgba(19,62,94,.2);
  --preset-income: #5eead4;
  --preset-expense: #fb7185;
  --preset-balance: #14b8a6;
  --preset-primary-btn-text: #081420;
}

.preset-card[data-preset="emerald"] {
  --preset-shell-bg: linear-gradient(160deg, rgba(8, 29, 22, .97), rgba(4, 18, 13, .98));
  --preset-shell-glow: radial-gradient(circle at 90% 0%, rgba(74, 222, 128, .15), transparent 34%), radial-gradient(circle at 0% 100%, rgba(16, 185, 129, .14), transparent 30%);
  --preset-header-bg: linear-gradient(90deg, #123326, #0d241c 58%, #081812);
  --preset-header-text: #e6f5f0;
  --preset-preview-bg: linear-gradient(180deg, #07130f, #0d231b 64%, #081710);
  --preset-preview-overlay: radial-gradient(circle at 82% 14%, rgba(74, 222, 128, .16), transparent 22%), linear-gradient(135deg, rgba(16, 185, 129, .18), transparent 56%);
  --preset-preview-grid: repeating-linear-gradient(90deg, rgba(52, 211, 153, .05) 0 1px, transparent 1px 18px), repeating-linear-gradient(0deg, rgba(167, 243, 208, .03) 0 1px, transparent 1px 18px);
  --preset-sidebar-bg: #060f0d;
  --preset-sidebar-text: #82a89e;
  --preset-brand: #34d399;
  --preset-active-bg: rgba(52,211,153,.12);
  --preset-card-bg: rgba(20,53,45,.35);
  --preset-card-border: #1e4d42;
  --preset-card-text: #e6f5f0;
  --preset-table-bg: rgba(20,53,45,.2);
  --preset-income: #6ee7b7;
  --preset-expense: #fca5a5;
  --preset-balance: #34d399;
  --preset-primary-btn-text: #060f0d;
}

.preset-card[data-preset="royal"] {
  --preset-shell-bg: linear-gradient(160deg, rgba(33, 13, 56, .97), rgba(16, 8, 31, .99));
  --preset-shell-glow: radial-gradient(circle at 88% 0%, rgba(196, 181, 253, .18), transparent 34%), radial-gradient(circle at 4% 100%, rgba(236, 72, 153, .12), transparent 28%);
  --preset-header-bg: linear-gradient(90deg, #2d1750, #231541 58%, #160d2b);
  --preset-header-text: #f0ecf8;
  --preset-preview-bg: linear-gradient(180deg, #12091f, #261446 62%, #170c2a);
  --preset-preview-overlay: radial-gradient(circle at 82% 14%, rgba(196, 181, 253, .16), transparent 22%), linear-gradient(135deg, rgba(236, 72, 153, .12), transparent 52%);
  --preset-preview-grid: repeating-linear-gradient(90deg, rgba(196, 181, 253, .06) 0 1px, transparent 1px 18px), repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 18px);
  --preset-sidebar-bg: #0d0818;
  --preset-sidebar-text: #9888b8;
  --preset-brand: #a78bfa;
  --preset-active-bg: rgba(167,139,250,.12);
  --preset-card-bg: rgba(45,31,80,.35);
  --preset-card-border: #3d2d68;
  --preset-card-text: #f0ecf8;
  --preset-table-bg: rgba(45,31,80,.2);
  --preset-income: #34d399;
  --preset-expense: #fb7185;
  --preset-balance: #c4b5fd;
  --preset-primary-btn-text: #0d0818;
}

.preset-card[data-preset="slate"] {
  --preset-shell-bg: linear-gradient(160deg, rgba(24, 28, 34, .98), rgba(12, 15, 21, .98));
  --preset-shell-glow: radial-gradient(circle at 88% 0%, rgba(103, 232, 249, .12), transparent 34%), radial-gradient(circle at 0% 100%, rgba(148, 163, 184, .12), transparent 28%);
  --preset-header-bg: linear-gradient(90deg, #262b34, #1a1f28 62%, #141920);
  --preset-header-text: #e8eaef;
  --preset-preview-bg: linear-gradient(180deg, #101318, #1b222c 62%, #12171d);
  --preset-preview-overlay: radial-gradient(circle at 85% 12%, rgba(103, 232, 249, .10), transparent 22%), linear-gradient(135deg, rgba(148, 163, 184, .12), transparent 55%);
  --preset-preview-grid: repeating-linear-gradient(90deg, rgba(103, 232, 249, .04) 0 1px, transparent 1px 18px), repeating-linear-gradient(0deg, rgba(226, 232, 240, .03) 0 1px, transparent 1px 18px);
  --preset-sidebar-bg: #0e1014;
  --preset-sidebar-text: #8891a3;
  --preset-brand: #67e8f9;
  --preset-active-bg: rgba(103,232,249,.12);
  --preset-card-bg: rgba(42,45,54,.35);
  --preset-card-border: #3a3e48;
  --preset-card-text: #e8eaef;
  --preset-table-bg: rgba(42,45,54,.2);
  --preset-income: #34d399;
  --preset-expense: #f87171;
  --preset-balance: #93c5fd;
  --preset-primary-btn-text: #0e1014;
}

.preset-card[data-preset="sunset"] {
  --preset-shell-bg: linear-gradient(160deg, rgba(53, 22, 12, .97), rgba(20, 9, 6, .99));
  --preset-shell-glow: radial-gradient(circle at 90% 0%, rgba(251, 146, 60, .18), transparent 34%), radial-gradient(circle at 0% 100%, rgba(251, 191, 36, .12), transparent 28%);
  --preset-header-bg: linear-gradient(90deg, #4a2110, #31170d 58%, #1d0d08);
  --preset-header-text: #fef2e8;
  --preset-preview-bg: linear-gradient(180deg, #1b0d09, #3a170d 62%, #220c07);
  --preset-preview-overlay: radial-gradient(circle at 82% 14%, rgba(251, 146, 60, .18), transparent 22%), linear-gradient(135deg, rgba(249, 115, 22, .16), transparent 55%);
  --preset-preview-grid: repeating-linear-gradient(90deg, rgba(251, 146, 60, .05) 0 1px, transparent 1px 18px), repeating-linear-gradient(0deg, rgba(255, 237, 213, .03) 0 1px, transparent 1px 18px);
  --preset-sidebar-bg: #140b08;
  --preset-sidebar-text: #b08870;
  --preset-brand: #f97316;
  --preset-active-bg: rgba(249,115,22,.12);
  --preset-card-bg: rgba(61,34,22,.35);
  --preset-card-border: #5a3420;
  --preset-card-text: #fef2e8;
  --preset-table-bg: rgba(61,34,22,.2);
  --preset-income: #34d399;
  --preset-expense: #f87171;
  --preset-balance: #fb923c;
  --preset-primary-btn-text: #140b08;
}

.preset-card[data-preset="arctic"] {
  --preset-header-bg: #e2e8f0;
  --preset-header-text: #1e293b;
  --preset-preview-bg: #f1f5f9;
  --preset-sidebar-bg: #1e293b;
  --preset-sidebar-text: #94a3b8;
  --preset-brand: #60a5fa;
  --preset-active-bg: rgba(96,165,250,.12);
  --preset-card-bg: #fff;
  --preset-card-border: #cbd5e1;
  --preset-card-text: #1e293b;
  --preset-table-bg: #fff;
  --preset-income: #059669;
  --preset-expense: #dc2626;
  --preset-balance: #2563eb;
  --preset-primary-btn-text: #fff;
  --preset-badge-color: #1e40af;
  --preset-badge-bg: rgba(59,130,246,.12);
}

.preset-card[data-preset="sand"] {
  --preset-header-bg: #ede5d8;
  --preset-header-text: #2d1f0e;
  --preset-preview-bg: #faf7f2;
  --preset-sidebar-bg: #292016;
  --preset-sidebar-text: #a89882;
  --preset-brand: #d4a843;
  --preset-active-bg: rgba(212,168,67,.12);
  --preset-card-bg: #fff;
  --preset-card-border: #d6cebe;
  --preset-card-text: #3d2e1c;
  --preset-table-bg: #fff;
  --preset-income: #166534;
  --preset-expense: #b91c1c;
  --preset-balance: #92400e;
  --preset-primary-btn-text: #fff;
  --preset-badge-color: #92400e;
  --preset-badge-bg: rgba(184,134,11,.12);
}

.preset-card[data-preset="lavender"] {
  --preset-header-bg: #e4ddf2;
  --preset-header-text: #1e1535;
  --preset-preview-bg: #f5f3ff;
  --preset-sidebar-bg: #1e1535;
  --preset-sidebar-text: #a098b8;
  --preset-brand: #a78bfa;
  --preset-active-bg: rgba(167,139,250,.12);
  --preset-card-bg: #fff;
  --preset-card-border: #d4c8e8;
  --preset-card-text: #2e1f4d;
  --preset-table-bg: #fff;
  --preset-income: #059669;
  --preset-expense: #dc2626;
  --preset-balance: #6d28d9;
  --preset-primary-btn-text: #fff;
  --preset-badge-color: #5b21b6;
  --preset-badge-bg: rgba(124,58,237,.12);
}

.preset-card[data-preset="mint"] {
  --preset-header-bg: #d1f0e2;
  --preset-header-text: #0f2922;
  --preset-preview-bg: #f0fdf9;
  --preset-sidebar-bg: #0f2922;
  --preset-sidebar-text: #82a89e;
  --preset-brand: #34d399;
  --preset-active-bg: rgba(52,211,153,.12);
  --preset-card-bg: #fff;
  --preset-card-border: #a7d7c5;
  --preset-card-text: #14352d;
  --preset-table-bg: #fff;
  --preset-income: #059669;
  --preset-expense: #dc2626;
  --preset-balance: #047857;
  --preset-primary-btn-text: #fff;
  --preset-badge-color: #065f46;
  --preset-badge-bg: rgba(5,150,105,.12);
}

.preset-card[data-preset="obsidianRose"] {
  --preset-shell-bg: linear-gradient(160deg, rgba(31, 13, 29, .97), rgba(15, 7, 15, .99));
  --preset-shell-glow: radial-gradient(circle at 88% 0%, rgba(244, 114, 182, .18), transparent 34%), radial-gradient(circle at 0% 100%, rgba(168, 85, 247, .10), transparent 28%);
  --preset-header-bg: linear-gradient(90deg, #311428, #22111f 60%, #140b14);
  --preset-header-text: #f8ecf3;
  --preset-preview-bg: linear-gradient(180deg, #120a12, #241028 62%, #170c16);
  --preset-preview-overlay: radial-gradient(circle at 82% 14%, rgba(244, 114, 182, .16), transparent 22%), linear-gradient(135deg, rgba(168, 85, 247, .12), transparent 55%);
  --preset-preview-grid: repeating-linear-gradient(90deg, rgba(244, 114, 182, .05) 0 1px, transparent 1px 18px), repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 18px);
  --preset-sidebar-bg: #0f0912;
  --preset-sidebar-text: #b49aac;
  --preset-brand: #f472b6;
  --preset-active-bg: rgba(244,114,182,.12);
  --preset-card-bg: rgba(42,26,44,.35);
  --preset-card-border: #4a2b4e;
  --preset-card-text: #f8ecf3;
  --preset-table-bg: rgba(42,26,44,.2);
  --preset-income: #34d399;
  --preset-expense: #fb7185;
  --preset-balance: #f472b6;
  --preset-primary-btn-text: #0f0912;
}

.preset-card[data-preset="copperNight"] {
  --preset-shell-bg: linear-gradient(160deg, rgba(47, 28, 14, .97), rgba(18, 11, 7, .99));
  --preset-shell-glow: radial-gradient(circle at 88% 0%, rgba(245, 158, 11, .18), transparent 34%), radial-gradient(circle at 0% 100%, rgba(251, 146, 60, .12), transparent 28%);
  --preset-header-bg: linear-gradient(90deg, #3a2414, #29190f 60%, #170f09);
  --preset-header-text: #f9efe5;
  --preset-preview-bg: linear-gradient(180deg, #140f0a, #2c1b11 62%, #1a110a);
  --preset-preview-overlay: radial-gradient(circle at 82% 14%, rgba(245, 158, 11, .16), transparent 22%), linear-gradient(135deg, rgba(234, 88, 12, .12), transparent 55%);
  --preset-preview-grid: repeating-linear-gradient(90deg, rgba(245, 158, 11, .05) 0 1px, transparent 1px 18px), repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 18px);
  --preset-sidebar-bg: #100b07;
  --preset-sidebar-text: #b59a84;
  --preset-brand: #f59e0b;
  --preset-active-bg: rgba(245,158,11,.12);
  --preset-card-bg: rgba(53,35,21,.35);
  --preset-card-border: #5b3a23;
  --preset-card-text: #f9efe5;
  --preset-table-bg: rgba(53,35,21,.2);
  --preset-income: #34d399;
  --preset-expense: #f87171;
  --preset-balance: #fb923c;
  --preset-primary-btn-text: #100b07;
}

.preset-card[data-preset="polarDawn"] {
  --preset-header-bg: #dbeafe;
  --preset-header-text: #0f2b42;
  --preset-preview-bg: #f4f9ff;
  --preset-sidebar-bg: #16324a;
  --preset-sidebar-text: #9fb4c8;
  --preset-brand: #38bdf8;
  --preset-active-bg: rgba(56,189,248,.12);
  --preset-card-bg: #fff;
  --preset-card-border: #c7d9ea;
  --preset-card-text: #123047;
  --preset-table-bg: #fff;
  --preset-income: #0f766e;
  --preset-expense: #dc2626;
  --preset-balance: #0284c7;
  --preset-primary-btn-text: #fff;
  --preset-badge-color: #0369a1;
  --preset-badge-bg: rgba(14,165,233,.12);
}

.preset-card[data-preset="nordicFrost"] {
  --preset-header-bg: #e2e8f0;
  --preset-header-text: #1f2b3a;
  --preset-preview-bg: #f8fafc;
  --preset-sidebar-bg: #1f2937;
  --preset-sidebar-text: #9aa7bb;
  --preset-brand: #93c5fd;
  --preset-active-bg: rgba(147,197,253,.12);
  --preset-card-bg: #fff;
  --preset-card-border: #d3dce8;
  --preset-card-text: #1f2b3a;
  --preset-table-bg: #fff;
  --preset-income: #0f766e;
  --preset-expense: #dc2626;
  --preset-balance: #334155;
  --preset-primary-btn-text: #fff;
  --preset-badge-color: #334155;
  --preset-badge-bg: rgba(71,85,105,.12);
}

.preset-card[data-preset="citrusPop"] {
  --preset-header-bg: #ecf7d0;
  --preset-header-text: #25311c;
  --preset-preview-bg: #fbfff3;
  --preset-sidebar-bg: #223314;
  --preset-sidebar-text: #a8bb92;
  --preset-brand: #84cc16;
  --preset-active-bg: rgba(132,204,22,.14);
  --preset-card-bg: #fff;
  --preset-card-border: #d7e4b8;
  --preset-card-text: #25311c;
  --preset-table-bg: #fff;
  --preset-income: #16a34a;
  --preset-expense: #dc2626;
  --preset-balance: #65a30d;
  --preset-primary-btn-text: #fff;
  --preset-badge-color: #4d7c0f;
  --preset-badge-bg: rgba(132,204,22,.18);
}

.preset-card[data-preset="nebulaFlux"] {
  --preset-shell-bg: linear-gradient(160deg, rgba(12, 12, 40, .98), rgba(7, 16, 37, .99));
  --preset-shell-glow: radial-gradient(circle at 88% 0%, rgba(103, 232, 249, .18), transparent 34%), radial-gradient(circle at 0% 100%, rgba(99, 102, 241, .16), transparent 28%);
  --preset-header-bg: linear-gradient(90deg, #23175a, #1a1e52 58%, #121b3f);
  --preset-header-text: #eaf2ff;
  --preset-preview-bg: linear-gradient(180deg, #0b1028, #1a1f48 62%, #101a37);
  --preset-preview-overlay: radial-gradient(circle at 82% 14%, rgba(103, 232, 249, .16), transparent 22%), linear-gradient(135deg, rgba(99, 102, 241, .18), transparent 56%);
  --preset-preview-grid: repeating-linear-gradient(90deg, rgba(103, 232, 249, .05) 0 1px, transparent 1px 18px), repeating-linear-gradient(0deg, rgba(165, 180, 252, .03) 0 1px, transparent 1px 18px);
  --preset-sidebar-bg: #090d22;
  --preset-sidebar-text: #98a5ca;
  --preset-brand: #67e8f9;
  --preset-active-bg: rgba(103,232,249,.14);
  --preset-card-bg: rgba(25,35,78,.35);
  --preset-card-border: #334b8a;
  --preset-card-text: #eaf2ff;
  --preset-table-bg: rgba(25,35,78,.2);
  --preset-income: #5eead4;
  --preset-expense: #fb7185;
  --preset-balance: #93c5fd;
  --preset-primary-btn-text: #0b1028;
}

.preset-card[data-preset="rainforestGlass"] {
  --preset-shell-bg: linear-gradient(160deg, rgba(7, 32, 26, .97), rgba(4, 17, 15, .99));
  --preset-shell-glow: radial-gradient(circle at 88% 0%, rgba(52, 211, 153, .18), transparent 34%), radial-gradient(circle at 0% 100%, rgba(45, 212, 191, .12), transparent 28%);
  --preset-header-bg: linear-gradient(90deg, #154639, #10372e 58%, #0b2a24);
  --preset-header-text: #e8fbf5;
  --preset-preview-bg: linear-gradient(180deg, #081b16, #12362f 62%, #0c2721);
  --preset-preview-overlay: radial-gradient(circle at 84% 14%, rgba(110, 231, 183, .16), transparent 22%), linear-gradient(135deg, rgba(45, 212, 191, .14), transparent 56%);
  --preset-preview-grid: repeating-linear-gradient(90deg, rgba(110, 231, 183, .05) 0 1px, transparent 1px 18px), repeating-linear-gradient(0deg, rgba(167, 243, 208, .03) 0 1px, transparent 1px 18px);
  --preset-sidebar-bg: #07150f;
  --preset-sidebar-text: #8fb3a9;
  --preset-brand: #6ee7b7;
  --preset-active-bg: rgba(110,231,183,.14);
  --preset-card-bg: rgba(17,52,46,.35);
  --preset-card-border: #2c675c;
  --preset-card-text: #e8fbf5;
  --preset-table-bg: rgba(17,52,46,.2);
  --preset-income: #86efac;
  --preset-expense: #fb7185;
  --preset-balance: #5eead4;
  --preset-primary-btn-text: #07150f;
}

.preset-card[data-preset="rubyVelvet"] {
  --preset-shell-bg: linear-gradient(160deg, rgba(42, 10, 24, .97), rgba(18, 7, 14, .99));
  --preset-shell-glow: radial-gradient(circle at 88% 0%, rgba(251, 113, 133, .20), transparent 34%), radial-gradient(circle at 0% 100%, rgba(244, 114, 182, .14), transparent 28%);
  --preset-header-bg: linear-gradient(90deg, #4e1734, #391226 58%, #260d19);
  --preset-header-text: #fff1f6;
  --preset-preview-bg: linear-gradient(180deg, #180a12, #3a1026 62%, #220d18);
  --preset-preview-overlay: radial-gradient(circle at 84% 14%, rgba(251, 113, 133, .16), transparent 22%), linear-gradient(135deg, rgba(244, 114, 182, .12), transparent 56%);
  --preset-preview-grid: repeating-linear-gradient(90deg, rgba(251, 113, 133, .05) 0 1px, transparent 1px 18px), repeating-linear-gradient(0deg, rgba(255, 241, 246, .03) 0 1px, transparent 1px 18px);
  --preset-sidebar-bg: #15080f;
  --preset-sidebar-text: #c9a3b4;
  --preset-brand: #fb7185;
  --preset-active-bg: rgba(251,113,133,.14);
  --preset-card-bg: rgba(58,23,48,.35);
  --preset-card-border: #6f2f57;
  --preset-card-text: #fff1f6;
  --preset-table-bg: rgba(58,23,48,.2);
  --preset-income: #86efac;
  --preset-expense: #fb7185;
  --preset-balance: #fda4af;
  --preset-primary-btn-text: #15080f;
}

.preset-card[data-preset="porcelainSky"] {
  --preset-header-bg: #e2ecf8;
  --preset-header-text: #0f2940;
  --preset-preview-bg: #f8fbff;
  --preset-sidebar-bg: #1a2940;
  --preset-sidebar-text: #a5b4c8;
  --preset-brand: #7dd3fc;
  --preset-active-bg: rgba(125,211,252,.16);
  --preset-card-bg: #fff;
  --preset-card-border: #c9d9ec;
  --preset-card-text: #16324a;
  --preset-table-bg: #fff;
  --preset-income: #0f766e;
  --preset-expense: #dc2626;
  --preset-balance: #2563eb;
  --preset-primary-btn-text: #fff;
  --preset-badge-color: #1d4ed8;
  --preset-badge-bg: rgba(59,130,246,.14);
}

.preset-card[data-preset="solarisBloom"] {
  --preset-header-bg: #f7edd3;
  --preset-header-text: #2f250f;
  --preset-preview-bg: #fffdf3;
  --preset-sidebar-bg: #2f2613;
  --preset-sidebar-text: #b8aa8b;
  --preset-brand: #f59e0b;
  --preset-active-bg: rgba(245,158,11,.16);
  --preset-card-bg: #fff;
  --preset-card-border: #ead8b1;
  --preset-card-text: #3c2f16;
  --preset-table-bg: #fff;
  --preset-income: #15803d;
  --preset-expense: #dc2626;
  --preset-balance: #b45309;
  --preset-primary-btn-text: #fff;
  --preset-badge-color: #9a3412;
  --preset-badge-bg: rgba(245,158,11,.16);
}

.preset-card[data-preset="monochromePrism"] {
  --preset-shell-bg: linear-gradient(160deg, rgba(248, 248, 248, .99), rgba(225, 229, 236, .98));
  --preset-shell-glow: radial-gradient(circle at 88% 0%, rgba(34, 197, 94, .12), transparent 34%), radial-gradient(circle at 4% 100%, rgba(59, 130, 246, .12), transparent 30%);
  --preset-header-bg: linear-gradient(90deg, #ffffff, #f1f3f6 58%, #e5e7eb);
  --preset-header-text: #111111;
  --preset-preview-bg: linear-gradient(180deg, #ffffff, #f3f4f6 62%, #e5e7eb);
  --preset-preview-overlay: linear-gradient(135deg, rgba(17, 24, 39, .04), transparent 48%);
  --preset-preview-grid: repeating-linear-gradient(90deg, rgba(17, 24, 39, .035) 0 1px, transparent 1px 18px), repeating-linear-gradient(0deg, rgba(17, 24, 39, .03) 0 1px, transparent 1px 18px);
  --preset-sidebar-bg: #0f1115;
  --preset-sidebar-text: #a1a1aa;
  --preset-brand: #111111;
  --preset-active-bg: rgba(17,17,17,.08);
  --preset-card-bg: rgba(255,255,255,.92);
  --preset-card-border: #d1d5db;
  --preset-card-text: #111111;
  --preset-table-bg: rgba(255,255,255,.96);
  --preset-income: #059669;
  --preset-expense: #dc2626;
  --preset-balance: #2563eb;
  --preset-primary-btn-text: #ffffff;
  --preset-badge-color: #111111;
  --preset-badge-bg: rgba(17,17,17,.08);
}

.preset-card[data-preset="graphitePulse"] {
  --preset-shell-bg: linear-gradient(160deg, rgba(13, 16, 22, .99), rgba(26, 29, 36, .98));
  --preset-shell-glow: radial-gradient(circle at 88% 0%, rgba(248, 113, 113, .12), transparent 34%), radial-gradient(circle at 0% 100%, rgba(99, 102, 241, .14), transparent 30%);
  --preset-header-bg: linear-gradient(90deg, #171b22, #12161d 58%, #0f1318);
  --preset-header-text: #f3f4f6;
  --preset-preview-bg: linear-gradient(180deg, #0d1117, #1a1f27 62%, #10151b);
  --preset-preview-overlay: radial-gradient(circle at 84% 12%, rgba(248,113,113,.12), transparent 24%), linear-gradient(135deg, rgba(59,130,246,.12), transparent 52%);
  --preset-preview-grid: repeating-linear-gradient(90deg, rgba(148, 163, 184, .04) 0 1px, transparent 1px 18px), repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 18px);
  --preset-sidebar-bg: #090c11;
  --preset-sidebar-text: #9ca3af;
  --preset-brand: #e5e7eb;
  --preset-active-bg: rgba(99,102,241,.14);
  --preset-card-bg: rgba(27,31,39,.72);
  --preset-card-border: #374151;
  --preset-card-text: #f3f4f6;
  --preset-table-bg: rgba(17,24,39,.58);
  --preset-income: #22c55e;
  --preset-expense: #f87171;
  --preset-balance: #60a5fa;
  --preset-primary-btn-text: #0d1117;
}

.preset-card[data-preset="auroraLedger"] {
  --preset-shell-bg: linear-gradient(160deg, rgba(7, 17, 28, .98), rgba(14, 34, 32, .98));
  --preset-shell-glow: radial-gradient(circle at 88% 0%, rgba(45, 212, 191, .16), transparent 34%), radial-gradient(circle at 0% 100%, rgba(168, 85, 247, .12), transparent 28%);
  --preset-header-bg: linear-gradient(90deg, #102534, #0d1f2a 58%, #0a171f);
  --preset-header-text: #ecfeff;
  --preset-preview-bg: linear-gradient(180deg, #09131b, #102833 62%, #0b181f);
  --preset-preview-overlay: radial-gradient(circle at 82% 14%, rgba(45,212,191,.14), transparent 22%), linear-gradient(135deg, rgba(168,85,247,.14), transparent 56%);
  --preset-preview-grid: repeating-linear-gradient(90deg, rgba(45,212,191,.05) 0 1px, transparent 1px 18px), repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 18px);
  --preset-sidebar-bg: #071017;
  --preset-sidebar-text: #8aa3ad;
  --preset-brand: #2dd4bf;
  --preset-active-bg: rgba(45,212,191,.12);
  --preset-card-bg: rgba(18,42,50,.52);
  --preset-card-border: #24525b;
  --preset-card-text: #ecfeff;
  --preset-table-bg: rgba(18,42,50,.30);
  --preset-income: #4ade80;
  --preset-expense: #fb7185;
  --preset-balance: #a78bfa;
  --preset-primary-btn-text: #071017;
}

.preset-card[data-preset="paperSignal"] {
  --preset-shell-bg: linear-gradient(160deg, rgba(255, 252, 247, .99), rgba(242, 240, 235, .98));
  --preset-shell-glow: radial-gradient(circle at 88% 0%, rgba(234, 88, 12, .10), transparent 34%), radial-gradient(circle at 0% 100%, rgba(5, 150, 105, .10), transparent 30%);
  --preset-header-bg: linear-gradient(90deg, #fffaf0, #f7f1e8 58%, #efe6d9);
  --preset-header-text: #1f2937;
  --preset-preview-bg: linear-gradient(180deg, #fffdf8, #faf7f0 62%, #f1ebdf);
  --preset-preview-overlay: linear-gradient(135deg, rgba(148, 163, 184, .06), transparent 48%);
  --preset-preview-grid: repeating-linear-gradient(90deg, rgba(120,113,108,.03) 0 1px, transparent 1px 18px), repeating-linear-gradient(0deg, rgba(120,113,108,.025) 0 1px, transparent 1px 18px);
  --preset-sidebar-bg: #1f2937;
  --preset-sidebar-text: #b2bac7;
  --preset-brand: #f59e0b;
  --preset-active-bg: rgba(245,158,11,.12);
  --preset-card-bg: rgba(255,255,255,.94);
  --preset-card-border: #ddd6c8;
  --preset-card-text: #2b3440;
  --preset-table-bg: rgba(255,255,255,.96);
  --preset-income: #059669;
  --preset-expense: #dc2626;
  --preset-balance: #d97706;
  --preset-primary-btn-text: #ffffff;
  --preset-badge-color: #92400e;
  --preset-badge-bg: rgba(245,158,11,.14);
}

/* ── Actions Bar ── */
.settings-actions-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:18px 22px; border-radius:14px; background:rgba(var(--fd-card-rgb),.3); border:1px solid var(--fd-card-border); }
.settings-actions-right { display:flex; gap:8px; flex-wrap:wrap; }
body.fd-app button.settings-btn,body.fd-app button.settings-btn:hover { height:36px !important; min-height:36px !important; padding:0 18px !important; border-radius:8px !important; font-size:.82rem !important; font-weight:700 !important; line-height:36px !important; }
.settings-btn-reset,
.settings-btn-export,
.settings-btn-import {
  border-color: var(--fd-button-border, var(--fd-input-border)) !important;
  color: var(--fd-button-text, var(--fd-input-text)) !important;
  background: var(--fd-button-bg, var(--fd-input-bg)) !important;
}
.settings-btn-reset:hover,
.settings-btn-export:hover,
.settings-btn-import:hover {
  background: var(--fd-button-hover, rgba(255,255,255,.08)) !important;
  border-color: var(--fd-button-border, var(--fd-input-border)) !important;
}

/* ── Responsive ── */
@media(max-width:640px) {
  .settings-hero { padding:20px 16px 16px; }
  .settings-hero h1 { font-size:1.3rem; }
  .settings-section { padding:16px 14px 20px; }
  .color-grid { grid-template-columns:1fr; gap:10px; }
  .preset-grid { grid-template-columns:1fr; gap:12px; }
  .settings-actions-bar { flex-direction:column; align-items:stretch; padding:14px; }
  .settings-actions-right { flex-direction:column; }
  body.fd-app button.settings-btn { width:100% !important; justify-content:center; }
}
@media(min-width:641px) and (max-width:1024px) {
  .color-grid { grid-template-columns:repeat(2,1fr); }
  .preset-grid { grid-template-columns:repeat(2,1fr); }
}
@media(min-width:1025px) and (max-width:1400px) {
  .preset-grid { grid-template-columns:repeat(4,1fr); }
}
@media(min-width:1401px) {
  .preset-grid { grid-template-columns:repeat(6,1fr); }
}

/* ── Toast ── */
.settings-toast { position:fixed; bottom:24px; right:24px; padding:12px 20px; border-radius:10px; font-size:.85rem; font-weight:600; color:#fff; background:rgba(52,211,153,.92); box-shadow:0 8px 32px rgba(0,0,0,.35); z-index:99999; opacity:0; transform:translateY(12px); transition:opacity .3s,transform .3s; pointer-events:none; }
.settings-toast.visible { opacity:1; transform:translateY(0); }