/* ============================================================
   Темы COIF Bank. Цвета едины для всех скинов, приложение
   всегда выглядит как COIF, меняются только формы и анимации.
   Палитра тёмной, светлой и бирюзовой взята с сайта.
   ============================================================ */

/* ---------- Тёмная (по умолчанию, как на сайте) ---------- */
[data-theme="dark"] {
    --bg: #141014;
    --bg-image: linear-gradient(165deg, #191919 0%, #201113 45%, #251314 75%, #291416 100%);
    --surface: rgba(255, 255, 255, .055);
    --surface-2: rgba(255, 255, 255, .1);
    --press: rgba(255, 255, 255, .09);
    --divider: rgba(255, 255, 255, .08);

    --text: #ffffff;
    --text-dim: #aaaaaa;
    --text-mute: #6d6d6d;

    --accent: #ff3333;
    --accent-2: #cc0000;
    --accent-fg: #ffffff;
    --accent-soft: rgba(255, 51, 51, .15);
    --danger: #ff5a52;
    --income: #33ff33;

    --card-border: 1px solid rgba(255, 51, 51, .16);
    --shadow-card: 0 2px 16px rgba(0, 0, 0, .3);

    --nav-bg: rgba(22, 14, 16, .74);
    --nav-border: none;
    --nav-icon: #ffffff;
    --tabbar-bg: rgb(18, 11, 13);
    --tabbar-border: .5px solid rgba(255, 51, 51, .14);
    --tab-inactive: rgba(255, 255, 255, .42);
    --tab-active: #ff3333;

    --row-ico-bg: rgba(255, 51, 51, .13);
    --row-ico-fg: #ff5c5c;
    --input-bg: rgba(255, 255, 255, .05);
    --input-border: 1px solid rgba(255, 51, 51, .18);
    --input-focus-shadow: 0 0 0 3px rgba(255, 51, 51, .18);
    --switch-off: #3d3336;
    --sheet-bg: #1c1418;
    --toast-bg: rgba(46, 34, 38, .96);
    --toast-fg: #fff;
    --section-title-color: rgba(255, 255, 255, .92);
    --label-color: rgba(255, 255, 255, .5);

    --notif-bg: rgba(38, 26, 30, .9);
    --card-grad: radial-gradient(120% 90% at 88% 8%, rgba(255, 51, 51, .5), transparent 58%),
                 linear-gradient(150deg, #2a1216 0%, #16080c 48%, #0c0810 100%);
    --card-glow: 0 20px 44px -18px rgba(255, 51, 51, .5);
}

/* ---------- Светлая (как на сайте) ---------- */
[data-theme="light"] {
    --bg: #f0f0f5;
    --bg-image: linear-gradient(160deg, #f2f2f7 0%, #ececf3 100%);
    --surface: #ffffff;
    --surface-2: #ebebf1;
    --press: rgba(0, 0, 0, .05);
    --divider: rgba(0, 0, 0, .08);

    --text: #1a1a1e;
    --text-dim: #555555;
    --text-mute: #8e8e93;

    --accent: #e8302c;
    --accent-2: #c9261f;
    --accent-fg: #ffffff;
    --accent-soft: rgba(232, 48, 44, .12);
    --danger: #e8302c;
    --income: #2db84d;

    --card-border: 1px solid rgba(0, 0, 0, .07);
    --shadow-card: 0 2px 12px rgba(0, 0, 0, .06);

    --nav-bg: rgba(245, 245, 250, .84);
    --nav-border: none;
    --nav-icon: #1a1a1e;
    --tabbar-bg: rgb(255, 255, 255);
    --tabbar-border: .5px solid rgba(0, 0, 0, .07);
    --tab-inactive: rgba(60, 60, 67, .4);
    --tab-active: #e8302c;

    --row-ico-bg: rgba(232, 48, 44, .1);
    --row-ico-fg: #e8302c;
    --input-bg: #ffffff;
    --input-border: 1px solid rgba(0, 0, 0, .1);
    --input-focus-shadow: 0 0 0 3px rgba(232, 48, 44, .14);
    --switch-off: #d5d5dd;
    --sheet-bg: #ffffff;
    --toast-bg: rgba(28, 28, 30, .95);
    --toast-fg: #fff;
    --section-title-color: #1a1a1e;
    --label-color: rgba(0, 0, 0, .5);

    --notif-bg: rgba(252, 252, 254, .92);
    --card-grad: radial-gradient(120% 90% at 88% 8%, rgba(255, 90, 80, .55), transparent 58%),
                 linear-gradient(150deg, #3a1a1c 0%, #241012 48%, #171418 100%);
    --card-glow: 0 18px 36px -18px rgba(232, 48, 44, .45);
}

/* ---------- Бирюзовая (как на сайте) ---------- */
[data-theme="teal"] {
    --bg: #0a1628;
    --bg-image: linear-gradient(135deg, #0a1628 0%, #0d2137 50%, #0a2a2a 100%);
    --surface: rgba(0, 210, 200, .06);
    --surface-2: rgba(0, 210, 200, .12);
    --press: rgba(0, 212, 200, .12);
    --divider: rgba(0, 212, 200, .14);

    --text: #e0f7f7;
    --text-dim: #7ecece;
    --text-mute: #3a7a7a;

    --accent: #00d4c8;
    --accent-2: #00a89e;
    --accent-fg: #04211f;
    --accent-soft: rgba(0, 212, 200, .16);
    --danger: #ff6b6b;
    --income: #00e5b0;

    --card-border: 1px solid rgba(0, 212, 200, .22);
    --shadow-card: 0 2px 16px rgba(0, 0, 0, .35);

    --nav-bg: rgba(10, 25, 40, .76);
    --nav-border: none;
    --nav-icon: #e0f7f7;
    --tabbar-bg: rgb(9, 22, 34);
    --tabbar-border: .5px solid rgba(0, 212, 200, .18);
    --tab-inactive: rgba(224, 247, 247, .38);
    --tab-active: #00d4c8;

    --row-ico-bg: rgba(0, 212, 200, .14);
    --row-ico-fg: #00d4c8;
    --input-bg: rgba(0, 210, 200, .06);
    --input-border: 1px solid rgba(0, 212, 200, .22);
    --input-focus-shadow: 0 0 0 3px rgba(0, 212, 200, .18);
    --switch-off: #24444a;
    --sheet-bg: #0c1e2e;
    --toast-bg: rgba(16, 42, 52, .96);
    --toast-fg: #e0f7f7;
    --section-title-color: #e0f7f7;
    --label-color: rgba(224, 247, 247, .5);

    --notif-bg: rgba(14, 36, 48, .9);
    --card-grad: radial-gradient(120% 90% at 88% 8%, rgba(0, 212, 200, .45), transparent 58%),
                 linear-gradient(150deg, #0b2f34 0%, #08202c 48%, #071620 100%);
    --card-glow: 0 20px 44px -18px rgba(0, 212, 200, .45);
}

/* ---------- Аметист (новая) ---------- */
[data-theme="amethyst"] {
    --bg: #100a1c;
    --bg-image: linear-gradient(155deg, #150d24 0%, #1d1033 52%, #0c0916 100%);
    --surface: rgba(168, 85, 247, .07);
    --surface-2: rgba(168, 85, 247, .14);
    --press: rgba(168, 85, 247, .14);
    --divider: rgba(168, 85, 247, .16);

    --text: #f4ecff;
    --text-dim: #bda9d8;
    --text-mute: #7a6a92;

    --accent: #a855f7;
    --accent-2: #7c3aed;
    --accent-fg: #ffffff;
    --accent-soft: rgba(168, 85, 247, .18);
    --danger: #fb7185;
    --income: #4ade80;

    --card-border: 1px solid rgba(168, 85, 247, .22);
    --shadow-card: 0 2px 18px rgba(0, 0, 0, .4);

    --nav-bg: rgba(20, 13, 32, .76);
    --nav-border: none;
    --nav-icon: #f4ecff;
    --tabbar-bg: rgb(17, 11, 27);
    --tabbar-border: .5px solid rgba(168, 85, 247, .2);
    --tab-inactive: rgba(244, 236, 255, .38);
    --tab-active: #c084fc;

    --row-ico-bg: rgba(168, 85, 247, .16);
    --row-ico-fg: #c084fc;
    --input-bg: rgba(168, 85, 247, .07);
    --input-border: 1px solid rgba(168, 85, 247, .22);
    --input-focus-shadow: 0 0 0 3px rgba(168, 85, 247, .2);
    --switch-off: #3b2f4d;
    --sheet-bg: #17102400;
    --sheet-bg: #171024;
    --toast-bg: rgba(38, 27, 56, .96);
    --toast-fg: #f4ecff;
    --section-title-color: #f4ecff;
    --label-color: rgba(244, 236, 255, .5);

    --notif-bg: rgba(34, 23, 52, .9);
    --card-grad: radial-gradient(120% 90% at 88% 8%, rgba(168, 85, 247, .5), transparent 58%),
                 linear-gradient(150deg, #2a1745 0%, #1a0f2c 48%, #0e0a18 100%);
    --card-glow: 0 20px 44px -18px rgba(168, 85, 247, .5);
}

/* Фирменный фон COIF, как на сайте */
body { background: var(--bg); }
#app, .screen, #boot { background-image: var(--bg-image); background-attachment: fixed; background-size: cover; }
.screen { background-color: transparent; }
#screens { background: transparent; }

/* Логотип, значки и карта подхватывают цвет темы */
[data-theme] { --brand: var(--accent); --brand-2: var(--accent-2); }
.bankcard { background: var(--card-grad); box-shadow: var(--card-glow), 0 4px 16px rgba(0, 0, 0, .45); }

/* Фирменный знак COIF в шапке главной.
   Маска и filter: drop-shadow на одном элементе не дружат: маска обрезает
   область, где должно рисоваться свечение, и его не видно вообще. Поэтому
   маска стоит на псевдоэлементе, а свечение, без маски, на самом .home-logo. */
.home-logo {
    position: relative;
    flex: none;
    width: 34px; height: 34px;
    filter: drop-shadow(0 0 2px color-mix(in srgb, var(--accent) 35%, transparent))
            drop-shadow(0 1px 3px color-mix(in srgb, var(--accent) 18%, transparent));
}
.home-logo::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--accent);
    -webkit-mask: url('../assets/logo-mark.png') center / contain no-repeat;
            mask: url('../assets/logo-mark.png') center / contain no-repeat;
}