*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
    --gr:#4CAF50;--grd:#388E3C;--grl:#E8F5E9;
    --bl:#2196F3;--rd:#F44336;--or:#FF9800;--yw:#FFC107;
    --bg:#F2F2F2;--wh:#fff;--t1:#212121;--t2:#616161;--t3:#9E9E9E;
    --bd:#E0E0E0;--sh:0 1px 3px rgba(0,0,0,.12);--sh2:0 2px 8px rgba(0,0,0,.16);
    --brand-gold: #D4AF37;
    --brand-gold-light: #F0D060;
    --brand-dark: #1a1a1a;
}
body{background:var(--bg);color:var(--t1);font-family:'Roboto',sans-serif;min-height:100vh;overflow-x:hidden;padding-bottom:58px}

.drawer-mask{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:800;opacity:0;visibility:hidden;transition:opacity .3s ease, visibility .3s ease;}
.drawer-mask.open{opacity:1;visibility:visible;}
.drawer{position:fixed;top:0;left:0;width:280px;height:100%;background:var(--wh);z-index:801;transform:translateX(-100%);transition:transform .3s cubic-bezier(0.4, 0, 0.2, 1);box-shadow:var(--sh2);display:flex;flex-direction:column}
.drawer.open{transform:translateX(0);}

.drawer-head{background:linear-gradient(135deg, #1B5E20 0%, #2E7D32 50%, #1B5E20 100%);padding:40px 20px 20px;color:#fff;position:relative;overflow:hidden}
.drawer-head::before {
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(255,215,0,0.3) 0%, transparent 70%);
    border-radius: 50%;
}
.drawer-head::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: -20px;
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, rgba(255,215,0,0.2) 0%, transparent 70%);
    border-radius: 50%;
}
.drawer-avatar{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;margin-bottom:10px;overflow:hidden;position:relative;z-index:1}
.drawer-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.drawer-brand {
    position: relative;
    z-index: 1;
}
.drawer-brand-name {
    font-family: 'Orbitron', sans-serif;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 2px;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FFD700 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 4px rgba(255,215,0,0.5));
    line-height: 1.2;
}
.drawer-brand-sub {
    font-size: 9px;
    color: rgba(255,255,255,.7);
    letter-spacing: 1.5px;
    margin-top: 2px;
    text-transform: uppercase;
}
.drawer-menu{flex:1;padding:8px 0; overflow-y:auto;}
.drawer-item{display:flex;align-items:center;gap:16px;padding:14px 20px;font-size:14px;color:var(--t1);cursor:pointer;transition:background .15s}
.drawer-item:hover{background:var(--bg)}
.drawer-item i{width:20px;text-align:center;color:var(--t2);font-size:16px}
.drawer-divider{height:1px;background:var(--bd);margin:4px 0}

.header{background:linear-gradient(135deg, #1B5E20 0%, #2E7D32 50%, #1B5E20 100%);position:sticky;top:0;z-index:300;box-shadow:0 2px 4px rgba(0,0,0,.2)}
.header-row{display:flex;align-items:center;justify-content:space-between;height:60px;padding:0;max-width:600px;margin:0 auto;position:relative}
.hbtn{width:48px;height:48px;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;font-size:20px;flex-shrink:0;border-radius:50%;transition:background .15s}
.hbtn:active{background:rgba(255,255,255,.18)}

.header-logo-wrap {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1.5px dashed rgba(255, 215, 0, 0.7);
    padding: 3px 12px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 0 8px rgba(255, 215, 0, 0.2), 0 0 5px rgba(0,0,0,0.3);
}
.brand-logo-text {
    font-family: 'Orbitron', sans-serif;
    font-size: 17px;
    font-weight: 900;
    color: transparent;
    background: repeating-linear-gradient(
        -45deg,
        #FFD700,
        #FFD700 3px,
        #fff 3px,
        #fff 6px
    );
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 0 3px rgba(255,215,0,0.6));
    letter-spacing: 1px;
    line-height: 1.1;
    text-transform: uppercase;
}
.brand-logo-sub {
    font-family: 'Roboto', sans-serif;
    font-size: 7.5px;
    color: #fff;
    letter-spacing: 2.5px;
    font-weight: 700;
    text-transform: uppercase;
    opacity: 0.9;
}

.search-bar-wrap{background:#1B5E20;padding:7px 12px;display:none}
.search-bar-wrap.open{display:block}
.search-bar-inner{background:#fff;border-radius:24px;display:flex;align-items:center;padding:0 14px;gap:8px}
.search-bar-inner input{flex:1;border:none;outline:none;font-size:14px;padding:9px 0;color:var(--t1);font-family:'Roboto';background:transparent}
.search-bar-inner input::placeholder{color:var(--t3)}
.search-close{color:var(--t3);cursor:pointer;font-size:14px;padding:4px}

.os-tabs-wrap{background:var(--wh);border-bottom:1px solid var(--bd)}
.os-tabs{display:flex;max-width:600px;margin:0 auto}
.os-tab{flex:1;padding:12px 0;text-align:center;font-size:13px;font-weight:500;color:var(--t3);border-bottom:2.5px solid transparent;cursor:pointer;transition:.2s;display:flex;align-items:center;justify-content:center;gap:6px}
.os-tab.active{color:var(--gr);border-color:var(--gr);font-weight:700}

.chips-wrap{background:var(--wh);padding:8px 12px;border-bottom:1px solid var(--bd);display:flex;gap:7px;overflow-x:auto;scrollbar-width:none}
.chips-wrap::-webkit-scrollbar{display:none}
.chip{flex-shrink:0;padding:5px 14px;border-radius:16px;font-size:12px;font-weight:500;background:var(--bg);border:1px solid var(--bd);color:var(--t2);cursor:pointer;transition:.15s}
.chip.active{background:var(--grl);border-color:var(--gr);color:var(--gr);font-weight:700}

.global-banner-wrap { position: relative; width: 100%; max-width: 600px; margin: 0 auto; overflow: hidden; background: #000; display: none; height: auto; min-height: 180px; }
.banner-track { display: flex; height: auto; transition: transform 0.3s ease-in-out; will-change: transform; }
.banner-slide { flex: 0 0 100%; width: 100%; position: relative; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.banner-slide img, .banner-slide video { width: 100%; height: auto; max-height: 280px; object-fit: contain; display: block; background: #000; }
.banner-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; z-index: 10; }
.banner-dot { width: 6px; height: 6px; background: rgba(255,255,255,0.4); border-radius: 50%; transition: all 0.3s; }
.banner-dot.active { background: #fff; width: 15px; border-radius: 4px; }

.img-viewer { position: fixed; inset: 0; background: rgba(0,0,0,0.9); z-index: 9999; display: none; flex-direction: column; justify-content: center; align-items: center; opacity: 0; animation: fadeIn 0.2s forwards; cursor: pointer; }
@keyframes fadeIn { to { opacity: 1; } }
.img-viewer img, .img-viewer video { max-width: 95%; max-height: 95%; border-radius: 8px; object-fit: contain; cursor: default; }

.content{max-width:600px;margin:0 auto}
.os-section{display:none}
.os-section.active{display:block}

.section{background:var(--wh);margin-bottom:8px}
.section-hdr{display:flex;align-items:center;justify-content:space-between;padding:14px 12px 8px}
.section-title{font-size:15px;font-weight:700;color:var(--t1);display:flex;align-items:center;gap:6px}
.section-count{font-size:12px;color:var(--t2)}

.trending-wrap{padding:16px;background:var(--wh);margin-bottom:8px;}
.trending-title{font-size:14px;font-weight:700;color:var(--t1);margin-bottom:12px;display:flex;align-items:center;gap:6px}
.trending-title i{color:#F44336}
.trending-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.t-chip{padding:6px 14px;background:var(--bg);border:1px solid var(--bd);border-radius:20px;font-size:12px;font-weight:500;color:var(--t2);cursor:pointer;transition:.15s;display:flex;align-items:center;gap:5px}
.t-chip:active{background:var(--grl);border-color:var(--gr);color:var(--gr);transform:scale(0.95)}
.t-chip i{font-size:10px;color:var(--or)}
.t-game-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.t-game-item{display:flex;align-items:center;gap:8px;padding:8px;background:var(--bg);border-radius:12px;cursor:pointer;transition:.15s;border:1.5px solid transparent}
.t-game-item:active{border-color:var(--gr);background:var(--wh)}
.t-game-icon{width:42px;height:42px;border-radius:10px;object-fit:cover;flex-shrink:0;box-shadow:var(--sh)}
.t-game-info{flex:1;min-width:0}
.t-game-name{font-size:12px;font-weight:700;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-game-views{font-size:10px;color:var(--t3);margin-top:2px}

.game-grid{display:grid;grid-template-columns:repeat(4,1fr);padding:4px 8px 14px}
@media (max-width:400px){.game-grid{grid-template-columns:repeat(4,1fr)}}

.game-card{cursor:pointer;text-align:center;padding:8px 4px 6px;border-radius:10px;transition:background .15s}
.game-card:active{background:var(--bg)}
.game-icon-wrap{position:relative;display:inline-block}
.game-icon{width:60px;height:60px;border-radius:14px;object-fit:cover;display:block;box-shadow:var(--sh);background:#ddd;margin:0 auto}
.game-maint-ov{position:absolute;inset:0;background:rgba(0,0,0,.42);border-radius:14px;display:flex;align-items:center;justify-content:center}
.game-maint-ov i{color:#fff;font-size:16px}

.gbadge-top{position:absolute;top:2px;right:2px;background:linear-gradient(45deg, #9C27B0, #E040FB);color:#fff;font-size:7px;font-weight:700;padding:2px 5px;border-radius:3px;line-height:1.5;box-shadow:0 0 4px rgba(156,39,176,0.6);z-index:2}
.gbadge-hot{position:absolute;top:2px;right:2px;background:linear-gradient(45deg, #F44336, #FF9800);color:#fff;font-size:7px;font-weight:700;padding:1px 4px;border-radius:2px;line-height:1.5;z-index:2}
.gbadge-new{position:absolute;top:2px;left:2px;background:var(--gr);color:#fff;font-size:7px;font-weight:700;padding:1px 4px;border-radius:2px;line-height:1.5;z-index:2}

.game-name{font-size:11px;font-weight:500;color:var(--t1);margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:68px;text-align:center;margin-left:auto;margin-right:auto}
.game-views{font-size:9.5px;color:var(--t3);margin-top:1px;display:flex;align-items:center;justify-content:center;gap:3px}
.game-by{font-size:9px;color:var(--gr);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:68px;text-align:center;display:flex;align-items:center;justify-content:center;gap:2px;margin-left:auto;margin-right:auto}

.list-section{background:var(--wh);margin-bottom:8px}
.list-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-bottom:1px solid var(--bd);cursor:pointer}
.list-item:last-child{border-bottom:none}
.list-item:active{background:var(--bg)}
.list-icon{width:50px;height:50px;border-radius:12px;object-fit:cover;flex-shrink:0;box-shadow:var(--sh);background:#ddd}
.list-name{font-size:14px;font-weight:500;color:var(--t1)}
.list-sub{font-size:11px;color:var(--t2);margin-top:2px;display:flex;align-items:center;gap:6px}
.lst-on{color:var(--gr)}.lst-off{color:var(--rd)}
.list-dl{flex-shrink:0;padding:7px 14px;background:var(--gr);border:none;border-radius:20px;color:#fff;font-size:12px;font-weight:700;cursor:pointer;font-family:'Roboto'}
.list-dl.off{background:var(--t3);cursor:not-allowed}
.no-result{text-align:center;padding:40px 20px;background:var(--wh);margin-bottom:8px}
.no-result i{font-size:44px;color:var(--t3);display:block;margin-bottom:10px}
.no-result p{color:var(--t2);font-size:14px}
#searchSection{display:none}

.footer-wrap{background:var(--wh);margin-bottom:8px;padding:32px 20px 20px;}
.foot-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px;max-width:600px;margin-left:auto;margin-right:auto}
.foot-brand {grid-column: 1 / -1; text-align: center;}
.foot-brand .logo{
    font-family:'Orbitron',sans-serif;font-size:1.35rem;font-weight:900;letter-spacing:2px;
    background:linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FFD700 100%);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
    display:inline-block;margin-bottom:8px;filter:drop-shadow(0 0 2px rgba(255,215,0,0.3));
}
.foot-brand p{font-size:.8rem;color:var(--t2);line-height:1.5}
.foot-col h5{color:var(--t1);font-size:.75rem;letter-spacing:1px;text-transform:uppercase;margin-bottom:12px;font-weight:900}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.foot-col ul li a{font-size:.8rem;color:var(--t2);transition:color .2s;font-weight:500;display:flex;align-items:center;gap:6px;text-decoration:none}
.foot-col ul li a:active{color:var(--gr)}
.foot-col ul li a i{width:16px;text-align:center;color:var(--t3)}
.social-btn{
    display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;
    font-size:11px;font-weight:700;color:#fff;text-decoration:none;transition:.2s;
    background:linear-gradient(135deg, #1B5E20 0%, #2E7D32 100%);
    margin-bottom:8px;box-shadow:var(--sh);justify-content:center;
}
.social-btn.fb{background:linear-gradient(135deg, #1877F2 0%, #0d5aab 100%);}
.social-btn.tt{background:linear-gradient(135deg, #000000 0%, #333333 100%);}
.social-btn.yt{background:linear-gradient(135deg, #FF0000 0%, #cc0000 100%);}
.social-btn.tl{background:linear-gradient(135deg, #24A1DE 0%, #1a7eb3 100%);}
.social-btn:active{transform:scale(0.95)}
.foot-bottom{
    border-top:1px solid var(--bd);padding-top:16px;
    display:flex;flex-direction:column;align-items:center;gap:4px;
    font-size:.7rem;color:var(--t3);text-align:center;
}
.foot-bottom span{font-family:'Orbitron',sans-serif;letter-spacing:.5px}

.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:var(--wh);border-top:1px solid var(--bd);display:flex;z-index:300;box-shadow:0 -1px 4px rgba(0,0,0,.08)}
.bnav{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0;cursor:pointer;color:var(--t3);font-size:10px;font-weight:500}
.bnav.active{color:var(--gr)}
.bnav i{font-size:20px}

.admin-bar{position:fixed;bottom:56px;left:0;right:0;display:none;background:#1B5E20;padding:9px 16px;align-items:center;justify-content:space-between;z-index:290;box-shadow:0 -2px 8px rgba(0,0,0,.2)}
.admin-bar.show{display:flex}
.admin-bar.is-super{background:#BF360C}
.ab-lbl{font-size:13px;font-weight:700;color:#fff;display:flex;align-items:center;gap:6px}
.ab-sub{font-size:10px;color:rgba(255,255,255,.55);margin-top:1px}
.ab-actions{display:flex;gap:7px}
.ab-btn{padding:7px 13px;border-radius:20px;font-size:11px;font-weight:700;cursor:pointer;border:1.5px solid rgba(255,255,255,.4);color:#fff;background:rgba(255,255,255,.15);font-family:'Roboto';text-decoration:none;display:inline-flex;align-items:center;gap:5px}

.overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;z-index:500;flex-direction:column;justify-content:flex-end}
.overlay.open{display:flex}
.overlay.center{justify-content:center;align-items:center;padding:20px;background:rgba(0,0,0,.45);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.sheet{background:var(--wh);border-radius:20px 20px 0 0;max-height:88vh;overflow:hidden;display:flex;flex-direction:column;animation:slideUp .24s ease}
.sheet.cbox{border-radius:16px;max-width:360px;width:100%;display:flex;flex-direction:column;max-height:85vh;position:relative;overflow:visible}
@keyframes slideUp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.sheet-drag{width:32px;height:4px;background:var(--bd);border-radius:2px;margin:10px auto 0;flex-shrink:0}
.sheet-hd{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--bd);position:relative;flex-shrink:0}
.sheet-hd img{width:44px;height:44px;border-radius:10px;object-fit:cover}
.sheet-hd-title{font-size:15px;font-weight:700;color:var(--t1)}
.sheet-hd-sub{font-size:12px;color:var(--t2);margin-top:2px}
.sheet-x{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;background:var(--bg);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--t2);font-size:12px}
.sheet-body{padding:16px;overflow-y:auto;flex:1}

.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.choice-card{border:1.5px solid var(--bd);border-radius:12px;padding:16px 10px;cursor:pointer;text-align:center;transition:.15s;display:flex;flex-direction:column;align-items:center;gap:7px}
.choice-card:active{background:var(--grl);border-color:var(--gr)}
.choice-card img{width:48px;height:48px;border-radius:10px;object-fit:cover}
.choice-card .cc-name{font-size:13px;font-weight:700;color:var(--t1)}
.choice-card .cc-sub{font-size:10px;color:var(--t2)}
.choice-card .cc-st{font-size:10px;font-weight:700}
.cc-on{color:var(--gr)}.cc-off{color:var(--rd)}
.choice-card.maint{opacity:.5;cursor:not-allowed}
.choice-card.maint:active{background:var(--wh);border-color:var(--bd)}

.info-box{text-align:center;padding:6px 0 4px}
.info-box i{font-size:50px;display:block;margin-bottom:12px}
.info-box h3{font-size:16px;font-weight:700;margin-bottom:6px}
.info-box p{font-size:13px;color:var(--t2);line-height:1.6;margin-bottom:18px}
.pop-btn{width:100%;padding:13px;background:var(--gr);border:none;border-radius:24px;color:#fff;font-size:14px;font-weight:700;cursor:pointer;font-family:'Roboto';margin-bottom:8px}
.pop-btn.gray{background:var(--t3)}

.spinner{width:26px;height:26px;border:3px solid var(--bd);border-top-color:var(--gr);border-radius:50%;animation:spin .7s linear infinite;margin:0 auto 8px}
@keyframes spin{100%{transform:rotate(360deg)}}
.spin-text{font-size:12px;color:var(--t2);text-align:center}

.apanel{background:var(--wh);border-radius:20px 20px 0 0;max-height:92vh;display:flex;flex-direction:column;animation:slideUp .24s ease}
.apanel-hd{background:var(--wh);border-bottom:1px solid var(--bd);flex-shrink:0;padding:0 14px}
.ap-profile{display:flex;align-items:center;gap:10px;padding:12px 0 11px}
.ap-av{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;color:#fff;flex-shrink:0;overflow:hidden}
.ap-av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.ap-name{font-size:14px;font-weight:700;color:var(--t1)}
.ap-role{font-size:11px;color:var(--t2)}
.ap-badge{display:inline-block;padding:1px 7px;border-radius:3px;font-size:9px;font-weight:700;margin-left:4px;vertical-align:middle}
.ap-badge.n{background:#E8F5E9;color:#2E7D32}
.ap-badge.s{background:#FFF8E1;color:#E65100}
.ap-logout{margin-left:auto;padding:6px 13px;background:#FFEBEE;border:none;border-radius:20px;color:var(--rd);font-size:12px;font-weight:700;cursor:pointer;font-family:'Roboto';flex-shrink:0}
.ap-xbtn{margin-left:6px;width:30px;height:30px;background:var(--bg);border:1px solid var(--bd);border-radius:50%;cursor:pointer;color:var(--t2);font-size:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ap-tabs{display:flex;overflow-x:auto;scrollbar-width:none}
.ap-tabs::-webkit-scrollbar{display:none}
.ap-tab{flex-shrink:0;padding:10px 13px;font-size:12px;font-weight:500;color:var(--t2);background:none;border:none;border-bottom:2.5px solid transparent;cursor:pointer;font-family:'Roboto';display:flex;align-items:center;gap:5px;white-space:nowrap}
.ap-tab.on{color:var(--gr);border-color:var(--gr);font-weight:700}
.apanel-body{flex:1;overflow-y:auto;padding:12px 14px 24px;background:var(--bg)}
.apanel-body::-webkit-scrollbar{width:3px}
.apanel-body::-webkit-scrollbar-thumb{background:var(--bd);border-radius:3px}
.ap-sec{display:none}.ap-sec.on{display:block}
.ap-sec-label{font-size:11px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px}

.ag-card{background:var(--wh);border-radius:12px;padding:12px;margin-bottom:8px;box-shadow:var(--sh)}
.ag-top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ag-top img{width:38px;height:38px;border-radius:9px;object-fit:cover;flex-shrink:0}
.ag-gname{font-size:12px;font-weight:700;color:var(--t1)}
.ag-gos{font-size:10px;color:var(--t2);margin-top:1px;display:flex;align-items:center;gap:4px}
.ag-upd{font-size:9px;color:var(--t3);margin-top:3px;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.ag-upd-by{color:var(--gr)}
.ag-st{display:inline-block;padding:2px 8px;border-radius:3px;font-size:10px;font-weight:700;margin-left:auto;flex-shrink:0}
.ag-st.on{background:#E8F5E9;color:#2E7D32}
.ag-st.off{background:#FFEBEE;color:var(--rd)}
.ag-sw-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.ag-sw-lbl{font-size:12px;color:var(--t2)}
.sw{position:relative;width:44px;height:24px;flex-shrink:0}
.sw input{opacity:0;width:0;height:0}
.sw-t{position:absolute;inset:0;background:#ccc;border-radius:99px;cursor:pointer;transition:.25s}
.sw-t::before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.25s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.sw input:checked+.sw-t{background:var(--gr)}
.sw input:checked+.sw-t::before{transform:translateX(20px)}
.link-row{display:flex;align-items:center;gap:6px;margin-bottom:7px}
.link-lbl{font-size:9.5px;font-weight:700;color:var(--t2);width:78px;flex-shrink:0;line-height:1.3;display:flex;align-items:center;gap:3px}
.link-inp{flex:1;padding:7px 9px;background:var(--bg);border:1px solid var(--bd);border-radius:8px;color:var(--t1);font-size:11px;outline:none;font-family:'Roboto';transition:border-color .2s}
.link-inp:focus{border-color:var(--gr)}
.link-save{padding:7px 10px;background:var(--gr);border:none;border-radius:8px;color:#fff;font-size:10px;font-weight:700;cursor:pointer;white-space:nowrap;font-family:'Roboto';transition:.15s}
.link-save.ok{background:#66BB6A}
.link-save:disabled{opacity:.5;cursor:not-allowed}
.os-div{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;padding:12px 0 6px;color:var(--t2)}
.os-div.adr{color:#3DDC84}
.os-div.ios{color:#555}

.log-item{background:var(--wh);border-radius:10px;padding:10px 12px;margin-bottom:6px;box-shadow:var(--sh)}
.log-act{font-size:11px;font-weight:700;color:var(--t1);display:flex;align-items:center;gap:6px}
.log-meta{font-size:10px;color:var(--t2);margin-top:3px}
.log-who{color:var(--gr)}

.user-card{background:var(--wh);border-radius:12px;padding:12px;margin-bottom:7px;box-shadow:var(--sh)}
.u-top{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.u-av{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;flex-shrink:0;overflow:hidden}
.u-av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.u-name{font-size:13px;font-weight:700;color:var(--t1)}
.u-sub{font-size:10px;color:var(--t2)}
.u-online{display:flex;align-items:center;gap:4px;font-size:10px;font-weight:500;margin-left:auto;white-space:nowrap}
.u-online span{width:6px;height:6px;border-radius:50%;display:inline-block}
.u-online.on{color:var(--gr)}.u-online.on span{background:var(--gr)}
.u-online.off{color:var(--t3)}.u-online.off span{background:var(--t3)}
.u-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px 10px;font-size:10px;color:var(--t2);border-top:1px solid var(--bd);padding-top:8px}
.u-grid b{display:block;font-size:9px;color:var(--t3);font-weight:700;text-transform:uppercase;margin-bottom:1px}
.s-inp{width:100%;padding:9px 14px;background:var(--bg);border:1px solid var(--bd);border-radius:24px;font-size:13px;outline:none;font-family:'Roboto';margin-bottom:8px;transition:border-color .2s}
.s-inp:focus{border-color:var(--gr)}
.uftabs{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.uftab{padding:5px 12px;border-radius:16px;font-size:11px;font-weight:500;background:var(--wh);border:1px solid var(--bd);color:var(--t2);cursor:pointer;font-family:'Roboto'}
.uftab.active{background:var(--grl);border-color:var(--gr);color:var(--gr);font-weight:700}

.afield{width:100%;padding:11px 14px;background:var(--bg);border:1.5px solid var(--bd);border-radius:10px;color:var(--t1);font-size:14px;font-family:'Roboto';outline:none;margin-bottom:10px;transition:border-color .2s}
.afield:focus{border-color:var(--gr)}
.afield::placeholder{color:var(--t3)}
.err-msg{font-size:12px;color:var(--rd);background:#FFEBEE;border-radius:8px;padding:8px 12px;margin-bottom:10px;display:none}
.err-msg.on{display:block}
.abtn{width:100%;padding:12px;background:var(--gr);border:none;border-radius:24px;color:#fff;font-family:'Roboto';font-size:14px;font-weight:700;cursor:pointer;margin-bottom:8px;transition:.15s}
.abtn:active{background:var(--grd)}
.abtn:disabled{opacity:.5;cursor:not-allowed}
.abtn.outline{background:var(--wh);border:1.5px solid var(--bd);color:var(--t2)}
.abtn.red{background:var(--wh);border:1.5px solid rgba(244,67,54,.3);color:var(--rd)}
.al-step{display:none}.al-step.on{display:block}
.al-loader{display:none;text-align:center;padding:20px}

.ad-close-x {
    position: absolute;
    top: -16px;
    right: -16px;
    background: #fff;
    color: #333;
    border: none;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    font-size: 17px;
    cursor: pointer;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 12px rgba(0,0,0,.25);
    transition: transform 0.2s, box-shadow 0.2s;
}
.ad-close-x:hover { transform: scale(1.08); box-shadow: 0 4px 16px rgba(0,0,0,.35); }
.ad-close-x:active { transform: scale(0.95); }

.adv-content-area {
    flex: 1;
    overflow-y: auto;
    padding: 16px 16px 0 16px;
    border-radius: 16px 16px 0 0;
    background: #fff;
}
.adv-content-area img.adv-img, .adv-content-area video {
    max-width: 100%;
    height: auto;
    display: block;
    border: none;
    outline: none;
    margin: 0 auto;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    background: none;
}
.adv-content-area .adv-text {
    font-size: 14px;
    color: var(--t1);
    margin-top: 12px;
    text-align: center;
    line-height: 1.5;
}
.adv-checkbox-area {
    padding: 12px 16px;
    border-top: 1px solid var(--bd);
    font-size: 12px;
    color: var(--t2);
    background: #fff;
    border-radius: 0 0 16px 16px;
}
.adv-checkbox-area label {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Xóa highlight mặc định khi chạm */
*{-webkit-tap-highlight-color:transparent;}

/* ── TOUCH RIPPLE + PARTICLE ── */
.touch-ripple{position:fixed;border-radius:50%;pointer-events:none;z-index:99999;transform:translate(-50%,-50%) scale(0);animation:touchRipple .5s ease-out forwards;background:radial-gradient(circle,rgba(255,255,255,0.35) 0%,rgba(255,255,255,0) 70%);}
@keyframes touchRipple{0%{transform:translate(-50%,-50%) scale(0);opacity:.8}100%{transform:translate(-50%,-50%) scale(1);opacity:0}}
.touch-particle{position:fixed;border-radius:50%;pointer-events:none;z-index:99999;transform:translate(-50%,-50%);animation:touchParticle var(--dur,.55s) ease-out forwards;}
@keyframes touchParticle{0%{transform:translate(-50%,-50%) translate(0,0) scale(1);opacity:.9}100%{transform:translate(-50%,-50%) translate(var(--tx),var(--ty)) scale(0);opacity:0}}

/* ── DRAWER ITEM GOLD / PINK (Shop VIP + Ủng hộ) ── */
.drawer-item-gold{color:#8B6914!important;}
.drawer-item-gold i{color:#D4AF37!important;}
.drawer-item-gold:active{background:#FFF8E1!important;}
.drawer-item-pink{color:#880E4F!important;}
.drawer-item-pink i{color:#E91E63!important;}
.drawer-item-pink:active{background:#FCE4EC!important;}

/* ── TOUCH RIPPLE + PARTICLE ── */
*{-webkit-tap-highlight-color:transparent;}
.touch-ripple{position:fixed;border-radius:50%;pointer-events:none;z-index:99999;transform:translate(-50%,-50%) scale(0);animation:touchRipple .5s ease-out forwards;background:radial-gradient(circle,rgba(255,255,255,0.35) 0%,rgba(255,255,255,0) 70%);}
@keyframes touchRipple{0%{transform:translate(-50%,-50%) scale(0);opacity:.8}100%{transform:translate(-50%,-50%) scale(1);opacity:0}}
.touch-particle{position:fixed;border-radius:50%;pointer-events:none;z-index:99999;transform:translate(-50%,-50%);animation:touchParticle var(--dur,.55s) ease-out forwards;}
@keyframes touchParticle{0%{transform:translate(-50%,-50%) translate(0,0) scale(1);opacity:.9}100%{transform:translate(-50%,-50%) translate(var(--tx),var(--ty)) scale(0);opacity:0}}