:root, [data-theme="basic"] { --bg-primary: #1a1a2e; --bg-secondary: #16213e; --border-color: #0f3460; --accent: #e94560; --accent-hover: #c73650; --text-primary: #e0e0e0; --text-muted: #888; --text-dim: #555; --success: #4ade80; --warning: #fbbf24; --link-color: #63b3ed; --link-hover: #90cdf4; --hover-bg: rgba(233, 69, 96, 0.05); --accent-bg: rgba(233, 69, 96, 0.12); --border-dim: rgba(15, 52, 96, 0.5); }

[data-theme="retro"] { --bg-primary: #181818; --bg-secondary: #222; --border-color: #444; --accent: #ED9055; --accent-hover: #d07840; --text-primary: #eee; --text-muted: #999; --text-dim: #666; --success: #30B2A1; --warning: #e6b830; --link-color: #7ec8e3; --link-hover: #a8dcf0; --hover-bg: rgba(237, 144, 85, 0.08); --accent-bg: rgba(237, 144, 85, 0.12); --border-dim: rgba(68, 68, 68, 0.5); }

* { margin: 0; padding: 0; box-sizing: border-box; }

body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg-primary); color: var(--text-primary); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.container { max-width: 1200px; margin: 0 auto; }

.container.narrow { max-width: 900px; }

.container.compact { max-width: 640px; }

h1 { color: var(--accent); font-size: 24px; margin-bottom: 4px; }

.subtitle { color: var(--text-muted); font-size: 13px; margin-bottom: 24px; }

.back { color: var(--text-muted); text-decoration: none; font-size: 13px; display: inline-block; margin-bottom: 24px; }

.back:hover { color: var(--accent); }

.section { margin-bottom: 32px; }

.section-label { color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 12px; }

.toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }

.search-box { padding: 8px 14px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-secondary); color: var(--text-primary); font-size: 14px; outline: none; flex: 1; min-width: 180px; }

.search-box:focus { border-color: var(--accent); }

.filter-btn { padding: 8px 16px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-secondary); color: var(--text-muted); font-size: 13px; cursor: pointer; white-space: nowrap; }

.filter-btn.active { border-color: var(--accent); color: var(--accent); }

.loading { color: var(--text-muted); text-align: center; padding: 40px; }

.muted { color: var(--text-dim); }

.btn { padding: 8px 20px; border: none; border-radius: 8px; font-size: 14px; cursor: pointer; }

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

.btn-primary:hover { background: var(--accent-hover); }

.btn-primary:disabled { background: var(--text-dim); cursor: not-allowed; }

.btn-secondary { background: transparent; border: 1px solid var(--border-color); color: var(--text-muted); }

.btn-secondary:hover { border-color: var(--accent); color: var(--text-primary); }

.btn-sm { padding: 4px 12px; font-size: 12px; border-radius: 6px; }

.btn-danger { background: transparent; border: 1px solid var(--accent); color: var(--accent); }

.btn-danger:hover { background: var(--accent); color: #fff; }

.btn-add { background: none; border: 1px dashed var(--border-color); color: var(--text-muted); padding: 8px; border-radius: 6px; width: 100%; cursor: pointer; font-size: 13px; margin-bottom: 16px; }

.btn-add:hover { border-color: var(--accent); color: var(--accent); }

.print-btn { padding: 8px 20px; border: 1px solid var(--border-color); border-radius: 8px; background: transparent; color: var(--text-muted); font-size: 13px; cursor: pointer; }

.print-btn:hover { border-color: var(--accent); color: var(--text-primary); }

.panel { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px; overflow-x: auto; }

.panel.padded { padding: 24px; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }

th { text-align: left; color: var(--text-muted); padding: 10px 12px; border-bottom: 1px solid var(--border-color); font-weight: 500; position: sticky; top: 0; background: var(--bg-secondary); white-space: nowrap; }

td { padding: 10px 12px; border-bottom: 1px solid var(--border-dim); vertical-align: top; }

tbody tr { cursor: pointer; transition: background .15s; }

tbody tr:hover { background: var(--hover-bg); }

tr.allocated { opacity: 0.6; }

tr.selected { background: var(--accent-bg); }

.empty { color: var(--text-dim); text-align: center; padding: 32px; }

.count { color: var(--text-muted); font-size: 13px; margin-bottom: 8px; }

.actions { display: flex; gap: 6px; }

th[data-sort] { cursor: pointer; user-select: none; }

th[data-sort]:hover { color: var(--accent); }

th[data-sort].sort-active { color: var(--accent); }

th[data-sort]::after { content: ''; margin-left: 4px; font-size: 10px; }

th[data-sort].sort-asc::after { content: ' \25B2'; }

th[data-sort].sort-desc::after { content: ' \25BC'; }

.pager { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }

.pager button { padding: 6px 14px; border: 1px solid var(--border-color); border-radius: 6px; background: var(--bg-secondary); color: var(--text-primary); cursor: pointer; font-size: 13px; }

.pager button:disabled { opacity: .3; cursor: not-allowed; }

.pager span { padding: 6px 10px; color: var(--text-muted); font-size: 13px; }

.amount { font-weight: 600; white-space: nowrap; }

.amount.pos { color: var(--success); }

.amount.neg { color: var(--accent); }

.alloc-status { font-size: 11px; }

.alloc-status.done { color: var(--success); }

.alloc-status.partial { color: var(--warning); }

.alloc-status.none { color: var(--text-dim); }

.form-group { margin-bottom: 14px; }

.form-group label { display: block; color: var(--text-muted); font-size: 12px; margin-bottom: 4px; }

.form-group input, .form-group select { width: 100%; padding: 8px 10px; border: 1px solid var(--border-color); border-radius: 6px; background: var(--bg-primary); color: var(--text-primary); font-size: 13px; }

.form-group input:focus, .form-group select:focus { border-color: var(--accent); outline: none; }

.form-group textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--border-color); border-radius: 6px; background: var(--bg-primary); color: var(--text-primary); font-size: 13px; font-family: inherit; resize: vertical; }

.form-group textarea:focus { border-color: var(--accent); outline: none; }

.form-row { display: flex; gap: 12px; }

.form-row .form-group { flex: 1; }

.checkbox-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; }

.checkbox-row input[type="checkbox"] { width: 18px; height: 18px; }

.note-input { width: 100%; padding: 8px 10px; border: 1px solid var(--border-color); border-radius: 6px; background: var(--bg-primary); color: var(--text-primary); font-size: 13px; margin-bottom: 12px; }

.overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 100; justify-content: center; align-items: center; }

.overlay.open { display: flex; }

.modal { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px; padding: 28px; width: 520px; max-width: 95vw; max-height: 90vh; overflow-y: auto; }

.modal h2 { font-size: 18px; color: var(--accent); margin-bottom: 16px; }

.modal .tx-info { color: var(--text-muted); font-size: 13px; margin-bottom: 20px; line-height: 1.6; }

.modal .tx-info strong { color: var(--text-primary); }

.modal-close { float: right; background: none; border: none; color: var(--text-muted); font-size: 22px; cursor: pointer; line-height: 1; }

.modal-close:hover { color: var(--accent); }

.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

.error-msg { color: var(--accent); font-size: 13px; margin-top: 8px; }

.alloc-row { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }

.alloc-row select { flex: 1; padding: 8px 10px; border: 1px solid var(--border-color); border-radius: 6px; background: var(--bg-primary); color: var(--text-primary); font-size: 13px; }

.alloc-row input { width: 110px; padding: 8px 10px; border: 1px solid var(--border-color); border-radius: 6px; background: var(--bg-primary); color: var(--text-primary); font-size: 13px; text-align: right; }

.alloc-row input:focus, .alloc-row select:focus { border-color: var(--accent); outline: none; }

.alloc-row .remove-btn { background: none; border: none; color: var(--accent); font-size: 18px; cursor: pointer; padding: 4px 8px; }

.alloc-rest { font-size: 13px; margin-bottom: 16px; }

.alloc-rest.ok { color: var(--success); }

.alloc-rest.warn { color: var(--warning); }

.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; white-space: nowrap; }

.badge.skatbank { background: #0f3460; color: var(--link-color); }

.badge.n26 { background: #2d1b4e; color: #b794f4; }

.badge.gocardless { background: #1b4e2d; color: var(--success); }

.badge.sumup { background: #4e3b1b; color: #f6ad55; }

.badge.sumup-artikel { background: #4e3b1b; color: #fbd38d; }

.badge.gc { background: #1b4e2d; color: var(--success); }

.badge.offline { background: #4a1942; color: var(--accent); }

.badge.profile { background: #0f3460; color: var(--link-color); }

.badge.no-profile { background: #3a2a0a; color: var(--warning); }

.badge.gc-active { background: #1b4e2d; color: var(--success); }

.badge.gc-inactive { background: #3a2a0a; color: var(--warning); }

.badge.gc-cancelled { background: #4a1942; color: var(--accent); }

.badge.admin { background: #4a1942; color: #d6bcfa; }

.badge.income { background: #1b4e2d; color: var(--success); }

.badge.expense { background: #4a1942; color: var(--accent); }

.badge.both { background: #0f3460; color: var(--link-color); }

.receipt-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 10px; font-size: 11px; }

.receipt-badge.has { background: rgba(74, 222, 128, 0.15); color: var(--success); }

.receipt-badge.missing { background: rgba(233, 69, 96, 0.15); color: var(--accent); }

.tag { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; background: #0f3460; color: var(--link-color); margin: 1px 2px; white-space: nowrap; }

.tag-amount { color: var(--text-muted); margin-left: 2px; }

.match-tags { display: inline-flex; flex-wrap: wrap; gap: 3px; vertical-align: middle; }

.match-tag { display: inline-block; padding: 1px 6px; border-radius: 8px; font-size: 10px; white-space: nowrap; }

.match-tag.ref { background: rgba(74, 222, 128, 0.18); color: var(--success); }

.match-tag.kw { background: rgba(99, 179, 237, 0.18); color: var(--link-color); }

.match-tag.date { background: rgba(251, 191, 36, 0.18); color: var(--warning); }

.avatar-link { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--border-color); color: var(--text-muted); transition: border-color .2s, color .2s; }

.avatar-link:hover { border-color: var(--accent); color: var(--accent); }

.avatar-link svg { display: block; }

.avatar-link.lg { width: 34px; height: 34px; }

.login-box, .consent-box { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 16px; padding: 40px; }

.login-box h1, .consent-box h1 { text-align: center; }

.login-box .subtitle, .consent-box .subtitle { text-align: center; margin-bottom: 32px; }

.login-box .error, .consent-box .error { color: var(--accent); font-size: 13px; text-align: center; margin-bottom: 12px; display: none; }

.login-box label, .consent-box label { display: block; font-size: 13px; color: var(--text-muted); margin-bottom: 4px; }

.login-box input, .consent-box input { width: 100%; padding: 10px 14px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-primary); color: var(--text-primary); font-size: 14px; margin-bottom: 16px; outline: none; }

.login-box input:focus, .consent-box input:focus { border-color: var(--accent); }

.login-box button, .consent-box button { width: 100%; padding: 12px; background: var(--accent); color: #fff; border: none; border-radius: 8px; font-size: 14px; cursor: pointer; margin-bottom: 12px; }

.login-box button:hover, .consent-box button:hover { background: var(--accent-hover); }

.login-box button:disabled, .consent-box button:disabled { background: var(--text-dim); cursor: not-allowed; }

.login-box { width: 380px; }

.login-box .success { color: var(--success); font-size: 13px; text-align: center; margin-bottom: 12px; display: none; }

.login-box .divider { text-align: center; color: var(--text-dim); font-size: 12px; margin: 16px 0; }

.login-box .magic-link { width: 100%; padding: 12px; background: transparent; color: var(--accent); border: 1px solid var(--accent); border-radius: 8px; font-size: 14px; cursor: pointer; }

.login-box .magic-link:hover { background: var(--accent-bg); }

.login-box .google-btn { width: 100%; padding: 12px; background: #fff; color: #333; border: none; border-radius: 8px; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 12px; }

.login-box .google-btn:hover { background: #f0f0f0; }

.login-box .google-btn svg { width: 18px; height: 18px; }

.consent-box { width: 420px; text-align: center; }

.consent-box .status { color: var(--text-muted); font-size: 14px; margin: 20px 0; }

.consent-box .spinner { display: inline-block; width: 24px; height: 24px; border: 3px solid var(--border-color); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; margin-bottom: 12px; }

.consent-box .error { margin: 12px 0; }

.consent-box .login-section { display: none; }

.consent-box .login-section label { text-align: left; }

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

.sub { color: var(--text-muted); margin-bottom: 32px; font-size: 14px; }

.kpis { display: flex; gap: 16px; flex-wrap: wrap; width: 100%; max-width: 860px; margin-bottom: 36px; }

.kpi { flex: 1; min-width: 200px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px; padding: 20px 24px; }

.kpi-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 6px; }

.kpi-value { font-size: 26px; font-weight: 700; color: var(--text-primary); }

.kpi-sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

.groups { display: flex; flex-direction: column; gap: 36px; width: 100%; max-width: 860px; }

.group-label { color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 4px; padding-left: 4px; }

.cards { display: flex; gap: 16px; flex-wrap: wrap; }

.card { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px; padding: 24px 32px; text-align: center; text-decoration: none; color: var(--text-primary); transition: border-color .2s, transform .2s; min-width: 140px; flex: 1; }

.card:hover { border-color: var(--accent); transform: translateY(-2px); }

.card h2 { font-size: 18px; margin-bottom: 6px; }

.card p { color: var(--text-muted); font-size: 12px; }

.top-right { position: absolute; top: 16px; right: 24px; display: flex; gap: 14px; align-items: center; }

.top-right a { color: var(--text-muted); text-decoration: none; font-size: 13px; }

.top-right a:hover { color: var(--accent); }

.topbar { background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); display: flex; align-items: center; padding: 0 16px; height: 44px; flex-shrink: 0; gap: 8px; overflow-x: auto; }

.topbar a { text-decoration: none; white-space: nowrap; }

.brand { color: var(--accent); font-weight: 700; font-size: 15px; margin-right: 12px; }

.sep { color: var(--border-color); margin: 0 4px; user-select: none; }

.nav-item { color: var(--text-muted); font-size: 13px; padding: 6px 10px; border-radius: 6px; transition: color .2s, background .2s; }

.nav-item:hover { color: var(--text-primary); background: var(--bg-primary); }

.nav-item.active { color: var(--accent); background: var(--bg-primary); }

.spacer { flex: 1; }

.logout { color: var(--text-dim); font-size: 12px; padding: 6px 10px; }

.logout:hover { color: var(--accent); }

iframe { flex: 1; border: none; width: 100%; }

.tabs { display: flex; gap: 0; margin-bottom: 24px; }

.tab { padding: 10px 24px; background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-muted); text-decoration: none; font-size: 14px; cursor: pointer; }

.tab:first-child { border-radius: 8px 0 0 8px; }

.tab:last-child { border-radius: 0 8px 8px 0; }

.tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.cat-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid var(--accent); border-radius: 8px; background: var(--accent-bg); color: var(--accent); font-size: 13px; }

.cat-chip .remove { cursor: pointer; font-size: 16px; line-height: 1; opacity: .7; }

.cat-chip .remove:hover { opacity: 1; }

.member-check { color: var(--success); font-size: 12px; margin-left: 4px; font-weight: bold; }

.gc-toggle { cursor: pointer; color: var(--success); font-size: 12px; margin-left: 6px; text-decoration: underline; white-space: nowrap; }

.gc-toggle:hover { color: #4ade80; }

.gc-fee { color: var(--text-muted); font-size: 11px; }

.gc-count { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; background: #1b4e2d; color: var(--success); margin-right: 6px; white-space: nowrap; }

tr.gc-sub td { padding: 4px 12px 4px 32px; font-size: 12px; border-bottom: 1px solid rgba(15, 52, 96, 0.3); background: rgba(27, 78, 45, 0.08); }

tr.gc-sub:hover { background: rgba(27, 78, 45, 0.12); }

tr.gc-sub td:first-child { color: var(--success); }

tr.gc-parent { cursor: default; }

.su-toggle { cursor: pointer; color: #f6ad55; font-size: 12px; margin-left: 6px; text-decoration: underline; white-space: nowrap; }

.su-toggle:hover { color: #fbd38d; }

.su-count { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; background: #4e3b1b; color: #f6ad55; margin-right: 6px; white-space: nowrap; }

tr.su-sub td { padding: 4px 12px 4px 32px; font-size: 12px; border-bottom: 1px solid rgba(15, 52, 96, 0.3); background: rgba(78, 59, 27, 0.08); }

tr.su-sub:hover { background: rgba(78, 59, 27, 0.12); }

tr.su-sub td:first-child { color: #f6ad55; }

tr.su-parent { cursor: default; }

.stats { display: flex; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }

.stat-card { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 10px; padding: 14px 20px; flex: 1; min-width: 180px; }

.stat-label { color: var(--text-muted); font-size: 12px; margin-bottom: 4px; }

.stat-value { font-size: 20px; font-weight: 700; }

.stat-value.ok { color: var(--success); }

.stat-value.warn { color: var(--accent); }

.stat-value.neutral { color: var(--text-primary); }

.modal.wide { width: 600px; }

.upload-area { border: 2px dashed var(--border-color); border-radius: 10px; padding: 24px; text-align: center; margin-bottom: 20px; cursor: pointer; transition: border-color .2s; }

.upload-area:hover, .upload-area.dragover { border-color: var(--accent); }

.upload-area p { color: var(--text-muted); font-size: 13px; }

.upload-area .icon { font-size: 32px; margin-bottom: 8px; color: var(--text-dim); }

.upload-input { display: none; }

.receipt-list { margin-top: 16px; }

.receipt-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--bg-primary); border-radius: 8px; margin-bottom: 8px; }

.receipt-item .ri-icon { font-size: 20px; color: var(--text-muted); flex-shrink: 0; }

.receipt-item .ri-name { flex: 1; font-size: 13px; color: var(--text-primary); word-break: break-all; }

.receipt-item .ri-size, .receipt-item .ri-date { color: var(--text-muted); font-size: 12px; white-space: nowrap; }

.receipt-item a { color: var(--link-color); text-decoration: none; font-size: 12px; white-space: nowrap; }

.receipt-item a:hover { color: var(--link-hover); }

.receipt-item .ri-delete { color: var(--accent); background: none; border: none; cursor: pointer; font-size: 12px; white-space: nowrap; }

.receipt-item .ri-delete:hover { text-decoration: underline; }

.receipt-empty { color: var(--text-dim); font-size: 13px; text-align: center; padding: 16px; }

.uploading { color: var(--text-muted); font-size: 13px; text-align: center; padding: 12px; }

.modal .section-label { font-size: 11px; letter-spacing: 1px; margin: 20px 0 8px; padding-top: 16px; border-top: 1px solid var(--border-dim); }

.doc-search-box { width: 100%; padding: 8px 12px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-primary); color: var(--text-primary); font-size: 13px; outline: none; margin-bottom: 8px; }

.doc-search-box:focus { border-color: var(--accent); }

.doc-suggest-list { max-height: 240px; overflow-y: auto; }

.doc-suggest-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; margin-bottom: 4px; cursor: pointer; transition: background .15s; }

.doc-suggest-item:hover { background: var(--hover-bg); }

.doc-suggest-item.linked { opacity: .45; cursor: default; }

.doc-suggest-info { flex: 1; min-width: 0; }

.doc-suggest-title { font-size: 13px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.doc-suggest-meta { font-size: 11px; color: var(--text-muted); }

.doc-suggest-btn { padding: 3px 10px; border-radius: 6px; font-size: 11px; border: 1px solid var(--border-color); background: transparent; color: var(--success); cursor: pointer; white-space: nowrap; flex-shrink: 0; }

.doc-suggest-btn:hover { background: rgba(74, 222, 128, 0.1); border-color: var(--success); }

.doc-suggest-btn.is-linked { color: var(--text-dim); cursor: default; }

.doc-suggest-empty { color: var(--text-dim); font-size: 12px; text-align: center; padding: 12px; }

.doc-tags { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }

.doc-tags .tag { font-size: 10px; padding: 1px 6px; }

.doc-linked-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--bg-primary); border-radius: 8px; margin-bottom: 6px; }

.doc-linked-item .dl-name { flex: 1; font-size: 13px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.doc-linked-item .dl-meta { color: var(--text-muted); font-size: 12px; white-space: nowrap; }

.doc-linked-item a { color: var(--link-color); text-decoration: none; font-size: 12px; white-space: nowrap; }

.doc-linked-item a:hover { color: var(--link-hover); }

.doc-linked-item .dl-remove { color: var(--accent); background: none; border: none; cursor: pointer; font-size: 12px; white-space: nowrap; }

.doc-linked-item .dl-remove:hover { text-decoration: underline; }

.doc-preview { position: fixed; z-index: 10001; pointer-events: none; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 10px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45); padding: 6px; display: none; max-width: 320px; }

.doc-preview.visible { display: block; pointer-events: auto; }

.doc-preview img { display: block; width: 300px; border-radius: 6px; background: #fff; }

.doc-preview .dp-loading { width: 300px; height: 400px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 12px; }

.doc-preview .dp-footer { text-align: center; padding: 6px 0 2px; }

.doc-preview .dp-footer a { color: var(--link-color); font-size: 11px; text-decoration: none; pointer-events: auto; }

.doc-preview .dp-footer a:hover { color: var(--link-hover); text-decoration: underline; }

.year-select { padding: 8px 12px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-secondary); color: var(--text-primary); font-size: 14px; cursor: pointer; }

.year-select:focus { border-color: var(--accent); outline: none; }

.section-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }

.section-title { font-size: 16px; font-weight: 600; }

.section-title.income { color: var(--success); }

.section-title.expense { color: var(--accent); }

.section-total { font-size: 18px; font-weight: 700; }

.section-total.income { color: var(--success); }

.section-total.expense { color: var(--accent); }

.euer-table th:last-child, .euer-table td:last-child { text-align: right; }

.euer-table th:nth-child(2), .euer-table td:nth-child(2) { text-align: center; width: 80px; color: var(--text-muted); font-size: 12px; }

.euer-table th:nth-child(3), .euer-table td:nth-child(3) { text-align: right; width: 60px; }

.summary { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px; padding: 24px; margin-top: 32px; }

.summary-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 15px; }

.summary-row.total { border-top: 2px solid var(--border-color); margin-top: 8px; padding-top: 16px; font-size: 18px; font-weight: 700; }

.summary-row.total.positive { color: var(--success); }

.summary-row.total.negative { color: var(--accent); }

.warning { background: rgba(233, 69, 96, 0.1); border: 1px solid rgba(233, 69, 96, 0.3); border-radius: 10px; padding: 14px 18px; margin-bottom: 24px; font-size: 13px; color: var(--accent); }

.warning a { color: var(--accent); }

@media print { body { background: #fff; color: #000; padding: 20px; } .back, .toolbar, .warning, .print-btn { display: none; } .panel, .summary { background: #fff; border-color: #ccc; } th { color: var(--text-dim); border-color: #ccc; } td { border-color: #eee; } .section-title.income, .section-total.income { color: #1a7a3a; } .section-title.expense, .section-total.expense { color: #c0392b; } .summary-row.total.positive { color: #1a7a3a; } .summary-row.total.negative { color: #c0392b; } tr:hover { background: none; } }

.toggle { position: relative; display: inline-block; width: 36px; height: 20px; vertical-align: middle; }

.toggle input { opacity: 0; width: 0; height: 0; }

.toggle .slider { position: absolute; inset: 0; background: #4a1a1a; border-radius: 20px; cursor: pointer; transition: background .2s; }

.toggle .slider::before { content: ''; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; background: var(--accent); border-radius: 50%; transition: transform .2s, background .2s; }

.toggle input:checked + .slider { background: #1b4e2d; }

.toggle input:checked + .slider::before { transform: translateX(16px); background: var(--success); }

.gc-amount { color: var(--success); font-size: 12px; }

.email-link { color: var(--text-primary); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--border-dim); font-size: 12px; transition: all .15s; }

.email-link:hover { border-color: var(--accent); color: var(--accent); background: var(--hover-bg); }

.email-link svg { width: 13px; height: 13px; flex-shrink: 0; }

.compose-status { font-size: 13px; margin-top: 8px; }

.compose-status.ok { color: var(--success); }

.compose-status.err { color: var(--accent); }

.sig-preview { margin-top: 8px; padding: 10px 12px; background: var(--bg-primary); border: 1px solid var(--border-dim); border-radius: 6px; font-size: 12px; color: var(--text-muted); white-space: pre-line; line-height: 1.5; max-height: 160px; overflow-y: auto; }

.discord-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: #7289da; margin-top: 2px; }

.discord-tag svg { width: 12px; height: 12px; flex-shrink: 0; }

.discord-select-wrap { position: relative; }

.discord-select-wrap input[type="text"] { width: 100%; padding: 8px 10px; border: 1px solid var(--border-color); border-radius: 6px 6px 0 0; background: var(--bg-primary); color: var(--text-primary); font-size: 13px; }

.discord-select-wrap input[type="text"]:focus { border-color: var(--accent); outline: none; }

.discord-list { max-height: 180px; overflow-y: auto; background: var(--bg-primary); border: 1px solid var(--border-color); border-top: none; border-radius: 0 0 6px 6px; }

.discord-list .dd-item { padding: 6px 10px; cursor: pointer; font-size: 13px; display: flex; justify-content: space-between; align-items: center; transition: background .1s; }

.discord-list .dd-item:hover { background: var(--hover-bg); }

.discord-list .dd-item.selected { background: rgba(114, 137, 218, 0.15); color: var(--accent); }

.discord-list .dd-item .dd-user { color: var(--text-dim); font-size: 11px; }

.discord-list .dd-empty { padding: 12px 10px; font-size: 13px; color: var(--text-dim); text-align: center; }

.discord-clear { position: absolute; right: 8px; top: 9px; background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 16px; line-height: 1; padding: 2px; display: none; }

.discord-clear:hover { color: var(--accent); }

.info-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; }

.info-row + .info-row { border-top: 1px solid var(--border-dim); }

.info-label { color: var(--text-muted); font-size: 13px; }

.info-value { color: var(--text-primary); font-size: 13px; font-weight: 500; }

.theme-grid { display: flex; gap: 16px; flex-wrap: wrap; }

.theme-card { flex: 1; min-width: 200px; background: var(--bg-secondary); border: 2px solid var(--border-color); border-radius: 12px; padding: 20px; cursor: pointer; transition: border-color .2s, transform .2s; }

.theme-card:hover { transform: translateY(-2px); }

.theme-card.active { border-color: var(--accent); }

.theme-card .theme-name { font-size: 15px; font-weight: 600; margin-bottom: 4px; color: var(--text-primary); }

.theme-card .theme-desc { font-size: 12px; color: var(--text-muted); margin-bottom: 14px; }

.theme-preview { display: flex; gap: 6px; margin-bottom: 12px; }

.theme-preview .swatch { width: 28px; height: 28px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.1); }

.theme-check { font-size: 12px; color: var(--accent); opacity: 0; transition: opacity .2s; }

.theme-card.active .theme-check { opacity: 1; }

.upload-box { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px; padding: 32px; margin-bottom: 32px; }

.upload-box h2 { font-size: 18px; margin-bottom: 20px; color: var(--text-primary); }

.upload-box label { font-size: 13px; color: var(--text-muted); }

.upload-box select { padding: 10px 14px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-primary); color: var(--text-primary); font-size: 14px; outline: none; }

.upload-box select:focus { border-color: var(--accent); }

.upload-box button[type="submit"] { padding: 10px 24px; background: var(--accent); color: #fff; border: none; border-radius: 8px; font-size: 14px; cursor: pointer; align-self: flex-end; }

.upload-box button[type="submit"]:hover { background: var(--accent-hover); }

.upload-box button[type="submit"]:disabled { background: var(--text-dim); cursor: not-allowed; }

.file-input { position: relative; }

.file-input input[type="file"] { padding: 10px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-primary); color: var(--text-primary); font-size: 14px; cursor: pointer; width: 100%; }

.file-input input[type="file"]::file-selector-button { background: #0f3460; color: var(--text-primary); border: none; padding: 6px 16px; border-radius: 6px; cursor: pointer; margin-right: 12px; }

.msg { font-size: 13px; margin-top: 12px; display: none; }

.msg.ok { color: var(--success); }

.msg.err { color: var(--accent); }

.history { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px; padding: 32px; }

.history h2 { font-size: 18px; margin-bottom: 16px; color: var(--text-primary); }

.status-done { color: var(--success); font-size: 12px; }

.status-info { color: var(--text-muted); font-size: 12px; }

.btn-process { padding: 5px 14px; background: var(--accent); color: #fff; border: none; border-radius: 6px; font-size: 12px; cursor: pointer; }

.btn-process:hover { background: var(--accent-hover); }

.btn-process:disabled { background: var(--text-dim); cursor: not-allowed; }

.btn-delete { padding: 5px 14px; background: transparent; color: var(--accent); border: 1px solid var(--accent); border-radius: 6px; font-size: 12px; cursor: pointer; }

.btn-delete:hover { background: rgba(233, 69, 96, 0.15); }

.btn-delete:disabled { opacity: .4; cursor: not-allowed; }

.usage { color: var(--text-muted); font-size: 12px; }

.usage-link { color: var(--link-color); text-decoration: none; font-size: 12px; }

.usage-link:hover { color: var(--accent); text-decoration: underline; }

.usage-amount { color: var(--text-dim); font-size: 11px; margin-left: 4px; }