/* =========================================================
   Global
========================================================= */

*{
    box-sizing:border-box;
}

body{
    margin:0;
    background:#0f0f0f;
    color:#fff;
    font-family:Arial, "Microsoft JhengHei", sans-serif;
}

a{
    text-decoration:none;
    color:#fff;
}

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


/* =========================================================
   Topbar / Header
========================================================= */

.topbar{
    height:60px;
    background:#181818;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 20px;
    position:sticky;
    top:0;
    z-index:999;
}

.logo{
    font-size:24px;
    font-weight:bold;
    flex-shrink:0;
}

.right-menu{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:15px;
}

.right-menu select{
    min-width:130px;
    height:38px;
    padding:0 14px;
    border-radius:10px;
    background:#111;
    color:#fff;
    border:1px solid #333;
    font-weight:600;
    outline:none;
}

.right-menu select:hover{
    border-color:#555;
    background:#181818;
}

.right-menu select option{
    background:#111;
    color:#fff;
}

.user-btn{
    background:none;
    border:0;
    color:#fff;
    font-size:16px;
    cursor:pointer;
}


/* =========================================================
   Dropdown Menu
========================================================= */

.dropdown{
    position:relative;
}

.dropdown-menu{
    position:absolute;
    right:0;
    top:45px;
    min-width:220px;
    background:#202020;
    border-radius:14px;
    overflow:hidden;
    opacity:0;
    visibility:hidden;
    transform:translateY(10px);
    transition:0.2s;
    box-shadow:0 10px 30px rgba(0,0,0,0.45);
    z-index:9999;
}

.dropdown-menu.show{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.dropdown-menu a{
    display:block;
    padding:12px 16px;
    line-height:1.35;
}

.dropdown-menu a:hover{
    background:#2d2d2d;
}

.admin-notify-dropdown{
    position:relative;
}

.admin-notify-btn{
    position:relative;
    width:40px;
    height:40px;
    border:1px solid #333;
    border-radius:999px;
    background:#181818;
    color:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}

.admin-notify-btn:hover{
    border-color:#555;
    background:#222;
}

.admin-notify-btn svg{
    width:20px;
    height:20px;
    display:block;
}

.admin-notify-badge{
    position:absolute;
    top:-6px;
    right:-6px;
    min-width:19px;
    height:19px;
    padding:0 5px;
    border-radius:999px;
    background:#ff416a;
    color:#fff;
    font-size:11px;
    font-weight:900;
    line-height:19px;
    text-align:center;
    box-shadow:0 0 0 2px #181818;
}

.admin-notify-menu{
    min-width:290px;
    padding:8px;
    overflow:visible;
}

.admin-notify-title{
    padding:9px 10px 8px;
    color:#aaa;
    font-size:13px;
    font-weight:800;
    border-bottom:1px solid #303030;
}

.dropdown-menu .admin-notify-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-top:6px;
    padding:11px 10px;
    border-radius:10px;
}

.admin-notify-item span{
    color:#fff;
    font-weight:700;
}

.admin-notify-item strong{
    min-width:26px;
    height:24px;
    padding:0 8px;
    border-radius:999px;
    background:#ff416a;
    color:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
}

.admin-notify-empty{
    padding:14px 10px;
    color:#aaa;
    font-size:14px;
}


/* =========================================================
   Country Tabs
========================================================= */

.country-tabs{
    display:flex;
    gap:10px;
    padding:15px;
    overflow-x:auto;
    background:#121212;
    scrollbar-width:none;
    -ms-overflow-style:none;
}

.country-tabs::-webkit-scrollbar{
    display:none;
}

.country-tabs a{
    padding:8px 18px;
    border-radius:20px;
    background:#272727;
    white-space:nowrap;
    display:flex;
    align-items:center;
    gap:8px;
}

.country-tabs a.active{
    background:#fff;
    color:#000;
}
.country-flag{
    width:18px;
    height:18px;
    border-radius:50%;
    object-fit:cover;
    flex-shrink:0;
}

/* =========================================================
   Home Video Sections
========================================================= */

.video-section{
    padding:10px 20px 24px;
}

.video-section h2{
    font-size:22px;
    margin:10px 0 18px;
}

.video-section + .video-section{
    border-top:1px solid #1f1f1f;
    padding-top:26px;
}

.video-grid{
    display:flex;
    gap:20px;

    overflow-x:auto;
    overflow-y:hidden;

    padding:20px;

    scrollbar-width:none;
    -ms-overflow-style:none;

    cursor:grab;
    user-select:none;
    -webkit-user-select:none;
}

.video-grid::-webkit-scrollbar{
    display:none;
}

.video-grid.dragging{
    cursor:grabbing;
}



.video-grid .video-card{
    flex:0 0 calc((100% - 80px) / 5);
    min-width:260px;
}

.video-card{
    cursor:pointer;
}

.thumb-box{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    overflow:hidden;
    border-radius:12px;
    background:#222;
}

.thumb-box img,
.thumb-box video{
    width:100%;
    height:100%;
    object-fit:cover;
}

.preview-video{
    position:absolute;
    inset:0;
    opacity:0;
    transition:0.3s;
}

.thumb-box:hover .preview-video{
    opacity:1;
}

.video-info{
    display:flex;
    gap:12px;
    padding-top:10px;
}

.avatar{
    width:40px;
    height:40px;
    border-radius:50%;
    background:#555;
    flex-shrink:0;
}

.video-title{
    font-size:16px;
    line-height:1.4;
    margin-bottom:5px;
}

.video-meta{
    color:#aaa;
    font-size:14px;
}

.empty-cover{
    display:flex;
    align-items:center;
    justify-content:center;
    color:#888;
    font-size:13px;
}


/* =========================================================
   Watch Page
========================================================= */

.watch-page{
    max-width:1280px;
    margin:0 auto;
    padding:24px;
}

.watch-main{
    display:grid;
    grid-template-columns:1fr;
    gap:18px;
}

.watch-player{
    width:100%;
    background:#000;
    border-radius:18px;
    overflow:hidden;
}

.watch-player video{
    width:100%;
    max-height:720px;
    display:block;
    background:#000;
}

.watch-detail-card{
    background:#181818;
    border-radius:18px;
    padding:22px;
}

.watch-detail-card h1{
    margin:0 0 12px;
    font-size:26px;
    line-height:1.35;
}

.watch-stat-row{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    color:#aaa;
    font-size:14px;
    margin-bottom:18px;
}

.uploader-box{
    display:flex;
    align-items:center;
    gap:12px;
    padding:16px 0;
    border-top:1px solid #2c2c2c;
    border-bottom:1px solid #2c2c2c;
}

.uploader-name{
    font-weight:bold;
    font-size:16px;
}

.uploader-sub{
    color:#aaa;
    font-size:13px;
    margin-top:4px;
}

.watch-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:18px;
}

.download-btn,
.secondary-btn{
    display:inline-block;
    padding:10px 18px;
    border-radius:20px;
    font-weight:bold;
}

.download-btn{
    background:#fff;
    color:#000;
}

.secondary-btn,
.muted-btn{
    background:#333;
    color:#fff;
}

.login-tip{
    color:#ff7070;
}


/* =========================================================
   Form Pages: profile / upload / edit
========================================================= */

.form-wrap{
    max-width:520px;
    margin:40px auto;
    padding:0 16px;
}

.form-wrap h1{
    font-size:28px;
    margin-bottom:20px;
}

.form-card{
    background:#181818;
    border-radius:16px;
    padding:24px;
    display:flex;
    flex-direction:column;
    gap:10px;
}

#uploadInputFields{
    display:flex;
    flex-direction:column;
    gap:10px;
}

#uploadInputFields[hidden]{
    display:none !important;
}

.form-card label{
    color:#aaa;
    font-size:14px;
    margin-top:8px;
}

.form-card input,
.form-card select{
    height:42px;
    border-radius:10px;
    border:1px solid #333;
    background:#0f0f0f;
    color:#fff;
    padding:0 12px;
    font-size:15px;
}

.form-card button{
    margin-top:18px;
    height:44px;
    border:0;
    border-radius:22px;
    background:#fff;
    color:#000;
    font-weight:bold;
    cursor:pointer;
}

.readonly-box{
    min-height:42px;
    border-radius:10px;
    background:#242424;
    color:#ddd;
    display:flex;
    align-items:center;
    padding:0 12px;
}

.msg-error{
    color:#ff6b6b;
}

.msg-success{
    color:#5cff9d;
}

.upload-progress-panel{
    margin-top:18px;
    padding:14px;
    border:1px solid #303030;
    border-radius:8px;
    background:#111;
}

.upload-progress-panel[hidden],
.upload-progress-actions[hidden]{
    display:none !important;
}

.upload-progress-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
}

.upload-progress-head strong,
.upload-progress-head span{
    color:#fff;
}

.upload-progress-track{
    width:100%;
    height:12px;
    overflow:hidden;
    border-radius:999px;
    background:#2b2b2b;
}

.upload-progress-fill{
    width:0;
    height:100%;
    border-radius:999px;
    background:#fff;
    transition:width .2s ease;
}

.upload-progress-meta{
    margin-top:10px;
    color:#b8c0cc;
    font-size:14px;
    line-height:1.5;
}

.upload-progress-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:12px;
}

.upload-progress-actions a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:36px;
    padding:0 14px;
    border-radius:999px;
    background:#fff;
    color:#000;
    text-decoration:none;
    font-weight:700;
}

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

.check-row{
    display:flex;
    align-items:center;
    gap:8px;
    color:#ddd !important;
}

.check-row input{
    width:auto;
    height:auto;
}


/* =========================================================
   Upload Preview
========================================================= */

.upload-preview-box{
    margin-top:20px;
    background:#181818;
    border-radius:16px;
    padding:20px;
}

.upload-preview-cover,
.upload-preview-video{
    width:100%;
    border-radius:12px;
    margin-top:12px;
    background:#000;
}

.upload-preview-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:16px;
}

.upload-preview-actions a{
    padding:10px 16px;
    border-radius:20px;
    background:#fff;
    color:#000;
    font-weight:bold;
}


/* =========================================================
   Member Tables: my_videos
========================================================= */

.page-wrap{
    width:calc(100% - 40px);
    max-width:1400px;
    margin:0 auto;
}

.page-wrap h1{
    font-size:28px;
    margin-bottom:20px;
}

.table-card{
    background:#181818;
    border-radius:16px;
    padding:18px;
    overflow-x:auto;
}

.data-table{
    width:100%;
    border-collapse:collapse;
    min-width:900px;
}

.data-table th,
.data-table td{
    padding:12px;
    border-bottom:1px solid #2c2c2c;
    text-align:left;
    vertical-align:middle;

    white-space:normal;
    word-break:break-word;
    overflow-wrap:anywhere;
}

.data-table th{
    color:#aaa;
    font-weight:normal;
}

.data-table td:nth-child(3),
.data-table td:nth-child(5){
    max-width:260px;
    line-height:1.5;
}

.removed-reason{
    white-space:normal;
    word-break:break-word;
    overflow-wrap:anywhere;
    line-height:1.5;
}

.mini-cover{
    width:120px;
    height:68px;
    object-fit:cover;
    border-radius:8px;
    background:#222;
}

.status-on{
    color:#5cff9d;
}

.status-off{
    color:#aaa;
}

.status-danger{
    color:#ff7070;
}

.removed-reason{
    margin-top:6px;
    color:#ff7070;
    font-size:13px;
}

.small-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 16px;
    height:36px;
    background:#333;
    border-radius:999px;
    margin-right:6px;
    font-size:13px;
    width:150px;
    color:#fff;
}

.small-btn:hover{
    background:#444;
}

.small-btn.danger{
    background:#7d1f1f;
    color:#fff !important;
    border:1px solid #a23a3a;
}
.small-btn.danger:hover{
    background:#444;
    color:#fff !important;
    border:1px solid #ffffff;
}
.muted{
    color:#777;
}

.empty-text{
    text-align:center;
    color:#888;
    padding:30px !important;
}


/* =========================================================
   Edit Video
========================================================= */

.edit-video-preview{
    width:100%;
    max-height:260px;
    background:#000;
    border-radius:12px;
}

.edit-cover-preview{
    width:100%;
    max-height:260px;
    object-fit:cover;
    border-radius:12px;
    background:#222;
}


/* =========================================================
   Google Login Button
========================================================= */

.google-login-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:44px;
    border-radius:22px;
    background:#fff;
    color:#111;
    font-weight:bold;
    margin-top:14px;
}


/* =========================================================
   Mobile
========================================================= */

@media(max-width:768px){

    .topbar{
        height:auto;
        min-height:56px;
        padding:12px 12px 10px;
        flex-wrap:wrap;
        align-items:center;
        row-gap:10px;
    }

    .logo{
        order:1;
        font-size:22px;
        line-height:1.2;
    }

    .right-menu{
        order:2;
        margin-left:auto;
    }

    .home-search-form{
        order:3;
        flex:0 0 100%;
        display:grid;
        grid-template-columns:minmax(0, 1fr) 76px;
        gap:8px;
        padding:0;
    }

    .home-search-form input{
        width:auto;
        min-width:0;
        height:38px;
        box-sizing:border-box;
    }

    .home-search-form button,
    .home-search-form a{
        height:38px;
        min-width:74px;
        box-sizing:border-box;
        padding:0 16px;
        flex:none;
        white-space:nowrap;
    }

    .country-tabs{
        padding:12px;
    }

    .video-section{
        padding:8px 10px 20px;
    }

    .video-section h2{
        font-size:20px;
        margin:8px 0 12px;
    }

    .video-grid{
        padding:10px;
        gap:14px;
    }

    .video-grid .video-card{
        flex:0 0 82%;
        min-width:260px;
    }

    .watch-page{
        padding:10px;
    }

    .watch-player{
        border-radius:0;
        margin-left:-10px;
        margin-right:-10px;
        width:calc(100% + 20px);
    }

    .watch-detail-card{
        padding:16px;
        border-radius:16px;
    }

    .watch-detail-card h1{
        font-size:20px;
    }

    .form-wrap{
        margin:20px auto;
    }

    .form-card{
        padding:18px;
    }

    .page-wrap{
        margin:20px auto;
    }

    .table-card{
        padding:10px;
    }
}
.ios-download-tip{
    margin-top:10px;
    color:#aaa;
    font-size:13px;
    line-height:1.6;
}


.auth-page{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    box-sizing:border-box;
}

.auth-logo{
    display:inline-block;
    margin-bottom:22px;
    color:#fff;
    font-weight:bold;
    text-decoration:none;
}

.auth-card h1{
    margin:0 0 24px;
    font-size:30px;
}

.auth-submit-btn{
    width:100%;
    height:46px;
    margin-top:22px;
    border:0;
    border-radius:23px;
    background:#fff;
    color:#000;
    font-weight:bold;
    cursor:pointer;
}

.auth-links{
    display:flex;
    justify-content:center;
    gap:8px;
    margin-top:18px;
}


.deleted-row{
    opacity:.55;
}

.deleted-title{
    color:#777;
    text-decoration:line-through;
}

.deleted-row .mini-cover{
    filter:grayscale(1);
}

.review-cover-preview{
    width:100%;
    max-width:520px;
    max-height:300px;
    object-fit:cover;
    border-radius:12px;
    background:#222;
    display:block;
    margin-top:12px;
}

.removed-box{
    background:#181818;
    border:1px solid #333;
    border-radius:14px;
    padding:14px;
    margin-bottom:16px;
}

.removed-text{
    margin-top:8px;
    color:#ff7070;
    line-height:1.6;
}

.error-box{
    color:#ff7070;
    margin-bottom:12px;
}

.review-cover-box img.review-cover-preview{
    width:100% !important;
    max-width:520px !important;
    height:292px !important;
    object-fit:cover !important;
}

input[type="file"]{
    width:100%;
    height:50px;

    display:flex;
    align-items:center;

    padding:8px 12px;

    border:1px solid #333;
    border-radius:12px;

    background:#111;
    color:#fff;

    box-sizing:border-box;
}

input[type="file"]::file-selector-button{

    height:32px;

    margin-right:12px;

    border:0;

    border-radius:8px;

    padding:0 14px;

    background:#fff;

    color:#000;

    cursor:pointer;

    font-weight:600;
}

.review-cover-box{
    width:100%;
    display:flex;
    justify-content:center;
    margin-top:16px;
}

.review-cover-preview{
    width:100%;
    max-width:520px !important;
    height:292px !important;
    object-fit:cover !important;
    border-radius:12px;
    background:#222;
}

.review-form-inner{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.review-form-inner .form-group{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.review-form-inner label{
    color:#aaa;
    font-size:14px;
}

.review-form-inner input[type="text"],
.review-form-inner select,
.review-form-inner input[type="file"]{
    width:100%;
}
.custom-prompt-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.65);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:999999;
}

.custom-prompt-overlay.show{
    display:flex;
}

.custom-prompt-box{
    width:min(92vw,420px);
    background:#171717;
    border-radius:18px;
    padding:22px;
    box-shadow:0 20px 60px rgba(0,0,0,.55);
}

.custom-prompt-title{
    font-size:20px;
    font-weight:700;
    margin-bottom:16px;
    color:#fff;
}

.custom-prompt-message{
    color:#ddd;
    line-height:1.7;
    margin-bottom:14px;
    white-space:pre-line;
}

.custom-prompt-input{
    width:100%;
    min-height:120px;
    resize:vertical;
    border:1px solid #333;
    background:#0d0d0d;
    color:#fff;
    border-radius:12px;
    padding:14px;
    font-size:15px;
    box-sizing:border-box;
}

.custom-prompt-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:18px;
}

.prompt-cancel-btn,
.prompt-confirm-btn{
    border:0;
    border-radius:999px;
    padding:11px 22px;
    font-weight:700;
    cursor:pointer;
}

.prompt-cancel-btn{
    background:#2c2c2c;
    color:#fff;
}

.prompt-confirm-btn{
    background:#fff;
    color:#000;
}
.content-switch-tabs{
    display:flex;
    gap:12px;
    padding:0 20px 14px;
}

.content-switch-btn{
    height:40px;
    padding:0 22px;
    border:0;
    border-radius:999px;
    background:#2a2a2a;
    color:#fff;
    font-weight:bold;
    cursor:pointer;
}

.content-switch-btn.active{
    background:#fff;
    color:#000;
}

.content-section{
    display:none;
}

.content-section.active-section{
    display:block;
}

.image-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
    gap:20px;
    padding:20px;
}

.image-card{
    background:#181818;
    border-radius:18px;
    overflow:hidden;
}

.image-thumb{
    width:100%;
    aspect-ratio:1/1;
    background:#222;
}

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

.image-info{
    padding:14px;
}

.image-title{
    font-size:18px;
    font-weight:bold;
    margin-bottom:10px;
    line-height:1.5;
}

.image-desc{
    color:#aaa;
    font-size:14px;
    line-height:1.7;
    margin-bottom:12px;

    display:-webkit-box;
    line-clamp:2;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.image-meta{
    color:#888;
    font-size:13px;
}

@media(max-width:768px){

    .content-switch-tabs{
        padding:0 10px 12px;
    }

    .image-grid{
        grid-template-columns:1fr;
        padding:10px;
        gap:14px;
    }

}
.image-content-input{
    width:100%;
    min-height:220px;
    resize:vertical;
    border-radius:10px;
    border:1px solid #333;
    background:#0f0f0f;
    color:#fff;
    padding:12px;
    font-size:15px;
    line-height:1.7;
    box-sizing:border-box;
}
.home-search-form{
    display:flex;
    align-items:center;
    gap:10px;
    padding:0;
    flex:0 1 520px;
    min-width:0;
}

.home-search-form input{
    flex:1 1 220px;
    width:auto;
    min-width:0;
    max-width:100%;
    height:40px;
    box-sizing:border-box;
    border-radius:999px;
    border:1px solid #333;
    background:#111;
    color:#fff;
    padding:0 16px;
}

.home-search-form button,
.home-search-form a{
    flex:0 0 auto;
    height:40px;
    box-sizing:border-box;
    padding:0 20px;
    border:0;
    border-radius:999px;
    background:#fff;
    color:#000;
    font-weight:bold;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.home-search-form a{
    background:#333;
    color:#fff;
}

.uploader-search-grid{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    padding:10px 20px 20px;
}

.uploader-search-card{
    min-width:220px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px;
    border-radius:16px;
    background:#181818;
}

.uploader-search-card:hover{
    background:#242424;
}

.uploader-search-name{
    font-weight:bold;
    font-size:16px;
}

@media(max-width:768px){

    .uploader-search-grid{
        padding:10px;
    }

    .uploader-search-card{
        width:100%;
    }

}
.image-view-wrap{
    max-width:980px;
    margin:30px auto;
    padding:0 16px;
}

.image-view-card{
    background:#181818;
    border-radius:18px;
    padding:24px;
}

.image-view-card h1{
    margin:0 0 12px;
    font-size:30px;
    line-height:1.4;
}

.image-view-meta{
    color:#aaa;
    font-size:14px;
    margin-bottom:20px;
}

.image-view-img{
    width:100%;
    max-height:760px;
    object-fit:contain;
    border-radius:14px;
    background:#000;
    display:block;
    margin-bottom:24px;
}

.image-view-content{
    line-height:1.9;
    font-size:17px;
    white-space:normal;
}

.image-view-actions{
    margin-top:28px;
}

.image-view-actions a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:40px;
    padding:0 20px;
    border-radius:999px;
    background:#fff;
    color:#000;
    font-weight:bold;
}

@media(max-width:768px){

    .image-view-wrap{
        margin:16px auto;
        padding:0 10px;
    }

    .image-view-card{
        padding:16px;
        border-radius:14px;
    }

    .image-view-card h1{
        font-size:22px;
    }

    .image-view-content{
        font-size:15px;
    }
}

.image-slider{
    width:100%;
    overflow:hidden;
    border-radius:14px;
    background:#000;
    margin-bottom:12px;
}

.image-slider-track{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    -ms-overflow-style:none;
}

.image-slider-track::-webkit-scrollbar{
    display:none;
}

.image-slide{
    flex:0 0 100%;
    scroll-snap-align:center;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#000;
}

.image-slide .image-view-img{
    margin-bottom:0;
}

.image-dots{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin:12px 0 24px;
}

.image-dot{
    width:9px;
    height:9px;
    border-radius:50%;
    border:0;
    background:#fff;
    opacity:.35;
    padding:0;
    cursor:pointer;
}

.image-dot.active{
    opacity:1;
}

.my-videos-table td:last-child{
    min-width:320px;
}

.my-videos-table th:nth-child(2),
.my-videos-table td:nth-child(2){
    min-width:240px;
    width:24%;
    white-space:normal;
    word-break:break-word;
    overflow-wrap:anywhere;
}

.my-videos-actions{
    display:grid;
    grid-template-columns:repeat(2, 140px);
    gap:10px 12px;
    align-items:center;
    justify-content:start;
}

.my-videos-actions .small-btn{
    width:140px;
    margin:0 !important;
}

.my-videos-actions form{
    margin:0 !important;
    display:flex;
}

.my-videos-table td{
    vertical-align:top;
    padding-top:18px;
    padding-bottom:18px;
}
.my-videos-table td:last-child .small-btn{
    margin-bottom:10px !important;
}

.my-videos-actions .disabled-btn{
    white-space:nowrap;
    width:140px;
}
.my-videos-actions .review-disabled-btn{
    width:140px !important;
    height:36px !important;
    white-space:normal;
    line-height:1.2;
    padding:0 10px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.featured-set-btn{
    background:#1f3a5f;
    border-color:#315a91;
    color:#fff !important;
}

.featured-set-btn:hover{
    background:#294b78;
}

.featured-current-btn{
    background:#175c35 !important;
    border-color:#31a464 !important;
    color:#e8fff1 !important;
    cursor:default;
    white-space:nowrap;
}

.my-work-country-tabs{
    display:flex;
    align-items:center;
    gap:10px;
    margin:0 0 14px;
    overflow-x:auto;
    scrollbar-width:none;
    -ms-overflow-style:none;
}

.my-work-country-tabs::-webkit-scrollbar{
    display:none;
}

.my-work-country-tab{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    flex:0 0 auto;
    min-height:36px;
    padding:0 14px;
    border:1px solid #2f2f2f;
    border-radius:999px;
    background:#202020;
    color:#fff;
    font-size:14px;
    font-weight:800;
    white-space:nowrap;
}

.my-work-country-tab.active{
    background:#fff;
    border-color:#fff;
    color:#111;
}

.my-work-country-tab .country-flag{
    width:18px;
    height:18px;
    border-radius:50%;
    object-fit:cover;
}

.my-videos-actions .featured-current-btn,
.my-videos-table td:last-child .featured-current-btn{
    width:140px !important;
    min-width:0;
    padding-left:10px;
    padding-right:10px;
}



/* Mobile home header/search final override */
@media(max-width:768px){
    .topbar{
        height:auto;
        min-height:56px;
        padding:12px 12px 10px;
        flex-wrap:wrap;
        align-items:center;
        row-gap:10px;
    }

    .topbar .logo{
        order:1;
        font-size:22px;
        line-height:1.2;
    }

    .topbar .right-menu{
        order:2;
        margin-left:auto;
    }

    .topbar .home-search-form{
        order:3;
        flex:0 0 100%;
        display:grid;
        grid-template-columns:minmax(0, 1fr) 76px;
        gap:8px;
        padding:0;
        min-width:0;
    }

    .topbar .home-search-form input{
        width:auto;
        min-width:0;
        max-width:none;
        height:38px;
        box-sizing:border-box;
    }

    .topbar .home-search-form button,
    .topbar .home-search-form a{
        width:100%;
        min-width:0;
        height:38px;
        padding:0 12px;
        box-sizing:border-box;
        white-space:nowrap;
    }
}


/* YouTube-like home layout */
.home-search-form input{
    background:#0f0f0f;
    border:1px solid #303030;
}

.content-switch-tabs{
    gap:10px;
    padding:0 12px 12px;
    overflow-x:auto;
    scrollbar-width:none;
    -ms-overflow-style:none;
}

.content-switch-tabs::-webkit-scrollbar{
    display:none;
}

.content-switch-btn{
    height:40px;
    min-width:84px;
    padding:0 16px;
    border-radius:12px;
    background:#202020;
    color:#f1f1f1;
    border:1px solid #262626;
}

.content-switch-btn.active{
    background:#f1f1f1;
    color:#0f0f0f;
}

.video-section{
    padding:14px 0 24px;
    border-bottom:1px solid #242424;
}

.video-section h2{
    padding:0 12px;
    margin:8px 0 12px;
    font-size:22px;
    line-height:1.25;
}

.video-grid,
.image-grid{
    display:flex;
    grid-template-columns:none;
    gap:14px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:8px 12px 18px;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:12px;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    -ms-overflow-style:none;
    cursor:grab;
}

.video-grid::-webkit-scrollbar,
.image-grid::-webkit-scrollbar{
    display:none;
}

.video-grid.dragging,
.image-grid.dragging{
    cursor:grabbing;
    scroll-snap-type:none;
}

.video-grid .video-card,
.image-grid .image-card{
    flex:0 0 clamp(260px, 82vw, 430px);
    min-width:0;
    scroll-snap-align:center;
    scroll-snap-stop:always;
}

.video-card,
.image-card{
    background:#0f0f0f;
    border-radius:14px;
    overflow:hidden;
}

.video-card .thumb-box,
.image-card .image-thumb{
    border-radius:12px;
    background:#050505;
}

.video-card .thumb-box img,
.video-card .preview-video,
.image-card .image-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.video-card .preview-video{
    pointer-events:none;
}

.video-card.is-previewing .preview-video,
.video-card:hover .preview-video{
    opacity:1;
}

.video-card.is-previewing .thumb-box > img,
.video-card:hover .thumb-box > img{
    opacity:0;
}

.video-info,
.image-info{
    padding:10px 2px 2px;
}

.video-title,
.image-title{
    font-size:16px;
    line-height:1.35;
}

.video-meta,
.image-desc{
    color:#aaa;
}

.empty-text{
    flex:0 0 100%;
    padding:34px 40px;
    color:#aaa;
}

@media(max-width:768px){
    .topbar{
        background:#0f0f0f;
    }

    .country-tabs{
        padding:10px 12px 8px;
        background:#0f0f0f;
        gap:10px;
    }

    .country-tabs a{
        border-radius:10px;
        background:#202020;
        padding:8px 14px;
    }

    .country-tabs a.active{
        background:#f1f1f1;
        color:#0f0f0f;
    }

    .content-switch-tabs{
        padding:4px 12px 12px;
    }

    .content-switch-btn{
        min-width:82px;
        height:40px;
    }

    .video-section{
        padding:16px 0 28px;
    }

    .video-grid,
    .image-grid{
        gap:12px;
        padding:8px 12px 20px;
        scroll-padding-inline:12px;
    }

    .video-grid .video-card,
    .image-grid .image-card{
        flex-basis:calc(100vw - 24px);
    }

    .image-card .image-thumb{
        aspect-ratio:16/9;
    }
}

/* Mobile YouTube-style search: enter-to-search */
@media(max-width:768px){
    .topbar .home-search-form{
        display:block;
        flex:0 0 100%;
    }

    .topbar .home-search-form input[type="text"]{
        display:block;
        width:100%;
        height:40px;
        box-sizing:border-box;
    }

    .topbar .home-search-form button,
    .topbar .home-search-form a{
        display:none;
    }
}

.uploader-link{
    display:inline-block;
    color:#fff;
    text-decoration:none;
}

.uploader-link:hover{
    color:#fff;
    text-decoration:underline;
}

/* YouTube-like uploader channel page */
.channel-hero{
    display:flex;
    align-items:center;
    gap:16px;
    max-width:980px;
    margin:8px auto 0;
    padding:18px 16px 12px;
}

.channel-avatar{
    width:86px;
    height:86px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    background:linear-gradient(135deg,#303030,#111);
    border:2px solid #f04;
    color:#fff;
    font-size:34px;
    font-weight:800;
}

.channel-info-main{
    min-width:0;
}

.channel-country-tabs{
    display:flex;
    align-items:center;
    gap:10px;
    flex:1 1 260px;
    min-width:220px;
    margin-left:auto;
    padding:6px 0;
    overflow-x:auto;
    scrollbar-width:none;
    -ms-overflow-style:none;
}

.channel-country-tabs::-webkit-scrollbar{
    display:none;
}

.channel-country-tab{
    display:inline-flex;
    align-items:center;
    gap:8px;
    flex:0 0 auto;
    min-height:36px;
    padding:0 14px;
    border:1px solid #2c2c2c;
    border-radius:999px;
    background:#202020;
    color:#fff;
    font-size:14px;
    font-weight:800;
    white-space:nowrap;
}

.channel-country-tab.active{
    border-color:#fff;
    background:#fff;
    color:#111;
}

.channel-country-tab .country-flag{
    width:18px;
    height:18px;
    border-radius:50%;
    object-fit:cover;
}

.channel-info-main h1{
    margin:0 0 4px;
    font-size:30px;
    line-height:1.15;
}

.channel-handle,
.channel-stats{
    color:#aaa;
    font-size:14px;
    line-height:1.5;
}

.channel-tabs{
    max-width:980px;
    margin:0 auto;
    padding:8px 16px 0;
    border-bottom:1px solid #2a2a2a;
    gap:26px;
}

.channel-tabs .content-switch-btn{
    min-width:0;
    height:42px;
    padding:0 4px;
    border:0;
    border-radius:0;
    background:transparent;
    color:#aaa;
    position:relative;
}

.channel-tabs .content-switch-btn.active{
    color:#fff;
    background:transparent;
}

.channel-tabs .content-switch-btn.active::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:3px;
    border-radius:999px;
    background:#fff;
}

.channel-section{
    max-width:980px;
    margin:0 auto;
    border-bottom:0;
}

.channel-feature-card{
    width:min(520px, calc(100vw - 32px));
    margin:0 auto;
}

.channel-feature-card .video-card,
.channel-feature-card .image-card{
    background:#0f0f0f;
}

.channel-feature-card .video-grid,
.channel-feature-card .image-grid{
    display:block;
}

.channel-row.video-grid,
.channel-row.image-grid{
    scroll-snap-type:x mandatory;
}

@media(max-width:768px){
    .channel-hero{
        align-items:center;
        gap:14px;
        padding:16px 14px 10px;
    }

    .channel-avatar{
        width:72px;
        height:72px;
        font-size:28px;
    }

    .channel-info-main h1{
        font-size:26px;
    }

    .channel-country-tabs{
        flex:0 0 100%;
        width:100%;
        min-width:0;
        margin-left:0;
        padding:4px 0 0;
    }

    .channel-country-tab{
        min-height:34px;
        padding:0 12px;
        font-size:13px;
    }

    .channel-tabs{
        padding:6px 16px 0;
        gap:28px;
        overflow-x:auto;
        scrollbar-width:none;
        -ms-overflow-style:none;
    }

    .channel-tabs::-webkit-scrollbar{
        display:none;
    }

    .channel-section h2{
        padding:0 16px;
    }

    .channel-feature-card{
        width:calc(100vw - 32px);
    }

    .channel-feature-card .video-card,
    .channel-feature-card .image-card{
        width:100%;
    }
}

/* Desktop carousel arrows */
.carousel-shell{
    position:relative;
    max-width:100%;
}

.carousel-arrow{
    position:absolute;
    top:var(--carousel-arrow-top, 50%);
    transform:translateY(-50%);
    z-index:20;
    width:42px;
    height:42px;
    border:0;
    border-radius:50%;
    background:rgba(32,32,32,.96);
    color:#fff;
    font-size:34px;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 2px 12px rgba(0,0,0,.35);
}

.carousel-arrow.prev{
    left:10px;
}

.carousel-arrow.next{
    right:10px;
}

.carousel-arrow:hover{
    background:#3a3a3a;
}

.carousel-arrow[hidden]{
    display:none !important;
}

.video-section .carousel-shell::before,
.video-section .carousel-shell::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    width:72px;
    pointer-events:none;
    z-index:10;
}

.video-section .carousel-shell::before{
    left:0;
    background:linear-gradient(90deg,#0f0f0f 0%,rgba(15,15,15,0) 100%);
}

.video-section .carousel-shell::after{
    right:0;
    background:linear-gradient(270deg,#0f0f0f 0%,rgba(15,15,15,0) 100%);
}

@media(max-width:768px){
    .carousel-arrow,
    .video-section .carousel-shell::before,
    .video-section .carousel-shell::after{
        display:none !important;
    }
}

/* Avatar uploads and enlarged profile photo */
.avatar,
.channel-avatar,
.profile-avatar-preview{
    overflow:hidden;
}

.avatar{
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-weight:800;
}

.avatar img,
.channel-avatar img,
.profile-avatar-preview img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.avatar span,
.channel-avatar span{
    line-height:1;
}

.image-info .avatar{
    margin-bottom:8px;
}

.profile-avatar-block{
    display:flex;
    align-items:center;
    gap:16px;
    padding-bottom:8px;
}

.profile-avatar-preview{
    width:92px;
    height:92px;
    border:2px solid #f04;
    border-radius:50%;
    background:#242424;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    font-size:36px;
    font-weight:800;
    cursor:pointer;
}

.profile-avatar-preview.profile-avatar-letter{
    cursor:default;
}

.profile-avatar-preview[type="button"]{
    padding:0;
    margin:0;
    border-color:#f04;
}

.profile-avatar-fields{
    min-width:0;
    flex:1;
}

.profile-avatar-fields input[type="file"]{
    width:100%;
    padding:9px 12px;
    height:auto;
}

.avatar-lightbox{
    position:fixed;
    inset:0;
    z-index:1000;
    background:rgba(0,0,0,.88);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
}

.avatar-lightbox[hidden]{
    display:none;
}

.avatar-lightbox img{
    max-width:min(88vw, 760px);
    max-height:84vh;
    border-radius:12px;
    object-fit:contain;
    background:#111;
}

.avatar-lightbox-close{
    position:fixed;
    top:16px;
    right:18px;
    width:42px;
    height:42px;
    border:0;
    border-radius:50%;
    background:#fff;
    color:#000;
    font-size:30px;
    line-height:1;
    cursor:pointer;
}

.carousel-arrow{
    padding:0 0 4px;
}

@media(max-width:768px){
    .profile-avatar-block{
        align-items:flex-start;
        flex-direction:column;
    }
}

/* Google-style avatar editor */
.google-avatar-setting{
    display:flex;
    align-items:center;
    gap:18px;
    padding:4px 0 14px;
}

.google-avatar-button{
    position:relative;
    width:96px;
    height:96px;
    border:0;
    border-radius:50%;
    background:#546a73;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    cursor:pointer;
    font-size:44px;
    line-height:1;
    overflow:visible;
}

.google-avatar-button img{
    width:100%;
    height:100%;
    border-radius:50%;
    object-fit:cover;
    display:block;
}

.google-avatar-button span:first-child{
    line-height:1;
}

.google-avatar-camera{
    position:absolute;
    right:0;
    bottom:2px;
    width:30px;
    height:30px;
    border-radius:50%;
    background:#2f3742;
    color:#dbeafe;
    display:flex;
    align-items:center;
    justify-content:center;
    border:2px solid #181818;
    box-shadow:0 2px 8px rgba(0,0,0,.3);
}

.google-avatar-title{
    color:#e8eaed;
    font-weight:700;
    margin-bottom:6px;
}

.google-avatar-change{
    border:0;
    padding:0;
    background:transparent;
    color:#a8c7fa;
    font-weight:700;
    cursor:pointer;
}

.google-avatar-modal{
    position:fixed;
    inset:0;
    z-index:1200;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(0,0,0,.78);
}

.google-avatar-modal[hidden]{
    display:none;
}

.google-avatar-dialog{
    width:min(620px, calc(100vw - 28px));
    min-height:430px;
    max-height:calc(100vh - 40px);
    overflow:auto;
    border-radius:24px;
    background:#1f1f1f;
    color:#e8eaed;
    box-shadow:0 18px 48px rgba(0,0,0,.42);
}

.google-avatar-modal-head{
    display:grid;
    grid-template-columns:48px 1fr 48px;
    align-items:center;
    gap:4px;
    min-height:58px;
    padding:0 12px;
}

.google-avatar-modal-head h2{
    margin:0;
    text-align:center;
    font-size:20px;
    line-height:1.25;
}

.google-icon-btn{
    width:40px;
    height:40px;
    border:0;
    border-radius:50%;
    background:transparent;
    color:#e8eaed;
    font-size:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}

.google-icon-btn:hover{
    background:#303134;
}

.google-icon-btn.muted{
    font-size:26px;
}

.google-avatar-picker{
    padding:22px 10px 26px;
}

.google-avatar-current{
    width:132px;
    height:132px;
    margin:0 auto 28px;
    border-radius:50%;
    background:#546a73;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:56px;
    font-weight:700;
    overflow:hidden;
}

.google-avatar-current img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.google-avatar-option{
    width:100%;
    min-height:50px;
    border:1px solid #333;
    border-radius:4px;
    background:#121212;
    color:#e8eaed;
    display:flex;
    align-items:center;
    gap:14px;
    padding:0 16px;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
}

.google-avatar-option + .google-avatar-option{
    margin-top:4px;
}

.google-avatar-option:hover{
    background:#2b2b2b;
}

.google-avatar-option.primary{
    border-top-left-radius:8px;
    border-top-right-radius:8px;
}

.google-option-icon{
    width:24px;
    display:flex;
    color:#e8eaed;
}

.google-avatar-crop{
    padding:18px 20px 24px;
    text-align:center;
}

.google-crop-stage{
    position:relative;
    width:min(420px, calc(100vw - 72px));
    aspect-ratio:1;
    margin:0 auto 22px;
    background:#2f3f4a;
    touch-action:none;
    cursor:grab;
    user-select:none;
}

.google-crop-stage:active{
    cursor:grabbing;
}

.google-crop-stage canvas{
    width:100%;
    height:100%;
    display:block;
}

.google-crop-square{
    position:absolute;
    inset:0;
    border:3px solid #e8eaed;
    pointer-events:none;
}

.google-crop-square::before,
.google-crop-square::after{
    content:"";
    position:absolute;
    width:22px;
    height:22px;
    border-color:#e8eaed;
    border-style:solid;
}

.google-crop-square::before{
    left:-5px;
    top:-5px;
    border-width:5px 0 0 5px;
    box-shadow:398px 0 0 -1px transparent;
}

.google-crop-square::after{
    right:-5px;
    bottom:-5px;
    border-width:0 5px 5px 0;
}

.google-crop-circle{
    position:absolute;
    inset:12%;
    border-radius:50%;
    outline:999px solid rgba(0,0,0,.22);
    border:1px solid rgba(255,255,255,.28);
    pointer-events:none;
}

.google-zoom-control{
    display:grid;
    grid-template-columns:58px 1fr;
    align-items:center;
    gap:12px;
    max-width:420px;
    margin:0 auto 18px;
    color:#cfcfcf;
}

.google-zoom-control input{
    width:100%;
}

.google-rotate-btn{
    border:0;
    border-radius:6px;
    background:#262626;
    color:#e8eaed;
    min-width:72px;
    height:72px;
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    cursor:pointer;
}

.google-rotate-btn:hover{
    background:#333;
}

.google-avatar-actions{
    display:flex;
    justify-content:center;
    gap:12px;
    margin-top:18px;
}

.google-primary-btn,
.google-secondary-btn{
    min-width:86px;
    height:40px;
    border:0;
    border-radius:999px;
    font-weight:700;
    cursor:pointer;
}

.google-primary-btn{
    background:#a8c7fa;
    color:#102a57;
}

.google-secondary-btn{
    background:#303134;
    color:#e8eaed;
}

@media(max-width:768px){
    .google-avatar-setting{
        align-items:center;
    }

    .google-avatar-dialog{
        width:100%;
        border-radius:20px;
    }

    .google-avatar-modal-head h2{
        font-size:18px;
    }
}

/* Avatar editor conflict fixes */
.form-card input[hidden],
#avatarFileInput[hidden]{
    display:none !important;
}

.form-card .google-avatar-button{
    width:96px;
    height:96px;
    min-width:96px;
    margin:0;
    border:0;
    border-radius:50%;
    background:#546a73;
    color:#fff;
    padding:0;
    font-size:44px;
    line-height:1;
    overflow:visible;
}

.form-card .google-avatar-button:hover{
    background:#5f7781;
}

.form-card .google-avatar-button img{
    border-radius:50%;
}

.form-card .google-avatar-change{
    width:auto;
    height:auto;
    margin:0;
    border:0;
    border-radius:0;
    background:transparent;
    color:#a8c7fa;
    padding:0;
    font-size:14px;
    line-height:1.4;
    text-align:left;
}

.form-card .google-avatar-change:hover{
    background:transparent;
    text-decoration:underline;
}

.google-avatar-dialog [hidden],
.google-icon-btn[hidden],
.google-avatar-picker[hidden],
.google-avatar-crop[hidden]{
    display:none !important;
}


.google-more-dots span,
.google-more-dots span::before,
.google-more-dots span::after{
    width:4px;
    height:4px;
    border-radius:50%;
    background:#e8eaed;
    display:block;
    content:"";
}

.google-more-dots span{
    position:relative;
}

.google-more-dots span::before,
.google-more-dots span::after{
    position:absolute;
    left:0;
}

.google-more-dots span::before{
    top:-8px;
}

.google-more-dots span::after{
    top:8px;
}

.image-view-meta .meta-separator{
    color:#777;
    margin:0 6px;
}


/* Countries admin page polish */
.countries-admin-page{
    max-width:1400px;
    padding:28px 0 64px;
}

.admin-page-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:18px;
    margin-bottom:18px;
}

.admin-page-heading h1{
    margin:0 0 6px;
    font-size:30px;
    letter-spacing:0;
}

.admin-page-heading p,
.card-heading p{
    margin:0;
    color:#9aa0a6;
    line-height:1.5;
}

.countries-table-card{
    padding:18px;
    border-radius:14px;
    border:1px solid #242424;
    overflow-x:auto;
}

.country-table{
    min-width:1180px;
}

.country-table th{
    color:#b8c4d4;
    font-size:14px;
    font-weight:700;
    white-space:nowrap;
}

.country-table td{
    padding:14px 12px;
}

.country-table input,
.country-table select,
.add-country-form input{
    width:100%;
    height:38px;
    box-sizing:border-box;
    border:1px solid #343434;
    border-radius:8px;
    background:#0f0f0f;
    color:#fff;
    padding:0 12px;
    font-size:14px;
}

.country-table input:focus,
.country-table select:focus,
.add-country-form input:focus{
    outline:2px solid rgba(168,199,250,.35);
    border-color:#a8c7fa;
}

.country-code-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:46px;
    height:32px;
    border-radius:999px;
    background:#242424;
    color:#fff;
    font-weight:800;
}

.status-pill{
    display:inline-flex;
    align-items:center;
    min-height:30px;
    padding:0 10px;
    border-radius:999px;
    background:rgba(82,196,26,.12);
    color:#52ff85;
    font-weight:700;
    white-space:nowrap;
}

.country-save-btn,
.add-country-submit button{
    height:38px;
    border:0;
    border-radius:999px;
    background:#fff;
    color:#000;
    padding:0 16px;
    font-weight:800;
    cursor:pointer;
    white-space:nowrap;
}

.country-save-btn:hover,
.add-country-submit button:hover{
    background:#dfe6f3;
}

.add-country-card{
    margin-top:18px;
    border-radius:14px;
    border:1px solid #242424;
}

.card-heading{
    margin-bottom:18px;
}

.card-heading h2{
    margin:0 0 6px;
    font-size:24px;
}

.add-country-form{
    display:grid;
    grid-template-columns:repeat(5, minmax(150px, 1fr)) auto;
    gap:14px;
    align-items:end;
}

.add-country-form label{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin:0;
    min-width:0;
}

.add-country-form label span{
    color:#b8c4d4;
    font-size:13px;
}

.add-country-submit{
    display:flex;
    align-items:end;
}

@media(max-width:900px){
    .countries-admin-page{
        width:calc(100% - 24px);
        padding:18px 0 40px;
    }

    .admin-page-heading h1{
        font-size:26px;
    }

    .admin-page-heading p,
    .card-heading p{
        font-size:13px;
    }

    .countries-table-card{
        padding:0;
        background:transparent;
        border:0;
        overflow:visible;
    }

    .country-table,
    .country-table thead,
    .country-table tbody,
    .country-table tr,
    .country-table td{
        display:block;
        width:100%;
        min-width:0;
    }

    .country-table thead{
        display:none;
    }

    .country-table tr.country-row{
        position:relative;
        margin-bottom:14px;
        padding:14px;
        border:1px solid #242424;
        border-radius:14px;
        background:#181818;
    }

    .country-table tr.country-row form{
        display:block;
    }

    .country-table td{
        display:grid;
        grid-template-columns:108px minmax(0, 1fr);
        align-items:center;
        gap:12px;
        padding:8px 0;
        border:0;
    }

    .country-table td::before{
        content:attr(data-label);
        color:#9aa0a6;
        font-size:13px;
        line-height:1.35;
    }

    .country-table td.country-id,
    .country-table td.country-code-cell{
        display:inline-flex;
        width:auto;
        margin-right:10px;
        padding:0 0 10px;
        gap:8px;
    }

    .country-table td.country-id::before,
    .country-table td.country-code-cell::before{
        display:none;
    }

    .country-table td.country-id{
        color:#9aa0a6;
        font-weight:700;
    }

    .country-table input,
    .country-table select{
        min-width:0;
        height:42px;
    }

    .country-actions{
        display:block !important;
        padding-top:12px !important;
    }

    .country-actions::before{
        display:none;
    }

    .country-save-btn{
        width:100%;
        height:42px;
    }

    .add-country-form{
        grid-template-columns:1fr;
        gap:12px;
    }

    .add-country-submit button{
        width:100%;
        height:44px;
    }
}

/* Countries admin mobile fit refinements */
.countries-admin-page,
.countries-admin-page *{
    box-sizing:border-box;
}

@media(max-width:900px){
    body{
        overflow-x:hidden;
    }

    .admin-topbar{
        flex-wrap:nowrap;
        gap:10px;
    }

    .admin-topbar .logo{
        flex:0 0 auto;
    }

    .admin-top-menu{
        margin-left:auto;
        min-width:0;
        flex:0 1 112px;
    }

    .admin-top-menu select{
        width:112px;
        max-width:112px;
        height:38px;
        padding:0 30px 0 12px;
        border-radius:10px;
    }

    .countries-admin-page{
        width:100%;
        padding:18px 12px 40px;
    }

    .country-table tr.country-row{
        width:100%;
        padding:14px 14px 16px;
        overflow:hidden;
    }

    .country-table td{
        grid-template-columns:96px minmax(0, 1fr);
        gap:10px;
    }

    .country-table td::before{
        min-width:0;
        word-break:keep-all;
    }

    .country-table input,
    .country-table select{
        width:100%;
        max-width:100%;
    }

    .add-country-card{
        margin-left:0;
        margin-right:0;
        padding:18px;
        overflow:hidden;
    }
}

@media(max-width:380px){
    .country-table td{
        grid-template-columns:86px minmax(0, 1fr);
        gap:8px;
    }

    .country-table td::before{
        font-size:12px;
    }
}

/* Countries admin final overflow guard */
@media(max-width:900px){
    .country-table{
        min-width:0 !important;
        max-width:100% !important;
        table-layout:fixed;
    }

    .countries-admin-page{
        max-width:100vw;
        overflow-x:hidden;
        padding-left:10px;
        padding-right:10px;
    }

    .country-table tr.country-row{
        max-width:100%;
        padding-left:12px;
        padding-right:12px;
    }

    .country-table td{
        grid-template-columns:82px minmax(0, 1fr);
    }

    .country-table input,
    .country-table select{
        min-width:0 !important;
    }

    .admin-top-menu{
        flex-basis:86px;
        max-width:86px;
    }

    .admin-top-menu select{
        width:86px;
        max-width:86px;
        padding-left:10px;
    }
}

/* Admin topbar mobile grid override */
@media(max-width:900px){
    .topbar.admin-topbar{
        display:grid !important;
        grid-template-columns:1fr auto;
        align-items:center;
        column-gap:10px;
        width:100%;
        padding-left:12px;
        padding-right:12px;
    }

    .topbar.admin-topbar .right-menu.admin-top-menu{
        display:block !important;
        width:86px !important;
        min-width:86px !important;
        max-width:86px !important;
        margin-left:0 !important;
        justify-self:end;
        flex:none !important;
    }

    .topbar.admin-topbar .right-menu.admin-top-menu select{
        width:86px !important;
        max-width:86px !important;
    }
}

/* Upload image page mobile polish */
.upload-image-wrap{
    max-width:560px;
}

.upload-image-card{
    border:1px solid #242424;
    box-shadow:0 14px 36px rgba(0,0,0,.18);
}

.upload-image-card .image-content-input{
    min-height:220px;
    resize:vertical;
    border-radius:12px;
    border:1px solid #333;
    background:#0f0f0f;
    color:#fff;
    padding:12px;
    font-size:15px;
    line-height:1.6;
}

.upload-image-card input[type="file"]{
    min-height:50px;
    border-radius:12px;
}

@media(max-width:768px){
    body.upload-image-page{
        overflow-x:hidden;
    }

    .upload-image-topbar{
        position:sticky;
        top:0;
        z-index:100;
        display:grid;
        grid-template-columns:1fr;
        align-items:start;
        gap:10px;
        padding:14px 12px 10px;
        background:#111;
        border-bottom:1px solid #202020;
    }

    .upload-image-topbar .logo{
        order:1;
        font-size:24px;
        line-height:1.1;
    }

    .upload-image-nav{
        order:2 !important;
        width:100%;
        max-width:100%;
        margin:0 !important;
        display:flex;
        align-items:center;
        gap:8px;
        overflow-x:auto;
        overflow-y:hidden;
        padding:2px 0 4px;
        scrollbar-width:none;
        -ms-overflow-style:none;
    }

    .upload-image-nav::-webkit-scrollbar{
        display:none;
    }

    .upload-image-nav > a,
    .upload-image-admin-menu select{
        flex:0 0 auto;
        height:38px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        border:1px solid #2c2c2c;
        border-radius:999px;
        background:#181818;
        color:#fff;
        padding:0 14px;
        font-size:14px;
        font-weight:700;
        white-space:nowrap;
    }

    .upload-image-admin-menu{
        flex:0 0 auto;
        display:block;
        margin:0 !important;
    }

    .upload-image-admin-menu select{
        width:auto;
        min-width:88px;
        max-width:120px;
        padding-right:28px;
    }

    .upload-image-wrap{
        width:100%;
        max-width:none;
        margin:22px 0 34px;
        padding:0 16px;
        box-sizing:border-box;
    }

    .upload-image-wrap h1{
        margin:0 0 18px;
        font-size:28px;
        line-height:1.15;
    }

    .upload-image-card{
        width:100%;
        padding:18px;
        border-radius:14px;
        box-sizing:border-box;
        gap:12px;
    }

    .upload-image-card label{
        margin-top:4px;
        color:#b8c4d4;
        font-size:13px;
        font-weight:700;
    }

    .upload-image-card input,
    .upload-image-card select,
    .upload-image-card textarea{
        width:100%;
        max-width:100%;
        box-sizing:border-box;
    }

    .upload-image-card input[type="text"],
    .upload-image-card select{
        height:44px;
        border-radius:10px;
    }

    .upload-image-card input[type="file"]{
        height:auto;
        min-height:52px;
        padding:8px 10px;
        display:block;
        line-height:32px;
    }

    .upload-image-card input[type="file"]::file-selector-button{
        height:34px;
        margin-right:10px;
        padding:0 14px;
        border-radius:999px;
        font-weight:800;
    }

    .upload-image-card .image-content-input{
        min-height:220px;
        max-height:44vh;
    }

    .upload-image-card button[type="submit"]{
        height:44px;
        margin-top:16px;
        border-radius:999px;
        font-size:15px;
    }
}

@media(max-width:380px){
    .upload-image-wrap{
        padding:0 12px;
    }

    .upload-image-card{
        padding:16px;
    }

    .upload-image-nav > a,
    .upload-image-admin-menu select{
        padding-left:12px;
        padding-right:12px;
        font-size:13px;
    }
}

/* Upload image mobile final spacing guard */
@media(max-width:768px){
    .upload-image-page .upload-image-wrap{
        overflow-x:hidden;
    }

    .upload-image-page .upload-image-card{
        max-width:calc(100vw - 32px);
        margin-left:auto;
        margin-right:auto;
        overflow:hidden;
    }
}

/* Upload image mobile width correction */
@media(max-width:768px){
    .upload-image-page .upload-image-card{
        width:100% !important;
        max-width:100% !important;
        margin-left:0 !important;
        margin-right:0 !important;
    }
}

/* Home search final polish */
.topbar:has(.home-search-form){
    display:grid;
    grid-template-columns:auto minmax(280px, 640px) 1fr;
    align-items:center;
    column-gap:18px;
    min-height:60px;
    height:auto;
    padding:10px 20px;
}

.topbar:has(.home-search-form) .logo{
    justify-self:start;
    white-space:nowrap;
}

.topbar:has(.home-search-form) .home-search-form{
    justify-self:center;
    width:100%;
    max-width:640px;
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto auto;
    align-items:center;
    gap:10px;
    flex:none;
}

.topbar:has(.home-search-form) .home-search-form input[type="text"]{
    width:100%;
    height:42px;
    border-radius:999px;
    border:1px solid #303030;
    background:#0b0b0b;
    color:#fff;
    padding:0 18px;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
    transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.topbar:has(.home-search-form) .home-search-form input[type="text"]:focus{
    outline:none;
    border-color:#5f83c7;
    background:#101010;
    box-shadow:0 0 0 3px rgba(95,131,199,.2);
}

.topbar:has(.home-search-form) .home-search-form button,
.topbar:has(.home-search-form) .home-search-form a{
    height:42px;
    min-width:68px;
    padding:0 22px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    white-space:nowrap;
    box-sizing:border-box;
}

.topbar:has(.home-search-form) .home-search-form button{
    background:#fff;
    color:#000;
    border:0;
    box-shadow:0 1px 0 rgba(255,255,255,.1);
}

.topbar:has(.home-search-form) .home-search-form button:hover{
    background:#e9eef8;
}

.topbar:has(.home-search-form) .home-search-form a{
    background:#242424;
    color:#fff;
    border:1px solid #333;
}

.topbar:has(.home-search-form) .right-menu{
    justify-self:end;
    margin-left:0;
    min-width:0;
}

@media(max-width:900px){
    .topbar:has(.home-search-form){
        grid-template-columns:1fr auto;
        gap:10px 12px;
        padding:12px;
    }

    .topbar:has(.home-search-form) .home-search-form{
        grid-column:1 / -1;
        grid-row:2;
        max-width:none;
        grid-template-columns:minmax(0, 1fr) 76px;
        gap:8px;
    }

    .topbar:has(.home-search-form) .home-search-form a{
        display:none;
    }

    .topbar:has(.home-search-form) .right-menu{
        grid-column:2;
        grid-row:1;
    }
}

@media(max-width:768px){
    .topbar:has(.home-search-form){
        display:grid !important;
        grid-template-columns:1fr auto;
        background:#0f0f0f;
        border-bottom:1px solid #1f1f1f;
        row-gap:10px;
    }

    .topbar:has(.home-search-form) .logo{
        order:initial;
        font-size:24px;
    }

    .topbar:has(.home-search-form) .right-menu{
        order:initial;
        margin-left:0;
    }

    .topbar:has(.home-search-form) .home-search-form{
        order:initial;
        display:grid !important;
        flex:initial !important;
        width:100%;
        padding:0;
    }

    .topbar:has(.home-search-form) .home-search-form input[type="text"]{
        display:block !important;
        height:42px;
        border-radius:12px;
        padding:0 14px;
        font-size:15px;
    }

    .topbar:has(.home-search-form) .home-search-form button{
        display:inline-flex !important;
        width:76px;
        min-width:76px;
        height:42px;
        padding:0;
        border-radius:12px;
    }

    .topbar:has(.home-search-form) .home-search-form a{
        display:none !important;
    }
}

@media(max-width:430px){
    .topbar:has(.home-search-form){
        padding:12px 10px;
    }

    .topbar:has(.home-search-form) .home-search-form{
        grid-template-columns:minmax(0, 1fr) 72px;
        gap:8px;
    }

    .topbar:has(.home-search-form) .home-search-form button{
        width:72px;
        min-width:72px;
        font-size:14px;
    }
}

/* YouTube-style home search bar */
.home-search-submit svg{
    width:22px;
    height:22px;
    flex:0 0 auto;
}

.home-search-submit span{
    display:none;
}

@media(min-width:901px){
    body:not(.upload-image-page) .topbar:has(.home-search-form){
        display:grid !important;
        grid-template-columns:minmax(150px, 1fr) minmax(420px, 600px) minmax(150px, 1fr) !important;
        align-items:center !important;
        column-gap:18px !important;
        height:60px !important;
        min-height:60px !important;
        padding:0 20px !important;
        background:#0f0f0f !important;
        border-bottom:1px solid #222 !important;
    }

    .topbar:has(.home-search-form) .logo{
        grid-column:1 !important;
        justify-self:start !important;
        font-size:24px !important;
        line-height:1 !important;
    }

    .topbar:has(.home-search-form) .home-search-form{
        grid-column:2 !important;
        justify-self:center !important;
        width:100% !important;
        max-width:600px !important;
        display:grid !important;
        grid-template-columns:minmax(0, 1fr) 64px auto !important;
        gap:0 !important;
        align-items:center !important;
        padding:0 !important;
        flex:none !important;
    }

    .topbar:has(.home-search-form) .home-search-form input[type="text"]{
        height:40px !important;
        width:100% !important;
        border-radius:999px 0 0 999px !important;
        border:1px solid #303030 !important;
        border-right:0 !important;
        background:#121212 !important;
        color:#fff !important;
        padding:0 18px !important;
        box-shadow:none !important;
    }

    .topbar:has(.home-search-form) .home-search-form input[type="text"]:focus{
        border-color:#3ea6ff !important;
        box-shadow:inset 0 0 0 1px rgba(62,166,255,.15) !important;
        outline:none !important;
    }

    .topbar:has(.home-search-form) .home-search-submit{
        width:64px !important;
        min-width:64px !important;
        height:40px !important;
        padding:0 !important;
        border-radius:0 999px 999px 0 !important;
        border:1px solid #303030 !important;
        background:#222 !important;
        color:#fff !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        box-shadow:none !important;
    }

    .topbar:has(.home-search-form) .home-search-submit:hover{
        background:#2b2b2b !important;
    }

    .topbar:has(.home-search-form) .home-search-form > a{
        margin-left:10px !important;
        height:40px !important;
        min-width:0 !important;
        padding:0 18px !important;
        border-radius:999px !important;
        background:#242424 !important;
        color:#fff !important;
        border:1px solid #303030 !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        white-space:nowrap !important;
    }

    .topbar:has(.home-search-form) .right-menu{
        grid-column:3 !important;
        justify-self:end !important;
        margin-left:0 !important;
    }
}

@media(max-width:900px){
    body:not(.upload-image-page) .topbar:has(.home-search-form){
        display:grid !important;
        grid-template-columns:1fr auto !important;
        gap:10px 12px !important;
        padding:12px !important;
        background:#0f0f0f !important;
        border-bottom:1px solid #222 !important;
    }

    .topbar:has(.home-search-form) .logo{
        grid-column:1 !important;
        grid-row:1 !important;
        align-self:center !important;
        font-size:24px !important;
    }

    .topbar:has(.home-search-form) .right-menu{
        grid-column:2 !important;
        grid-row:1 !important;
        justify-self:end !important;
        margin-left:0 !important;
    }

    .topbar:has(.home-search-form) .home-search-form{
        grid-column:1 / -1 !important;
        grid-row:2 !important;
        display:grid !important;
        grid-template-columns:minmax(0, 1fr) 54px !important;
        gap:0 !important;
        width:100% !important;
        max-width:none !important;
        padding:0 !important;
        flex:none !important;
    }

    .topbar:has(.home-search-form) .home-search-form input[type="text"]{
        display:block !important;
        width:100% !important;
        height:42px !important;
        border-radius:12px 0 0 12px !important;
        border:1px solid #303030 !important;
        border-right:0 !important;
        background:#121212 !important;
        padding:0 14px !important;
        font-size:15px !important;
        box-shadow:none !important;
    }

    .topbar:has(.home-search-form) .home-search-submit{
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        width:54px !important;
        min-width:54px !important;
        height:42px !important;
        padding:0 !important;
        border-radius:0 12px 12px 0 !important;
        border:1px solid #303030 !important;
        background:#222 !important;
        color:#fff !important;
    }

    .topbar:has(.home-search-form) .home-search-form > a{
        display:none !important;
    }
}

/* Home search mobile overflow correction */
@media(max-width:900px){
    html,
    body{
        max-width:100%;
    }

    body:not(.upload-image-page) .topbar:has(.home-search-form){
        width:100% !important;
        max-width:100vw !important;
        box-sizing:border-box !important;
        overflow:hidden !important;
    }

    .topbar:has(.home-search-form) .home-search-form{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        box-sizing:border-box !important;
        overflow:hidden !important;
    }

    .topbar:has(.home-search-form) .home-search-form input[type="text"]{
        min-width:0 !important;
        max-width:100% !important;
        box-sizing:border-box !important;
    }

    .topbar:has(.home-search-form) .home-search-submit{
        flex:0 0 54px !important;
        box-sizing:border-box !important;
    }
}

@media(max-width:480px){
    .topbar:has(.home-search-form) .home-search-form{
        grid-template-columns:minmax(0, 1fr) 50px !important;
    }

    .topbar:has(.home-search-form) .home-search-submit{
        width:50px !important;
        min-width:50px !important;
        flex-basis:50px !important;
    }

    .topbar:has(.home-search-form) .home-search-submit svg{
        width:20px !important;
        height:20px !important;
    }
}

/* Home search viewport lock for narrow screens */
@media(max-width:900px){
    body:not(.upload-image-page) .topbar:has(.home-search-form){
        width:100vw !important;
        max-width:100vw !important;
        min-width:0 !important;
        margin:0 !important;
        left:0 !important;
        right:auto !important;
    }

    .topbar:has(.home-search-form) .home-search-form{
        position:relative !important;
        display:block !important;
        width:calc(100vw - 24px) !important;
        max-width:calc(100vw - 24px) !important;
        min-width:0 !important;
        justify-self:stretch !important;
    }

    .topbar:has(.home-search-form) .home-search-form input[type="text"]{
        width:100% !important;
        height:42px !important;
        padding-right:58px !important;
        border-radius:12px !important;
        border-right:1px solid #303030 !important;
    }

    .topbar:has(.home-search-form) .home-search-submit{
        position:absolute !important;
        top:0 !important;
        right:0 !important;
        width:50px !important;
        min-width:50px !important;
        height:42px !important;
        border-radius:0 12px 12px 0 !important;
        border-left:1px solid #303030 !important;
        z-index:2 !important;
    }
}

@media(max-width:480px){
    .topbar:has(.home-search-form) .home-search-form{
        width:calc(100vw - 24px) !important;
        max-width:calc(100vw - 24px) !important;
    }
}

/* Home header mobile visual viewport clamp */
@media(max-width:900px){
    body:not(.upload-image-page){
        overflow-x:hidden !important;
    }

    body:not(.upload-image-page) .topbar:has(.home-search-form){
        width:-webkit-fill-available !important;
        max-width:-webkit-fill-available !important;
        box-sizing:border-box !important;
    }

    .topbar:has(.home-search-form) .home-search-form{
        width:-webkit-fill-available !important;
        max-width:-webkit-fill-available !important;
        box-sizing:border-box !important;
    }

    .topbar:has(.home-search-form) .right-menu{
        max-width:46vw !important;
        overflow:hidden !important;
        justify-content:flex-end !important;
        gap:10px !important;
        white-space:nowrap !important;
    }

    .topbar:has(.home-search-form) .right-menu a{
        flex:0 0 auto !important;
    }
}

@media(max-width:480px){
    .topbar:has(.home-search-form) .right-menu a[href$="register.php"]{
        display:none !important;
    }
}

/* Home search mobile clean input fallback */
@media(max-width:900px){
    .topbar:has(.home-search-form) .home-search-form{
        display:block !important;
        width:100% !important;
        max-width:100% !important;
        overflow:visible !important;
    }

    .topbar:has(.home-search-form) .home-search-form input[type="text"]{
        width:100% !important;
        max-width:100% !important;
        height:42px !important;
        padding:0 14px !important;
        border-radius:12px !important;
        border:1px solid #303030 !important;
    }

    .topbar:has(.home-search-form) .home-search-submit{
        display:none !important;
    }
}

/* Narrow phone search safe width */
@media(max-width:480px){
    .topbar:has(.home-search-form) .home-search-form input[type="text"]{
        width:calc(100% - 88px) !important;
        max-width:calc(100% - 88px) !important;
    }
}

/* Phone search safe width for browser minimum layout widths */
@media(max-width:600px){
    .topbar:has(.home-search-form) .home-search-form input[type="text"]{
        width:calc(100% - 88px) !important;
        max-width:calc(100% - 88px) !important;
    }
}

/* Mobile header rollback: keep desktop search, restore phone menu and search button */
@media(max-width:900px){
    body:not(.upload-image-page) .topbar:has(.home-search-form){
        display:grid !important;
        grid-template-columns:1fr auto !important;
        gap:10px 12px !important;
        width:100% !important;
        max-width:100vw !important;
        padding:12px !important;
        overflow:visible !important;
        box-sizing:border-box !important;
    }

    .topbar:has(.home-search-form) .logo{
        grid-column:1 !important;
        grid-row:1 !important;
        align-self:center !important;
    }

    .topbar:has(.home-search-form) .right-menu{
        grid-column:2 !important;
        grid-row:1 !important;
        justify-self:end !important;
        align-self:center !important;
        max-width:none !important;
        overflow:visible !important;
        position:relative !important;
        z-index:50 !important;
        white-space:nowrap !important;
    }

    .topbar:has(.home-search-form) .dropdown{
        position:relative !important;
        overflow:visible !important;
    }

    .topbar:has(.home-search-form) .dropdown-menu{
        position:absolute !important;
        top:calc(100% + 10px) !important;
        right:0 !important;
        left:auto !important;
        z-index:9999 !important;
    }

    .topbar:has(.home-search-form) .dropdown-menu.show{
        display:block !important;
    }

    .topbar:has(.home-search-form) .home-search-form{
        grid-column:1 / -1 !important;
        grid-row:2 !important;
        display:grid !important;
        grid-template-columns:minmax(0, 1fr) 50px !important;
        gap:8px !important;
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        padding:0 !important;
        overflow:visible !important;
        position:relative !important;
        box-sizing:border-box !important;
    }

    .topbar:has(.home-search-form) .home-search-form input[type="text"]{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        height:42px !important;
        padding:0 14px !important;
        border-radius:12px !important;
        border:1px solid #303030 !important;
        background:#121212 !important;
        box-sizing:border-box !important;
    }

    .topbar:has(.home-search-form) .home-search-submit{
        position:static !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        width:50px !important;
        min-width:50px !important;
        height:42px !important;
        padding:0 !important;
        border-radius:10px !important;
        border:1px solid #303030 !important;
        background:#242424 !important;
        color:#fff !important;
        box-sizing:border-box !important;
    }

    .topbar:has(.home-search-form) .home-search-submit span{
        display:none !important;
    }

    .topbar:has(.home-search-form) .home-search-submit svg{
        display:block !important;
        width:21px !important;
        height:21px !important;
    }

    .topbar:has(.home-search-form) .home-search-form > a{
        display:none !important;
    }
}

/* Mobile dropdown stacking guard */
@media(max-width:900px){
    body:not(.upload-image-page) .topbar:has(.home-search-form){
        position:relative !important;
        z-index:1000 !important;
    }

    .topbar:has(.home-search-form) .dropdown-menu.show{
        opacity:1 !important;
        visibility:visible !important;
        transform:translateY(0) !important;
        pointer-events:auto !important;
    }
}

/* Member pages unified mobile navigation */
.member-topbar,
.upload-image-topbar,
body:has(.form-wrap) > .topbar:has(.right-menu),
body:has(.page-wrap) > .topbar:has(.right-menu){
    align-items:center;
}

@media(max-width:900px){
    body:not(.upload-image-page) > .topbar:has(.right-menu):not(:has(.home-search-form)),
    .upload-image-page .upload-image-topbar{
        display:block !important;
        height:auto !important;
        min-height:0 !important;
        padding:12px !important;
        background:#0f0f0f !important;
        border-bottom:1px solid #222 !important;
        box-sizing:border-box !important;
    }

    body:not(.upload-image-page) > .topbar:has(.right-menu):not(:has(.home-search-form)) .logo,
    .upload-image-page .upload-image-topbar .logo{
        display:block !important;
        width:max-content !important;
        margin:0 0 10px 0 !important;
        font-size:24px !important;
        line-height:1.2 !important;
    }

    body:not(.upload-image-page) > .topbar:has(.right-menu):not(:has(.home-search-form)) > .right-menu,
    .upload-image-page .upload-image-nav{
        display:flex !important;
        width:100% !important;
        max-width:100% !important;
        margin:0 !important;
        padding:0 !important;
        gap:8px !important;
        align-items:center !important;
        overflow-x:auto !important;
        scrollbar-width:none !important;
        -ms-overflow-style:none !important;
        white-space:nowrap !important;
    }

    body:not(.upload-image-page) > .topbar:has(.right-menu):not(:has(.home-search-form)) > .right-menu::-webkit-scrollbar,
    .upload-image-page .upload-image-nav::-webkit-scrollbar{
        display:none !important;
    }

    body:not(.upload-image-page) > .topbar:has(.right-menu):not(:has(.home-search-form)) > .right-menu > a,
    .upload-image-page .upload-image-nav > a,
    .upload-image-page .upload-image-admin-menu,
    body:not(.upload-image-page) > .topbar:has(.right-menu):not(:has(.home-search-form)) .admin-top-menu{
        flex:0 0 auto !important;
    }

    body:not(.upload-image-page) > .topbar:has(.right-menu):not(:has(.home-search-form)) > .right-menu > a,
    .upload-image-page .upload-image-nav > a{
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        min-height:38px !important;
        padding:0 14px !important;
        border:1px solid #2f2f2f !important;
        border-radius:999px !important;
        background:#181818 !important;
        color:#fff !important;
        font-weight:800 !important;
        box-sizing:border-box !important;
    }

    body:not(.upload-image-page) > .topbar:has(.right-menu):not(:has(.home-search-form)) > .right-menu > a[href$="logout.php"],
    .upload-image-page .upload-image-nav > a[href$="logout.php"]{
        margin-left:auto !important;
    }

    .upload-image-page .upload-image-admin-menu select,
    body:not(.upload-image-page) > .topbar:has(.right-menu):not(:has(.home-search-form)) .admin-top-menu select{
        height:38px !important;
        width:86px !important;
        max-width:86px !important;
        border-radius:999px !important;
        font-weight:800 !important;
    }
}

/* Search and uploader pages: show results as normal cards, not a carousel */
.stacked-result-grid.video-grid,
.stacked-result-grid.image-grid{
    display:grid !important;
    grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap:28px 16px !important;
    overflow:visible !important;
    scroll-snap-type:none !important;
    scroll-padding-inline:0 !important;
    padding:16px 0 24px !important;
    cursor:auto !important;
}

.stacked-result-grid.video-grid .video-card,
.stacked-result-grid.image-grid .image-card{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    flex:none !important;
    scroll-snap-align:unset !important;
    scroll-snap-stop:normal !important;
}

@media(max-width:768px){
    .stacked-result-grid.video-grid,
    .stacked-result-grid.image-grid{
        grid-template-columns:1fr !important;
        gap:30px !important;
        padding:14px 10px 28px !important;
    }

    .stacked-result-grid.video-grid .video-card,
    .stacked-result-grid.image-grid .image-card{
        width:100% !important;
    }
}

/* Member action pages final shared topbar */
@media(max-width:900px){
    .member-action-topbar{
        display:block !important;
        height:auto !important;
        min-height:0 !important;
        padding:12px !important;
        background:#0f0f0f !important;
        border-bottom:1px solid #222 !important;
        box-sizing:border-box !important;
    }

    .member-action-topbar .logo{
        display:block !important;
        width:max-content !important;
        margin:0 0 10px 0 !important;
        font-size:24px !important;
        line-height:1.2 !important;
        text-align:left !important;
    }

    .member-action-nav{
        display:flex !important;
        width:100% !important;
        max-width:100% !important;
        margin:0 !important;
        padding:0 !important;
        gap:8px !important;
        align-items:center !important;
        overflow-x:auto !important;
        scrollbar-width:none !important;
        -ms-overflow-style:none !important;
        white-space:nowrap !important;
    }

    .member-action-nav::-webkit-scrollbar{
        display:none !important;
    }

    .member-action-nav > a{
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        flex:0 0 auto !important;
        min-height:38px !important;
        padding:0 14px !important;
        border:1px solid #2f2f2f !important;
        border-radius:999px !important;
        background:#181818 !important;
        color:#fff !important;
        font-weight:800 !important;
        box-sizing:border-box !important;
    }

    .member-action-nav > a[href$="logout.php"]{
        margin-left:auto !important;
    }

    .member-action-nav .admin-top-menu,
    .member-action-nav .upload-image-admin-menu{
        flex:0 0 auto !important;
        margin:0 !important;
    }

    .member-action-nav .admin-top-menu select,
    .member-action-nav .upload-image-admin-menu select{
        height:38px !important;
        width:86px !important;
        max-width:86px !important;
        border-radius:999px !important;
        font-weight:800 !important;
    }
}

/* Member action pages exact unified order */
@media(max-width:900px){
    .member-action-nav{
        display:flex !important;
        align-items:center !important;
        gap:8px !important;
    }

    .member-action-admin-menu{ order:1 !important; }
    .member-action-nav > a[href*="my_videos.php"]{ order:2 !important; }
    .member-action-nav > a[href*="/member/upload.php"]{ order:3 !important; }
    .member-action-nav > a[href*="upload_image.php"]{ order:4 !important; }
    .member-action-nav > a[href*="/index.php"]{ order:5 !important; }
    .member-action-nav > a[href$="logout.php"]{
        order:6 !important;
        margin-left:auto !important;
    }

    .member-action-admin-menu{
        flex:0 0 auto !important;
        margin:0 !important;
    }

    .member-action-admin-menu select{
        height:38px !important;
        width:86px !important;
        max-width:86px !important;
        border-radius:999px !important;
        font-weight:800 !important;
    }
}

/* Register field-level validation */
.form-card input.input-error,
.auth-card input.input-error{
    border-color:#ff3b3b !important;
    box-shadow:0 0 0 2px rgba(255,59,59,.22) !important;
}

.field-error{
    color:#ff5a5a;
    font-size:13px;
    line-height:1.4;
    margin-top:-6px;
    margin-bottom:4px;
}

/* Review video preview */
.review-video-box{
    margin:0 0 18px;
}
.review-video-preview{
    width:100%;
    max-height:420px;
    background:#000;
    border-radius:10px;
}

@media(max-width:600px){
    .auth-page{
        min-height:auto;
        align-items:flex-start;
        padding:18px 16px 28px;
    }

    .auth-page .auth-card{
        margin-top:0;
    }
}

/* Phone viewport overflow guard */
@media(max-width:600px){
    html,
    body{
        width:100%;
        max-width:100%;
        overflow-x:hidden;
    }

    body:not(.upload-image-page) .topbar:has(.home-search-form){
        width:100% !important;
        max-width:100% !important;
        padding:12px 10px !important;
        overflow:visible !important;
    }

    .topbar:has(.home-search-form) .home-search-form{
        width:100% !important;
        max-width:100% !important;
        grid-template-columns:minmax(0, 1fr) 42px !important;
        gap:6px !important;
    }

    .topbar:has(.home-search-form) .home-search-submit{
        width:42px !important;
        min-width:42px !important;
        height:40px !important;
    }

    .country-tabs{
        width:100% !important;
        max-width:100% !important;
        padding:10px !important;
        gap:8px !important;
        flex-wrap:wrap !important;
        overflow:visible !important;
    }

    .country-tabs a{
        max-width:calc(50% - 4px);
        min-width:0;
        padding:8px 12px;
        font-size:14px;
        line-height:1.2;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .content-switch-tabs{
        width:100%;
        max-width:100%;
        padding:0 10px 12px !important;
        gap:8px;
        flex-wrap:wrap;
    }

    .content-switch-btn{
        min-width:0;
        max-width:calc(50% - 4px);
        padding:0 14px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .video-section{
        width:100%;
        max-width:100%;
        padding-left:10px !important;
        padding-right:10px !important;
        overflow:hidden;
    }

    .video-grid{
        width:100%;
        max-width:100%;
        padding-left:0 !important;
        padding-right:0 !important;
    }

    .video-grid .video-card{
        flex-basis:100% !important;
        min-width:0 !important;
        max-width:100% !important;
    }

    .video-title,
    .image-title,
    .watch-detail-card h1{
        max-width:100%;
        overflow-wrap:anywhere;
        word-break:break-word;
    }
}

/* Watch page mobile actions */
.download-action-group{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
}

.mobile-save-video-btn{
    border:0;
    cursor:pointer;
    font:inherit;
}

.mobile-save-video-btn:disabled{
    opacity:.65;
    cursor:wait;
}

@media(max-width:600px){
    .watch-actions{
        display:flex;
        align-items:flex-start;
        gap:10px;
    }

    .download-action-group{
        flex:1 1 auto;
        min-width:0;
    }

    .download-btn,
    .secondary-btn,
    .mobile-save-video-btn{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        min-height:38px;
        width:auto;
        max-width:100%;
        padding:0 16px;
        border-radius:999px;
        line-height:1;
        white-space:nowrap;
        flex:0 0 auto;
    }

    .watch-actions > .secondary-btn{
        margin-left:auto;
    }

    .ios-download-tip{
        flex:1 0 100%;
        margin-top:2px;
        font-size:12px;
        line-height:1.45;
    }
}

/* My videos table readable columns */
.my-videos-table{
    min-width:1080px;
}

.my-videos-table th:nth-child(3),
.my-videos-table td:nth-child(3),
.my-videos-table th:nth-child(4),
.my-videos-table td:nth-child(4),
.my-videos-table th:nth-child(5),
.my-videos-table td:nth-child(5),
.my-videos-table th:nth-child(6),
.my-videos-table td:nth-child(6){
    min-width:72px;
    white-space:nowrap;
    word-break:keep-all;
    overflow-wrap:normal;
    text-align:left;
}

.my-videos-table th:nth-child(6),
.my-videos-table td:nth-child(6){
    min-width:88px;
}

.my-videos-table td:nth-child(6) span{
    white-space:nowrap;
    word-break:keep-all;
}

.my-videos-table th:nth-child(7),
.my-videos-table td:nth-child(7){
    min-width:150px;
    white-space:nowrap;
    word-break:keep-all;
    overflow-wrap:normal;
}

.my-videos-table[data-kind="image"] th:nth-child(6),
.my-videos-table[data-kind="image"] td:nth-child(6){
    min-width:150px;
    white-space:nowrap;
    word-break:keep-all;
    overflow-wrap:normal;
}

@media(max-width:600px){
    .my-videos-table{
        min-width:1180px;
        table-layout:auto;
    }

    .my-videos-table th,
    .my-videos-table td{
        word-break:normal;
        overflow-wrap:normal;
    }
}

/* Watch page phone header */
@media(max-width:900px){
    body.watch-body > .topbar.watch-topbar:has(.right-menu):not(:has(.home-search-form)){
        border-bottom:0 !important;
    }

    .watch-body > .watch-topbar{
        position:relative !important;
        display:block !important;
        height:56px !important;
        min-height:56px !important;
        padding:0 12px !important;
        background:#0f0f0f !important;
        border-bottom:0 !important;
    }

    .watch-topbar .logo{
        position:absolute !important;
        left:12px !important;
        top:18px !important;
        margin:0 !important;
        font-size:20px !important;
        line-height:1 !important;
        padding:0 !important;
    }

    .watch-topbar .right-menu{
        position:absolute !important;
        top:10px !important;
        right:12px !important;
        width:auto !important;
        max-width:calc(100% - 110px) !important;
        margin:0 !important;
        padding:0 !important;
        display:flex !important;
        align-items:center !important;
        justify-content:flex-end !important;
        gap:8px !important;
        overflow:visible !important;
        white-space:nowrap !important;
    }

    .watch-topbar .right-menu > a,
    .watch-topbar .user-btn{
        min-height:34px !important;
        padding:0 12px !important;
        border:1px solid #303030 !important;
        border-radius:999px !important;
        background:#181818 !important;
        color:#fff !important;
        font-size:13px !important;
        font-weight:700 !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        white-space:nowrap !important;
    }

    .watch-body .watch-page{
        padding-top:18px !important;
    }

    .watch-body .watch-player{
        width:100% !important;
        margin-top:18px !important;
        margin-left:0 !important;
        margin-right:0 !important;
        border-radius:0 !important;
    }

    .watch-body .watch-actions{
        align-items:center !important;
        justify-content:flex-start !important;
    }

    .watch-body .download-action-group{
        flex:0 0 auto !important;
    }

    .watch-body .watch-actions > .secondary-btn{
        margin-left:0 !important;
    }
}

@media(max-width:900px){
    .topbar:has(.home-search-form) .right-menu{
        gap:8px !important;
    }

    .admin-notify-btn{
        width:36px !important;
        height:36px !important;
    }

    .admin-notify-btn svg{
        width:18px !important;
        height:18px !important;
    }

    .topbar:has(.home-search-form) .admin-notify-menu{
        min-width:260px !important;
        right:0 !important;
        left:auto !important;
        max-width:calc(100vw - 24px) !important;
    }
}

/* lovedshare logo image sizing */
.logo img,
.auth-logo img{
    display:block;
    height:32px;
    width:auto;
    max-width:190px;
}
.auth-logo img{
    margin:0 auto;
}
@media (max-width: 640px){
    .logo img,
    .auth-logo img{
        height:28px;
        max-width:160px;
    }
}