/* DNH admin — the same design language as the marketing site, at working density. */
:root{
  --ink:#0a0a0a; --bg:#faf9f7; --paper:#fff; --line:#e6e5e2; --grey:#f2f0ec;
  --mut:#767676; --mut2:#a5a29c; --green:#146c53; --red:#a33b1c; --amber:#8a5a06;
  --r:14px; --font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --shadow:0 4px 20px rgba(0,0,0,.06);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font:15px/1.55 var(--font);background:var(--bg);color:#3d3d3d;display:flex;min-height:100vh;-webkit-font-smoothing:antialiased}
body.plain{display:grid;place-items:center;padding:24px}
a{color:inherit}
svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ── Sidebar ── */
.side{width:246px;flex:none;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;
      position:sticky;top:0;height:100vh;padding:20px 14px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;padding:4px 8px 22px}
.mark{width:32px;height:32px;border-radius:9px;background:var(--ink);display:grid;place-items:center;flex:none}
.mark svg{width:17px;height:17px;stroke:#fff;stroke-width:1.9}
.mark.big{width:44px;height:44px;border-radius:12px;margin-bottom:16px}
.mark.big svg{width:23px;height:23px}
.brand b{display:block;font-size:.92rem;color:var(--ink);letter-spacing:-.02em;line-height:1.2}
.brand small{font-size:.72rem;color:var(--mut2);font-family:var(--mono)}
.side nav{display:grid;gap:2px}
.side nav a{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;text-decoration:none;
            font-size:.88rem;font-weight:540;color:#4a4a4a}
.side nav a:hover{background:var(--grey)}
.side nav a.on{background:var(--ink);color:#fff}
.who{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px 10px 2px;border-top:1px solid var(--line)}
.who span{flex:1;font-size:.82rem;color:var(--ink);line-height:1.25}
.who small{display:block;font-size:.72rem;color:var(--mut2)}
.who a{color:var(--mut);padding:6px;border-radius:8px}
.who a:hover{background:var(--grey);color:var(--ink)}

/* ── Main ── */
main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:14px;padding:17px 30px;border-bottom:1px solid var(--line);background:#fff;
     position:sticky;top:0;z-index:5}
.top h1{font-size:1.05rem;letter-spacing:-.025em;color:var(--ink);font-weight:640}
.body{padding:24px 30px 70px;max-width:1280px}

.banner{background:#fff;border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:12px;
        padding:14px 18px;font-size:.87rem;margin-bottom:18px;color:var(--mut)}
.banner b{color:var(--ink)}
.banner.ok{border-left-color:var(--green)}
.banner.bad{border-left-color:var(--red);color:var(--red)}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:20px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:17px 19px}
.kpi span{font-size:.78rem;color:var(--mut);display:block;margin-bottom:7px}
.kpi b{font-size:1.75rem;letter-spacing:-.04em;color:var(--ink);font-weight:700;line-height:1.05;display:block}
.kpi small{font-size:.75rem;color:var(--mut2);display:block;margin-top:5px}
.kpi.warn b{color:var(--amber)}

.cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
@media(max-width:1000px){.cols{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:16px}
.ch{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.ch h2{font-size:.95rem;color:var(--ink);letter-spacing:-.02em;font-weight:620}
.ch .sub{font-size:.78rem;color:var(--mut);margin-left:auto}
.ch .lnk{margin-left:auto;font-size:.8rem;color:var(--mut);text-decoration:none;border-bottom:1px solid var(--line)}
.ch .lnk:hover{color:var(--ink)}
.empty{padding:34px 18px;text-align:center;color:var(--mut);font-size:.86rem}

table.t{width:100%;border-collapse:collapse;font-size:.86rem}
table.t th{text-align:left;font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--mut);
           font-weight:660;padding:11px 18px;border-bottom:1px solid var(--line);white-space:nowrap}
table.t td{padding:11px 18px;border-bottom:1px solid var(--line);vertical-align:top}
table.t tr:last-child td{border-bottom:none}
table.t td.r,table.t th.r{text-align:right;font-variant-numeric:tabular-nums}
table.t b{color:var(--ink);font-weight:620}
table.t small{display:block;font-size:.74rem;color:var(--mut2)}
table.t a{text-decoration:none}
table.t a:hover b{border-bottom:1px solid var(--ink)}

.tag{display:inline-block;font-size:.71rem;font-weight:660;border-radius:20px;padding:3px 9px;background:var(--grey);color:var(--mut)}
.tag.paid{background:#e4f1ec;color:var(--green)}
.tag.pending{background:#fbf0dd;color:var(--amber)}
.tag.failed,.tag.cancelled{background:#fdf2ee;color:var(--red)}

.subbar{display:flex;gap:4px;overflow-x:auto;margin-bottom:16px;padding-bottom:2px}
.subbar a{display:flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;text-decoration:none;
          font-size:.83rem;font-weight:560;color:var(--mut);white-space:nowrap;border:1px solid transparent}
.subbar a:hover{background:#fff;border-color:var(--line)}
.subbar a.on{background:var(--ink);color:#fff}
.subbar a i{font-style:normal;font-size:.72rem;opacity:.7;font-variant-numeric:tabular-nums}

.bars{display:flex;align-items:flex-end;justify-content:flex-start;gap:6px;height:170px;padding:18px}
.bar{flex:1;max-width:64px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:6px}
.bar i{display:block;width:100%;background:var(--green);border-radius:4px 4px 0 0;min-height:2px}
.bar span{font-size:.66rem;color:var(--mut2)}

.search{flex:1;min-width:180px}
.search input{width:100%;max-width:320px;border:1px solid var(--line);border-radius:9px;padding:8px 12px;font:inherit;font-size:.85rem}
form.inline{margin-left:auto;display:flex;gap:8px}
form.inline input{border:1px solid var(--line);border-radius:9px;padding:8px 12px;font:inherit;font-size:.85rem;min-width:200px}

.btn{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;border:1px solid var(--ink);
     border-radius:999px;padding:10px 20px;font:inherit;font-size:.86rem;font-weight:600;cursor:pointer;text-decoration:none}
.btn:hover{opacity:.88}
.btn.ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ink);opacity:1}
.btn.sm{padding:7px 14px;font-size:.79rem}

.form{padding:18px}
.form label{display:block;font-size:.78rem;font-weight:620;color:var(--ink);margin-bottom:13px}
.form label input:not([type=checkbox]):not([type=color]),.form label select,.form label textarea{
  display:block;width:100%;margin-top:6px;border:1px solid var(--line);border-radius:9px;padding:9px 11px;
  font:inherit;font-size:.86rem;font-weight:400;color:#3d3d3d;background:#fff}
.form label input[type=color]{width:44px;height:32px;margin-top:6px;padding:2px;border:1px solid var(--line);border-radius:8px;background:#fff}
.form label small{display:block;font-weight:400;font-size:.74rem;color:var(--mut);margin-top:5px;line-height:1.45}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form label.chk{display:flex;align-items:flex-start;gap:9px;font-weight:400;font-size:.83rem;color:#3d3d3d}
.form label.chk input{margin-top:3px}
.form .hint,.hint{font-size:.78rem;color:var(--mut);line-height:1.5}
.form code,code{font-family:var(--mono);font-size:.8rem;background:var(--grey);padding:2px 6px;border-radius:5px}

ul.tl{list-style:none;padding:16px 18px;display:grid;gap:13px}
ul.tl li{display:flex;gap:12px;align-items:flex-start}
ul.tl .dot{width:9px;height:9px;border-radius:50%;background:var(--mut2);flex:none;margin-top:6px}
ul.tl .dot.paid{background:var(--green)} ul.tl .dot.pending{background:var(--amber)}
ul.tl .dot.failed{background:var(--red)}
ul.tl b{font-size:.86rem;color:var(--ink);font-weight:600;display:block}
ul.tl small{font-size:.75rem;color:var(--mut)}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;padding:18px}
.fcard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;text-decoration:none;display:block;transition:transform .15s,box-shadow .2s}
.fcard:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.fcard .sw{display:block;width:34px;height:6px;border-radius:99px;margin-bottom:12px}
.fcard b{display:block;font-size:.93rem;color:var(--ink);letter-spacing:-.02em}
.fcard small{display:block;font-size:.75rem;color:var(--mut);margin-top:3px}
.fcard .m{display:flex;gap:16px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.fcard .m span{font-size:.7rem;color:var(--mut)}
.fcard .m b{font-size:.92rem}

/* ── Builder ── */
.builder{display:grid;grid-template-columns:330px 1fr;gap:18px;align-items:start}
@media(max-width:1100px){.builder{grid-template-columns:1fr}}
.side2{background:#fff;border:1px solid var(--line);border-radius:var(--r);position:sticky;top:78px;
       max-height:calc(100vh - 100px);overflow:auto}
@media(max-width:1100px){.side2{position:static;max-height:none}}
.side2 fieldset{border:none;border-bottom:1px solid var(--line);padding:15px 17px}
.side2 legend{font-size:.75rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--mut);padding-bottom:9px}
.side2 label{display:block;font-size:.77rem;font-weight:620;color:var(--ink);margin-bottom:11px}
.side2 label input:not([type=checkbox]):not([type=color]),.side2 label select{
  display:block;width:100%;margin-top:5px;border:1px solid var(--line);border-radius:8px;padding:8px 10px;
  font:inherit;font-size:.82rem;font-weight:400;background:#fff}
.side2 label input[type=color]{width:100%;height:34px;margin-top:5px;padding:2px;border:1px solid var(--line);border-radius:8px}
.side2 label small{display:block;font-weight:400;font-size:.72rem;color:var(--mut);margin-top:4px;line-height:1.45}
.side2 label.chk{display:flex;gap:9px;align-items:flex-start;font-weight:400;font-size:.81rem;margin-bottom:7px}
.side2 .two{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:9px}
.side2 .two input{width:100%;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:inherit;font-size:.82rem}
.side2 small.hint{display:block;margin:4px 0 10px}
.side2 .actions{padding:15px 17px;display:flex;gap:9px}
.stage{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.sh{display:flex;align-items:center;gap:11px;padding:12px 17px;border-bottom:1px solid var(--line);background:var(--grey)}
.sh b{font-size:.85rem;color:var(--ink)} .sh span{font-size:.78rem;color:var(--mut)}
.sh .btn{margin-left:auto}
.canvas{padding:28px;display:flex;justify-content:center;
        background:repeating-conic-gradient(#f4f2ee 0 25%,#faf9f7 0 50%) 0 0/18px 18px}
.code{border-top:1px solid var(--line)}
.code .tabs{padding:12px 17px 6px;font-size:.78rem;color:var(--mut);display:flex;align-items:center;gap:10px}
.code .tabs b{color:var(--ink);font-weight:620}
.code .tabs .btn{margin-left:auto}
.code pre{margin:0 17px 12px;padding:13px 15px;background:#0f1113;color:#d7dbe0;border-radius:10px;
          font-family:var(--mono);font-size:.75rem;line-height:1.65;overflow-x:auto;white-space:pre-wrap;word-break:break-word}
.code .qr{padding:0 17px 20px;display:flex;justify-content:center}
.code .qr svg{max-width:190px;height:auto}

/* ── Login ── */
.loginbox{background:#fff;border:1px solid var(--line);border-radius:16px;padding:34px;width:100%;max-width:390px;box-shadow:var(--shadow)}
.loginbox h1{font-size:1.4rem;letter-spacing:-.03em;color:var(--ink);margin-bottom:5px}
.loginbox .sub{font-size:.85rem;color:var(--mut);margin-bottom:22px}
.loginbox label{display:block;font-size:.78rem;font-weight:620;color:var(--ink);margin-bottom:14px}
.loginbox input{display:block;width:100%;margin-top:6px;border:1px solid var(--line);border-radius:10px;
                padding:11px 13px;font:inherit;font-size:.9rem;font-weight:400}
.loginbox input:focus{outline:none;border-color:var(--ink)}
.loginbox .btn{width:100%;justify-content:center;margin-top:6px}
.loginbox .err{background:#fdf2ee;color:var(--red);border-radius:9px;padding:10px 13px;font-size:.82rem;margin-bottom:16px}

@media(max-width:860px){
  body{display:block}
  .side{position:static;width:auto;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;
        border-right:none;border-bottom:1px solid var(--line);padding:12px 16px;gap:10px}
  .brand{padding:0;flex:1}
  .side nav{display:flex;flex-wrap:wrap;order:3;width:100%;gap:4px}
  .side nav a{padding:7px 11px;font-size:.82rem}
  .who{margin:0;border:none;padding:0;width:auto}
  .who span{display:none}
  .body{padding:18px 16px 60px}
  .top{padding:14px 16px}
}

/* ── Payments ── */
.pspgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px;padding:16px 18px}
.psp{border:1px solid var(--line);border-radius:13px;padding:16px;background:#fff;display:flex;flex-direction:column;gap:11px}
.psp.on{border-color:var(--green)}
.psp .pt{display:flex;align-items:center;gap:11px}
.psp .mk{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-weight:800;font-size:.82rem;flex:none;letter-spacing:-.02em}
.psp .nm{flex:1;min-width:0}
.psp .nm b{display:block;font-size:.95rem;color:var(--ink);letter-spacing:-.02em}
.psp .nm span{display:block;font-size:.73rem;color:var(--mut);line-height:1.35}
.psp .bl{font-size:.81rem;color:var(--mut);margin:0;line-height:1.5}
.mth{display:flex;flex-wrap:wrap;gap:5px}
.mth span{font-size:.68rem;font-weight:640;color:var(--mut);background:var(--grey);border-radius:5px;padding:3px 8px;white-space:nowrap}
.mth.big span{font-size:.78rem;padding:5px 11px;background:#e4f1ec;color:var(--green)}
.psp .keys{border-top:1px solid var(--line);padding-top:11px;display:grid;gap:7px}
.psp .kv{display:flex;align-items:center;gap:10px;font-size:.76rem;color:var(--mut)}
.psp .kv code{margin-left:auto;font-family:var(--mono);font-size:.73rem;color:var(--ink);background:var(--grey);padding:2px 7px;border-radius:5px}
.psp .dc{margin-top:2px}
.psp .lnk{background:none;border:none;color:var(--mut);font:inherit;font-size:.76rem;text-decoration:underline;cursor:pointer;padding:0}
.psp .lnk:hover{color:var(--red)}
.psp .cf{border-top:1px solid var(--line);padding-top:13px}
.psp .cf label{display:block;font-size:.76rem;font-weight:640;color:var(--ink);margin-bottom:11px}
.psp .cf label input,.psp .cf label textarea{display:block;width:100%;margin-top:5px;border:1px solid var(--line);
  border-radius:8px;padding:8px 10px;font:inherit;font-size:.82rem;font-weight:400;background:#fff}
.psp .cf label input:focus{outline:none;border-color:var(--ink)}
.psp .cf label small{display:block;font-weight:400;font-size:.71rem;color:var(--mut);margin-top:4px;line-height:1.45}
.psp .cf .hint{font-size:.74rem;margin-bottom:11px}
.psp .cf .hint a{color:var(--ink)}
.form textarea{display:block;width:100%;margin-top:6px;border:1px solid var(--line);border-radius:9px;
  padding:9px 11px;font:inherit;font-size:.86rem;font-weight:400;color:#3d3d3d;background:#fff;resize:vertical}
.psp .cf label em{font-style:normal;font-weight:500;color:var(--mut);font-size:.71rem}
.psp .cf label.wrong input{border-color:var(--red);background:#fffbfa}
.psp .cf label.wrong small b{color:var(--red);font-weight:600}
.chk.off span{color:var(--mut)}
.chk.off span em{font-style:normal;font-size:.71rem;color:var(--amber);font-weight:600;margin-left:5px}
.ch .inline{margin-left:auto}
.ch .inline select{border:1px solid var(--line);border-radius:8px;padding:6px 10px;font:inherit;font-size:.82rem;background:#fff}
.psp .oa{border-top:1px solid var(--line);padding-top:13px}
.psp .oa .btn.wide{width:100%;justify-content:center;border:none}
.psp .oa small{display:block;font-size:.72rem;color:var(--mut);margin-top:8px;line-height:1.5}
.psp .alt{margin-top:11px}
.psp .alt summary{font-size:.76rem;color:var(--mut);cursor:pointer;list-style:none;text-decoration:underline}
.psp .alt summary::-webkit-details-marker{display:none}
.psp .alt summary:hover{color:var(--ink)}
.psp .alt .cf{border-top:none;padding-top:11px}