/* ================================================================
DucksCenter ā Design System
Warm white + orange glow + comic duck energy š¦
================================================================ */
/* āā Google Fonts ā loaded via HTML āāāāāāāāāāāāāāāāāāāāā
Add to every page :
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā */
/* āā Design Tokens āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā */
:root {
--bg: #fdf8f0;
--bg-2: #fff7ed;
--surface: rgba(255, 255, 255, 0.75); /* glass base */
--surface-solid: #ffffff;
--surface-hover: rgba(255, 247, 237, 0.90);
--surface-active: rgba(254, 243, 199, 0.80);
--border: rgba(253, 186, 116, 0.60); /* warm translucent orange */
--border-solid: #fed7aa;
--border-focus: #f97316;
--text: #1c0a00;
--text-muted: #9a5209;
--text-dim: #d4b8a0;
/* Brand orange */
--accent: #f97316;
--accent-dark: #ea580c;
--accent-dim: rgba(249, 115, 22, 0.12);
--accent-glow: 0 0 30px rgba(249, 115, 22, 0.45), 0 0 80px rgba(249, 115, 22, 0.20);
/* Income = green */
--income: #16a34a;
--income-dark: #15803d;
--income-dim: rgba(22, 163, 74, 0.12);
--income-glow: 0 0 40px rgba(22, 163, 74, 0.55), 0 0 100px rgba(22, 163, 74, 0.25), 0 0 180px rgba(22, 163, 74, 0.10);
--income-glass: rgba(240, 253, 244, 0.88);
/* Expense = red */
--expense: #dc2626;
--expense-dark: #b91c1c;
--expense-dim: rgba(220, 38, 38, 0.10);
--expense-glow: 0 0 40px rgba(220, 38, 38, 0.45), 0 0 100px rgba(220, 38, 38, 0.20), 0 0 180px rgba(220, 38, 38, 0.08);
--expense-glass: rgba(255, 245, 245, 0.88);
--warn: #d97706;
--warn-dim: rgba(217, 119, 6, 0.12);
--radius-sm: 8px;
--radius: 12px;
--radius-lg: 20px;
--radius-xl: 28px;
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
--shadow: 0 4px 20px rgba(249, 115, 22, 0.12);
--shadow-lg: 0 8px 40px rgba(249, 115, 22, 0.16);
--comic: 3px 4px 0 rgba(0, 0, 0, 0.08);
--transition: 0.22s cubic-bezier(.4, 0, .2, 1);
--transition-bounce: 0.38s cubic-bezier(.34, 1.56, .64, 1);
--topbar-h: 36px;
--nav-h: 66px;
/* Glass drop zone effect */
--glass-bg: rgba(255, 255, 255, 0.65);
--glass-border: rgba(255, 255, 255, 0.80);
--glass-blur: 16px;
--glass-inner: inset 0 1px 0 rgba(255, 255, 255, 0.90), inset 0 -1px 0 rgba(255, 255, 255, 0.30);
}
/* āā Reset āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
background-color: var(--bg);
/* Soft colour blobs for the glass backdrop-filter to blur against */
background-image:
radial-gradient(ellipse 70% 50% at 15% 60%, rgba(249, 115, 22, 0.09) 0%, transparent 55%),
radial-gradient(ellipse 50% 60% at 85% 25%, rgba(245, 158, 11, 0.08) 0%, transparent 50%),
radial-gradient(ellipse 60% 40% at 55% 85%, rgba(249, 115, 22, 0.06) 0%, transparent 50%);
color: var(--text);
min-height: 100vh;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
a { color: var(--accent-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { display: block; }
/* āā Scrollbar āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-solid); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
/* āā Typography āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā */
h1 { font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; }
h2 { font-size: 1.25rem; font-weight: 700; }
h3 { font-size: 1.05rem; font-weight: 700; }
h4 { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); }
/* āā Top accent bar (sits above nav) āāāāāāāāāāāāāāāāāāāāāāāāāāā */
.top-bar {
position: fixed;
top: 0; left: 0; right: 0;
height: var(--topbar-h);
background: linear-gradient(90deg, rgba(249,115,22,.13) 0%, rgba(249,115,22,.05) 60%, rgba(245,158,11,.08) 100%);
border-bottom: 1.5px solid var(--border-solid);
z-index: 101;
}
/* āā Navigation āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā */
.nav {
position: fixed;
top: var(--topbar-h); left: 0; right: 0;
height: var(--nav-h);
background: rgba(255, 255, 255, 0.88);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-bottom: 2px solid var(--border-solid);
box-shadow: 0 2px 20px rgba(249, 115, 22, 0.10);
z-index: 100;
display: flex;
align-items: center;
padding: 0 24px;
gap: 6px;
}
/* Comic-style brand text using Lilita One */
.nav-brand {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
}
.nav-brand:hover { text-decoration: none; }
.nav-logo {
height: 52px;
width: auto;
object-fit: contain;
}
.nav-logo-fallback { font-size: 2.2rem; line-height: 1; }
.nav-brand-name {
font-family: 'Lilita One', 'Arial Black', cursive;
font-size: 1.4rem;
color: #f97316;
paint-order: stroke fill;
-webkit-text-stroke: 2px #1a1a1a;
text-shadow:
2px 3px 0 #1a1a1a,
-1px -1px 0 #1a1a1a,
1px -1px 0 #1a1a1a;
letter-spacing: -.01em;
}
.nav-spacer { flex: 1; }
.nav-link {
display: flex; align-items: center; gap: 6px;
padding: 7px 12px; border-radius: var(--radius-sm);
font-size: .82rem; font-weight: 700;
color: var(--text-muted);
transition: all var(--transition);
text-decoration: none;
border: 1.5px solid transparent;
white-space: nowrap;
}
.nav-link:hover { color: var(--accent-dark); background: var(--accent-dim); text-decoration: none; }
.nav-link.active {
color: #fff; background: var(--accent);
border-color: var(--accent-dark);
box-shadow: var(--comic), 0 0 12px rgba(249, 115, 22, 0.35);
}
.nav-badge {
display: inline-flex; align-items: center; justify-content: center;
min-width: 18px; height: 18px; padding: 0 5px;
border-radius: 9px; background: var(--expense);
color: #fff; font-size: .7rem; font-weight: 800;
}
.nav-badge:empty, .nav-badge[data-count="0"] { display: none; }
.nav-logout {
display: flex; align-items: center; gap: 6px;
padding: 7px 12px; border-radius: var(--radius-sm);
font-size: .82rem; font-weight: 700;
color: var(--expense); background: none;
border: 1.5px solid transparent; cursor: pointer;
transition: all var(--transition);
white-space: nowrap; font-family: inherit;
}
.nav-logout:hover { color: #fff; background: var(--expense); border-color: var(--expense-dark); }
/* āā Page Wrapper āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā */
.page { padding-top: calc(var(--topbar-h) + var(--nav-h) + 40px); padding-bottom: 64px; min-height: 100vh; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.page-header {
margin-bottom: 32px;
display: flex; align-items: flex-start;
justify-content: space-between; flex-wrap: wrap; gap: 12px;
}
.page-header-text h1 { margin-bottom: 4px; }
.page-header-text p { color: var(--text-muted); font-size: .9rem; }
/* āā Glass Card āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā */
.card {
background: var(--surface);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
border: 1.5px solid var(--border);
border-radius: var(--radius-lg);
padding: 24px;
box-shadow: var(--comic), var(--glass-inner);
}
.card-sm { padding: 16px; border-radius: var(--radius); }
.card-solid { background: var(--surface-solid); backdrop-filter: none; }
/* āā Buttons āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā */
.btn {
display: inline-flex; align-items: center; justify-content: center;
gap: 8px; padding: 10px 20px; border-radius: var(--radius);
font-size: .875rem; font-weight: 700; cursor: pointer;
border: 2px solid transparent;
transition: all var(--transition); text-decoration: none; white-space: nowrap;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary {
background: var(--accent); color: #fff;
border-color: var(--accent-dark);
box-shadow: var(--comic);
}
.btn-primary:hover:not(:disabled) {
background: var(--accent-dark); transform: translateY(-2px);
box-shadow: 0 6px 0 rgba(0,0,0,.12), 0 0 20px rgba(249,115,22,.35);
}
.btn-primary:active:not(:disabled) { transform: translateY(1px); box-shadow: var(--comic); }
.btn-ghost {
background: var(--surface); color: var(--text);
border-color: var(--border-solid);
box-shadow: var(--comic);
backdrop-filter: blur(8px);
}
.btn-ghost:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--accent); }
.btn-danger { background: var(--expense-dim); color: var(--expense); border-color: rgba(220,38,38,.30); }
.btn-danger:hover:not(:disabled) { background: var(--expense); color: #fff; }
.btn-success {
background: var(--accent); color: #fff;
border-color: var(--accent-dark);
box-shadow: 0 4px 0 var(--accent-dark);
width: 100%; padding: 14px 20px; font-size: 1rem; border-radius: var(--radius);
}
.btn-success:hover:not(:disabled) {
background: var(--accent-dark); transform: translateY(-2px);
box-shadow: 0 6px 0 #c2410c, 0 0 24px rgba(249,115,22,.40);
}
.btn-success:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
.btn-lg { padding: 14px 28px; font-size: 1rem; }
.btn-sm { padding: 6px 12px; font-size: .8rem; border-radius: var(--radius-sm); }
/* āā Form Inputs āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā */
.form-group { margin-bottom: 20px; }
.form-group label {
display: block; font-size: .78rem; font-weight: 700;
color: var(--text-muted); text-transform: uppercase;
letter-spacing: .06em; margin-bottom: 8px;
}
.form-control {
width: 100%; padding: 12px 16px;
background: rgba(255, 255, 255, 0.85);
border: 2px solid var(--border-solid);
border-radius: var(--radius); color: var(--text);
font-size: .95rem; font-family: inherit;
transition: border-color var(--transition), box-shadow var(--transition);
outline: none;
}
.form-control:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(249,115,22,.15), 0 0 12px rgba(249,115,22,.20);
background: #fff;
}
.form-control::placeholder { color: var(--text-dim); }
/* āā Login ā Split Card āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā */
.login-wrap {
min-height: 100vh;
display: flex; align-items: center; justify-content: center;
padding: 24px;
background:
radial-gradient(ellipse 80% 60% at 20% 110%, rgba(249,115,22,.13) 0%, transparent 55%),
radial-gradient(ellipse 60% 50% at 80% -10%, rgba(30,30,30,.07) 0%, transparent 50%),
#f5f0e8;
}
.login-split-card {
position: relative; width: 100%; max-width: 420px;
border-radius: 24px; overflow: visible;
box-shadow: 0 8px 48px rgba(0,0,0,.18), 0 0 0 1.5px rgba(0,0,0,.08);
}
.login-bg-ducks {
position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(160deg, #fef9f2, #fdf0e0);
clip-path: polygon(0 0, 0 100%, 100% 100%);
}
.login-bg-ghoul {
position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(160deg, #f0f0f0, #e0e0e0);
clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.login-split-line {
position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(
to bottom right,
transparent calc(50% - 1px),
rgba(255,255,255,.65) 50%,
transparent calc(50% + 1px)
);
}
.login-split-form {
position: relative; z-index: 2;
padding: 36px 40px 40px;
background: rgba(255,255,255,.82);
backdrop-filter: blur(20px);
margin: 20px;
border-radius: 16px;
border: 1.5px solid rgba(255,255,255,.70);
}
/* Dual logo */
.login-dual-logo {
width: 165px; height: 165px;
position: relative; margin: 0 auto 22px;
border-radius: 27px; overflow: hidden;
box-shadow: 0 6px 28px rgba(0,0,0,.22), 0 0 0 2.5px rgba(0,0,0,.09);
}
.login-dual-ducks {
position: absolute; inset: 0;
background: linear-gradient(145deg, #fef3e2, #fde8c4);
clip-path: polygon(0 0, 0 100%, 100% 100%);
display: flex; align-items: center; justify-content: center;
}
.login-dual-ducks img {
width: 93px; height: 93px; object-fit: contain;
transform: translate(-21px, 21px);
}
.login-dual-ghoul {
position: absolute; inset: 0;
background: #111;
clip-path: polygon(0 0, 100% 0, 100% 100%);
display: flex; align-items: center; justify-content: center;
}
.login-dual-ghoul img {
width: 90px; height: 90px; object-fit: contain;
transform: translate(21px, -21px);
}
.login-dual-logo::after {
content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
background: linear-gradient(
to bottom right,
transparent calc(50% - 1.5px),
rgba(255,255,255,.70) 50%,
transparent calc(50% + 1.5px)
);
}
.logo-fb-emoji { font-size: 2.8rem; display: block; line-height: 1; }
.login-dual-ducks .logo-fb-emoji { transform: translate(-21px, 21px); }
.login-dual-ghoul .logo-fb-emoji { transform: translate(21px, -21px); }
/* Title */
.login-split-title { text-align: center; margin-bottom: 24px; }
.login-split-title h1 {
font-family: 'Lilita One', 'Arial Black', cursive;
font-size: 1.7rem; color: #f97316;
paint-order: stroke fill;
-webkit-text-stroke: 2px #1a1a1a;
text-shadow: 2px 3px 0 #1a1a1a;
margin-bottom: 4px;
}
.login-split-title p { font-size: .82rem; color: var(--text-muted); font-weight: 600; }
.btn-login {
width: 100%; padding: 14px;
background: var(--accent); color: #fff;
border: 2px solid var(--accent-dark);
box-shadow: 0 4px 0 var(--accent-dark);
border-radius: var(--radius); font-family: inherit;
font-size: 1rem; font-weight: 800; cursor: pointer;
transition: all var(--tb);
}
.btn-login:hover { background: var(--accent-dark); transform: translateY(-2px); box-shadow: 0 6px 0 #9a3412; }
.btn-login:active { transform: translateY(1px); box-shadow: 0 2px 0 var(--accent-dark); }
.btn-login:disabled { opacity: .55; pointer-events: none; }
.btn-contact {
width: 100%; margin-top: 10px; padding: 10px;
background: transparent;
border: 1.5px solid var(--border-solid);
border-radius: var(--radius); font-family: inherit;
font-size: .82rem; font-weight: 700; color: var(--text-muted);
cursor: pointer; transition: all var(--t);
display: block; text-align: center; text-decoration: none;
}
.btn-contact:hover { border-color: var(--accent); color: var(--accent-dark); background: var(--accent-dim); }
.alert-error {
background: var(--expense-dim); border: 1.5px solid rgba(220,38,38,.25);
color: var(--expense); padding: 12px 16px; border-radius: var(--radius);
font-size: .875rem; font-weight: 600; margin-bottom: 20px;
}
.alert-info {
background: var(--accent-dim); border: 1.5px solid rgba(249,115,22,.25);
color: var(--accent-dark); padding: 12px 16px; border-radius: var(--radius);
font-size: .875rem; font-weight: 600; margin-bottom: 20px;
}
.alert-warn {
background: var(--warn-dim); border: 1.5px solid rgba(217,119,6,.30);
color: var(--warn); padding: 12px 16px; border-radius: var(--radius);
font-size: .875rem; font-weight: 600; margin-bottom: 20px;
}
/* āā Drop Zones ā Glowing Glass āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā */
.drop-zones { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 40px; }
.drop-zones-single { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
.drop-zone {
position: relative;
border: 2px solid var(--border);
border-radius: var(--radius-lg);
padding: 52px 24px;
text-align: center; cursor: pointer;
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur)) saturate(150%);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
overflow: hidden;
transition: all var(--transition-bounce);
box-shadow: var(--glass-inner), 0 4px 20px rgba(0, 0, 0, 0.04);
}
/* Subtle inner shimmer layer */
.drop-zone::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.6) 0%, transparent 60%);
border-radius: inherit;
pointer-events: none;
}
.drop-zone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; z-index: 2; }
.drop-icon { font-size: 3rem; margin-bottom: 12px; position: relative; z-index: 1; }
.drop-title { font-size: 1rem; font-weight: 800; margin-bottom: 4px; position: relative; z-index: 1; }
.drop-sub { font-size: .8rem; color: var(--text-muted); position: relative; z-index: 1; }
/* Income drop zone ā amber/golden glow */
.drop-zone.income {
border-color: rgba(245, 158, 11, 0.35);
box-shadow: var(--glass-inner), 0 0 20px rgba(245,158,11,.10);
}
.drop-zone.income .drop-icon { color: var(--income); }
.drop-zone.income .drop-title { color: var(--income-dark); }
.drop-zone.income:hover, .drop-zone.income.drag-over {
transform: scale(1.03) translateY(-3px);
border-color: rgba(245, 158, 11, 0.80);
border-style: solid;
background: var(--income-glass);
box-shadow:
var(--glass-inner),
0 0 30px rgba(245,158,11,.55),
0 0 80px rgba(245,158,11,.30),
0 0 160px rgba(245,158,11,.12);
}
/* Expense drop zone ā red glow */
.drop-zone.expense {
border-color: rgba(220, 38, 38, 0.30);
box-shadow: var(--glass-inner), 0 0 16px rgba(220,38,38,.06);
}
.drop-zone.expense .drop-icon { color: var(--expense); }
.drop-zone.expense .drop-title { color: var(--expense-dark); }
.drop-zone.expense:hover, .drop-zone.expense.drag-over {
transform: scale(1.03) translateY(-3px);
border-color: rgba(220, 38, 38, 0.75);
border-style: solid;
background: var(--expense-glass);
box-shadow:
var(--glass-inner),
0 0 30px rgba(220,38,38,.45),
0 0 80px rgba(220,38,38,.22),
0 0 160px rgba(220,38,38,.08);
}
/* āā Progress Bar āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā */
.upload-progress { display: none; margin-bottom: 24px; }
.upload-progress.visible { display: block; }
.progress-label {
display: flex; justify-content: space-between; align-items: center;
font-size: .8rem; color: var(--text-muted); margin-bottom: 8px;
}
.progress-label .filename { font-weight: 700; color: var(--text); }
.progress-track { height: 10px; background: rgba(0,0,0,.06); border-radius: 5px; overflow: hidden; border: 1.5px solid var(--border-solid); }
.progress-bar {
height: 100%; width: 0%;
background: linear-gradient(90deg, var(--accent), var(--income-dark), var(--income));
border-radius: 5px;
transition: width .15s linear;
box-shadow: 0 0 12px rgba(249,115,22,.55);
}
/* āā Recent Uploads āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā */
.upload-entry {
display: flex; align-items: center; gap: 12px;
padding: 12px 16px;
background: rgba(255,255,255,.80);
backdrop-filter: blur(8px);
border: 1.5px solid var(--border);
border-radius: var(--radius); margin-bottom: 8px;
box-shadow: var(--comic), var(--glass-inner);
animation: slideInFade .4s var(--transition-bounce) both;
}
.upload-entry .ue-biz-icon { font-size: 1rem; flex-shrink: 0; opacity: .75; line-height: 1; display:flex; align-items:center; }
.upload-entry .ue-biz-icon img { height: 18px; width: auto; object-fit: contain; display: block; }
.upload-entry .ue-icon { width: 36px; height: 36px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.upload-entry.income .ue-icon { background: var(--income-dim); }
.upload-entry.expense .ue-icon { background: var(--expense-dim); }
.upload-entry .ue-name { font-weight: 600; font-size: .875rem; flex: 1; min-width: 0; }
.upload-entry .ue-name span { display: block; font-size: .75rem; color: var(--text-muted); font-weight: 400; }
.upload-entry .ue-amount { font-weight: 900; font-size: .9rem; }
.upload-entry.income .ue-amount { color: var(--income-dark); }
.upload-entry.expense .ue-amount { color: var(--expense); }
/* āā Review Cards āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā */
.review-card {
border: 1.5px solid var(--border); border-radius: var(--radius-lg);
background: rgba(255,255,255,.82);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
margin-bottom: 24px; overflow: hidden;
box-shadow: var(--comic), var(--glass-inner);
}
.review-card-inner { display: grid; grid-template-columns: 1fr 380px; min-height: 520px; }
.review-pdf-pane {
border-right: 1.5px solid var(--border);
background: linear-gradient(135deg, rgba(255,251,235,.95), rgba(254,243,199,.90));
min-height: 520px; overflow: hidden; position: relative;
}
.review-pdf-pane iframe, .review-pdf-pane canvas { width: 100%; height: 100%; border: none; }
.pdf-loading {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
color: var(--text-muted); flex-direction: column; gap: 12px; font-size: .875rem;
}
.review-data-pane { padding: 28px; display: flex; flex-direction: column; gap: 0; overflow-y: auto; background: rgba(255,255,255,.95); }
.review-type-badge {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 14px; border-radius: 99px;
font-size: .75rem; font-weight: 800;
text-transform: uppercase; letter-spacing: .06em;
margin-bottom: 20px; width: fit-content; border: 2px solid transparent;
}
.review-type-badge.income { background: var(--income-dim); color: var(--income-dark); border-color: rgba(245,158,11,.30); }
.review-type-badge.expense { background: var(--expense-dim); color: var(--expense); border-color: rgba(220,38,38,.20); }
.data-grid {
display: grid; grid-template-columns: 1fr 1fr;
border: 1.5px solid var(--border-solid); border-radius: var(--radius);
overflow: hidden; margin-bottom: 16px;
}
.data-cell { padding: 11px 15px; border-bottom: 1px solid var(--border-solid); }
.data-cell:nth-child(odd) { border-right: 1px solid var(--border-solid); }
.data-cell:last-child, .data-cell:nth-last-child(2):nth-child(odd) { border-bottom: none; }
.data-cell.full { grid-column: span 2; }
.data-cell.total { background: var(--income-dim); }
.review-card.expense .data-cell.total { background: var(--expense-dim); }
.review-card.expense .data-cell.total .value { color: var(--expense); }
.data-cell .label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 2px; }
.data-cell .value { font-size: .9rem; font-weight: 700; color: var(--text); }
.data-cell.total .value { font-size: 1.1rem; color: var(--accent-dark); font-weight: 900; }
.skonto-box.skonto-expired { opacity: .55; }
.skonto-box {
background: var(--warn-dim); border: 1.5px solid rgba(217,119,6,.25);
border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px;
display: flex; align-items: flex-start; gap: 10px;
}
.skonto-box .skonto-icon { font-size: 1.3rem; flex-shrink: 0; }
.skonto-box .skonto-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; color: var(--warn); letter-spacing: .05em; }
.skonto-box .skonto-amount { font-size: 1rem; font-weight: 800; color: var(--text); margin-top: 2px; }
.skonto-box .skonto-sub { font-size: .75rem; color: var(--text-muted); }
.paid-row { margin-bottom: 16px; }
.paid-row label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); display: block; margin-bottom: 8px; }
.review-actions { margin-top: auto; padding-top: 16px; }
.btn-reviewed {
width: 100%; padding: 14px;
background: var(--accent); color: #fff;
border: 2px solid var(--accent-dark);
box-shadow: 0 4px 0 var(--accent-dark), 0 0 20px rgba(249,115,22,.30);
border-radius: var(--radius); font-size: .95rem; font-weight: 800;
cursor: pointer; transition: all var(--transition-bounce);
display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-reviewed:hover {
background: var(--accent-dark); transform: translateY(-3px);
box-shadow: 0 7px 0 #c2410c, 0 0 30px rgba(249,115,22,.45);
}
.btn-reviewed:active { transform: translateY(2px); box-shadow: none; }
.btn-reviewed.btn-reviewed-invalid {
background: var(--expense); border-color: var(--expense-dark);
box-shadow: 0 4px 0 var(--expense-dark), 0 0 20px rgba(220,38,38,.25);
}
.btn-reviewed.btn-reviewed-invalid:hover {
background: var(--expense-dark);
box-shadow: 0 7px 0 #991b1b, 0 0 30px rgba(220,38,38,.40);
}
@keyframes btnShake {
0%,100% { transform: translateX(0); }
15% { transform: translateX(-7px) rotate(-1deg); }
30% { transform: translateX(7px) rotate(1deg); }
45% { transform: translateX(-5px); }
60% { transform: translateX(5px); }
75% { transform: translateX(-3px); }
90% { transform: translateX(3px); }
}
.btn-shake, .input-shake { animation: btnShake .45s cubic-bezier(.36,.07,.19,.97) both; }
.input-shake { border-color: var(--expense) !important; outline: none; }
.review-card.invalid-parse {
border-color: #1c1917;
}
.review-card.invalid-parse .review-data-pane { background: #f9d0d0; }
.review-card.invalid-parse .review-pdf-pane { background: #fde8e8; }
/* Card collapse animation */
.review-card.collapsing {
overflow: hidden;
animation: cardCollapse .45s cubic-bezier(.55, 0, 1, .45) forwards;
}
@keyframes cardCollapse {
0% { opacity:1; transform:scale(1); max-height:800px; margin-bottom:24px; }
40% { opacity:.5; transform:scale(.98) translateY(4px); }
100% { opacity:0; transform:scale(.92) translateY(16px); max-height:0; margin-bottom:0; padding:0; border-width:0; }
}
/* āā Archive āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā */
.month-group { margin-bottom: 14px; }
.month-header {
display: flex; align-items: center; gap: 12px; padding: 16px 20px;
background: rgba(255,255,255,.78); backdrop-filter: blur(10px);
border: 1.5px solid var(--border); border-radius: var(--radius);
cursor: pointer; transition: all var(--transition); user-select: none;
box-shadow: var(--comic), var(--glass-inner);
}
.month-header:hover { background: var(--surface-hover); }
.month-header.open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-color: transparent; box-shadow: var(--glass-inner); }
.month-chevron { margin-left: auto; transition: transform var(--transition); color: var(--text-muted); }
.month-header.open .month-chevron { transform: rotate(180deg); }
.month-name { font-weight: 800; font-size: 1rem; flex: 1; }
.month-stat { font-size: .78rem; padding: 4px 11px; border-radius: 99px; font-weight: 700; border: 1.5px solid transparent; }
.month-stat.income { background: var(--income-dim); color: var(--income-dark); border-color: rgba(245,158,11,.30); }
.month-stat.expense { background: var(--expense-dim); color: var(--expense); border-color: rgba(220,38,38,.20); }
.archive-row {
display: grid; grid-template-columns: 80px 1fr 100px 110px 90px 40px;
align-items: center; gap: 12px; padding: 11px 20px;
border-bottom: 1px solid var(--border); font-size: .875rem;
transition: background var(--transition);
}
.archive-row:last-child { border-bottom: none; }
.archive-row:hover { background: var(--surface-hover); }
.archive-row .ar-date { color: var(--text-muted); font-size: .8rem; }
.archive-row .ar-sender { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.archive-row .ar-num { color: var(--text-muted); font-size: .78rem; }
.archive-row .ar-amount { font-weight: 800; text-align: right; }
.archive-row.income .ar-amount { color: var(--income-dark); }
.archive-row.expense .ar-amount { color: var(--expense); }
.archive-row .ar-action { display: flex; justify-content: center; }
/* āā EĆR āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā */
/* Summary stat cards */
.eur-summary-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 24px; }
.eur-stat { background: var(--surface); border: 1.5px solid var(--border-solid); border-radius: var(--radius-lg); padding: 20px 24px; }
.eur-stat-label { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 6px; }
.eur-stat-value { font-size: 1.55rem; font-weight: 800; }
.eur-stat.income .eur-stat-value { color: var(--income-dark); }
.eur-stat.expense .eur-stat-value { color: var(--expense); }
.eur-stat.profit.positive .eur-stat-value { color: var(--income-dark); }
.eur-stat.profit.negative .eur-stat-value { color: var(--expense); }
/* Card wrapper */
.eur-card { background: var(--surface); border: 1.5px solid var(--border-solid); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 20px; }
.eur-card-title { font-size: .9rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 18px; }
.chart-card canvas { display: block; }
/* Year buttons */
.eur-year-btns { display: flex; gap: 6px; }
/* EĆR table */
.eur-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.eur-table td { padding: 10px 8px; border-bottom: 1px solid var(--border); }
.eur-table td:last-child { text-align: right; width: 160px; }
.eur-table tbody tr:last-child td { border-bottom: none; }
.eur-amt { font-variant-numeric: tabular-nums; font-weight: 600; }
.eur-amt.income { color: var(--income-dark); }
.eur-amt.expense { color: var(--expense); }
/* Table row variants */
.eur-biz-hdr td { font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); padding-top: 18px; border-bottom: 2px solid var(--border-solid); }
.eur-sub-total td { font-weight: 700; background: var(--surface-hover); }
.eur-main-row td { font-size: .95rem; }
.eur-result-row td { font-weight: 800; font-size: 1.05rem; border-top: 2px solid var(--border-solid); border-bottom: none; padding-top: 14px; }
.eur-section-hdr td { font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); padding-top: 6px; border-bottom: 1px solid var(--border-solid); }
.eur-tax-row td { color: var(--text-muted); font-size: .875rem; }
.eur-tax-result td { font-weight: 700; border-top: 1px solid var(--border-solid); }
.eur-spacer td { padding: 4px; border: none; }
.eur-total-hdr td { font-weight: 800; font-size: .95rem; border-top: 2px solid var(--border-solid); padding-top: 14px; }
.eur-info-row td { padding-bottom: 12px; }
/* Badges */
.eur-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.eur-badge.klein { background: var(--warn-dim); color: var(--warn); }
.eur-badge.regel { background: var(--accent-dim); color: var(--accent-dark); }
/* Monthly table */
.eur-monthly thead th { text-align: left; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); padding: 8px; border-bottom: 2px solid var(--border-solid); }
.eur-monthly thead th:not(:first-child),
.eur-monthly td:not(:first-child) { text-align: right; }
.eur-monthly tfoot td { border-top: 2px solid var(--border-solid); padding-top: 12px; }
/* āā Performance āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā */
.perf-view-toggle { display: flex; gap: 6px; }
.perf-canvas-wrap { overflow: hidden; }
.perf-table-wrap { overflow-x: auto; }
.perf-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.perf-table th { background: var(--surface-hover); padding: 10px 12px; text-align: right; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); border-bottom: 2px solid var(--border-solid); white-space: nowrap; }
.perf-table th:first-child { text-align: left; }
.perf-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap; }
.perf-table td:first-child { text-align: left; font-weight: 600; }
.perf-table tbody tr:last-child td { border-bottom: none; }
.perf-table tfoot td { background: var(--surface-hover); font-weight: 700; border-top: 2px solid var(--border-solid); border-bottom: none; }
.perf-delta { font-size: .75rem; padding-left: 2px !important; padding-right: 4px !important; }
.delta { display: inline-block; padding: 2px 6px; border-radius: 999px; font-weight: 700; font-size: .72rem; }
.delta-pos { background: var(--income-dim); color: var(--income-dark); }
.delta-neg { background: var(--expense-dim); color: var(--expense); }
.perf-legend { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
.perf-legend-item { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--text-muted); }
.perf-legend-swatch { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.perf-legend-line { width: 20px; height: 3px; border-radius: 2px; flex-shrink: 0; }
/* Year / view buttons (shared with EĆR) */
.year-btn { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: var(--radius); font-size: .82rem; font-weight: 600; border: 1.5px solid var(--border-solid); color: var(--text-muted); text-decoration: none; transition: all var(--transition); background: var(--surface); cursor: pointer; }
.year-btn:hover { border-color: var(--accent); color: var(--accent-dark); }
.year-btn.active { background: var(--accent); color: #fff; border-color: var(--accent-dark); box-shadow: 0 3px 0 var(--accent-dim); }
/* Month export row */
.perf-month-exports { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 20px; }
.perf-month-exports-label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.perf-month-export-group { display: flex; align-items: center; gap: 4px; }
.perf-month-export-name { font-size: .78rem; font-weight: 600; color: var(--text-muted); min-width: 24px; }
/* Month pills */
.perf-month-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.perf-month-pill {
display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
padding: 10px 16px; border-radius: var(--radius-lg); cursor: pointer;
background: var(--surface); border: 1.5px solid var(--border-solid);
transition: all var(--transition); text-align: left;
}
.perf-month-pill:hover { border-color: var(--accent); background: var(--accent-dim); }
.perf-month-pill.active { border-color: var(--accent-dark); background: var(--accent-dim); box-shadow: 0 3px 0 var(--accent-dim); }
.pill-name { font-weight: 700; font-size: .85rem; color: var(--text); }
.pill-inc { font-size: .72rem; color: var(--income-dark); font-weight: 600; }
.pill-exp { font-size: .72rem; color: var(--expense); font-weight: 600; }
/* Month detail panel */
.perf-month-detail {
overflow: hidden; max-height: 0;
transition: max-height .4s cubic-bezier(.4,0,.2,1);
margin-bottom: 0;
}
.perf-month-detail.open { max-height: 6000px; margin-bottom: 16px; }
.perf-detail-hdr {
display: flex; align-items: center; gap: 12px; flex-wrap: nowrap;
padding: 14px 20px; background: var(--surface);
border: 1.5px solid var(--border-solid); border-bottom: none;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.perf-detail-title { font-weight: 800; font-size: .95rem; }
.perf-detail-summary { display: flex; gap: 10px; font-size: .85rem; font-weight: 600; flex-shrink: 1; min-width: 0; }
.perf-detail-body {
background: var(--surface); border: 1.5px solid var(--border-solid); border-top: none;
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
padding: 20px;
}
.perf-detail-body .income { color: var(--income-dark); }
.perf-detail-body .expense { color: var(--expense); }
/* Category breakdown */
.perf-cat-section { margin-bottom: 20px; }
.perf-cat-title { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; }
.perf-cat-title.income { color: var(--income-dark); }
.perf-cat-title.expense { color: var(--expense); }
.perf-cat-row { display: grid; grid-template-columns: 180px 1fr 110px; align-items: center; gap: 10px; margin-bottom: 6px; }
.perf-cat-name { font-size: .82rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.perf-cat-bar { height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
.perf-cat-fill { display: block; height: 100%; border-radius: 4px; transition: width .4s ease; }
.perf-cat-fill.income { background: var(--income-dark); }
.perf-cat-fill.expense { background: var(--expense); }
.perf-cat-amt { font-size: .82rem; font-weight: 700; text-align: right; white-space: nowrap; }
.perf-cat-amt.income { color: var(--income-dark); }
.perf-cat-amt.expense { color: var(--expense); }
.perf-inv-table-wrap { margin-top: 20px; overflow-x: auto; }
.perf-inv-table td:first-child { font-weight: 400; }
.perf-inv-row.income td:last-child { color: var(--income-dark); }
.perf-inv-row.expense td:last-child { color: var(--expense); }
/* Print styles */
@media print {
.nav, .page-header .perf-view-toggle, .btn-export, .perf-view-toggle { display: none !important; }
.page { padding-top: 0; }
.eur-card { break-inside: avoid; box-shadow: none; border: 1px solid #ddd; }
canvas { max-width: 100%; }
}
/* Export button */
.btn-export { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--radius); font-size: .82rem; font-weight: 600; border: 1.5px solid var(--border-solid); color: var(--text-muted); text-decoration: none; transition: all var(--transition); background: var(--surface); }
.btn-export:hover { border-color: var(--accent); color: var(--accent-dark); background: var(--accent-dim); }
/* āā Modal āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā */
.modal-overlay {
position: fixed; inset: 0;
background: rgba(0,0,0,.40);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
z-index: 200; display: flex; align-items: center; justify-content: center;
padding: 24px; opacity: 0; transition: opacity var(--transition); pointer-events: none;
}
.modal-overlay.open { opacity: 1; pointer-events: auto; }
.modal {
background: rgba(255,255,255,.92); backdrop-filter: blur(20px);
border: 1.5px solid var(--border-solid); border-radius: var(--radius-xl);
width: 100%; max-width: 900px; max-height: 90vh;
display: flex; flex-direction: column;
box-shadow: 8px 10px 0 rgba(0,0,0,.08), var(--glass-inner);
transform: scale(.95) translateY(16px);
transition: transform var(--transition-bounce);
}
.modal-overlay.open .modal { transform: scale(1) translateY(0); }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1.5px solid var(--border-solid); flex-shrink: 0; }
.modal-body { flex: 1; overflow: hidden; }
.modal-close { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1.4rem; line-height: 1; padding: 4px; border-radius: var(--radius-sm); transition: all var(--transition); }
.modal-close:hover { color: var(--expense); background: var(--expense-dim); }
/* āā Toasts āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā */
.toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 300; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.toast {
background: rgba(255,255,255,.90); backdrop-filter: blur(12px);
border: 1.5px solid var(--border-solid); border-radius: var(--radius);
padding: 14px 18px; font-size: .875rem; font-weight: 600;
box-shadow: 4px 4px 0 rgba(0,0,0,.07), 0 0 16px rgba(249,115,22,.10);
max-width: 320px; pointer-events: auto;
animation: toastIn .4s var(--transition-bounce) both;
display: flex; align-items: center; gap: 10px;
}
.toast.success { border-left: 4px solid var(--accent); }
.toast.error { border-left: 4px solid var(--expense); }
.toast.warn { border-left: 4px solid var(--warn); }
.toast.leaving { animation: toastOut .3s ease forwards; }
@keyframes toastIn { from{opacity:0;transform:translateY(12px) scale(.95)} to{opacity:1;transform:none} }
@keyframes toastOut { to{opacity:0;transform:translateX(16px);max-height:0;padding:0;margin:0;border:none} }
/* āā Misc animations āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā */
@keyframes slideInFade { from{opacity:0;transform:translateY(-8px) scale(.97)} to{opacity:1;transform:none} }
.spinner { width: 24px; height: 24px; border: 3px solid var(--border-solid); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* āā Stat pills āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā */
.stat-pills { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 32px; }
.stat-pill {
flex: 1; min-width: 160px;
background: rgba(255,255,255,.75); backdrop-filter: blur(10px);
border: 1.5px solid var(--border); border-radius: var(--radius);
padding: 18px 20px; box-shadow: var(--comic), var(--glass-inner);
}
.stat-pill .sp-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 4px; }
.stat-pill .sp-value { font-size: 1.5rem; font-weight: 900; }
.stat-pill.income .sp-value { color: var(--income-dark); }
.stat-pill.expense .sp-value { color: var(--expense); }
.stat-pill.profit .sp-value { color: var(--accent-dark); }
/* āā Empty state āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā */
.empty-state { text-align: center; padding: 64px 24px; color: var(--text-muted); }
.empty-state .es-icon { font-size: 3rem; margin-bottom: 16px; opacity: .5; }
/* āā Divider āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā */
.divider { height: 1.5px; background: var(--border-solid); margin: 24px 0; border-radius: 1px; }
/* āā Nav Separator āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā */
.nav-sep { width: 1px; height: 24px; background: var(--border-solid); margin: 0 4px; flex-shrink: 0; }
/* āā Business Switcher āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā */
.biz-switcher { position: relative; }
.biz-btn {
display: flex; align-items: center; gap: 8px;
padding: 7px 12px; border-radius: var(--radius);
background: var(--accent-dim); border: 1.5px solid var(--border-solid);
color: var(--text); font-size: .8rem; font-weight: 800;
cursor: pointer; transition: all var(--transition); white-space: nowrap;
font-family: inherit;
}
.biz-btn:hover { border-color: var(--accent); background: var(--accent-dim); }
.biz-btn-logo { width: 22px; height: 22px; object-fit: contain; border-radius: 3px; }
.biz-btn-fb { font-size: 1.1rem; line-height: 1; }
.biz-btn-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.biz-btn-chevron { font-size: .75rem; opacity: .6; transition: transform var(--transition); }
.biz-btn[aria-expanded="true"] .biz-btn-chevron,
.biz-switcher:has(.biz-dropdown.open) .biz-btn-chevron { transform: rotate(180deg); }
.biz-dropdown {
display: none; position: absolute; top: calc(100% + 6px); left: 0;
min-width: 220px; background: var(--surface-solid);
border: 1.5px solid var(--border-solid); border-radius: var(--radius);
box-shadow: 0 8px 32px rgba(0,0,0,.14), var(--glass-inner);
z-index: 150; overflow: hidden;
animation: slideInFade .18s ease both;
}
.biz-dropdown.open { display: block; }
.biz-opt-form { margin: 0; }
.biz-opt {
width: 100%; display: flex; align-items: center; gap: 10px;
padding: 12px 16px; background: none; border: none;
border-bottom: 1px solid var(--border);
cursor: pointer; transition: background var(--transition);
font-family: inherit; text-align: left;
}
.biz-opt:last-child { border-bottom: none; }
.biz-opt:hover { background: var(--surface-hover); }
.biz-opt.active { background: var(--accent-dim); }
.biz-opt-logo { width: 28px; height: 28px; object-fit: contain; border-radius: 4px; flex-shrink: 0; }
.biz-opt-fb { font-size: 1.3rem; line-height: 1; width: 28px; text-align: center; flex-shrink: 0; }
.biz-opt-info { flex: 1; min-width: 0; }
.biz-opt-name { display: block; font-size: .82rem; font-weight: 800; color: var(--text); }
.biz-opt-sub { display: block; font-size: .7rem; color: var(--text-muted); font-weight: 500; margin-top: 1px; }
.biz-check { color: var(--accent); font-weight: 900; font-size: .9rem; flex-shrink: 0; }
.biz-divider { height: 1px; background: var(--border-solid); margin: 0; }
/* āā Biz context badge (shown in page body for combined view) āāā */
.biz-context-badge {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px; border-radius: 99px; font-size: .75rem; font-weight: 700;
background: var(--accent-dim); border: 1.5px solid var(--border-solid); color: var(--text-muted);
}
/* āā Responsive āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā */
@media (max-width: 900px) {
.drop-zones { grid-template-columns: 1fr; }
.review-card-inner { grid-template-columns: 1fr; }
.review-pdf-pane { min-height: 280px; border-right: none; border-bottom: 1.5px solid var(--border); }
.eur-grid { grid-template-columns: 1fr; }
.archive-row { grid-template-columns: 1fr 1fr 80px 40px; }
.archive-row .ar-date, .archive-row .ar-num { display: none; }
}
@media (max-width: 600px) {
.nav { padding: 0 16px; gap: 4px; }
.nav-link { padding: 7px 10px; font-size: .8rem; }
.container { padding: 0 16px; }
.login-card { padding: 28px 22px; }
.data-grid { grid-template-columns: 1fr; }
.data-cell:nth-child(odd) { border-right: none; }
.data-cell { border-bottom: 1px solid var(--border-solid) !important; }
}
/* āā Flatpickr theme overrides āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā */
.flatpickr-calendar {
border: 2px solid var(--border-solid);
border-radius: var(--radius);
box-shadow: var(--comic);
font-family: inherit;
font-size: .875rem;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
background: var(--accent);
border-color: var(--accent);
}
.flatpickr-day:hover {
background: var(--accent-dim, rgba(249,115,22,.12));
}
.flatpickr-months .flatpickr-month,
.flatpickr-weekdays,
span.flatpickr-weekday {
background: transparent;
color: var(--text);
}
.flatpickr-current-month .numInputWrapper span { color: var(--text); }
.flatpickr-day.today { border-color: var(--accent); }
/* āā Archive āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā */
.archive-filter {
display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap;
}
.archive-filter-btn {
padding: 7px 18px; border-radius: 99px; font-size: .82rem; font-weight: 700;
border: 1.5px solid var(--border-solid); color: var(--text-muted);
background: var(--surface); text-decoration: none; transition: all var(--transition);
}
.archive-filter-btn:hover { border-color: var(--accent); color: var(--text); }
.archive-filter-btn.active { background: var(--accent); color: #fff; border-color: var(--accent-dark); }
.archive-filter-btn.income.active { background: var(--income); border-color: var(--income-dark); }
.archive-filter-btn.expense.active { background: var(--expense); border-color: var(--expense-dark); }
.month-group { margin-bottom: 12px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--comic); }
.month-hdr {
width: 100%; display: flex; align-items: center; gap: 12px;
padding: 14px 20px; cursor: pointer;
background: rgba(255,255,255,.88); backdrop-filter: blur(8px);
border: 1.5px solid var(--border-solid); border-radius: var(--radius-lg);
font-family: inherit; font-size: .95rem; font-weight: 700; color: var(--text);
transition: background var(--transition);
}
.month-group:has(.month-body:not([hidden])) .month-hdr {
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
border-bottom-color: var(--border);
}
.month-hdr:hover { background: var(--surface-hover); }
.month-chevron { font-size: .75rem; color: var(--text-muted); flex-shrink: 0; transition: transform var(--transition); }
.month-title { flex: 1; text-align: left; }
.month-totals { display: flex; gap: 16px; font-size: .82rem; }
.month-totals .income { color: var(--income-dark); font-weight: 800; }
.month-totals .expense { color: var(--expense); font-weight: 800; }
.month-body {
background: rgba(255,255,255,.92);
border: 1.5px solid var(--border-solid); border-top: none;
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
overflow: hidden; max-height: 0;
transition: max-height .35s cubic-bezier(.4, 0, .2, 1);
}
.month-body.open { max-height: 4000px; }
.archive-row {
display: grid;
grid-template-columns: 36px 1fr 140px 110px 64px;
align-items: center; gap: 12px;
padding: 12px 20px; cursor: pointer;
border-bottom: 1px solid var(--border);
transition: background var(--transition);
}
.archive-row:last-child { border-bottom: none; }
.archive-row:hover { background: var(--surface-hover); }
/* combined mode adds biz icon column */
.archive-row.has-biz { grid-template-columns: 24px 36px 1fr 140px 110px 64px; }
.ar-biz { font-size: .95rem; opacity: .75; display: flex; align-items: center; }
.ar-type { font-size: 1.1rem; text-align: center; }
.ar-name { font-weight: 600; font-size: .875rem; min-width: 0; }
.ar-name span { display: block; font-size: .75rem; color: var(--text-muted); font-weight: 400; }
.ar-cat-badge { display: inline-block; padding: 1px 6px; border-radius: 999px; font-size: .68rem; font-weight: 700; background: var(--accent-dim); color: var(--accent-dark); border: 1px solid var(--border-solid); margin-left: 4px; vertical-align: middle; }
.ar-date { font-size: .8rem; color: var(--text-muted); white-space: nowrap; display: flex; flex-direction: column; gap: 2px; }
.ar-date-inv { color: var(--text); font-weight: 600; }
.ar-date-add { font-size: .72rem; color: var(--text-dim); }
.ar-amount { font-weight: 800; font-size: .9rem; white-space: nowrap; text-align: right; }
.ar-amount.income { color: var(--income-dark); }
.ar-amount.expense { color: var(--expense); }
.ar-view { text-align: right; }
.btn-view {
display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: .72rem;
font-weight: 700; background: var(--accent-dim); color: var(--text-muted);
border: 1px solid var(--border-solid); transition: all var(--transition); white-space: nowrap;
}
.archive-row:hover .btn-view { background: var(--accent); color: #fff; border-color: var(--accent-dark); }
/* āā Inline PDF expand āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā */
.ar-item { display: flex; flex-direction: column; }
.ar-pdf-expand {
overflow: hidden; max-height: 0;
transition: max-height .35s cubic-bezier(.4,0,.2,1);
border-left: 1.5px solid var(--border-solid);
border-right: 1.5px solid var(--border-solid);
}
.ar-pdf-expand.open { max-height: 640px; }
.ar-pdf-inner {
position: relative; height: 580px;
background: var(--surface);
}
.ar-pdf-inner .ar-pdf-loading {
position: absolute; inset: 0; display: flex; align-items: center;
justify-content: center; flex-direction: column; gap: 12px;
color: var(--text-muted); font-size: .875rem;
}
.ar-pdf-inner iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
/* āā eBay pages āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā */
.ebay-card { margin-bottom: 20px; }
.ebay-setup-card { margin-bottom: 20px; }
.ebay-setup-card h2 { font-size: 1rem; font-weight: 700; margin-bottom: 10px; }
.setup-list { margin: 10px 0 10px 20px; display: flex; flex-direction: column; gap: 4px; }
.setup-list li { font-size: .875rem; }
.setup-list code { background: var(--accent-dim); padding: 1px 5px; border-radius: 4px; font-size: .8rem; }
.ebay-status-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ebay-status-info { display: flex; align-items: center; gap: 10px; }
.ebay-status-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.ebay-status-dot.connected { background: #22c55e; box-shadow: 0 0 6px #22c55e88; }
.ebay-status-dot.disconnected { background: #ef4444; box-shadow: 0 0 6px #ef444488; }
.ebay-status-label { font-weight: 700; font-size: .95rem; }
.ebay-last-sync { margin-top: 10px; font-size: .8rem; color: var(--text-muted); }
.ebay-connect-btn, .ebay-reconnect-btn { white-space: nowrap; }
.card-title { font-size: .875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
color: var(--text-muted); margin-bottom: 14px; }
.ebay-settings-form .form-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ebay-settings-form label { font-size: .875rem; font-weight: 600; }
.ebay-settings-form input[type="date"] { padding: 6px 10px; border: 1.5px solid var(--border-solid);
border-radius: 6px; font-size: .875rem; background: var(--surface); color: var(--text); }
.form-hint { margin-top: 8px; font-size: .78rem; color: var(--text-muted); }
.form-success { margin-top: 6px; font-size: .8rem; color: #22c55e; font-weight: 600; }
.ebay-sync-hint { font-size: .875rem; color: var(--text-muted); margin-bottom: 14px; }
.ebay-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ebay-sync-result { margin-top: 14px; padding: 10px 14px; border-radius: 8px; font-size: .875rem; font-weight: 600; }
.sync-ok { background: #14532d22; color: #22c55e; border: 1px solid #22c55e44; }
.sync-error { background: #7f1d1d22; color: #ef4444; border: 1px solid #ef444444; }
.flash { padding: 12px 16px; border-radius: 8px; font-weight: 600; font-size: .875rem; margin-bottom: 16px; }
.flash-ok { background: #14532d22; color: #22c55e; border: 1px solid #22c55e44; }
.flash-err { background: #7f1d1d22; color: #ef4444; border: 1px solid #ef444444; }
/* āā eBay review page āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā */
.ebay-review-card { padding: 0; overflow: hidden; }
.ebay-review-toolbar { display: flex; align-items: center; gap: 16px; padding: 14px 20px;
border-bottom: 1.5px solid var(--border-solid); flex-wrap: wrap; }
.ebay-check-all { display: flex; align-items: center; gap: 6px; font-size: .875rem; font-weight: 600;
cursor: pointer; user-select: none; }
.ebay-review-legend { display: flex; gap: 14px; font-size: .8rem; margin-left: auto; }
.legend-income { color: var(--income-dark); font-weight: 700; }
.legend-expense { color: var(--expense); font-weight: 700; }
.ebay-txn-table { width: 100%; border-collapse: collapse; }
.ebay-txn-table th { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
color: var(--text-muted); padding: 8px 14px; border-bottom: 1.5px solid var(--border-solid); text-align: left; }
.ebay-txn-table td { padding: 9px 14px; border-bottom: 1px solid var(--border-solid); font-size: .875rem; vertical-align: middle; }
.txn-row:last-child td { border-bottom: none; }
.txn-row.row-income { background: transparent; }
.txn-row.row-expense { background: #7f1d1d08; }
.txn-row:hover { background: var(--accent-dim); }
.txn-date { white-space: nowrap; color: var(--text-muted); font-size: .8rem; }
.txn-desc { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.txn-type-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px;
border-radius: 20px; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.badge-income { background: var(--income-dim, #14532d22); color: var(--income-dark); }
.badge-expense { background: #7f1d1d22; color: var(--expense); }
.txn-amount { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right !important; white-space: nowrap; }
.income-col { color: var(--income-dark); }
.expense-col { color: var(--expense); }
.btn-exclude { padding: 3px 9px; border-radius: 6px; font-size: .72rem; font-weight: 700;
border: 1.5px solid var(--border-solid); background: transparent; color: var(--text-muted);
cursor: pointer; white-space: nowrap; transition: all var(--transition); }
.btn-exclude:hover { background: #7f1d1d22; color: var(--expense); border-color: var(--expense); }
.ebay-review-footer { display: flex; align-items: center; justify-content: space-between;
padding: 14px 20px; border-top: 1.5px solid var(--border-solid); }
#selected-count { font-size: .875rem; color: var(--text-muted); }
.empty-state { text-align: center; padding: 40px; color: var(--text-muted); }
/* āā Settings page āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā */
.settings-section { margin-bottom: 20px; }
.settings-section-title { font-size: 1rem; font-weight: 800; margin-bottom: 8px; }
.settings-section-desc { font-size: .875rem; color: var(--text-muted); margin-bottom: 18px; line-height: 1.6; }
.tax-biz-cards { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.tax-biz-card { padding: 14px 16px; border: 1.5px solid var(--border-solid); border-radius: 8px; background: var(--surface); }
.tax-biz-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.tax-biz-name { font-weight: 700; font-size: .9rem; }
.tax-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; font-size: .75rem; font-weight: 700; }
.badge-klein { background: #78350f22; color: #d97706; border: 1px solid #d9770644; }
.badge-regel { background: #14532d22; color: #22c55e; border: 1px solid #22c55e44; }
.badge-planned { background: #1e3a5f22; color: #60a5fa; border: 1px solid #60a5fa44; }
.tax-biz-detail { font-size: .8rem; color: var(--text-muted); }
.tax-switch-box { border: 1.5px solid var(--border-solid); border-radius: 8px; padding: 18px;
background: var(--accent-dim); margin-top: 4px; }
.tax-switch-title { font-size: .9rem; font-weight: 700; margin-bottom: 6px; }
.tax-switch-hint { font-size: .8rem; color: var(--text-muted); margin-bottom: 14px; line-height: 1.5; }
.tax-switch-form { display: flex; flex-direction: column; gap: 12px; }
.tax-switch-row { display: flex; align-items: center; gap: 10px; }
.tax-switch-row label { font-size: .875rem; font-weight: 600; }
.tax-switch-row select { padding: 6px 10px; border: 1.5px solid var(--border-solid); border-radius: 6px;
font-size: .875rem; background: var(--surface); color: var(--text); }
.tax-switch-confirm { display: flex; align-items: flex-start; gap: 8px; font-size: .8rem;
color: var(--text-muted); line-height: 1.5; cursor: pointer; }
.tax-switch-confirm input { margin-top: 2px; flex-shrink: 0; }
.tax-switch-btn { align-self: flex-start; }
.tax-switch-result { padding: 8px 12px; border-radius: 6px; font-size: .8rem; font-weight: 600; }
.switch-ok { background: #14532d22; color: #22c55e; }
.switch-error { background: #7f1d1d22; color: #ef4444; }
.tax-switch-planned { display: flex; align-items: center; gap: 10px; margin-top: 4px;
padding: 12px 16px; border-radius: 8px; background: #1e3a5f22;
border: 1px solid #60a5fa44; color: #60a5fa; font-size: .875rem; }
.tax-planned-icon { font-size: 1.2rem; }
.konto-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.konto-info { display: flex; flex-direction: column; gap: 2px; }
.konto-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.konto-username { font-size: 1rem; font-weight: 700; }
/* āā Auth simple card (forgot/reset) āāāāāāāāāāāāāāāāāāāāāāāāāāāāāā */
.auth-simple-card {
max-width: 420px; margin: 80px auto; padding: 36px 40px;
background: var(--surface); border: 1.5px solid var(--border-solid);
border-radius: 12px; text-align: center;
}
.auth-simple-logo { font-size: 2.5rem; margin-bottom: 12px; }
.auth-simple-title { font-size: 1.3rem; font-weight: 800; margin-bottom: 8px; }
.auth-simple-desc { font-size: .875rem; color: var(--text-muted); margin-bottom: 20px; line-height: 1.6; }
.auth-success { background: #14532d22; color: #22c55e; border: 1px solid #22c55e44;
border-radius: 8px; padding: 12px 16px; font-size: .875rem; font-weight: 600; margin-bottom: 16px; }
.alert-success { background: #14532d22; color: #22c55e; border: 1px solid #22c55e44;
border-radius: 8px; padding: 10px 14px; font-size: .875rem; font-weight: 600; margin-bottom: 14px; }
.auth-simple-card .form-group { text-align: left; margin-bottom: 14px; }
.auth-simple-card .form-group label { display: block; font-size: .8rem; font-weight: 600; margin-bottom: 4px; }
.auth-simple-card .form-control { width: 100%; padding: 9px 12px; border: 1.5px solid var(--border-solid);
border-radius: 7px; font-size: .9rem; background: var(--surface); color: var(--text); }
.auth-simple-card .btn-login { width: 100%; }
.btn-contact { display: block; text-align: center; font-size: .8rem; color: var(--text-muted);
margin-top: 10px; text-decoration: none; }
.btn-contact:hover { color: var(--accent); }
/* āā Backup page āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā */
.backup-card { margin-bottom: 20px; }
.backup-stats { display: flex; gap: 24px; margin-bottom: 14px; }
.backup-stat { display: flex; flex-direction: column; gap: 2px; }
.backup-stat-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.backup-stat-value { font-size: 1.1rem; font-weight: 700; }
.backup-hint { font-size: .8rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 16px; }
.backup-table { width: 100%; border-collapse: collapse; margin-bottom: 4px; }
.backup-table th { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
color: var(--text-muted); padding: 6px 8px; border-bottom: 1.5px solid var(--border-solid); text-align: left; }
.backup-table td { padding: 7px 8px; border-bottom: 1px solid var(--border-solid); font-size: .875rem; }
.backup-table tr:last-child td { border-bottom: none; }
/* āā Steam page āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā */
.steam-guide-card { margin-bottom: 20px; }
.steam-guide-steps { margin: 10px 0 10px 20px; display: flex; flex-direction: column; gap: 6px; font-size: .875rem; }
.steam-guide-steps li strong { color: var(--text); }
.steam-guide-note { font-size: .78rem; color: var(--text-muted); margin-top: 10px; }
.steam-guide-note code { background: var(--accent-dim); padding: 1px 5px; border-radius: 4px; font-size: .75rem; }
.steam-upload-card { margin-bottom: 20px; }
.steam-drop-zone {
border: 2px dashed var(--border-solid); border-radius: 10px; padding: 40px 20px;
text-align: center; cursor: pointer; transition: all var(--transition);
background: var(--accent-dim);
}
.steam-drop-zone:hover, .steam-drop-zone.drag-over {
border-color: var(--accent); background: var(--accent-dim);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}
.steam-drop-icon { font-size: 2.5rem; margin-bottom: 8px; }
.steam-drop-text { font-size: 1rem; font-weight: 700; margin-bottom: 4px; }
.steam-drop-sub { font-size: .8rem; color: var(--text-muted); }
.steam-progress-wrap { margin-top: 16px; }
.steam-progress-bar { height: 8px; background: var(--accent-dim); border-radius: 4px; overflow: hidden; margin-bottom: 8px; }
.steam-progress-fill { height: 100%; width: 0%; background: var(--accent); border-radius: 4px; transition: width .2s; }
.steam-progress-label { font-size: .8rem; color: var(--text-muted); text-align: center; }