/* ══════════════════════════════════════════════════════════
   SMART EXPENSE MANAGER — STYLES
   Extracted from index.html for clean project structure
   ══════════════════════════════════════════════════════════ */

/* ── CSS VARIABLES / THEME ───────────────────────────── */
:root {
    --bg: #f5f4f0;
    --surface: #fff;
    --surface2: #f0eeea;
    --border: #e5e2dc;
    --text: #1a1814;
    --text2: #6b6560;
    --text3: #9e9890;
    --accent: #2d6a4f;
    --accent2: #40916c;
    --accent-light: #d8f3dc;
    --danger: #c0392b;
    --danger-light: #fde8e6;
    --warning: #d4870e;
    --income: #2d6a4f;
    --expense: #c0392b;
    --shadow: 0 2px 12px rgba(0, 0, 0, .07);
    --shadow-md: 0 6px 28px rgba(0, 0, 0, .12);
    --r: 14px;
    --rs: 8px;
    --sw: 240px;
    --tr: .22s cubic-bezier(.4, 0, .2, 1)
}

[data-theme="dark"] {
    --bg: #0f1117;
    --surface: #1a1d27;
    --surface2: #222535;
    --border: #2e3247;
    --text: #f0eee8;
    --text2: #9a97a8;
    --text3: #5e5c6e;
    --accent: #52b788;
    --accent2: #74c69d;
    --accent-light: #1b3a2d;
    --danger: #e57373;
    --danger-light: #2d1a1a;
    --shadow: 0 2px 12px rgba(0, 0, 0, .35);
    --shadow-md: 0 6px 28px rgba(0, 0, 0, .45)
}

/* ── RESET ────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html {
    font-size: 15px
}

body {
    font-family: 'DM Sans', sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    transition: background var(--tr), color var(--tr)
}

h1,
h2,
h3,
h4 {
    font-family: 'Syne', sans-serif;
    font-weight: 700
}

button {
    cursor: pointer;
    font-family: inherit
}

input,
select,
textarea {
    font-family: inherit
}

::-webkit-scrollbar {
    width: 5px
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px
}

/* ── AUTH ─────────────────────────────────────── */
#auth-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
    position: relative;
    overflow: hidden
}

#auth-screen::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 60% -10%, var(--accent-light) 0%, transparent 65%), radial-gradient(ellipse 50% 40% at 10% 100%, var(--accent-light) 0%, transparent 55%);
    opacity: .7;
    pointer-events: none
}

.auth-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--shadow-md);
    width: 100%;
    max-width: 420px;
    padding: 36px 34px;
    position: relative;
    z-index: 1;
    animation: fadeUp .38s ease
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(22px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.auth-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px
}

.logo-box {
    width: 42px;
    height: 42px;
    background: var(--accent);
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    flex-shrink: 0
}

.auth-logo h1 {
    font-size: 1.25rem;
    letter-spacing: -.4px;
    line-height: 1.2
}

.auth-logo span {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: .7rem;
    color: var(--text3);
    display: block
}

.auth-tabs {
    display: flex;
    background: var(--surface2);
    border-radius: 10px;
    padding: 4px;
    gap: 4px;
    margin-bottom: 22px
}

.auth-tab {
    flex: 1;
    padding: 8px;
    border: none;
    border-radius: 7px;
    background: transparent;
    font-size: .87rem;
    font-weight: 500;
    color: var(--text2);
    transition: all var(--tr)
}

.auth-tab.active {
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 1px 6px rgba(0, 0, 0, .1)
}

.auth-form {
    display: none
}

.auth-form.active {
    display: block;
    animation: fadeUp .22s ease
}

.auth-form h2 {
    font-size: 1.08rem;
    margin-bottom: 3px
}

.auth-form>p {
    font-size: .79rem;
    color: var(--text3);
    margin-bottom: 17px
}

.fg {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px
}

.fg label {
    font-size: .7rem;
    font-weight: 600;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: .7px
}

.iw {
    position: relative
}

.iw .fi {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text3);
    font-size: .82rem;
    pointer-events: none
}

.iw input {
    width: 100%;
    background: var(--surface2);
    border: 1.5px solid var(--border);
    border-radius: var(--rs);
    padding: 9px 11px 9px 34px;
    color: var(--text);
    font-size: .88rem;
    outline: none;
    transition: border-color var(--tr), box-shadow var(--tr)
}

.iw input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-light)
}

.eye-btn {
    position: absolute;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text3);
    font-size: .82rem;
    padding: 4px
}

.alerr {
    background: var(--danger-light);
    color: var(--danger);
    border-radius: var(--rs);
    padding: 8px 12px;
    font-size: .81rem;
    font-weight: 500;
    margin-bottom: 11px;
    display: none
}

.alok {
    background: var(--accent-light);
    color: var(--accent);
    border-radius: var(--rs);
    padding: 8px 12px;
    font-size: .81rem;
    font-weight: 500;
    margin-bottom: 11px;
    display: none
}

.alerr.show,
.alok.show {
    display: block
}

.btn-auth {
    width: 100%;
    padding: 11px;
    border: none;
    border-radius: var(--rs);
    background: var(--accent);
    color: #fff;
    font-size: .9rem;
    font-weight: 600;
    transition: all var(--tr);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    letter-spacing: .3px
}

.btn-auth:hover {
    background: var(--accent2);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(45, 106, 79, .28)
}

.btn-auth:active {
    transform: none
}

.btn-auth:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none
}

.auth-link {
    background: none;
    border: none;
    color: var(--accent);
    font-size: .84rem;
    font-weight: 600;
    cursor: pointer
}

.str-bar {
    height: 4px;
    border-radius: 2px;
    background: var(--border);
    overflow: hidden;
    margin-top: 4px
}

.str-fill {
    height: 100%;
    border-radius: 2px;
    transition: width .4s, background .4s;
    width: 0
}

.str-lbl {
    font-size: .69rem;
    margin-top: 3px;
    color: var(--text3)
}

.auth-div {
    text-align: center;
    font-size: .75rem;
    color: var(--text3);
    margin: 13px 0;
    position: relative
}

.auth-div::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border)
}

.auth-div span {
    background: var(--surface);
    padding: 0 10px;
    position: relative
}

.trow-auth {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 17px;
    padding-top: 13px;
    border-top: 1px solid var(--border)
}

.trow-auth span {
    font-size: .78rem;
    color: var(--text2)
}

.tgl {
    width: 40px;
    height: 21px;
    background: var(--border);
    border-radius: 11px;
    border: none;
    position: relative;
    transition: background var(--tr);
    flex-shrink: 0
}

.tgl::after {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    background: #fff;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: transform var(--tr);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2)
}

[data-theme="dark"] .tgl {
    background: var(--accent)
}

[data-theme="dark"] .tgl::after {
    transform: translateX(19px)
}

/* ── APP SHELL ────────────────────────────────── */
#app {
    display: none
}

#app.visible {
    display: flex;
    min-height: 100vh
}

/* ── SIDEBAR ──────────────────────────────────── */
#sidebar {
    width: var(--sw);
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 200;
    transition: background var(--tr), border-color var(--tr), transform var(--tr);
    overflow-y: auto
}

.sl {
    padding: 18px 18px 13px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px
}

.sl .logo-box {
    width: 34px;
    height: 34px;
    font-size: 15px;
    border-radius: 9px
}

.sl .brand h2 {
    font-size: .95rem;
    letter-spacing: -.3px;
    line-height: 1.2
}

.sl .brand span {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: .67rem;
    color: var(--text3)
}

.sn {
    flex: 1;
    padding: 10px 9px
}

.nl {
    font-size: .59rem;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text3);
    padding: 7px 10px 3px;
    margin-top: 6px
}

.ni {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 11px;
    border-radius: var(--rs);
    color: var(--text2);
    font-size: .86rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--tr);
    margin-bottom: 2px;
    border: none;
    background: none;
    width: 100%;
    text-align: left
}

.ni i {
    width: 16px;
    text-align: center;
    font-size: .88rem
}

.ni:hover {
    background: var(--surface2);
    color: var(--text)
}

.ni.active {
    background: var(--accent-light);
    color: var(--accent);
    font-weight: 600
}

.sf {
    padding: 11px 11px 15px;
    border-top: 1px solid var(--border)
}

.upill {
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--surface2);
    border-radius: var(--rs);
    padding: 8px 11px;
    margin-bottom: 9px
}

.uav {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    flex-shrink: 0
}

.ui .un {
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.ui .ur {
    font-size: .65rem;
    color: var(--text3)
}

.lob {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 7px 11px;
    border: 1.5px solid var(--border);
    border-radius: var(--rs);
    background: transparent;
    color: var(--text2);
    font-size: .8rem;
    font-weight: 500;
    transition: all var(--tr);
    margin-bottom: 8px
}

.lob:hover {
    border-color: var(--danger);
    color: var(--danger);
    background: var(--danger-light)
}

.trow {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.trow span {
    font-size: .75rem;
    color: var(--text3)
}

#sbo {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .4);
    z-index: 190;
    backdrop-filter: blur(2px)
}

#sbo.open {
    display: block
}

/* ── MAIN ─────────────────────────────────────── */
#main {
    margin-left: var(--sw);
    flex: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column
}

.topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 12px 22px;
    display: flex;
    align-items: center;
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 100;
    transition: background var(--tr)
}

.hbg {
    display: none;
    width: 35px;
    height: 35px;
    border: 1.5px solid var(--border);
    border-radius: var(--rs);
    background: transparent;
    color: var(--text2);
    font-size: .88rem;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.tt {
    flex: 1
}

.tt h1 {
    font-size: 1.15rem;
    letter-spacing: -.35px
}

.tt p {
    font-size: .72rem;
    color: var(--text3);
    margin-top: 1px
}

.ta {
    display: flex;
    gap: 7px;
    align-items: center
}

.btn {
    padding: 7px 13px;
    border-radius: var(--rs);
    border: none;
    font-size: .82rem;
    font-weight: 500;
    transition: all var(--tr);
    display: inline-flex;
    align-items: center;
    gap: 6px
}

.bp {
    background: var(--accent);
    color: #fff
}

.bp:hover {
    background: var(--accent2)
}

.bo {
    background: transparent;
    border: 1.5px solid var(--border);
    color: var(--text2)
}

.bo:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-light)
}

.bd {
    background: var(--danger);
    color: #fff
}

.bd:hover {
    opacity: .85
}

.bs {
    padding: 5px 11px;
    font-size: .76rem
}

.pc {
    padding: 22px;
    flex: 1
}

.page {
    display: none;
    animation: fadeIn .24s ease
}

.page.active {
    display: block
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(6px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

/* ── SPINNER overlay ─────────────────────────── */
.loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .35);
    z-index: 500;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px)
}

.loading-overlay.show {
    display: flex
}

.spinner {
    width: 44px;
    height: 44px;
    border: 4px solid rgba(255, 255, 255, .2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .7s linear infinite
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

/* ── SUMMARY CARDS ────────────────────────────── */
.sg {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 13px;
    margin-bottom: 18px
}

.sc {
    background: var(--surface);
    border-radius: var(--r);
    padding: 17px 19px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden
}

.sc::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 65px;
    height: 65px;
    border-radius: 0 var(--r) 0 65px;
    opacity: .08
}

.sc.bal::before {
    background: var(--accent)
}

.sc.inc::before {
    background: var(--income)
}

.sc.exp::before {
    background: var(--expense)
}

.ci {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    margin-bottom: 10px
}

.sc.bal .ci {
    background: var(--accent-light);
    color: var(--accent)
}

.sc.inc .ci {
    background: var(--accent-light);
    color: var(--income)
}

.sc.exp .ci {
    background: var(--danger-light);
    color: var(--expense)
}

.cl {
    font-size: .68rem;
    color: var(--text3);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-bottom: 4px
}

.ca {
    font-family: 'Syne', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.5px
}

.cs {
    font-size: .7rem;
    color: var(--text3);
    margin-top: 2px
}

/* ── CHARTS ───────────────────────────────────── */
.cg {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 13px;
    margin-bottom: 18px
}

.cc {
    background: var(--surface);
    border-radius: var(--r);
    padding: 17px 19px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow)
}

.cc h3 {
    font-size: .9rem;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap
}

.cc canvas {
    max-height: 190px
}

.rc {
    background: var(--surface);
    border-radius: var(--r);
    padding: 17px 19px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow)
}

.sh {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 7px
}

.sh h3 {
    font-size: .9rem
}

/* ── TXN ITEMS ────────────────────────────────── */
.tl {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.ti {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 11px;
    border-radius: var(--rs);
    background: var(--surface2);
    transition: background var(--tr)
}

.ti:hover {
    background: var(--border)
}

.tci {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    flex-shrink: 0
}

.tif {
    flex: 1;
    min-width: 0
}

.tn {
    font-weight: 500;
    font-size: .84rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.tm {
    font-size: .7rem;
    color: var(--text3);
    margin-top: 1px
}

.tam {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: .9rem;
    white-space: nowrap
}

.tam.income {
    color: var(--income)
}

.tam.expense {
    color: var(--expense)
}

.tac {
    display: flex;
    gap: 3px
}

.ib {
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    transition: all var(--tr)
}

.ib:hover.e {
    background: var(--accent-light);
    color: var(--accent)
}

.ib:hover.d {
    background: var(--danger-light);
    color: var(--danger)
}

.es {
    text-align: center;
    padding: 32px 16px;
    color: var(--text3)
}

.es i {
    font-size: 2rem;
    margin-bottom: 9px;
    display: block;
    opacity: .32
}

.es p {
    font-size: .83rem
}

/* ── TRANSACTIONS PAGE ────────────────────────── */
.fb {
    display: flex;
    gap: 7px;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 11px 14px;
    margin-bottom: 14px;
    flex-wrap: wrap
}

.fb input,
.fb select {
    background: var(--surface2);
    border: 1.5px solid var(--border);
    border-radius: var(--rs);
    padding: 6px 10px;
    color: var(--text);
    font-size: .8rem;
    outline: none;
    transition: border-color var(--tr)
}

.fb input:focus,
.fb select:focus {
    border-color: var(--accent)
}

.fb input[type="search"] {
    flex: 1;
    min-width: 120px
}

.ttc {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    overflow: hidden
}

.tth {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 140px;
    gap: 7px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--border);
    font-size: .67rem;
    font-weight: 600;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: .8px;
    background: var(--surface2)
}

.ttb {
    padding: 7px
}

.tr2 {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 140px;
    gap: 7px;
    padding: 8px 7px;
    border-radius: var(--rs);
    align-items: center;
    transition: background var(--tr)
}

.tr2:hover {
    background: var(--surface2)
}

.tr2 .cd {
    display: flex;
    align-items: center;
    gap: 7px;
    overflow: hidden
}

.tr2 .cd .tci {
    width: 27px;
    height: 27px;
    font-size: .72rem
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 20px;
    font-size: .68rem;
    font-weight: 600
}

.badge.income {
    background: var(--accent-light);
    color: var(--income)
}

.badge.expense {
    background: var(--danger-light);
    color: var(--expense)
}

/* ── BUDGET ───────────────────────────────────── */
.bg2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 13px
}

.bca {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 17px;
    box-shadow: var(--shadow)
}

.bch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 11px
}

.bch .l {
    display: flex;
    align-items: center;
    gap: 8px
}

.cl2 {
    font-weight: 600;
    font-size: .88rem
}

.cs2 {
    font-size: .71rem;
    color: var(--text3);
    margin-top: 1px
}

.pw {
    height: 7px;
    background: var(--surface2);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 6px
}

.pb {
    height: 100%;
    border-radius: 4px;
    transition: width .6s cubic-bezier(.4, 0, .2, 1)
}

.pb.safe {
    background: var(--accent)
}

.pb.warn {
    background: var(--warning)
}

.pb.over {
    background: var(--danger)
}

.bm {
    display: flex;
    justify-content: space-between;
    font-size: .71rem;
    color: var(--text3)
}

.bb {
    font-weight: 700;
    color: var(--text)
}

.abc {
    background: var(--surface);
    border: 2px dashed var(--border);
    border-radius: var(--r);
    padding: 20px;
    box-shadow: var(--shadow);
    margin-bottom: 18px
}

.abc h3 {
    font-size: .9rem;
    margin-bottom: 12px
}

.fr {
    display: flex;
    gap: 9px;
    align-items: flex-end;
    flex-wrap: wrap
}

.fr .fg2 {
    flex: 1;
    min-width: 100px;
    display: flex;
    flex-direction: column;
    gap: 4px
}

.fg2 label {
    font-size: .7rem;
    font-weight: 600;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: .6px
}

.fg2 input,
.fg2 select {
    background: var(--surface2);
    border: 1.5px solid var(--border);
    border-radius: var(--rs);
    padding: 7px 10px;
    color: var(--text);
    font-size: .84rem;
    outline: none;
    width: 100%;
    transition: border-color var(--tr)
}

.fg2 input:focus,
.fg2 select:focus {
    border-color: var(--accent)
}

/* ── REPORTS ──────────────────────────────────── */
.rg {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 13px;
    margin-bottom: 18px
}

.rca {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 17px 19px;
    box-shadow: var(--shadow)
}

.rca h3 {
    font-size: .9rem;
    margin-bottom: 12px
}

.rca canvas {
    max-height: 205px
}

.sl2 {
    display: flex;
    flex-direction: column;
    gap: 7px
}

.sr {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: var(--rs);
    background: var(--surface2)
}

.sc2 {
    width: 9px;
    height: 9px;
    border-radius: 3px;
    flex-shrink: 0
}

.sn2 {
    flex: 1;
    font-size: .81rem;
    font-weight: 500
}

.sv {
    font-size: .81rem;
    font-weight: 700
}

.sp {
    font-size: .71rem;
    color: var(--text3)
}

.exb {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 13px 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--shadow);
    flex-wrap: wrap;
    gap: 10px
}

.exb p {
    font-size: .81rem;
    color: var(--text2)
}

/* ── SETTINGS ─────────────────────────────────── */
.ss {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 19px 21px;
    margin-bottom: 14px;
    box-shadow: var(--shadow)
}

.ss h3 {
    font-size: .9rem;
    margin-bottom: 14px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--border)
}

.stg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px
}

.fg3 {
    display: flex;
    flex-direction: column;
    gap: 4px
}

.fg3 label {
    font-size: .7rem;
    font-weight: 600;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: .6px
}

.fg3 input,
.fg3 select {
    background: var(--surface2);
    border: 1.5px solid var(--border);
    border-radius: var(--rs);
    padding: 8px 10px;
    color: var(--text);
    font-size: .85rem;
    outline: none;
    transition: border-color var(--tr)
}

.fg3 input:focus,
.fg3 select:focus {
    border-color: var(--accent)
}

.setr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--border)
}

.setr:last-child {
    border-bottom: none
}

.sl3 {
    font-size: .84rem;
    font-weight: 500
}

.ss3 {
    font-size: .7rem;
    color: var(--text3);
    margin-top: 1px
}

.dz {
    border-color: var(--danger) !important
}

.dz h3 {
    color: var(--danger)
}

/* ── MODAL ────────────────────────────────────── */
.mo {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 300;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(3px);
    padding: 18px
}

.mo.open {
    display: flex
}

.md {
    background: var(--surface);
    border-radius: var(--r);
    padding: 24px;
    width: min(450px, 100%);
    box-shadow: var(--shadow-md);
    animation: slideUp .24s ease;
    border: 1px solid var(--border)
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(16px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.mh {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px
}

.mh h2 {
    font-size: 1.02rem
}

.mc {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: var(--surface2);
    color: var(--text2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .83rem;
    transition: all var(--tr)
}

.mc:hover {
    background: var(--danger-light);
    color: var(--danger)
}

.md .fg {
    margin-bottom: 11px
}

.md .fg label {
    font-size: .71rem;
    font-weight: 600;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: .6px;
    display: block;
    margin-bottom: 3px
}

.md .fg input,
.md .fg select {
    width: 100%;
    background: var(--surface2);
    border: 1.5px solid var(--border);
    border-radius: var(--rs);
    padding: 8px 11px;
    color: var(--text);
    font-size: .86rem;
    outline: none;
    transition: border-color var(--tr)
}

.md .fg input:focus,
.md .fg select:focus {
    border-color: var(--accent)
}

.tyt {
    display: flex;
    border: 1.5px solid var(--border);
    border-radius: var(--rs);
    overflow: hidden;
    margin-bottom: 11px
}

.tyb {
    flex: 1;
    padding: 8px;
    border: none;
    background: transparent;
    font-size: .82rem;
    font-weight: 500;
    color: var(--text2);
    transition: all var(--tr)
}

.tyb.active.income {
    background: var(--accent-light);
    color: var(--income)
}

.tyb.active.expense {
    background: var(--danger-light);
    color: var(--expense)
}

.mf {
    display: flex;
    gap: 7px;
    justify-content: flex-end;
    margin-top: 16px
}

/* ── DB INFO BADGE ────────────────────────────── */
.db-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--accent-light);
    color: var(--accent);
    border-radius: var(--rs);
    padding: 6px 10px;
    font-size: .73rem;
    font-weight: 500;
    margin-bottom: 9px
}

.db-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
    animation: pulse 1.8s infinite
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: .4
    }
}

/* ── TOAST ────────────────────────────────────── */
#tc {
    position: fixed;
    bottom: 18px;
    right: 18px;
    z-index: 500;
    display: flex;
    flex-direction: column;
    gap: 6px
}

.toast {
    background: var(--text);
    color: var(--bg);
    padding: 8px 15px;
    border-radius: var(--rs);
    font-size: .81rem;
    font-weight: 500;
    box-shadow: var(--shadow-md);
    animation: tin .24s ease;
    display: flex;
    align-items: center;
    gap: 7px;
    max-width: 280px
}

@keyframes tin {
    from {
        opacity: 0;
        transform: translateX(16px)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

.toast.success i {
    color: #52b788
}

.toast.error i {
    color: #e57373
}

.toast.info i {
    color: #63b3ed
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 3px 8px;
    font-size: .7rem;
    font-weight: 500;
    color: var(--text2)
}

.mt16 {
    margin-top: 16px
}

/* ── RESPONSIVE ───────────────────────────────── */
@media(max-width:1000px) {
    .cg {
        grid-template-columns: 1fr
    }

    .rg {
        grid-template-columns: 1fr
    }

    .sg {
        grid-template-columns: repeat(2, 1fr)
    }

    .bg2 {
        grid-template-columns: 1fr
    }

    .stg {
        grid-template-columns: 1fr
    }
}

@media(max-width:768px) {
    #sidebar {
        transform: translateX(-100%)
    }

    #sidebar.open {
        transform: translateX(0)
    }

    #main {
        margin-left: 0
    }

    .hbg {
        display: flex
    }

    .pc {
        padding: 14px
    }

    .topbar {
        padding: 10px 14px
    }

    .sg {
        grid-template-columns: 1fr
    }

    .tth {
        display: none
    }

    .tr2 {
        grid-template-columns: 1fr
    }

    .tr2 .col-cat,
    .tr2 .col-type,
    .tr2 .col-date {
        display: none
    }

    .auth-card {
        padding: 26px 20px
    }
}

@media(max-width:480px) {
    .ta .bo {
        display: none
    }

    .md {
        padding: 18px 14px
    }

    .bg2 {
        grid-template-columns: 1fr
    }

    .rg {
        grid-template-columns: 1fr
    }
}