/* T-004 Wohnungsrückgabe: design tokens + components. Light theme by intent: daylight walkthroughs,
   the tenant reads and signs on the same screen. Brand: Bordeaux (hue 8). Damage uses a separate
   vermilion with an icon, so it never reads as a primary action. */
:root {
  color-scheme: light;
  --bg: oklch(0.972 0.004 8);
  --surface: oklch(1 0 0);
  --surface-2: oklch(0.955 0.006 8);
  --surface-3: oklch(0.925 0.008 8);
  --line: oklch(0.905 0.007 8);
  --line-strong: oklch(0.80 0.01 8);
  --ink: oklch(0.22 0.018 8);
  --ink-2: oklch(0.40 0.016 8);
  --ink-3: oklch(0.50 0.013 8);

  --brand: oklch(0.43 0.145 8);
  --brand-hover: oklch(0.38 0.135 8);
  --brand-press: oklch(0.34 0.12 8);
  --brand-soft: oklch(0.955 0.022 8);
  --brand-line: oklch(0.84 0.06 8);
  --brand-ink: oklch(0.36 0.12 8);
  --on-brand: oklch(0.99 0.004 8);
  --focus: oklch(0.55 0.16 8 / 0.42);

  --ok: oklch(0.45 0.11 152);      --ok-bg: oklch(0.955 0.035 152);  --ok-line: oklch(0.80 0.08 152);
  --wear: oklch(0.43 0.07 250);    --wear-bg: oklch(0.955 0.018 250); --wear-line: oklch(0.82 0.04 250);
  --dmg: oklch(0.50 0.18 33);      --dmg-bg: oklch(0.955 0.03 33);    --dmg-line: oklch(0.82 0.09 33);
  --miss: oklch(0.47 0.10 62);     --miss-bg: oklch(0.96 0.045 85);   --miss-line: oklch(0.83 0.09 80);
  --info: oklch(0.43 0.07 250);    --info-bg: oklch(0.96 0.016 250);

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-xs: 0.8125rem; --fs-sm: 0.875rem; --fs-md: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.375rem; --fs-2xl: 1.625rem;
  --r-sm: 8px; --r: 12px; --r-lg: 16px;
  --tap: 48px;
  --shadow-1: 0 1px 2px oklch(0.22 0.02 8 / 0.06);
  --shadow-2: 0 1px 2px oklch(0.22 0.02 8 / 0.05), 0 6px 20px -8px oklch(0.22 0.02 8 / 0.18);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --z-sticky: 10; --z-bar: 20; --z-toast: 40;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; overflow-x: clip; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--fs-md);
  line-height: 1.5; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
}
h1, h2, h3 { margin: 0; line-height: 1.25; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--brand-ink); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
.ico { flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ------------------------------------------------------------------ app bar */
.app-bar {
  position: sticky; top: 0; z-index: var(--z-bar); display: flex; align-items: center; gap: 8px;
  min-height: 56px; padding: 6px 8px 6px 12px; padding-top: max(6px, env(safe-area-inset-top));
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.app-bar__title { flex: 1; min-width: 0; }
.app-bar__title strong { display: block; font-size: var(--fs-md); font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-bar__title span { display: block; font-size: var(--fs-xs); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-mark { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--brand); color: var(--on-brand); flex: none; }
.brand-mark .ico { width: 19px; height: 19px; }

.save-state { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--ink-3); padding: 6px 8px; border-radius: 999px; white-space: nowrap; }
.save-state .ico { width: 17px; height: 17px; }
.save-state[data-s="saved"] { color: var(--ok); }
.save-state[data-s="offline"] { color: var(--miss); background: var(--miss-bg); }
.save-state[data-s="error"], .save-state[data-s="locked"] { color: var(--dmg); background: var(--dmg-bg); }
.save-state[data-s="saving"] .ico, .save-state[data-s="pending"] .ico { animation: pulse 1.2s var(--ease) infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }
@media (max-width: 520px) { .save-state[data-s="saved"] .save-state__t, .save-state[data-s="pending"] .save-state__t, .save-state[data-s="saving"] .save-state__t { display: none; } }

/* ------------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap);
  padding: 10px 18px; border-radius: 10px; border: 1px solid transparent; font-weight: 600; font-size: var(--fs-md);
  text-decoration: none; line-height: 1.2; transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), transform .1s var(--ease);
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.btn:active:not(:disabled) { transform: scale(0.98); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn--primary { background: var(--brand); color: var(--on-brand); }
.btn--primary:hover:not(:disabled) { background: var(--brand-hover); }
.btn--primary:active:not(:disabled) { background: var(--brand-press); }
.btn--secondary { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.btn--secondary:hover:not(:disabled) { background: var(--surface-2); }
.btn--ghost { background: transparent; color: var(--brand-ink); padding-inline: 12px; }
.btn--ghost:hover:not(:disabled) { background: var(--brand-soft); }
.btn--danger { background: var(--surface); border-color: var(--dmg-line); color: var(--dmg); }
.btn--danger:hover:not(:disabled) { background: var(--dmg-bg); }
.btn--danger-solid { background: var(--dmg); color: #fff; }
.btn--block { width: 100%; }
.btn--sm { min-height: 40px; padding: 8px 12px; font-size: var(--fs-sm); }
.btn.is-busy { pointer-events: none; opacity: .7; }
.icon-btn {
  display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); border-radius: 10px; border: 0;
  background: transparent; color: var(--ink-2); -webkit-tap-highlight-color: transparent; flex: none;
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }

/* ------------------------------------------------------------------ layout */
.page { max-width: 1120px; margin: 0 auto; padding: 16px 16px 120px; }
.stack > * + * { margin-top: 16px; }
.stack-sm > * + * { margin-top: 10px; }
.row { display: flex; align-items: center; gap: 10px; }
.row--wrap { flex-wrap: wrap; }
.spacer { flex: 1; }
.muted { color: var(--ink-3); }
.small { font-size: var(--fs-sm); }
.xsmall { font-size: var(--fs-xs); }
.strong { font-weight: 650; }
.num { font-variant-numeric: tabular-nums; }

.group { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.group__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 14px 16px 0; }
.group__title { font-size: var(--fs-lg); font-weight: 650; }
.group__body { padding: 14px 16px 16px; }
.group__body > * + * { margin-top: 14px; }
.group + .group { margin-top: 14px; }
.divider { height: 1px; background: var(--line); margin: 4px 0; }

/* ------------------------------------------------------------------ forms */
.field { display: block; min-width: 0; }
.field__label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.field__label .opt { font-weight: 400; color: var(--ink-3); }
.field__hint { display: block; font-size: var(--fs-xs); color: var(--ink-3); margin-top: 6px; }
.field__error { display: block; font-size: var(--fs-xs); color: var(--dmg); margin-top: 6px; font-weight: 600; }
.input, .select, .textarea {
  display: block; width: 100%; min-height: var(--tap); padding: 11px 13px; border: 1px solid var(--line-strong);
  border-radius: 10px; background: var(--surface); font-size: 16px; color: var(--ink);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.input::placeholder, .textarea::placeholder { color: oklch(0.55 0.012 8); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--focus); }
.input:disabled, .select:disabled, .textarea:disabled { background: var(--surface-2); color: var(--ink-2); border-color: var(--line); }
.input.is-invalid { border-color: var(--dmg); }
.textarea { min-height: 88px; resize: vertical; line-height: 1.45; }
.select { appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23574b4d' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; }
.affix { position: relative; }
.affix .input { padding-right: 70px; }
.affix__unit { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); color: var(--ink-3); font-size: var(--fs-sm); pointer-events: none; }
.grid { display: grid; gap: 14px; }
.grid-2 { display: grid; gap: 14px; grid-template-columns: 1fr; }
.grid-3 { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
@media (min-width: 560px) { .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.span-2 { grid-column: 1 / -1; }
@media (max-width: 559px) { .span-2-sm { grid-column: 1 / -1; } }
.btn--lg { min-height: 54px; font-size: var(--fs-lg); }

/* ------------------------------------------------------------------ segmented control */
.seg { display: flex; gap: 4px; padding: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; }
.seg__opt {
  flex: 1 1 0; min-width: 0; min-height: 44px; padding: 6px 6px; border: 1px solid transparent; border-radius: 9px; background: transparent;
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); line-height: 1.15; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  -webkit-tap-highlight-color: transparent; transition: background-color .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.seg__opt .ico { width: 16px; height: 16px; display: none; }
.seg__opt:hover:not(:disabled) { color: var(--ink); background: oklch(1 0 0 / 0.6); }
.seg__opt[aria-pressed="true"] { background: var(--surface); color: var(--ink); border-color: var(--line-strong); box-shadow: var(--shadow-1); }
.seg__opt[aria-pressed="true"] .ico { display: inline; }
.seg__opt[aria-pressed="true"][data-tone="ok"] { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); }
.seg__opt[aria-pressed="true"][data-tone="wear"] { background: var(--wear-bg); color: var(--wear); border-color: var(--wear-line); }
.seg__opt[aria-pressed="true"][data-tone="dmg"] { background: var(--dmg-bg); color: var(--dmg); border-color: var(--dmg-line); }
.seg__opt[aria-pressed="true"][data-tone="miss"] { background: var(--miss-bg); color: var(--miss); border-color: var(--miss-line); }
.seg__opt[aria-pressed="true"][data-tone="brand"] { background: var(--brand-soft); color: var(--brand-ink); border-color: var(--brand-line); }
.seg__opt:disabled { cursor: default; }
.seg--compact .seg__opt { min-height: 40px; }
@media (max-width: 479px) { .seg--4 { display: grid; grid-template-columns: 1fr 1fr; } .seg--4 .seg__opt { min-height: 46px; } }
.seg__opt span { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 479px) { .seg--stack { flex-direction: column; } .seg--stack .seg__opt { justify-content: flex-start; padding-inline: 14px; } }
.grid-plz { display: grid; gap: 14px; grid-template-columns: minmax(88px, 1fr) 2.4fr; }

/* ------------------------------------------------------------------ chips + badges */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2);
  -webkit-tap-highlight-color: transparent; transition: background-color .15s var(--ease), border-color .15s var(--ease);
}
.chip .ico { width: 16px; height: 16px; }
.chip:hover:not(:disabled) { border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand-ink); }
.chip:disabled { opacity: .45; }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 650; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.badge .ico { width: 14px; height: 14px; }
.badge--ok { background: var(--ok-bg); color: var(--ok); }
.badge--wear { background: var(--wear-bg); color: var(--wear); }
.badge--dmg { background: var(--dmg-bg); color: var(--dmg); }
.badge--miss { background: var(--miss-bg); color: var(--miss); }
.badge--brand { background: var(--brand-soft); color: var(--brand-ink); }
.badge--lock { background: var(--ink); color: var(--surface); }

/* ------------------------------------------------------------------ notes (callouts) */
.note { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--r); background: var(--info-bg); color: var(--ink); font-size: var(--fs-sm); line-height: 1.45; }
.note > .ico { width: 19px; height: 19px; margin-top: 1px; color: var(--info); }
.note--warn { background: var(--miss-bg); }
.note--warn > .ico { color: var(--miss); }
.note--danger { background: var(--dmg-bg); }
.note--danger > .ico { color: var(--dmg); }
.note--ok { background: var(--ok-bg); }
.note--ok > .ico { color: var(--ok); }
.note--brand { background: var(--brand-soft); }
.note--brand > .ico { color: var(--brand); }
.note strong { font-weight: 650; }

/* ------------------------------------------------------------------ wizard */
.wz { max-width: 1120px; margin: 0 auto; }
.steps { position: sticky; top: 56px; z-index: var(--z-sticky); background: var(--bg); border-bottom: 1px solid var(--line); }
.steps__list { display: flex; gap: 6px; overflow-x: auto; padding: 10px 12px; margin: 0; list-style: none; scrollbar-width: none; scroll-snap-type: x proximity; }
.steps__list::-webkit-scrollbar { display: none; }
.step-chip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 6px 12px 6px 6px; border-radius: 999px;
  border: 1px solid transparent; background: transparent; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-3); white-space: nowrap; scroll-snap-align: center;
  -webkit-tap-highlight-color: transparent;
}
.step-chip__n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-3); color: var(--ink-2); font-size: var(--fs-xs); font-weight: 700; }
.step-chip__n .ico { width: 15px; height: 15px; }
.step-chip.is-done .step-chip__n { background: var(--ok-bg); color: var(--ok); }
.step-chip.is-current { background: var(--surface); border-color: var(--line-strong); color: var(--ink); box-shadow: var(--shadow-1); }
.step-chip.is-current .step-chip__n { background: var(--brand); color: var(--on-brand); }
.step-chip:disabled { opacity: .45; cursor: default; }
.wz-main { padding: 18px 16px 130px; max-width: 760px; margin: 0 auto; }
.wz-head { margin-bottom: 18px; }
.wz-head__kicker { font-size: var(--fs-sm); color: var(--ink-3); font-weight: 600; }
.wz-head h1 { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -0.01em; margin-top: 2px; }
.wz-head p { color: var(--ink-2); margin-top: 6px; max-width: 62ch; }
.wz-content { animation: enter .22s var(--ease); }
@keyframes enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bar); display: flex; gap: 10px; justify-content: center;
  padding: 10px 16px; padding-bottom: max(10px, env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--line);
}
.action-bar__inner { display: flex; gap: 10px; width: 100%; max-width: 760px; }
.action-bar .btn--primary { flex: 1; }
.action-bar .btn--secondary { flex: 0 0 auto; }
@media (max-width: 559px) { .action-bar .btn--secondary:not(.keep-label) { padding-inline: 14px; } .action-bar .btn--secondary:not(.keep-label) .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }

@media (min-width: 900px) {
  .wz-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 8px; max-width: 1120px; margin: 0 auto; }
  .steps { position: sticky; top: 56px; align-self: start; background: transparent; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; height: calc(100vh - 56px); }
  .steps__list { flex-direction: column; overflow: visible; padding: 18px 8px 18px 16px; gap: 2px; }
  .step-chip { width: 100%; border-radius: 12px; padding: 7px 10px 7px 7px; white-space: normal; text-align: left; min-height: 46px; }
  .step-chip__label-long { display: inline; }
  .step-chip__label-short { display: none; }
  .wz-main { padding: 26px 24px 130px; margin: 0; }
  .action-bar { left: 258px; background: transparent; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; padding-bottom: 20px; }
  .action-bar__inner { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 10px; box-shadow: var(--shadow-2); }
}
.step-chip__label-long { display: none; }
@media (min-width: 900px) { .step-chip__label-long { display: inline; } .step-chip__label-short { display: none; } }

/* ------------------------------------------------------------------ rooms + checklist */
.room-list { display: grid; gap: 10px; }
.room-row {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 12px 14px 14px; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1);
  -webkit-tap-highlight-color: transparent; transition: border-color .15s var(--ease);
}
.room-row:hover { border-color: var(--line-strong); }
.room-row__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; background: var(--surface-2); color: var(--ink-2); flex: none; }
.room-row__main { flex: 1; min-width: 0; }
.room-row__name { font-weight: 650; }
.room-row__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; align-items: center; }
.progress { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; width: 64px; }
.progress > i { display: block; height: 100%; background: var(--ok); border-radius: inherit; transition: width .25s var(--ease); }

.check { list-style: none; margin: 0; padding: 0; }
.check-item { padding: 14px 16px; border-top: 1px solid var(--line); }
.check-item:first-child { border-top: 0; }
.check-item__label { display: flex; align-items: center; gap: 8px; font-weight: 650; margin-bottom: 10px; }
.check-item__detail { margin-top: 12px; padding: 14px; border-radius: var(--r); background: var(--surface-2); animation: enter .2s var(--ease); }
.check-item__detail > * + * { margin-top: 14px; }
.check-item[data-z="schaden"] .check-item__detail { background: var(--dmg-bg); }
.check-item[data-z="fehlt"] .check-item__detail { background: var(--miss-bg); }
.check-item__detail .input, .check-item__detail .select, .check-item__detail .textarea { background: var(--surface); }
.check-item__detail .seg { background: oklch(1 0 0 / 0.65); }

/* ------------------------------------------------------------------ photos */
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.photo { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--surface-3); border: 1px solid var(--line); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo__rm { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; border-radius: 50%; border: 0; display: grid; place-items: center; background: oklch(0.2 0.02 8 / 0.62); color: #fff; }
.photo__rm .ico { width: 16px; height: 16px; }
.photo__pending { position: absolute; left: 4px; bottom: 4px; padding: 2px 6px; border-radius: 6px; background: oklch(0.2 0.02 8 / 0.62); color: #fff; font-size: 11px; font-weight: 600; }
.photo-add { position: relative; aspect-ratio: 1; display: grid; place-items: center; align-content: center; gap: 4px; border-radius: 10px; border: 1.5px dashed var(--line-strong); color: var(--brand-ink); font-size: var(--fs-xs); font-weight: 650; background: var(--surface); cursor: pointer; text-align: center; padding: 6px; }
.photo-add:hover { border-color: var(--brand); background: var(--brand-soft); }
.photo-add input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.photo-add .ico { width: 22px; height: 22px; }

/* file picker styled as a button */
.file-btn { position: relative; overflow: hidden; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.upload-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.upload-row__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: var(--fs-sm); }

/* ------------------------------------------------------------------ meters, keys */
.meter__head { display: flex; align-items: center; gap: 10px; }
.meter__icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--surface-2); color: var(--ink-2); }
.meter__photo { display: flex; gap: 10px; align-items: center; }
.meter__photo .photo, .meter__photo .photo-add { width: 84px; flex: none; }
.key-row { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--line); }
.key-row:first-child { border-top: 0; }
.key-row__top { display: flex; align-items: center; gap: 8px; }
.key-row__counts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stepper { display: flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); overflow: hidden; }
.stepper button { width: var(--tap); height: var(--tap); border: 0; background: transparent; display: grid; place-items: center; color: var(--ink-2); -webkit-tap-highlight-color: transparent; }
.stepper button:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
.stepper button:disabled { opacity: .35; }
.stepper output { flex: 1; text-align: center; font-weight: 700; font-size: var(--fs-lg); }
.stepper output.is-empty { color: var(--ink-3); font-weight: 500; font-size: var(--fs-sm); }

/* ------------------------------------------------------------------ calc + summary */
.calc { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.calc td { padding: 7px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.calc td:last-child { text-align: right; white-space: nowrap; padding-left: 12px; }
.calc tr.is-total td { border-bottom: 0; border-top: 2px solid var(--ink); font-weight: 750; font-size: var(--fs-lg); padding-top: 10px; }
.calc tr.is-sub td { color: var(--ink-3); font-size: var(--fs-sm); }
.dl { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: 6px 14px; margin: 0; font-size: var(--fs-sm); }
.dl dt { color: var(--ink-3); }
.dl dd { margin: 0; font-weight: 550; overflow-wrap: anywhere; }
.dmg-row { padding: 14px 16px; border-top: 1px solid var(--line); }
.dmg-row:first-child { border-top: 0; }
.dmg-row__title { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font-weight: 650; }
.dmg-row__meta { color: var(--ink-3); font-size: var(--fs-sm); margin-top: 4px; }
.dmg-row__thumbs { display: flex; gap: 6px; margin-top: 8px; }
.dmg-row__thumbs img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.deadline { display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: var(--r-lg); background: var(--surface); border: 1.5px solid var(--brand-line); }
.deadline__date { display: grid; place-items: center; min-width: 76px; padding: 8px 6px; border-radius: 12px; background: var(--brand); color: var(--on-brand); text-align: center; line-height: 1.1; }
.deadline__date b { font-size: 1.5rem; font-weight: 750; }
.deadline__date span { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .02em; }
.deadline__text { font-size: var(--fs-sm); color: var(--ink-2); }
.deadline__text strong { display: block; color: var(--ink); font-size: var(--fs-md); }

/* ------------------------------------------------------------------ signatures */
.sigs { display: grid; gap: 14px; }
@media (min-width: 700px) { .sigs { grid-template-columns: 1fr 1fr; } }
.sig__pad { position: relative; height: 190px; border-radius: var(--r); border: 1.5px solid var(--line-strong); background: var(--surface); touch-action: none; overflow: hidden; }
.sig__pad.is-signed { border-color: var(--ok-line); }
.sig__pad canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.sig__line { position: absolute; left: 18px; right: 18px; bottom: 44px; border-bottom: 1.5px dashed var(--line-strong); pointer-events: none; }
.sig__hint, .sig__date { position: absolute; bottom: 16px; font-size: var(--fs-xs); color: var(--ink-3); pointer-events: none; white-space: nowrap; }
.sig__hint { left: 18px; }
.sig__date { right: 18px; }
.sig__img { height: 190px; display: grid; place-items: center; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); }
.sig__img img { max-height: 150px; max-width: 90%; }

/* ------------------------------------------------------------------ dashboard */
.hello { display: flex; align-items: flex-end; gap: 12px; margin: 6px 0 16px; }
.hello h1 { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -0.01em; }
.tiles { display: grid; gap: 12px; }
@media (min-width: 700px) { .tiles { grid-template-columns: 1.35fr 1fr; } }
.tile {
  position: relative; display: flex; flex-direction: column; gap: 14px; padding: 20px; min-height: 168px; text-align: left;
  border-radius: 20px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1);
  -webkit-tap-highlight-color: transparent; transition: transform .15s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.tile:active { transform: scale(0.99); }
.tile__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--surface-2); color: var(--ink-2); }
.tile__icon .ico { width: 28px; height: 28px; }
.tile__title { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.01em; }
.tile__text { font-size: var(--fs-sm); color: var(--ink-2); margin-top: 4px; max-width: 42ch; }
.tile__go { position: absolute; right: 18px; top: 20px; }
.tile--primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); box-shadow: var(--shadow-2); }
.tile--primary:hover { background: var(--brand-hover); }
.tile--primary .tile__icon { background: oklch(1 0 0 / 0.14); color: var(--on-brand); }
.tile--primary .tile__text { color: oklch(0.95 0.02 8 / 0.92); }
.tile--soon { background: var(--surface-2); border-style: dashed; border-color: var(--line-strong); box-shadow: none; }
.tile--soon .tile__icon { background: var(--surface); }
.tile__badge { position: absolute; right: 18px; top: 20px; }

.list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-1); }
.list-row { display: flex; gap: 12px; align-items: center; width: 100%; padding: 14px 14px 14px 16px; border: 0; border-top: 1px solid var(--line); background: transparent; text-align: left; text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent; }
.list-row:first-child { border-top: 0; }
.list-row:hover { background: var(--surface-2); }
.list-row__main { flex: 1; min-width: 0; }
.list-row__title { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row__meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: var(--fs-sm); color: var(--ink-3); margin-top: 3px; }
.section-title { display: flex; align-items: baseline; gap: 10px; margin: 26px 0 10px; }
.section-title h2 { font-size: var(--fs-lg); font-weight: 700; }
.empty { padding: 26px 18px; text-align: center; color: var(--ink-2); }
.empty .ico { width: 30px; height: 30px; color: var(--ink-3); margin: 0 auto 8px; display: block; }

/* ------------------------------------------------------------------ login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.login__card { width: 100%; max-width: 420px; }
.login__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.login__brand .brand-mark { width: 46px; height: 46px; border-radius: 13px; }
.login__brand .brand-mark .ico { width: 25px; height: 25px; }
.login h1 { font-size: var(--fs-2xl); font-weight: 750; letter-spacing: -0.01em; }

/* ------------------------------------------------------------------ preview (Handwerker request) */
.letter { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 18px; font-size: var(--fs-sm); line-height: 1.55; }
.letter h3 { font-size: var(--fs-lg); margin: 14px 0 4px; }
.letter table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.letter td, .letter th { text-align: left; padding: 7px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.letter th { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 650; }

/* ------------------------------------------------------------------ footer + toast */
.foot { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; padding: 24px 16px 8px; font-size: var(--fs-xs); color: var(--ink-3); }
.foot a { color: var(--ink-2); }
.demo-flag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--miss-bg); color: var(--miss); font-size: var(--fs-xs); font-weight: 650; }
.toast-wrap { position: fixed; left: 0; right: 0; grid-template-columns: minmax(0, 1fr); bottom: calc(84px + env(safe-area-inset-bottom)); z-index: var(--z-toast); display: grid; justify-items: center; pointer-events: none; padding: 0 16px; }
.toast { pointer-events: auto; max-width: min(460px, 100%); min-width: 0; display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-radius: 12px; background: var(--ink); color: var(--surface); font-size: var(--fs-sm); box-shadow: var(--shadow-2); animation: toast .25s var(--ease); }
.toast .ico { width: 18px; height: 18px; }
.toast--error { background: var(--dmg); }
@keyframes toast { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.skeleton { height: 64px; border-radius: 12px; background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* Legal pages */
.legal { max-width: 720px; margin: 0 auto; padding: 24px 16px 60px; }
.legal h1 { font-size: var(--fs-2xl); margin-bottom: 14px; }
.legal h2 { font-size: var(--fs-lg); margin: 26px 0 8px; }
.legal p, .legal li { color: var(--ink-2); max-width: 70ch; }
.legal p + p { margin-top: 10px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}