:root{
  --bg:#EEF1F0; --panel:#FFFFFF; --ink:#18232D; --muted:#5D6A76; --line:#D6DDE1;
  --accent:#0E6B58; --accent-ink:#FFFFFF; --accent-soft:#E2F1ED;
  --wait:#9A5B06; --wait-soft:#FBF0DF; --bad:#AE2A21; --bad-soft:#FBE6E4; --neutral-soft:#E9EDF0;
  --radius-s:6px; --radius-l:12px;
  --font:"Golos Text",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font:15px/1.55 var(--font);color:var(--ink);background:var(--bg)}
a{color:var(--accent)}
:focus-visible{outline:3px solid #7FC4B4;outline-offset:2px}
.layout{display:grid;grid-template-columns:232px 1fr;min-height:100vh}
.side{background:var(--ink);color:#CFD8DE;padding:24px 16px;display:flex;flex-direction:column;gap:4px}
.brand{color:#fff;font-weight:700;font-size:17px;line-height:1.25;margin:0 8px 24px}
.brand small{display:block;font-weight:400;color:#8E9CA7;font-size:13px;margin-top:4px}
.side a{color:#CFD8DE;text-decoration:none;padding:8px 10px;border-radius:var(--radius-s)}
.side a:hover{background:#243240;color:#fff}
.side a.on{background:var(--accent);color:#fff}
.side .spacer{flex:1}
main{padding:32px 40px;max-width:1180px;width:100%}
h1{font-size:26px;line-height:1.2;margin:0 0 6px;font-weight:700}
h2{font-size:18px;margin:0 0 12px}
.lead{color:var(--muted);margin:0 0 24px;max-width:70ch}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-l);padding:22px 24px;margin-bottom:20px}
.panel > p:first-of-type{margin-top:0}
.muted{color:var(--muted)}
.small{font-size:13px}
.flash{padding:12px 16px;border-radius:var(--radius-s);margin-bottom:20px;background:var(--accent-soft);color:#0A4D40;border:1px solid #B9DCD3}
.flash.bad{background:var(--bad-soft);color:#7E1C16;border-color:#F0C2BE}
label{display:block;font-weight:600;margin:14px 0 6px}
.hint{font-weight:400;color:var(--muted);font-size:13px;margin-top:4px}
input[type=text],input[type=password],input[type=number],input[type=email],select,textarea{
  width:100%;max-width:560px;font:inherit;padding:9px 12px;border:1px solid #BFC9CF;border-radius:var(--radius-s);background:#fff;color:var(--ink)}
textarea{font-family:var(--mono);font-size:13px;min-height:70px}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:400;margin:12px 0}
.check input{margin-top:5px}
.btn{display:inline-block;font:inherit;font-weight:600;padding:9px 16px;border-radius:var(--radius-s);border:1px solid var(--accent);
  background:var(--accent);color:var(--accent-ink);cursor:pointer;text-decoration:none}
.btn.ghost{background:#fff;color:var(--accent)}
.btn.danger{background:#fff;color:var(--bad);border-color:#E3A7A2}
.btn.small{padding:5px 10px;font-size:13px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}

/* Главный элемент: поля, которые переносятся в кабинет Digiseller */
.handoff{background:var(--ink);color:#E7EDF1;border-radius:var(--radius-l);padding:22px 24px;margin-bottom:20px}
.handoff h2{color:#fff}
.handoff p{color:#AAB7C1;margin:0 0 14px;max-width:72ch}
.handoff .field{display:grid;grid-template-columns:230px 1fr auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid #2C3A47}
.handoff .field span{color:#AAB7C1;font-size:14px}
.handoff code{font-family:var(--mono);font-size:14px;color:#fff;background:#243240;padding:7px 10px;border-radius:var(--radius-s);overflow-x:auto;white-space:nowrap}
.handoff .btn{background:#fff;color:var(--ink);border-color:#fff}

/* Таблицы: цветная полоса слева показывает статус платежа */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-weight:600;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:10px;border-bottom:1px solid #E7ECEF;vertical-align:top}
tr.st td:first-child{border-left:4px solid var(--line)}
tr.st-paid td:first-child{border-left-color:var(--accent)}
tr.st-pending td:first-child{border-left-color:#D99A2B}
tr.st-failed td:first-child,tr.st-canceled td:first-child{border-left-color:var(--bad)}
tr.st-refunded td:first-child{border-left-color:#7A6BB8}
.badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:13px;white-space:nowrap;background:var(--neutral-soft)}
.badge.paid{background:var(--accent-soft);color:#0A4D40}
.badge.pending{background:var(--wait-soft);color:var(--wait)}
.badge.failed,.badge.canceled{background:var(--bad-soft);color:var(--bad)}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.tabs a{padding:6px 12px;border-radius:999px;text-decoration:none;color:var(--ink);background:#fff;border:1px solid var(--line);font-size:14px}
.tabs a.on{background:var(--ink);color:#fff;border-color:var(--ink)}
pre{font-family:var(--mono);font-size:12.5px;background:#F4F6F7;border:1px solid #E1E6E9;border-radius:var(--radius-s);padding:10px 12px;overflow:auto;max-height:360px;white-space:pre-wrap;word-break:break-all}
details summary{cursor:pointer}
dl.kv{display:grid;grid-template-columns:220px 1fr;gap:8px 16px;margin:0}
dl.kv dt{color:var(--muted)}
dl.kv dd{margin:0;word-break:break-all}
.steps{margin:0;padding-left:20px}
.steps li{margin:6px 0}
.login{max-width:380px;margin:12vh auto;padding:0 20px}
.pay-error{max-width:520px;margin:14vh auto;padding:0 20px;text-align:center}
.pay-error h1{font-size:24px}
@media (max-width:820px){
  .layout{grid-template-columns:1fr}
  .side{flex-direction:row;flex-wrap:wrap;padding:12px}
  .brand{width:100%;margin-bottom:8px}
  .side .spacer{display:none}
  main{padding:20px 16px}
  .grid2{grid-template-columns:1fr}
  .handoff .field{grid-template-columns:1fr}
  dl.kv{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.check .hint{display:block}