*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:#101010;color:#eee;font-family:Arial,Helvetica,sans-serif;min-height:100vh}
body.modal-open{overflow:hidden}
a{color:inherit}
.wrap{width:min(1120px,94%);margin:0 auto}
.topbar{position:sticky;top:0;z-index:100;background:#181818;border-bottom:1px solid #2c2c2c}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;gap:15px}
.brand{font-size:22px;font-weight:800;text-decoration:none}
.primary,.secondary,.button{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:10px 15px;border:0;border-radius:8px;text-decoration:none;cursor:pointer;font-weight:600}
.primary{background:#f1f1f1;color:#111}
.secondary,.button{background:#292929;color:#fff}
.hero{padding:42px 0 26px}
.hero h1{margin:0 0 8px;font-size:40px}
.hero p{margin:0;color:#999}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px;padding-bottom:50px}
.tile{background:#191919;border:1px solid #2b2b2b;border-radius:12px;overflow:hidden}
.image-trigger{display:block;width:100%;padding:0;border:0;background:#0c0c0c;cursor:pointer}
.image-trigger img{display:block;width:100%;height:220px;object-fit:cover;transition:transform .18s ease,opacity .18s ease}
.image-trigger:hover img{transform:scale(1.025);opacity:.9}
.description{padding:10px 12px;color:#ddd;min-height:42px;white-space:pre-wrap;overflow-wrap:anywhere}
.tile-meta{display:flex;justify-content:space-between;gap:10px;padding:0 12px 8px;color:#888;font-size:12px}
.expiry{padding:0 12px 13px;color:#aaa;font-size:12px}
.expiry strong{color:#fff}
.empty{grid-column:1/-1;padding:50px;text-align:center}
.card{background:#191919;border:1px solid #2c2c2c;border-radius:14px;padding:22px}
.upload-page{padding-bottom:60px}
.upload-card{max-width:700px;margin:0 auto}
.upload-card form{display:grid;gap:17px}
label{display:grid;gap:7px;color:#ccc}
input,textarea,select{width:100%;padding:11px 12px;border:1px solid #3a3a3a;border-radius:8px;background:#0f0f0f;color:#fff;font:inherit}
textarea{min-height:110px;resize:vertical}
.error{max-width:700px;margin:0 auto 18px;padding:13px;border:1px solid #713535;border-radius:9px;background:#301818;color:#ffbcbc}
.success{max-width:700px;margin:0 auto 18px;padding:20px;border:1px solid #3c6542;border-radius:12px;background:#142016}
.success h2{margin-top:0}
.delete-row,.share-row{display:flex;gap:8px;margin-top:8px}
.delete-row input,.share-row input{flex:1;font-family:monospace;font-size:12px}
.warning{color:#efc66e;font-size:13px;line-height:1.45}
.centered{padding-top:60px}
.footer{padding:30px 0 50px;color:#777;font-size:12px}

/* AGE GATE */
.age-page{background:#070707}
.age-screen{position:fixed;inset:0;z-index:2147483646;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.96)}
.age-dialog{width:min(460px,100%);padding:34px;background:#191919;border:1px solid #373737;border-radius:16px;text-align:center;box-shadow:0 25px 100px rgba(0,0,0,.8)}
.age-badge{font-size:32px;font-weight:900}
.age-dialog h1{margin:12px 0}
.age-dialog p{color:#aaa;line-height:1.5}
.age-confirm,.age-leave{width:100%;margin-top:10px}

/* POPUP: hidden by default, fixed to viewport */
.image-modal{position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;margin:0!important;padding:20px!important;z-index:2147483645!important;display:none!important;align-items:center!important;justify-content:center!important}
.image-modal.open{display:flex!important}
.modal-backdrop{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;background:rgba(0,0,0,.92)!important}
.modal-dialog{position:relative!important;z-index:1!important;width:min(1000px,96vw)!important;max-height:94vh!important;overflow:auto!important;margin:0!important;padding:20px!important;background:#181818!important;border:1px solid #3a3a3a!important;border-radius:16px!important;box-shadow:0 30px 120px rgba(0,0,0,.85)!important}
.modal-close{position:absolute;right:10px;top:10px;z-index:3;width:44px;height:44px;border:0;border-radius:50%;background:rgba(0,0,0,.75);color:#fff;font-size:30px;line-height:1;cursor:pointer}
.modal-image{display:block;width:auto;max-width:100%;height:auto;max-height:65vh;margin:0 auto;border-radius:10px}
.modal-info{padding-top:12px}
.modal-info h2{margin:5px 0}
.modal-info p{color:#bbb;white-space:pre-wrap}
.modal-meta{display:flex;flex-wrap:wrap;gap:16px;color:#999;font-size:13px;margin:14px 0}
.extend-panel{padding:15px 0;border-top:1px solid #333;border-bottom:1px solid #333}
.extend-panel form{display:flex;gap:8px;margin-top:10px}
.extend-panel select{flex:1}
.extend-panel small{display:block;margin-top:8px;color:#888}
.share-row{margin-top:14px}

@media(max-width:600px){
 .hero h1{font-size:31px}
 .gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .image-trigger img{height:165px}
 .modal-dialog{width:100%;max-height:96vh;padding:14px}
 .modal-image{max-height:55vh}
 .extend-panel form,.delete-row,.share-row{flex-direction:column}
}

/* V8: hard-hide the image popup until explicitly opened */
#imageModal[hidden],
#imageModal:not(.open) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#imageModal.open {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 2147483647 !important;
}

#imageModal.open .modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
}

#imageModal.open .modal-dialog {
    position: relative !important;
    z-index: 2 !important;
}

.extend-toggle{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:10px 16px;border:1px solid #444;border-radius:8px;background:#292929;color:#fff;font-weight:700;cursor:pointer}
.extend-toggle:hover,.extend-toggle.active{background:#3a3a3a}
.extend-controls{margin-top:12px}
.extend-controls[hidden]{display:none!important}

/* Fixed report/download UI */
#imageModal[hidden], #reportModal[hidden] { display:none !important; }
#imageModal:not(.open), #reportModal:not(.open) { display:none !important; }
#imageModal.open { display:flex !important; }

.download-panel {
    display:flex;
    gap:8px;
    width:100%;
    margin-top:10px;
}
.download-button {
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    box-sizing:border-box;
    padding:10px 14px;
    border:1px solid #454a53;
    border-radius:9px;
    background:#292d34;
    color:#fff;
    text-decoration:none;
    font-weight:700;
}
.report-button {
    flex:1;
    min-height:42px;
    border:1px solid #66343d;
    border-radius:9px;
    background:#24161a;
    color:#f1c5cc;
    font-weight:700;
    cursor:pointer;
}

#reportModal.open {
    display:flex !important;
    position:fixed !important;
    inset:0 !important;
    z-index:2147483647 !important;
    align-items:center;
    justify-content:center;
    padding:16px;
    box-sizing:border-box;
}
#reportModal .report-backdrop {
    position:absolute !important;
    inset:0 !important;
    z-index:0 !important;
    background:rgba(0,0,0,.82) !important;
}
#reportModal .report-dialog {
    position:relative !important;
    z-index:1 !important;
    width:min(500px,100%);
    max-height:calc(100vh - 32px);
    overflow:auto;
    padding:26px;
    box-sizing:border-box;
    background:#181a1f !important;
    color:#eee;
    border:1px solid #3b3f48;
    border-radius:18px;
    box-shadow:0 30px 90px rgba(0,0,0,.8);
}
.report-success-toast {
    position:fixed;
    top:20px;
    left:50%;
    transform:translateX(-50%);
    z-index:2147483648;
    display:flex;
    align-items:center;
    gap:12px;
    width:min(92vw,430px);
    padding:14px 16px;
    box-sizing:border-box;
    background:#171a1f;
    color:#eee;
    border:1px solid #3c414a;
    border-radius:12px;
    box-shadow:0 18px 55px rgba(0,0,0,.65);
}
.report-success-icon {
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 32px;
    width:32px;
    height:32px;
    border-radius:50%;
    background:#214d32;
    color:#8ee2a8;
    font-weight:800;
}
.report-success-content strong { display:block; }
.report-success-content span {
    display:block;
    color:#9ca2ab;
    font-size:12px;
}
.report-success-toast button {
    margin-left:auto;
    border:0;
    background:transparent;
    color:#888;
    font-size:22px;
    cursor:pointer;
}
@media (max-width:560px) {
    .download-panel { flex-direction:column; }
}

/* Temporary report confirmation */
.report-success-toast{
    position:fixed;
    top:20px;
    left:50%;
    transform:translateX(-50%);
    z-index:2147483648;
    display:flex;
    align-items:center;
    gap:11px;
    width:min(92vw,390px);
    padding:12px 14px;
    background:#171a1f;
    color:#f2f3f5;
    border:1px solid #363b44;
    border-radius:11px;
    box-shadow:0 16px 45px rgba(0,0,0,.55);
}
.report-success-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:30px;
    height:30px;
    flex:0 0 30px;
    border-radius:50%;
    background:#214d32;
    color:#91e0a8;
    font-size:16px;
    font-weight:800;
}
.report-success-content{
    min-width:0;
}
.report-success-content strong{
    display:block;
    margin-bottom:2px;
    font-size:13px;
}
.report-success-content span{
    display:block;
    color:#9299a4;
    font-size:11px;
    line-height:1.35;
}
.report-success-toast button{
    margin-left:auto;
    border:0;
    background:transparent;
    color:#777f8a;
    font-size:20px;
    line-height:1;
    cursor:pointer;
}
.report-success-toast button:hover{color:#fff}

/* =========================================================
   REPORT POST - V34 POLISHED DESIGN
   ========================================================= */

#reportModal.open{
    display:flex!important;
    position:fixed!important;
    inset:0!important;
    z-index:2147483647!important;
    align-items:center!important;
    justify-content:center!important;
    padding:20px!important;
    box-sizing:border-box!important;
}

#reportModal .report-backdrop{
    position:absolute!important;
    inset:0!important;
    z-index:0!important;
    background:rgba(0,0,0,.78)!important;
    backdrop-filter:blur(7px)!important;
}

#reportModal .report-dialog{
    position:relative!important;
    z-index:1!important;
    width:min(520px,calc(100vw - 32px))!important;
    max-height:calc(100vh - 32px)!important;
    overflow-y:auto!important;
    padding:28px!important;
    box-sizing:border-box!important;

    background:#181a1f!important;
    color:#f4f4f5!important;

    border:1px solid #343841!important;
    border-radius:18px!important;

    box-shadow:
        0 30px 90px rgba(0,0,0,.72),
        0 0 0 1px rgba(255,255,255,.025)!important;

    scrollbar-width:thin!important;
}

#reportModal .report-dialog::-webkit-scrollbar{
    width:7px;
}
#reportModal .report-dialog::-webkit-scrollbar-track{
    background:transparent;
}
#reportModal .report-dialog::-webkit-scrollbar-thumb{
    background:#383c44;
    border-radius:10px;
}

/* Close button */

#reportModal .report-close{
    position:absolute!important;
    top:16px!important;
    right:16px!important;

    width:34px!important;
    height:34px!important;
    min-width:34px!important;

    display:flex!important;
    align-items:center!important;
    justify-content:center!important;

    padding:0!important;
    margin:0!important;

    border:1px solid #373b43!important;
    border-radius:9px!important;

    background:#22252b!important;
    color:#a4a9b1!important;

    font-size:21px!important;
    line-height:1!important;
    cursor:pointer!important;
}

#reportModal .report-close:hover{
    background:#2d3037!important;
    color:#fff!important;
    border-color:#4a4f59!important;
}

/* Heading */

#reportModal .report-heading{
    display:flex!important;
    align-items:center!important;
    gap:13px!important;
    margin:0!important;
    padding:0 48px 0 0!important;
}

#reportModal .report-icon{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;

    width:42px!important;
    height:42px!important;
    min-width:42px!important;

    margin:0!important;
    padding:0!important;

    border-radius:12px!important;
    border:1px solid #6a3a44!important;

    background:#2c1d22!important;
    color:#ff7889!important;

    font-size:19px!important;
    font-weight:800!important;
}

#reportModal .report-heading h2{
    margin:0!important;
    padding:0!important;

    color:#f7f7f8!important;
    font-size:23px!important;
    line-height:1.15!important;
    font-weight:750!important;
    letter-spacing:-.025em!important;
}

/* Intro */

#reportModal .report-intro{
    margin:12px 0 19px!important;
    padding:0!important;

    color:#9da3ad!important;
    font-size:13px!important;
    line-height:1.5!important;
}

/* Warning */

#reportModal .report-warning{
    position:relative!important;

    margin:0 0 20px!important;
    padding:13px 14px 13px 39px!important;

    background:#261d17!important;
    border:1px solid #5b4127!important;
    border-radius:10px!important;

    color:#d5c0a4!important;
    font-size:12px!important;
    line-height:1.45!important;
}

#reportModal .report-warning::before{
    content:"!"!important;
    position:absolute!important;
    left:13px!important;
    top:12px!important;

    display:flex!important;
    align-items:center!important;
    justify-content:center!important;

    width:19px!important;
    height:19px!important;

    border-radius:50%!important;
    background:#79521b!important;
    color:#ffe3a7!important;

    font-size:11px!important;
    font-weight:800!important;
}

/* Categories */

#reportModal .report-options{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:9px!important;
    width:100%!important;
}

#reportModal .report-option{
    position:relative!important;

    display:flex!important;
    align-items:center!important;
    gap:10px!important;

    width:100%!important;
    min-height:47px!important;
    margin:0!important;
    padding:10px 12px!important;

    box-sizing:border-box!important;

    background:#111318!important;
    border:1px solid #2d3139!important;
    border-radius:10px!important;

    color:#aeb4bd!important;
    font-size:12.5px!important;
    line-height:1.25!important;

    cursor:pointer!important;

    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease,
        transform .15s ease!important;
}

#reportModal .report-option:hover{
    background:#191c21!important;
    border-color:#454a54!important;
    color:#f0f1f3!important;
    transform:translateY(-1px)!important;
}

/* Completely reset inherited radio positioning */

#reportModal .report-option input[type="radio"]{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;

    display:block!important;

    width:16px!important;
    height:16px!important;
    min-width:16px!important;
    min-height:16px!important;

    margin:0!important;
    padding:0!important;

    flex:0 0 16px!important;

    opacity:1!important;
    visibility:visible!important;

    accent-color:#b97818!important;
}

#reportModal .report-option:has(input[type="radio"]:checked){
    background:#211b14!important;
    border-color:#a66e1a!important;
    color:#f5f5f6!important;

    box-shadow:
        0 0 0 1px rgba(166,110,26,.12)!important;
}

/* Description label */

#reportModal .report-label{
    display:block!important;

    margin:21px 0 8px!important;
    padding:0!important;

    color:#858c97!important;
    font-size:10px!important;
    line-height:1.2!important;
    font-weight:800!important;
    letter-spacing:.08em!important;
}

/* Textarea */

#reportModal #reportDetails{
    display:block!important;

    width:100%!important;
    min-height:116px!important;

    margin:0!important;
    padding:13px 14px!important;

    box-sizing:border-box!important;
    resize:vertical!important;

    background:#0f1114!important;
    border:1px solid #30343d!important;
    border-radius:10px!important;

    color:#f0f1f3!important;

    font-family:inherit!important;
    font-size:13px!important;
    line-height:1.45!important;

    outline:none!important;
}

#reportModal #reportDetails::placeholder{
    color:#626974!important;
}

#reportModal #reportDetails:focus{
    border-color:#a06a19!important;
    box-shadow:0 0 0 3px rgba(160,106,25,.12)!important;
}

/* Counter */

#reportModal .report-counter{
    margin:7px 2px 14px!important;
    padding:0!important;

    color:#6e7580!important;
    font-size:11px!important;
    line-height:1.2!important;
    text-align:right!important;
}

/* Submit */

#reportModal .report-submit{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;

    width:100%!important;
    min-height:45px!important;

    margin:0!important;
    padding:10px 16px!important;

    border:0!important;
    border-radius:10px!important;

    background:linear-gradient(135deg,#b87718,#986014)!important;
    color:#fff!important;

    font-size:13px!important;
    font-weight:750!important;

    cursor:pointer!important;

    box-shadow:0 8px 22px rgba(0,0,0,.25)!important;

    transition:
        filter .15s ease,
        transform .15s ease!important;
}

#reportModal .report-submit:hover{
    filter:brightness(1.08)!important;
    transform:translateY(-1px)!important;
}

#reportModal .report-submit:active{
    transform:translateY(0)!important;
}

/* Mobile */

@media(max-width:600px){
    #reportModal.open{
        padding:10px!important;
    }

    #reportModal .report-dialog{
        width:100%!important;
        max-height:calc(100vh - 20px)!important;
        padding:22px!important;
        border-radius:16px!important;
    }

    #reportModal .report-options{
        grid-template-columns:1fr!important;
    }

    #reportModal .report-heading h2{
        font-size:21px!important;
    }
}