: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); }

[data-theme="staging"] { --bg-primary: #1a1a2e; --bg-secondary: #1e2a3a; --border-color: #2d5a3d; --accent: #4ade80; --accent-hover: #22c55e; --text-primary: #e0e0e0; --text-muted: #888; --text-dim: #555; --success: #4ade80; --warning: #fbbf24; --link-color: #86efac; --link-hover: #bbf7d0; --hover-bg: rgba(74, 222, 128, 0.08); --accent-bg: rgba(74, 222, 128, 0.12); --border-dim: rgba(45, 90, 61, 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); }

.staging-banner { background: #166534; color: #bbf7d0; text-align: center; padding: 6px 16px; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; flex-shrink: 0; }

body:has(.login-box) .staging-banner, body:has(.consent-box) .staging-banner { position: absolute; top: 0; left: 0; right: 0; z-index: 9999; }

.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-success { background: var(--success); color: #000; font-weight: 600; }

.btn-success:hover { filter: brightness(1.1); }

.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; }

/* Toggle switch */
.toggle { position: relative; display: inline-block; width: 38px; height: 22px; flex-shrink: 0; }

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

.toggle .slider { position: absolute; inset: 0; cursor: pointer; background: var(--border-color); border-radius: 22px; transition: background .2s; }

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

.toggle input:checked + .slider { background: var(--success); }

.toggle input:checked + .slider::before { transform: translateX(16px); background: #fff; }

.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; }

.redaktion-subnav { display: flex; align-items: center; gap: 4px; padding: 0 20px; margin-bottom: 24px; border-bottom: 1px solid var(--border-dim); }

.redaktion-subnav__back { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; font-size: 18px; color: var(--text-muted); text-decoration: none; border-radius: 6px; margin-right: 8px; transition: background 0.15s, color 0.15s; }

.redaktion-subnav__back:hover { background: var(--bg-sidebar); color: var(--accent); }

.redaktion-subnav__item { padding: 10px 16px; font-size: 14px; font-weight: 500; color: var(--text-muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.15s, border-color 0.15s; }

.redaktion-subnav__item:hover { color: var(--text); }

.redaktion-subnav__item.active { color: var(--accent); border-bottom-color: var(--accent); }

.publish-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; border-radius: 10px; margin-bottom: 20px; font-size: 14px; }

.publish-bar--pending { background: rgba(251, 191, 36, 0.08); border: 1px solid rgba(251, 191, 36, 0.25); color: var(--warning); }

.publish-bar--ok { background: rgba(74, 222, 128, 0.06); border: 1px solid rgba(74, 222, 128, 0.15); color: var(--success); }

.publish-bar__text strong { font-size: 18px; }

.badge.cms-live { background: rgba(74, 222, 128, 0.12); color: var(--success); }

.badge.cms-published { background: rgba(192, 132, 252, 0.12); color: #c084fc; }

.badge.cms-draft { background: rgba(251, 191, 36, 0.12); color: var(--warning); }

.badge.cms-review { background: rgba(99, 179, 237, 0.12); color: var(--link-color); }

.badge.cms-archived { background: rgba(136, 136, 136, 0.12); color: var(--text-dim); }

.deploy-progress-bar { width: 100%; height: 6px; background: var(--border-dim); border-radius: 3px; overflow: hidden; margin: 16px 0; }

.deploy-progress-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.4s ease; }

.deploy-status-text { color: var(--text-muted); font-size: 13px; text-align: center; }

.deploy-error { background: rgba(239, 68, 68, 0.1); color: var(--accent); border: 1px solid rgba(239, 68, 68, 0.3); border-radius: 8px; padding: 12px 16px; font-size: 14px; text-align: center; }

.deploy-success { background: rgba(74, 222, 128, 0.1); color: var(--success); border: 1px solid rgba(74, 222, 128, 0.3); border-radius: 8px; padding: 12px 16px; font-size: 14px; text-align: center; }

.editor-layout { display: flex; gap: 24px; margin-bottom: 20px; }

.editor-sidebar { width: 340px; flex-shrink: 0; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px; padding: 24px; align-self: flex-start; }

.editor-section-label { color: var(--text-dim); font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; margin: 20px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border-dim); }

.editor-section-label:first-child { margin-top: 0; }

.editor-main { flex: 1; min-width: 0; }

.editor-main .EasyMDEContainer .CodeMirror { background: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 0 0 8px 8px; min-height: 500px; font-size: 14px; line-height: 1.7; }

.editor-main .EasyMDEContainer .CodeMirror-cursor { border-left-color: var(--accent); }

.editor-main .EasyMDEContainer .CodeMirror-selected { background: var(--accent-bg); }

.editor-main .EasyMDEContainer .CodeMirror-focused .CodeMirror-selected { background: var(--accent-bg); }

.editor-main .EasyMDEContainer .CodeMirror-activeline-background { background: rgba(255, 255, 255, 0.02); }

.editor-main .EasyMDEContainer .CodeMirror-gutters { background: var(--bg-secondary); border-color: var(--border-color); }

.editor-main .EasyMDEContainer .CodeMirror-linenumber { color: var(--text-dim); }

.editor-main .EasyMDEContainer .cm-formatting { opacity: 0.3; font-size: 0.85em; }

.editor-main .EasyMDEContainer .cm-formatting-header { opacity: 0.25; }

.editor-main .EasyMDEContainer .cm-formatting-list { opacity: 0.4; }

.editor-main .EasyMDEContainer .cm-formatting-quote { opacity: 0.4; }

.editor-main .EasyMDEContainer .cm-formatting-link, .editor-main .EasyMDEContainer .cm-formatting-image { opacity: 0.35; }

.editor-main .EasyMDEContainer .cm-header-1 { font-size: 1.7em; line-height: 1.3; }

.editor-main .EasyMDEContainer .cm-header-2 { font-size: 1.4em; line-height: 1.3; }

.editor-main .EasyMDEContainer .cm-header-3 { font-size: 1.2em; line-height: 1.3; }

.editor-main .EasyMDEContainer .cm-header { color: var(--accent); font-weight: 700; }

.editor-main .EasyMDEContainer .cm-link { color: var(--link-color); }

.editor-main .EasyMDEContainer .cm-url { color: var(--link-color); opacity: 0.5; font-size: 0.9em; }

.editor-main .EasyMDEContainer .cm-comment { color: var(--text-muted); }

.editor-main .EasyMDEContainer .cm-tag { color: var(--success); }

.editor-main .EasyMDEContainer .cm-attribute { color: var(--link-color); }

.editor-main .EasyMDEContainer .cm-string { color: var(--success); }

.editor-main .EasyMDEContainer .cm-strong { color: var(--text-primary); font-weight: 700; }

.editor-main .EasyMDEContainer .cm-em { color: var(--text-primary); font-style: italic; }

.editor-main .EasyMDEContainer .cm-quote { color: var(--warning); font-style: italic; }

.editor-main .EasyMDEContainer .cm-keyword { color: var(--accent); }

.editor-main .EasyMDEContainer .cm-image, .editor-main .EasyMDEContainer .cm-image-marker, .editor-main .EasyMDEContainer .cm-image-alt-text { color: var(--success); }

.editor-main .EasyMDEContainer .cm-hr { color: var(--text-dim); }

.editor-main .EasyMDEContainer .cm-strikethrough { text-decoration: line-through; opacity: 0.6; }

.editor-main .EasyMDEContainer .editor-toolbar { background: var(--bg-secondary); border: 1px solid var(--border-color); border-bottom: none; border-radius: 8px 8px 0 0; padding: 6px; opacity: 1; }

.editor-main .EasyMDEContainer .editor-toolbar::before, .editor-main .EasyMDEContainer .editor-toolbar::after { display: none; }

.editor-main .EasyMDEContainer .editor-toolbar button, .editor-main .EasyMDEContainer .editor-toolbar a { color: var(--text-muted) !important; border: none !important; border-radius: 4px; width: 32px; height: 32px; }

.editor-main .EasyMDEContainer .editor-toolbar button.active, .editor-main .EasyMDEContainer .editor-toolbar button:hover, .editor-main .EasyMDEContainer .editor-toolbar a.active, .editor-main .EasyMDEContainer .editor-toolbar a:hover { color: var(--accent) !important; background: var(--hover-bg) !important; }

.editor-main .EasyMDEContainer .editor-toolbar button svg, .editor-main .EasyMDEContainer .editor-toolbar a svg { fill: currentColor; }

.editor-main .EasyMDEContainer .editor-toolbar i.separator { border-left-color: var(--border-dim) !important; border-right: none; }

.editor-main .EasyMDEContainer .heading-menu { display: none; position: absolute; top: 100%; left: 0; z-index: 50; min-width: 180px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; padding: 4px; margin-top: 4px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); }

.editor-main .EasyMDEContainer .heading-menu.open { display: block; }

.editor-main .EasyMDEContainer .heading-menu-item { display: block; width: 100%; text-align: left; padding: 6px 12px; border: none; border-radius: 6px; background: none; color: var(--text-primary); cursor: pointer; font-size: 13px; }

.editor-main .EasyMDEContainer .heading-menu-item:hover { background: var(--hover-bg); color: var(--accent); }

.editor-main .EasyMDEContainer .heading-menu-item h4 { font-size: 18px; font-weight: 700; color: var(--accent); margin: 0; }

.editor-main .EasyMDEContainer .heading-menu-item h5 { font-size: 15px; font-weight: 700; color: var(--accent); margin: 0; }

.editor-main .EasyMDEContainer .heading-menu-item h6 { font-size: 13px; font-weight: 700; color: var(--accent); margin: 0; }

.editor-main .EasyMDEContainer .heading-menu-item span { font-size: 13px; color: var(--text-muted); }

.editor-main .EasyMDEContainer .editor-preview, .editor-main .EasyMDEContainer .editor-preview-side { background: var(--bg-primary); color: var(--text-primary); padding: 24px; font-size: 14px; line-height: 1.7; }

.editor-main .EasyMDEContainer .editor-preview a, .editor-main .EasyMDEContainer .editor-preview-side a { color: var(--link-color); }

.editor-main .EasyMDEContainer .editor-preview h1, .editor-main .EasyMDEContainer .editor-preview h2, .editor-main .EasyMDEContainer .editor-preview h3, .editor-main .EasyMDEContainer .editor-preview h4, .editor-main .EasyMDEContainer .editor-preview h5, .editor-main .EasyMDEContainer .editor-preview-side h1, .editor-main .EasyMDEContainer .editor-preview-side h2, .editor-main .EasyMDEContainer .editor-preview-side h3, .editor-main .EasyMDEContainer .editor-preview-side h4, .editor-main .EasyMDEContainer .editor-preview-side h5 { color: var(--accent); margin: 24px 0 12px; }

.editor-main .EasyMDEContainer .editor-preview code, .editor-main .EasyMDEContainer .editor-preview-side code { background: var(--bg-secondary); color: var(--text-primary); padding: 2px 6px; border-radius: 4px; font-size: 13px; }

.editor-main .EasyMDEContainer .editor-preview pre, .editor-main .EasyMDEContainer .editor-preview-side pre { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; padding: 16px; overflow-x: auto; }

.editor-main .EasyMDEContainer .editor-preview pre code, .editor-main .EasyMDEContainer .editor-preview-side pre code { padding: 0; background: none; }

.editor-main .EasyMDEContainer .editor-preview blockquote, .editor-main .EasyMDEContainer .editor-preview-side blockquote { border-left: 3px solid var(--accent); padding-left: 16px; color: var(--text-muted); margin: 16px 0; }

.editor-main .EasyMDEContainer .editor-preview img, .editor-main .EasyMDEContainer .editor-preview-side img { max-width: 100%; border-radius: 8px; }

.editor-main .EasyMDEContainer .editor-preview ul, .editor-main .EasyMDEContainer .editor-preview ol, .editor-main .EasyMDEContainer .editor-preview-side ul, .editor-main .EasyMDEContainer .editor-preview-side ol { padding-left: 24px; }

.editor-main .EasyMDEContainer .editor-preview li, .editor-main .EasyMDEContainer .editor-preview-side li { margin-bottom: 4px; }

.editor-main .EasyMDEContainer .editor-preview table, .editor-main .EasyMDEContainer .editor-preview-side table { border-collapse: collapse; }

.editor-main .EasyMDEContainer .editor-preview table th, .editor-main .EasyMDEContainer .editor-preview table td, .editor-main .EasyMDEContainer .editor-preview-side table th, .editor-main .EasyMDEContainer .editor-preview-side table td { border: 1px solid var(--border-color); padding: 8px 12px; }

.editor-main .EasyMDEContainer .editor-statusbar { color: var(--text-dim); font-size: 12px; padding: 4px 12px; }

.char-count { display: block; text-align: right; font-size: 11px; color: var(--text-dim); margin-top: 2px; }

.editor-details { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-dim); }

.editor-details summary { color: var(--text-muted); font-size: 13px; cursor: pointer; padding: 6px 0; user-select: none; }

.editor-details summary:hover { color: var(--accent); }

.editor-details summary::marker { color: var(--text-dim); }

.editor-details[open] summary { margin-bottom: 12px; }

.editor-version-info { display: flex; gap: 16px; align-items: center; margin-top: 20px; padding: 12px 0 0; border-top: 1px solid var(--border-dim); font-size: 12px; color: var(--text-dim); }

.editor-version-info a { color: var(--link-color); }

.editor-version-info a:hover { color: var(--link-hover); }

.editor-actions { display: flex; gap: 10px; align-items: center; padding: 16px 20px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 10px; }

.save-status { font-size: 13px; margin-left: auto; }

.tag-picker { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }

.tag-pick-btn { padding: 3px 10px; border: 1px solid var(--border-dim); border-radius: 6px; background: transparent; color: var(--text-dim); font-size: 11px; cursor: pointer; transition: all .15s; }

.tag-pick-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--hover-bg); }

.tag-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.tag-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border: 1px solid var(--accent); border-radius: 6px; background: var(--accent-bg); color: var(--accent); font-size: 12px; }

.tag-chip button { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 14px; padding: 0; line-height: 1; opacity: .6; }

.tag-chip button:hover { opacity: 1; }

.tag-custom { display: flex; gap: 6px; margin-top: 8px; }

.tag-custom-input { flex: 1; padding: 5px 8px; border: 1px solid var(--border-dim); border-radius: 6px; background: var(--bg-primary); color: var(--text-primary); font-size: 12px; }

.tag-custom-input:focus { border-color: var(--accent); outline: none; }

.tag-custom-input::placeholder { color: var(--text-dim); }

.image-upload-area { padding: 16px; border: 1px dashed var(--border-color); border-radius: 8px; background: var(--bg-primary); text-align: center; transition: border-color .2s; }

.image-upload-area:hover { border-color: var(--text-dim); }

.image-upload-area img { display: block; margin: 0 auto 10px; max-height: 160px; border-radius: 6px; }

.image-upload-area .btn { margin: 2px; }

.media-layout { display: flex; gap: 24px; }

.media-folders { width: 220px; flex-shrink: 0; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px; padding: 16px; align-self: flex-start; }

.media-folders__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border-dim); }

.media-folders__header strong { color: var(--text-primary); font-size: 13px; }

.media-folder-list { display: flex; flex-direction: column; gap: 2px; }

.media-folder-item { display: flex; justify-content: space-between; align-items: center; padding: 7px 10px; border: none; border-radius: 6px; background: none; color: var(--text-muted); font-size: 13px; cursor: pointer; text-align: left; transition: all .15s; }

.media-folder-item.active { background: var(--accent-bg); color: var(--accent); font-weight: 500; }

.media-folder-item:hover:not(.active) { background: var(--hover-bg); color: var(--text-primary); }

.media-folder-actions { display: none; gap: 2px; }

.media-folder-item:hover .media-folder-actions { display: flex; }

.btn-icon { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 14px; padding: 0 4px; }

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

.media-main { flex: 1; min-width: 0; }

.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }

.media-thumb { border-radius: 8px; border: 1px solid var(--border-color); overflow: hidden; cursor: pointer; transition: all .2s; background: var(--bg-secondary); }

.media-thumb:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); }

.media-thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }

.media-thumb__name { padding: 6px 10px; font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 768px) { .editor-layout { flex-direction: column; } .editor-sidebar { width: 100%; } .media-layout { flex-direction: column; } .media-folders { width: 100%; } .media-picker-header { flex-wrap: wrap; gap: 8px; } .media-picker-actions { flex-wrap: wrap; } .media-table__dim, .media-table__date { display: none; } }

.media-picker-modal { width: 780px; max-width: 95vw; max-height: 85vh; display: flex; flex-direction: column; position: relative; }

.media-picker-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--border-dim); margin-bottom: 0; }

.media-picker-header h2 { margin: 0; font-size: 18px; white-space: nowrap; }

.media-picker-header .btn-icon { font-size: 22px; }

.media-picker-actions { display: flex; align-items: center; gap: 10px; }

.media-picker-actions .search-box { width: 180px; }

.media-picker-folders { display: flex; gap: 4px; padding: 10px 0 6px; flex-wrap: wrap; }

.media-picker-body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }

.media-picker-table-wrap { flex: 1; overflow-y: auto; }

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

.media-table thead { position: sticky; top: 0; background: var(--bg-card); z-index: 2; }

.media-table th { text-align: left; padding: 8px 10px; font-weight: 600; color: var(--text-muted); border-bottom: 2px solid var(--border-dim); white-space: nowrap; user-select: none; }

.media-table td { padding: 6px 10px; vertical-align: middle; }

.media-table__sortable { cursor: pointer; }

.media-table__sortable:hover { color: var(--text); }

.media-table__th-thumb { width: 48px; }

.media-table__row { cursor: pointer; transition: background 0.1s; }

.media-table__row:hover { background: var(--bg-sidebar); }

.media-table__row:not(:last-child) td { border-bottom: 1px solid var(--border-dim); }

.media-table__thumb { width: 48px; }

.media-table__thumb img { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; display: block; background: var(--bg-sidebar); }

.media-table__name { max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }

.media-table__dim, .media-table__size, .media-table__date { color: var(--text-muted); white-space: nowrap; font-size: 12px; }

.media-preview-tooltip { position: absolute; z-index: 100; pointer-events: none; opacity: 0; transition: opacity 0.15s; }

.media-preview-tooltip.visible { opacity: 1; }

.media-preview-tooltip img { max-width: 320px; max-height: 260px; border-radius: 6px; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25); display: block; background: var(--bg-card); }