/* Dreamz Debiteuren. Zelfde richting als Dreamz Books ("het dossier"): een donker bureau in zwart en goud,
   met een licht werkvel voor alles wat je leest en invult. Eén schreefloze letter (Inter Tight) met tabelcijfers.
   Het openstaande bedrag is het beeld; lijsten zijn regels met haarlijnen, geen kaarten.
   Beweging: het vel komt één keer rustig op, regels reageren op aanwijzen; uit bij reduced motion. */

@view-transition { navigation: auto; }

:root {
  --desk: #0e0c08;
  --desk-hi: #1b1710;
  --paper: #f5f1e7;
  --paper-lo: #ebe5d5;
  --ink: #17130c;
  --chalk: #f4efe4;
  --gold: #d4a94a;
  --gold-hi: #f0d489;
  --gold-ink: #8a6413;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --sans: "Inter Tight", "Segoe UI", system-ui, sans-serif;

  --fg: var(--chalk);
  --mut: #a69f8f;
  --rule: rgba(244, 239, 228, 0.14);
  --ok: #7fd1a0;
  --warn: #eba25c;
  --danger: #ef7d6f;
  --accent: var(--gold-hi);
  --field: rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

.sheet, .login-card {
  --fg: var(--ink);
  --mut: #6b6353;
  --rule: rgba(23, 19, 12, 0.13);
  --ok: #24724a;
  --warn: #a8540f;
  --danger: #a93426;
  --accent: var(--gold-ink);
  --field: #fffdf7;
  color: var(--fg);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background:
    radial-gradient(1100px 520px at 12% -160px, rgba(212, 169, 74, 0.2), transparent 70%) no-repeat,
    linear-gradient(180deg, transparent 0, transparent 240px, var(--desk) 560px) no-repeat,
    linear-gradient(90deg, var(--desk) 0%, rgba(14, 12, 8, 0.92) 38%, rgba(14, 12, 8, 0.5) 100%) no-repeat,
    url('ribbon.webp') right top / auto 560px no-repeat,
    var(--desk);
  color: var(--fg); font-family: var(--sans); font-size: 16px; line-height: 1.5;
  font-variant-numeric: tabular-nums lining-nums; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1 { font-weight: 600; font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.04; letter-spacing: -0.035em; }
h2 { font-weight: 600; font-size: 1.3rem; line-height: 1.15; letter-spacing: -0.02em; }
h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; }
a { color: inherit; text-decoration: none; }
strong, .strong { font-weight: 600; }
.eyebrow, .label, dt, .field-label {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
}
.eyebrow { margin-bottom: 10px; }
.eyebrow a:hover { text-decoration: underline; }
.lead { color: var(--mut); font-size: 1.05rem; margin-top: 12px; max-width: 60ch; }
.muted { color: var(--mut); }
.tiny { font-size: 0.8rem; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.late { color: var(--danger); }
.soon { color: var(--warn); }
.paid { color: var(--ok); }
.link { color: var(--accent); font-weight: 600; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 600; }
.link:hover { text-decoration: underline; }
.link.danger { color: var(--danger); }
.link.tiny { font-size: 0.8rem; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }

/* ---------- Kop ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 26px;
  padding: 10px max(20px, calc((100% - 1240px) / 2));
  background: rgba(14, 12, 8, 0.86); backdrop-filter: blur(14px); border-bottom: 1px solid var(--rule);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { height: 30px; width: auto; display: block; }
/* Huisstijl Dreamz: lichtveeg over het logo en het lint op de achtergrond (zoals FEP en het dossier). */
.shine { position: relative; display: inline-flex; overflow: hidden; isolation: isolate; line-height: 0; }
.shine::after {
  content: ""; position: absolute; inset: -50% auto -50% -60%; width: 44%; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: translateX(0) rotate(18deg); animation: shine 16s cubic-bezier(0.2, 0.8, 0.2, 1) 0.7s infinite;
}
@keyframes shine {
  0% { opacity: 0; transform: translateX(0) rotate(18deg); }
  5% { opacity: 0.95; }
  20%, 100% { opacity: 0; transform: translateX(430%) rotate(18deg); }
}
body.centered {
  background:
    linear-gradient(115deg, rgba(14, 12, 8, 0.78) 0%, rgba(14, 12, 8, 0.5) 45%, rgba(14, 12, 8, 0.72) 100%),
    url('ribbon.webp') center / cover no-repeat, var(--desk);
}
.brand-tag { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; color: var(--gold-hi); }
.topnav { display: flex; gap: 22px; }
.topnav a { color: var(--mut); font-weight: 500; padding: 6px 0; border-bottom: 2px solid transparent; transition: color 0.25s, border-color 0.25s; }
.topnav a:hover { color: var(--fg); }
.topnav a.on { color: var(--fg); border-color: var(--gold); }
.topbar .new { margin-left: auto; }
.who { position: relative; }
.who summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 8px; padding: 6px 12px; border-radius: 10px; transition: background 0.25s; }
.who summary::-webkit-details-marker { display: none; }
.who summary:hover, .who[open] summary { background: var(--desk-hi); }
.who summary::after { content: "▾"; color: var(--mut); font-size: 0.8rem; }
.who-name { font-weight: 600; }
.who-role { font-size: 0.8rem; color: var(--mut); }
.who-menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 210px; padding: 8px;
  background: var(--desk-hi); border: 1px solid var(--rule); border-radius: 14px;
  box-shadow: 0 24px 60px -20px #000; display: grid; gap: 2px; animation: drop 0.25s var(--ease);
}
.who-menu a, .who-menu button {
  display: block; width: 100%; text-align: left; padding: 9px 12px; border-radius: 9px; border: 0;
  background: none; color: var(--fg); font: inherit; font-weight: 500; cursor: pointer;
}
.who-menu a:hover, .who-menu button:hover { background: rgba(244, 239, 228, 0.08); }
.who-menu form { margin: 0; }
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- Knoppen ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  padding: 11px 20px; border-radius: 999px; border: 1px solid transparent;
  font: inherit; font-weight: 600; line-height: 1.2; white-space: nowrap;
  transition: transform 0.2s var(--ease), background 0.2s, border-color 0.2s, color 0.2s;
}
.btn:active { transform: scale(0.97); }
.btn.small { padding: 8px 15px; font-size: 0.88rem; }
.btn.gold { background: var(--gold); color: #1a1407; }
.btn.gold:hover { background: var(--gold-hi); }
.btn.dark { background: var(--ink); color: var(--paper); }
.btn.dark:hover { background: #2c2618; }
.btn.ghost { border-color: var(--rule); color: var(--fg); background: none; }
.btn.ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Pagina ---------- */
.page { flex: 1; width: min(1240px, calc(100% - 40px)); margin: 0 auto; padding: 38px 0 72px; }
body.centered .page { display: grid; place-items: center; }
.foot { text-align: center; padding: 20px; color: var(--mut); font-size: 0.8rem; }

.flashes { display: grid; gap: 8px; margin-bottom: 24px; }
.flash {
  padding: 12px 16px; border-radius: 12px; background: var(--desk-hi); border-left: 3px solid var(--mut);
  animation: drop 0.35s var(--ease);
}
.flash.ok { border-left-color: var(--ok); }
.flash.error { border-left-color: var(--danger); color: #ffd3cc; }
.flash.secret { border-left-color: var(--gold); user-select: all; font-family: ui-monospace, Consolas, monospace; font-size: 0.9rem; }

.hero { margin-bottom: 30px; }
.hero.row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.hero.row .hero-actions { margin-top: 0; }
.h-doc { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.contact { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.contact a:hover { color: var(--accent); }

/* Hoofdscherm: het bedrag links, de toelichting rechts; het vel schuift er onder vandaan. */
.hero.split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr); gap: 56px; align-items: end; margin-bottom: 38px; }
.figure { font-size: clamp(3.2rem, 9vw, 6.6rem); font-weight: 600; line-height: 0.95; letter-spacing: -0.05em; color: var(--gold-hi); }
.figure .cur { font-size: 0.42em; font-weight: 500; letter-spacing: 0; vertical-align: 0.82em; margin-right: 0.18em; color: var(--gold); }
.hero-main .lead { font-size: 1.2rem; color: var(--chalk); }
.hero-main .lead .late { color: var(--danger); }
.hero-side { display: grid; gap: 12px; padding-bottom: 6px; }
.agebar { width: 100%; height: 10px; border-radius: 999px; overflow: hidden; display: block; background: var(--rule); }
.agebar rect { transform-origin: left; animation: grow 0.9s var(--ease) both; }
@keyframes grow { from { transform: scaleX(0); } }
.age1 { fill: #6f8f7c; background: #6f8f7c; }
.age2 { fill: var(--gold); background: var(--gold); }
.age3 { fill: var(--danger); background: var(--danger); }
.agelist { display: grid; gap: 4px; font-size: 0.92rem; }
.agelist li { display: flex; align-items: center; gap: 10px; color: var(--mut); }
.agelist .num { margin-left: auto; color: var(--fg); }
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.bankline { display: flex; align-items: center; gap: 14px; justify-content: space-between; padding-top: 14px; margin-top: 4px; border-top: 1px solid var(--rule); font-size: 0.9rem; }
.bankline.warn p { color: var(--warn); }
.bankline .muted { display: block; }

.sheet {
  background: var(--paper); border-radius: 26px; padding: 40px 46px 44px;
  box-shadow: 0 40px 90px -50px #000; animation: lift 0.6s var(--ease) both;
}
.sheet.narrow { max-width: 760px; }
@keyframes lift { from { opacity: 0; transform: translateY(18px); } }

.block + .block { margin-top: 40px; }
.block-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 2px solid var(--ink); margin-bottom: 4px; }
.block-head p { font-size: 0.9rem; }
.calm { padding: 18px 0 4px; color: var(--mut); }
.calm.warn { color: var(--warn); }

/* Te bevestigen: een band over de volle breedte van het vel */
.confirm { margin: -40px -46px 40px; padding: 30px 46px 32px; background: var(--paper-lo); border-radius: 26px 26px 0 0; border-bottom: 1px solid var(--rule); }
.confirm .block-head { border-bottom-color: var(--gold-ink); }
.proposal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.proposal:last-child { border-bottom: 0; padding-bottom: 0; }
.proposal-amount { font-size: 1.7rem; font-weight: 600; letter-spacing: -0.02em; }
.bankdesc { font-family: ui-monospace, Consolas, monospace; font-size: 0.78rem; color: var(--mut); margin-top: 6px; overflow-wrap: anywhere; }
.pick { display: grid; grid-template-columns: auto 1fr auto auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--rule); cursor: pointer; }
.pick input { width: 18px; height: 18px; accent-color: var(--gold-ink); }
.row-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

/* Regels */
.group { padding: 22px 0 6px; border-bottom: 1px solid var(--rule); }
.group:last-child { border-bottom: 0; }
.group-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 6px; }
.group-head h3 { font-size: 1.25rem; }
.group-head h3 a:hover { color: var(--accent); }
.group-head .contact { font-size: 0.9rem; color: var(--mut); }
.group-total { text-align: right; display: grid; }
.group-total .num { font-size: 1.25rem; font-weight: 600; }
.lines li + li { border-top: 1px solid var(--rule); }
.lines.flat li:first-child { border-top: 0; }
.line {
  display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(0, 1.6fr) minmax(0, 1.2fr) minmax(110px, auto);
  gap: 16px; align-items: baseline; padding: 11px 10px; margin: 0 -10px; border-radius: 10px;
  transition: background 0.2s, transform 0.25s var(--ease);
}
.line:hover { background: rgba(23, 19, 12, 0.055); transform: translateX(3px); }
.line > .num { text-align: right; font-weight: 600; }
.line-what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-state { font-size: 0.9rem; font-weight: 500; }
.clip { margin-left: 8px; padding: 1px 6px; border-radius: 5px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); border: 1px solid currentColor; vertical-align: 2px; }
.tick { display: inline-block; width: 15px; height: 15px; margin-right: 9px; border-radius: 50%; background: var(--ok); vertical-align: -2px; position: relative; }
.tick::after { content: ""; position: absolute; left: 5px; top: 2.5px; width: 3.5px; height: 7px; border: solid var(--paper); border-width: 0 2px 2px 0; transform: rotate(45deg); }

.state { font-weight: 600; font-size: 0.9rem; white-space: nowrap; }
.state::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; margin-right: 7px; }
.state.betaald { color: var(--ok); }
.state.telaat { color: var(--danger); }
.state.bijna { color: var(--warn); }
.state.loopt, .state.vervallen { color: var(--mut); }
.state.vervallen::before { background: none; box-shadow: inset 0 0 0 1px currentColor; }

/* Kerngegevens: één rij cijfers, het belangrijkste groot */
.facts { display: flex; flex-wrap: wrap; gap: 22px 44px; align-items: flex-end; padding-bottom: 30px; margin-bottom: 34px; border-bottom: 1px solid var(--rule); }
.facts dd { font-size: 1.15rem; font-weight: 600; margin-top: 3px; }
.facts .big dd { font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1; letter-spacing: -0.035em; }
.banner { margin: -14px 0 30px; padding: 12px 16px; border-radius: 12px; background: var(--paper-lo); color: var(--mut); }

.cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 52px; }
.cols .wide-col { min-width: 0; }
.col { min-width: 0; }

.files li { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.files form { margin: 0; }
.file { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: center; flex: 1; min-width: 0; }
.file-ext { grid-row: span 2; width: 46px; height: 54px; display: grid; place-items: center; border-radius: 6px 14px 6px 6px; background: var(--ink); color: var(--gold-hi); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; transition: transform 0.25s var(--ease); }
.file:hover .file-ext { transform: translateY(-3px) rotate(-3deg); }
.file-name { font-weight: 600; overflow-wrap: anywhere; }
.upload { display: flex; gap: 12px; align-items: center; margin-top: 16px; }
.drop { flex: 1; position: relative; display: block; padding: 13px 16px; border: 1.5px dashed rgba(23, 19, 12, 0.3); border-radius: 12px; color: var(--mut); cursor: pointer; transition: border-color 0.2s, background 0.2s; text-transform: none; letter-spacing: 0; font-size: 0.95rem; font-weight: 500; }
.drop:hover, .drop.over { border-color: var(--gold-ink); background: var(--field); color: var(--fg); }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.drop:focus-within { outline: 2px solid var(--gold); outline-offset: 2px; }

.pays li { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.pays form { margin-top: 6px; }
.pay-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.tag { font-size: 0.74rem; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--paper-lo); color: var(--mut); }
.fold { margin-top: 18px; }
.fold summary { cursor: pointer; font-weight: 600; color: var(--accent); list-style: none; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary::before { content: "+ "; }
.fold[open] summary::before { content: "− "; }
.fold[open] > :not(summary) { animation: drop 0.3s var(--ease); }
.fold form { margin-top: 12px; }
.fold.inline form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }

.timeline { margin-top: 18px; border-left: 2px solid var(--rule); }
.timeline li { position: relative; padding: 0 0 16px 18px; }
.timeline li::before { content: ""; position: absolute; left: -6px; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
.timeline li.systeem::before { background: var(--paper); box-shadow: inset 0 0 0 2px var(--mut); }
.timeline li.systeem p:first-child { color: var(--mut); font-size: 0.92rem; }
.timeline li.herinnering::before { background: var(--warn); }
.timeline p { overflow-wrap: anywhere; }

.plain div + div { margin-top: 14px; }
.plain dd { margin-top: 2px; }
.pre { white-space: pre-line; }
.sheet-foot { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--rule); }
.sheet-foot .fold { margin-top: 6px; }
.sheet-foot form { margin: 0; }

/* ---------- Formulieren ---------- */
label, .field-label { display: block; }
label { font-size: 0.86rem; font-weight: 600; color: var(--mut); }
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="date"],
input[type="number"], input[type="search"], select, textarea {
  display: block; width: 100%; margin-top: 6px; padding: 11px 13px; border-radius: 11px;
  border: 1px solid rgba(23, 19, 12, 0.22); background: var(--field); color: var(--fg);
  font: inherit; font-weight: 500; transition: border-color 0.2s, box-shadow 0.2s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold-ink); box-shadow: 0 0 0 3px rgba(212, 169, 74, 0.28); }
textarea { resize: vertical; }
.hint { display: block; margin-top: 6px; font-size: 0.8rem; font-weight: 400; color: var(--mut); }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.form .wide, .grid3 .wide { grid-column: 1 / -1; }
.form .field-label { margin-bottom: 6px; color: var(--mut); text-transform: none; letter-spacing: 0; font-size: 0.86rem; }
.form-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 16px; align-items: end; }
.grid3 .btn { justify-self: start; }
.stack { display: grid; gap: 16px; }
.stack .btn { justify-self: start; }
.noteform { display: grid; gap: 10px; margin-top: 16px; }
.noteform .btn { justify-self: start; }
.filter { display: flex; gap: 12px; }
.filter input { margin-top: 0; }

.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 22px 0 10px; }
.tabs a { padding: 7px 14px; border-radius: 999px; font-weight: 600; font-size: 0.9rem; color: var(--mut); transition: background 0.2s, color 0.2s; }
.tabs a:hover { background: var(--paper-lo); }
.tabs a.on { background: var(--ink); color: var(--paper); }
.count { font-weight: 500; opacity: 0.7; margin-left: 3px; }

.tablewrap { overflow-x: auto; margin: 0 -10px; }
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mut); padding: 12px 10px; border-bottom: 2px solid var(--ink); white-space: nowrap; }
.table td { padding: 12px 10px; border-bottom: 1px solid var(--rule); vertical-align: baseline; }
.table .r { text-align: right; }
.table tbody tr { transition: background 0.2s; }
.table tbody tr:hover { background: rgba(23, 19, 12, 0.045); }
.table a:hover { color: var(--accent); }

.accounts li { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.accounts li > div { flex: 1; min-width: 0; }
.accounts li.off { opacity: 0.55; }
.accounts form { margin: 0; }

.login-card { width: min(430px, 100%); padding: 0 38px 40px; background: var(--paper); border-radius: 22px; text-align: center; overflow: hidden; animation: lift 0.6s var(--ease) both; }
.login-card h1 { font-size: 2.3rem; }
.login-card .lead { margin: 6px auto 22px; font-size: 1rem; }
.login-card .stack { text-align: left; }
.login-card .btn { margin-top: 6px; }
.login-logo { display: block; width: calc(100% + 76px); max-width: none; margin: 0 -38px 30px; padding: 30px 96px 26px; background: #000; }
.login-logo img { display: block; width: 100%; height: auto; }
.plain-card { padding-top: 38px; }
.plain-card h1 { font-size: 1.6rem; margin-bottom: 24px; }
body.centered .flashes { width: min(430px, 100%); }
body.centered .page { align-content: center; }

/* ---------- Smal ---------- */
@media (max-width: 900px) {
  .hero.split, .cols, .proposal { grid-template-columns: 1fr; gap: 28px; }
  .sheet { padding: 28px 22px 32px; border-radius: 20px; }
  .confirm { margin: -28px -22px 30px; padding: 24px 22px; border-radius: 20px 20px 0 0; }
  .topbar { flex-wrap: wrap; gap: 10px 18px; }
  .topnav { order: 3; width: 100%; gap: 18px; overflow-x: auto; }
  .grid3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .topbar { position: static; }
  .page { width: calc(100% - 24px); padding-top: 24px; }
  .line { grid-template-columns: 1fr auto; gap: 2px 12px; }
  .line-what { grid-column: 1; grid-row: 2; }
  .line-state { grid-column: 1 / -1; grid-row: 3; }
  .line > .num { grid-column: 2; grid-row: 1; }
  .group-head { flex-direction: column; gap: 6px; }
  .group-total { text-align: left; }
  .form, .grid3 { grid-template-columns: 1fr; }
  .upload, .filter { flex-direction: column; align-items: stretch; }
  .who-role, .topbar .new span { display: none; }
  .btn.new { padding: 8px 14px; font-size: 0.88rem; }
  .files li { flex-wrap: wrap; }
  .bankline { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  @view-transition { navigation: none; }
}