/* ====================================================================
   ROII PARTY — Combined Desktop + Mobile Mockup
   - Outer chrome (header / device tabs / role tabs) shared
   - Desktop styles: base
   - Mobile styles: scoped under .dvc-m where they would conflict
==================================================================== */

:root{--red:#CC2229;--rbr:#E8272F;--rdk:#991a1f;--rgw:rgba(204,34,41,.35);--bk:#000;--bg:#060606;--c1:#0f0f0f;--c2:#151515;--c3:#1c1c1c;--c4:#222;--bd:#222;--bd2:#2a2a2a;--tx:#f0eee9;--mu:#888;--mu2:#666;--dm:#444;--dm2:#333;--gn:#22c55e;--gnb:rgba(34,197,94,.1);--yl:#facc15;--ylb:rgba(250,204,21,.1);--bl:#3b82f6;--lv:#a29bfe;--or:#ff8a5c;--rd2:#ef4444}
*{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased}
body{background:var(--bg);color:var(--tx);font-family:'Prompt','Noto Sans Thai',sans-serif;overflow-x:hidden}

/* ===== mobile-only var overrides ===== */
.bodywrap-unused{--c1:#111;--mu:#777}

/* ====================================================================
   OUTER CHROME — header, device tabs, role tabs, section header, footer
==================================================================== */
.pg-hd{text-align:center;padding:60px 20px 20px;position:relative}
.pg-hd::before{content:'';position:absolute;top:-60px;left:50%;transform:translateX(-50%);width:800px;height:400px;border-radius:50%;background:radial-gradient(circle,var(--rgw),transparent 70%);filter:blur(120px);pointer-events:none}
.pg-hd .logo{font-family:'Bebas Neue','Prompt',sans-serif;font-size:64px;letter-spacing:14px;color:var(--red);font-style:italic;position:relative}
.pg-hd .sub{font-size:12px;letter-spacing:5px;color:var(--mu);text-transform:uppercase;margin-top:4px}
.pg-hd .ttl{font-size:22px;font-weight:700;margin-top:8px}

/* device tabs (Desktop / Mobile switch) */
.dvc-tabs{display:flex;justify-content:center;gap:8px;padding:18px 20px 0}
.dvc-tabs button{padding:10px 22px;border-radius:12px;font-family:inherit;font-size:13px;font-weight:700;letter-spacing:1px;cursor:pointer;transition:all .25s;border:1px solid var(--bd);background:var(--c1);color:var(--mu);display:flex;align-items:center;gap:8px}
.dvc-tabs button:hover{border-color:var(--red);color:var(--red)}
.dvc-tabs button.active{background:var(--red);color:#fff;border-color:var(--red);box-shadow:0 6px 25px var(--rgw)}
.dvc-tabs button i{font-size:16px}

/* role tabs */
.role-tabs{display:flex;justify-content:center;gap:8px;padding:14px 20px 0;flex-wrap:wrap}
.role-tabs button{padding:12px 28px;border-radius:14px;font-family:inherit;font-size:14px;font-weight:700;letter-spacing:1px;cursor:pointer;transition:all .25s;border:2px solid var(--bd);background:var(--c1);color:var(--mu);display:flex;align-items:center;gap:8px}
.role-tabs button:hover,.role-tabs button.active{border-color:var(--red);background:var(--red);color:#fff;box-shadow:0 6px 30px var(--rgw)}
.role-tabs button i{font-size:18px}

/* section header */
.sec-hd{display:flex;align-items:center;gap:14px;padding:40px 40px 20px;max-width:1500px;margin:0 auto}
.sec-hd .line{flex:1;height:1px;background:var(--bd)}
.sec-hd .label{font-family:'Bebas Neue','Prompt',sans-serif;font-size:24px;letter-spacing:5px;color:var(--red);display:flex;align-items:center;gap:10px}
.sec-hd .label i{font-size:24px}

/* screen filter nav */
.scr-nav{display:flex;justify-content:center;gap:6px;padding:0 20px 30px;flex-wrap:wrap;max-width:1200px;margin:0 auto}
.scr-nav button{background:var(--c2);border:1px solid var(--bd);color:var(--mu2);font-family:inherit;font-size:12px;font-weight:600;padding:8px 16px;border-radius:10px;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:6px}
.scr-nav button:hover,.scr-nav button.on{background:var(--red);color:#fff;border-color:var(--red);box-shadow:0 3px 15px var(--rgw)}
.scr-nav button i{font-size:14px}

/* device pane wrappers */
.dvc-pane{display:none}
.dvc-pane.active{display:block}

/* ====================================================================
   SHARED — buttons + badges (compatible across both)
==================================================================== */
.btn{padding:10px 20px;border-radius:10px;font-family:inherit;font-weight:600;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;border:none;transition:all .2s}
.btn-pr{background:linear-gradient(135deg,var(--red),var(--rbr));color:#fff;box-shadow:0 4px 20px var(--rgw)}
.btn-pr:hover{transform:translateY(-1px);box-shadow:0 6px 25px var(--rgw)}
.btn-sc{background:var(--c1);border:1px solid var(--bd);color:var(--tx)}
.btn-sc:hover{border-color:var(--red);color:var(--red)}
.btn-lg{padding:14px 32px;font-size:15px}

/* desktop badge size */
.bs{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:7px;font-size:10px;font-weight:700;letter-spacing:.5px}
/* mobile badge size */
.bs{display:inline-flex;align-items:center;gap:3px;padding:3px 9px;border-radius:7px;font-size:9px;font-weight:700;letter-spacing:.3px}
.bs.en{background:var(--gnb);color:var(--gn)}
.bs.wt{background:var(--ylb);color:var(--yl)}
.bs.vp{background:rgba(204,34,41,.12);color:var(--red)}
.bs.fl{background:rgba(239,68,68,.12);color:var(--rd2)}
.bs.bl{background:rgba(59,130,246,.1);color:var(--bl)}

/* ====================================================================
   DESKTOP — showcase + browser frames
==================================================================== */
.showcase{display:flex;flex-direction:column;gap:50px;padding:0 30px 60px;max-width:1500px;margin:0 auto}

.brw-wrap{animation:brIn .5s ease both}
.brw-wrap.hid{display:none}
.brw-lbl{display:flex;align-items:center;gap:10px;margin-bottom:12px;padding-left:8px}
.brw-lbl .bn{font-family:'Bebas Neue','Prompt',sans-serif;font-size:18px;letter-spacing:3px;color:var(--red);text-transform:uppercase;display:flex;align-items:center;gap:6px}
.brw-lbl .bs{font-size:12px;color:var(--mu);letter-spacing:1px;background:transparent;padding:0;font-weight:400}
.brw-lbl .num{background:var(--red);color:#fff;font-size:11px;font-weight:700;padding:3px 10px;border-radius:6px;letter-spacing:1px}

.brw{background:#0a0a0a;border-radius:14px;border:1px solid var(--bd2);box-shadow:0 30px 80px rgba(0,0,0,.6);overflow:hidden}
.brw-bar{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#161616;border-bottom:1px solid var(--bd)}
.brw-bar .dots{display:flex;gap:6px}
.brw-bar .dots span{width:12px;height:12px;border-radius:50%;background:#333}
.brw-bar .dots span:nth-child(1){background:#ff5f57}
.brw-bar .dots span:nth-child(2){background:#febc2e}
.brw-bar .dots span:nth-child(3){background:#28c840}
.brw-bar .url{flex:1;padding:7px 14px;background:var(--c1);border-radius:8px;font-family:'Bebas Neue','Prompt',sans-serif;font-size:11px;color:var(--mu);display:flex;align-items:center;gap:8px}
.brw-bar .url i{font-size:11px;color:var(--gn)}
.brw-bar .ctrl{display:flex;gap:14px;color:var(--mu2);font-size:15px}
.brw-body{background:#0a0a0a;min-height:600px;max-height:780px;overflow-y:auto}
.brw-body::-webkit-scrollbar{width:8px}
.brw-body::-webkit-scrollbar-track{background:#0a0a0a}
.brw-body::-webkit-scrollbar-thumb{background:var(--bd);border-radius:4px}

/* ===== USER WEBSITE (desktop) ===== */
.wn{display:flex;align-items:center;justify-content:space-between;padding:18px 40px;border-bottom:1px solid var(--bd);background:rgba(10,10,10,.9);backdrop-filter:blur(20px);position:sticky;top:0;z-index:10}
.wn .wl{display:flex;align-items:center;gap:40px}
.wn .wl .lg{font-family:'Bebas Neue','Prompt',sans-serif;font-size:26px;letter-spacing:4px;color:var(--red);font-style:italic}
.wn .wl .mn{display:flex;gap:24px}
.wn .wl .mn a{color:var(--mu);font-size:13px;font-weight:500;text-decoration:none;display:flex;align-items:center;gap:5px}
.wn .wl .mn a.ac{color:var(--red)}
.wn .wl .mn a i{font-size:14px}
.wn .wr{display:flex;align-items:center;gap:14px}
.wn .wr i{font-size:18px;color:var(--mu);cursor:pointer}
.wn .wr .av{width:34px;height:34px;border-radius:10px;background:var(--red);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:#fff}

.hero{padding:100px 40px 70px;position:relative;overflow:hidden;min-height:620px;display:flex;align-items:center;border-bottom:1px solid var(--bd)}
.hero::before{content:'';position:absolute;top:40%;left:35%;transform:translate(-50%,-50%);width:900px;height:900px;border-radius:50%;background:radial-gradient(circle,rgba(204,34,41,.28),transparent 60%);filter:blur(120px);pointer-events:none;animation:heropulse 8s ease-in-out infinite}
.hero::after{content:'ROII';position:absolute;bottom:-150px;right:-20px;font-family:'Bebas Neue','Prompt',sans-serif;font-size:420px;font-style:italic;letter-spacing:24px;color:rgba(204,34,41,.08);line-height:1;pointer-events:none}
@keyframes heropulse{0%,100%{opacity:.6;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}
.hero .hl{position:relative;z-index:2;max-width:600px}
.hero .hb{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:20px;background:rgba(204,34,41,.12);border:1px solid rgba(204,34,41,.3);font-size:11px;color:var(--red);font-weight:700;letter-spacing:3px;text-transform:uppercase;margin-bottom:18px}
.hero h1{font-family:'Bebas Neue','Prompt',sans-serif;font-size:98px;letter-spacing:8px;color:#fff;line-height:.95;margin-bottom:8px}
.hero h1 span{color:var(--red)}
.hero p{font-size:15px;color:var(--mu);margin-bottom:20px;line-height:1.7;max-width:480px}
.hero .hm{display:flex;gap:18px;margin-bottom:30px;font-size:13px;color:var(--mu)}
.hero .hm span{display:flex;align-items:center;gap:7px}
.hero .hm span i{color:var(--red);font-size:15px}
.hero .cta{display:flex;gap:12px}

.sec{padding:70px 40px}
.sec-ttl{font-family:'Bebas Neue','Prompt',sans-serif;font-size:36px;letter-spacing:5px;color:#fff;margin-bottom:6px}
.sec-ttl span{color:var(--red)}
.sec-sub{font-size:13px;color:var(--mu);letter-spacing:1px;text-transform:uppercase;margin-bottom:28px}

.art-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.art-card{background:var(--c1);border:1px solid var(--bd);border-radius:16px;padding:30px 24px;text-align:center;transition:all .3s;position:relative;overflow:hidden}
.art-card:hover{border-color:var(--red);transform:translateY(-4px)}
.art-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.art-card:hover::before{transform:scaleX(1)}
.art-card .ai{font-size:36px;margin-bottom:14px;display:block}
.art-card .nm{font-family:'Bebas Neue','Prompt',sans-serif;font-size:22px;letter-spacing:3px;margin-bottom:4px}
.art-card .rl{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--mu2)}

.spn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.spn-card{background:var(--c1);border:1px solid var(--bd);border-radius:14px;padding:22px;display:flex;align-items:center;gap:14px}
.spn-card .si{width:50px;height:50px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px}
.spn-card .sn{font-size:14px;font-weight:700}
.spn-card .st{font-size:11px;color:var(--mu)}

/* ============================================================================
   ZEEDTOPUP-style Footer — 5 column grid
   ============================================================================ */
.ftr {
    background: var(--c1);
    border-top: 1px solid var(--bd);
    padding: 56px 40px 0;
    color: var(--mu);
    font-size: 13px;
}
.ftr-grid {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr 1.3fr;
    gap: 48px;
    padding-bottom: 40px;
}
.ftr-col-brand { }
.ftr-brand-logo {
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.ftr-brand-logo img { height: 40px; max-width: 150px; object-fit: contain; }
.ftr-brand-name {
    font-family: 'Bebas Neue', 'Prompt', sans-serif;
    letter-spacing: 4px;
    font-size: 26px;
    color: var(--tx);
    margin-top: 6px;
    margin-bottom: 14px;
}
.ftr-brand-desc {
    color: var(--mu);
    font-size: 13px;
    line-height: 1.7;
    margin-bottom: 20px;
    max-width: 320px;
}
.ftr-socials {
    display: flex;
    gap: 10px;
}
.ftr-social-btn {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--c2);
    border: 1px solid var(--bd);
    border-radius: 10px;
    color: var(--mu);
    font-size: 16px;
    text-decoration: none;
    transition: all .15s;
}
.ftr-social-btn:hover {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
    transform: translateY(-2px);
}

.ftr-col-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Prompt', sans-serif;
    font-weight: 700;
    color: var(--tx);
    font-size: 15px;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--bd);
    position: relative;
}
.ftr-col-title i { color: var(--red); font-size: 17px; }
.ftr-col-title::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 40px;
    height: 2px;
    background: var(--red);
}

.ftr-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.ftr-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--mu);
    text-decoration: none;
    font-size: 13px;
    padding: 3px 0;
    transition: color .15s, transform .15s;
}
.ftr-link i { font-size: 14px; color: var(--dm); transition: color .15s; }
.ftr-link:hover { color: var(--tx); transform: translateX(4px); }
.ftr-link:hover i { color: var(--red); }

.ftr-fb-widget {
    background: var(--c2);
    border: 1px solid var(--bd);
    border-radius: 12px;
    padding: 10px;
    min-height: 220px;
    overflow: hidden;
}
.ftr-fb-widget iframe {
    width: 100%;
    border: none;
    display: block;
    background: transparent;
}
.ftr-fb-empty {
    color: var(--mu);
    font-size: 12px;
    text-align: center;
    padding: 40px 10px;
    line-height: 1.7;
}

.ftr-bottom {
    border-top: 1px solid var(--bd);
    padding: 22px 0;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}
.ftr-bottom-left {
    display: flex;
    align-items: center;
    gap: 14px;
}
.ftr-bottom-logo { height: 28px; max-width: 110px; object-fit: contain; opacity: .85; }
.ftr-bottom-brand {
    font-family: 'Bebas Neue', 'Prompt', sans-serif;
    letter-spacing: 3px;
    font-size: 16px;
    color: var(--red);
    font-style: italic;
}
.ftr-bottom-desc {
    font-size: 12px;
    color: var(--mu);
    line-height: 1.5;
}
.ftr-bottom-copy {
    font-size: 12px;
    color: var(--dm);
    font-family: 'Prompt', sans-serif;
}

@media (max-width: 1080px) {
    .ftr-grid { grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
    .ftr-col-brand { grid-column: 1 / -1; margin-bottom: 8px; }
    .ftr-col-fb    { grid-column: 1 / -1; }
    .ftr-fb-widget { max-width: 520px; }
}

.tk-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-bottom:24px}
.tk-opt{background:var(--c1);border:2px solid var(--bd);border-radius:18px;padding:24px;cursor:pointer;transition:all .3s;position:relative;overflow:hidden}
.tk-opt.sel{border-color:var(--red);background:linear-gradient(135deg,rgba(204,34,41,.08),var(--c1))}
.tk-opt.sel::before{content:'';position:absolute;top:0;right:0;width:50px;height:50px;background:var(--red);clip-path:polygon(100% 0,100% 100%,0 0)}
.tk-opt.sel::after{content:'\F26A';font-family:'bootstrap-icons';position:absolute;top:7px;right:10px;color:#fff;font-size:13px;font-weight:700}
.tk-opt .tkh{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.tk-opt .tki{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px}
.tk-opt .tkn{font-size:18px;font-weight:700;margin-bottom:3px}
.tk-opt .tkd{font-size:12px;color:var(--mu);margin-bottom:14px}
.tk-opt .tkp{font-family:'Bebas Neue','Prompt',sans-serif;font-size:28px;font-weight:700;color:var(--red)}
.tk-opt .tkpu{font-size:13px;color:var(--mu);margin-left:4px}

.frm-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
.frm-fld label{display:block;font-size:11px;font-weight:600;color:var(--mu);letter-spacing:1px;text-transform:uppercase;margin-bottom:6px}
.frm-fld input{width:100%;padding:12px 14px;background:var(--c1);border:1px solid var(--bd);border-radius:10px;color:var(--tx);font-family:inherit;font-size:14px;outline:none}
.frm-fld input:focus{border-color:var(--red)}
.frm-fld.full{grid-column:1/-1}

.sum-card{background:var(--c1);border:1px solid var(--bd);border-radius:16px;padding:22px}
.sum-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.04);font-size:13px}
.sum-row:last-child{border-bottom:none}
.sum-row.tot{padding:14px 0 2px;font-size:18px;font-weight:700;border-top:2px solid var(--bd);margin-top:4px}
.sum-row.tot span:last-child{color:var(--red)}

.qr-big{background:#fff;border-radius:20px;padding:40px;max-width:380px;margin:0 auto}
.qr-big .qb{width:240px;height:240px;background:#000;border-radius:14px;margin:0 auto 20px;display:flex;align-items:center;justify-content:center}
.qr-big .qi{font-family:'Bebas Neue','Prompt',sans-serif;font-size:14px;color:#333;letter-spacing:3px;text-align:center}
.qr-big .qn{font-size:20px;font-weight:700;color:#000;margin-top:6px;text-align:center}
.qr-big .qe{font-size:12px;color:#888;margin-top:3px;text-align:center}

/* ===== ADMIN DASHBOARD (desktop) ===== */
.ad-lay{display:flex;min-height:100vh;background:var(--bg)}
.ad-sb{width:230px;background:#0c0c0c;border-right:1px solid var(--bd);padding:22px 0;display:flex;flex-direction:column;flex-shrink:0;min-height:100vh;position:sticky;top:0;height:100vh;overflow-y:auto;overflow-x:hidden}
.ad-sb .lg{padding:0 22px 24px;border-bottom:1px solid var(--bd);margin-bottom:18px;display:flex;align-items:center;gap:10px}
.ad-sb .lg .lt{font-family:'Bebas Neue','Prompt',sans-serif;font-size:24px;letter-spacing:4px;color:var(--red);font-style:italic}
.ad-sb .lg .lb{font-size:9px;background:var(--red);color:#fff;padding:3px 7px;border-radius:5px;font-weight:700;letter-spacing:1px}
.ad-sb .nv{flex:1;padding:0 12px}
.ad-sb .sg{display:block;margin:0 0 6px 0;padding:14px 0 0 0;border-top:1px solid #1f1f1f}
.ad-sb .sg:first-child{padding-top:0;border-top:none}
.ad-sb .sg:last-child{margin-bottom:0}
.ad-sb .sgh{display:block;font-size:10px;line-height:1.3;font-weight:700;text-transform:uppercase;letter-spacing:1.4px;color:#9a9a9a;padding:0 13px 8px 13px;margin:0;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-sb .ni{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:10px;font-size:13px;color:var(--mu);cursor:pointer;margin-bottom:3px;font-weight:500}
.ad-sb .ni i{font-size:17px;width:20px}
.ad-sb .ni:hover{background:var(--c2);color:var(--tx)}
.ad-sb .ni.ac{background:var(--red);color:#fff}
.ad-sb .ni.ac i{color:#fff}
.ad-sb .us{padding:16px 22px;border-top:1px solid var(--bd);display:flex;align-items:center;gap:10px}
.ad-sb .us .av{width:36px;height:36px;border-radius:10px;background:var(--red);display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:13px}
.ad-sb .us .un{font-size:12px;font-weight:600}
.ad-sb .us .ur{font-size:10px;color:var(--mu)}

.ad-mn{flex:1;min-height:100vh;padding:28px 34px;background:var(--bg);overflow-x:hidden;font-family:'Prompt','Noto Sans Thai',sans-serif}
.ad-mn *{font-family:inherit}
.ad-mn .ad-t,.ad-mn .ht{font-family:'Bebas Neue','Prompt',sans-serif}
.ad-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.ad-hd .ht{font-family:'Bebas Neue','Prompt',sans-serif;font-size:30px;letter-spacing:3px}
.ad-hd .hs{font-size:12px;color:var(--mu);margin-top:2px}
.ad-hd .ha{display:flex;gap:8px;align-items:center}
.ad-hd .sr{padding:9px 14px;background:var(--c1);border:1px solid var(--bd);border-radius:10px;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mu);width:220px}

.ad-st{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.ad-sc{background:var(--c1);border:1px solid var(--bd);border-radius:14px;padding:18px;position:relative;overflow:hidden}
.ad-sc .si{position:absolute;top:16px;right:16px;font-size:22px;opacity:.5}
.ad-sc .sl{font-size:11px;color:var(--mu);letter-spacing:1px;text-transform:uppercase;font-weight:600}
.ad-sc .sv{font-family:'Bebas Neue','Prompt',sans-serif;font-size:28px;font-weight:700;margin:6px 0 4px}
.ad-sc .sm{font-size:11px;display:flex;align-items:center;gap:4px}
.ad-sc .sm.up{color:var(--gn)}.ad-sc .sm.dn{color:var(--rd2)}

.ad-g2{display:grid;grid-template-columns:2fr 1fr;gap:18px;margin-bottom:18px}
.ad-g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:18px}
.ad-gbig{display:grid;grid-template-columns:3fr 1fr;gap:18px}

.ad-card{background:var(--c1);border:1px solid var(--bd);border-radius:14px;overflow:hidden}
.ad-ch{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--bd)}
.ad-ch .ct{font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px}
.ad-ch .ct i{color:var(--red);font-size:16px}
.ad-cb{padding:18px 20px}

.tbl{width:100%;border-collapse:collapse}
.tbl th{font-size:10px;color:var(--mu);letter-spacing:1.5px;text-transform:uppercase;text-align:left;padding:10px 16px;border-bottom:1px solid var(--bd);font-weight:700;background:var(--c2)}
.tbl td{padding:12px 16px;font-size:12px;border-bottom:1px solid rgba(255,255,255,.04)}
.tbl tr:hover td{background:rgba(255,255,255,.02)}
.tbl .av{width:32px;height:32px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:11px}

.chrt{display:flex;align-items:flex-end;gap:10px;height:200px;padding:20px 0 30px}
.chrt .cb{flex:1;border-radius:8px 8px 0 0;background:linear-gradient(180deg,var(--rbr),var(--red));position:relative;min-height:20px;transition:all .3s}
.chrt .cb:hover{filter:brightness(1.2)}
.chrt .cb .cv{position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-family:'Bebas Neue','Prompt',sans-serif;font-size:11px;font-weight:600;color:var(--tx);white-space:nowrap}
.chrt .cb .cl{position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);font-size:10px;color:var(--mu);white-space:nowrap}

/* desktop donut */
.donut{width:160px;height:160px;border-radius:50%;background:conic-gradient(var(--gn) 0% 48%,var(--yl) 48% 100%);display:flex;align-items:center;justify-content:center;margin:20px auto}
.donut .hl{width:110px;height:110px;border-radius:50%;background:var(--c1);display:flex;align-items:center;justify-content:center;flex-direction:column}
.donut .hl .dv{font-family:'Bebas Neue','Prompt',sans-serif;font-size:26px;font-weight:700;color:var(--gn)}
.donut .hl .dl{font-size:9px;color:var(--mu);letter-spacing:1px;text-transform:uppercase}

/* desktop log entry */
.le{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.03);font-size:12px}
.le:last-child{border-bottom:none}
.le .ld{width:8px;height:8px;border-radius:50%;margin-top:5px;flex-shrink:0}
.le .lm{color:#bbb;flex:1;line-height:1.6}
.le .lm strong{color:var(--tx)}
.le .ls{font-size:10px;color:var(--dm);margin-top:2px;font-family:'Bebas Neue','Prompt',sans-serif}
.le .lt{font-family:'Bebas Neue','Prompt',sans-serif;font-size:10px;color:var(--dm);white-space:nowrap}

/* desktop scan view */
.sc-view{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.sc-cam{background:#111;border:2px solid var(--red);border-radius:14px;height:400px;position:relative;overflow:hidden}
.sc-cam::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,26,26,.2),rgba(26,26,26,.7));z-index:1}
.sc-cam .ci{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:70px;color:rgba(255,255,255,.06);z-index:0}
.sc-cam .so{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2}

/* desktop scan box */
.sbx{width:260px;height:260px;position:relative}
.sbx .cn{position:absolute;width:30px;height:30px}
.sbx .cn::before,.sbx .cn::after{content:'';position:absolute;background:var(--red)}
.sbx .cn.tl{top:0;left:0}.sbx .cn.tl::before{top:0;left:0;width:30px;height:4px}.sbx .cn.tl::after{top:0;left:0;width:4px;height:30px}
.sbx .cn.tr{top:0;right:0}.sbx .cn.tr::before{top:0;right:0;width:30px;height:4px}.sbx .cn.tr::after{top:0;right:0;width:4px;height:30px}
.sbx .cn.bl{bottom:0;left:0}.sbx .cn.bl::before{bottom:0;left:0;width:30px;height:4px}.sbx .cn.bl::after{bottom:0;left:0;width:4px;height:30px}
.sbx .cn.br{bottom:0;right:0}.sbx .cn.br::before{bottom:0;right:0;width:30px;height:4px}.sbx .cn.br::after{bottom:0;right:0;width:4px;height:30px}
.sln{position:absolute;left:15px;right:15px;height:3px;background:linear-gradient(90deg,transparent,var(--red),transparent);box-shadow:0 0 20px var(--rgw);animation:scanM 2.2s ease-in-out infinite}
.sc-cam .sh{position:absolute;bottom:20px;left:0;right:0;text-align:center;font-size:13px;color:var(--tx);letter-spacing:1px;z-index:3}

@keyframes scanM{0%,100%{top:15px}50%{top:calc(100% - 18px)}}

.pm-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:18px}
.pm-opt{background:var(--c1);border:2px solid var(--bd);border-radius:14px;padding:18px;cursor:pointer;transition:all .2s;text-align:center}
.pm-opt.sel{border-color:var(--red);background:linear-gradient(135deg,rgba(204,34,41,.06),var(--c1))}
.pm-opt i{font-size:28px;margin-bottom:8px;display:block}
.pm-opt .pn{font-size:13px;font-weight:700}
.pm-opt .pd{font-size:10px;color:var(--mu);margin-top:3px}

.stp{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:26px}
.stp .sn{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.stp .sn.ac{background:var(--red);color:#fff}
.stp .sn.dn{background:var(--red);color:#fff}
.stp .sn.pd{background:var(--bd);color:var(--dm)}
.stp .sl{width:40px;height:2px}
.stp .sl.dn{background:var(--red)}
.stp .sl.pd{background:var(--bd)}

.sr-box{padding:24px;border-radius:14px;text-align:center}
.sr-ok{background:var(--gnb);border:1px solid rgba(34,197,94,.25)}
.sr-ok i{font-size:56px;color:var(--gn)}
.sr-fl{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.25)}
.sr-fl i{font-size:56px;color:var(--rd2)}
.sr-t{font-size:22px;font-weight:800;margin-top:10px}
.sr-d{font-size:13px;color:var(--mu);margin-top:4px}

/* desktop toggle row */
.tgl-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.tgl-row:last-child{border-bottom:none}
.tgl-row .tl{font-size:13px;display:flex;align-items:center;gap:10px}
.tgl-row .tl i{font-size:17px;color:var(--red)}
.tgl-row .td{font-size:11px;color:var(--mu);margin-top:2px}
.sw{width:44px;height:24px;border-radius:14px;position:relative}
.sw.on{background:var(--red)}.sw.off{background:var(--bd)}
.sw::after{content:'';position:absolute;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:all .2s}
.sw.on::after{right:3px}.sw.off::after{left:3px}

@keyframes brIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

/* ====================================================================
   MOBILE — phone frames + components (scoped under .dvc-m)
==================================================================== */
.showcase{display:flex;flex-wrap:wrap;justify-content:center;gap:36px;padding:0 20px 50px;max-width:1500px;margin:0 auto}

.ph-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;animation:phIn .5s ease both}
.ph-wrap.hid{display:none}
.ph-lbl{font-family:'Bebas Neue','Prompt',sans-serif;font-size:15px;letter-spacing:3px;color:var(--red);text-transform:uppercase;display:flex;align-items:center;gap:6px}
.ph-lbl i{font-size:16px}
.ph-sub{font-size:10px;color:var(--dm);letter-spacing:1px}
.ph{width:360px;height:780px;background:#000;border-radius:48px;border:3px solid #2a2a2a;box-shadow:0 20px 80px rgba(0,0,0,.8),0 0 0 1px #111,inset 0 0 0 2px #1a1a1a;position:relative;overflow:hidden}
.ph::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:150px;height:32px;background:#000;border-radius:0 0 20px 20px;z-index:100;box-shadow:0 0 0 1px #1a1a1a}
.sb{height:52px;display:flex;align-items:flex-end;justify-content:space-between;padding:0 28px 7px;font-size:12px;font-weight:600;color:#fff;position:relative;z-index:99}
.sb .ic{display:flex;gap:5px;font-size:12px}
.sc{height:calc(100% - 52px);overflow-y:auto;overflow-x:hidden;padding:0 0 30px;scrollbar-width:none}
.sc::-webkit-scrollbar{display:none}

.ab{display:flex;align-items:center;justify-content:space-between;padding:6px 18px 12px}
.ab .l{display:flex;align-items:center;gap:8px}
.ab .roii{font-family:'Bebas Neue','Prompt',sans-serif;font-size:22px;color:var(--red);font-style:italic;letter-spacing:3px}
.ab .dot{width:6px;height:6px;border-radius:50%;background:var(--gn)}
.ab .r{display:flex;gap:12px}
.ab .r i{font-size:18px;color:var(--mu)}
.ab .pg-title{font-weight:700;font-size:14px}

.hb{margin:0 14px 16px;border-radius:16px;padding:22px 18px;position:relative;overflow:hidden}
.hb::after{content:'';position:absolute;top:-30px;right:-30px;width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.07)}
.hb .ht{font-family:'Bebas Neue','Prompt',sans-serif;font-size:28px;letter-spacing:4px;color:#fff;line-height:1}
.hb .hs{font-size:11px;color:rgba(255,255,255,.65);margin-top:3px}
.hb .hst{display:flex;gap:16px;margin-top:14px}
.hb .hst .n{font-family:'Bebas Neue','Prompt',sans-serif;font-size:22px;font-weight:700;color:#fff}
.hb .hst .lb{font-size:9px;color:rgba(255,255,255,.55);letter-spacing:1px;text-transform:uppercase}

.mc{background:var(--c1);border:1px solid var(--bd);border-radius:14px;margin:0 14px 10px;overflow:hidden}
.mch{display:flex;align-items:center;gap:7px;padding:12px 14px;border-bottom:1px solid var(--bd);font-size:12px;font-weight:700;letter-spacing:.5px}
.mch i{font-size:15px;color:var(--red)}
.mcb{padding:12px 14px}

.sr{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px;margin:0 14px 12px}
.sr4{grid-template-columns:1fr 1fr 1fr 1fr}
.sm{background:var(--c1);border:1px solid var(--bd);border-radius:12px;padding:12px 10px;text-align:center}
.sm .n{font-family:'Bebas Neue','Prompt',sans-serif;font-size:20px;font-weight:700}
.sm .lb{font-size:8px;color:var(--mu);letter-spacing:1px;text-transform:uppercase;margin-top:2px}

.sl{padding:0 14px;margin-bottom:8px;font-size:10px;font-weight:700;letter-spacing:2px;color:var(--dm);text-transform:uppercase;display:flex;align-items:center;gap:5px}
.sl i{font-size:12px;color:var(--red)}

.abtn{display:flex;align-items:center;justify-content:center;gap:9px;margin:14px 14px 0;padding:14px;background:linear-gradient(135deg,var(--red),var(--rbr));border:none;border-radius:14px;color:#fff;font-family:inherit;font-size:15px;font-weight:700;letter-spacing:1px;cursor:pointer;box-shadow:0 5px 25px var(--rgw)}
.abtn i{font-size:20px}
.abtn.sec{background:var(--c1);border:1px solid var(--bd);box-shadow:none;color:var(--mu);font-size:12px}
.abtn.sec i{font-size:16px}

.gr{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.gr:last-child{border-bottom:none}
.gr .av{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:#fff;flex-shrink:0}
.gr .gi{flex:1;min-width:0}
.gr .gn{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gr .gt{font-size:9px;color:var(--mu);font-family:'Bebas Neue','Prompt',sans-serif}

/* mobile log entry */
.le{display:flex;align-items:flex-start;gap:8px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.03);font-size:11px}
.le:last-child{border-bottom:none}
.le .ld{width:7px;height:7px;border-radius:50%;margin-top:4px;flex-shrink:0}
.le .lm{color:#bbb;flex:1;line-height:1.5}
.le .lm strong{color:var(--tx)}
.le .lt{font-family:'Bebas Neue','Prompt',sans-serif;font-size:9px;color:var(--dm);white-space:nowrap}

.sbar{display:flex;align-items:center;gap:7px;margin:0 14px 12px;padding:11px 12px;background:var(--c2);border:1px solid var(--bd);border-radius:12px}
.sbar i{font-size:15px;color:var(--dm)}.sbar span{font-size:12px;color:var(--dm)}

.tf{display:flex;gap:5px;margin:0 14px 12px;overflow-x:auto;scrollbar-width:none}
.tf::-webkit-scrollbar{display:none}
.tf .t{padding:6px 12px;border-radius:9px;font-size:10px;font-weight:600;letter-spacing:.3px;background:var(--c1);border:1px solid var(--bd);color:var(--mu);white-space:nowrap;flex-shrink:0}
.tf .t.on{background:var(--red);color:#fff;border-color:var(--red)}

.mf{margin:0 14px 9px}
.mf label{display:block;font-size:10px;font-weight:600;color:var(--mu);letter-spacing:1px;text-transform:uppercase;margin-bottom:5px}
.mf .mi{width:100%;padding:12px;background:var(--c1);border:1px solid var(--bd);border-radius:11px;color:var(--tx);font-family:inherit;font-size:13px;outline:none}
.mf .mi:focus{border-color:var(--red)}

.pb{margin:12px 14px 4px;height:4px;background:var(--bd);border-radius:4px;overflow:hidden}
.pb .f{height:100%;background:var(--red);border-radius:4px}

.bn{position:absolute;bottom:0;left:0;right:0;height:76px;background:rgba(0,0,0,.95);backdrop-filter:blur(20px);border-top:1px solid var(--bd);display:flex;align-items:center;justify-content:space-around;padding:0 8px 14px}
.bn .ni{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:9px;color:var(--dm);letter-spacing:.3px;text-decoration:none;flex:1;min-width:0}
.bn .ni i{font-size:20px}
.bn .ni.on{color:var(--red)}
/* Center MENU button */
.bn .nm{position:relative;flex:0 0 auto;cursor:pointer}
.bn .nm .nmb{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--red);color:#fff;box-shadow:0 6px 16px rgba(204,34,41,.45);margin-top:-22px;border:3px solid #000}
.bn .nm .nmb i{font-size:22px;color:#fff;line-height:1}
.bn .nm .nmt{font-size:9px;color:var(--red);font-weight:600;margin-top:2px}
.bn .nm:hover .nmb{transform:scale(1.05);transition:transform .15s ease}

/* Admin menu bottom sheet */
.ams-ovl{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);z-index:1000;opacity:0;transition:opacity .2s ease;display:flex;align-items:flex-end;justify-content:center}
.ams-ovl.in{opacity:1}
.ams-ovl.out{opacity:0}
.ams{width:100%;max-width:520px;max-height:85vh;background:#0c0c0c;border-top:1px solid var(--bd);border-radius:20px 20px 0 0;display:flex;flex-direction:column;transform:translateY(100%);transition:transform .22s cubic-bezier(.2,.8,.25,1);box-shadow:0 -20px 60px rgba(0,0,0,.7)}
.ams-ovl.in .ams{transform:translateY(0)}
.ams-grip{width:40px;height:4px;background:#333;border-radius:4px;margin:10px auto 6px;flex-shrink:0}
.ams-hd{display:flex;align-items:center;justify-content:space-between;padding:6px 18px 12px;border-bottom:1px solid var(--bd);flex-shrink:0}
.ams-tl{font-size:14px;font-weight:700;color:var(--tx);font-family:'Prompt','Noto Sans Thai',sans-serif}
.ams-cl{background:transparent;border:none;color:var(--mu);font-size:26px;line-height:1;cursor:pointer;padding:0 6px}
.ams-cl:hover{color:var(--tx)}
.ams-bd{flex:1;overflow-y:auto;padding:14px 14px 24px;-webkit-overflow-scrolling:touch}
.ams-sg{margin-bottom:18px}
.ams-sg:last-child{margin-bottom:0}
.ams-sh{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.4px;color:#8a8a8a;padding:0 4px 8px}
.ams-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ams-it{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 6px;background:var(--c1);border:1px solid var(--bd);border-radius:12px;color:var(--tx);text-decoration:none;font-size:11px;text-align:center;line-height:1.25;transition:border-color .15s,background .15s}
.ams-it i{font-size:22px;color:var(--mu)}
.ams-it:hover{border-color:#333;background:#161616}
.ams-it.on{background:rgba(204,34,41,.10);border-color:var(--red);color:var(--red);font-weight:600}
.ams-it.on i{color:var(--red)}
@media(max-width:380px){.ams-grid{grid-template-columns:repeat(2,1fr)}.ams-it{font-size:11px}}

.to{margin:0 14px 8px;padding:16px;background:var(--c1);border:1px solid var(--bd);border-radius:14px;display:flex;align-items:center;gap:12px;transition:border-color .2s}
.to.sel{border-color:var(--red);box-shadow:0 0 18px rgba(204,34,41,.12)}
.to .toi{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px}
.to .ton{font-size:14px;font-weight:700}.to .tod{font-size:10px;color:var(--mu);margin-top:1px}
.to .top{font-family:'Bebas Neue','Prompt',sans-serif;font-size:17px;font-weight:700;color:var(--red)}
.to .tou{font-size:10px;color:var(--mu)}

/* mobile scanner */
.sfr{margin:14px;height:260px;border-radius:18px;background:#1a1a1a;position:relative;overflow:hidden;border:2px solid var(--red)}
.sfr .so{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.sbx{width:190px;height:190px;position:relative}
.sbx .cn{position:absolute;width:22px;height:22px}
.sbx .cn::before,.sbx .cn::after{content:'';position:absolute;background:var(--red)}
.sbx .cn.tl{top:0;left:0}.sbx .cn.tl::before{top:0;left:0;width:22px;height:3px}.sbx .cn.tl::after{top:0;left:0;width:3px;height:22px}
.sbx .cn.tr{top:0;right:0}.sbx .cn.tr::before{top:0;right:0;width:22px;height:3px}.sbx .cn.tr::after{top:0;right:0;width:3px;height:22px}
.sbx .cn.bl{bottom:0;left:0}.sbx .cn.bl::before{bottom:0;left:0;width:22px;height:3px}.sbx .cn.bl::after{bottom:0;left:0;width:3px;height:22px}
.sbx .cn.br{bottom:0;right:0}.sbx .cn.br::before{bottom:0;right:0;width:22px;height:3px}.sbx .cn.br::after{bottom:0;right:0;width:3px;height:22px}
.sln{position:absolute;left:10px;right:10px;height:2px;background:linear-gradient(90deg,transparent,var(--red),transparent);box-shadow:0 0 14px var(--rgw);animation:scanM 2.2s ease-in-out infinite}
.sh{position:absolute;bottom:14px;left:0;right:0;text-align:center;font-size:11px;color:var(--mu);letter-spacing:1px}

/* mobile QR */
.qz{margin:14px;padding:24px;text-align:center;background:#fff;border-radius:18px}
.qz .qb{width:180px;height:180px;margin:0 auto 12px;background:#000;border-radius:10px;display:flex;align-items:center;justify-content:center}
.qz .qi{font-family:'Bebas Neue','Prompt',sans-serif;font-size:12px;color:#333;letter-spacing:2px}
.qz .qn{font-size:15px;font-weight:700;color:#000;margin-top:3px}
.qz .qe{font-size:10px;color:#888;margin-top:2px}

/* mobile scan result */
.srs{margin:10px 14px;padding:16px;border-radius:14px;text-align:center}
.srs.ok{background:var(--gnb);border:1px solid rgba(34,197,94,.2)}
.srs.ok i{font-size:40px;color:var(--gn)}
.srs.fail{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.2)}
.srs.fail i{font-size:40px;color:#ef4444}
.srs .st{font-size:16px;font-weight:700;margin-top:6px}
.srs .sd{font-size:11px;color:var(--mu);margin-top:3px}

/* mobile chart bar */
.cbar{display:flex;align-items:flex-end;gap:6px;height:100px;padding:0 4px;margin:10px 0}
.cbar .cb{flex:1;border-radius:6px 6px 0 0;background:var(--red);position:relative;transition:height .5s;min-height:8px}
.cbar .cb .cv{position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-family:'Bebas Neue','Prompt',sans-serif;font-size:8px;color:var(--mu);white-space:nowrap}
.cbar .cb .cl{position:absolute;bottom:-16px;left:50%;transform:translateX(-50%);font-size:8px;color:var(--dm);white-space:nowrap}

/* mobile toggle */
.tgl{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.tgl:last-child{border-bottom:none}
.tgl .tl{font-size:12px;display:flex;align-items:center;gap:7px}
.tgl .tl i{font-size:15px;color:var(--red)}
.tgl .sw{width:40px;height:22px;border-radius:12px;position:relative}
.tgl .sw.on{background:var(--red)}.tgl .sw.off{background:var(--dm)}
.tgl .sw::after{content:'';position:absolute;top:3px;width:16px;height:16px;border-radius:50%;background:#fff}
.tgl .sw.on::after{right:3px}.tgl .sw.off::after{left:3px}

/* mobile donut */
.donut{width:100px;height:100px;border-radius:50%;background:conic-gradient(var(--gn) 0% 48%,var(--yl) 48% 100%);display:flex;align-items:center;justify-content:center;margin:0 auto}
.donut .hole{width:70px;height:70px;border-radius:50%;background:var(--c1);display:flex;align-items:center;justify-content:center;flex-direction:column}
.donut .hole .dv{font-family:'Bebas Neue','Prompt',sans-serif;font-size:18px;font-weight:700}
.donut .hole .dl{font-size:8px;color:var(--mu);letter-spacing:1px;text-transform:uppercase}

@keyframes phIn{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}

/* ====================================================================
   FOOTER + RESPONSIVE
==================================================================== */
.mk-footer{text-align:center;padding:40px 20px 80px}

@media(max-width:1200px){
  .hero h1{font-size:72px;letter-spacing:5px}
  .hero::after{font-size:220px;bottom:-78px;right:-10px}
  .ad-sb{width:80px}
  .ad-sb .lg .lt,.ad-sb .lg .lb,.ad-sb .ni span,.ad-sb .us .un,.ad-sb .us .ur{display:none}
  .ad-sb .ni{justify-content:center;padding:13px}
  .ad-sb .sgh{display:none}
  .ad-sb .sg{margin-bottom:0;padding-top:8px;border-top:1px solid var(--bd)}
  .ad-sb .sg:first-child{padding-top:0;border-top:none}
}
@media(max-width:400px){
  .ph{width:100%;height:720px;border-radius:0;border:none;box-shadow:none}
  .ph::before{display:none}
  .showcase{padding:0;gap:16px}
  .ph-wrap{width:100%}
}


/* ============================================================================
   REAL-SITE RESPONSIVE ADJUSTMENTS
   ============================================================================ */
html,body{min-height:100%}
body{min-height:100vh}
a{color:inherit;text-decoration:none}
a:hover{opacity:.85}

/* Hide mockup-only chrome if ever leaked */
.brw-wrap,.brw-lbl,.brw,.brw-bar,.ph-wrap,.ph-lbl,.ph,.sb,
.pg-hd,.dvc-tabs,.role-tabs,.scr-nav,.sec-hd,.mk-footer,.dvc-pane{display:block}

/* --- Mobile responsive for USER pages --- */
@media(max-width:768px){
  .wn{padding:14px 18px;flex-wrap:wrap;gap:10px}
  .wn .wl{gap:18px;flex:1;min-width:0}
  .wn .wl .mn{display:none}
  .wn .wl .lg{font-size:22px;letter-spacing:3px}
  .wn .wr{gap:12px}
  .wn .wr i{font-size:16px}

  .hero{padding:50px 20px;min-height:auto}
  .hero h1{font-size:56px!important;letter-spacing:4px!important}
  .hero::after{font-size:130px!important;right:-8px!important;bottom:-46px!important}
  .hero .hm{flex-direction:column;gap:6px}
  .hero .cta{flex-direction:column}
  .hero .cta .btn{width:100%;justify-content:center}

  .sec{padding:40px 20px}
  .sec-ttl{font-size:28px;letter-spacing:3px}
  .art-grid{grid-template-columns:1fr 1fr;gap:10px}
  .art-card{padding:18px 14px}
  .spn-grid{grid-template-columns:1fr 1fr;gap:10px}

  .ftr{ padding:40px 20px 0 }
  .ftr-grid { grid-template-columns: 1fr; gap: 32px; padding-bottom: 28px; }
  .ftr-col-brand { text-align: center; }
  .ftr-brand-desc { margin-left: auto; margin-right: auto; }
  .ftr-socials { justify-content: center; }
  .ftr-bottom { flex-direction: column; text-align: center; gap: 10px; padding: 20px 0; }
  .ftr-bottom-left { flex-direction: column; gap: 8px; align-items: center; }

  .tk-grid{grid-template-columns:1fr}
  .pm-grid{grid-template-columns:1fr;gap:8px}
  .frm-grid{grid-template-columns:1fr}

  /* event card grid on hub → 2 col then 1 col */
  .events-grid{grid-template-columns:1fr 1fr!important;gap:10px!important}
}
@media(max-width:520px){
  .events-grid{grid-template-columns:1fr!important}
  .art-grid{grid-template-columns:1fr}
  .spn-grid{grid-template-columns:1fr}
}

/* --- Mobile responsive for ADMIN pages ---
   Note: at 768px and below, dual-view switches to .view-mobile entirely.
   Between 769–1200px we keep the vertical icon-only sidebar (from @1200 rule),
   so we DO NOT switch the sidebar to a horizontal top bar here. */
@media(max-width:960px){
  .ad-mn{padding:16px}
  .ad-hd{flex-direction:column;align-items:flex-start;gap:12px}
  .ad-hd .ha{flex-wrap:wrap}
  .ad-hd .sr{display:none}
  .ad-st{grid-template-columns:1fr 1fr;gap:10px}
  .ad-g2,.ad-g3,.ad-gbig{grid-template-columns:1fr;gap:12px}
  .ad-sc .sv{font-size:22px}
  .tbl{font-size:11px}
  .tbl th,.tbl td{padding:8px 10px}
  .sc-view{grid-template-columns:1fr}
  .sc-cam{height:300px}
  .chrt{height:150px}
}
@media(max-width:520px){
  .ad-st{grid-template-columns:1fr 1fr}
  .ad-cb{padding:14px}
  .tbl{display:block;overflow-x:auto;white-space:nowrap}
}

/* ============================================================================
   DUAL-VIEW SWITCHING — desktop/mobile content swap at 768px
   ============================================================================ */

/* ============================================================================
   DUAL-VIEW SWITCHING — desktop/mobile content swap at 768px
   BULLETPROOF RULES — using !important + explicit rules for all platforms
   ============================================================================ */

/* Default (desktop, 769px+): show desktop, hide mobile */
.view-desktop { display: block !important; }
.view-mobile  { display: none !important; }

/* Mobile (768px and below): swap */
@media (max-width: 768px) {
    .view-desktop { display: none !important; }
    .view-mobile  { display: block !important; }

    /* Body becomes proper mobile container */
    body {
        background: var(--bg);
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Hide any stray desktop elements that might render outside .view-desktop */
    .wn,
    .ftr {
        display: none !important;
    }
}

/* Force-hide mobile-only elements outside .view-mobile on desktop */
@media (min-width: 769px) {
    .view-mobile,
    .view-mobile * {
        display: none !important;
    }

    /* In case .ab or .bn appears outside .view-mobile, hide them too */
    body > .ab,
    body > .bn,
    body > .mobile-tabbar {
        display: none !important;
    }
}

/* ============================================================================
   MOBILE VIEW — match the original mockup exactly (no phone frame chrome
   since this IS a real mobile viewport)
   ============================================================================ */

.view-mobile {
  min-height: 100vh;
  position: relative;
  padding-bottom: 76px; /* room for bottom nav */
}

.view-mobile .mobile-sc {
  padding-bottom: 30px;
}

/* Admin mobile — horizontal gutter so content doesn't touch screen edges.
   Public mobile keeps edge-to-edge because its components have built-in
   margin: 0 14px gutters (.hb, .mc, .sr, .sbar, .tf, .mf, .to). */
.vm-adm .mobile-sc {
  padding-left: 14px;
  padding-right: 14px;
}
.vm-adm .ab {
  padding-left: 14px;
  padding-right: 14px;
}

/* Mobile top appbar */
.view-mobile .ab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  position: sticky;
  top: 0;
  background: rgba(6, 6, 6, 0.92);
  backdrop-filter: blur(14px);
  z-index: 50;
  border-bottom: 1px solid var(--bd);
}
.view-mobile .ab .l {
  display: flex;
  align-items: center;
  gap: 10px;
}
.view-mobile .ab .roii {
  font-family: 'Bebas Neue', 'Prompt', sans-serif;
  font-size: 22px;
  color: var(--red);
  font-style: italic;
  letter-spacing: 3px;
}
.view-mobile .ab .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gn);
}
.view-mobile .ab .r {
  display: flex;
  gap: 14px;
}
.view-mobile .ab .r i {
  font-size: 18px;
  color: var(--mu);
  cursor: pointer;
}
.view-mobile .ab .pg-title {
  font-weight: 700;
  font-size: 14px;
}

/* Mobile bottom nav */
.view-mobile .bn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 76px;
  background: rgba(0, 0, 0, 0.96);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--bd);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 8px 14px;
  z-index: 100;
}
.view-mobile .bn .ni {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 9px;
  color: var(--dm);
  letter-spacing: 0.3px;
  text-decoration: none;
  padding: 4px 8px;
}
.view-mobile .bn .ni i {
  font-size: 20px;
}
.view-mobile .bn .ni.on {
  color: var(--red);
}

/* Mobile hero block */
.view-mobile .hb {
  margin: 0 14px 16px;
  border-radius: 16px;
  padding: 22px 18px;
  position: relative;
  overflow: hidden;
}
.view-mobile .hb::after {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
}
.view-mobile .hb .ht {
  font-family: 'Bebas Neue', 'Prompt', sans-serif;
  font-size: 28px;
  letter-spacing: 4px;
  color: #fff;
  line-height: 1;
}
.view-mobile .hb .hs {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 3px;
}
.view-mobile .hb .hst {
  display: flex;
  gap: 16px;
  margin-top: 14px;
}
.view-mobile .hb .hst .n {
  font-family: 'Bebas Neue', 'Prompt', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}
.view-mobile .hb .hst .lb {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Mobile stat row */
.view-mobile .sr {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 7px;
  margin: 0 14px 12px;
}
.view-mobile .sr4 {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
.view-mobile .sm {
  background: var(--c1);
  border: 1px solid var(--bd);
  border-radius: 12px;
  padding: 12px 10px;
  text-align: center;
}
.view-mobile .sm .n {
  font-family: 'Bebas Neue', 'Prompt', sans-serif;
  font-size: 20px;
  font-weight: 700;
}
.view-mobile .sm .lb {
  font-size: 8px;
  color: var(--mu);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 2px;
}

/* Mobile section label */
.view-mobile .sl {
  padding: 0 14px;
  margin-bottom: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--dm);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 5px;
}
.view-mobile .sl i {
  font-size: 12px;
  color: var(--red);
}

/* Mobile card */
.view-mobile .mc {
  background: var(--c1);
  border: 1px solid var(--bd);
  border-radius: 14px;
  margin: 0 14px 10px;
  overflow: hidden;
}
.view-mobile .mch {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--bd);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.view-mobile .mch i {
  font-size: 15px;
  color: var(--red);
}
.view-mobile .mcb {
  padding: 12px 14px;
}

/* Mobile action button */
.view-mobile .abtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 14px 14px 0;
  padding: 14px;
  background: linear-gradient(135deg, var(--red), var(--rbr));
  border: none;
  border-radius: 14px;
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: 0 5px 25px var(--rgw);
  text-decoration: none;
}
.view-mobile .abtn i {
  font-size: 20px;
}
.view-mobile .abtn.sec {
  background: var(--c1);
  border: 1px solid var(--bd);
  box-shadow: none;
  color: var(--mu);
  font-size: 12px;
}
.view-mobile .abtn.sec i {
  font-size: 16px;
}

/* Mobile guest row */
.view-mobile .gr {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.view-mobile .gr:last-child {
  border-bottom: none;
}
.view-mobile .gr .av {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}
.view-mobile .gr .gi {
  flex: 1;
  min-width: 0;
}
.view-mobile .gr .gn {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.view-mobile .gr .gt {
  font-size: 9px;
  color: var(--mu);
  font-family: 'Bebas Neue', 'Prompt', sans-serif;
}

/* Mobile log entry */
.view-mobile .le {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  font-size: 11px;
}
.view-mobile .le:last-child {
  border-bottom: none;
}
.view-mobile .le .ld {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-top: 4px;
  flex-shrink: 0;
}
.view-mobile .le .lm {
  color: #bbb;
  flex: 1;
  line-height: 1.5;
}
.view-mobile .le .lm strong {
  color: var(--tx);
}
.view-mobile .le .lt {
  font-family: 'Bebas Neue', 'Prompt', sans-serif;
  font-size: 9px;
  color: var(--dm);
  white-space: nowrap;
}

/* Mobile search bar */
.view-mobile .sbar {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 14px 12px;
  padding: 11px 12px;
  background: var(--c2);
  border: 1px solid var(--bd);
  border-radius: 12px;
}
.view-mobile .sbar i {
  font-size: 15px;
  color: var(--dm);
}
.view-mobile .sbar span {
  font-size: 12px;
  color: var(--dm);
}

/* Mobile filter tabs */
.view-mobile .tf {
  display: flex;
  gap: 5px;
  margin: 0 14px 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.view-mobile .tf::-webkit-scrollbar {
  display: none;
}
.view-mobile .tf .t {
  padding: 6px 12px;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  background: var(--c1);
  border: 1px solid var(--bd);
  color: var(--mu);
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
}
.view-mobile .tf .t.on {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}

/* Mobile form field */
.view-mobile .mf {
  margin: 0 14px 9px;
}
.view-mobile .mf label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: var(--mu);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.view-mobile .mf .mi {
  width: 100%;
  padding: 12px;
  background: var(--c1);
  border: 1px solid var(--bd);
  border-radius: 11px;
  color: var(--tx);
  font-family: inherit;
  font-size: 13px;
  outline: none;
}
.view-mobile .mf .mi:focus {
  border-color: var(--red);
}

/* Mobile progress bar */
.view-mobile .pb {
  margin: 12px 14px 4px;
  height: 4px;
  background: var(--bd);
  border-radius: 4px;
  overflow: hidden;
}
.view-mobile .pb .f {
  height: 100%;
  background: var(--red);
  border-radius: 4px;
}

/* Mobile ticket option */
.view-mobile .to {
  margin: 0 14px 8px;
  padding: 16px;
  background: var(--c1);
  border: 1px solid var(--bd);
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: border-color 0.2s;
  cursor: pointer;
}
.view-mobile .to.sel {
  border-color: var(--red);
  box-shadow: 0 0 18px rgba(204, 34, 41, 0.12);
}
.view-mobile .to .toi {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.view-mobile .to .ton {
  font-size: 14px;
  font-weight: 700;
}
.view-mobile .to .tod {
  font-size: 10px;
  color: var(--mu);
  margin-top: 1px;
}
.view-mobile .to .top {
  font-family: 'Bebas Neue', 'Prompt', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--red);
}
.view-mobile .to .tou {
  font-size: 10px;
  color: var(--mu);
}

/* Mobile scanner frame */
.view-mobile .sfr {
  margin: 14px;
  height: 260px;
  border-radius: 18px;
  background: #1a1a1a;
  position: relative;
  overflow: hidden;
  border: 2px solid var(--red);
}
.view-mobile .sfr .so {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.view-mobile .sbx {
  width: 190px;
  height: 190px;
  position: relative;
}
.view-mobile .sbx .cn {
  position: absolute;
  width: 22px;
  height: 22px;
}
.view-mobile .sbx .cn::before,
.view-mobile .sbx .cn::after {
  content: '';
  position: absolute;
  background: var(--red);
}
.view-mobile .sbx .cn.tl { top: 0; left: 0; }
.view-mobile .sbx .cn.tl::before { top: 0; left: 0; width: 22px; height: 3px; }
.view-mobile .sbx .cn.tl::after { top: 0; left: 0; width: 3px; height: 22px; }
.view-mobile .sbx .cn.tr { top: 0; right: 0; }
.view-mobile .sbx .cn.tr::before { top: 0; right: 0; width: 22px; height: 3px; }
.view-mobile .sbx .cn.tr::after { top: 0; right: 0; width: 3px; height: 22px; }
.view-mobile .sbx .cn.bl { bottom: 0; left: 0; }
.view-mobile .sbx .cn.bl::before { bottom: 0; left: 0; width: 22px; height: 3px; }
.view-mobile .sbx .cn.bl::after { bottom: 0; left: 0; width: 3px; height: 22px; }
.view-mobile .sbx .cn.br { bottom: 0; right: 0; }
.view-mobile .sbx .cn.br::before { bottom: 0; right: 0; width: 22px; height: 3px; }
.view-mobile .sbx .cn.br::after { bottom: 0; right: 0; width: 3px; height: 22px; }
.view-mobile .sln {
  position: absolute;
  left: 10px;
  right: 10px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
  box-shadow: 0 0 14px var(--rgw);
  animation: scanM 2.2s ease-in-out infinite;
}
.view-mobile .sh {
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 11px;
  color: var(--mu);
  letter-spacing: 1px;
}

/* Mobile QR box */
.view-mobile .qz {
  margin: 14px;
  padding: 24px;
  text-align: center;
  background: #fff;
  border-radius: 18px;
}
.view-mobile .qz .qb {
  width: 180px;
  height: 180px;
  margin: 0 auto 12px;
  background: #000;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.view-mobile .qz .qi {
  font-family: 'Bebas Neue', 'Prompt', sans-serif;
  font-size: 12px;
  color: #333;
  letter-spacing: 2px;
}
.view-mobile .qz .qn {
  font-size: 15px;
  font-weight: 700;
  color: #000;
  margin-top: 3px;
}
.view-mobile .qz .qe {
  font-size: 10px;
  color: #888;
  margin-top: 2px;
}

/* Mobile scan result */
.view-mobile .srs {
  margin: 10px 14px;
  padding: 16px;
  border-radius: 14px;
  text-align: center;
}
.view-mobile .srs.ok {
  background: var(--gnb);
  border: 1px solid rgba(34, 197, 94, 0.2);
}
.view-mobile .srs.ok i {
  font-size: 40px;
  color: var(--gn);
}
.view-mobile .srs.fail {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
}
.view-mobile .srs.fail i {
  font-size: 40px;
  color: #ef4444;
}
.view-mobile .srs .st {
  font-size: 16px;
  font-weight: 700;
  margin-top: 6px;
}
.view-mobile .srs .sd {
  font-size: 11px;
  color: var(--mu);
  margin-top: 3px;
}

/* Mobile chart bar */
.view-mobile .cbar {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 100px;
  padding: 0 4px;
  margin: 10px 0;
}
.view-mobile .cbar .cb {
  flex: 1;
  border-radius: 6px 6px 0 0;
  background: var(--red);
  position: relative;
  transition: height 0.5s;
  min-height: 8px;
}
.view-mobile .cbar .cb .cv {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Bebas Neue', 'Prompt', sans-serif;
  font-size: 8px;
  color: var(--mu);
  white-space: nowrap;
}
.view-mobile .cbar .cb .cl {
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  color: var(--dm);
  white-space: nowrap;
}

/* Mobile toggle */
.view-mobile .tgl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.view-mobile .tgl:last-child {
  border-bottom: none;
}
.view-mobile .tgl .tl {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.view-mobile .tgl .tl i {
  font-size: 15px;
  color: var(--red);
}
.view-mobile .tgl .sw {
  width: 40px;
  height: 22px;
  border-radius: 12px;
  position: relative;
  cursor: pointer;
}
.view-mobile .tgl .sw.on {
  background: var(--red);
}
.view-mobile .tgl .sw.off {
  background: var(--dm);
}
.view-mobile .tgl .sw::after {
  content: '';
  position: absolute;
  top: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
}
.view-mobile .tgl .sw.on::after {
  right: 3px;
}
.view-mobile .tgl .sw.off::after {
  left: 3px;
}

/* Mobile donut */
.view-mobile .donut {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: conic-gradient(var(--gn) 0% 48%, var(--yl) 48% 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.view-mobile .donut .hole {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--c1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.view-mobile .donut .hole .dv {
  font-family: 'Bebas Neue', 'Prompt', sans-serif;
  font-size: 18px;
  font-weight: 700;
}
.view-mobile .donut .hole .dl {
  font-size: 8px;
  color: var(--mu);
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ============================================================================
   PUBLIC VIEWS — new class names (hub, event, buy, payment, my-tickets)
   ============================================================================ */

/* Hero (hub.php) — new naming */
.hero-in{position:relative;z-index:2;max-width:1600px;width:100%;margin:0 auto}
.hero-in-content{max-width:780px}
.hero-bd{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:20px;background:rgba(204,34,41,.12);border:1px solid rgba(204,34,41,.3);font-size:11px;color:var(--red);font-weight:700;letter-spacing:3px;text-transform:uppercase;margin-bottom:18px}
.hero-lg{font-family:'Bebas Neue','Prompt',sans-serif;font-size:42px;letter-spacing:6px;color:var(--red);font-style:italic;line-height:1;margin-bottom:10px}
.hero-lg span{color:var(--tx)}
.hero-t{font-family:'Bebas Neue','Prompt',sans-serif;font-size:98px;letter-spacing:8px;color:#fff;line-height:.95;margin-bottom:14px}
.hero-t span{color:var(--red)}
.hero-p{font-size:15px;color:var(--mu);margin-bottom:18px;line-height:1.7;max-width:560px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}

@media(max-width:768px){
    .hero-t{font-size:56px!important;letter-spacing:4px!important}
    .hero-lg{font-size:32px;letter-spacing:4px}
    .hero-cta{flex-direction:column}
    .hero-cta .btn{width:100%;justify-content:center}
}

/* Stats strip — grid 4 columns */
.stats-str{padding:24px 40px;background:linear-gradient(180deg,transparent,rgba(204,34,41,.04));border-top:1px solid var(--bd);border-bottom:1px solid var(--bd)}
.stats-in{max-width:1600px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:40px;padding:0 32px}
.stat{text-align:center;padding:10px}
.stat-v{font-family:'Bebas Neue','Prompt',sans-serif;font-size:44px;letter-spacing:3px;color:var(--red);line-height:1;margin-bottom:4px}
.stat-l{font-family:'Bebas Neue','Prompt',sans-serif;font-size:11px;color:var(--mu);letter-spacing:4px;text-transform:uppercase;font-weight:400}

@media(max-width:768px){
    .stats-str{padding:20px}
    .stats-in{grid-template-columns:repeat(2,1fr);gap:24px 16px}
    .stat-v{font-size:32px}
}

/* Section (sec-*) — new naming */
.sec-in{max-width:1600px;margin:0 auto;padding:0 32px}
.sec-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:32px;flex-wrap:wrap}
.sec-l{flex:1;min-width:240px}
.sec-s{font-size:11px;color:var(--red);letter-spacing:2px;text-transform:uppercase;font-weight:700;margin-bottom:8px;font-family:'Prompt',sans-serif}
.sec-t{font-family:'Bebas Neue','Prompt',sans-serif;font-size:44px;letter-spacing:5px;color:#fff;line-height:1}
.sec-t span{color:var(--red)}

@media(max-width:768px){
    .sec{padding:40px 20px}
    .sec-in{padding:0 14px}
    .sec-t{font-size:32px;letter-spacing:3px}
    .sec-hd{flex-direction:column;align-items:flex-start;gap:12px}
}
@media(max-width:520px){
    .sec-in{padding:0 10px}
}

/* Empty state card */
.empty-state{background:var(--c1);border:1px solid var(--bd);border-radius:14px;padding:60px 30px;text-align:center}
.empty-state i{font-size:42px;color:var(--mu);margin-bottom:14px;display:block;opacity:.5}
.empty-state .msg{font-size:15px;color:var(--tx);margin-bottom:4px;font-weight:600}
.empty-state .sub{font-size:12px;color:var(--mu)}

/* Buy flow (buy.php) */
.tk-opt{background:var(--c1);border:1px solid var(--bd);border-radius:12px;padding:18px;margin-bottom:12px;cursor:pointer;transition:all .2s}
.tk-opt:hover{border-color:var(--red);background:var(--c2)}
.tk-opt.sel{border-color:var(--red);background:rgba(204,34,41,.06);box-shadow:0 0 0 2px rgba(204,34,41,.2)}

/* Payment method selector */
.payment-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:24px}
.pm-opt{background:var(--c1);border:1px solid var(--bd);border-radius:12px;padding:20px;cursor:pointer;text-align:center;transition:all .2s}
.pm-opt:hover{border-color:var(--red)}
.pm-opt.sel{border-color:var(--red);background:rgba(204,34,41,.06)}
.pm-opt i{font-size:30px;color:var(--red);margin-bottom:8px;display:block}
.pm-opt .ttl{font-size:14px;font-weight:700;color:var(--tx);margin-bottom:3px}
.pm-opt .sub{font-size:11px;color:var(--mu)}

@media(max-width:600px){
    .payment-grid{grid-template-columns:1fr}
}

/* ============================================================================
   RESPONSIVE VIEW SWITCHING
   - Desktop (>=769px): show .view-desktop, hide .view-mobile
   - Mobile  (<=768px): show .view-mobile,  hide .view-desktop
   Nav partials are now properly split — no .ab/.bn leak to desktop.
   ============================================================================ */
@media (min-width: 769px) {
    .view-mobile { display: none !important; }
}

@media (max-width: 768px) {
    .view-desktop { display: none !important; }
}

/* ============================================================================
   BANNER AD SLOTS (ROII HIPHOPCOUSIN)
   ============================================================================ */
.banner-slot{
    position:relative;display:block;overflow:hidden;border-radius:12px;
    text-decoration:none;color:inherit;
}
.banner-slot img{display:block}
.banner-slot-label{
    position:absolute;top:8px;right:8px;background:rgba(0,0,0,.7);color:#fff;
    padding:2px 8px;border-radius:4px;font-family:'Bebas Neue','Prompt',sans-serif;
    font-size:9px;letter-spacing:1.5px;backdrop-filter:blur(8px);
}

.banner-slot-empty{
    background:var(--c1);border:1px dashed var(--bd2);
    transition:border-color .2s, background .2s;
}
.banner-slot-empty:hover{border-color:var(--red);background:rgba(204,34,41,.04)}
.banner-slot-empty-in{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:8px;padding:20px;text-align:center;color:var(--mu);
}
.banner-slot-empty-in i{font-size:32px;color:var(--red);opacity:.6}
.banner-slot-title{
    font-family:'Bebas Neue','Prompt',sans-serif;font-size:20px;letter-spacing:3px;
    color:var(--red);font-style:italic;
}
.banner-slot-sub{
    font-size:11px;color:var(--mu);font-family:'Bebas Neue','Prompt',sans-serif;
    letter-spacing:1px;
}
.banner-slot-cta{
    margin-top:6px;padding:6px 14px;background:var(--red);color:#fff;
    border-radius:6px;font-size:11px;font-weight:700;letter-spacing:1.5px;
}

/* Google Ads slot wrapper */
.google-ads-slot{
    background:var(--c1);border:1px dashed var(--bd);border-radius:10px;
    padding:14px;min-height:90px;display:flex;align-items:center;justify-content:center;
}
.google-ads-slot:empty::before{
    content:'Advertisement';color:var(--mu);font-size:11px;letter-spacing:2px;
    text-transform:uppercase;
}

/* Article content styling */
.article-content{font-size:16px;line-height:1.85;color:var(--tx)}
.article-content p{margin:0 0 1.2em}
.article-content h2,.article-content h3{
    font-family:'Prompt',sans-serif;color:var(--tx);
    margin:1.8em 0 .6em;line-height:1.3;
}
.article-content h2{font-size:24px;font-weight:700}
.article-content h3{font-size:19px;font-weight:700}
.article-content a{color:var(--red);text-decoration:underline}
.article-content blockquote{
    border-left:3px solid var(--red);padding:10px 20px;
    margin:1.2em 0;background:var(--c1);color:var(--mu);font-style:italic;
    border-radius:0 8px 8px 0;
}

/* ============================================================================
   HERO REDESIGN — split layout with visual element
   ============================================================================ */
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.94)}}

.hero-grid{
    display:grid;grid-template-columns:1fr 400px;gap:60px;align-items:center;
}
.hero-content{max-width:720px}

.hero-bd{
    display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:24px;
    background:rgba(204,34,41,.12);border:1px solid rgba(204,34,41,.3);
    font-size:11px;color:var(--red);font-weight:700;letter-spacing:3px;
    text-transform:uppercase;margin-bottom:22px;
    box-shadow:0 4px 20px rgba(204,34,41,.15);
}

.hero-lg{
    font-family:'Bebas Neue','Prompt',sans-serif;font-size:48px;letter-spacing:7px;
    color:var(--red);font-style:italic;line-height:1;margin-bottom:14px;
    display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.hero-lg span:not(.tag){color:var(--tx)}
.hero-lg .tag{
    font-family:'Prompt',sans-serif;font-size:11px;font-style:normal;
    background:var(--red);color:#fff;padding:5px 11px;border-radius:6px;
    letter-spacing:2.5px;font-weight:800;line-height:1;
}

.hero-t{
    font-family:'Bebas Neue','Prompt',sans-serif;font-size:112px;letter-spacing:9px;
    color:#fff;line-height:.92;margin-bottom:18px;font-weight:400;
}
.hero-t span{color:var(--red)}

.hero-p{
    font-size:16px;color:var(--mu);line-height:1.7;margin-bottom:20px;max-width:600px;
}

.hero-tags{
    display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px;
}
.hero-tags span{
    display:inline-flex;align-items:center;gap:6px;
    padding:7px 14px;background:var(--c1);border:1px solid var(--bd);
    border-radius:8px;font-size:12px;color:var(--tx);font-weight:600;
}
.hero-tags span i{color:var(--red);font-size:13px}

.hero-cta{display:flex;gap:14px;flex-wrap:wrap}

/* Visual element — vinyl/disc illustration */
.hero-visual{
    position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
    min-height:420px;
}
.hero-disc{
    position:relative;width:340px;height:340px;
    background:radial-gradient(circle at 50% 50%,#000 0 20%,var(--c2) 20% 30%,#000 30% 32%,var(--c2) 32% 40%,#000 40% 42%,var(--c2) 42% 50%,#000 50% 52%,var(--c2) 52% 100%);
    border-radius:50%;border:3px solid var(--red);
    box-shadow:0 30px 80px rgba(204,34,41,.3),inset 0 0 40px rgba(0,0,0,.8);
    animation:spin 20s linear infinite;
    display:flex;align-items:center;justify-content:center;
}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.hero-disc-inner{
    width:100px;height:100px;border-radius:50%;background:var(--red);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 0 40px rgba(204,34,41,.6);animation:spin 20s linear infinite reverse;
}
.hero-disc-inner i{font-size:50px;color:#fff}

.hero-badges{
    display:flex;flex-direction:column;gap:10px;margin-top:30px;align-items:center;
}
.hero-badge{
    display:inline-flex;align-items:center;gap:8px;
    padding:6px 14px;background:rgba(15,15,15,.7);
    border:1px solid var(--bd);border-radius:20px;
    font-family:'Bebas Neue','Prompt',sans-serif;font-size:10px;
    letter-spacing:2px;color:var(--mu);font-weight:700;
    backdrop-filter:blur(10px);
}
.hero-badge i{color:var(--red);font-size:11px}

@media (max-width:1024px){
    .hero-grid{grid-template-columns:1fr;gap:40px}
    .hero-visual{min-height:auto}
    .hero-disc{width:240px;height:240px}
    .hero-disc-inner{width:72px;height:72px}
    .hero-disc-inner i{font-size:34px}
    .hero-t{font-size:72px!important;letter-spacing:5px}
    .hero-lg{font-size:36px}
}

@media (max-width:768px){
    .hero{padding:50px 20px 40px;min-height:auto}
    .hero-t{font-size:56px!important;letter-spacing:3px}
    .hero-cta{flex-direction:column;width:100%}
    .hero-cta .btn{width:100%;justify-content:center}
    .hero-lg{font-size:28px;letter-spacing:4px}
    .hero-lg .tag{font-size:10px}
    .hero-visual{display:none}
}

/* ============================================================================
   FEATURED NEWS HERO (on /news) + Home news showcase
   ============================================================================ */
.news-home-grid{
    display:grid;
    /* auto-fit (not auto-fill) so when there are fewer cards than would
       fill the row at the min track width, the cards expand to take up
       the full width instead of leaving an empty slot on the right. */
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:14px;
}
.news-home-grid > a{text-decoration:none;color:inherit;display:block;position:relative;overflow:hidden;border-radius:14px}

.news-showcase-card{
    position:relative;width:100%;
    aspect-ratio:4/5;
    background-size:cover;background-position:center;
    background-color:#1a1a1a;
    border-radius:14px;overflow:hidden;transition:transform .25s, box-shadow .25s;
    border:1px solid var(--bd);
}
.news-showcase-card:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(204,34,41,.25);border-color:var(--red)}
.news-showcase-card::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.92) 100%);
}
.news-showcase-card .ncc-body{
    position:absolute;inset:0;padding:16px 18px;display:flex;flex-direction:column;
    justify-content:flex-end;z-index:2;
}
.news-showcase-card .ncc-cat{
    align-self:flex-start;padding:3px 9px;border-radius:5px;
    font-size:9px;font-weight:700;letter-spacing:1.5px;color:#fff;margin-bottom:8px;
    font-family:'Prompt',sans-serif;
}
.news-showcase-card .ncc-title{
    color:#fff;font-family:'Prompt',sans-serif;font-size:14px;font-weight:700;
    line-height:1.35;margin:0 0 8px;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
    overflow:hidden;
}
.news-showcase-card .ncc-meta{
    color:rgba(255,255,255,.7);font-size:10px;font-family:'Bebas Neue','Prompt',sans-serif;
    display:flex;gap:10px;flex-wrap:wrap;
}

@media (max-width: 700px) {
    .news-home-grid{
        grid-template-columns:repeat(2,1fr);
        gap:10px;
    }
    .news-showcase-card .ncc-body{padding:12px 14px}
    .news-showcase-card .ncc-title{font-size:13px}
}

.news-empty{
    display:flex;align-items:center;justify-content:center;flex-direction:column;
    background:var(--c1);border:1px dashed var(--bd2);border-radius:14px;
    padding:50px 20px;text-align:center;grid-column:1/-1;
}
.news-empty i{font-size:42px;color:var(--mu);margin-bottom:10px;opacity:.5}
.news-empty .msg{font-size:14px;color:var(--mu);font-weight:700}
.news-empty .sub{font-size:12px;color:var(--mu);opacity:.7;margin-top:4px}

@media (max-width:900px){
    .news-home-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto}
    .news-home-grid > a:nth-child(1){grid-row:1;grid-column:1/-1}
}
@media (max-width:600px){
    .news-home-grid{grid-template-columns:repeat(2, minmax(0, 1fr));gap:10px}
    .news-home-grid > a:nth-child(1){grid-column:1/-1}  /* first item spans both cols as a featured banner */
}
@media (max-width:360px){
    .news-home-grid{gap:8px}
}

/* ============================================================================
   Widen containers across board for larger screens
   ============================================================================ */
.hero-p,.sec-s,.sec-t,.sec-hd{max-width:1440px}
section.sec{padding:60px 0 70px}

@media (min-width:1200px){
    section.sec{padding:70px 0 80px}
}

/* ============================================================================
   NEWS ARTICLE DETAIL PAGE
   ============================================================================ */
.news-article-wrap {
    padding: 40px 24px 60px;
    max-width: 1400px;
    margin: 0 auto;
}
.news-article-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 48px;
    align-items: start;
}
.news-article-main {
    min-width: 0;
    max-width: 760px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}
.news-article-sidebar {
    min-width: 0;
}
.na-sidebar-sticky {
    position: sticky;
    top: 90px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Breadcrumb */
.na-breadcrumb {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 11px;
    color: var(--mu);
    font-family: 'Bebas Neue', 'Prompt', sans-serif;
    letter-spacing: 1.5px;
    margin-bottom: 22px;
}
.na-breadcrumb a {
    color: var(--mu);
    text-decoration: none;
    transition: color .15s;
}
.na-breadcrumb a:hover { color: var(--tx); }
.na-breadcrumb i { font-size: 9px; color: var(--dm); }

/* Category badge */
.na-category-badge {
    display: inline-block;
    color: #fff;
    padding: 5px 12px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 16px;
    font-family: 'Prompt', sans-serif;
}

/* Title */
.na-title {
    font-family: 'Prompt', sans-serif;
    font-size: 38px;
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 18px;
    color: var(--tx);
    letter-spacing: -0.3px;
    overflow-wrap: break-word;
}

/* Excerpt */
.na-excerpt {
    font-size: 17px;
    line-height: 1.65;
    color: var(--mu);
    margin: 0 0 22px;
    font-weight: 400;
    overflow-wrap: break-word;
}

/* Meta */
.na-meta {
    display: flex;
    gap: 20px;
    font-size: 12px;
    color: var(--mu);
    font-family: 'Bebas Neue', 'Prompt', sans-serif;
    padding: 14px 0;
    border-top: 1px solid var(--bd);
    border-bottom: 1px solid var(--bd);
    margin-bottom: 28px;
    flex-wrap: wrap;
}
.na-meta i { color: var(--red); margin-right: 3px; }

/* Cover */
.na-cover {
    margin-bottom: 30px;
    border-radius: 16px;
    overflow: hidden;
    background: var(--c1);
    max-width: 100%;
}
.na-cover img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 4/5;
    object-fit: cover;
    max-height: 700px;
}

/* Header grid: title text + cover image side-by-side */
.na-header-grid {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 28px;
    align-items: start;
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--bd);
}
.na-header-text { min-width: 0 }
.na-header-cover {
    width: 280px;
    aspect-ratio: 4/5;
    border-radius: 14px;
    overflow: hidden;
    background: var(--c1);
    border: 1px solid var(--bd);
}
.na-header-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.na-header-cover a { display: block; height: 100% }
@media (max-width: 920px) {
    .na-header-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .na-header-cover {
        width: 100%;
        max-width: 320px;
        aspect-ratio: 4/5;
        margin: 0 auto;
    }
}

/* Content */
.na-content {
    font-family: 'Prompt', sans-serif;
    font-size: 16px;
    line-height: 1.85;
    color: var(--tx);
    margin-bottom: 32px;
    overflow-wrap: break-word;
    word-break: break-word;
}
.na-content p { margin: 0 0 1.2em; }
.na-content a { color: var(--red); text-decoration: underline; }
.na-content img { max-width: 100%; height: auto; border-radius: 10px; margin: 1em 0; }
.na-content h2, .na-content h3 {
    font-family: 'Prompt', sans-serif;
    margin: 1.8em 0 0.6em;
    font-weight: 700;
    line-height: 1.3;
}
.na-content h2 { font-size: 26px; }
.na-content h3 { font-size: 20px; }
.na-content blockquote {
    border-left: 3px solid var(--red);
    padding: 12px 22px;
    margin: 1.3em 0;
    background: var(--c1);
    color: var(--mu);
    font-style: italic;
    border-radius: 0 10px 10px 0;
}
.na-content ul, .na-content ol { padding-left: 24px; margin: 0 0 1.2em; }
.na-content li { margin-bottom: 0.4em; }

/* Section title */
.na-section-title {
    font-family: 'Bebas Neue', 'Prompt', sans-serif;
    font-size: 22px;
    letter-spacing: 3px;
    color: var(--red);
    font-style: italic;
    margin-bottom: 16px;
}

/* Gallery */
.na-gallery { margin: 36px 0 30px; }
.na-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}
.na-gallery-item {
    aspect-ratio: 4/5;
    background-size: cover;
    background-position: center;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    transition: transform .2s;
}
.na-gallery-item:hover { transform: translateY(-2px); }
.na-gallery-caption {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 10px 12px;
    background: linear-gradient(transparent, rgba(0,0,0,.85));
    color: #fff;
    font-size: 11px;
    line-height: 1.4;
}

/* Tags */
.na-tags {
    margin: 30px 0;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.na-tags-label {
    font-size: 11px;
    color: var(--mu);
    font-weight: 700;
    letter-spacing: 2px;
    font-family: 'Bebas Neue', 'Prompt', sans-serif;
    margin-right: 4px;
}
.na-tag {
    background: var(--c2);
    border: 1px solid var(--bd);
    padding: 6px 14px;
    border-radius: 7px;
    font-size: 12px;
    color: var(--tx);
    transition: border-color .15s;
}
.na-tag:hover { border-color: var(--red); }

/* Share */
.na-share {
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid var(--bd);
}
.na-share-label {
    font-size: 11px;
    color: var(--mu);
    font-weight: 700;
    letter-spacing: 2px;
    font-family: 'Bebas Neue', 'Prompt', sans-serif;
    margin-bottom: 14px;
}
.na-share-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.na-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    color: #fff;
    border-radius: 9px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: transform .15s, opacity .15s;
}
.na-share-btn:hover { transform: translateY(-1px); opacity: .9; }
.na-share-fb { background: #1877f2; }
.na-share-tw { background: #000; }
.na-share-line { background: #00c300; }

/* Related */
.na-related {
    background: var(--c1);
    border: 1px solid var(--bd);
    border-radius: 14px;
    padding: 20px;
}
.na-related-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.na-related-item {
    display: flex;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    padding: 8px;
    margin: -8px;
    border-radius: 10px;
    transition: background .15s;
}
.na-related-item:hover { background: var(--c2); }
.na-related-thumb {
    width: 72px;
    height: 90px;
    flex-shrink: 0;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
}
.na-related-info { flex: 1; min-width: 0; }
.na-related-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--tx);
    line-height: 1.4;
    margin-bottom: 4px;
    overflow-wrap: break-word;
}
.na-related-meta {
    font-size: 10px;
    color: var(--mu);
    font-family: 'Bebas Neue', 'Prompt', sans-serif;
    letter-spacing: 1px;
}

/* Mobile responsive */
@media (max-width: 900px) {
    .news-article-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .news-article-main { max-width: 100%; }
    .na-sidebar-sticky { position: static; }
    .na-title { font-size: 28px; }
    .na-excerpt { font-size: 15px; }
    .news-article-wrap { padding: 30px 18px 40px; }
}
@media (max-width: 520px) {
    .na-title { font-size: 24px; }
    .na-content { font-size: 15px; }
    .na-gallery-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ============================================================================
   ROII CUSTOM SCROLLBAR — matches dark theme
   ============================================================================ */

/* Firefox */
.ad-sb, .ad-mn, .mobile-sc, body, html {
    scrollbar-width: thin;
    scrollbar-color: #2a2a2a transparent;
}

/* WebKit (Chrome/Safari/Edge) — whole site */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #2a2a2a;
    border-radius: 10px;
    border: 1px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
    background: #CC2229;
    background-clip: padding-box;
}
::-webkit-scrollbar-corner {
    background: transparent;
}

/* Admin sidebar — even more subtle (only shows on hover) */
.ad-sb {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color .3s;
}
.ad-sb:hover {
    scrollbar-color: #2a2a2a transparent;
}
.ad-sb::-webkit-scrollbar {
    width: 4px;
}
.ad-sb::-webkit-scrollbar-track {
    background: transparent;
}
.ad-sb::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 10px;
    transition: background .2s;
}
.ad-sb:hover::-webkit-scrollbar-thumb {
    background: #2a2a2a;
}
.ad-sb::-webkit-scrollbar-thumb:hover {
    background: #CC2229;
}

/* Admin main — subtle red on hover */
.ad-mn::-webkit-scrollbar {
    width: 8px;
}
.ad-mn::-webkit-scrollbar-thumb {
    background: #222;
    border-radius: 10px;
}
.ad-mn::-webkit-scrollbar-thumb:hover {
    background: #CC2229;
}

/* ============================================================================
   CUSTOMER ACCOUNT — register, login, profile
   ============================================================================ */

/* Nav user chip + login link (header) */
/* User dropdown — wrapper gives us a positioning context for the menu. */
.nav-user-wrap {
    position: relative;
}
.nav-user-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px 6px 6px;
    background: var(--c1);
    border: 1px solid var(--bd);
    border-radius: 30px;
    color: var(--tx);
    text-decoration: none;
    font-family: 'Prompt', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.nav-user-chip:hover,
.nav-user-chip[aria-expanded="true"] {
    border-color: var(--red);
    background: var(--c2);
}
.nav-user-av {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Bebas Neue', 'Prompt', sans-serif;
    font-weight: 700;
    font-style: italic;
    font-size: 14px;
    letter-spacing: 1px;
    flex-shrink: 0;
}
.nav-user-name {
    max-width: 110px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nav-user-caret {
    font-size: 11px;
    color: var(--mu);
    transition: transform .18s;
    margin-left: 2px;
}
.nav-user-chip[aria-expanded="true"] .nav-user-caret {
    transform: rotate(180deg);
    color: var(--red);
}

/* Dropdown menu. Hidden by default — JS toggles aria-hidden + a class to
   show it. Uses position:absolute so it doesn't push nav content around. */
.nav-user-dd {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 260px;
    background: var(--c1);
    border: 1px solid var(--bd);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(204,34,41,.08);
    z-index: 100;
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .15s, transform .15s, visibility .15s;
    font-family: 'Prompt', sans-serif;
}
.nav-user-dd.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.nav-user-dd-hd {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px 12px;
    border-bottom: 1px solid var(--bd);
    margin-bottom: 6px;
}
.nav-user-dd-av {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--red), var(--rbr, #E8272F));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Bebas Neue', 'Prompt', sans-serif;
    font-weight: 700;
    font-style: italic;
    font-size: 18px;
    letter-spacing: 1px;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(204,34,41,.35);
}
.nav-user-dd-info { min-width: 0; flex: 1; }
.nav-user-dd-info .nm {
    font-family: 'Prompt', sans-serif;
    font-weight: 700;
    color: var(--tx);
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nav-user-dd-info .em {
    font-size: 11px;
    color: var(--mu);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}
.nav-user-dd a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    text-decoration: none;
    color: var(--tx);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    transition: background .12s, color .12s;
}
.nav-user-dd a i {
    color: var(--red);
    font-size: 15px;
    width: 18px;
    text-align: center;
}
.nav-user-dd a:hover {
    background: var(--c2);
}
.nav-user-dd a.danger { color: var(--red); }
.nav-user-dd a.danger:hover { background: rgba(204,34,41,.1); }
.nav-user-dd a.danger i { color: var(--red); }
.nav-user-dd-sep {
    height: 1px;
    background: var(--bd);
    margin: 6px 8px;
}
.nav-login-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--red);
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: opacity .15s;
}
.nav-login-link:hover { opacity: 0.85; }

/* ============================================================================
   AUTH PAGES (register / login / forgot / OTP verify)
   Shared shell used by every account-flow page — improving here improves all.
   ============================================================================ */
.auth-wrap {
    position: relative;
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    overflow: hidden;
}
/* Ambient red glow behind the card */
.auth-wrap::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 700px;
    height: 700px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(204,34,41,.15), transparent 60%);
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}
/* Big faded ROII watermark for cinematic feel */
.auth-wrap::after {
    content: 'ROII';
    position: absolute;
    bottom: -100px;
    right: -15px;
    font-family: 'Bebas Neue', 'Prompt', sans-serif;
    font-size: 280px;
    font-style: italic;
    letter-spacing: 14px;
    color: rgba(204,34,41,.04);
    line-height: 1;
    pointer-events: none;
    z-index: 0;
    user-select: none;
}
.auth-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 480px;
    background: linear-gradient(180deg, rgba(20,20,20,.95), rgba(15,15,15,.95));
    border: 1px solid var(--bd);
    border-radius: 20px;
    padding: 42px 36px 36px;
    box-shadow:
        0 25px 80px rgba(0,0,0,.6),
        0 0 0 1px rgba(255,255,255,.02) inset,
        0 1px 0 0 rgba(255,255,255,.04) inset;
    backdrop-filter: blur(10px);
}
.auth-header {
    text-align: center;
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--bd);
}
.auth-title {
    font-family: 'Bebas Neue', 'Prompt', sans-serif;
    font-size: 38px;
    font-weight: 700;
    font-style: italic;
    color: #fff;
    letter-spacing: 3px;
    margin: 0 0 4px;
    line-height: 1;
}
.auth-subtitle {
    font-family: 'Bebas Neue', 'Prompt', sans-serif;
    font-size: 13px;
    letter-spacing: 5px;
    color: var(--mu);
    font-style: italic;
    margin-bottom: 16px;
    text-transform: uppercase;
}
.auth-intro {
    font-size: 13px;
    color: var(--mu);
    line-height: 1.7;
    margin: 0;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
}
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.auth-field { display: flex; flex-direction: column; gap: 7px; position: relative; }
.auth-field label {
    font-size: 10px;
    color: var(--mu);
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
}
.auth-field label i { color: var(--red); font-size: 12px; }
.auth-field-input-wrap { position: relative; }
.auth-field-input-wrap > i.field-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--mu);
    font-size: 15px;
    pointer-events: none;
    transition: color .15s;
}
.auth-field-input-wrap:focus-within > i.field-icon { color: var(--red); }
.auth-field input {
    width: 100%;
    padding: 13px 14px 13px 42px;
    background: var(--c2);
    border: 1px solid var(--bd);
    border-radius: 11px;
    color: var(--tx);
    font-family: 'Prompt', sans-serif;
    font-size: 14px;
    outline: none;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.auth-field input:hover { border-color: var(--bd2); }
.auth-field input:focus {
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(204,34,41,.12);
    background: #181818;
}
.auth-field input:disabled,
.auth-field input[readonly] {
    opacity: 0.7;
    cursor: not-allowed;
}
/* Field WITHOUT a leading icon — restore default left padding */
.auth-field:not(:has(.auth-field-input-wrap)) input { padding-left: 14px; }
.auth-hint {
    font-size: 11px;
    color: var(--mu);
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.auth-hint i { color: var(--red); }
.req { color: var(--rd2); }
.auth-btn {
    margin-top: 8px;
    padding: 15px;
    background: linear-gradient(135deg, var(--red), var(--rbr));
    color: #fff;
    border: none;
    border-radius: 11px;
    font-family: 'Prompt', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: transform .12s, box-shadow .15s, filter .12s;
    box-shadow: 0 8px 24px rgba(204,34,41,.28);
    text-transform: uppercase;
}
.auth-btn:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 12px 32px rgba(204,34,41,.4); }
.auth-btn:active { transform: scale(0.98) translateY(0); }
.auth-btn-sc {
    background: var(--c2);
    color: var(--tx);
    border: 1px solid var(--bd);
    box-shadow: none;
}
.auth-btn-sc:hover { border-color: var(--red); opacity: 1; box-shadow: 0 4px 14px rgba(204,34,41,.18); }
.auth-footer {
    text-align: center;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--bd);
    font-size: 13px;
    color: var(--mu);
}
.auth-footer a {
    color: var(--red);
    text-decoration: none;
    font-weight: 700;
    transition: opacity .15s;
}
.auth-footer a:hover { opacity: .82; text-decoration: underline; }

/* ACCOUNT DASHBOARD */
.account-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px 60px;
}
.account-header {
    background: var(--c1);
    border: 1px solid var(--bd);
    border-radius: 18px;
    padding: 26px;
    display: flex;
    align-items: center;
    gap: 22px;
    margin-bottom: 22px;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}
.account-header::before {
    content: '';
    position: absolute;
    right: 0; top: 0;
    width: 360px; height: 100%;
    background: radial-gradient(circle at top right, rgba(204,34,41,.1), transparent 70%);
    pointer-events: none;
}
.account-avatar {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--red), var(--rbr));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Bebas Neue', 'Prompt', sans-serif;
    font-weight: 700;
    font-style: italic;
    font-size: 38px;
    letter-spacing: 2px;
    flex-shrink: 0;
    box-shadow: 0 8px 30px rgba(204,34,41,.35);
    position: relative;
    z-index: 1;
}
.account-hi { flex: 1; min-width: 200px; position: relative; z-index: 1; }
.account-hi-label {
    font-family: 'Prompt', sans-serif;
    font-size: 10px;
    color: var(--mu);
    letter-spacing: 3px;
    margin-bottom: 6px;
    font-weight: 700;
    text-transform: uppercase;
}
.account-hi-name {
    font-family: 'Bebas Neue', 'Prompt', sans-serif;
    font-size: 38px;
    font-weight: 700;
    font-style: italic;
    letter-spacing: 2px;
    margin: 0 0 10px;
    color: var(--tx);
    line-height: 1;
}
.account-hi-meta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--mu);
    font-family: 'Prompt', sans-serif;
}
.account-hi-meta i { color: var(--red); margin-right: 4px; }
.account-logout {
    padding: 10px 18px;
    background: var(--c2);
    border: 1px solid var(--bd);
    border-radius: 10px;
    color: var(--tx);
    text-decoration: none;
    font-family: 'Prompt', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    transition: all .15s;
    position: relative;
    z-index: 1;
}
.account-logout:hover {
    border-color: var(--red);
    color: var(--red);
    background: rgba(204,34,41,.08);
}

/* Stats */
.account-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 26px;
}
.account-stat {
    background: var(--c1);
    border: 1px solid var(--bd);
    border-radius: 14px;
    padding: 20px 22px;
    position: relative;
    overflow: hidden;
    transition: transform .15s, border-color .15s;
}
.account-stat:hover {
    transform: translateY(-2px);
    border-color: var(--red);
}
.account-stat::after {
    content: '';
    position: absolute;
    right: -30px; top: -30px;
    width: 130px; height: 130px;
    background: radial-gradient(circle at center, rgba(204,34,41,.12), transparent 70%);
    pointer-events: none;
}
.account-stat-v {
    font-family: 'Bebas Neue', 'Prompt', sans-serif;
    font-size: 48px;
    font-weight: 700;
    font-style: italic;
    letter-spacing: 2px;
    color: var(--tx);
    line-height: 1;
    margin-bottom: 8px;
    text-shadow: 0 2px 18px rgba(204,34,41,.15);
}
.account-stat-l {
    font-family: 'Prompt', sans-serif;
    font-size: 10px;
    color: var(--mu);
    font-weight: 700;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.account-stat-l i {
    color: var(--red);
    font-size: 12px;
}

/* Section blocks */
.account-section {
    background: var(--c1);
    border: 1px solid var(--bd);
    border-radius: 18px;
    padding: 26px;
    margin-bottom: 22px;
}
.account-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 10px;
}
.account-section-head h2 {
    font-family: 'Prompt', sans-serif;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    color: var(--tx);
}
.account-cta, .account-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: var(--red);
    color: #fff;
    border-radius: 10px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}

/* Empty state */
.account-empty {
    text-align: center;
    padding: 40px 20px;
}
.account-empty > i {
    font-size: 56px;
    color: var(--mu);
    opacity: 0.5;
    display: block;
    margin-bottom: 14px;
}
.account-empty .account-btn i,
.account-empty .account-cta i {
    font-size: 14px;
    color: inherit;
    opacity: 1;
    display: inline;
    margin: 0;
}
.account-empty .msg {
    font-size: 16px;
    color: var(--tx);
    font-weight: 600;
    margin-bottom: 6px;
}
.account-empty .sub {
    font-size: 13px;
    color: var(--mu);
    margin-bottom: 20px;
}

/* Order rows */
.account-orders {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.account-order {
    background: var(--c2);
    border: 1px solid var(--bd);
    border-radius: 14px;
    padding: 18px;
    display: flex;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
    transition: border-color .15s;
}
.account-order:hover { border-color: var(--red); }
.account-order-main { flex: 1; min-width: 220px; }
.account-order-event .eventname {
    font-size: 15px;
    font-weight: 700;
    color: var(--tx);
    margin-bottom: 4px;
    overflow-wrap: break-word;
}
.account-order-event .eventmeta {
    font-size: 11px;
    color: var(--mu);
}
.account-order-event .eventmeta i { color: var(--red); }
.account-order-meta {
    margin-top: 8px;
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
}
.account-order-no {
    font-family: 'Bebas Neue', 'Prompt', sans-serif;
    font-size: 11px;
    color: var(--mu);
    background: var(--c1);
    padding: 3px 8px;
    border-radius: 5px;
}
.account-order-status {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
}
.account-order-side {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
    min-width: 130px;
}
.account-order-tickets {
    font-size: 12px;
    color: var(--mu);
}
.account-order-tickets i { color: var(--red); margin-right: 3px; }
.account-order-price {
    font-family: 'Bebas Neue', 'Prompt', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--gn);
}
.account-order-btn {
    margin-top: 6px;
    padding: 7px 14px;
    background: var(--red);
    color: #fff;
    border-radius: 7px;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
}

/* Profile edit grid */
.account-profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}
.account-profile-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.account-profile-ttl {
    font-size: 13px;
    color: var(--tx);
    font-weight: 700;
    margin-bottom: -4px;
}

/* Account dashboard quickactions — replaces the old edit+password forms.
   Each row is a clickable card that navigates to its own page. */
.account-quickactions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 8px 18px 16px;
}
.account-quickaction {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: var(--c2);
    border: 1px solid var(--bd);
    border-radius: 12px;
    text-decoration: none;
    color: var(--tx);
    font-family: 'Prompt', sans-serif;
    transition: border-color .15s, background .15s, transform .15s;
}
.account-quickaction:hover {
    border-color: var(--red);
    background: rgba(204,34,41,.05);
    transform: translateX(3px);
}
.account-quickaction > i:first-child {
    font-size: 22px;
    color: var(--red);
    width: 28px;
    text-align: center;
    flex-shrink: 0;
}
.account-quickaction .hd {
    font-weight: 700;
    color: var(--tx);
    font-size: 14px;
    margin-bottom: 2px;
}
.account-quickaction .sub {
    font-size: 11px;
    color: var(--mu);
}
.account-quickaction > div { flex: 1; min-width: 0; }
.account-quickaction .arr {
    font-size: 18px;
    color: var(--mu);
    transition: color .15s, transform .15s;
}
.account-quickaction:hover .arr { color: var(--red); transform: translateX(3px); }
.account-quickaction.danger > i:first-child { color: #ef4444; }
.account-quickaction.danger:hover { border-color: #ef4444; background: rgba(239,68,68,.05); }
.account-quickaction.danger:hover .arr { color: #ef4444; }

/* Donation history — compact rows shown on /account dashboard */
.account-donations-mini {
    display: flex; flex-direction: column; gap: 8px;
}
.account-donation-row {
    display: grid;
    grid-template-columns: 90px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 12px 16px;
    background: var(--c1);
    border: 1px solid var(--bd);
    border-radius: 11px;
    transition: border-color .15s;
}
.account-donation-row:hover { border-color: rgba(204,34,41,.4); }
.account-donation-row .amt {
    font-family: 'Bebas Neue', 'Prompt', sans-serif;
    font-size: 22px; letter-spacing: 1px;
    color: var(--red); font-style: italic; line-height: 1;
}
.account-donation-row .info { min-width: 0; }
.account-donation-row .info .ev {
    font-size: 13px; font-weight: 700; color: var(--tx);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.account-donation-row .info .when {
    font-size: 11px; color: var(--mu); margin-top: 2px;
    font-family: 'Prompt', sans-serif;
}
.account-donation-row .status {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .5px;
    white-space: nowrap;
}
@media (max-width: 540px) {
    .account-donation-row { grid-template-columns: 1fr auto; }
    .account-donation-row .amt { grid-column: 1 / -1; font-size: 20px; }
}

/* Mobile responsive */
@media (max-width: 700px) {
    .account-profile-grid { grid-template-columns: 1fr; }
    .account-header { gap: 14px; padding: 20px; }
    .account-avatar { width: 56px; height: 56px; font-size: 24px; }
    .account-hi-name { font-size: 22px; }
    .account-logout { width: 100%; text-align: center; }
    .account-order { padding: 14px; }
    .account-order-side { width: 100%; align-items: flex-start; }
    .nav-user-name { display: none; }
}

/* ============================================================================
   THEMED FILE UPLOAD — replaces ugly browser default
   ============================================================================ */
.ad-file-wrap {
    background: var(--c1);
    border: 1px dashed var(--bd2);
    border-radius: 12px;
    padding: 20px;
    transition: border-color .2s, background .2s;
}
.ad-file-wrap:hover {
    border-color: var(--red);
    background: rgba(204, 34, 41, 0.04);
}

/* Hide native input but keep accessible */
.ad-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    opacity: 0;
}

/* Custom label that triggers the input */
.ad-file-label {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    background: var(--c2);
    border: 1px solid var(--bd);
    border-radius: 10px;
    cursor: pointer;
    font-family: 'Prompt', sans-serif;
    transition: border-color .15s, background .15s;
}
.ad-file-label:hover {
    border-color: var(--red);
    background: var(--c3, #1a1a1a);
}
.ad-file-input:focus + .ad-file-label {
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(204, 34, 41, 0.15);
}

.ad-file-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--red), var(--rbr, #8b1a1f));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.ad-file-text { flex: 1; min-width: 0; }
.ad-file-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--tx);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ad-file-hint {
    font-size: 11px;
    color: var(--mu);
    margin-top: 3px;
}

.ad-file-btn {
    padding: 10px 18px;
    background: var(--red);
    color: #fff;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    flex-shrink: 0;
    transition: opacity .15s;
}

/* When file selected — green tint */
.ad-file-wrap.has-file {
    border-color: var(--gn, #22c55e);
    border-style: solid;
}
.ad-file-wrap.has-file .ad-file-icon {
    background: linear-gradient(135deg, var(--gn, #22c55e), #16a34a);
}

/* Mobile responsive */
@media (max-width: 520px) {
    .ad-file-label {
        flex-direction: column;
        text-align: center;
        padding: 22px 16px;
    }
    .ad-file-text { width: 100%; }
    .ad-file-title, .ad-file-hint { white-space: normal; }
}

/* ============================================================================
   EVENTS PAGE — sidebar banner layout
   ============================================================================ */
.events-with-side {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 30px;
    align-items: start;
}
.events-grid-area {
    min-width: 0;
}
.events-side-area {
    min-width: 0;
}
.events-side-sticky {
    position: sticky;
    top: 90px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (max-width: 1100px) {
    .events-with-side {
        grid-template-columns: 1fr;
    }
    .events-side-sticky {
        position: static;
    }
    .events-side-area {
        max-width: 600px;
        margin: 0 auto;
    }
}

/* ============================================================================
   iOS-STYLE TOGGLE SWITCH
   ============================================================================ */
.ios-toggle {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 30px;
    flex-shrink: 0;
    cursor: pointer;
}
.ios-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.ios-toggle .slider {
    position: absolute;
    inset: 0;
    background: #2a2a2a;
    border-radius: 30px;
    transition: background .25s;
    border: 1px solid #3a3a3a;
}
.ios-toggle .slider::before {
    content: '';
    position: absolute;
    height: 24px;
    width: 24px;
    left: 2px;
    top: 2px;
    background: #fff;
    border-radius: 50%;
    transition: transform .25s, background .25s;
    box-shadow: 0 2px 5px rgba(0,0,0,.3);
}
.ios-toggle input:checked + .slider {
    background: var(--red);
    border-color: var(--red);
}
.ios-toggle input:checked + .slider::before {
    transform: translateX(22px);
}
.ios-toggle input:focus + .slider {
    box-shadow: 0 0 0 3px rgba(204,34,41,.25);
}

/* ============================================================================
   PLACEMENTS PANEL (collapsible inside /admin/banners)
   ============================================================================ */
.placements-panel {
    background: var(--c1);
    border: 1px solid var(--bd);
    border-radius: 14px;
    margin-bottom: 24px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .35s ease, opacity .25s, margin-bottom .35s;
}
.placements-panel.open {
    max-height: 3000px;
    opacity: 1;
    padding: 22px 24px;
}

.pp-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--bd);
}
.pp-title {
    font-family: 'Bebas Neue', 'Prompt', sans-serif;
    font-size: 22px;
    letter-spacing: 3px;
    color: var(--red);
    font-style: italic;
}
.pp-title i { color: var(--red); margin-right: 4px; }
.pp-sub {
    font-size: 11px;
    color: var(--mu);
    margin-top: 4px;
    line-height: 1.5;
}
.pp-close {
    background: var(--c2);
    border: 1px solid var(--bd);
    color: var(--mu);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .15s, border-color .15s;
}
.pp-close:hover { color: var(--red); border-color: var(--red); }

.pp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
}

.pp-card {
    background: var(--c2);
    border: 1px solid var(--bd);
    border-radius: 12px;
    padding: 16px;
    transition: border-color .2s, opacity .2s;
}
.pp-card.active { border-color: rgba(204,34,41,.4); }
.pp-card.inactive { opacity: 0.55; }
.pp-card.inactive:hover { opacity: 1; }

.pp-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--bd);
}
.pp-card-title {
    font-family: 'Bebas Neue', 'Prompt', sans-serif;
    font-size: 18px;
    letter-spacing: 2px;
    color: #fff;
    font-style: italic;
    line-height: 1;
}
.pp-card-slug {
    font-family: 'Bebas Neue', 'Prompt', sans-serif;
    font-size: 10px;
    color: var(--mu);
    margin-top: 4px;
    letter-spacing: 0.5px;
}

.pp-card-body { display: flex; flex-direction: column; gap: 10px; }

.pp-row { display: grid; gap: 8px; }
.pp-row-2 { grid-template-columns: 1fr 1fr; }
.pp-row-3 { grid-template-columns: 1fr 1fr 1fr; }

.pp-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pp-field label {
    font-size: 9px;
    color: var(--mu);
    font-weight: 700;
    letter-spacing: 1.5px;
    font-family: 'Bebas Neue', 'Prompt', sans-serif;
}
.pp-field input,
.pp-field textarea {
    padding: 8px 10px;
    background: var(--c1);
    border: 1px solid var(--bd);
    border-radius: 7px;
    color: var(--tx);
    font-family: 'Prompt', sans-serif;
    font-size: 12px;
    outline: none;
    transition: border-color .15s;
    width: 100%;
}
.pp-field input:focus,
.pp-field textarea:focus { border-color: var(--red); }
.pp-field textarea { resize: vertical; min-height: 50px; font-size: 12px; }
.pp-field input[type="number"] { font-family: 'Bebas Neue', 'Prompt', sans-serif; }

.pp-save-btn {
    padding: 8px 12px;
    background: var(--red);
    color: #fff;
    border: none;
    border-radius: 7px;
    font-family: 'Prompt', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: opacity .15s;
}
.pp-save-btn:hover { opacity: 0.85; }

@media (max-width: 600px) {
    .pp-grid { grid-template-columns: 1fr; }
    .pp-row-3 { grid-template-columns: 1fr 1fr; }
}

/* ============================================================================
   BANNER CALENDAR — admin grid showing availability per day (v2 polished)
   ============================================================================ */
.banner-cal-table {
    border-collapse: separate;
    border-spacing: 3px;
    width: 100%;
    min-width: 1100px;
    font-family: 'Prompt', sans-serif;
}
.banner-cal-table th,
.banner-cal-table td {
    padding: 0;
    font-family: 'Prompt', sans-serif;
}

/* Header: PLACEMENT label */
.cal-placement-col {
    width: 220px;
    background: linear-gradient(180deg, var(--c2), #161616);
    border: 1px solid var(--bd);
    border-radius: 8px;
    padding: 10px 14px !important;
    text-align: left;
    font-size: 11px;
    color: var(--mu);
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    position: sticky;
    left: 0;
    z-index: 3;
    font-family: 'Prompt', sans-serif;
}

/* Header: each day */
.cal-day-col {
    background: var(--c2);
    border: 1px solid var(--bd);
    border-radius: 8px;
    padding: 8px 0 !important;
    text-align: center;
    width: 38px;
    min-width: 38px;
    color: var(--mu);
    font-family: 'Prompt', sans-serif;
    transition: background .15s;
}
.cal-day-col.weekend {
    color: var(--rd2);
    background: rgba(204, 34, 41, .04);
}
.cal-day-col.today {
    background: linear-gradient(180deg, rgba(204, 34, 41, .25), rgba(204, 34, 41, .08));
    border: 1.5px solid var(--red);
}
.cal-day-col.today .dnum { color: #fff; }
.cal-day-col .dow {
    font-size: 10px;
    font-family: 'Prompt', sans-serif;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
    opacity: .75;
}
.cal-day-col .dnum {
    font-size: 14px;
    font-weight: 700;
    font-family: 'Prompt', sans-serif;
    color: var(--tx);
}

/* Body: placement name cell */
.cal-placement-cell {
    background: linear-gradient(180deg, var(--c1), #131313);
    border: 1px solid var(--bd);
    border-radius: 8px;
    padding: 14px !important;
    position: sticky;
    left: 0;
    z-index: 3;
    width: 220px;
    transition: border-color .15s;
}
.cal-placement-cell:hover { border-color: var(--red); }
.cal-pl-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--tx);
    margin-bottom: 6px;
    font-family: 'Prompt', sans-serif;
    letter-spacing: 0.2px;
}
.cal-pl-meta {
    font-size: 11px;
    color: var(--mu);
    font-family: 'Prompt', sans-serif;
    line-height: 1.4;
}

/* Body: day cells (the slot itself) */
.cal-day-cell {
    height: 44px;
    width: 38px;
    min-width: 38px;
    border-radius: 7px;
    position: relative;
    transition: transform .15s ease-out, box-shadow .15s, filter .15s;
    background-clip: padding-box;
    border: 1px solid rgba(255, 255, 255, .04);
    cursor: pointer;
}
.cal-day-cell:hover {
    transform: scale(1.25) translateY(-2px);
    z-index: 10;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .6), 0 0 0 2px rgba(255, 255, 255, .15);
    filter: brightness(1.15);
}
.cal-day-cell.today {
    box-shadow: inset 0 0 0 2px var(--red), 0 0 12px rgba(204, 34, 41, .35);
}
.cal-day-cell.today:hover {
    box-shadow: inset 0 0 0 2px var(--red), 0 8px 20px rgba(0, 0, 0, .6), 0 0 16px rgba(204, 34, 41, .5);
}

/* Subtle pattern for empty cells (so they look intentional, not broken) */
.cal-day-cell[style*="--c2"],
.cal-day-cell[style*="var(--c2)"] {
    background-image: linear-gradient(135deg,
        rgba(255, 255, 255, .015) 25%, transparent 25%,
        transparent 50%, rgba(255, 255, 255, .015) 50%,
        rgba(255, 255, 255, .015) 75%, transparent 75%);
    background-size: 8px 8px;
}

.cal-day-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 7px;
}

/* Overlap badge */
.cal-overlap {
    position: absolute;
    top: 2px;
    right: 2px;
    background: var(--red);
    color: #fff;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 10px;
    font-weight: 700;
    font-family: 'Prompt', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .4);
}

/* Calendar wrapper improvements */
.cal-wrap {
    background: var(--c1);
    border: 1px solid var(--bd);
    border-radius: 16px;
    padding: 22px;
    overflow-x: auto;
}

.cal-legend {
    display: flex;
    gap: 18px;
    margin-bottom: 16px;
    font-size: 12px;
    color: var(--mu);
    flex-wrap: wrap;
    font-family: 'Prompt', sans-serif;
    align-items: center;
}
.cal-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.cal-legend-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    vertical-align: middle;
}

/* Toolbar (month nav + filters) */
.cal-toolbar {
    background: var(--c1);
    border: 1px solid var(--bd);
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 18px;
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
    font-family: 'Prompt', sans-serif;
}
.cal-month-label {
    font-family: 'Prompt', sans-serif;
    font-size: 18px;
    font-weight: 700;
    min-width: 220px;
    text-align: center;
    color: var(--tx);
}
.cal-month-sub {
    color: var(--mu);
    font-size: 11px;
    font-family: 'Prompt', sans-serif;
    font-weight: 400;
    margin-left: 4px;
}

/* Active orders list below calendar */
.cal-orders-list {
    margin-top: 22px;
    background: var(--c1);
    border: 1px solid var(--bd);
    border-radius: 14px;
    padding: 20px;
    font-family: 'Prompt', sans-serif;
}
.cal-orders-title {
    font-family: 'Prompt', sans-serif;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--tx);
}
.cal-order-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--c2);
    border: 1px solid var(--bd);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, transform .1s;
    font-family: 'Prompt', sans-serif;
}
.cal-order-item:hover {
    border-color: var(--red);
    transform: translateX(2px);
}
.cal-order-status {
    padding: 5px 11px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    font-family: 'Prompt', sans-serif;
    flex-shrink: 0;
}
.cal-order-name {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 2px;
}
.cal-order-meta {
    font-size: 11px;
    color: var(--mu);
    font-family: 'Prompt', sans-serif;
}
.cal-order-dates {
    font-size: 11px;
    color: var(--mu);
    text-align: right;
    flex-shrink: 0;
    font-family: 'Prompt', sans-serif;
}

/* ============================================================================
   AUTH — stepper + OTP input (for register/login/forgot flows)
   ============================================================================ */
.auth-stepper {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 28px;
    font-family: 'Prompt', sans-serif;
}
.auth-step {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--mu);
    padding: 9px 14px;
    background: var(--c2);
    border: 1px solid var(--bd);
    border-radius: 9px;
    transition: all .2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.auth-step.current {
    background: linear-gradient(135deg, var(--red), var(--rbr));
    color: #fff;
    border-color: var(--red);
    box-shadow: 0 6px 18px rgba(204,34,41,.32);
}
.auth-step.done {
    color: var(--gn);
    border-color: var(--gn);
    background: rgba(34,197,94,.1);
}
.auth-step-sep {
    flex: 1;
    height: 2px;
    background: var(--bd);
    border-radius: 1px;
    min-width: 14px;
    position: relative;
}
.auth-step-sep::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--red), transparent);
    opacity: 0;
    transition: opacity .3s;
}
.auth-stepper .auth-step.current ~ .auth-step-sep::before { opacity: 0; }
.auth-step-sep.done { background: var(--gn); }

/* OTP input — big monospaced boxes */
.auth-otp-input {
    text-align: center;
    font-family: 'Bebas Neue', 'Prompt', sans-serif !important;
    font-size: 28px !important;
    font-weight: 700;
    letter-spacing: 12px !important;
    padding-left: 20px !important;
    padding-right: 8px !important;
}

/* ============================================================================
   SETTINGS HUB — grouped category cards (like image 3)
   ============================================================================ */
.settings-search {
    position: relative;
    background: var(--c1);
    border: 1px solid var(--bd);
    border-radius: 14px;
    padding: 14px 18px 14px 48px;
    margin-bottom: 26px;
    transition: border-color .15s;
}
.settings-search:focus-within { border-color: var(--red); }
.settings-search i {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--mu);
    font-size: 16px;
}
.settings-search input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: var(--tx);
    font-family: 'Prompt', sans-serif;
    font-size: 14px;
}
.settings-search input::placeholder { color: var(--mu); }

.settings-group {
    margin-bottom: 26px;
}
.settings-group-head {
    background: linear-gradient(90deg, rgba(204,34,41,.15), rgba(204,34,41,.02));
    border: 1px solid rgba(204,34,41,.25);
    border-radius: 12px;
    padding: 12px 18px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Prompt', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--red);
    letter-spacing: 1px;
}
.settings-group-head i {
    color: var(--red);
    font-size: 16px;
}

.settings-group-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 14px;
}

.settings-card {
    background: linear-gradient(135deg, rgba(204,34,41,.06), rgba(20,20,20,.9));
    border: 1px solid var(--bd);
    border-radius: 14px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    transition: all .2s ease;
    min-height: 150px;
    position: relative;
}
.settings-card:hover {
    border-color: var(--red);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(204,34,41,.15);
}
.settings-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.settings-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(204,34,41,.15);
    border: 1px solid rgba(204,34,41,.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--red);
}
.settings-card-badge {
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    font-family: 'Prompt', sans-serif;
}
.badge-info { background: rgba(204,34,41,.12); color: var(--red); border: 1px solid rgba(204,34,41,.25); }
.badge-success { background: rgba(34,197,94,.12); color: var(--gn); border: 1px solid rgba(34,197,94,.3); }
.badge-off { background: var(--c2); color: var(--mu); border: 1px solid var(--bd); }

.settings-card-title {
    font-family: 'Bebas Neue', 'Prompt', sans-serif;
    font-size: 22px;
    letter-spacing: 1px;
    color: var(--tx);
    margin: 2px 0 0;
}

.settings-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.05);
}
.settings-card-status {
    font-size: 12px;
    color: var(--mu);
    font-family: 'Prompt', sans-serif;
}
.settings-card-cta {
    font-family: 'Prompt', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: var(--red);
    padding: 6px 12px;
    background: rgba(204,34,41,.1);
    border: 1px solid rgba(204,34,41,.3);
    border-radius: 7px;
    transition: all .15s;
    white-space: nowrap;
}
.settings-card:hover .settings-card-cta {
    background: var(--red);
    color: #fff;
}

/* Auth big icon above heading — eye-catching gradient ring + glow + pulse */
.auth-icon {
    position: relative;
    width: 84px;
    height: 84px;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--red), var(--rbr));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: #fff;
    margin: 0 auto 18px;
    box-shadow: 0 12px 36px rgba(204,34,41,.45), 0 0 0 1px rgba(255,255,255,.08) inset;
    animation: authIconFloat 3s ease-in-out infinite;
    line-height: 1;
}
/* Reset bootstrap-icons inherited vertical-align/margin so the glyph sits
   geometrically centered inside the gradient box (no ghost margin from
   .auth-step i / .auth-btn i / Bootstrap's default -.125em vertical-align). */
.auth-icon i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    padding: 0;
    line-height: 1;
    vertical-align: middle;
}
.auth-icon::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 28px;
    border: 1px solid rgba(204,34,41,.25);
    pointer-events: none;
    animation: authIconRing 3s ease-in-out infinite;
}
.auth-icon::after {
    content: '';
    position: absolute;
    inset: -16px;
    border-radius: 32px;
    background: radial-gradient(circle, rgba(204,34,41,.15), transparent 70%);
    pointer-events: none;
    z-index: -1;
    filter: blur(8px);
}
@keyframes authIconFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}
@keyframes authIconRing {
    0%, 100% { transform: scale(1);    opacity: .6; }
    50%      { transform: scale(1.08); opacity: 1; }
}

/* Stepper with icons — make sure icons render well */
.auth-step i {
    margin-right: 4px;
    font-size: 13px;
}
.auth-step.current i { color: #fff; }
.auth-step.done i { color: var(--gn); }

/* Button with icon */
.auth-btn i { margin-right: 6px; }

/* ============================================================================
   OTP boxed input — 6 individual digit boxes (iOS-style)
   ============================================================================ */
.otp-boxes {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 6px 0;
}
.otp-box {
    width: 54px !important;
    height: 64px !important;
    padding: 0 !important;
    text-align: center;
    background: var(--c2);
    border: 2px solid var(--bd);
    border-radius: 12px;
    color: var(--tx);
    font-family: 'Bebas Neue', 'Prompt', sans-serif !important;
    font-size: 28px !important;
    font-weight: 700;
    letter-spacing: 0 !important;
    outline: none;
    transition: border-color .15s, transform .1s, box-shadow .15s;
    caret-color: var(--red);
}
.otp-box:focus {
    border-color: var(--red);
    transform: scale(1.05);
    box-shadow: 0 0 0 3px rgba(204,34,41,.15);
}
.otp-box.filled {
    border-color: var(--red);
    background: rgba(204,34,41,.08);
}
@media (max-width: 480px) {
    .otp-boxes { gap: 6px; }
    .otp-box { width: 44px !important; height: 54px !important; font-size: 22px !important; border-radius: 10px; }
}

/* ============================================================================
   Homepage Inline Editor (admin ?edit=1)
   ============================================================================ */
.homepage-section-wrap {
    position: relative;
    outline: 2px dashed rgba(204,34,41,0.35);
    outline-offset: -2px;
    transition: outline-color .15s;
}
.homepage-section-wrap:hover { outline-color: var(--red); }
.homepage-section-disabled {
    opacity: 0.4;
    filter: grayscale(0.5);
    position: relative;
}
.homepage-section-disabled::after {
    content: "SECTION IS HIDDEN";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.85);
    color: var(--red);
    padding: 8px 16px;
    border: 1px solid var(--red);
    border-radius: 8px;
    font-family: 'Bebas Neue', 'Prompt', sans-serif;
    letter-spacing: 3px;
    font-size: 16px;
    pointer-events: none;
    z-index: 5;
}
.homepage-section-toolbar {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 100;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: rgba(0,0,0,0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(204,34,41,0.5);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    font-family: 'Prompt', sans-serif;
    font-size: 11px;
    pointer-events: auto;
}
/* Hover tooltip showing section name */
.homepage-section-wrap[data-section-label]::before {
    content: attr(data-section-label);
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 99;
    padding: 7px 12px;
    background: rgba(0,0,0,0.85);
    border: 1px solid rgba(204,34,41,0.4);
    border-radius: 8px;
    font-family: 'Prompt', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--red);
    text-transform: uppercase;
    opacity: 0;
    transition: opacity .15s;
    pointer-events: none;
}
.homepage-section-wrap:hover::before {
    opacity: 1;
}
.hs-btn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--c2);
    border: 1px solid var(--bd);
    border-radius: 6px;
    color: var(--tx);
    cursor: pointer;
    font-size: 13px;
    transition: all .15s;
}
.hs-btn:hover { background: var(--red); border-color: var(--red); color: #fff; }
.hs-toggle {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}
.hs-toggle input { display: none; }
.hs-toggle-track {
    width: 62px;
    height: 26px;
    background: #2a2a2a;
    border: 1px solid var(--bd);
    border-radius: 14px;
    position: relative;
    transition: background .2s;
    display: flex;
    align-items: center;
    font-family: 'Prompt', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}
.hs-toggle-track::before {
    content: "OFF";
    position: absolute;
    right: 8px;
    color: var(--mu);
    transition: opacity .15s;
}
.hs-toggle-track::after {
    content: "ON";
    position: absolute;
    left: 9px;
    color: #fff;
    opacity: 0;
    transition: opacity .15s;
}
.hs-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: transform .2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
    z-index: 2;
}
.hs-toggle input:checked ~ .hs-toggle-track {
    background: #22c55e;
    border-color: #22c55e;
}
.hs-toggle input:checked ~ .hs-toggle-track::before { opacity: 0; }
.hs-toggle input:checked ~ .hs-toggle-track::after { opacity: 1; }
.hs-toggle input:checked ~ .hs-toggle-track .hs-toggle-thumb {
    transform: translateX(36px);
}
/* Remove old .hs-label and .hs-toggle-txt styles */
.hs-label, .hs-toggle-txt { display: none; }

/* Inline editable text */
.hs-editable {
    outline: 1px dashed rgba(204,34,41,0.4);
    outline-offset: 3px;
    padding: 2px 4px;
    border-radius: 4px;
    transition: outline-color .15s, background .15s;
    cursor: text;
    min-width: 60px;
    min-height: 1em;
    display: inline-block;
}
.hs-editable:hover { outline-color: var(--red); background: rgba(204,34,41,0.05); }
.hs-editable:focus {
    outline: 2px solid var(--red);
    outline-offset: 3px;
    background: rgba(204,34,41,0.08);
}
/* Show placeholder via CSS when element is empty (no more JS wiping issues) */
.hs-editable:empty::before {
    content: attr(data-placeholder);
    color: var(--mu);
    font-style: italic;
    opacity: 0.6;
    pointer-events: none;
}
.hs-editable-placeholder { color: var(--mu); font-style: italic; }

/* Floating edit-mode toolbar (bottom-right) */
.homepage-edit-toolbar {
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    z-index: 99999 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px;
    align-items: flex-end;
    pointer-events: auto;
}
.he-tb-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    background: var(--c1);
    border: 1px solid var(--bd);
    border-radius: 12px;
    color: var(--tx);
    font-family: 'Prompt', sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0,0,0,0.35);
    text-decoration: none;
    transition: all .15s;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: relative;
}
.he-tb-btn:hover { transform: translateY(-2px); }
.he-tb-btn.he-tb-save {
    background: var(--red);
    color: #fff;
    border-color: var(--red);
    min-width: 130px;
    justify-content: center;
}
.he-tb-btn.he-tb-save:not(.has-changes) {
    background: var(--c1);
    color: var(--mu);
    border-color: var(--bd);
    opacity: 0.7;
}
.he-tb-btn.he-tb-save.has-changes {
    animation: heSavePulse 2s ease-in-out infinite;
    opacity: 1;
}
.he-tb-btn.he-tb-save.saving {
    opacity: 0.5;
    pointer-events: none;
}
.he-tb-btn.he-tb-save.saving i { animation: heSpinSlow 1s linear infinite; }
@keyframes heSavePulse {
    0%, 100% { box-shadow: 0 6px 20px rgba(204,34,41,0.35), 0 0 0 0 rgba(204,34,41,0.6); }
    50% { box-shadow: 0 6px 20px rgba(204,34,41,0.5), 0 0 0 10px rgba(204,34,41,0); }
}
@keyframes heSpinSlow { to { transform: rotate(360deg); } }
.he-save-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: #fff;
    color: var(--red);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 800;
    font-family: 'Bebas Neue', 'Prompt', sans-serif;
    margin-left: 2px;
}
.he-tb-btn.he-tb-close { background: var(--c2); }
.he-tb-btn i { font-size: 15px; }

/* ============================================================================
   MY TICKETS — logged-in customer ticket wallet
   ============================================================================ */
.mtickets-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px 70px;
}
.mtickets-header {
    background:
        radial-gradient(circle at 92% 12%, rgba(204,34,41,.20), transparent 34%),
        linear-gradient(135deg, rgba(15,15,15,.98), rgba(18,18,18,.94));
    border: 1px solid var(--bd);
    border-radius: 20px;
    padding: 28px;
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
    box-shadow: 0 22px 80px rgba(0,0,0,.28);
}
.mtickets-header::after {
    content: 'TICKETS';
    position: absolute;
    right: -18px;
    bottom: -42px;
    font-family: 'Bebas Neue','Prompt',sans-serif;
    font-size: 128px;
    font-style: italic;
    letter-spacing: 10px;
    color: rgba(204,34,41,.055);
    pointer-events: none;
    line-height: 1;
}
.mtickets-avatar {
    width: 82px;
    height: 82px;
    border-radius: 24px;
    background: linear-gradient(135deg, var(--red), var(--rbr));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Bebas Neue','Prompt',sans-serif;
    font-size: 42px;
    font-weight: 800;
    font-style: italic;
    letter-spacing: 2px;
    box-shadow: 0 12px 36px rgba(204,34,41,.34);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
.mtickets-hero-copy {
    flex: 1;
    min-width: 240px;
    position: relative;
    z-index: 1;
}
.mtickets-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--mu);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2.7px;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.mtickets-kicker i { color: var(--red); font-size: 13px; }
.mtickets-hero-copy h1 {
    font-family: 'Bebas Neue','Prompt',sans-serif;
    font-size: 52px;
    font-style: italic;
    letter-spacing: 5px;
    line-height: .92;
    color: var(--tx);
    margin: 0 0 12px;
    text-shadow: 0 2px 22px rgba(204,34,41,.18);
}
.mtickets-userline {
    display: flex;
    gap: 12px 18px;
    flex-wrap: wrap;
    align-items: center;
    color: var(--mu);
    font-size: 12px;
}
.mtickets-userline i { color: var(--red); margin-right: 4px; }
.mtickets-name {
    color: var(--tx);
    font-weight: 800;
}
.mtickets-good { color: var(--gn); }
.mtickets-good i { color: var(--gn); }
.mtickets-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
    position: relative;
    z-index: 1;
}
.mtickets-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 18px;
    border-radius: 11px;
    text-decoration: none;
    font-family: 'Prompt',sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .4px;
    transition: transform .15s, border-color .15s, background .15s, color .15s, box-shadow .15s;
    border: 1px solid transparent;
}
.mtickets-btn:hover { transform: translateY(-1px); }
.mtickets-btn-primary {
    background: linear-gradient(135deg, var(--red), var(--rbr));
    color: #fff;
    box-shadow: 0 10px 28px rgba(204,34,41,.22);
}
.mtickets-btn-ghost {
    background: rgba(21,21,21,.86);
    border-color: var(--bd2);
    color: var(--tx);
}
.mtickets-btn-ghost:hover {
    color: var(--red);
    border-color: var(--red);
    background: rgba(204,34,41,.075);
}
.mtickets-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 18px 0 24px;
}
.mtickets-stat {
    background: var(--c1);
    border: 1px solid var(--bd);
    border-radius: 16px;
    padding: 20px 22px;
    position: relative;
    overflow: hidden;
    transition: transform .15s, border-color .15s;
}
.mtickets-stat:hover { transform: translateY(-2px); border-color: var(--red); }
.mtickets-stat::after {
    content: '';
    position: absolute;
    right: -32px;
    top: -38px;
    width: 132px;
    height: 132px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(204,34,41,.15), transparent 70%);
    pointer-events: none;
}
.mtickets-stat-value {
    font-family: 'Bebas Neue','Prompt',sans-serif;
    font-size: 50px;
    line-height: .95;
    font-style: italic;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--tx);
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}
.mtickets-stat-value.is-green { color: var(--gn); }
.mtickets-stat-value.is-yellow { color: var(--yl); }
.mtickets-stat-value.is-muted { color: var(--mu); }
.mtickets-stat-label {
    color: var(--mu);
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    position: relative;
    z-index: 1;
}
.mtickets-stat-label i { color: var(--red); font-size: 12px; }
.mtickets-section {
    background: var(--c1);
    border: 1px solid var(--bd);
    border-radius: 20px;
    padding: 28px;
    box-shadow: 0 18px 65px rgba(0,0,0,.18);
}
.mtickets-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}
.mtickets-section-head h2 {
    color: var(--tx);
    font-size: 18px;
    line-height: 1.3;
    margin: 0;
    font-weight: 800;
}
.mtickets-section-head h2 i { color: var(--red); margin-right: 8px; }
.mtickets-section-head p {
    color: var(--mu);
    font-size: 12px;
    line-height: 1.65;
    margin: 7px 0 0;
}
.mtickets-mini-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #fff;
    background: var(--red);
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}
.mtickets-empty {
    text-align: center;
    padding: 76px 20px;
    border: 1px dashed var(--bd2);
    border-radius: 18px;
    background:
        radial-gradient(circle at 50% 10%, rgba(204,34,41,.10), transparent 44%),
        linear-gradient(180deg, rgba(255,255,255,.018), transparent);
}
.mtickets-empty-icon {
    width: 72px;
    height: 72px;
    border-radius: 22px;
    border: 1px solid var(--bd2);
    background: var(--c2);
    color: var(--mu);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}
.mtickets-empty-icon i { font-size: 38px; opacity: .75; }
.mtickets-empty-title {
    color: var(--tx);
    font-size: 17px;
    font-weight: 800;
    margin-bottom: 7px;
}
.mtickets-empty-sub {
    color: var(--mu);
    font-size: 13px;
    line-height: 1.65;
    max-width: 470px;
    margin: 0 auto 22px;
}
.mtickets-empty-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}
.mtickets-group + .mtickets-group { margin-top: 30px; }
.mtickets-group-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.mtickets-group-title span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Bebas Neue','Prompt',sans-serif;
    color: var(--gn);
    font-size: 25px;
    letter-spacing: 3px;
    font-style: italic;
}
.mtickets-group.is-past .mtickets-group-title span { color: var(--mu); }
.mtickets-group-title i { font-size: 19px; }
.mtickets-group-title b {
    color: var(--mu);
    background: var(--c2);
    border: 1px solid var(--bd);
    border-radius: 999px;
    padding: 5px 11px;
    font-size: 10px;
    letter-spacing: 1px;
}
.count-pill {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 5px 12px;
    background: var(--c2);
    border: 1px solid var(--bd);
    border-radius: 999px;
    line-height: 1;
}
.count-pill .count-num {
    font-family: 'Bebas Neue','Prompt',sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--tx);
    letter-spacing: 1px;
}
.count-pill .count-lbl {
    font-size: 11px;
    font-weight: 500;
    color: var(--mu);
}
.count-pill.is-muted .count-num { color: var(--mu); }
.mtickets-list { display: flex; flex-direction: column; gap: 12px; }
.mticket-card {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: var(--c2);
    border: 1px solid var(--bd);
    border-radius: 16px;
    overflow: hidden;
    color: var(--tx);
    text-decoration: none;
    min-height: 132px;
    transition: transform .15s, border-color .15s, background .15s, box-shadow .15s;
}
.mticket-card:hover {
    transform: translateY(-2px);
    border-color: var(--red);
    background: rgba(204,34,41,.045);
    box-shadow: 0 18px 42px rgba(0,0,0,.25);
}
.mticket-cover {
    aspect-ratio: 16 / 9;
    min-height: 132px;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--red), #2b0d10);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.mticket-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 55%, rgba(0,0,0,.35));
}
.mticket-cover span {
    position: relative;
    z-index: 1;
    font-family: 'Bebas Neue','Prompt',sans-serif;
    font-size: 30px;
    letter-spacing: 5px;
    font-style: italic;
    color: #fff;
}
.mticket-body {
    flex: 1;
    min-width: 0;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.mticket-topline {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 9px;
}
.mticket-type,
.mticket-comp {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 7px;
    background: rgba(204,34,41,.14);
    color: var(--red);
    font-family: 'Bebas Neue','Prompt',sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}
.mticket-comp { background: rgba(162,155,254,.14); color: var(--lv); }
.mticket-title {
    color: var(--tx);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.35;
    margin-bottom: 8px;
    overflow-wrap: anywhere;
}
.mticket-title.small { font-size: 14px; margin-bottom: 4px; }
.mticket-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    color: var(--mu);
    font-size: 11px;
    line-height: 1.55;
}
.mticket-meta i { color: var(--red); margin-right: 4px; }
.mticket-code {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    margin-top: 12px;
    color: var(--mu);
    background: var(--c1);
    border: 1px solid var(--bd);
    border-radius: 8px;
    padding: 5px 9px;
    font-family: 'Bebas Neue','Prompt',sans-serif;
    font-size: 10px;
    letter-spacing: .4px;
}
.mticket-code i { color: var(--red); }
.mticket-arrow {
    width: 54px;
    color: var(--mu);
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid var(--bd);
    transition: color .15s, transform .15s;
}
.mticket-card:hover .mticket-arrow { color: var(--red); }
.mticket-mini-icon {
    width: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mu);
    font-size: 24px;
    flex-shrink: 0;
}
.mticket-card-past {
    min-height: 78px;
    opacity: .78;
    align-items: center;
}
.mticket-card-past:hover { opacity: 1; }
.mticket-card-past .mticket-body { padding: 14px 6px 14px 0; }
.mticket-card-past > span { margin-right: 14px; }

/* Bundle indicators (multiple tickets in one purchase / comp) */
.mticket-bundle-pill {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 8px;
    background: rgba(0,0,0,.72);
    color: #fff;
    font-family: 'Bebas Neue','Prompt',sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 4px 14px rgba(0,0,0,.3);
}
.mticket-bundle-pill i { color: var(--red); font-size: 11px; }
.mticket-bundle-stat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 7px;
    background: var(--c1);
    border: 1px solid var(--bd);
    color: var(--tx);
    font-family: 'Bebas Neue','Prompt',sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .8px;
}
.mticket-bundle-stat i { color: var(--red); font-size: 11px; }
.mticket-bundle-stat .is-used { color: var(--bl); }
.mticket-bundle-stat.is-past {
    background: rgba(136,136,136,.12);
    color: var(--mu);
    border-color: var(--bd);
    margin-right: 14px;
}
.mticket-code-more {
    color: var(--red);
    font-weight: 700;
    margin-left: 4px;
}
.mticket-mini-count {
    display: inline-block;
    margin-top: 4px;
    font-family: 'Bebas Neue','Prompt',sans-serif;
    font-size: 11px;
    color: var(--red);
    letter-spacing: 1px;
}
.mticket-mini-icon { flex-direction: column; gap: 2px; }

@media (max-width: 900px) {
    .mtickets-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mtickets-actions { width: 100%; justify-content: flex-start; }
}
@media (max-width: 640px) {
    .mtickets-wrap { padding: 0 14px 54px; }
    .mtickets-header { padding: 22px; border-radius: 18px; }
    .mtickets-avatar { width: 64px; height: 64px; border-radius: 18px; font-size: 32px; }
    .mtickets-hero-copy h1 { font-size: 42px; }
    .mtickets-actions, .mtickets-btn { width: 100%; }
    .mtickets-stats { grid-template-columns: 1fr; gap: 10px; }
    .mtickets-section { padding: 20px; border-radius: 18px; }
    .mtickets-section-head { margin-bottom: 18px; }
    .mtickets-mini-cta { width: 100%; justify-content: center; }
    .mticket-card { flex-direction: column; min-height: 0; }
    .mticket-cover { width: 100%; min-height: 170px; }
    .mticket-arrow { width: 100%; height: 42px; border-left: none; border-top: 1px solid var(--bd); }
    .mticket-card-past { flex-direction: row; }
    .mticket-card-past .mticket-arrow { width: 42px; height: auto; border-top: none; border-left: 1px solid var(--bd); }
    .mticket-card-past > span { margin-right: 10px; }
}

/* ============================================================================
   MY ADVERTISING — logged-in banner management dashboard
   ============================================================================ */
.myads-page {
    min-height: 78vh;
    padding: 0 20px 72px;
    background:
        radial-gradient(circle at 82% 0%, rgba(204,34,41,.13), transparent 34%),
        radial-gradient(circle at 12% 16%, rgba(204,34,41,.09), transparent 30%),
        var(--bg);
}
.myads-wrap { max-width: 1180px; margin: 0 auto; }
.myads-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 28px;
    border: 1px solid var(--bd);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(15,15,15,.96), rgba(28,12,15,.92));
    box-shadow: 0 24px 80px rgba(0,0,0,.28);
    margin-bottom: 18px;
}
.myads-hero::after {
    content: 'ADVERTISE';
    position: absolute;
    right: -24px;
    bottom: -38px;
    font-family: 'Bebas Neue','Prompt',sans-serif;
    font-size: 126px;
    font-style: italic;
    letter-spacing: 10px;
    color: rgba(204,34,41,.07);
    line-height: 1;
    pointer-events: none;
}
.myads-mark {
    width: 78px;
    height: 78px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--red), var(--rbr));
    color: #fff;
    font-size: 34px;
    box-shadow: 0 16px 42px rgba(204,34,41,.35);
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
}
.myads-titlebox { flex: 1; min-width: 240px; position: relative; z-index: 1; }
.myads-kicker {
    font-family: 'Prompt', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 3px;
    color: var(--red);
    text-transform: uppercase;
    margin-bottom: 8px;
}
.myads-titlebox h1,
.myads-section-head h2,
.myads-empty h2 {
    margin: 0;
    font-family: 'Bebas Neue','Prompt',sans-serif;
    font-style: italic;
    letter-spacing: 3px;
    color: #fff;
    line-height: 1;
}
.myads-titlebox h1 { font-size: 48px; }
.myads-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 12px;
    color: var(--mu);
    font-size: 12px;
}
.myads-meta i { color: var(--red); margin-right: 4px; }
.myads-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
    position: relative;
    z-index: 1;
}
.myads-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 16px;
    border-radius: 11px;
    text-decoration: none;
    font-family: 'Prompt', sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .5px;
    transition: transform .15s, border-color .15s, background .15s, color .15s;
    border: 1px solid transparent;
}
.myads-btn.primary {
    background: linear-gradient(135deg, var(--red), var(--rbr));
    color: #fff;
    box-shadow: 0 10px 28px rgba(204,34,41,.25);
}
.myads-btn.ghost {
    background: rgba(204,34,41,.06);
    color: var(--tx);
    border-color: var(--bd);
}
.myads-btn:hover { transform: translateY(-2px); }
.myads-btn.ghost:hover { color: var(--red); border-color: var(--red); }
.myads-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}
.myads-stat {
    background: var(--c1);
    border: 1px solid var(--bd);
    border-radius: 16px;
    padding: 20px 22px;
    position: relative;
    overflow: hidden;
}
.myads-stat::after {
    content: '';
    position: absolute;
    right: -28px;
    top: -28px;
    width: 120px;
    height: 120px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(204,34,41,.12), transparent 68%);
}
.myads-stat .v {
    font-family: 'Bebas Neue','Prompt',sans-serif;
    font-size: 48px;
    font-style: italic;
    letter-spacing: 2px;
    line-height: 1;
    color: var(--tx);
    margin-bottom: 9px;
    position: relative;
    z-index: 1;
}
.myads-stat .l {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--mu);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    position: relative;
    z-index: 1;
}
.myads-stat .l i { color: var(--red); }
.myads-empty {
    text-align: center;
    padding: 54px 24px;
    border: 1px dashed rgba(204,34,41,.38);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(204,34,41,.07), rgba(15,15,15,.92));
}
.myads-empty .empty-icon {
    width: 82px;
    height: 82px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    color: var(--red);
    background: rgba(204,34,41,.1);
    font-size: 38px;
    margin-bottom: 18px;
}
.myads-empty h2 { font-size: 36px; margin-bottom: 10px; }
.myads-empty p {
    max-width: 650px;
    margin: 0 auto 24px;
    color: var(--mu);
    font-size: 13px;
    line-height: 1.8;
}
.myads-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 14px;
    margin: 26px 0 16px;
}
.myads-section-head h2 { font-size: 34px; }
.myads-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
}
.myad-card {
    background: var(--c1);
    border: 1px solid var(--bd);
    border-radius: 18px;
    overflow: hidden;
    transition: transform .16s, border-color .16s;
}
.myad-card:hover { transform: translateY(-3px); border-color: rgba(204,34,41,.72); }
.myad-preview {
    position: relative;
    background: repeating-linear-gradient(45deg, rgba(204,34,41,.08), rgba(204,34,41,.08) 10px, transparent 10px, transparent 20px), var(--c2);
    border-bottom: 1px solid var(--bd);
    /* No fixed aspect-ratio: the image's own ratio dictates height so the
       full banner is visible without cropping. Width fits the card. */
}
.myad-preview img {
    width: 100%;
    height: auto;
    display: block;
}
/* Keep the no-image fallback square-ish so empty cards don't collapse. */
.myad-preview:has(.myad-noimg) {
    aspect-ratio: 16 / 6;
}
.myad-noimg {
    min-height: 180px;
    aspect-ratio: 16 / 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--mu);
    font-family: 'Bebas Neue','Prompt',sans-serif;
    letter-spacing: 3px;
}
.myad-noimg i { font-size: 30px; color: var(--red); opacity: .7; }
.myad-pill {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
    backdrop-filter: blur(10px);
}
.myad-live { background: rgba(34,197,94,.18); color: #22c55e; }
.myad-pay { background: rgba(250,204,21,.2); color: #facc15; }
.myad-review { background: rgba(59,130,246,.2); color: #3b82f6; }
.myad-reject { background: rgba(239,68,68,.2); color: #ef4444; }
.myad-expired { background: rgba(20,20,20,.78); color: var(--mu); }
.myad-body { padding: 18px; }
.myad-topline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.myad-order-no {
    font-family: 'Bebas Neue','Prompt',sans-serif;
    font-size: 10px;
    color: var(--mu);
    letter-spacing: 1.4px;
    margin-bottom: 5px;
}
.myad-topline h3 {
    margin: 0;
    font-size: 15px;
    color: var(--tx);
    line-height: 1.35;
}
.myad-price {
    color: var(--red);
    font-family: 'Bebas Neue','Prompt',sans-serif;
    font-size: 30px;
    font-style: italic;
    letter-spacing: 2px;
    white-space: nowrap;
}
.myad-info {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    padding: 12px 0;
    border-top: 1px solid var(--bd);
    border-bottom: 1px solid var(--bd);
    color: var(--mu);
    font-size: 11px;
}
.myad-info div { display: flex; align-items: center; gap: 7px; min-width: 0; }
.myad-info i { color: var(--red); flex: 0 0 auto; }
.myad-info span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.myad-target {
    margin: 12px 0;
    padding: 10px 12px;
    border: 1px solid var(--bd);
    border-radius: 10px;
    background: var(--c2);
    color: var(--mu);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
}
.myad-target i { color: var(--red); }
.myad-target span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.myad-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}
.myad-metrics div {
    background: var(--c2);
    border: 1px solid var(--bd);
    border-radius: 10px;
    padding: 10px;
    text-align: center;
}
.myad-metrics strong {
    display: block;
    color: var(--tx);
    font-family: 'Bebas Neue','Prompt',sans-serif;
    font-size: 14px;
    margin-bottom: 3px;
}
.myad-metrics span {
    color: var(--mu);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.myad-reason {
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: 10px;
    color: #ef4444;
    background: rgba(239,68,68,.08);
    border: 1px solid rgba(239,68,68,.22);
    font-size: 12px;
    line-height: 1.55;
}
.myad-card-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.myad-card-actions .myads-btn { flex: 1; min-width: 130px; }

/* Big duration card on /advertise/my — replaces the old single-line "month" label */
.myad-duration-card {
    background: linear-gradient(135deg, rgba(204,34,41,.12), rgba(204,34,41,.03));
    border: 1px solid rgba(204,34,41,.35);
    border-radius: 12px;
    padding: 14px 16px;
    margin: 10px 0;
}
.myad-duration-card .dur-l {
    display: flex; align-items: center; gap: 6px;
    font-size: 10px; color: var(--mu); font-weight: 700;
    letter-spacing: 1.5px; text-transform: uppercase;
    margin-bottom: 4px;
}
.myad-duration-card .dur-l i { color: var(--red); font-size: 12px; }
.myad-duration-card .dur-v {
    font-family: 'Bebas Neue','Prompt',sans-serif;
    font-size: 30px; letter-spacing: 2.5px; color: var(--red);
    font-style: italic; line-height: 1; margin-bottom: 8px;
}
.myad-duration-card .dur-end {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px dashed rgba(204,34,41,.25);
    font-size: 11px;
    color: var(--mu);
}
.myad-duration-card .dur-end > span:first-child {
    display: inline-flex; align-items: center; gap: 5px;
    font-weight: 600;
}
.myad-duration-card .dur-end > span:first-child i { color: var(--red); }
.myad-duration-card .dur-end strong {
    font-family: 'Bebas Neue','Prompt',sans-serif;
    font-size: 15px; color: var(--tx); font-weight: 700;
    letter-spacing: 1px; margin-right: 4px;
}
.myad-duration-card .dur-rm {
    font-style: normal;
    font-family: 'Bebas Neue','Prompt',sans-serif;
    font-size: 10.5px; letter-spacing: 1px;
    color: var(--gn);
}
.myad-duration-card .dur-rm.warn { color: var(--yl); }
.myad-duration-card .dur-rm.over { color: var(--rd2); }

/* Pending image change banner (user-facing on order detail page) */
.myad-image-edit {
    margin: 0 0 14px;
    padding: 14px 16px;
    background: linear-gradient(180deg, rgba(204,34,41,.06), var(--c1));
    border: 1px solid var(--bd);
    border-radius: 12px;
}
.myad-image-edit .lb {
    display: flex; align-items: center; gap: 6px;
    font-size: 10.5px; color: var(--red); font-weight: 700;
    letter-spacing: 1.5px; text-transform: uppercase;
    margin-bottom: 8px;
}
.myad-image-edit .desc {
    font-size: 12px; color: var(--mu); line-height: 1.55;
    margin-bottom: 10px;
}
.myad-image-edit.is-pending {
    background: linear-gradient(180deg, rgba(250,204,21,.08), var(--c1));
    border-color: var(--yl);
}
.myad-image-edit.is-pending .lb { color: var(--yl); }

@media (max-width: 760px) {
    .myads-page { padding: 0 14px 110px; }
    .myads-hero { padding: 20px; align-items: flex-start; }
    .myads-mark { width: 58px; height: 58px; border-radius: 18px; font-size: 26px; }
    .myads-titlebox h1 { font-size: 34px; }
    .myads-actions { width: 100%; justify-content: stretch; }
    .myads-actions .myads-btn { flex: 1; }
    .myads-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .myads-stat { padding: 16px; }
    .myads-stat .v { font-size: 36px; }
    .myads-section-head { align-items: stretch; flex-direction: column; }
    .myads-grid { grid-template-columns: 1fr; }
    .myad-info { grid-template-columns: 1fr; }
}

/* ============================================================================
   Banner placeholders inside articles - keep the ad card clean, never underlined
   ============================================================================ */
.article-content a.banner-slot,
.article-content a.banner-slot:hover,
.article-content a.banner-slot:focus,
.na-content a.banner-slot,
.na-content a.banner-slot:hover,
.na-content a.banner-slot:focus,
.news-article-main a.banner-slot,
.news-article-main a.banner-slot:hover,
.news-article-main a.banner-slot:focus {
    text-decoration: none !important;
    color: inherit;
}
.article-content a.banner-slot *,
.na-content a.banner-slot *,
.news-article-main a.banner-slot * {
    text-decoration: none !important;
}
.news-article-main .banner-slot-empty {
    border-color: var(--bd2);
}
.news-article-main .banner-slot-empty:hover {
    border-color: var(--red);
}

/* ==========================================================================
   ROII Homepage Edit Mode — v133 real editor fixes
   ========================================================================== */
.homepage-order-root {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.homepage-section-public-wrap,
.homepage-fixed-flow {
    display: block;
    width: 100%;
}
.roii-edit-mode-active {
    padding-top: 40px;
}
.roii-edit-mode-active .view-mobile {
    display: none !important;
}
.roii-edit-single-view {
    display: block !important;
}
.he-debug-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2147483646;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 40px;
    padding: 8px 16px;
    background: linear-gradient(90deg, #cc2229, #8b1519);
    color: #fff;
    font-family: 'Prompt', sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    box-shadow: 0 2px 14px rgba(204,34,41,.45);
}
.he-debug-banner .he-debug-email {
    opacity: .9;
    font-family: 'Bebas Neue', 'Prompt', sans-serif;
    letter-spacing: 0;
}
.he-debug-banner .he-debug-help {
    opacity: .78;
    font-weight: 600;
    letter-spacing: 0;
}
.he-floating-toolbar {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 2147483647;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: rgba(0,0,0,.88);
    border: 1px solid rgba(204,34,41,.35);
    border-radius: 16px;
    box-shadow: 0 10px 34px rgba(0,0,0,.58);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.he-toolbar-btn,
.he-entry-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 10px 14px;
    border-radius: 10px;
    font-family: 'Prompt', sans-serif;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s ease, opacity .15s ease, border-color .15s ease, background .15s ease;
    white-space: nowrap;
}
.he-toolbar-btn:hover,
.he-entry-btn:hover {
    transform: translateY(-1px);
}
.he-save-btn {
    min-width: 118px;
    background: var(--red);
    border: 1px solid var(--red);
    color: #fff;
    box-shadow: 0 4px 14px rgba(204,34,41,.35);
}
.he-save-btn:disabled {
    cursor: not-allowed;
    opacity: .55;
    box-shadow: none;
    transform: none;
}
.he-save-btn.has-changes {
    opacity: 1;
    animation: heSavePulse 2s ease-in-out infinite;
}
.he-save-btn.saving i {
    animation: heSpinSlow 1s linear infinite;
}
.he-link-btn {
    background: transparent;
    border: 1px solid #3a3a44;
    color: #ebebf0;
}
.he-link-btn:hover {
    border-color: rgba(204,34,41,.7);
    color: #fff;
}
.he-entry-wrap {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 999999;
    pointer-events: auto;
}
.he-entry-btn {
    padding: 14px 22px;
    background: var(--red);
    border: 1px solid var(--red);
    color: #fff;
    font-size: 14px;
    box-shadow: 0 6px 20px rgba(204,34,41,.50);
}
.hs-editable.is-dirty {
    outline-color: #facc15;
    background: rgba(250,204,21,.08);
}
.homepage-section-wrap {
    min-height: 24px;
}
@media (max-width: 700px) {
    .he-debug-banner {
        justify-content: flex-start;
        overflow-x: auto;
        font-size: 11px;
    }
    .he-floating-toolbar {
        left: 10px;
        right: 10px;
        bottom: 10px;
        justify-content: space-between;
    }
    .he-toolbar-btn {
        flex: 1;
        padding: 9px 8px;
    }
}

/* =====================================================================
   GLOBAL MOBILE GRID OVERRIDE — force 2 columns for all auto-fill card
   grids on phones (≤600px) so cards aren't full-width and unreadable.
   Targets:
     1) Inline-style grids:  style="...auto-fill,minmax(...)..."
     2) Known grid classes:  .nm-grid .st-grid .nc-grid .rapr-grid
                             .pd-rel-grid .rp-related-grid .featured-grid
                             .home-grid-events .home-grid-music .home-grid-past
   The attribute selectors cover both `repeat(auto-fill,minmax(...))` and
   `repeat(auto-fill, minmax(...))` (with/without the space).
   ===================================================================== */
@media (max-width: 600px) {
    [style*="auto-fill,minmax"],
    [style*="auto-fill, minmax"],
    .nm-grid,
    .st-grid,
    .nc-grid,
    .rapr-grid,
    .pd-rel-grid,
    .rp-related-grid,
    .featured-grid,
    .home-grid-events,
    .home-grid-music,
    .home-grid-past {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
    /* Card padding/text shrink so 2-col stays readable on small phones */
    [style*="auto-fill,minmax"] > a > div:last-child,
    [style*="auto-fill, minmax"] > a > div:last-child,
    .nm-grid > a > div:last-child,
    .home-grid-music > a > div:last-child,
    .home-grid-events > a > div:last-child {
        padding: 10px 12px !important;
    }
}

/* On very small phones (≤360px) the 2-col grid can still feel cramped
   — keep 2 cols but tighten gap further. */
@media (max-width: 360px) {
    [style*="auto-fill,minmax"],
    [style*="auto-fill, minmax"],
    .nm-grid,
    .st-grid,
    .nc-grid,
    .rapr-grid,
    .pd-rel-grid,
    .rp-related-grid,
    .featured-grid,
    .home-grid-events,
    .home-grid-music,
    .home-grid-past {
        gap: 8px !important;
    }
}