/* ═══════════════════════════════════════════════════════════
   Deptrack — Visual System „Kassenbuch unter der Schreibtischlampe“
   Adjektive: präzise · ruhig · buchhalterisch
   Anti: grell · casino-neon · generic-SaaS
   ═══════════════════════════════════════════════════════════ */
:root {
  color-scheme: dark;
  --canvas: #0e100f;
  --canvas-2: #121413;
  --surface: #161917;
  --surface-2: #1d211e;
  --surface-3: #242925;
  --hair: rgba(242, 239, 230, .09);
  --hair-strong: rgba(242, 239, 230, .18);
  --ink: #f2efe6;
  --ink-2: #aca99e;
  --ink-3: #6f6d66;
  --amber: #e8a33c;
  --amber-ink: #f4c069;
  --amber-dim: rgba(232, 163, 60, .14);
  --pos: #2cc58a;
  --pos-dim: rgba(44, 197, 138, .13);
  --neg: #e66767;
  --neg-dim: rgba(230, 103, 103, .13);
  --warn: #d9a441;
  --series-dep: #2cc58a;      /* Einzahlungen */
  --series-wd: #d95926;       /* Auszahlungen (categorical slot 2) */
  --series-net: #f2efe6;      /* Netto-Linie */
  --r-1: 4px; --r-2: 8px; --r-3: 14px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px;
  --shadow-2: 0 10px 30px -12px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.04) inset;
  --font-display: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --dur-1: 160ms; --dur-2: 320ms; --dur-3: 600ms;
  --side-w: 228px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--canvas); color: var(--ink);
  font-family: var(--font-body); font-size: 14.5px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; min-height: 100dvh;
  background-image:
    radial-gradient(1200px 500px at 15% -10%, rgba(232,163,60,.07), transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(242,239,230,.025) 31px 32px);
  background-attachment: fixed;
}
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--amber-dim); color: var(--amber-ink); }
.num, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* ───────── Layout ───────── */
.app { display: grid; grid-template-columns: var(--side-w) 1fr; min-height: 100dvh; }
.side {
  position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column;
  padding: var(--s-5) var(--s-4); border-right: 1px solid var(--hair);
  background: linear-gradient(180deg, var(--canvas-2), var(--canvas));
}
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 22px; }
.brand-mark { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--amber); position: relative; display: inline-block; }
.brand-mark::after { content: ""; position: absolute; right: -4px; bottom: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 3px var(--canvas); }
.brand-word { font-family: var(--font-display); font-weight: 800; font-size: 21px; letter-spacing: -.03em; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: var(--r-2); color: var(--ink-2); position: relative; transition: color var(--dur-1), background var(--dur-1); }
.nav a:hover { color: var(--ink); background: rgba(242,239,230,.04); }
.nav a.active { color: var(--ink); background: var(--surface-2); }
.nav a.active::before { content: ""; position: absolute; left: -16px; top: 10px; bottom: 10px; width: 3px; background: var(--amber); border-radius: 0 2px 2px 0; }
.ic { width: 18px; height: 18px; display: inline-block; background: currentColor; -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat; opacity: .85; }
.ic-dash { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M4 19V9M10 19V5M16 19v-8M22 19H2'/%3E%3C/svg%3E"); }
.ic-firm { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M3 21h18M5 21V5l7-2v18M12 21V9l7 2v10M8 8h1M8 12h1M8 16h1M15 14h1M15 17h1'/%3E%3C/svg%3E"); }
.ic-book { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M5 3h14v18H5zM9 3v18M12 8h4M12 12h4M12 16h2'/%3E%3C/svg%3E"); }
.ic-wallet { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h13v4M3 7v10a2 2 0 0 0 2 2h15v-9H3zM16 14h.01'/%3E%3C/svg%3E"); }
.ic-gear { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M4.9 19.1L7 17M17 7l2.1-2.1'/%3E%3C/svg%3E"); }
.ic-task { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11M4 6l1 1 2-2M4 12l1 1 2-2M4 18l1 1 2-2'/%3E%3C/svg%3E"); }
.ic-team { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0 1 13 0M16 4.5a3.5 3.5 0 0 1 0 7M21.5 20a6.5 6.5 0 0 0-4.5-6.2'/%3E%3C/svg%3E"); }
.whoami { font-size: 12.5px; color: var(--ink-2); padding: 0 8px; }
.whoami b { display: block; color: var(--ink); font-weight: 500; }
.whoami span { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
body.role-worker .admin-only { display: none !important; }
/* Aufgaben */
.task-list { display: flex; flex-direction: column; gap: 10px; }
.task { display: grid; grid-template-columns: 34px 1fr auto; gap: 14px; align-items: start; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-3); padding: 14px 16px; transition: border-color var(--dur-1), opacity var(--dur-2); }
.task:hover { border-color: var(--hair-strong); }
.task.done { opacity: .55; }
.task.done .t-title { text-decoration: line-through; text-decoration-color: var(--ink-3); }
.task.overdue .t-due { color: var(--neg); }
.check { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--hair-strong); background: none; cursor: pointer; display: grid; place-items: center; color: transparent; margin-top: 2px; transition: border-color var(--dur-1), background var(--dur-1); }
.check:hover { border-color: var(--pos); }
.check.on { background: var(--pos); border-color: var(--pos); color: #06231a; }
.check svg { width: 14px; height: 14px; }
.t-title { font-weight: 500; font-size: 15px; }
.t-desc { color: var(--ink-2); font-size: 13px; margin-top: 3px; white-space: pre-line; }
.t-meta { display: flex; gap: 8px 14px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; color: var(--ink-3); font-family: var(--font-mono); align-items: center; }
.t-comm { font-family: var(--font-mono); font-size: 15px; color: var(--amber-ink); text-align: right; white-space: nowrap; }
.t-comm small { display: block; font-size: 11px; color: var(--ink-3); font-family: var(--font-body); }
.avatar { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-3); color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: 12px; }
.worker-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--s-4); }
.worker-tabs button { display: inline-flex; align-items: center; gap: 8px; background: none; border: 1px solid var(--hair-strong); border-radius: 99px; padding: 5px 12px 5px 5px; color: var(--ink-2); cursor: pointer; font-size: 13px; }
.worker-tabs button.on { background: var(--surface-2); color: var(--ink); border-color: var(--amber); }
.worker-tabs button .n { font-family: var(--font-mono); color: var(--ink-3); font-size: 11.5px; }
.group-head { display: flex; align-items: center; gap: 10px; margin: 18px 0 10px; }
.group-head h2 { font-size: 17px; }
.group-head .n { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); }
/* Team */
.member { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-3); padding: 18px 20px; }
.member .top { display: flex; align-items: center; gap: 12px; }
.member .top .avatar { width: 40px; height: 40px; font-size: 18px; }
.member .role { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.member.inactive { opacity: .5; }
.member .stat-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin: 14px 0 10px; }
.member .stat-row div { font-family: var(--font-mono); font-size: 14px; }
.member .stat-row span { display: block; font-family: var(--font-body); font-size: 11.5px; color: var(--ink-3); margin-bottom: 2px; }
.member .btns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.ticker { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); line-height: 1.7; }
.ticker b { color: var(--ink-2); font-weight: 500; }
.ticker span { display: flex; justify-content: space-between; }

.main { padding: var(--s-6) var(--s-7) 96px; max-width: 1240px; width: 100%; min-width: 0; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-6); }
.eyebrow { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 6px; }
h1 { font-family: var(--font-display); font-weight: 800; font-size: 32px; line-height: 1.1; letter-spacing: -.035em; margin: 0; }
h1 em { font-style: normal; color: var(--amber-ink); font-weight: 800; }
h2 { font-family: var(--font-display); font-weight: 700; font-size: 18px; margin: 0; letter-spacing: -.02em; }
.sub { color: var(--ink-2); margin: 6px 0 0; }

/* ───────── Buttons / Inputs ───────── */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: var(--r-2); border: 1px solid var(--hair-strong); background: var(--surface-2); color: var(--ink); cursor: pointer; transition: transform var(--dur-1) var(--ease-out), background var(--dur-1), border-color var(--dur-1); white-space: nowrap; }
.btn:hover { background: var(--surface-3); border-color: rgba(242,239,230,.28); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--amber); border-color: var(--amber); color: #1a1205; font-weight: 600; }
.btn-primary:hover { background: var(--amber-ink); border-color: var(--amber-ink); }
.btn-danger { color: var(--neg); border-color: rgba(230,103,103,.35); }
.btn-danger:hover { background: var(--neg-dim); }
.btn-sm { padding: 5px 10px; font-size: 13px; }
.btn-ghost { background: none; border: 1px solid transparent; color: var(--ink-3); padding: 8px 10px; border-radius: var(--r-2); cursor: pointer; text-align: left; }
.btn-ghost:hover { color: var(--ink); background: rgba(242,239,230,.04); }
.btn[disabled] { opacity: .5; cursor: progress; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12.5px; color: var(--ink-2); }
.field input, .field select, .field textarea {
  background: var(--canvas-2); border: 1px solid var(--hair-strong); border-radius: var(--r-2); padding: 9px 11px; color: var(--ink); outline: none; width: 100%; min-width: 0;
  transition: border-color var(--dur-1), box-shadow var(--dur-1);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-dim); }
.field input[type=number], .field input.mono { font-family: var(--font-mono); }
.field .hint { font-size: 12px; color: var(--ink-3); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .span-2 { grid-column: span 2; }
.seg { display: inline-flex; border: 1px solid var(--hair-strong); border-radius: var(--r-2); overflow: hidden; }
.seg button { background: none; border: 0; padding: 7px 13px; color: var(--ink-2); cursor: pointer; font-size: 13px; }
.seg button.on { background: var(--surface-3); color: var(--ink); }
.seg button.on.dep { color: var(--pos); } .seg button.on.wd { color: var(--series-wd); }
.color-row { display: flex; gap: 8px; flex-wrap: wrap; }
.color-row button { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.color-row button.on { border-color: var(--ink); }

/* ───────── Cards / KPI ───────── */
.card { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-3); padding: var(--s-5); box-shadow: var(--shadow-2); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); flex-wrap: wrap; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); margin-bottom: var(--s-5); }
.kpi { position: relative; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-3); padding: 18px 20px 16px; overflow: hidden; }
.kpi::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; background: var(--kpi-c, var(--ink-3)); border-radius: 0 2px 2px 0; }
.kpi .lbl { font-size: 12.5px; color: var(--ink-2); display: flex; justify-content: space-between; gap: 8px; }
.kpi .val { font-family: var(--font-mono); font-size: 25px; font-weight: 600; margin-top: 6px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi .val small { font-size: 14px; color: var(--ink-3); margin-left: 4px; font-weight: 400; }
.kpi .meta { font-size: 12px; color: var(--ink-3); margin-top: 6px; font-family: var(--font-mono); }
.kpi.dep { --kpi-c: var(--series-dep); } .kpi.wd { --kpi-c: var(--series-wd); } .kpi.com { --kpi-c: var(--amber); }
.kpi.net { --kpi-c: var(--ink); background: linear-gradient(180deg, var(--surface-2), var(--surface)); }
.kpi.net.up .val { color: var(--pos); } .kpi.net.down .val { color: var(--neg); }
.pos { color: var(--pos); } .neg { color: var(--neg); } .amber { color: var(--amber-ink); } .muted { color: var(--ink-3); }
.grid-2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--s-4); margin-bottom: var(--s-4); align-items: start; }
.stack { display: flex; flex-direction: column; gap: var(--s-4); }

/* ───────── Ledger-Tabelle (Signatur-Motiv: Kassenbuchlinien) ───────── */
.ledger { width: 100%; border-collapse: collapse; }
.ledger th { text-align: left; font-weight: 500; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 0 10px 10px; border-bottom: 1px solid var(--hair-strong); font-family: var(--font-mono); white-space: nowrap; }
.ledger td { padding: 11px 10px; border-bottom: 1px solid var(--hair); vertical-align: middle; white-space: nowrap; }
.ledger tr:last-child td { border-bottom: 0; }
.ledger tbody tr { transition: background var(--dur-1); }
.ledger tbody tr:hover { background: rgba(242,239,230,.025); }
.ledger td.r, .ledger th.r { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.ledger td.date { font-family: var(--font-mono); color: var(--ink-2); white-space: nowrap; }
.ledger td.date b { color: var(--ink); font-weight: 500; }
.ledger .row-total td { border-top: 2px solid var(--hair-strong); font-weight: 600; background: var(--surface-2); }
.ledger tr.clickable { cursor: pointer; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; background: var(--c, var(--ink-3)); }
.tag { display: inline-block; font-family: var(--font-mono); font-size: 11px; padding: 2px 7px; border-radius: 4px; border: 1px solid var(--hair-strong); color: var(--ink-2); letter-spacing: .03em; }
.tag.dep { color: var(--pos); border-color: rgba(44,197,138,.35); background: var(--pos-dim); }
.tag.wd { color: var(--series-wd); border-color: rgba(217,89,38,.4); background: rgba(217,89,38,.12); }
.tag.hit { color: var(--amber-ink); border-color: rgba(232,163,60,.45); background: var(--amber-dim); }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -8px; padding: 0 8px; }
.empty { padding: 36px 16px; text-align: center; color: var(--ink-3); font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.empty small { display: block; font-family: var(--font-body); font-style: normal; font-size: 13px; margin-top: 6px; }
.actions { display: inline-flex; gap: 4px; opacity: .55; transition: opacity var(--dur-1); }
tr:hover .actions { opacity: 1; }
.icon-btn { background: none; border: 1px solid transparent; color: var(--ink-2); width: 28px; height: 28px; border-radius: 6px; cursor: pointer; display: inline-grid; place-items: center; font-size: 14px; }
.icon-btn:hover { background: var(--surface-3); color: var(--ink); }
.icon-btn.del:hover { color: var(--neg); }

/* ───────── Zielfortschritt (Tageslinie) ───────── */
.goal { position: relative; height: 6px; background: var(--surface-3); border-radius: 3px; overflow: visible; min-width: 90px; }
.goal .bar { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--c, var(--amber)); border-radius: 3px; }
.goal .tick { position: absolute; right: 0; top: -4px; width: 1px; height: 14px; background: var(--amber); opacity: .8; }
.goal.over .bar { background: var(--pos); }
.goal-row { display: flex; align-items: center; gap: 12px; }
.goal-row .goal { flex: 1; }
.goal-row .pct { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-2); width: 52px; text-align: right; }

/* ───────── Firmenkarten ───────── */
.firm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s-4); }
.firm { position: relative; display: block; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-3); padding: 20px 20px 16px; transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2); overflow: hidden; }
.firm:hover { transform: translateY(-2px); border-color: var(--hair-strong); }
.firm::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--c); }
.firm.inactive { opacity: .55; }
.firm h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -.02em; }
.firm .stat-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin: 14px 0; }
.firm .stat-row div { font-family: var(--font-mono); font-size: 14px; }
.firm .stat-row span { display: block; font-family: var(--font-body); font-size: 11.5px; color: var(--ink-3); margin-bottom: 2px; }
.firm .foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--ink-3); font-family: var(--font-mono); margin-top: 10px; }

/* ───────── Chart ───────── */
.chart { position: relative; }
.chart svg { width: 100%; height: 260px; display: block; overflow: visible; }
.chart .grid line { stroke: var(--hair); stroke-width: 1; }
.chart .axis text { fill: var(--ink-3); font-family: var(--font-mono); font-size: 11px; }
.chart .bar-dep { fill: var(--series-dep); } .chart .bar-wd { fill: var(--series-wd); }
.chart .net { fill: none; stroke: var(--series-net); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .hit { fill: transparent; cursor: crosshair; }
.chart .cross { stroke: var(--hair-strong); stroke-width: 1; pointer-events: none; }
.legend { display: flex; gap: 16px; font-size: 12.5px; color: var(--ink-2); flex-wrap: wrap; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.tip { position: absolute; pointer-events: none; background: var(--surface-3); border: 1px solid var(--hair-strong); border-radius: var(--r-2); padding: 8px 10px; font-size: 12.5px; box-shadow: var(--shadow-2); transform: translate(-50%, -100%); white-space: nowrap; z-index: 5; }
.tip b { display: block; font-family: var(--font-mono); color: var(--ink-2); font-weight: 500; margin-bottom: 4px; }
.tip div { display: flex; justify-content: space-between; gap: 16px; font-family: var(--font-mono); }

/* ───────── Wallets ───────── */
.wallet { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-3); padding: 20px; }
.wallet .addr { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); word-break: break-all; margin-top: 2px; }
.wallet .bal { font-family: var(--font-mono); font-size: 24px; margin: 12px 0 2px; }
.wallet .bal small { font-size: 13px; color: var(--ink-3); }
.wallet .coins { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.chain-badge { font-family: var(--font-mono); font-size: 11px; padding: 2px 7px; border-radius: 4px; background: var(--surface-3); color: var(--ink-2); }
.txlist { border-top: 1px solid var(--hair); margin-top: 12px; }
.txlist .tx { display: grid; grid-template-columns: 18px 1fr auto auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--hair); font-size: 13px; }
.txlist .tx .arrow { font-family: var(--font-mono); font-weight: 600; }
.txlist .tx .when { font-family: var(--font-mono); color: var(--ink-3); font-size: 12px; }
.txlist .tx .amt { font-family: var(--font-mono); text-align: right; }
.txlist .tx .amt small { color: var(--ink-3); display: block; font-size: 11px; }

/* ───────── Gate (Login) ───────── */
.gate { position: fixed; inset: 0; display: grid; place-items: center; background: var(--canvas); padding: 20px; z-index: 50;
  background-image: radial-gradient(900px 400px at 50% -5%, rgba(232,163,60,.10), transparent 60%), repeating-linear-gradient(0deg, transparent 0 31px, rgba(242,239,230,.025) 31px 32px); }
.gate-card { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-3); padding: 32px 28px; box-shadow: var(--shadow-2); }
.gate-card .brand { justify-content: center; padding-bottom: 8px; }
.gate-card .brand-word { font-size: 28px; }
.gate-card p { text-align: center; color: var(--ink-2); margin: 0 0 22px; font-size: 13.5px; }
.gate-card form { display: flex; flex-direction: column; gap: 14px; }
.err { color: var(--neg); font-size: 13px; min-height: 18px; }

/* ───────── Modal / Toast / FAB ───────── */
.modal { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(8,9,9,.66); backdrop-filter: blur(4px); padding: 20px; }
.modal-card { width: 100%; max-width: 560px; background: var(--surface); border: 1px solid var(--hair-strong); border-radius: var(--r-3); padding: 26px; box-shadow: var(--shadow-2); max-height: 92dvh; overflow: auto; }
.modal-card h2 { margin-bottom: 18px; }
.modal-card form { display: flex; flex-direction: column; gap: 14px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.modal-foot .left { margin-right: auto; }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: var(--surface-3); border: 1px solid var(--hair-strong); padding: 10px 16px; border-radius: 10px; z-index: 60; box-shadow: var(--shadow-2); font-size: 13.5px; }
.toast.err { border-color: rgba(230,103,103,.5); color: var(--neg); }
.fab { position: fixed; right: 28px; bottom: 28px; width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--amber); color: #1a1205; font-size: 28px; line-height: 1; cursor: pointer; box-shadow: 0 10px 28px -8px rgba(232,163,60,.6); z-index: 30; display: grid; place-items: center; transition: transform var(--dur-2) var(--ease-out); }
.fab:hover { transform: scale(1.06) rotate(90deg); }
.range { display: inline-flex; gap: 4px; }
.range button { background: none; border: 1px solid transparent; color: var(--ink-3); padding: 4px 9px; border-radius: 6px; cursor: pointer; font-family: var(--font-mono); font-size: 12px; }
.range button.on { color: var(--ink); border-color: var(--hair-strong); background: var(--surface-2); }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin-bottom: var(--s-4); }
.filters .field { min-width: 150px; }
.copy { cursor: pointer; } .copy:hover { color: var(--ink); }

/* ───────── Heute-Tabelle / Tagesbilanz ───────── */
.ledger tr.uhead td { background: var(--surface-2); font-weight: 600; border-top: 1px solid var(--hair-strong); padding-top: 12px; padding-bottom: 12px; }
.ledger tr.uhead td .avatar { margin-right: 10px; }
.ledger td.sub { padding-left: 46px; }
.cellchips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11.5px; padding: 3px 8px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--hair); color: var(--ink-2); white-space: nowrap; }
.chip.hit { border-color: rgba(44,197,138,.4); color: var(--pos); }
.chip.miss { border-color: rgba(230,103,103,.35); }
.chip .dot { margin-right: 0; }
.big-actions { display: flex; gap: 8px; }
.big-actions .btn { flex: 1; justify-content: center; padding: 11px 12px; }
.assign-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.assign { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-3); padding: 16px 18px; border-left: 4px solid var(--c); }
.assign .who { font-weight: 600; font-size: 15px; }
.assign .row { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font-family: var(--font-mono); font-size: 13px; }
.assign .row span:first-child { font-family: var(--font-body); color: var(--ink-3); font-size: 12px; }
.assign.ended { opacity: .5; }
.section { margin-top: var(--s-5); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.mini-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mini-kpis div { background: var(--surface-2); border-radius: var(--r-2); padding: 10px 12px; }
.mini-kpis span { display: block; font-size: 11.5px; color: var(--ink-3); }
.mini-kpis b { font-family: var(--font-mono); font-weight: 500; font-size: 15px; }
@media (max-width: 760px) { .mini-kpis { grid-template-columns: 1fr 1fr; } .ledger td.sub { padding-left: 14px; } }

/* ───────── Aufgaben-Zeilen (Mitarbeiter-One-Pager) ───────── */
.todo-list { display: flex; flex-direction: column; gap: 10px; }
.todo { display: grid; grid-template-columns: 40px 1.4fr 1fr 1fr auto; gap: 14px 18px; align-items: center; background: var(--surface-2); border: 1px solid var(--hair); border-radius: var(--r-3); padding: 14px 18px; transition: border-color var(--dur-1), opacity var(--dur-2); }
.todo.hit { border-color: rgba(44,197,138,.35); }
.todo.done { opacity: .6; }
.todo.done .todo-title { text-decoration: line-through; text-decoration-color: var(--ink-3); }
.check { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--hair-strong); background: none; cursor: pointer; display: grid; place-items: center; color: transparent; transition: border-color var(--dur-1), background var(--dur-1); }
.check:hover { border-color: var(--pos); }
.check.on { background: var(--pos); border-color: var(--pos); color: #06231a; }
.check svg { width: 16px; height: 16px; }
.todo-title { font-weight: 600; font-size: 16px; }
.todo-goal { color: var(--ink-2); font-size: 13px; margin-top: 2px; }
.todo-goal b { color: var(--amber-ink); font-family: var(--font-mono); font-weight: 500; }
.todo-field { display: flex; flex-direction: column; gap: 5px; }
.todo-field span { font-size: 12px; color: var(--ink-2); }
.todo-field input { background: var(--canvas-2); border: 1px solid var(--hair-strong); border-radius: var(--r-2); padding: 10px 12px; font-family: var(--font-mono); font-size: 17px; color: var(--ink); outline: none; width: 100%; min-width: 0; transition: border-color var(--dur-1), box-shadow var(--dur-1); }
.todo-field input:focus { border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-dim); }
.todo-field small { font-size: 11px; color: var(--ink-3); font-family: var(--font-mono); }
.todo-comm { text-align: right; white-space: nowrap; }
.todo-comm span { display: block; font-size: 12px; color: var(--ink-2); }
.todo-comm b { font-family: var(--font-mono); font-size: 17px; font-weight: 500; }
.donemark { display: inline-block; width: 16px; color: var(--pos); font-weight: 700; margin-right: 6px; }
@media (max-width: 900px) { .todo { grid-template-columns: 40px 1fr; } .todo-field, .todo-comm { grid-column: 2; } .todo-comm { text-align: left; } .todo-comm span { display: inline; margin-right: 8px; } }

/* ───────── Wallet-Zeilen (kompakt) ───────── */
.wallet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 6px 10px; }
.wmini { display: grid; grid-template-columns: auto minmax(70px, 1fr) auto minmax(90px, auto) auto; align-items: center; gap: 10px; background: var(--surface-2); border: 1px solid var(--hair); border-radius: var(--r-2); padding: 6px 8px 6px 10px; border-left: 3px solid var(--c); min-width: 0; }
.wmini-label { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wmini-bal { font-family: var(--font-mono); font-size: 14px; font-weight: 600; white-space: nowrap; }
.wmini .addr { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); cursor: pointer; white-space: nowrap; }
.wmini .addr:hover { color: var(--ink); }
.wmini .actions { opacity: .55; }
.wmini:hover .actions { opacity: 1; }
.wmini .icon-btn { width: 24px; height: 24px; font-size: 12px; }
.wallets-top { padding: 14px 18px; margin-bottom: 16px; }
@media (max-width: 760px) { .wallet-grid { grid-template-columns: 1fr; } .wmini { grid-template-columns: auto 1fr auto auto; } .wmini .addr { display: none; } }

/* ───────── Wochenplan ───────── */
.ledger.plan th { text-align: center; }
.ledger.plan th:first-child, .ledger.plan td:first-child { text-align: left; min-width: 150px; }
.ledger.plan th.today { color: var(--amber-ink); }
.ledger.plan td.cell { padding: 8px 4px; text-align: center; min-width: 96px; }
.ledger.plan td.cell.today { background: var(--amber-dim); }
.ledger.plan td.cell.past { opacity: .8; }
.ledger.plan td.cell input { width: 88px; background: var(--canvas-2); border: 1px solid var(--hair-strong); border-radius: var(--r-2); padding: 8px 6px; font-family: var(--font-mono); font-size: 14px; color: var(--ink); text-align: center; outline: none; -moz-appearance: textfield; }
.ledger.plan td.cell input::-webkit-outer-spin-button, .ledger.plan td.cell input::-webkit-inner-spin-button { -webkit-appearance: none; }
.ledger.plan td.cell input:focus { border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-dim); }
.ledger.plan td.cell input.planned { border-color: rgba(44,197,138,.45); }
.ledger.plan td.cell input::placeholder { color: var(--ink-3); font-size: 11px; }
.ledger.plan td.cell .actual { font-family: var(--font-mono); font-size: 11px; margin-top: 4px; }
.ledger.plan td.comm input, .ledger.plan td.comm select { background: var(--canvas-2); border: 1px solid var(--hair-strong); border-radius: var(--r-2); padding: 7px 8px; font-size: 12.5px; color: var(--ink); outline: none; }
.ledger.plan td.comm input { font-family: var(--font-mono); }
.ledger.plan tr.row-total td { text-align: center; }
.ledger.plan tr.row-total td:first-child { text-align: left; }

/* ───────── Tagesziel-Liste (Brands) ───────── */
.ledger.split td input { width: 96px; background: var(--canvas-2); border: 1px solid var(--hair-strong); border-radius: var(--r-2); padding: 8px 8px; font-family: var(--font-mono); font-size: 14px; color: var(--ink); outline: none; }
.ledger.split td input:focus { border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-dim); }
.ledger.split .worker-tabs button { padding: 3px 10px 3px 4px; font-size: 12.5px; }

.others { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
.chip-btn { cursor: pointer; background: var(--surface-3); color: var(--ink); border-color: var(--hair-strong); }
.chip-btn:hover { border-color: var(--amber); color: var(--amber-ink); }
.chip-x { background: none; border: 0; color: var(--ink-3); cursor: pointer; padding: 0 0 0 4px; font-size: 13px; line-height: 1; }
.chip-x:hover { color: var(--neg); }

/* ───────── Vorschau als Mitarbeiter ───────── */
.preview-bar { position: sticky; top: 0; z-index: 45; display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; padding: 8px 16px; background: var(--amber); color: #1a1205; font-size: 13.5px; }
.preview-bar b { font-weight: 600; }
.preview-bar .btn { background: #1a1205; color: var(--amber-ink); border-color: transparent; }
.preview-bar .btn:hover { background: #2a1e08; }
body.preview .side { top: 37px; height: calc(100dvh - 37px); }
.preview-btn { position: absolute; right: 14px; bottom: 14px; opacity: .8; transition: opacity var(--dur-1); }
.firm:hover .preview-btn, .firm:focus-within .preview-btn { opacity: 1; }
.firm.has-preview { padding-bottom: 46px; }

/* ───────── Responsive ───────── */
@media (max-width: 1080px) { .kpis { grid-template-columns: repeat(2, 1fr); } .grid-2 { grid-template-columns: 1fr; } .main { padding: var(--s-5) var(--s-5) 110px; } }
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  body.preview .side { top: auto; height: auto; }
  .task { grid-template-columns: 30px 1fr; }
  .task .t-comm { grid-column: 2; text-align: left; }
  .task .t-comm small { display: inline; margin-left: 6px; }
  .side { position: fixed; top: auto; bottom: 0; left: 0; right: 0; height: auto; flex-direction: row; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); border-right: 0; border-top: 1px solid var(--hair-strong); background: rgba(14,16,15,.94); backdrop-filter: blur(12px); z-index: 25; }
  .brand, .side-foot { display: none; }
  .nav { flex-direction: row; width: 100%; justify-content: space-around; }
  .nav a { flex-direction: column; gap: 3px; font-size: 10.5px; padding: 6px 4px; }
  .nav a.active::before { left: 12px; right: 12px; top: auto; bottom: -6px; height: 2px; width: auto; border-radius: 2px 2px 0 0; }
  .main { padding: 20px 16px 120px; }
  h1 { font-size: 28px; }
  .kpi .val { font-size: clamp(17px, 5vw, 22px); }
  .kpi { padding: 14px 14px 12px; }
  .kpi .lbl { flex-wrap: wrap; }
  .form-grid { grid-template-columns: 1fr; } .form-grid .span-2 { grid-column: auto; }
  .fab { bottom: 84px; right: 18px; }
  .firm-grid { grid-template-columns: 1fr; }
  .hm { display: none; }
  .ledger td, .ledger th { padding-left: 6px; padding-right: 6px; }
}
@media (max-width: 430px) { .kpis { grid-template-columns: 1fr; } .kpi .val { font-size: 24px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }