/* Theme toggle */
html {
    background: #f8fafc;
}

.theme-toggle {
    position: relative;
    width: 36px;
    height: 36px;
    margin-right: auto;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    background: #fff;
    color: #334155;
    display: inline-grid;
    place-items: center;
    padding: 0;
    cursor: pointer;
    transition: color .16s ease, border-color .16s ease, background-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.theme-toggle:hover {
    color: #1d4ed8;
    border-color: #93c5fd;
    background: #eff6ff;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(37, 99, 235, .12);
}

.theme-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .24);
}

.theme-icon {
    width: 18px;
    height: 18px;
    grid-area: 1 / 1;
}

.theme-icon-sun {
    display: inline-flex;
}

.theme-icon-moon {
    display: none;
}

.theme-icon svg {
    width: 18px;
    height: 18px;
}

/* Circular preview and theme reveal */
.theme-circle-preview {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    border: 0;
    opacity: 0;
    pointer-events: none;
    clip-path: circle(0 at var(--theme-origin-x) var(--theme-origin-y));
    transition: clip-path .32s cubic-bezier(.22, .75, .25, 1), opacity .08s linear;
    z-index: 10000;
}

.theme-circle-preview.is-visible {
    opacity: 1;
    clip-path: circle(var(--theme-preview-radius) at var(--theme-origin-x) var(--theme-origin-y));
}

.theme-circle-preview-ring {
    position: fixed;
    top: var(--theme-origin-y);
    left: var(--theme-origin-x);
    border: 1px solid rgba(96, 165, 250, .68);
    border-radius: 50%;
    box-shadow: 0 0 18px rgba(59, 130, 246, .18);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0);
    transition: transform .32s cubic-bezier(.22, .75, .25, 1), opacity .18s ease;
    z-index: 10001;
}

.theme-circle-preview-ring.is-visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.theme-transition,
.theme-transition * {
    transition: none !important;
}

.theme-transition::view-transition-old(root) {
    animation: none;
    z-index: 1;
}

.theme-transition::view-transition-new(root) {
    animation: theme-circle-reveal .58s cubic-bezier(.22, .75, .25, 1);
    z-index: 2;
}

@keyframes theme-circle-reveal {
    from {
        clip-path: circle(var(--theme-preview-radius) at var(--theme-origin-x) var(--theme-origin-y));
    }

    to {
        clip-path: circle(var(--theme-reveal-radius) at var(--theme-origin-x) var(--theme-origin-y));
    }
}

html,
body,
.page,
.top-row,
.workspace,
.banks-column,
.accounts-column,
.transactions-column,
.bank-card,
.account-item,
.tx-item,
.popup-modal,
.login-page,
.login-panel {
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

/* Dark theme */
html[data-theme="dark"] {
    background: #0b1120;
}

html[data-theme="dark"] body {
    background: #0b1120;
    color: #e2e8f0;
}

html[data-theme="dark"] .page,
html[data-theme="dark"] main {
    background: #0b1120;
}

html[data-theme="dark"] .top-row,
html[data-theme="dark"] .auth-bar {
    background: #111827;
    border-color: #273449;
    color: #cbd5e1;
}

html[data-theme="dark"] .theme-toggle {
    background: #1e293b;
    border-color: #475569;
    color: #f8fafc;
}

html[data-theme="dark"] .theme-toggle:hover {
    background: #263449;
    border-color: #60a5fa;
    color: #93c5fd;
}

html[data-theme="dark"] .theme-icon-sun {
    display: none;
}

html[data-theme="dark"] .theme-icon-moon {
    display: inline-flex;
}

html[data-theme="dark"] .workspace {
    background: linear-gradient(180deg, #0b1120 0%, #0f172a 100%);
}

html[data-theme="dark"] .banks-column,
html[data-theme="dark"] .accounts-column,
html[data-theme="dark"] .transactions-column,
html[data-theme="dark"] .bank-card,
html[data-theme="dark"] .account-item,
html[data-theme="dark"] .tx-item,
html[data-theme="dark"] .popup-modal,
html[data-theme="dark"] .login-panel {
    background: #111827;
    border-color: #2f3d52;
    color: #e2e8f0;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .22);
}

html[data-theme="dark"] .bank-card:hover,
html[data-theme="dark"] .account-item:hover,
html[data-theme="dark"] .tx-item:hover {
    border-color: #3b82f6;
    box-shadow: 0 7px 16px rgba(0, 0, 0, .28);
}

html[data-theme="dark"] .bank-card.selected,
html[data-theme="dark"] .account-item.selected {
    background: #172554;
    border-color: #3b82f6;
}

html[data-theme="dark"] .tx-item.tx-in {
    background: rgba(22, 163, 74, .13);
    border-color: rgba(74, 222, 128, .32);
}

html[data-theme="dark"] .tx-item.tx-out {
    background: rgba(245, 158, 11, .13);
    border-color: rgba(251, 191, 36, .34);
}

html[data-theme="dark"] .bank-meta,
html[data-theme="dark"] .meta,
html[data-theme="dark"] .tx-meta,
html[data-theme="dark"] .form-section-title,
html[data-theme="dark"] .login-field,
html[data-theme="dark"] .empty {
    color: #94a3b8;
}

html[data-theme="dark"] .manual-status {
    color: #cbd5e1;
}

html[data-theme="dark"] .input,
html[data-theme="dark"] .search-input,
html[data-theme="dark"] select,
html[data-theme="dark"] .login-field input,
html[data-theme="dark"] .tool-btn,
html[data-theme="dark"] .qr-btn,
html[data-theme="dark"] .coince-btn,
html[data-theme="dark"] .delete-btn,
html[data-theme="dark"] .close-btn,
html[data-theme="dark"] .password-toggle-btn {
    background: #1e293b;
    border-color: #475569;
    color: #e2e8f0;
}

html[data-theme="dark"] .input:hover,
html[data-theme="dark"] .search-input:hover,
html[data-theme="dark"] select:hover,
html[data-theme="dark"] .login-field input:hover,
html[data-theme="dark"] .tool-btn:hover,
html[data-theme="dark"] .qr-btn:hover,
html[data-theme="dark"] .close-btn:hover,
html[data-theme="dark"] .password-toggle-btn:hover {
    background: #263449;
    border-color: #60a5fa;
}

html[data-theme="dark"] .input:focus,
html[data-theme="dark"] .search-input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] .login-field input:focus {
    background: #1e293b;
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, .2);
}

html[data-theme="dark"] .tool-btn.active {
    background: #172554;
    border-color: #60a5fa;
    color: #93c5fd;
}

html[data-theme="dark"] .delete-btn {
    border-color: #f87171;
    color: #f87171;
}

html[data-theme="dark"] .delete-btn:hover {
    background: rgba(127, 29, 29, .28);
}

html[data-theme="dark"] .coince-btn.unlinked {
    border-color: #fbbf24;
    color: #fbbf24;
}

html[data-theme="dark"] .coince-btn.linked {
    border-color: #4ade80;
    color: #4ade80;
}

html[data-theme="dark"] .toggle-slider {
    background: #475569;
}

html[data-theme="dark"] .in {
    color: #4ade80;
}

html[data-theme="dark"] .out {
    color: #fbbf24;
}

html[data-theme="dark"] .modal-backdrop {
    background: rgba(2, 6, 23, .72);
}

html[data-theme="dark"] .qr-result {
    border-color: #334155;
}

html[data-theme="dark"] .qr-image {
    border-color: #475569;
}

html[data-theme="dark"] .login-page {
    background: #0b1120;
}

html[data-theme="dark"] .login-panel h1 {
    color: #f8fafc;
}

html[data-theme="dark"] .login-error {
    background: rgba(127, 29, 29, .28);
    border-color: #7f1d1d;
    color: #fecaca;
}

html[data-theme="dark"] #components-reconnect-modal {
    background-color: #111827;
    color: #e2e8f0;
    box-shadow: 0 12px 36px rgba(0, 0, 0, .48);
}

html[data-theme="dark"] #components-reconnect-modal::backdrop {
    background-color: rgba(2, 6, 23, .68);
}

html[data-theme="dark"] #components-reconnect-modal button {
    background-color: #2563eb;
    color: #fff;
}

html[data-theme="dark"] #components-reconnect-modal button:hover {
    background-color: #1d4ed8;
}

@media (prefers-reduced-motion: reduce) {
    .theme-circle-preview,
    .theme-circle-preview-ring {
        transition: none;
    }
}