:root {
    --bg0: #10131a;
    --bg1: #161b26;
    --bg2: #1c2333;
    --bg3: #222a3d;
    --bg4: #28304a;
    --ln: rgba(255, 255, 255, .06);
    --ln2: rgba(255, 255, 255, .10);
    --bl: #2196f3;
    --bl2: #42a5f5;
    --bl3: #1565c0;
    --bl4: #0d47a1;
    --cy: #00bcd4;
    --wh: #eef2fa;
    --mid: #8b9bbf;
    --dim: #4e5f80;
    --gr: #29c27a;
    --rd: #f44336;
    --gd: #ffb300;
    --pu: #ce93d8;
    --or: #ff7043;
    --r: 14px;
    --shadow: 0 8px 32px rgba(0, 0, 0, .5);
}

            .outer.digital {
                max-width: 1520px;
                margin: 0 auto;
                padding: 26px 28px 60px;
            }

            /* ══ HERO ══ */
            .hero.digital {
                background: var(--bg1);
                border: 1px solid var(--ln2);
                border-radius: 20px;
                overflow: hidden;
                margin-bottom: 22px;
                position: relative;
            }

            .hero-bg {
                position: absolute;
                inset: 0;
                background: linear-gradient(135deg,rgba(13,71,161,.5) 0%,rgba(255,112,67,.08) 50%,rgba(255,179,0,.06) 100%);
            }

            .hero-bg::before {
                content: '';
                position: absolute;
                inset: 0;
                background: radial-gradient(ellipse at 70% 50%,rgba(255,112,67,.08),transparent 65%);
            }

            .hero-grid {
                position: absolute;
                inset: 0;
                background-image: linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
                background-size: 32px 32px;
                mask-image: linear-gradient(180deg,transparent 0%,rgba(0,0,0,.4) 40%,rgba(0,0,0,.4) 60%,transparent 100%);
            }

            .hero-inner {
                position: relative;
                z-index: 1;
                padding: 26px 28px 22px;
                display: flex;
                align-items: flex-start;
                justify-content: space-between;
                gap: 20px;
                flex-wrap: wrap;
            }

            .hero-badge {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                padding: 4px 12px;
                border-radius: 20px;
                background: rgba(255,112,67,.12);
                border: 1px solid rgba(255,112,67,.3);
                color: var(--or);
                font-size: 11px;
                font-weight: 800;
                letter-spacing: .4px;
                text-transform: uppercase;
                margin-bottom: 12px;
            }

            .hero-title {
                font-family: 'Rajdhani',sans-serif;
                font-size: 26px;
                font-weight: 700;
                letter-spacing: .5px;
                line-height: 1.1;
                margin-bottom: 6px;
            }

            .hero-title em {
                color: var(--or);
                font-style: normal;
            }

            .hero-sub {
                font-size: 13px;
                color: var(--mid);
                font-weight: 600;
                max-width: 420px;
            }

            .hero-stats {
                display: flex;
                gap: 10px;
                flex-wrap: wrap;
            }

            .hstat {
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 14px 22px;
                background: rgba(255,255,255,.04);
                border: 1px solid var(--ln2);
                border-radius: 14px;
            }

            .hstat-n {
                font-family: 'Rajdhani',sans-serif;
                font-size: 24px;
                font-weight: 700;
                color: var(--wh);
            }

            .hstat-l {
                font-size: 11px;
                color: var(--dim);
                font-weight: 600;
                margin-top: 2px;
            }

            /* ══ LAYOUT 3-col: sidebar | main | info ══ */
            .layout {
                display: grid;
                grid-template-columns: 240px 1fr 280px;
                gap: 18px;
                align-items: start;
            }

            /* ══ SIDEBAR ══ */
            .sidebar {
                position: sticky;
                top: 86px;
                display: flex;
                flex-direction: column;
                gap: 12px;
            }

            .scard {
                background: var(--bg1);
                border: 1px solid var(--ln2);
                border-radius: 16px;
                overflow: hidden;
            }

            .scard-hdr {
                padding: 12px 15px;
                border-bottom: 1px solid var(--ln);
                display: flex;
                align-items: center;
                gap: 8px;
            }

            .scard-hdr svg {
                width: 14px;
                height: 14px;
                color: var(--or);
                flex-shrink: 0;
            }

            .scard-hdr-t {
                font-family: 'Rajdhani',sans-serif;
                font-size: 13px;
                font-weight: 700;
                letter-spacing: .4px;
            }

            .scard-body {
                padding: 6px;
            }

            /* nav links */
            .nav-links {
                display: flex;
                flex-direction: column;
                gap: 2px;
            }

            .nav-lnk {
                display: flex;
                align-items: center;
                gap: 9px;
                padding: 8px 11px;
                border-radius: 9px;
                font-size: 12.5px;
                font-weight: 700;
                color: var(--mid);
                transition: all .18s;
                cursor: pointer;
                border: 1px solid transparent;
            }

            .nav-lnk svg {
                width: 14px;
                height: 14px;
                flex-shrink: 0;
                color: var(--dim);
            }

            .nav-lnk:hover {
                background: var(--bg3);
                color: var(--wh);
                border-color: var(--ln2);
            }

            .nav-lnk.on {
                background: rgba(255,112,67,.08);
                border-color: rgba(255,112,67,.25);
                color: var(--or);
            }

            .nav-lnk.on svg {
                color: var(--or);
            }

            /* category list */
            .cat-list {
                display: flex;
                flex-direction: column;
                gap: 2px;
            }

            .cat-btn {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 8px 11px;
                border-radius: 9px;
                font-size: 12px;
                font-weight: 700;
                color: var(--mid);
                cursor: pointer;
                transition: all .18s;
                user-select: none;
                border: 1px solid transparent;
            }

            .cat-btn:hover {
                background: var(--bg3);
                color: var(--wh);
            }

            .cat-btn.on {
                background: rgba(255,112,67,.08);
                border-color: rgba(255,112,67,.25);
                color: var(--or);
            }

            .cat-cnt {
                font-size: 10px;
                font-weight: 700;
                padding: 1px 6px;
                border-radius: 5px;
                background: var(--bg2);
                border: 1px solid var(--ln);
                color: var(--dim);
                flex-shrink: 0;
            }

            .cat-btn.on .cat-cnt {
                background: rgba(255,112,67,.12);
                border-color: rgba(255,112,67,.22);
                color: var(--or);
            }

            /* ══ CONTENT BLOCK ══ */
            .content-block {
                background: var(--bg1);
                border: 1px solid var(--ln2);
                border-radius: 20px;
                overflow: hidden;
                position: relative;
            }

            .content-block::before {
                content: '';
                position: absolute;
                inset: 0;
                background-image: linear-gradient(rgba(255,112,67,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,112,67,.018) 1px,transparent 1px);
                background-size: 38px 38px;
                pointer-events: none;
                z-index: 0;
            }

            .content-block::after {
                content: '';
                position: absolute;
                inset: 0;
                background: radial-gradient(ellipse at 100% 0%,rgba(255,179,0,.04),transparent 55%);
                pointer-events: none;
                z-index: 0;
            }

            .ci {
                position: relative;
                z-index: 1;
            }

            /* topbar */
            .topbar {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 14px 18px;
                border-bottom: 1px solid var(--ln2);
                background: rgba(255,255,255,.015);
                flex-wrap: wrap;
                gap: 10px;
            }

            .topbar-l {
                display: flex;
                align-items: center;
                gap: 10px;
            }

            .tb-ttl {
                font-family: 'Rajdhani',sans-serif;
                font-size: 14px;
                font-weight: 700;
                letter-spacing: .4px;
            }

            .tb-cnt {
                font-size: 11.5px;
                color: var(--mid);
            }

            .tb-cnt strong {
                color: var(--wh);
            }

            .topbar-r {
                display: flex;
                align-items: center;
                gap: 8px;
            }

            .srch-wrap {
                position: relative;
            }

            .srch-wrap svg {
                position: absolute;
                left: 10px;
                top: 50%;
                transform: translateY(-50%);
                width: 13px;
                height: 13px;
                color: var(--dim);
            }

            .srch-inp {
                padding: 7px 12px 7px 30px;
                background: var(--bg2);
                border: 1px solid var(--ln2);
                border-radius: 9px;
                color: var(--wh);
                font-family: 'Nunito',sans-serif;
                font-size: 12px;
                font-weight: 600;
                outline: none;
                transition: border-color .15s;
                width: 200px;
            }

            .srch-inp::placeholder {
                color: var(--dim);
            }

            .srch-inp:focus {
                border-color: rgba(255,112,67,.4);
            }

            .sort-wrap {
                position: relative;
            }

            .sort-wrap::after {
                content: '';
                position: absolute;
                right: 10px;
                top: 50%;
                transform: translateY(-50%);
                width: 0;
                height: 0;
                border-left: 4px solid transparent;
                border-right: 4px solid transparent;
                border-top: 5px solid var(--mid);
                pointer-events: none;
            }

            .sort-sel {
                padding: 7px 28px 7px 10px;
                background: var(--bg2);
                border: 1px solid var(--ln2);
                border-radius: 9px;
                color: var(--mid);
                font-family: 'Nunito',sans-serif;
                font-size: 12px;
                font-weight: 600;
                appearance: none;
                cursor: pointer;
                outline: none;
                transition: border-color .15s;
            }

            .sort-sel:hover,.sort-sel:focus {
                border-color: rgba(255,112,67,.4);
                color: var(--wh);
            }

            .sort-sel option {
                background: var(--bg2);
            }

            /* grid */
            .grid-area {
                padding: 14px;
            }

            .items-grid {
                display: grid;
                grid-template-columns: repeat(3,1fr);
                gap: 12px;
            }

            /* ══ ITEM CARD ══ */
            .item-card {
                background: var(--bg2);
                border: 1px solid var(--ln2);
                border-radius: 15px;
                overflow: hidden;
                transition: all .22s;
                position: relative;
                display: flex;
                flex-direction: column;
                cursor: pointer;
            }

            .item-card:hover {
                border-color: rgba(255,112,67,.35);
                transform: translateY(-3px);
                box-shadow: 0 10px 36px rgba(0,0,0,.55);
            }

            /* card preview */
            .ic-prev {
                height: 120px;
                position: relative;
                overflow: hidden;
                flex-shrink: 0;
            }

            .ic-prev-bg {
                position: absolute;
                inset: 0;
            }

            /* category gradients */
            .bg-srv {
                background: linear-gradient(135deg,rgba(33,150,243,.4),rgba(13,50,130,.5)),linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px) 0 0/20px 20px,linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px) 0 0/20px 20px;
            }

            .bg-psd {
                background: linear-gradient(135deg,rgba(206,147,216,.35),rgba(100,20,120,.4)),linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px) 0 0/20px 20px,linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px) 0 0/20px 20px;
            }

            .bg-plg {
                background: linear-gradient(135deg,rgba(41,194,122,.35),rgba(10,80,50,.4)),linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px) 0 0/20px 20px,linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px) 0 0/20px 20px;
            }

            .bg-tpl {
                background: linear-gradient(135deg,rgba(255,112,67,.35),rgba(130,40,10,.4)),linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px) 0 0/20px 20px,linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px) 0 0/20px 20px;
            }

            .bg-mod {
                background: linear-gradient(135deg,rgba(0,188,212,.35),rgba(0,70,100,.4)),linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px) 0 0/20px 20px,linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px) 0 0/20px 20px;
            }

            .bg-cpn {
                background: linear-gradient(135deg,rgba(255,179,0,.35),rgba(100,60,0,.4)),linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px) 0 0/20px 20px,linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px) 0 0/20px 20px;
            }

            .bg-wpn {
                background: linear-gradient(135deg,rgba(244,67,54,.3),rgba(100,10,10,.4)),linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px) 0 0/20px 20px,linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px) 0 0/20px 20px;
            }

            .bg-scr {
                background: linear-gradient(135deg,rgba(103,58,183,.4),rgba(40,10,90,.4)),linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px) 0 0/20px 20px,linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px) 0 0/20px 20px;
            }

            .ic-prev-ico {
                position: absolute;
                inset: 0;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .ic-prev-ico svg {
                width: 46px;
                height: 46px;
                opacity: .18;
            }

            .ic-cat-badge {
                position: absolute;
                top: 8px;
                left: 8px;
                padding: 2px 8px;
                border-radius: 6px;
                font-size: 9.5px;
                font-weight: 800;
                letter-spacing: .3px;
                backdrop-filter: blur(4px);
            }

            .bc-srv {
                background: rgba(33,150,243,.18);
                border: 1px solid rgba(33,150,243,.3);
                color: var(--bl2);
            }

            .bc-psd {
                background: rgba(206,147,216,.18);
                border: 1px solid rgba(206,147,216,.3);
                color: var(--pu);
            }

            .bc-plg {
                background: rgba(41,194,122,.15);
                border: 1px solid rgba(41,194,122,.3);
                color: var(--gr);
            }

            .bc-tpl {
                background: rgba(255,112,67,.15);
                border: 1px solid rgba(255,112,67,.3);
                color: var(--or);
            }

            .bc-mod {
                background: rgba(0,188,212,.12);
                border: 1px solid rgba(0,188,212,.25);
                color: var(--cy);
            }

            .bc-cpn {
                background: rgba(255,179,0,.15);
                border: 1px solid rgba(255,179,0,.3);
                color: var(--gd);
            }

            .bc-wpn {
                background: rgba(244,67,54,.15);
                border: 1px solid rgba(244,67,54,.3);
                color: var(--rd);
            }

            .bc-scr {
                background: rgba(103,58,183,.18);
                border: 1px solid rgba(149,117,205,.3);
                color: #b39ddb;
            }

            .ic-stock {
                position: absolute;
                bottom: 8px;
                right: 8px;
                background: rgba(16,19,26,.88);
                border: 1px solid var(--ln2);
                border-radius: 7px;
                padding: 2px 8px;
                font-size: 10.5px;
                font-weight: 700;
                color: var(--mid);
                backdrop-filter: blur(6px);
            }

            .ic-stock.sold {
                color: var(--rd);
                border-color: rgba(244,67,54,.25);
            }

            .ic-stock.few {
                color: var(--gd);
                border-color: rgba(255,179,0,.25);
            }

            .ic-stock.good {
                color: var(--gr);
                border-color: rgba(41,194,122,.25);
            }

            /* card body */
            .ic-body {
                padding: 11px 13px 13px;
                flex: 1;
                display: flex;
                flex-direction: column;
            }

            .ic-name {
                font-size: 12.5px;
                font-weight: 700;
                color: var(--wh);
                margin-bottom: 5px;
                line-height: 1.35;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                min-height: 34px;
            }

            .ic-seller {
                display: flex;
                align-items: center;
                gap: 5px;
                margin-bottom: 8px;
            }

            .ic-seller-ava {
                width: 16px;
                height: 16px;
                border-radius: 5px;
                background: linear-gradient(135deg,var(--bl3),var(--cy));
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 8px;
                font-weight: 800;
                color: #fff;
                flex-shrink: 0;
            }

            .ic-seller-name {
                font-size: 11px;
                color: var(--dim);
                font-weight: 600;
            }

            .ic-seller-ver {
                width: 12px;
                height: 12px;
                color: var(--bl2);
                flex-shrink: 0;
            }

            .ic-bottom {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: auto;
            }

            .ic-price {
                font-family: 'Rajdhani',sans-serif;
                font-size: 18px;
                font-weight: 700;
                color: var(--gd);
            }

            .ic-price span {
                font-size: 11px;
                color: var(--dim);
                font-weight: 600;
                margin-left: 3px;
            }

            .ic-buy {
                padding: 6px 14px;
                background: linear-gradient(135deg,var(--bl3),var(--bl));
                border: none;
                border-radius: 8px;
                color: #fff;
                font-family: 'Rajdhani',sans-serif;
                font-size: 12px;
                font-weight: 700;
                cursor: pointer;
                transition: all .18s;
                position: relative;
                overflow: hidden;
            }

            .ic-buy::before {
                content: '';
                position: absolute;
                inset: 0;
                background: linear-gradient(135deg,var(--bl),var(--cy));
                opacity: 0;
                transition: opacity .18s;
            }

            .ic-buy:hover::before {
                opacity: 1;
            }

            .ic-buy:hover {
                transform: translateY(-1px);
                box-shadow: 0 4px 14px rgba(33,150,243,.35);
            }

            .ic-buy span {
                position: relative;
                z-index: 1;
            }

            .ic-buy:disabled {
                opacity: .4;
                cursor: not-allowed;
                transform: none;
                box-shadow: none;
            }

            /* ══ PAGINATION ══ */
            .pag-bar {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 13px 18px;
                border-top: 1px solid var(--ln2);
                flex-wrap: wrap;
                gap: 10px;
            }

            .pag-info {
                font-size: 11.5px;
                color: var(--dim);
            }

            .pag-info strong {
                color: var(--mid);
            }

            .pag-btns {
                display: flex;
                align-items: center;
                gap: 4px;
            }

            .pg {
                width: 32px;
                height: 32px;
                border-radius: 8px;
                background: var(--bg2);
                border: 1px solid var(--ln2);
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                color: var(--mid);
                font-family: 'Rajdhani',sans-serif;
                font-size: 13px;
                font-weight: 700;
                transition: all .18s;
                user-select: none;
            }

            .pg:hover {
                border-color: rgba(255,112,67,.4);
                color: var(--wh);
                background: var(--bg3);
            }

            .pg.on {
                background: rgba(255,112,67,.12);
                border-color: var(--or);
                color: var(--or);
            }

            .pg.off {
                opacity: .3;
                pointer-events: none;
            }

            .pg svg {
                width: 13px;
                height: 13px;
            }

            .pg-dots {
                width: 32px;
                height: 32px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: var(--dim);
                font-size: 13px;
            }

            /* ══ RIGHT INFO PANEL ══ */
            .info-panel {
                position: sticky;
                top: 86px;
                display: flex;
                flex-direction: column;
                gap: 12px;
            }

            .ipcard {
                background: var(--bg1);
                border: 1px solid var(--ln2);
                border-radius: 16px;
                overflow: hidden;
            }

            .ipcard-hdr {
                padding: 12px 15px;
                border-bottom: 1px solid var(--ln);
                display: flex;
                align-items: center;
                gap: 8px;
            }

            .ipcard-hdr svg {
                width: 14px;
                height: 14px;
                color: var(--or);
                flex-shrink: 0;
            }

            .ipcard-hdr-t {
                font-family: 'Rajdhani',sans-serif;
                font-size: 13px;
                font-weight: 700;
                letter-spacing: .4px;
            }

            .ipcard-body {
                padding: 14px 15px;
            }

            /* description */
            .desc-text {
                font-size: 12px;
                color: var(--mid);
                line-height: 1.7;
                margin-bottom: 12px;
            }

            .desc-text strong {
                color: var(--wh);
            }

            .desc-text a {
                color: var(--bl2);
                text-decoration: underline;
            }

            /* how-to steps */
            .how-steps {
                display: flex;
                flex-direction: column;
                gap: 9px;
            }

            .how-step {
                display: flex;
                gap: 10px;
                align-items: flex-start;
            }

            .how-num {
                width: 22px;
                height: 22px;
                border-radius: 7px;
                background: rgba(255,112,67,.12);
                border: 1px solid rgba(255,112,67,.22);
                color: var(--or);
                font-size: 11px;
                font-weight: 800;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
            }

            .how-text {
                font-size: 11.5px;
                color: var(--mid);
                line-height: 1.55;
                padding-top: 2px;
            }

            .how-text strong {
                color: var(--wh);
            }

            /* guarantee block */
            .guarantee-list {
                display: flex;
                flex-direction: column;
                gap: 7px;
            }

            .guarantee-item {
                display: flex;
                align-items: center;
                gap: 9px;
                padding: 7px 10px;
                background: var(--bg2);
                border: 1px solid var(--ln);
                border-radius: 9px;
            }

            .gi-ico {
                width: 22px;
                height: 22px;
                border-radius: 6px;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
            }

            .gi-ico svg {
                width: 11px;
                height: 11px;
            }

            .gig {
                background: rgba(41,194,122,.1);
                border: 1px solid rgba(41,194,122,.2);
            }

            .gig svg {
                color: var(--gr);
            }

            .gib {
                background: rgba(33,150,243,.08);
                border: 1px solid rgba(33,150,243,.15);
            }

            .gib svg {
                color: var(--bl2);
            }

            .gio {
                background: rgba(255,112,67,.08);
                border: 1px solid rgba(255,112,67,.15);
            }

            .gio svg {
                color: var(--or);
            }

            .gi-text {
                font-size: 11.5px;
                color: var(--wh);
                font-weight: 600;
            }

            /* seller info */
            .seller-card {
                display: flex;
                align-items: center;
                gap: 11px;
                padding: 13px;
                background: var(--bg2);
                border: 1px solid var(--ln2);
                border-radius: 12px;
                margin-bottom: 10px;
                cursor: pointer;
                transition: all .18s;
            }

            .seller-card:hover {
                border-color: rgba(255,112,67,.3);
            }

            .seller-ava {
                width: 40px;
                height: 40px;
                border-radius: 11px;
                background: linear-gradient(135deg,var(--bl3),var(--cy));
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: 800;
                font-size: 14px;
                color: #fff;
                border: 2px solid var(--bl);
                flex-shrink: 0;
            }

            .seller-nm {
                font-size: 13px;
                font-weight: 700;
                color: var(--wh);
            }

            .seller-sub {
                font-size: 11px;
                color: var(--dim);
                margin-top: 2px;
            }

            .seller-badge {
                display: inline-flex;
                align-items: center;
                gap: 4px;
                padding: 2px 7px;
                border-radius: 6px;
                background: rgba(41,194,122,.1);
                border: 1px solid rgba(41,194,122,.2);
                color: var(--gr);
                font-size: 9.5px;
                font-weight: 800;
                margin-top: 4px;
            }

            .seller-badge svg {
                width: 9px;
                height: 9px;
            }

            .seller-stats {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 6px;
            }

            .ss-item {
                padding: 8px 10px;
                background: var(--bg2);
                border: 1px solid var(--ln);
                border-radius: 9px;
                text-align: center;
            }

            .ss-n {
                font-family: 'Rajdhani',sans-serif;
                font-size: 16px;
                font-weight: 700;
                color: var(--wh);
            }

            .ss-l {
                font-size: 10px;
                color: var(--dim);
                font-weight: 600;
                margin-top: 1px;
            }

            /* ══ ADD MODAL ══ */
            .overlay {
                position: fixed;
                inset: 0;
                background: rgba(0,0,0,.75);
                z-index: 1000;
                display: none;
                align-items: flex-start;
                justify-content: center;
                padding: 20px;
                backdrop-filter: blur(5px);
                overflow-y: auto;
            }

            .overlay.open {
                display: flex;
            }

            @keyframes mop {
                from {
                    opacity: 0;
                    transform: scale(.96) translateY(10px);
                }

                to {
                    opacity: 1;
                    transform: scale(1) translateY(0);
                }
            }

            .mhdr {
                padding: 18px 20px;
                display: flex;
                align-items: center;
                gap: 12px;
                border-bottom: 1px solid var(--ln);
                background: linear-gradient(135deg,rgba(255,112,67,.08),rgba(255,179,0,.04));
            }

            .mhdr-ico {
                width: 40px;
                height: 40px;
                border-radius: 12px;
                background: rgba(255,112,67,.12);
                border: 1px solid rgba(255,112,67,.25);
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
            }

            .mhdr-ico svg {
                width: 18px;
                height: 18px;
                color: var(--or);
            }

            .mhdr-t {
                font-family: 'Rajdhani',sans-serif;
                font-size: 17px;
                font-weight: 700;
                flex: 1;
            }

            .mhdr-sub {
                font-size: 11.5px;
                color: var(--dim);
                margin-top: 2px;
            }

            .mclose {
                width: 32px;
                height: 32px;
                border-radius: 8px;
                background: transparent;
                border: 1px solid var(--ln);
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                color: var(--dim);
                transition: all .15s;
                flex-shrink: 0;
            }

            .mclose:hover {
                border-color: var(--rd);
                color: var(--rd);
            }

            .mclose svg {
                width: 14px;
                height: 14px;
            }

            .mbody {
                padding: 22px;
            }

            .form-notice {
                display: flex;
                align-items: flex-start;
                gap: 10px;
                padding: 11px 14px;
                background: rgba(33,150,243,.06);
                border: 1px solid rgba(33,150,243,.18);
                border-radius: 11px;
                margin-bottom: 20px;
            }

            .form-notice svg {
                width: 14px;
                height: 14px;
                color: var(--bl2);
                flex-shrink: 0;
                margin-top: 1px;
            }

            .form-notice-text {
                font-size: 12px;
                color: var(--mid);
                line-height: 1.55;
            }

            .form-notice-text strong {
                color: var(--bl2);
            }

            .form-grid {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 14px;
            }

            .form-grid.full {
                grid-template-columns: 1fr;
            }

            .fg {
                display: flex;
                flex-direction: column;
                gap: 5px;
            }

            .fg.span2 {
                grid-column: 1/-1;
            }

            .fl {
                font-size: 11px;
                font-weight: 800;
                color: var(--dim);
                letter-spacing: .4px;
                text-transform: uppercase;
            }

            .fl span {
                color: var(--rd);
            }

            .fi {
                width: 100%;
                padding: 10px 13px;
                background: var(--bg2);
                border: 1px solid var(--ln2);
                border-radius: 10px;
                color: var(--wh);
                font-family: 'Nunito',sans-serif;
                font-size: 13px;
                font-weight: 600;
                outline: none;
                transition: border-color .18s;
            }

            .fi::placeholder {
                color: var(--dim);
            }

            .fi:focus {
                border-color: rgba(255,112,67,.5);
                box-shadow: 0 0 0 3px rgba(255,112,67,.08);
            }

            .fi:focus-within {
                border-color: rgba(255,112,67,.5);
            }

            textarea.fi {
                resize: vertical;
                min-height: 90px;
                line-height: 1.5;
            }

            select.fi {
                appearance: none;
                cursor: pointer;
            }

            .sel-wrap {
                position: relative;
            }

            .sel-wrap::after {
                content: '';
                position: absolute;
                right: 13px;
                top: 50%;
                transform: translateY(-50%);
                width: 0;
                height: 0;
                border-left: 4px solid transparent;
                border-right: 4px solid transparent;
                border-top: 5px solid var(--mid);
                pointer-events: none;
            }

            .price-wrap {
                position: relative;
            }

            .price-wrap::after {
                content: '₽';
                position: absolute;
                right: 13px;
                top: 50%;
                transform: translateY(-50%);
                font-size: 13px;
                font-weight: 700;
                color: var(--gd);
                pointer-events: none;
            }

            .price-wrap .fi {
                padding-right: 28px;
            }

            /* file drop */
            .file-drop {
                border: 2px dashed rgba(255,112,67,.25);
                border-radius: 12px;
                padding: 22px;
                text-align: center;
                cursor: pointer;
                transition: all .2s;
                background: rgba(255,112,67,.02);
            }

            .file-drop:hover,.file-drop.over {
                border-color: rgba(255,112,67,.5);
                background: rgba(255,112,67,.05);
            }

            .file-drop svg {
                width: 28px;
                height: 28px;
                color: var(--dim);
                margin-bottom: 8px;
            }

            .file-drop-t {
                font-size: 12.5px;
                color: var(--mid);
                font-weight: 600;
            }

            .file-drop-s {
                font-size: 11px;
                color: var(--dim);
                margin-top: 3px;
            }

            .file-list {
                margin-top: 10px;
                display: flex;
                flex-wrap: wrap;
                gap: 6px;
            }

            .file-chip {
                display: flex;
                align-items: center;
                gap: 6px;
                padding: 4px 10px;
                background: var(--bg2);
                border: 1px solid rgba(255,112,67,.2);
                border-radius: 7px;
                font-size: 11.5px;
                color: var(--wh);
                font-weight: 600;
            }

            .file-chip svg {
                width: 10px;
                height: 10px;
                color: var(--dim);
                cursor: pointer;
                transition: color .15s;
            }

            .file-chip svg:hover {
                color: var(--rd);
            }

            #fileInput {
                display: none;
            }

            /* tags */
            .tags-wrap {
                display: flex;
                flex-wrap: wrap;
                gap: 6px;
            }

            .tag-chip {
                padding: 5px 11px;
                border-radius: 7px;
                font-size: 11.5px;
                font-weight: 700;
                cursor: pointer;
                transition: all .15s;
                user-select: none;
                background: var(--bg2);
                border: 1px solid var(--ln2);
                color: var(--dim);
            }

            .tag-chip:hover {
                border-color: rgba(255,112,67,.3);
                color: var(--wh);
            }

            .tag-chip.on {
                background: rgba(255,112,67,.1);
                border-color: rgba(255,112,67,.35);
                color: var(--or);
            }

            /* form footer */
            .mfooter {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 16px 20px;
                border-top: 1px solid var(--ln);
                background: rgba(255,255,255,.01);
                flex-wrap: wrap;
                gap: 12px;
            }

            .mfooter-info {
                font-size: 11.5px;
                color: var(--dim);
            }

            .mfooter-info strong {
                color: var(--mid);
            }

            .mfooter-btns {
                display: flex;
                gap: 10px;
            }

            .btn-cancel {
                padding: 10px 20px;
                border-radius: 11px;
                background: var(--bg2);
                border: 1px solid var(--ln2);
                color: var(--mid);
                font-family: 'Rajdhani',sans-serif;
                font-size: 14px;
                font-weight: 700;
                cursor: pointer;
                transition: all .18s;
            }

            .btn-cancel:hover {
                border-color: var(--rd);
                color: var(--rd);
            }

            .btn-submit {
                padding: 10px 24px;
                border-radius: 11px;
                background: linear-gradient(135deg,#1a8f5a,var(--gr));
                border: none;
                color: #fff;
                font-family: 'Rajdhani',sans-serif;
                font-size: 14px;
                font-weight: 700;
                cursor: pointer;
                transition: all .2s;
                display: flex;
                align-items: center;
                gap: 7px;
            }

            .btn-submit:hover {
                transform: translateY(-1px);
                box-shadow: 0 5px 18px rgba(41,194,122,.35);
            }

            .btn-submit svg {
                width: 14px;
                height: 14px;
            }

            /* ══ ITEM DETAIL MODAL ══ */
            .detail-overlay {
                position: fixed;
                inset: 0;
                background: rgba(0,0,0,.75);
                z-index: 1000;
                display: none;
                align-items: flex-start;
                justify-content: center;
                padding: 20px;
                backdrop-filter: blur(5px);
                overflow-y: auto;
            }

            .detail-overlay.open {
                display: flex;
            }

            .detail-modal {
                background: var(--bg1);
                border: 1px solid var(--ln2);
                border-radius: 22px;
                width: 100%;
                max-width: 760px;
                overflow: hidden;
                animation: mop .22s ease;
                margin: auto;
            }

            .dm-hdr {
                padding: 18px 20px;
                display: flex;
                align-items: center;
                gap: 12px;
                border-bottom: 1px solid var(--ln);
            }

            .dm-hdr-ico {
                width: 40px;
                height: 40px;
                border-radius: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
            }

            .dm-hdr-ico svg {
                width: 18px;
                height: 18px;
            }

            .dm-hdr-t {
                font-family: 'Rajdhani',sans-serif;
                font-size: 17px;
                font-weight: 700;
                flex: 1;
                line-height: 1.3;
            }

            .dm-body {
                display: grid;
                grid-template-columns: 1fr 260px;
            }

            .dm-left {
                padding: 20px;
                border-right: 1px solid var(--ln);
            }

            .dm-right {
                padding: 20px;
                display: flex;
                flex-direction: column;
                gap: 12px;
            }

            .dm-prev {
height: 300px;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    margin-bottom: 16px;
            }

            .dm-prev-ico {
                position: absolute;
                inset: 0;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .dm-prev-ico svg {
                width: 80px;
                height: 80px;
                opacity: .18;
            }

            .dm-desc-title {
                font-family: 'Rajdhani',sans-serif;
                font-size: 13px;
                font-weight: 700;
                letter-spacing: .4px;
                color: var(--mid);
                text-transform: uppercase;
                margin-bottom: 8px;
            }

            .dm-desc-text {
                font-size: 12.5px;
                color: var(--mid);
                line-height: 1.7;
                margin-bottom: 14px;
            }

            .dm-features {
                display: flex;
                flex-direction: column;
                gap: 6px;
            }

            .dm-feat {
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 7px 10px;
                background: var(--bg2);
                border: 1px solid var(--ln);
                border-radius: 9px;
            }

            .dm-feat-ico {
                width: 20px;
                height: 20px;
                border-radius: 5px;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
            }

            .dm-feat-ico svg {
                width: 10px;
                height: 10px;
            }

            .dfi-gr {
                background: rgba(41,194,122,.1);
                border: 1px solid rgba(41,194,122,.2);
            }

            .dfi-gr svg {
                color: var(--gr);
            }

            .dfi-bl {
                background: rgba(33,150,243,.08);
                border: 1px solid rgba(33,150,243,.15);
            }

            .dfi-bl svg {
                color: var(--bl2);
            }

            .dfi-or {
                background: rgba(255,112,67,.08);
                border: 1px solid rgba(255,112,67,.15);
            }

            .dfi-or svg {
                color: var(--or);
            }

            .dm-feat-t {
                font-size: 11.5px;
                color: var(--wh);
                font-weight: 600;
            }

            .dm-price-box {
                padding: 14px;
                background: rgba(255,179,0,.06);
                border: 1px solid rgba(255,179,0,.18);
                border-radius: 12px;
                text-align: center;
            }

            .dm-price {
                font-family: 'Rajdhani',sans-serif;
                font-size: 32px;
                font-weight: 700;
                color: var(--gd);
            }

            .dm-price-sub {
                font-size: 11.5px;
                color: var(--dim);
                margin-top: 3px;
            }

            .dm-buy-btn {
                width: 100%;
                padding: 13px 16px;
                border-radius: 12px;
                background: linear-gradient(135deg,var(--bl3),var(--bl));
                border: none;
                color: #fff;
                font-family: 'Rajdhani',sans-serif;
                font-size: 16px;
                font-weight: 700;
                letter-spacing: .5px;
                cursor: pointer;
                transition: all .2s;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                position: relative;
                overflow: hidden;
            }

            .dm-buy-btn::before {
                content: '';
                position: absolute;
                inset: 0;
                background: linear-gradient(135deg,var(--bl),var(--cy));
                opacity: 0;
                transition: opacity .2s;
            }

            .dm-buy-btn:hover::before {
                opacity: 1;
            }

            .dm-buy-btn:hover {
                transform: translateY(-2px);
                box-shadow: 0 7px 24px rgba(33,150,243,.38);
            }

            .dm-buy-btn span,.dm-buy-btn svg {
                position: relative;
                z-index: 1;
            }

            .dm-buy-btn svg {
                width: 15px;
                height: 15px;
            }

            .dm-buy-btn:disabled {
                opacity: .4;
                cursor: not-allowed;
                transform: none;
                box-shadow: none;
            }

            .dm-seller {
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 11px;
                background: var(--bg2);
                border: 1px solid var(--ln);
                border-radius: 11px;
            }

            .dm-sava {
                width: 34px;
                height: 34px;
                border-radius: 9px;
                background: linear-gradient(135deg,var(--bl3),var(--cy));
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: 800;
                font-size: 12px;
                color: #fff;
                border: 2px solid var(--bl);
            }

            .dm-snm {
                font-size: 12.5px;
                font-weight: 700;
            }

            .dm-ssub {
                font-size: 10.5px;
                color: var(--gr);
                display: flex;
                align-items: center;
                gap: 4px;
            }

            .dm-ssub svg {
                width: 10px;
                height: 10px;
            }

            .dm-meta-rows {
                display: flex;
                flex-direction: column;
                gap: 5px;
            }

            .dm-meta-row {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 7px 0;
                border-bottom: 1px solid var(--ln);
            }

            .dm-meta-row:last-child {
                border-bottom: none;
            }

            .dm-meta-lbl {
                font-size: 11px;
                color: var(--dim);
            }

            .dm-meta-val {
                font-size: 12px;
                font-weight: 700;
                color: var(--wh);
            }

            .dm-close {
                width: 30px;
                height: 30px;
                border-radius: 8px;
                background: transparent;
                border: 1px solid var(--ln);
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                color: var(--dim);
                transition: all .15s;
                flex-shrink: 0;
            }

            .dm-close:hover {
                border-color: var(--rd);
                color: var(--rd);
            }

            .dm-close svg {
                width: 13px;
                height: 13px;
            }