/* Premium documents — seller page, buy panel, and the Telegram grant page.
 *
 * Flat system, matching the rest of the site's new arm: square corners, ink
 * #0a0a0a, one orange accent, no shadows. Scoped under .dm- and .dg- so it can
 * be loaded beside any page skin without reaching into it. */

.dm-scope, .dg-body {
  --dm-ink:#0a0a0a; --dm-dim:#4b5563; --dm-lab:#9aa1ab;
  --dm-hair:#e6e6e6; --dm-or:#e8501e; --dm-ok:#0f7b3f;
}

/* ── the Telegram grant page: one card, nothing else ──────────────────────── */
.dg-body{
  margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:24px; background:#f4f4f5; color:var(--dm-ink);
  font-family:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',sans-serif;
}
.dg-card{
  width:100%; max-width:32rem; background:#fff; border:2px solid var(--dm-ink);
  padding:clamp(22px,5vw,34px);
}
.dg-eyebrow{
  margin:0 0 12px; font-size:10.5px; font-weight:800; letter-spacing:.18em;
  text-transform:uppercase; color:var(--dm-lab);
}
.dg-eyebrow.dg-ok{color:var(--dm-ok)}
.dg-eyebrow.dg-no{color:var(--dm-or)}
/* Vietnamese leading: a stacked diacritic reaches ~0.92em above the baseline
   where a Latin cap reaches 0.75, so 1.05 reads as collided here. */
.dg-h1{margin:0; font-size:clamp(21px,3.4vw,28px); line-height:1.2; font-weight:800;
  letter-spacing:-.03em; text-wrap:balance}
.dg-p{margin:14px 0 0; font-size:14px; line-height:1.6; color:var(--dm-dim)}
.dg-p b{color:var(--dm-ink)}
.dg-p a{color:var(--dm-ink)}
.dg-facts{display:flex; gap:26px; margin:20px 0 0; padding:14px 0; border-top:1px solid var(--dm-hair);
  border-bottom:1px solid var(--dm-hair)}
.dg-facts div{display:flex; flex-direction:column; gap:3px}
.dg-facts dt{font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--dm-lab)}
.dg-facts dd{margin:0; font-size:17px; font-weight:800; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.dg-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:22px}
.dg-btn{flex:1 1 auto; min-width:170px; height:48px; border:2px solid var(--dm-ink);
  background:#fff; color:var(--dm-ink); font-family:inherit; font-size:14px; font-weight:800;
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px}
.dg-btn-ok{background:var(--dm-ink); color:#fff}
.dg-btn-ok:hover{background:#000}
.dg-btn-no:hover{background:#faf0ec; border-color:var(--dm-or); color:var(--dm-or)}
.dg-ref{margin:14px 0 0;font-size:13px;line-height:1.6;color:var(--dm-dim)}
.dg-ref code{display:inline-block;margin-left:4px;padding:3px 9px;background:var(--dm-ink);color:#fff;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;font-weight:700;letter-spacing:.04em}
.dg-note{margin:18px 0 0; font-size:12px; line-height:1.55; color:var(--dm-lab)}

/* ── seller page ──────────────────────────────────────────────────────────── */
.dm-scope{font-family:'Be Vietnam Pro',system-ui,sans-serif; color:var(--dm-ink)}
.dm-wrap{max-width:1060px; margin:0 auto; padding:0 clamp(16px,4vw,32px) 60px}
.dm-h1{font-size:clamp(24px,4vw,40px); line-height:1.16; font-weight:800; letter-spacing:-.04em;
  margin:0 0 10px; text-wrap:balance}
.dm-lead{font-size:15px; line-height:1.6; color:var(--dm-dim); margin:0 0 26px; max-width:60ch}

/* The setup card. Only 1 of 905 users has both prerequisites, so this is the
   page most sellers meet FIRST — it has to teach, not refuse. */
.dm-setup{border:2px solid var(--dm-ink); margin-bottom:26px}
.dm-setup-h{background:var(--dm-ink); color:#fff; padding:13px 17px; font-size:14px; font-weight:800}
.dm-step{display:flex; gap:14px; align-items:flex-start; padding:16px 17px;
  border-bottom:1px solid var(--dm-hair)}
.dm-step:last-child{border-bottom:0}
.dm-step-n{flex:0 0 26px; height:26px; display:flex; align-items:center; justify-content:center;
  background:var(--dm-or); color:#fff; font-size:12px; font-weight:800}
.dm-step.is-done .dm-step-n{background:var(--dm-ok)}
.dm-step-b{flex:1 1 auto}
.dm-step-b b{display:block; font-size:14.5px; font-weight:800}
.dm-step-b span{display:block; font-size:12.5px; line-height:1.5; color:var(--dm-dim); margin-top:3px}
.dm-step-go{flex:0 0 auto; align-self:center; height:36px; padding:0 15px; border:1.5px solid var(--dm-ink);
  background:#fff; color:var(--dm-ink); font-size:12.5px; font-weight:800; text-decoration:none;
  display:inline-flex; align-items:center}
.dm-step-go:hover{background:var(--dm-ink); color:#fff}

.dm-panel{border:2px solid var(--dm-ink); margin-bottom:22px}
.dm-panel-h{background:var(--dm-ink); color:#fff; padding:12px 16px; font-size:13.5px; font-weight:800;
  display:flex; align-items:center; justify-content:space-between; gap:12px}
.dm-panel-h span{font-size:11px; color:rgba(255,255,255,.66); font-weight:700}
.dm-panel-b{padding:16px}
.dm-field{margin-bottom:14px}
.dm-field label{display:block; font-size:11px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dm-lab); margin-bottom:6px}
.dm-field input[type=text],.dm-field input[type=number],.dm-field textarea,.dm-field select{
  width:100%; padding:11px 13px; border:1.5px solid var(--dm-hair); background:#fff;
  font-family:inherit; font-size:14px; color:var(--dm-ink)}
.dm-field input:focus,.dm-field textarea:focus,.dm-field select:focus{
  outline:none; border-color:var(--dm-ink)}
.dm-field .dm-hint{font-size:12px; color:var(--dm-lab); margin:5px 0 0; line-height:1.5}
.dm-btn{height:46px; padding:0 22px; border:0; background:var(--dm-ink); color:#fff;
  font-family:inherit; font-size:14px; font-weight:800; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px}
.dm-btn:hover{background:#000}
.dm-btn-ghost{background:#fff; color:var(--dm-ink); border:1.5px solid var(--dm-ink)}
.dm-btn-ghost:hover{background:var(--dm-ink); color:#fff}

.dm-row{display:flex; gap:14px; align-items:center; padding:13px 16px;
  border-bottom:1px solid var(--dm-hair)}
.dm-row:last-child{border-bottom:0}
.dm-row-b{flex:1 1 auto; min-width:0}
.dm-row-b b{display:block; font-size:14px; font-weight:700; line-height:1.35}
.dm-row-b span{display:block; font-size:12px; color:var(--dm-lab); margin-top:3px}
.dm-price{flex:0 0 auto; font-size:14px; font-weight:800; font-variant-numeric:tabular-nums}
.dm-tag{display:inline-block; font-size:10px; font-weight:800; letter-spacing:.09em;
  text-transform:uppercase; padding:2px 7px; border:1px solid var(--dm-hair); color:var(--dm-lab)}
.dm-tag-live{border-color:var(--dm-ok); color:var(--dm-ok)}
.dm-tag-pending{border-color:var(--dm-or); color:var(--dm-or)}
.dm-tag-removed{border-color:var(--dm-lab); color:var(--dm-lab)}
.dm-empty{padding:22px 16px; font-size:13.5px; color:var(--dm-lab); line-height:1.6}

/* ── buy panel on the document page ───────────────────────────────────────── */
.dm-buy{border:2px solid var(--dm-ink); margin:22px 0}
.dm-buy-h{background:var(--dm-ink); color:#fff; padding:12px 16px; display:flex;
  align-items:baseline; justify-content:space-between; gap:12px}
.dm-buy-h b{font-size:13.5px; font-weight:800}
.dm-buy-h .dm-buy-price{font-size:19px; font-weight:800; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.dm-buy-b{padding:16px}
.dm-qr{display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap}
.dm-qr img{width:190px; height:190px; object-fit:contain; border:1.5px solid var(--dm-hair);
  background:#fff}
.dm-qr-b{flex:1 1 220px; min-width:0}
.dm-qr-b p{margin:0 0 10px; font-size:13.5px; line-height:1.6; color:var(--dm-dim)}
.dm-qr-b p b{color:var(--dm-ink)}
.dm-state{display:flex; gap:11px; align-items:flex-start; padding:14px 16px;
  border-left:3px solid var(--dm-or); background:#fafafa; font-size:13.5px; line-height:1.6;
  color:var(--dm-dim)}
.dm-state.is-ok{border-left-color:var(--dm-ok)}
.dm-state b{color:var(--dm-ink)}
.dm-minor{display:flex; gap:14px; flex-wrap:wrap; margin-top:14px}
.dm-minor button, .dm-minor a{background:none; border:0; padding:0; font-family:inherit;
  font-size:12.5px; color:var(--dm-lab); text-decoration:underline; text-underline-offset:3px;
  cursor:pointer}
.dm-minor button:hover, .dm-minor a:hover{color:var(--dm-ink)}

/* ── stars ────────────────────────────────────────────────────────────────── */
.dm-stars{display:inline-flex; gap:2px; font-size:13px; color:var(--dm-or)}
.dm-stars .off{color:var(--dm-hair)}
.dm-rate{display:flex; gap:6px; align-items:center; margin-top:10px}
.dm-rate input{position:absolute; opacity:0; pointer-events:none}
.dm-rate label{cursor:pointer; font-size:19px; color:var(--dm-hair); line-height:1}
.dm-rate label.on{color:var(--dm-or)}

@media (max-width:560px){
  .dm-row{flex-wrap:wrap}
  .dm-qr img{width:100%; max-width:240px; height:auto; aspect-ratio:1}
}
@media (prefers-reduced-motion:reduce){
  .dm-btn,.dg-btn{transition:none}
}