:root {
  --bg: #07060d; --ink: #f3f0ea; --dim: rgba(243,240,234,.62); --faint: rgba(243,240,234,.14);
  --orange: #ff7a1a; --lime: #c8f53c; --violet: #a855f7; --card: rgba(22,18,34,.72);
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; color: var(--ink); font: 400 14px/1.6 var(--mono); -webkit-font-smoothing: antialiased; }
.bg { position: fixed; inset: 0; z-index: -1; will-change: transform; background: radial-gradient(120% 80% at 50% 0%, #1d1638 0%, #0b0917 45%, var(--bg) 100%); }
a { color: inherit; }
.wrap { width: min(1180px, 100% - 32px); margin: 0 auto; }

header.top { display: flex; justify-content: space-between; align-items: center; padding: 22px 0; }
.logo { font: 700 18px 'Silkscreen', monospace; letter-spacing: .04em; text-decoration: none; }
.logo span { color: var(--orange); }
.top nav { display: flex; gap: 10px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: 40px; border: 1px solid rgba(243,240,234,.35); text-decoration: none; font-size: 11px; letter-spacing: .14em; background: none; color: inherit; font-family: inherit; transition: background .3s, color .3s, border-color .3s; }
.pill:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pill.solid { background: var(--orange); border-color: var(--orange); color: #120a02; font-weight: 600; }
.pill.solid:hover { background: #ff9a4d; }
.pill[aria-disabled="true"] { opacity: .45; pointer-events: none; }

.sale { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 10px 16px; text-align: center; font-size: 12px; letter-spacing: .12em;
  background: linear-gradient(90deg, #ff7a1a, #ffb020 35%, #ff3d81 70%, #a855f7); color: #140800; font-weight: 600; }
.sale[hidden] { display: none; }
.sale b { font: 700 13px 'Silkscreen', monospace; letter-spacing: .06em; }

.hero { padding: 64px 0 40px; }
.hero h1 { font-size: clamp(38px, 8vw, 104px); margin: 0 0 22px; }
.hero p { max-width: 620px; color: var(--dim); margin: 0 0 26px; font-size: 15px; }
.hero .row { display: flex; gap: 10px; flex-wrap: wrap; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; padding-bottom: 40px; }
.item { position: relative; display: flex; flex-direction: column; border: 1px solid var(--faint); border-radius: 18px; overflow: hidden; background: var(--card); text-decoration: none; transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s; }
.item:hover { transform: translateY(-4px); border-color: rgba(255,122,26,.55); }
.item .thumb { aspect-ratio: 16 / 10; background: #0d0b16 center / cover no-repeat; border-bottom: 1px solid var(--faint); }
.item .body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.item h3 { margin: 0; font: 700 17px 'Silkscreen', monospace; letter-spacing: .02em; }
.item p { margin: 0; color: var(--dim); font-size: 12.5px; flex: 1; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags span { font-size: 10px; letter-spacing: .1em; padding: 2px 9px; border: 1px solid var(--faint); border-radius: 20px; color: var(--dim); }
.price { display: flex; align-items: baseline; gap: 10px; }
.price s { color: var(--dim); font-size: 13px; }
.price .now { font: 700 16px 'Silkscreen', monospace; }
.free { font: 700 12px 'Silkscreen', monospace; letter-spacing: .06em; color: #0b0c05; background: var(--lime); padding: 3px 9px; border-radius: 20px; }
.badge { position: absolute; top: 12px; left: 12px; font-size: 10px; letter-spacing: .14em; padding: 4px 10px; border-radius: 20px; background: rgba(7,6,13,.8); border: 1px solid var(--faint); }

.bundle { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin: 0 0 56px; padding: 26px 28px; border-radius: 18px; border: 1px solid rgba(255,122,26,.4); background: linear-gradient(120deg, rgba(255,122,26,.16), rgba(168,85,247,.12)); }
.bundle h2 { margin: 0 0 6px; font-size: clamp(22px, 3vw, 34px); }
.bundle p { margin: 0; color: var(--dim); }

footer.foot { border-top: 1px solid var(--faint); padding: 26px 0 40px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 11px; letter-spacing: .12em; color: var(--dim); }
footer.foot a { text-decoration: none; }
footer.foot b { color: var(--orange); }
footer.foot .ig { color: var(--lime); }

/* asset page */
.crumbs { font-size: 11px; letter-spacing: .14em; color: var(--dim); margin: 18px 0 10px; }
.crumbs a { text-decoration: none; }
.detail h1 { font-size: clamp(30px, 5vw, 64px); margin: 0 0 12px; }
.detail .lead { color: var(--dim); max-width: 760px; margin: 0 0 18px; }
.buy { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; }
.stage { position: relative; border: 1px solid var(--faint); border-radius: 18px; overflow: hidden; background: #0d0b16; aspect-ratio: 16 / 9; }
.stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.stage .full { position: absolute; right: 12px; top: 12px; z-index: 1; background: rgba(7,6,13,.75); }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 28px 0 0; }
.tabs button { font: 11px var(--mono); letter-spacing: .12em; padding: 8px 14px; border-radius: 20px; border: 1px solid var(--faint); background: none; color: var(--dim); }
.tabs button[aria-selected="true"] { border-color: var(--orange); color: var(--ink); background: rgba(255,122,26,.14); }
.panel { position: relative; margin: 12px 0 56px; border: 1px solid var(--faint); border-radius: 14px; background: rgba(9,8,16,.9); }
.panel pre { margin: 0; padding: 22px; overflow: auto; max-height: 70vh; font: 12.5px/1.6 var(--mono); white-space: pre-wrap; word-break: break-word; }
.panel .copy { position: absolute; right: 12px; top: 12px; background: rgba(7,6,13,.85); }
.note { color: var(--dim); font-size: 12px; margin: -36px 0 56px; }

@media (max-width: 640px) {
  .grid { grid-template-columns: 1fr; }
  .top nav .pill:not(.solid) { display: none; }
  .stage { aspect-ratio: 3 / 4; }
}

/* ---------- checkout, order, admin ---------- */
.sale .clock { font: 700 12px 'Silkscreen', monospace; background: rgba(20,8,0,.18); padding: 2px 10px; border-radius: 20px; }
button.pill { cursor: pointer; }
button.pill:disabled { opacity: .55; cursor: wait; }
.pill.wide { width: 100%; justify-content: center; padding: 13px 18px; }
.pill.sm { padding: 5px 11px; font-size: 10px; }
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(4,3,8,.62); animation: fade .3s; }
@keyframes fade { from { opacity: 0; } }
.modal-box { position: relative; width: min(470px, 100%); display: grid; gap: 10px; padding: 28px; border: 1px solid rgba(255,255,255,.14); border-radius: 18px; background: linear-gradient(140deg, rgba(40,32,62,.96), rgba(12,10,20,.98)); box-shadow: 0 40px 120px rgba(0,0,0,.6); }
.modal-box.static { margin: 12vh auto; }
.modal-box h3 { margin: 0; font: 700 22px 'Silkscreen', monospace; }
.modal-box .x { position: absolute; right: 14px; top: 12px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--faint); background: none; color: inherit; cursor: pointer; }
.k { font-size: 10px; letter-spacing: .22em; color: var(--orange); margin: 0; }
.big { font: 700 34px 'Silkscreen', monospace; margin: 0; }
.field { display: grid; gap: 6px; font-size: 12px; color: var(--dim); }
.field input, .utr input { background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.2); border-radius: 30px; padding: 11px 16px; color: var(--ink); font: 14px var(--mono); outline: none; }
.field input:focus, .utr input:focus { border-color: var(--orange); }
.hint { color: var(--dim); font-size: 12px; margin: 0; }
.fine { color: var(--dim); font-size: 11px; margin: 4px 0 0; }
.err { color: #ff8a8a; font-size: 12px; margin: 0; min-height: 1em; }
.toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 60; max-width: calc(100% - 32px); padding: 11px 18px; border-radius: 30px; background: #f3f0ea; color: #07060d; font-size: 12px; box-shadow: 0 10px 40px rgba(0,0,0,.5); animation: fade .3s; }
.inside { margin: 26px 0 56px; padding: 20px 22px; border: 1px solid var(--faint); border-radius: 14px; background: rgba(9,8,16,.7); }
.inside h2 { margin: 0 0 10px; font: 700 14px 'Silkscreen', monospace; color: var(--lime); }
.inside ul { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 4px; }
.inside li { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; border-bottom: 1px dashed var(--faint); padding: 4px 0; }
.inside li span:last-child { color: var(--dim); text-align: right; }
.order { min-height: 50vh; padding-bottom: 30px; }
.state { font: 700 15px 'Silkscreen', monospace; margin: 10px 0 14px; }
.state.ok { color: var(--lime); } .state.wait { color: #ffd166; } .state.bad { color: #ff8a8a; }
.pay { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 28px; align-items: start; margin: 18px 0; }
.qr { background: #fff; border-radius: 16px; padding: 10px; }
.qr svg { display: block; width: 100%; height: auto; }
.steps ol { padding-left: 20px; display: grid; gap: 12px; font-size: 13px; }
.warn { color: #ffd166; font-size: 12.5px; }
.vpa { color: var(--lime); }
.utr { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.utr input { flex: 1; min-width: 200px; }
.mine h2 { font: 700 13px 'Silkscreen', monospace; color: var(--dim); }
.mine ul { list-style: none; padding: 0; display: grid; gap: 6px; margin: 0 0 50px; }
.mine li { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--dim); }
.legal h2 { font: 700 15px 'Silkscreen', monospace; color: var(--orange); margin: 28px 0 8px; }
.legal p, .legal li { color: var(--dim); max-width: 780px; }
.legal { padding-bottom: 40px; }
.admin { padding: 30px 0 60px; }
.adm-top { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 16px; }
.adm-top h1 { font-size: 40px; margin: 6px 0 0; }
.stats { display: flex; gap: 26px; } .stats b { display: block; font: 700 26px 'Silkscreen', monospace; } .stats span { font-size: 10px; letter-spacing: .2em; color: var(--dim); }
.table { display: grid; gap: 8px; margin-top: 14px; }
.row { display: grid; grid-template-columns: 1.1fr 1.1fr 1.4fr .7fr auto; gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--faint); border-radius: 12px; background: rgba(9,8,16,.75); font-size: 12px; }
.row > div { display: grid; gap: 2px; } .row .amt { font: 700 18px 'Silkscreen', monospace; color: var(--lime); }
.row .lbl { font-size: 9px; letter-spacing: .2em; color: var(--dim); }
.row .st { font: 700 11px 'Silkscreen', monospace; } .row.submitted { border-color: rgba(255,209,102,.6); } .row.paid .st { color: var(--lime); } .row.rejected { opacity: .55; }
.row .acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: end; }

/* ---------- deterrents: blank on print, blur when the window loses focus (snipping tools, app switch) ---------- */
@media print { body { display: none !important; } }
html.veiled .stage, html.veiled .thumb, html.veiled .inside { filter: blur(22px) saturate(.4); transition: filter .15s; }
.stage::after { content: 'PREVIEW · DILEEP-LABS.PAGES.DEV'; position: absolute; left: 14px; bottom: 12px; pointer-events: none; font-size: 10px; letter-spacing: .2em; color: rgba(255,255,255,.35); }
.stage, .thumb, .qr { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

@media (max-width: 760px) {
  .pay { grid-template-columns: 1fr; }
  .qr { max-width: 260px; }
  .row { grid-template-columns: 1fr 1fr; }
  .row .acts { grid-column: 1 / -1; justify-content: start; }
}