:root{
  --bg: #07110d;
  --bg-alt: #0d1713;
  --card: rgba(12, 22, 18, 0.9);
  --card-soft: rgba(18, 31, 26, 0.9);
  --border: rgba(162, 216, 181, 0.14);
  --text: #ebfff3;
  --muted: #9db6a7;
  --accent: #44f5a3;
  --accent-strong: #1edb82;
  --accent-ink: #062412;
  --danger: #ff6b7d;
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.24);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
   radial-gradient(circle at top, rgba(68, 245, 163, 0.12), transparent 30%),
   linear-gradient(180deg, #06100d 0%, #0b1512 100%);
  color:var(--text);
  font-family:ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;
}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:none}
.topbar{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 24px;
  background:rgba(7, 17, 13, 0.8);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.brand{
  font-weight:800;letter-spacing:.5px;font-size:18px;color:var(--text);
}
.topbar nav a{
  margin-left:18px;font-size:14px;color:var(--muted);
}
.topbar nav a:hover{color:var(--text)}
.wrap{max-width:1040px;margin:0 auto;padding:28px 20px 60px}
.admin-page .wrap{max-width:1280px;padding-top:22px}
.wrap.narrow{max-width:560px}
.hero{
  padding:18px 2px 8px;
}
.hero h1{
  font-size:clamp(2.1rem, 5vw, 3.3rem);
  line-height:1.1;
  margin:20px 0 12px;
  letter-spacing:-0.05em;
}
.hero p{color:var(--muted);margin:0 0 24px;max-width:620px;font-size:1.02rem}
.grid{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:880px){.grid{grid-template-columns:1.1fr 1fr}}
.order-grid.single-step{grid-template-columns:1fr}
.card{
  background:linear-gradient(180deg, rgba(15, 25, 21, 0.96), rgba(12, 20, 17, 0.96));
  border:1px solid var(--border);
  border-radius:18px;
  padding:22px;
  box-shadow:var(--shadow);
}
.card h2{margin-top:0;font-size:1.15rem}
.card.center{text-align:center}
.order-card{transition:opacity .25s ease, transform .25s ease}
.order-card.is-hidden{display:none}
.step-label{
  color:var(--accent);font-size:11px;font-weight:800;letter-spacing:1.2px;
  text-transform:uppercase;margin-bottom:8px;
}
.order-help{font-size:13px;margin:-4px 0 18px}
.cat{
  font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);
  margin:18px 0 10px;
}
.service{
  display:block;width:100%;text-align:left;
  background:linear-gradient(180deg, rgba(15,25,21,0.72), rgba(9,16,13,0.9));
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px 16px;
  margin-bottom:10px;
  color:var(--text);
  cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.service:hover{
  border-color:rgba(68,245,163,.8);
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(68,245,163,.08);
}
.service.active{
  border-color:var(--accent);
  background:linear-gradient(180deg, rgba(22, 45, 35, 0.96), rgba(11, 24, 18, 0.98));
  box-shadow:0 0 0 1px rgba(68,245,163,.3) inset;
}
.s-name{display:block;font-weight:700}
.s-meta{display:block;font-size:13px;color:var(--muted);margin-top:4px}
.s-desc{display:block;font-size:12px;color:var(--muted);margin-top:6px;line-height:1.5}
label{display:block;font-size:13px;color:var(--muted);margin:14px 0 6px}
.input{
  width:100%;background:rgba(8,15,12,0.9);border:1px solid var(--border);color:var(--text);
  border-radius:12px;padding:11px 12px;font-size:14px;transition:border-color .18s ease, box-shadow .18s ease;
}
.input:focus{
  outline:none;border-color:rgba(68,245,163,.82);
  box-shadow:0 0 0 3px rgba(68,245,163,.12);
}
textarea.input{resize:vertical}
.btn{
  display:inline-block;background:linear-gradient(135deg,var(--accent),var(--accent-strong));
  color:var(--accent-ink);border:0;border-radius:12px;padding:12px 18px;font-weight:800;cursor:pointer;margin-top:14px;
  box-shadow:0 12px 24px rgba(36, 214, 124, 0.28);
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.btn:hover:not(:disabled){transform:translateY(-1px)}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--border);box-shadow:none}
.btn.danger{background:var(--danger);color:#fff}
.pay-now{display:block;width:100%;margin-top:4px;text-align:center;font-size:16px}
.pay-help{margin:10px 0 18px}
.payment-support{margin-top:20px;padding:16px;text-align:left;background:rgba(68,245,163,.07);border:1px solid rgba(68,245,163,.24);border-radius:14px}
.payment-support strong{display:block;color:var(--text);font-size:14px}
.payment-support p{margin:6px 0 12px;color:var(--muted);font-size:13px;line-height:1.5}
.support-contacts{display:grid;gap:7px;font-size:13px;overflow-wrap:anywhere}
.support-contacts a{font-weight:700}
.linkbtn{background:none;border:0;color:var(--accent);cursor:pointer;font-weight:600}
.amount{
  margin-top:18px;padding-top:14px;border-top:1px dashed var(--border);font-size:1.45rem;font-weight:800;
}
.terms-check{display:flex;align-items:flex-start;gap:9px;margin:16px 0 0;color:var(--muted);font-size:13px;line-height:1.5}
.terms-check input{flex:0 0 auto;width:16px;height:16px;margin:1px 0 0;accent-color:var(--accent)}
.terms-check a{font-weight:700}
.muted{color:var(--muted)}
.small{font-size:12px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.break{word-break:break-all}
.alert{padding:10px 14px;border-radius:10px;margin:12px 0;font-size:14px}
.alert.error{background:rgba(255,95,109,.12);color:#ffb3b9;border:1px solid rgba(255,95,109,.35)}
.alert.ok{background:rgba(34,255,136,.1);color:#9dffcb;border:1px solid rgba(34,255,136,.3)}
.qrbox{background:#fff;border-radius:16px;padding:14px;width:max-content;margin:20px auto;min-width:180px;min-height:180px;display:flex;align-items:center;justify-content:center}
.qrbox canvas,.qrbox img{display:block}
.row{display:flex;gap:10px;align-items:center}
.row .input{flex:1}
.row .btn{margin-top:0}
.detail{margin-top:18px;display:grid;gap:8px}
.detail div{display:flex;justify-content:space-between;gap:16px;border-bottom:1px dashed var(--border);padding-bottom:6px;font-size:14px}
.detail span{color:var(--muted)}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--border);vertical-align:top;overflow-wrap:break-word}
th{color:var(--muted);font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
tbody tr{transition:background .16s ease}
tbody tr:hover{background:rgba(68,245,163,.045)}
.table-scroll{overflow-x:auto;border:1px solid var(--border);border-radius:14px;background:rgba(5,12,9,.24)}
.orders-table{table-layout:fixed;min-width:1120px}
.orders-table th,.orders-table td{padding-left:12px;padding-right:12px}
.orders-table .order-id-col{width:9%}
.orders-table .service-col{width:12%}
.orders-table .link-col{width:20%}
.orders-table .qty-col{width:5%}
.orders-table .amount-col{width:6%}
.orders-table .notes-col{width:9%}
.orders-table .status-col{width:12%}
.orders-table .txn-col{width:8%}
.orders-table .date-col{width:12%}
.orders-table .action-col{width:7%}
.linkcell,.notescell{min-width:0}
.link-preview{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.provider-order-id{display:block;color:var(--muted);font-size:11px;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.order-link{padding:0;text-align:left}
.datecell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.txid{max-width:110px;font-size:10px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tabs{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.tabs a{padding:8px 14px;border:1px solid var(--border);border-radius:999px;color:var(--text);font-size:13px;background:rgba(255,255,255,0.02)}
.tabs a.active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.badge{padding:2px 8px;border-radius:999px;font-size:11px;border:1px solid var(--border)}
.badge.sent{color:var(--accent);border-color:var(--accent)}
.badge.failed{color:var(--danger);border-color:var(--danger)}
form.inline{display:inline}

@media(max-width:700px){
  .admin-page .wrap{padding:16px 12px 40px}
  .admin-page .card{padding:16px}
  .admin-page .tabs{gap:6px}
  .admin-page .tabs a{padding:8px 11px}
}

/* ---- hardening release: tracking, admin tables and modal ---- */
.kv { display: grid; grid-template-columns: minmax(120px, 40%) 1fr; gap: .35rem .75rem; margin: 0 0 1rem; }
.kv dt { color: #6b7280; font-size: .85rem; }
.kv dd { margin: 0; word-break: break-word; }
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th, .table td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid #e5e7eb; }
.table th { color: #6b7280; font-weight: 600; }
.row-actions { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; }
.inline-form { display: inline-flex; gap: .4rem; align-items: center; margin: 0; }
.inline-form .filter-btn { margin-top: 0; padding: 10px 14px; }
.action-form { margin-top: .15rem; }
.manual-payment-wrap { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; min-width: 0; }
.action-note {
  margin: 0; padding: .55rem .7rem; border-radius: 10px; font-size: .78rem; color: var(--text);
  background: rgba(68, 245, 163, 0.08); border: 1px solid rgba(68, 245, 163, 0.22);
  line-height: 1.45;
}
.btn.primary { box-shadow: 0 10px 18px rgba(36, 214, 124, 0.24); }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--border); box-shadow: none; }
.btn.danger {
  background: linear-gradient(135deg, #ff6b7d, #d93f53);
  color: #fff;
  box-shadow: 0 10px 18px rgba(217, 63, 83, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.btn.danger:hover { filter: brightness(1.04); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.stack { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.stack label { margin-top: .4rem; font-size: .85rem; color: #6b7280; }
.linkbtn.danger { color: #b91c1c; }
.alert.success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.notice {
  margin: 0 0 18px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(68,245,163,.26);
  background: rgba(68,245,163,.08);
  color: var(--text);
  line-height: 1.55;
}
.notice-box strong { display: block; margin-bottom: 6px; font-size: .95rem; }
.notice-message { overflow-wrap: anywhere; white-space: normal; }
.notice-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(3, 9, 7, .78);
  backdrop-filter: blur(8px);
  animation: notice-fade-in .18s ease-out;
}
.notice-overlay .notice-box {
  position: relative;
  width: min(620px, 100%);
  max-height: min(80vh, 720px);
  overflow-y: auto;
  padding: 30px 32px;
  border: 1px solid rgba(68, 245, 163, .36);
  border-radius: 18px;
  background: linear-gradient(180deg, #14271e, #0c1913);
  color: var(--text);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255,255,255,.03) inset;
  line-height: 1.65;
  animation: notice-pop-in .2s ease-out;
}
.notice-overlay .notice-box strong {
  padding-right: 28px;
  color: var(--accent);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
}
.notice-close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(235, 255, 243, .18);
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  color: var(--text);
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
}
.notice-close:hover,
.notice-close:focus-visible {
  background: rgba(68, 245, 163, .18);
  border-color: var(--accent);
  outline: none;
}
html.notice-open { overflow: hidden; }
@keyframes notice-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes notice-pop-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 600px) {
  .notice-overlay { padding: 14px; }
  .notice-overlay .notice-box { padding: 28px 20px 22px; border-radius: 14px; max-height: 86vh; }
}
.prose h2 { margin-top: 1.4rem; font-size: 1.05rem; }
.prose p { color: #374151; }
.provider-box { border-top: 1px solid #e5e7eb; padding-top: 1rem; margin-top: 1rem; }
.modal { position: fixed; inset: 0; background: rgba(15, 23, 42, .55); display: flex;
         align-items: flex-start; justify-content: center; padding: 4vh 1rem; z-index: 50; overflow-y: auto; }
.modal.is-hidden { display: none; }
.modal-card { background: #101d17; color: var(--text); border: 1px solid var(--border); border-radius: 14px; padding: 1.4rem; max-width: 620px; width: 100%; position: relative; box-shadow: var(--shadow); }
.modal-card h3 { color: var(--accent); margin: 0 0 .7rem; }
.modal-close { position: absolute; top: .6rem; right: .8rem; border: 0; background: none; color: var(--text); font-size: 1.5rem; cursor: pointer; }
.modal-card .kv { margin: 0 0 1.2rem; }
.modal-card .kv dt { color: var(--muted); font-weight: 700; }
.modal-card .kv dd { color: var(--text); margin: 0; overflow-wrap: anywhere; }
.modal-card .kv dd a { color: var(--accent); text-decoration: underline; }
.service-form summary { list-style: none; cursor: pointer; display: inline-block; }
.service-form summary::-webkit-details-marker { display: none; }
.service-form h1 { margin-top: 1.2rem; }
.center { text-align: center; }
.narrow { max-width: 620px; }

/* sign-out is a POST form, styled to match the nav links */
.topbar .logout-form{display:inline;margin:0}
.topbar .logout-form .linkbtn{font:inherit;padding:0 4px}