:root {
  color-scheme: dark;
  --bg: #07101f;
  --bg-deep: #030712;
  --surface: rgba(17, 24, 39, .78);
  --surface-2: #111c31;
  --surface-3: #18243a;
  --border: rgba(148, 163, 184, .18);
  --border-strong: rgba(148, 163, 184, .32);
  --text: #f8fafc;
  --muted: #94a3b8;
  --muted-2: #64748b;
  --primary: #38bdf8;
  --primary-strong: #0ea5e9;
  --teal: #2dd4bf;
  --green: #4ade80;
  --red: #fb7185;
  --orange: #fb923c;
  --purple: #a78bfa;
  --yellow: #facc15;
  --shadow: 0 24px 70px rgba(0, 0, 0, .35);
  --radius: 18px;
  --radius-sm: 12px;
  --sidebar: 264px;
  --topbar: 76px;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #eef4fb;
  --bg-deep: #e2e8f0;
  --surface: rgba(255, 255, 255, .88);
  --surface-2: #ffffff;
  --surface-3: #f1f5f9;
  --border: rgba(51, 65, 85, .15);
  --border-strong: rgba(51, 65, 85, .28);
  --text: #0f172a;
  --muted: #526276;
  --muted-2: #64748b;
  --shadow: 0 24px 70px rgba(30, 41, 59, .13);
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body {
  min-height: 100vh;
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(circle at 8% 0%, rgba(14,165,233,.16), transparent 28rem),
    radial-gradient(circle at 92% 18%, rgba(45,212,191,.10), transparent 24rem),
    linear-gradient(145deg, var(--bg-deep), var(--bg));
  background-attachment: fixed;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
img { max-width: 100%; }
::selection { background: rgba(56,189,248,.35); }

body[data-authenticated="true"] .app-shell { opacity: 0; visibility: hidden; }
body[data-authenticated="true"].session-authorized .app-shell { opacity: 1; visibility: visible; transition: opacity .14s ease; }
.app-shell { min-height: 100vh; }
.sidebar {
  position: fixed;
  z-index: 40;
  inset: 0 auto 0 0;
  width: var(--sidebar);
  padding: 22px 18px;
  border-right: 1px solid var(--border);
  background: rgba(3, 7, 18, .82);
  backdrop-filter: blur(22px);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
html[data-theme="light"] .sidebar { background: rgba(255,255,255,.85); }
.brand { display: flex; align-items: center; gap: 12px; padding: 2px 8px 24px; }
.brand-logo { width: 44px; height: 44px; border-radius: 14px; box-shadow: 0 12px 28px rgba(14,165,233,.25); }
.brand-copy strong { display: block; font-size: 1.05rem; letter-spacing: -.02em; }
.brand-copy span { color: var(--muted); font-size: .75rem; }
.nav-label { padding: 9px 12px 6px; color: var(--muted-2); font-size: .7rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.nav { display: grid; gap: 4px; }
.nav-link {
  min-height: 45px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--muted);
  font-weight: 650;
  transition: .18s ease;
}
.nav-link:hover { color: var(--text); background: rgba(148,163,184,.08); transform: translateX(2px); }
.nav-link.active { color: #fff; background: linear-gradient(135deg, rgba(14,165,233,.88), rgba(13,148,136,.86)); box-shadow: 0 10px 28px rgba(14,165,233,.17); }
.nav-icon { width: 24px; height: 24px; display: grid; place-items: center; font-size: 1.05rem; }
.nav-vault { margin-top: 4px; color: #d1d5db; background: linear-gradient(135deg, rgba(0,0,0,.5), rgba(15,23,42,.8)); border: 1px solid rgba(255,255,255,.08); }
.nav-vault.active { background: #030303; box-shadow: 0 0 0 1px rgba(250,204,21,.2), 0 14px 34px rgba(0,0,0,.45); color: #facc15; }
.sidebar-bottom { margin-top: auto; padding-top: 18px; }
.user-chip { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: rgba(148,163,184,.05); }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--purple), var(--primary)); color: white; font-weight: 900; }
.user-chip small { display: block; color: var(--muted); }
.logout-form { margin: 10px 0 0; }

.main-wrap { min-height: 100vh; margin-left: var(--sidebar); }
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--topbar);
  padding: 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  background: rgba(7,16,31,.72);
  backdrop-filter: blur(22px);
}
html[data-theme="light"] .topbar { background: rgba(238,244,251,.82); }
.topbar-left, .topbar-actions { display: flex; align-items: center; gap: 10px; }
.topbar-title { font-size: 1.06rem; font-weight: 800; letter-spacing: -.02em; }
.topbar-subtitle { color: var(--muted); font-size: .78rem; }
.content { width: min(1550px, 100%); margin: 0 auto; padding: 30px; }

.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.page-head h1 { margin: 0; font-size: clamp(1.75rem, 3vw, 2.55rem); letter-spacing: -.055em; line-height: 1.08; }
.page-head p { margin: 8px 0 0; color: var(--muted); max-width: 780px; }
.page-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.eyebrow { margin-bottom: 7px; color: var(--teal); font-size: .72rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }

.btn {
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 9px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--surface-2);
  color: var(--text);
  font-weight: 750;
  cursor: pointer;
  transition: .16s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); border-color: var(--border-strong); filter: brightness(1.05); }
.btn:active { transform: translateY(0); }
.btn-primary { border-color: transparent; color: white; background: linear-gradient(135deg, var(--primary-strong), #0284c7); box-shadow: 0 10px 28px rgba(14,165,233,.22); }
.btn-teal { border-color: transparent; color: #021410; background: linear-gradient(135deg, #5eead4, #2dd4bf); }
.btn-danger { border-color: rgba(251,113,133,.28); color: #fecdd3; background: rgba(190,24,93,.17); }
html[data-theme="light"] .btn-danger { color: #9f1239; }
.btn-warning { border-color: rgba(250,204,21,.3); color: #fde68a; background: rgba(161,98,7,.2); }
html[data-theme="light"] .btn-warning { color: #854d0e; }
.btn-ghost { background: transparent; }
.btn-sm { min-height: 34px; padding: 6px 10px; border-radius: 9px; font-size: .82rem; }
.btn-icon { width: 42px; padding: 0; }
.btn-block { width: 100%; }
.link { color: var(--primary); font-weight: 700; }
.link:hover { text-decoration: underline; }

.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.grid-5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
.grid-6 { grid-template-columns: repeat(6, minmax(0,1fr)); }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 10px 35px rgba(0,0,0,.09);
  backdrop-filter: blur(14px);
}
.card-pad { padding: 21px; }
.card-head { min-height: 58px; padding: 17px 20px 12px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.card-head h2, .card-head h3 { margin: 0; font-size: 1.02rem; letter-spacing: -.025em; }
.card-head p { margin: 4px 0 0; color: var(--muted); font-size: .78rem; }
.card-body { padding: 0 20px 20px; }
.card-divider { border-top: 1px solid var(--border); }
.card-accent::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--primary); }

.kpi { min-height: 145px; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; }
.kpi-top { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: .79rem; font-weight: 750; }
.kpi-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: rgba(56,189,248,.12); color: var(--primary); }
.kpi-value { margin-top: 13px; font-size: clamp(1.35rem,2.3vw,2rem); font-weight: 900; letter-spacing: -.055em; }
.kpi-meta { margin-top: 6px; color: var(--muted); font-size: .78rem; }
.kpi-positive .kpi-value, .positive { color: var(--green) !important; }
.kpi-negative .kpi-value, .negative { color: var(--red) !important; }
.kpi-warning .kpi-value { color: var(--orange); }
.kpi-teal .kpi-icon { color: var(--teal); background: rgba(45,212,191,.12); }
.kpi-purple .kpi-icon { color: var(--purple); background: rgba(167,139,250,.12); }

.hero-card { padding: 25px; background: linear-gradient(125deg, rgba(14,165,233,.18), rgba(13,148,136,.08)), var(--surface); }
.hero-card::after { content: ""; position: absolute; width: 260px; height: 260px; right: -90px; top: -110px; border-radius: 50%; background: rgba(56,189,248,.11); filter: blur(1px); }
.hero-main { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.hero-amount { font-size: clamp(2.1rem,5vw,4rem); font-weight: 950; letter-spacing: -.07em; line-height: 1; }
.hero-label { color: var(--muted); margin-bottom: 10px; }
.hero-meta { margin-top: 13px; display: flex; flex-wrap: wrap; gap: 10px 18px; color: var(--muted); font-size: .83rem; }

.chart-box { position: relative; width: 100%; min-height: 280px; padding: 4px 0; }
.chart-box canvas { width: 100%; height: 280px; display: block; }
.chart-box.chart-sm, .chart-box.chart-sm canvas { min-height: 210px; height: 210px; }
.chart-box.chart-md, .chart-box.chart-md canvas { min-height: 300px; height: 300px; }
.chart-box.chart-lg, .chart-box.chart-lg canvas { min-height: 340px; height: 340px; }
.chart-box.chart-xl, .chart-box.chart-xl canvas { min-height: 390px; height: 390px; }
.chart-empty { height: 220px; display: grid; place-items: center; color: var(--muted); text-align: center; }

.progress { height: 8px; border-radius: 99px; overflow: hidden; background: rgba(148,163,184,.13); }
.progress > span { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg,var(--primary),var(--teal)); transition: width .3s ease; }
.progress.danger > span { background: linear-gradient(90deg,var(--orange),var(--red)); }
.progress-row { display: grid; gap: 7px; }
.progress-label { display: flex; justify-content: space-between; gap: 12px; font-size: .8rem; }

.table-wrap { overflow-x: auto; border-top: 1px solid var(--border); }
table { width: 100%; border-collapse: collapse; min-width: 780px; }
th { padding: 11px 14px; text-align: left; color: var(--muted); font-size: .69rem; letter-spacing: .07em; text-transform: uppercase; border-bottom: 1px solid var(--border); white-space: nowrap; }
td { padding: 13px 14px; border-bottom: 1px solid rgba(148,163,184,.1); vertical-align: middle; font-size: .88rem; }
tbody tr { transition: background .15s ease; }
tbody tr:hover { background: rgba(148,163,184,.045); }
tbody tr:last-child td { border-bottom: 0; }
.td-main { font-weight: 750; }
.td-sub { margin-top: 3px; color: var(--muted); font-size: .75rem; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.table-empty { padding: 42px 20px; text-align: center; color: var(--muted); }
.mobile-cards { display: none; }

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); background: rgba(148,163,184,.07); font-size: .72rem; font-weight: 800; white-space: nowrap; }
.badge-green { color: #86efac; border-color: rgba(74,222,128,.25); background: rgba(22,101,52,.18); }
.badge-red { color: #fda4af; border-color: rgba(251,113,133,.25); background: rgba(159,18,57,.18); }
.badge-orange { color: #fdba74; border-color: rgba(251,146,60,.25); background: rgba(154,52,18,.18); }
.badge-blue { color: #7dd3fc; border-color: rgba(56,189,248,.25); background: rgba(3,105,161,.18); }
.badge-purple { color: #c4b5fd; border-color: rgba(167,139,250,.25); background: rgba(91,33,182,.18); }
.badge-black { color: #fde047; border-color: rgba(250,204,21,.2); background: #050505; }

.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
.form-grid-3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.field { display: grid; gap: 7px; align-content: start; }
.field.full { grid-column: 1 / -1; }
label { color: var(--muted); font-size: .77rem; font-weight: 750; }
input, select, textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  color: var(--text);
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 11px;
  outline: none;
  transition: .15s ease;
}
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(56,189,248,.13); }
textarea { min-height: 94px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--muted-2); }
.help { color: var(--muted-2); font-size: .72rem; }
.checkbox { display: flex; align-items: center; gap: 9px; min-height: 42px; color: var(--text); }
.checkbox input { width: 18px; min-height: 18px; accent-color: var(--primary); }
.form-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.inline-form { display: inline; }
.filterbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; padding: 16px 20px; border-top: 1px solid var(--border); }
.filterbar .field { min-width: 150px; flex: 1 1 160px; }
.search-field { position: relative; }
.search-field input { padding-left: 39px; }
.search-field::before { content: "⌕"; position: absolute; left: 13px; bottom: 10px; color: var(--muted); font-size: 1.2rem; }

.notice { padding: 14px 16px; display: flex; align-items: flex-start; gap: 11px; border: 1px solid var(--border); border-radius: 13px; background: rgba(148,163,184,.06); color: var(--muted); font-size: .84rem; }
.notice strong { color: var(--text); }
.notice-warning { border-color: rgba(250,204,21,.25); background: rgba(161,98,7,.12); }
.notice-danger { border-color: rgba(251,113,133,.25); background: rgba(159,18,57,.12); }
.notice-info { border-color: rgba(56,189,248,.25); background: rgba(3,105,161,.12); }

.flashes { position: fixed; z-index: 100; right: 22px; top: 90px; width: min(420px, calc(100vw - 30px)); display: grid; gap: 9px; }
.flash { padding: 13px 15px; border: 1px solid var(--border); border-radius: 13px; background: rgba(15,23,42,.94); box-shadow: var(--shadow); display: flex; align-items: flex-start; gap: 10px; animation: slide-in .25s ease; }
html[data-theme="light"] .flash { background: rgba(255,255,255,.96); }
.flash-success { border-color: rgba(74,222,128,.35); }
.flash-error { border-color: rgba(251,113,133,.4); }
.flash-warning { border-color: rgba(250,204,21,.35); }
.flash-content { flex: 1; font-size: .84rem; }
.flash-close { border: 0; background: transparent; color: var(--muted); cursor: pointer; }
@keyframes slide-in { from { opacity:0; transform: translateY(-8px); } }

.dialog { width: min(760px, calc(100vw - 30px)); max-height: calc(100vh - 40px); margin: auto; padding: 0; border: 1px solid var(--border-strong); border-radius: 20px; color: var(--text); background: var(--surface-2); box-shadow: var(--shadow); overflow: auto; }
.dialog::backdrop { background: rgba(1,4,10,.74); backdrop-filter: blur(8px); }
.dialog-sm { width: min(520px, calc(100vw - 30px)); }
.dialog-lg { width: min(1050px, calc(100vw - 30px)); }
.dialog-head { position: sticky; top: 0; z-index: 3; padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.dialog-head h2 { margin: 0; font-size: 1.12rem; }
.dialog-body { padding: 20px; }
.close-btn { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 10px; background: rgba(148,163,184,.09); cursor: pointer; }

.section { margin-top: 22px; }
.section-title { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 12px; }
.section-title h2 { margin: 0; font-size: 1.13rem; letter-spacing: -.025em; }
.section-title p { margin: 3px 0 0; color: var(--muted); font-size: .8rem; }
.stat-list { display: grid; gap: 12px; }
.stat-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.stat-row .label { color: var(--muted); }
.stat-row .value { font-weight: 800; font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: .78rem; }
.tiny { font-size: .7rem; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.divider { height: 1px; background: var(--border); margin: 17px 0; }
.stack { display: grid; gap: 12px; }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.mt-0 { margin-top: 0; }
.mt-12 { margin-top: 12px; }
.mt-18 { margin-top: 18px; }
.mb-0 { margin-bottom: 0; }
.text-right { text-align: right; }


.report-hero { padding: 28px; background: linear-gradient(125deg, rgba(14,165,233,.16), rgba(167,139,250,.08), rgba(45,212,191,.08)), var(--surface); }
.report-hero::after { content:""; position:absolute; width:360px; height:360px; right:-145px; top:-185px; border-radius:50%; background:radial-gradient(circle,rgba(56,189,248,.18),transparent 68%); }
.report-hero-main { position:relative; z-index:1; display:grid; grid-template-columns:minmax(260px,.8fr) minmax(460px,1.2fr); align-items:center; gap:35px; }
.report-hero-value { font-size:clamp(2.4rem,5vw,4.7rem); line-height:.95; font-weight:950; letter-spacing:-.075em; }
.report-hero p { margin:10px 0 0; color:var(--muted); }
.report-hero-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.report-hero-grid > div { min-height:94px; padding:16px; border:1px solid var(--border); border-radius:14px; background:rgba(148,163,184,.055); display:flex; flex-direction:column; justify-content:space-between; }
.report-hero-grid span { color:var(--muted); font-size:.75rem; }
.report-hero-grid strong { margin-top:8px; font-size:1.2rem; letter-spacing:-.035em; }
.report-progress-row { padding:11px 0; border-bottom:1px solid rgba(148,163,184,.1); }
.report-progress-row:last-child { border-bottom:0; }
.insight-card { background:linear-gradient(145deg,rgba(167,139,250,.08),rgba(56,189,248,.04)),var(--surface); }
.insight-list { display:grid; gap:11px; }
.insight-item { padding:13px; display:flex; align-items:center; gap:12px; border:1px solid var(--border); border-radius:14px; background:rgba(148,163,184,.045); }
.insight-icon { width:39px; height:39px; flex:none; display:grid; place-items:center; border-radius:12px; background:rgba(56,189,248,.11); color:var(--primary); font-weight:900; }
.insight-item div { min-width:0; display:grid; gap:2px; }
.insight-item small { color:var(--muted); }
.insight-item strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.insight-item div > span { color:var(--muted); font-size:.78rem; }
.auth-notice { margin:0 0 21px; }

.vault-stage {
  min-height: 420px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 28%, rgba(250,204,21,.08), transparent 15rem),
    repeating-radial-gradient(circle at 50% 48%, rgba(255,255,255,.025) 0 1px, transparent 2px 9px),
    linear-gradient(145deg, #020202, #090909 62%, #020202);
  box-shadow: inset 0 0 90px rgba(0,0,0,.8), 0 28px 80px rgba(0,0,0,.35);
  color: #f8fafc;
}
.vault-lock { width: min(470px, 100%); margin: 0 auto; padding: 45px 25px; text-align: center; }
.vault-door { width: 150px; height: 150px; margin: 0 auto 24px; border-radius: 50%; border: 9px solid #1f2937; background: radial-gradient(circle, #111827 0 24%, #020617 25% 34%, #374151 35% 38%, #030712 39% 100%); box-shadow: 0 0 0 7px #050505, 0 0 0 9px rgba(250,204,21,.15), inset 0 0 30px #000; display: grid; place-items: center; }
.vault-wheel { width: 70px; height: 70px; border: 6px solid #6b7280; border-radius: 50%; position: relative; }
.vault-wheel::before, .vault-wheel::after { content:""; position:absolute; left:50%; top:50%; background:#6b7280; transform:translate(-50%,-50%); }
.vault-wheel::before { width: 95px; height: 6px; }
.vault-wheel::after { width: 6px; height: 95px; }
.vault-lock h1 { margin: 0; font-size: 2rem; letter-spacing: -.045em; }
.vault-lock p { color: #9ca3af; }
.vault-panel { background: #050505; border-color: rgba(255,255,255,.09); box-shadow: 0 18px 60px rgba(0,0,0,.4); }
.vault-panel input, .vault-panel select, .vault-panel textarea { background: #0b0b0b; border-color: rgba(255,255,255,.13); color: white; }
.vault-kpi { background: linear-gradient(135deg,#050505,#101010); border-color: rgba(250,204,21,.15); }
.vault-kpi .kpi-value { color: #fde047; }
.vault-warning { color: #fde68a; }

.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 28px; position: relative; overflow: hidden; }
.auth-shell::before { content:""; position:absolute; width: 620px; height:620px; border-radius:50%; background: radial-gradient(circle, rgba(14,165,233,.18), transparent 68%); left:-240px; top:-260px; }
.auth-shell::after { content:""; position:absolute; width: 520px; height:520px; border-radius:50%; background: radial-gradient(circle, rgba(45,212,191,.12), transparent 68%); right:-220px; bottom:-250px; }
.auth-card { position: relative; z-index:2; width: min(1000px,100%); display:grid; grid-template-columns: 1fr 1fr; overflow:hidden; border:1px solid var(--border); border-radius:28px; background: rgba(10,18,32,.88); box-shadow: 0 40px 110px rgba(0,0,0,.42); backdrop-filter: blur(24px); }
html[data-theme="light"] .auth-card { background: rgba(255,255,255,.91); }
.auth-visual { min-height: 630px; padding: 46px; background: linear-gradient(145deg, rgba(14,165,233,.85), rgba(13,148,136,.82)), url('/static/icons/pattern.svg'); color:white; display:flex; flex-direction:column; justify-content:space-between; }
.auth-visual h1 { font-size: clamp(2.2rem,5vw,4rem); line-height: .98; letter-spacing: -.075em; margin: 25px 0 18px; }
.auth-visual p { max-width: 440px; color: rgba(255,255,255,.82); }
.auth-feature { display:flex; gap:12px; align-items:flex-start; margin-top:18px; }
.auth-feature span:first-child { width:34px; height:34px; border-radius:10px; background:rgba(255,255,255,.15); display:grid; place-items:center; flex:none; }
.auth-form { padding: 46px; display:flex; flex-direction:column; justify-content:center; }
.auth-form h2 { margin: 0; font-size: 1.8rem; letter-spacing: -.04em; }
.auth-form > p { color: var(--muted); margin: 8px 0 25px; }
.password-wrap { position: relative; }
.password-wrap input { padding-right: 46px; }
.password-toggle { position:absolute; right:7px; bottom:6px; width:34px; height:32px; border:0; border-radius:8px; background:transparent; color:var(--muted); cursor:pointer; }

.bottom-nav { display:none; }
.mobile-menu-btn { display:none; }
.fab { position: fixed; z-index:45; right:25px; bottom:25px; width:58px; height:58px; border:0; border-radius:18px; color:white; background:linear-gradient(135deg,var(--primary-strong),#0d9488); box-shadow:0 18px 45px rgba(14,165,233,.32); font-size:1.6rem; cursor:pointer; }

@media (max-width: 1250px) {
  .grid-5, .grid-6 { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .grid-4 { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 980px) {
  :root { --sidebar: 0px; }
  .sidebar { width: 278px; transform: translateX(-102%); transition: transform .22s ease; box-shadow: var(--shadow); }
  body.nav-open .sidebar { transform: translateX(0); }
  body.nav-open::after { content:""; position:fixed; z-index:35; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(2px); }
  .main-wrap { margin-left:0; }
  .mobile-menu-btn { display:inline-flex; }
  .content { padding:24px 20px 95px; }
  .topbar { padding:0 20px; }
  .grid-3 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .span-3 { grid-column: span 2; }
  .bottom-nav { position:fixed; z-index:42; left:10px; right:10px; bottom:10px; height:66px; padding:7px; display:grid; grid-template-columns:repeat(5,1fr); border:1px solid var(--border); border-radius:20px; background:rgba(3,7,18,.91); backdrop-filter:blur(22px); box-shadow:0 18px 45px rgba(0,0,0,.36); }
  html[data-theme="light"] .bottom-nav { background:rgba(255,255,255,.93); }
  .bottom-link { display:grid; place-items:center; align-content:center; gap:2px; border-radius:13px; color:var(--muted); font-size:.63rem; font-weight:750; }
  .bottom-link span:first-child { font-size:1.1rem; }
  .bottom-link.active { background:rgba(56,189,248,.13); color:var(--primary); }
  .fab { right:21px; bottom:88px; }
}
@media (max-width: 900px) {
  .report-hero-main { grid-template-columns:1fr; }
}
@media (max-width: 760px) {
  .grid-2, .grid-3, .grid-4, .grid-5, .grid-6 { grid-template-columns:1fr; }
  .span-2, .span-3 { grid-column:auto; }
  .page-head { display:grid; }
  .page-actions { justify-content:flex-start; }
  .hero-main { display:grid; align-items:start; }
  .hero-amount { font-size:2.45rem; }
  .form-grid, .form-grid-3 { grid-template-columns:1fr; }
  .field.full { grid-column:auto; }
  .desktop-table { display:none; }
  .mobile-cards { display:grid; gap:10px; padding:12px; border-top:1px solid var(--border); }
  .mobile-row { padding:14px; border:1px solid var(--border); border-radius:14px; background:rgba(148,163,184,.04); }
  .mobile-row-top { display:flex; justify-content:space-between; gap:12px; }
  .mobile-row-meta { margin-top:10px; display:grid; grid-template-columns:repeat(2,1fr); gap:8px; color:var(--muted); font-size:.75rem; }
  .report-hero { padding:20px; }
  .report-hero-grid { grid-template-columns:1fr 1fr; }
  .chart-box.chart-lg, .chart-box.chart-lg canvas, .chart-box.chart-xl, .chart-box.chart-xl canvas { min-height:300px; height:300px; }
  .auth-card { grid-template-columns:1fr; }
  .auth-visual { min-height:auto; padding:30px; }
  .auth-visual h1 { font-size:2.4rem; }
  .auth-visual .auth-features { display:none; }
  .auth-form { padding:30px; }
  .topbar-subtitle { display:none; }
  .content { padding-left:14px; padding-right:14px; }
  .card-head, .card-body { padding-left:15px; padding-right:15px; }
  .flashes { top:78px; right:15px; }
}
@media (max-width: 450px) {
  .topbar-title { max-width:155px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .topbar-actions .btn:not(.btn-icon) { padding:8px; }
  .page-head h1 { font-size:1.8rem; }
  .kpi { min-height:125px; }
  .dialog-body { padding:15px; }
  .report-hero-grid { grid-template-columns:1fr; }
  .report-hero-grid > div { min-height:78px; }
}

@media print {
  :root { color-scheme: light; --text:#111827; --muted:#475569; --surface:#fff; --surface-2:#fff; --border:#cbd5e1; }
  body { background:#fff; }
  .sidebar,.topbar,.bottom-nav,.fab,.page-actions,.btn,.flashes,.no-print { display:none !important; }
  .main-wrap { margin:0; }
  .content { width:100%; padding:0; }
  .card { break-inside:avoid; box-shadow:none; backdrop-filter:none; }
}

.tax-events { margin-top:8px; }
.tax-events summary { cursor:pointer; color:var(--primary); font-size:.76rem; font-weight:750; }
.tax-event-list { display:grid; gap:6px; margin-top:8px; min-width:360px; }
.tax-event-row { display:grid; grid-template-columns:90px 90px 110px minmax(90px,1fr); gap:8px; align-items:center; padding:7px 9px; border:1px solid var(--border); border-radius:9px; background:rgba(148,163,184,.045); font-size:.74rem; }
.tax-event-row strong { text-align:right; }
@media (max-width:760px) {
  .tax-event-list { min-width:0; }
  .tax-event-row { grid-template-columns:1fr auto; }
  .tax-event-row span:nth-child(3) { display:none; }
}

.tax-event-row small { display:block; color:var(--muted); font-size:.72rem; margin-top:2px; }

/* FinanzPilot Server 2.1 */
.workspace-switch select{min-width:150px;max-width:230px;padding:.58rem 2rem .58rem .8rem;border-radius:12px;background:var(--surface-2);border:1px solid var(--border);color:var(--text);font-weight:700}
.workspace-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:18px;border:1px solid var(--border);background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 13%,transparent),transparent);border-radius:18px}
.workspace-hero h3{margin:.25rem 0 .35rem;font-size:1.35rem}.workspace-hero p{margin:0;color:var(--muted)}
.workspace-list-row,.member-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--border)}
.workspace-list-row:last-child,.member-row:last-child{border-bottom:0}.inline-form,.row-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.inline-form select{min-width:110px}
.sync-dialog .dialog-body{text-align:center}.sync-orbit{width:86px;height:86px;margin:2px auto 20px;position:relative}.sync-orbit span{position:absolute;inset:0;border-radius:50%;border:2px solid transparent;border-top-color:var(--primary);animation:fp-spin 1.15s linear infinite}.sync-orbit span:nth-child(2){inset:12px;border-top-color:var(--teal);animation-duration:.85s;animation-direction:reverse}.sync-orbit span:nth-child(3){inset:25px;border-top-color:var(--purple);animation-duration:.65s}@keyframes fp-spin{to{transform:rotate(360deg)}}
.progress-track{height:12px;border-radius:999px;background:var(--surface-3);overflow:hidden;border:1px solid var(--border)}.progress-fill{height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--primary),var(--teal));transition:width .35s ease}.progress-meta{display:flex;justify-content:space-between;gap:16px;margin-top:9px;color:var(--muted);font-size:.82rem;text-align:left}.progress-meta strong{color:var(--text)}
.qr-code{display:block;width:min(300px,100%);height:auto;margin:auto;background:#fff;padding:14px;border-radius:20px}.center-card{text-align:center}.narrow-card{max-width:760px;margin:0 auto}.recovery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.recovery-grid code{display:block;padding:12px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border);font-size:1.05rem;text-align:center;letter-spacing:.08em}.otp-input{font-size:1.35rem;letter-spacing:.18em;text-align:center}
.timeline{padding:6px 22px 24px}.timeline-item{display:grid;grid-template-columns:32px 1fr;gap:12px;position:relative;padding:16px 0}.timeline-item:before{content:"";position:absolute;left:15px;top:44px;bottom:-15px;width:1px;background:var(--border)}.timeline-item:last-child:before{display:none}.timeline-dot{width:31px;height:31px;display:grid;place-items:center;border-radius:50%;background:var(--surface-3);border:1px solid var(--border-strong);color:var(--primary);font-weight:900}.timeline-content{min-width:0;padding:4px 0}.timeline-undone{opacity:.68}
.auth-card-compact{max-width:960px}.settings-grid{align-items:start}
.dialog form[data-draft-key] .help:after{content:" · Entwurf wird in diesem Browserfenster zwischengespeichert";color:var(--teal)}
@media(max-width:760px){.workspace-switch{display:none}.recovery-grid{grid-template-columns:1fr}.member-row{align-items:flex-start;flex-direction:column}.inline-form{width:100%}.inline-form select,.inline-form .btn{flex:1}.row-actions{width:100%}.row-actions>.btn,.row-actions>form{flex:1}.row-actions>form .btn{width:100%}.progress-meta{flex-direction:column;gap:4px}.timeline{padding-left:12px;padding-right:12px}}

.build-mark { display:flex; justify-content:space-between; gap:10px; margin-top:10px; padding:0 4px; color:var(--muted); font-size:10px; letter-spacing:.04em; opacity:.75; }

/* Automatic security lookup */
.security-lookup{margin-bottom:20px;padding:16px;border:1px solid color-mix(in srgb,var(--primary) 32%,var(--border));border-radius:16px;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 9%,transparent),color-mix(in srgb,var(--teal) 5%,transparent))}
.security-lookup-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.security-lookup-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px}.security-lookup-controls input{width:100%}
.security-lookup-status{min-height:20px;margin-top:8px;color:var(--muted);font-size:.78rem}.security-lookup-status[data-kind="error"]{color:var(--danger)}.security-lookup-status[data-kind="success"]{color:var(--teal)}
.security-lookup-list{display:grid;gap:7px;margin-top:11px;max-height:270px;overflow:auto;padding-right:3px}
.security-lookup-result{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);color:var(--text);text-align:left;cursor:pointer}
.security-lookup-result:hover,.security-lookup-result:focus-visible{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 10%,var(--surface-2));outline:none}
.security-lookup-main{min-width:0;display:grid;gap:3px}.security-lookup-main strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.security-lookup-main .mono{color:var(--primary);font-size:.77rem}
.security-lookup-meta{color:var(--muted);font-size:.75rem;text-align:right}
@media(max-width:600px){.security-lookup-controls{grid-template-columns:1fr}.security-lookup-controls .btn{width:100%}.security-lookup-result{grid-template-columns:1fr}.security-lookup-meta{text-align:left}}

/* FinanzPilot Server 2.2 – flexible data views */
.table-toolbar{display:flex;align-items:end;gap:10px;flex-wrap:wrap;padding:14px 18px;border-top:1px solid var(--border);background:color-mix(in srgb,var(--surface-2) 72%,transparent)}
.table-toolbar .field{min-width:145px}.table-toolbar .table-search-wide{flex:1;min-width:230px}.table-toolbar label{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em}.table-toolbar input,.table-toolbar select{min-height:38px;padding:7px 10px;border-radius:10px}
.table-result-count{margin-left:auto;align-self:center;color:var(--muted);font-size:.77rem;font-weight:750;white-space:nowrap}
th.sortable{cursor:pointer;user-select:none;padding-right:24px;position:relative}th.sortable:after{content:"↕";position:absolute;right:8px;top:50%;transform:translateY(-50%);opacity:.35;font-size:.76rem}th.sortable.sort-asc:after{content:"↑";opacity:1;color:var(--primary)}th.sortable.sort-desc:after{content:"↓";opacity:1;color:var(--primary)}
.smart-col-hidden{display:none!important}table[data-density="compact"] td{padding-top:7px;padding-bottom:7px;font-size:.81rem}table[data-density="compact"] th{padding-top:8px;padding-bottom:8px}
.column-dialog{max-width:540px}.column-list{display:grid;gap:7px;margin:12px 0 20px}.column-list-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 10px;border:1px solid var(--border);border-radius:11px;background:var(--surface-2)}.column-list-row .checkbox{flex:1}.column-order-actions{display:flex;gap:4px}.column-order-actions .btn{width:32px;min-height:30px}
.input-action{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}.input-action .btn{min-height:44px}
.report-download-note{display:flex;align-items:center;gap:10px;padding:12px 15px;border:1px solid color-mix(in srgb,var(--teal) 35%,var(--border));border-radius:14px;background:color-mix(in srgb,var(--teal) 8%,transparent);color:var(--muted);font-size:.8rem}.report-download-note strong{color:var(--text)}
@media(max-width:760px){.table-toolbar{align-items:stretch}.table-toolbar .field,.table-toolbar .table-search-wide{min-width:calc(50% - 6px);flex:1}.table-result-count{width:100%;margin-left:0}.input-action{grid-template-columns:1fr}.input-action .btn{width:100%}}

/* Security/company logos are cached locally by the NAS backend. */
.security-cell { display: flex; align-items: center; gap: 11px; min-width: 0; }
.security-cell > div { min-width: 0; }
.security-title { display: flex; align-items: center; gap: 18px; min-width: 0; }
.security-logo {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(45,212,191,.2), rgba(59,130,246,.16));
  color: var(--text);
  font-weight: 800;
  letter-spacing: -.04em;
  box-shadow: 0 8px 24px rgba(0,0,0,.14);
}
.security-logo img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 5px; }
.security-logo-sm { width: 38px; height: 38px; border-radius: 12px; font-size: 12px; }
.security-logo-lg { width: 68px; height: 68px; border-radius: 20px; font-size: 20px; }
@media (max-width: 720px) {
  .security-title { gap: 12px; }
  .security-logo-lg { width: 52px; height: 52px; border-radius: 16px; }
}