.dm { min-height: 100vh; display: flex; flex-direction: column; }
.dm .header__in { gap: 16px; }
.dm__badge {
  padding: 7px 10px 6px; border: 1px solid var(--line-2); border-radius: 7px;
  font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-2);
}
.dm__timer { margin-left: auto; font-size: .875rem; color: var(--fg-2); }
.dm__timer.is-low { color: var(--accent); }
.dm__main { flex: 1; padding-block: clamp(28px, 5vw, 64px) clamp(40px, 6vw, 88px); }
.dm__state { max-width: 640px; padding-top: clamp(20px, 6vw, 80px); }
.dm__state .btn { margin-top: 26px; }
.dm__title { margin-top: 12px; font: 800 clamp(2.5rem, 6vw, 4.5rem)/.9 var(--font-display); text-transform: uppercase; }
.dm__lead { margin-top: 16px; color: var(--fg-2); font-size: 1.125rem; line-height: 1.45; }
.dm__muted { color: var(--fg-3); }
.dm__small { font-size: .875rem; }
.dm__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.dm__form { display: grid; gap: 14px; }
.dm__form .dm__title { margin-bottom: 8px; }
.dm__form .field input { font-size: 1.125rem; }
.dm__form #dm-amount { font: 800 2rem/1 var(--font-display); padding: 12px 14px 10px; }
.dm__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -4px; }
.dm__chip {
  padding: 9px 12px 8px; border: 1px solid var(--line-2); border-radius: 8px;
  background: none; color: var(--fg); font: 500 .875rem/1 var(--font-mono); cursor: pointer;
}
.dm__chip:hover { border-color: var(--accent); color: var(--accent); }
.dm__submit { justify-self: start; margin-top: 6px; }
.dm__submit[disabled] { opacity: .6; cursor: progress; }
.dm__status { min-height: 1.4em; color: var(--accent); }
.dm__hint { color: var(--fg-3); font-size: .875rem; }
.dm__invoice { position: relative; }
.dm__empty { padding: 22px; border: 1px dashed var(--line-2); border-radius: 14px; }
.dm__empty .dm__muted { margin-top: 12px; }
.dm__card {
  padding: clamp(18px, 2.4vw, 26px); background: var(--bg-2);
  border: 1px solid var(--line-2); border-radius: 16px; box-shadow: 0 30px 60px rgba(0, 0, 0, .45);
}
.dm__card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: .75rem; letter-spacing: .06em; color: var(--fg-3); }
.dm__pill { padding: 6px 9px 5px; border-radius: 6px; background: rgba(241, 239, 231, .08); color: var(--fg-2); font: 500 .75rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; }
.dm__pill.is-ok { background: var(--accent); color: var(--ink); }
.dm__pill.is-bad { background: rgba(241, 239, 231, .12); color: var(--fg-3); }
.dm__amount { margin-top: 14px; font: 800 clamp(2.75rem, 5vw, 3.75rem)/.9 var(--font-display); }
.dm__desc { margin-top: 6px; color: var(--fg-2); min-height: 1.4em; overflow-wrap: anywhere; }
.dm__qr { margin-top: 16px; padding: 12px; background: var(--plate); border-radius: 12px; width: min(100%, 264px); }
.dm__qr canvas { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.dm__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.dm__actions .is-off { opacity: .45; pointer-events: none; }
.dm__card .dm__small { margin-top: 12px; }
.dm__history { margin-top: clamp(36px, 5vw, 64px); max-width: 640px; }
.dm__history ul { margin-top: 12px; border-top: 1px solid var(--line); }
.dm__history li { padding: 12px 0 11px; border-bottom: 1px solid var(--line); font: 500 .9375rem/1.3 var(--font-mono); color: var(--fg-2); cursor: pointer; }
.dm__history li:hover { color: var(--fg); }
.dm__history li.is-ok { color: var(--accent); }
.dm__foot { display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: space-between; padding-block: 20px 28px; border-top: 1px solid var(--line); color: var(--fg-3); font-size: .75rem; }
@media (max-width: 860px) {
  .dm__grid { grid-template-columns: minmax(0, 1fr); }
  .dm__badge { display: none; }
}