/* ============================================================
   COINFLIX.IN — Main Stylesheet FINAL v3
   Exact Path: public_html/assets/css/style.css
   Phase 8 — Final Global Design System + Responsive Stabilization
   Target: Modern browsers / PHP 8.3 project
   Unified responsive surface, navigation and form system
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');

:root{
    --bg:#eef2f6;
    --card:#ffffff;
    --surface:#f4f6f8;
    --surface-2:#e7ecf2;
    --surface-hover:#dde4ec;
    --border:#d2dae5;
    --border-strong:#bdc8d6;
    --media:#0b0f16;

    --red:#ef3d3d;
    --red-dark:#d92525;
    --red-soft:#fff0f0;
    --primary:#ef3d3d;
    --primary-strong:#d92525;
    --primary-soft:#fff0f0;

    --text:#24344d;
    --text-muted:#606b7c;
    --muted:#6f7d92;
    --blue:#2196f3;
    --green:#22a95b;
    --gold:#ffc107;
    --gold-dark:#d99a00;
    --purple:#6d3df5;

    --shadow-sm:0 3px 10px rgba(35,52,77,.06);
    --shadow-md:0 10px 28px rgba(35,52,77,.09);
    --shadow-lg:0 20px 55px rgba(35,52,77,.15);

    --radius-sm:10px;
    --radius:14px;
    --radius-lg:20px;
    --header-h:58px;
    --bottom-nav-h:62px;
}

html{
    width:100%;
    min-height:100%;
    overflow-x:hidden;
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
}

*,
*::before,
*::after{
    box-sizing:border-box;
}

*{
    margin:0;
    padding:0;
}

body{
    width:100%;
    min-height:100vh;
    max-width:100%;
    overflow-x:hidden;
    background:var(--bg);
    color:var(--text);
    font-family:'Roboto',Arial,sans-serif;
    line-height:1.5;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
}

a{
    color:inherit;
    text-decoration:none;
    -webkit-tap-highlight-color:transparent;
}

button,
input,
textarea,
select{
    color:inherit;
    font:inherit;
}

button,
a{
    touch-action:manipulation;
}

button{
    -webkit-tap-highlight-color:transparent;
}

button:disabled{
    cursor:not-allowed;
    opacity:.65;
}

img{
    display:block;
    max-width:100%;
}

.mono{
    font-family:'Roboto',Arial,sans-serif;
    font-variant-numeric:tabular-nums;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
    outline:3px solid rgba(47,111,168,.20);
    outline-offset:2px;
}

/* ---------- Shared interior page header ---------- */

.coinflix-page-header{
    position:sticky;
    top:0;
    z-index:1000;
    width:100%;
    min-height:var(--header-h);
    display:grid;
    grid-template-columns:minmax(42px,auto) minmax(0,1fr) minmax(42px,auto);
    align-items:center;
    gap:8px;
    padding:
        7px max(10px,env(safe-area-inset-right))
        7px max(10px,env(safe-area-inset-left));
    border-bottom:1px solid rgba(227,229,232,.96);
    background:rgba(255,255,255,.97);
    box-shadow:0 2px 12px rgba(35,52,77,.05);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}

.page-header-left,
.page-header-actions{
    display:flex;
    align-items:center;
    gap:6px;
}

.page-header-actions{
    justify-content:flex-end;
}

.page-header-title-wrap{
    min-width:0;
    text-align:center;
}

.page-header-title{
    overflow:hidden;
    color:var(--text);
    font-size:clamp(16px,4vw,19px);
    font-weight:900;
    line-height:1.25;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.page-header-brand{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    color:var(--text);
    font-size:17px;
    font-weight:900;
}

.page-header-brand-coin{
    width:30px;
    height:30px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:2px solid #bd7b00;
    border-radius:50%;
    background:radial-gradient(circle at 34% 28%,#fff4ad 0 10%,#f6c929 45%,#d99b00 78%,#a96700 100%);
    color:#825000;
    box-shadow:inset 0 0 0 2px #ffe867,0 3px 8px rgba(156,96,0,.24);
    font-size:14px;
    font-weight:900;
}

.back-btn,
.page-home-btn,
.coinflix-page-header .hamburger{
    width:42px;
    height:42px;
    flex:0 0 42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0;
    border:0;
    border-radius:50%;
    background:transparent;
    color:var(--text);
    cursor:pointer;
    transition:background-color .16s ease,transform .16s ease;
}

.back-btn:hover,
.page-home-btn:hover,
.coinflix-page-header .hamburger:hover{
    background:var(--surface-hover);
}

.back-btn:active,
.page-home-btn:active,
.coinflix-page-header .hamburger:active{
    transform:scale(.94);
}

.back-btn svg,
.page-home-btn svg,
.coinflix-page-header .hamburger svg{
    width:22px;
    height:22px;
    fill:none;
    stroke:currentColor;
    stroke-width:2.1;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* ---------- Home topbar ---------- */

.topbar{
    position:sticky;
    top:0;
    z-index:1000;
    width:100%;
    min-height:var(--header-h);
    display:flex;
    align-items:center;
    gap:10px;
    padding:
        8px max(14px,env(safe-area-inset-right))
        8px max(14px,env(safe-area-inset-left));
    background:rgba(255,255,255,.97);
    border-bottom:1px solid rgba(227,229,232,.95);
    box-shadow:0 1px 8px rgba(35,52,77,.04);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}

.menu-btn{
    width:40px;
    height:40px;
    flex:0 0 40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:50%;
    background:transparent;
    color:var(--text);
    font-size:22px;
    cursor:pointer;
    transition:background .18s ease,transform .18s ease;
}

.menu-btn:hover,
.menu-btn:active{
    background:var(--surface-hover);
}

.menu-btn:active{
    transform:scale(.94);
}

.logo{
    display:flex;
    align-items:center;
    gap:8px;
    flex-shrink:0;
}

.logo-coin{
    position:relative;
    width:34px;
    height:34px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    border:2px solid #bd7b00;
    border-radius:50%;
    background:
        radial-gradient(circle at 32% 24%,#fff4ad 0 9%,transparent 10%),
        radial-gradient(circle at 34% 30%,#ffe783 0 22%,#f6c929 48%,#d99b00 78%,#a96700 100%);
    color:#8a5600;
    box-shadow:
        inset 0 0 0 2px #ffe867,
        inset 0 -4px 7px rgba(107,61,0,.28),
        0 3px 9px rgba(156,96,0,.30);
    font-size:17px;
    font-weight:900;
    text-shadow:0 1px 0 #fff3a5;
}

.logo-coin::before{
    content:'';
    position:absolute;
    inset:4px;
    border:1px dotted rgba(120,73,0,.58);
    border-radius:50%;
}

.logo-coin::after{
    content:'';
    position:absolute;
    top:-55%;
    left:-145%;
    width:62%;
    height:210%;
    background:rgba(255,255,255,.55);
    transform:rotate(22deg);
    animation:coinShine 4s ease-in-out infinite;
}

@keyframes coinShine{
    0%,20%{left:-145%}
    48%,100%{left:155%}
}

.logo-text{
    color:var(--text);
    font-size:22px;
    font-weight:900;
    letter-spacing:-.7px;
}

.logo-text .red{
    color:var(--red);
}

.search-wrap{
    position:relative;
    min-width:0;
    max-width:680px;
    flex:1 1 auto;
    display:flex;
    align-items:center;
    margin-inline:auto;
    overflow:visible;
    border:1px solid var(--border-strong);
    border-radius:24px;
    background:#fff;
    box-shadow:inset 0 1px 2px rgba(0,0,0,.03);
    transition:border-color .18s ease,box-shadow .18s ease;
}

.search-wrap:focus-within{
    border-color:#1c62b9;
    box-shadow:0 0 0 3px rgba(28,98,185,.10);
}

.search-wrap input{
    min-width:0;
    height:42px;
    flex:1;
    padding:0 16px;
    border:0;
    outline:0;
    border-radius:24px 0 0 24px;
    background:#fff;
    color:var(--text);
    font-size:15px;
}

.search-wrap input::placeholder{
    color:#7b7f86;
}

.search-wrap button{
    width:52px;
    height:42px;
    flex:0 0 52px;
    border:0;
    border-left:1px solid var(--border);
    border-radius:0 24px 24px 0;
    background:#fff;
    color:var(--text);
    cursor:pointer;
    transition:background .18s ease;
}

.search-wrap button:hover{
    background:var(--surface);
}

.topbar-icons{
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
    font-size:20px;
}

.avatar{
    width:34px;
    height:34px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--border);
    border-radius:50%;
    background:linear-gradient(145deg,#f3f3f3,#e9e9e9);
    box-shadow:var(--shadow-sm);
    font-size:14px;
}

.avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.auth-links{
    display:flex;
    align-items:center;
    gap:8px;
}

.auth-links a{
    padding:9px 15px;
    border:1px solid var(--border);
    border-radius:20px;
    background:#fff;
    color:var(--text);
    font-size:13px;
    font-weight:700;
    white-space:nowrap;
    transition:transform .16s ease,background .16s ease,box-shadow .16s ease;
}

.auth-links a.primary{
    display:flex;
    align-items:center;
    gap:6px;
    border:0;
    background:linear-gradient(135deg,var(--red),#e60000);
    color:#fff;
    box-shadow:0 5px 16px rgba(255,0,0,.22);
}

.auth-links a:hover{
    transform:translateY(-1px);
}

.auth-links a.primary:hover{
    background:var(--red-dark);
}

/* ---------- Main layout ---------- */

.layout{
    width:100%;
    max-width:100vw;
    display:flex;
    overflow-x:hidden;
}

.sidebar{
    position:sticky;
    top:var(--header-h);
    width:240px;
    height:calc(100vh - var(--header-h));
    flex:0 0 240px;
    overflow-y:auto;
    padding:14px 10px;
    border-right:1px solid var(--border);
    background:#fff;
}

.sidebar-backdrop{
    position:fixed;
    inset:0;
    z-index:1400;
    display:none;
    background:rgba(35,52,77,.42);
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
}

.sidebar-backdrop.open{
    display:block;
}

.nav-group{
    margin-bottom:8px;
    padding-bottom:8px;
    border-bottom:1px solid var(--border);
}

.nav-group:last-child{
    border-bottom:0;
}

.nav-item{
    display:flex;
    align-items:center;
    gap:18px;
    min-height:46px;
    padding:11px 13px;
    border-radius:11px;
    color:var(--text);
    font-size:14px;
    transition:background .16s ease,transform .16s ease;
}

.nav-item:hover{
    background:var(--surface-hover);
    transform:translateX(2px);
}

.nav-item.active{
    background:var(--surface-2);
    font-weight:700;
}

.nav-item .icon{
    width:22px;
    text-align:center;
    font-size:19px;
}

.nav-item.business{
    color:var(--red);
    font-weight:700;
}

.nav-divider{
    margin:8px;
    border-top:1px solid var(--border);
}

.main{
    min-width:0;
    max-width:100%;
    flex:1;
    overflow-x:hidden;
    padding:24px 26px 90px;
}

/* ---------- Shared headings ---------- */

.section-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-bottom:16px;
}

.section-head h2{
    font-size:22px;
    font-weight:900;
    letter-spacing:-.35px;
}

.section-head .tag{
    color:var(--red);
    font-size:11px;
    font-weight:800;
    letter-spacing:.6px;
    text-transform:uppercase;
}

/* ---------- Hero ---------- */

.hero-slider{
    position:relative;
    height:240px;
    overflow:hidden;
    margin-bottom:26px;
    border-radius:var(--radius-lg);
    background:#172236;
    box-shadow:var(--shadow-md);
}

.hero-slide{
    position:absolute;
    inset:0;
    display:none;
    align-items:center;
    padding:0 36px;
    background-position:center;
    background-size:cover;
    color:#fff;
}

.hero-slide.active{
    display:flex;
}

.hero-slide-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(110deg,rgba(13,20,32,.84),rgba(13,20,32,.22));
}

.hero-slide-content{
    position:relative;
    z-index:2;
    max-width:520px;
}

.hero-slide-title{
    margin-bottom:6px;
    font-size:30px;
    font-weight:900;
    line-height:1.12;
}

.hero-slide-sub{
    margin-bottom:18px;
    font-size:14px;
    opacity:.9;
}

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

.hero-slide-btns a{
    min-height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 20px;
    border-radius:22px;
    font-size:13px;
    font-weight:800;
}

.hero-slide-btns a.primary{
    background:var(--red);
    color:#fff;
    box-shadow:0 5px 18px rgba(255,0,0,.32);
}

.hero-slide-btns a.secondary{
    border:1px solid rgba(255,255,255,.42);
    background:rgba(255,255,255,.14);
    color:#fff;
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
}

.hero-dots{
    position:absolute;
    bottom:14px;
    left:50%;
    z-index:3;
    display:flex;
    gap:6px;
    transform:translateX(-50%);
}

.hero-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:rgba(255,255,255,.42);
    transition:.2s ease;
}

.hero-dot.active{
    width:22px;
    border-radius:5px;
    background:#fff;
}

/* ---------- Category chips ---------- */

.cat-chips-row{
    display:flex;
    gap:10px;
    overflow-x:auto;
    margin-bottom:8px;
    padding:1px 1px 17px;
    scrollbar-width:none;
}

.cat-chips-row::-webkit-scrollbar{
    display:none;
}

.cat-chip-x{
    min-height:38px;
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:6px;
    padding:8px 16px;
    border:1px solid var(--border);
    border-radius:20px;
    background:#fff;
    box-shadow:var(--shadow-sm);
    font-size:13px;
    font-weight:700;
    white-space:nowrap;
    transition:transform .15s ease,background .15s ease;
}

.cat-chip-x:hover{
    background:var(--surface);
    transform:translateY(-1px);
}

.cat-chip-x.active{
    border-color:var(--text);
    background:var(--text);
    color:#fff;
}

.cat-chip-x.trending{
    border-color:rgba(255,0,0,.22);
    background:var(--red-soft);
    color:var(--red);
}

/* ---------- Video grid ---------- */

.video-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
    gap:24px 18px;
    margin-bottom:38px;
}

.video-card{
    min-width:0;
    transition:transform .18s ease;
}

.video-card:hover{
    transform:translateY(-3px);
}

.thumb-wrap{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    overflow:hidden;
    margin-bottom:10px;
    border-radius:var(--radius);
    background:var(--media);
    box-shadow:var(--shadow-sm);
}

.thumb-wrap img{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
    background:var(--media);
    transition:transform .28s ease;
}

.video-card:hover .thumb-wrap img{
    transform:scale(1.025);
}

.thumb-placeholder{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#f3f3f3,#e9e9e9);
    color:var(--text-muted);
    font-size:13px;
}

.duration-badge{
    position:absolute;
    right:7px;
    bottom:7px;
    padding:3px 6px;
    border-radius:5px;
    background:rgba(13,20,32,.86);
    color:#fff;
    font-size:11px;
    font-weight:700;
}

.video-meta{
    display:flex;
    gap:10px;
}

.video-meta .avatar-sm{
    width:38px;
    height:38px;
    flex:0 0 38px;
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:50%;
    background:var(--surface);
}

.video-title{
    display:-webkit-box;
    overflow:hidden;
    color:var(--text);
    font-size:14px;
    font-weight:700;
    line-height:1.35;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}

.video-sub{
    margin-top:4px;
    color:var(--text-muted);
    font-size:12.5px;
}

/* ---------- Empty / featured blocks ---------- */

.empty-state,
.trending-featured{
    margin-bottom:38px;
    padding:42px 22px;
    border-radius:var(--radius-lg);
    text-align:center;
}

.empty-state{
    border:1px solid var(--border);
    background:linear-gradient(145deg,#fafafa,#f4f4f5);
    color:var(--text-muted);
}

.empty-state h3{
    margin-bottom:7px;
    color:var(--text);
    font-size:19px;
    font-weight:800;
}

.empty-state a,
.trending-featured a{
    min-height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-top:16px;
    padding:10px 24px;
    border-radius:22px;
    background:var(--red);
    color:#fff;
    box-shadow:0 5px 16px rgba(255,0,0,.24);
    font-size:13px;
    font-weight:800;
}

.trending-featured{
    background:
        radial-gradient(circle at 15% 15%,rgba(255,0,0,.28),transparent 32%),
        linear-gradient(135deg,#26364e,#101826);
    color:#fff;
    box-shadow:var(--shadow-md);
}

.trending-featured .flame{
    margin-bottom:8px;
    font-size:36px;
}

.trending-featured h3{
    margin-bottom:6px;
    font-size:21px;
    font-weight:900;
}

.trending-featured p{
    color:rgba(255,255,255,.72);
    font-size:13px;
}

/* ---------- Demo cards ---------- */

.demo-badge{
    position:absolute;
    top:7px;
    left:7px;
    padding:3px 8px;
    border-radius:5px;
    background:rgba(13,20,32,.78);
    color:#fff;
    font-size:10px;
    font-weight:800;
    letter-spacing:.5px;
}

.thumb-wrap.demo{
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#2b3546,#101826);
}

.thumb-wrap.demo .play-ic{
    color:rgba(255,255,255,.55);
    font-size:32px;
}

/* ---------- Profile and forms ---------- */

.profile-header{
    display:flex;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
    margin-bottom:26px;
    padding:26px 0;
    border-bottom:1px solid var(--border);
}

.profile-photo{
    width:98px;
    height:98px;
    flex:0 0 98px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    border:2px solid #fff;
    border-radius:50%;
    background:linear-gradient(145deg,#f5f5f5,#e9e9e9);
    color:var(--text-muted);
    box-shadow:var(--shadow-md);
    font-size:34px;
    font-weight:700;
    object-fit:cover;
}

.profile-info h1{
    font-size:24px;
    font-weight:800;
}

.profile-username{
    margin-top:2px;
    color:var(--text-muted);
    font-size:13px;
}

.profile-stats{
    display:flex;
    gap:18px;
    margin-top:10px;
    font-size:13px;
}

.profile-stats b{
    font-weight:800;
}

.profile-stats span{
    color:var(--text-muted);
}

.profile-actions{
    display:flex;
    gap:10px;
    margin-left:auto;
}

.profile-bio{
    max-width:520px;
    margin-top:8px;
    color:var(--text-muted);
    font-size:13px;
}

.btn{
    min-height:42px;
    padding:10px 22px;
    border:1px solid var(--border);
    border-radius:22px;
    background:#fff;
    color:var(--text);
    box-shadow:var(--shadow-sm);
    font-size:14px;
    font-weight:800;
    cursor:pointer;
    transition:.16s ease;
}

.btn:hover{
    background:var(--surface);
    transform:translateY(-1px);
}

.btn:active{
    transform:scale(.97);
}

.btn-gold{
    border-color:var(--gold-dark);
    background:linear-gradient(
        135deg,
        var(--gold),
        var(--gold-dark)
    );
    color:#3a2800;
    box-shadow:0 6px 17px rgba(217,154,0,.24);
}

.btn-gold:hover{
    background:linear-gradient(
        135deg,
        #ffd34f,
        #c88d00
    );
}

.form-card{
    width:100%;
    max-width:520px;
    padding:24px;
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    background:#fff;
    box-shadow:var(--shadow-sm);
}

.form-card label{
    display:block;
    margin:15px 0 6px;
    color:var(--text-muted);
    font-size:12px;
    font-weight:700;
}

.form-card input,
.form-card textarea,
.form-card select{
    width:100%;
    min-height:43px;
    padding:10px 13px;
    border:1px solid var(--border);
    border-radius:10px;
    outline:0;
    background:#fff;
    color:var(--text);
    font-size:14px;
}

.form-card textarea{
    min-height:110px;
    resize:vertical;
}

.form-card input:focus,
.form-card textarea:focus,
.form-card select:focus{
    border-color:#065fd4;
    box-shadow:0 0 0 3px rgba(6,95,212,.09);
}

.channel-empty{
    max-width:520px;
    padding:26px;
    border:1px dashed var(--border-strong);
    border-radius:var(--radius-lg);
    background:var(--surface);
    text-align:center;
}

.channel-empty h3{
    margin-bottom:6px;
    font-size:18px;
    font-weight:800;
}

/* ---------- Bottom navigation ---------- */

.bottom-nav{
    position:fixed;
    right:0;
    bottom:0;
    left:0;
    z-index:1100;
    min-height:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
    display:none;
    padding-bottom:env(safe-area-inset-bottom);
    border-top:1px solid var(--border);
    background:rgba(255,255,255,.97);
    box-shadow:0 -4px 18px rgba(35,52,77,.05);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
}

.bottom-nav a{
    min-width:0;
    height:var(--bottom-nav-h);
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    padding:7px 2px;
    color:var(--text-muted);
    font-size:10px;
    font-weight:500;
}

.bottom-nav a.active{
    color:var(--red);
}

.bottom-nav a .icon{
    font-size:21px;
}

.bottom-nav a.upload .icon{
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--surface);
    color:var(--text);
}

/* ---------- Floating upload ---------- */

.fab-upload-wrap{
    position:relative;
}

.fab-upload{
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:4px solid var(--bg);
    border-radius:50%;
    background:linear-gradient(135deg,var(--red),#e60000)!important;
    color:#fff!important;
    box-shadow:0 7px 20px rgba(255,0,0,.35);
    font-size:23px;
    transform:translateY(-15px);
}

.fab-menu{
    position:fixed;
    bottom:calc(92px + env(safe-area-inset-bottom));
    left:50%;
    z-index:1250;
    width:210px;
    padding:8px;
    border:1px solid var(--border);
    border-radius:15px;
    background:#fff;
    box-shadow:var(--shadow-lg);
    opacity:0;
    pointer-events:none;
    transform:translateX(-50%) translateY(10px) scale(.96);
    transition:.16s ease;
}

.fab-menu.open{
    opacity:1;
    pointer-events:auto;
    transform:translateX(-50%) translateY(0) scale(1);
}

.fab-menu a{
    display:flex;
    align-items:center;
    gap:10px;
    padding:11px 14px;
    border-radius:10px;
    font-size:14px;
    font-weight:700;
}

.fab-menu a:hover{
    background:var(--surface);
}

.fab-backdrop{
    position:fixed;
    inset:0;
    z-index:1200;
    display:none;
    background:rgba(35,52,77,.30);
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
}

.fab-backdrop.open{
    display:block;
}

/* ---------- Footer ---------- */

.site-footer{
    margin-top:44px;
    padding:30px 4px 100px;
    border-top:1px solid var(--border);
}

.site-footer-links{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    margin-bottom:14px;
}

.site-footer-links a{
    color:var(--text-muted);
    font-size:13px;
    font-weight:500;
}

.site-footer-links a:hover{
    color:var(--text);
}

.site-footer-copy{
    color:var(--text-muted);
    font-size:12px;
}

/* ---------- Utility classes ---------- */

.sr-only{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    padding:0!important;
    overflow:hidden!important;
    clip:rect(0,0,0,0)!important;
    white-space:nowrap!important;
    border:0!important;
}

.no-scroll{
    overflow:hidden!important;
}

.text-muted{
    color:var(--text-muted)!important;
}

/* ---------- Responsive ---------- */

@media(max-width:900px){
    .sidebar{
        position:fixed;
        top:0;
        left:0;
        z-index:1500;
        width:270px;
        max-width:calc(100vw - 38px);
        height:100dvh;
        padding-top:72px;
        border-right:0;
        box-shadow:8px 0 28px rgba(35,52,77,.18);
        transform:translateX(-105%);
        transition:transform .24s ease;
    }

    .sidebar.open{
        transform:translateX(0);
    }

    .main{
        padding:20px 16px calc(88px + env(safe-area-inset-bottom));
    }

    .bottom-nav{
        display:flex;
    }

    .site-footer{
        padding-bottom:calc(90px + env(safe-area-inset-bottom));
    }
}

@media(max-width:600px){
    .topbar{
        gap:7px;
        padding-left:10px;
        padding-right:10px;
    }

    .logo-text{
        display:none;
    }

    .search-wrap{
        max-width:none;
        border-radius:22px;
    }

    .search-wrap input{
        height:40px;
        padding:0 13px;
        font-size:14px;
    }

    .search-wrap button{
        width:46px;
        height:40px;
        flex-basis:46px;
    }

    .topbar-icons{
        gap:7px;
        font-size:18px;
    }

    .auth-links{
        gap:6px;
    }

    .auth-links a{
        padding:7px 10px;
        font-size:12px;
    }

    a[aria-label="AI Assistant"]{
        display:none;
    }

    .main{
        padding:
            16px 12px
            calc(84px + env(safe-area-inset-bottom));
    }

    .hero-slider{
        height:196px;
        margin-inline:0;
        border-radius:16px;
    }

    .hero-slide{
        padding:0 20px;
    }

    .hero-slide-title{
        font-size:21px;
    }

    .hero-slide-sub{
        font-size:13px;
    }

    .video-grid{
        grid-template-columns:1fr;
        gap:22px;
    }

    .thumb-wrap{
        width:calc(100% + 24px);
        margin-right:-12px;
        margin-left:-12px;
        border-radius:0;
    }

    .section-head h2{
        font-size:20px;
    }

    .profile-header{
        align-items:flex-start;
    }

    .profile-actions{
        width:100%;
        margin-left:0;
    }

    .form-card{
        padding:18px;
    }
}

@media(max-width:380px){
    .coinflix-page-header{
        padding-left:6px;
        padding-right:6px;
    }

    .back-btn,
    .page-home-btn,
    .coinflix-page-header .hamburger{
        width:38px;
        height:38px;
        flex-basis:38px;
    }

    .auth-links a:first-child{
        display:none;
    }
}

@media(min-width:901px){
    .site-footer{
        padding-bottom:30px;
    }
}

@media(min-width:1280px){
    .main{
        max-width:1500px;
        margin:0 auto;
        padding-right:32px;
        padding-left:32px;
    }

    .video-grid{
        grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    }
}


/* ============================================================
   PHASE 8 — FINAL GLOBAL DESIGN SYSTEM
   ============================================================ */

html{
    max-width:100%;
    background:var(--bg);
}

@supports(overflow:clip){
    html,
    body,
    .layout,
    .main{
        overflow-x:clip;
    }
}

img,
video,
canvas,
svg{
    max-width:100%;
}

video{
    background:var(--media);
}

.coinflix-page-header,
.topbar{
    border-bottom-color:var(--border);
    box-shadow:0 4px 14px rgba(35,52,77,.05);
}

.page-header-brand-coin,
.logo-coin{
    border-color:#bd7b00;
    background:radial-gradient(
        circle at 34% 28%,
        #fff4ad 0 10%,
        #f6c929 45%,
        #d99b00 78%,
        #a96700 100%
    );
}

.search-wrap{
    border-color:var(--border);
    background:var(--surface);
}

.search-wrap:focus-within{
    border-color:var(--blue);
    background:#fff;
    box-shadow:0 0 0 4px rgba(33,150,243,.10);
}

.search-wrap button{
    background:var(--red);
    color:#fff;
}

.search-wrap button:hover{
    background:var(--red-dark);
}

.sidebar{
    border-right-color:var(--border);
    background:#fff;
}

.nav-group{
    border-bottom-color:var(--border);
}

.nav-item{
    font-weight:650;
}

.nav-item:hover{
    background:var(--surface-2);
}

.nav-item.active{
    background:var(--red-soft);
    color:var(--red-dark);
    font-weight:900;
}

.nav-item.business{
    color:var(--purple);
}

.main{
    background:var(--bg);
}

.section-head h2{
    color:var(--text);
}

.section-head .tag{
    color:var(--red);
}

.cat-chip-x{
    border-color:var(--border);
    background:#fff;
    box-shadow:var(--shadow-sm);
}

.cat-chip-x.active{
    border-color:var(--red);
    background:var(--red);
}

.video-card,
.form-card,
.channel-empty{
    content-visibility:auto;
    contain-intrinsic-size:auto 300px;
}

.video-card{
    min-width:0;
}

.thumb-wrap{
    background:var(--media);
}

.thumb-placeholder{
    background:linear-gradient(
        135deg,
        #151b25,
        #293548
    );
    color:#d8dee8;
}

.video-title{
    font-weight:900;
}

.video-sub,
.video-description,
.video-desc-snippet{
    color:var(--text-muted);
}

.video-desc-snippet{
    font-size:14px;
    font-weight:800;
    line-height:1.48;
}

.duration-badge{
    background:rgba(11,15,22,.88);
}

.btn{
    border-color:var(--border);
    background:#fff;
}

.btn:hover{
    border-color:var(--border-strong);
    background:var(--surface);
}

.form-card{
    border-color:var(--border);
    background:var(--card);
    box-shadow:var(--shadow-md);
}

.form-card input,
.form-card textarea,
.form-card select{
    border-color:var(--border);
    background:#f7f9fb;
    font-weight:650;
}

.form-card input:focus,
.form-card textarea:focus,
.form-card select:focus{
    border-color:var(--blue);
    background:#fff;
    box-shadow:0 0 0 4px rgba(33,150,243,.10);
}

.channel-empty{
    border-color:var(--border-strong);
    background:var(--card);
}

.bottom-nav{
    border-top-color:var(--border);
    background:rgba(255,255,255,.98);
    box-shadow:0 -6px 20px rgba(35,52,77,.08);
}

.bottom-nav a{
    min-height:48px;
    color:var(--text-muted);
    font-weight:800;
}

.bottom-nav a.active{
    color:var(--red);
}

.bottom-nav a .icon{
    line-height:1;
}

.bottom-nav .shorts-nav-icon{
    width:27px;
    height:27px;
    overflow:visible;
}

.bottom-nav .shorts-nav-icon .clapper-fill{
    fill:var(--red);
    stroke:none;
}

.bottom-nav .shorts-nav-icon .clapper-cut{
    fill:#fff;
    stroke:none;
}

.bottom-nav a.upload .icon,
.fab-upload{
    border-color:rgba(255,255,255,.94);
    background:linear-gradient(
        135deg,
        var(--gold),
        var(--gold-dark)
    ) !important;
    color:#3a2800 !important;
    box-shadow:0 8px 20px rgba(217,154,0,.30);
}

.bottom-nav .subscriptions-nav-item .icon,
.bottom-nav .subscriptions-nav-item .coin-nav{
    background:var(--purple);
    color:#fff;
}

.fab-menu{
    border-color:var(--border);
    background:#fff;
}

.fab-menu a:hover{
    background:var(--surface-2);
}

.site-footer{
    border-top-color:var(--border);
    background:var(--bg);
}

button,
a,
input,
textarea,
select{
    min-width:0;
}

button,
[role="button"],
.btn,
.action-button{
    min-height:42px;
}

::selection{
    background:rgba(239,61,61,.20);
    color:var(--text);
}

@media(max-width:900px){
    .sidebar{
        background:#fff;
    }

    .main{
        background:var(--bg);
    }
}

@media(max-width:600px){
    .main{
        padding-right:10px;
        padding-left:10px;
    }

    .video-grid{
        gap:16px;
    }

    .video-card{
        border:1px solid var(--border);
        border-radius:15px;
        background:#fff;
        box-shadow:0 5px 16px rgba(35,52,77,.06);
    }

    .video-card .video-meta{
        padding:0 11px 12px;
    }

    .thumb-wrap{
        width:100%;
        margin-right:0;
        margin-left:0;
        border-radius:14px 14px 0 0;
    }

    .video-title{
        font-size:16px;
    }

    .video-desc-snippet{
        font-size:14px;
    }
}

@media(max-width:380px){
    :root{
        --bottom-nav-h:60px;
    }

    .bottom-nav a{
        font-size:9.5px;
    }
}

@media(prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        scroll-behavior:auto!important;
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:.01ms!important;
    }
}


/* ============================================================
   COINFLIX.IN — RESPONSIVE STRUCTURE PATCH v1
   Scope: width, overflow, spacing and screen-fit only.
   Existing colours, buttons, chips, PHP logic and JS behaviour unchanged.
   ============================================================ */

:root{
    --coinflix-content-max:1600px;
    --coinflix-responsive-gutter:clamp(12px,2vw,28px);
}

html,
body{
    width:100%;
    max-width:100%;
    overflow-x:clip;
}

.layout,
.main,
.coinflix-page-header,
.topbar,
.bottom-nav{
    min-width:0;
}

.layout{
    width:100%;
    max-width:none;
}

.main{
    width:100%;
    max-width:var(--coinflix-content-max);
    margin-right:auto;
    margin-left:auto;
}

img,
video,
iframe,
canvas{
    max-width:100%;
}

@media(min-width:901px){
    .main{
        padding-right:var(--coinflix-responsive-gutter);
        padding-left:var(--coinflix-responsive-gutter);
    }
}

@media(max-width:900px){
    .main{
        width:100%;
        max-width:100%;
    }
}

@media(max-width:600px){
    .coinflix-page-header,
    .topbar{
        max-width:100vw;
    }

    .page-header-title,
    .page-header-brand,
    .logo,
    .search-wrap,
    .topbar-icons{
        min-width:0;
    }
}


/* ============================================================
   COINFLIX.IN — UNIVERSAL VIDEO / THUMBNAIL AUTO-FIT PATCH v2
   UI-only patch. Playback, feed, reward, click and database logic unchanged.
   - Normal videos remain in a stable responsive 16:9 frame.
   - Portrait/square media remains fully visible with a blurred backdrop.
   - Shorts 9:16 player/cards are intentionally excluded.
   ============================================================ */
.cf-auto-fit-frame{
    position:relative !important;
    width:100% !important;
    max-width:100% !important;
    overflow:hidden !important;
    isolation:isolate;
    background:#0b0f16 !important;
}

.cf-auto-fit-frame:not(.player-shell){
    aspect-ratio:16 / 9 !important;
}

.cf-auto-fit-backdrop{
    position:absolute;
    inset:-10%;
    z-index:0;
    display:block;
    pointer-events:none;
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    filter:blur(18px) brightness(.92) saturate(1.08);
    transform:scale(1.09);
    opacity:.96;
}

.cf-auto-fit-shade{
    position:absolute;
    inset:0;
    z-index:0;
    display:block;
    pointer-events:none;
    background:rgba(255,255,255,.02);
}

.cf-auto-fit-frame > img.cf-auto-fit-media,
.cf-auto-fit-frame > video.cf-auto-fit-media,
.cf-auto-fit-frame img.cf-auto-fit-media,
.cf-auto-fit-frame video.cf-auto-fit-media{
    position:relative !important;
    z-index:1 !important;
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    display:block !important;
    object-fit:contain !important;
    object-position:center !important;
    background:transparent !important;
}

/* Existing badges, play icons, menus and durations remain above media. */
.cf-auto-fit-frame .duration-badge,
.cf-auto-fit-frame .play-overlay,
.cf-auto-fit-frame .short-play-badge,
.cf-auto-fit-frame .channel-video-duration,
.cf-auto-fit-frame .video-duration,
.cf-auto-fit-frame .reward-badge,
.cf-auto-fit-frame .reward-eligible,
.cf-auto-fit-frame .fullscreen-btn{
    z-index:6;
}

@media (max-width:699px){
    .video-card,
    .mixed-video-card,
    .channel-video-card,
    .search-result-card{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
    }

    .cf-auto-fit-frame:not(.player-shell){
        width:100% !important;
        max-width:100% !important;
        aspect-ratio:16 / 9 !important;
    }
}

@media (min-width:700px){
    .cf-auto-fit-frame:not(.player-shell){
        aspect-ratio:16 / 9 !important;
    }
}



/* ============================================================
   COINFLIX.IN — HOME/FEED MEDIA FRAME FINAL v3
   Presentation only: all existing click, reward, feed and API logic stays intact.
   Normal videos use one stable 16:9 frame on mobile, tablet and desktop.
   Portrait/square media stays fully visible over the existing blurred backdrop.
   Shorts are intentionally excluded.
   ============================================================ */
.video-card .thumb-wrap,
.mixed-video-card .thumb-wrap,
.infinite-feed .thumb-wrap,
.trending-thumb.cf-auto-fit-frame,
.recent-thumb.cf-auto-fit-frame{
    position:relative !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    aspect-ratio:16 / 9 !important;
    overflow:hidden !important;
    background:#0b0f16 !important;
}

.video-card .thumb-wrap > img,
.mixed-video-card .thumb-wrap > img,
.infinite-feed .thumb-wrap > img,
.trending-thumb.cf-auto-fit-frame > img,
.recent-thumb.cf-auto-fit-frame > img{
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
    object-position:center !important;
}

@media (max-width:699px){
    .video-card .thumb-wrap,
    .mixed-video-card .thumb-wrap,
    .infinite-feed .thumb-wrap{
        width:100% !important;
        max-width:100% !important;
        aspect-ratio:16 / 9 !important;
        margin-inline:0 !important;
    }
}


/* ============================================================
   COINFLIX.IN — FINAL 16:9 FULL-FRAME OVERRIDE v4
   Regular thumbnails only; Shorts remain unchanged.
   ============================================================ */
html,
body{
    width:100%;
    max-width:100%;
    overflow-x:hidden !important;
}

.cf-auto-fit-frame{
    background:#e7ebf0 !important;
}

.cf-auto-fit-frame > .cf-auto-fit-backdrop{
    inset:-12% !important;
    opacity:1 !important;
    filter:blur(18px) brightness(.92) saturate(1.08) !important;
    transform:scale(1.12) !important;
}

.cf-auto-fit-frame > .cf-auto-fit-shade{
    background:rgba(255,255,255,.02) !important;
}

.video-card .thumb-wrap,
.video-card .thumb-wrap.landscape-fit,
.video-card .thumb-wrap.portrait-fit,
.video-card .thumb-wrap.square-fit,
.mixed-video-card .thumb-wrap,
.infinite-feed .thumb-wrap,
.search-result-card .thumb-wrap,
.channel-video-card .thumb-wrap{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    aspect-ratio:16 / 9 !important;
    overflow:hidden !important;
}

.cf-auto-fit-frame.landscape-fit > .cf-auto-fit-backdrop{
    opacity:0 !important;
}

.cf-auto-fit-frame.landscape-fit > img.cf-auto-fit-media,
.cf-auto-fit-frame.landscape-fit img.cf-auto-fit-media{
    object-fit:cover !important;
}

.cf-auto-fit-frame.portrait-fit > img.cf-auto-fit-media,
.cf-auto-fit-frame.square-fit > img.cf-auto-fit-media,
.cf-auto-fit-frame.portrait-fit img.cf-auto-fit-media,
.cf-auto-fit-frame.square-fit img.cf-auto-fit-media{
    object-fit:contain !important;
    background:transparent !important;
}

.player-shell.cf-auto-fit-frame > video.cf-auto-fit-media{
    object-fit:contain !important;
    background:transparent !important;
}

@media(max-width:699px){
    .layout,
    .main,
    .app-frame,
    .watch-layout,
    .watch-primary,
    .watch-mixed-feed-shell,
    .watch-mixed-feed{
        min-width:0 !important;
        max-width:100% !important;
    }

    .video-card,
    .mixed-video-card,
    .search-result-card,
    .channel-video-card{
        min-width:0 !important;
        overflow:hidden !important;
    }

    .video-card .thumb-wrap,
    .mixed-video-card .thumb-wrap,
    .infinite-feed .thumb-wrap,
    .search-result-card .thumb-wrap,
    .channel-video-card .thumb-wrap{
        max-width:100% !important;
        aspect-ratio:16 / 9 !important;
    }
}