* {
 box-sizing: border-box;
}

body {
 margin: 0;
 background: #0a0a0a;
 color: #eee;
 font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 line-height: 1.5;
}

/* Фон с блюром */
.top-pad::before {
 content: "";
 position: fixed;
 inset: 0;
 background: url("$FULL_PHOTO_DIRECT_URL$") center/cover no-repeat;
 filter: blur(60px) brightness(0.32);
 z-index: -1;
}
 

.h-mtr-com {
 margin-bottom: 100px!important;
}

#addcBut {
 margin: -1px 0 20px 0 !important;
}
.uComment input[type=button], .uComment input[type=submit], .uComment input[type=reset], .uComment .button {
 border-top: 0px solid #5757570a;
 border-left: 1px solid #5a5a5a47;
 border-bottom: 1px solid #5a5a5a47;
 border-right: 1px solid #5a5a5a47;
 border-radius: 0px; 
 background-color: #ffffff0a;
 font-weight: 600;
}
input[type=button], input[type=submit], input[type=reset], .button { 
 background-color: #49494957;
 color: #fff;
}
input[type=button], input[type=submit], input[type=reset], .button {
 margin: 0;
 padding: 0 15px;
 display: inline-block;
 text-align: center;
 min-height: 40px; 
 font-size: 13px;
 text-decoration: none; 
 cursor: pointer;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;
}

.ph-like {
    font-size: 18px;
}

/* Основной контейнер */
.container {
 max-width: 820px;
 margin: 0 auto;
 padding: 0 12px;
 width: 100%;
 margin-bottom: 100px!important;
}

/* Шапка */
.ph-head {
 display: flex;
 align-items: center;
 justify-content: space-between;
 background: rgba(20,20,20,0.95);
 padding: 12px 16px;
 border-radius: 18px;
 margin: 15px 0 25px;
 backdrop-filter: blur(10px);
}

.ph-ava {
 width: 52px;
 height: 52px;
 border-radius: 50%;
 border: 3px solid #ff0066;
 flex-shrink: 0;
}

.ph-head h2 {
 margin: 0;
 font-size: 1.1rem;
}

/* Фото/Видео контейнер */
.photo-container {
 position: relative;
 border-radius: 20px;
 overflow: hidden;
 background: #000;
 margin: 20px 0 35px;
 display: flex;
 justify-content: center;
 align-items: center;
 max-height: 75vh;
 min-height: 320px;
}

.photo-container img,
.photo-container video {
 max-width: 100%;
 max-height: 75vh;
 width: auto;
 height: auto;
 object-fit: contain;
 display: block;
}

/* Кнопка скачать */
.download-overlay {
 position: absolute;
 top: 16px;
 right: 16px;
 z-index: 10;
 background: rgba(0,0,0,0.85);
 color: #fff;
 width: 48px;
 height: 48px;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.9rem;
 border: 3px solid #ff0066;
 box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

/* Меню категорий */
.category-menu {
 display: flex;
 overflow-x: auto;
 gap: 14px;
 padding: 12px 0 20px;
 margin: 15px 0 30px;
 scrollbar-width: none;
 -webkit-overflow-scrolling: touch;
 justify-content: flex-start;
}

.category-menu::-webkit-scrollbar { 
 display: none; 
}

.category-menu a {
    text-decoration: none;
    color: #ddd;
    text-align: center;
    flex-shrink: 0;
    min-width: 78px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.category-menu img {
 width: 58px;
 height: 58px;
 object-fit: contain;
 border-radius: 16px;
 box-shadow: 0 6px 20px rgba(0,0,0,0.6);
 background: rgba(255,255,255,0.05);
 padding: 4px;
 transition: all 0.3s ease;
}

.category-menu a:hover img {
 transform: scale(1.12) rotate(6deg);
 box-shadow: 0 10px 25px rgba(255, 0, 102, 0.45);
}

.category-menu span {
 display: block;
 font-size: 0.82rem;
 margin-top: 6px;
 color: #ccc;
 font-weight: 500;
}

/* Нижняя панель навигации */
.mobile-panel-ph {
 position: fixed;
 bottom: 0;
 left: 0;
 right: 0;
 backdrop-filter: blur(20px);
 background: rgba(10,10,10,0.95);
 z-index: 9999;
 padding: 10px 12px;
 border-top: 1px solid #ff0066;
}

#pages {
 display: flex;
 justify-content: space-between;
 gap: 10px;
 max-width: 820px;
 margin: 0 auto;
}

#pages a {
 color: #ff6699;
 font-size: 1.15rem;
 padding: 14px 24px;
 border-radius: 50px;
 background: rgba(255,255,255,0.08);
 text-decoration: none;
 flex: 1;
 text-align: center;
}

/* Комментарии */
.h-mtr-com {
 padding: 25px;
 background: rgba(20,20,20,0.9);
 border-radius: 16px;
 margin: 30px auto;
 max-width: 820px;
}

/* Адаптив */
@media (max-width: 768px) {
 .photo-container {
 border-radius: 16px;
 margin: 15px 0 25px;
 min-height: 280px;
 }
 
 .download-overlay {
 width: 42px;
 height: 42px;
 font-size: 1.6rem;
 top: 12px;
 right: 12px;
 }
 
 .ph-head {
 padding: 10px 12px;
 margin: 12px 0 20px;
 }
 
 .ph-ava {
 width: 46px;
 height: 46px;
 }
 
 .category-menu {
 gap: 10px;
 padding: 8px 0 16px;
 }
 
 .category-menu img {
 width: 52px;
 height: 52px;
 }
 
 .category-menu span {
 font-size: 0.78rem;
 }
}

@media (max-width: 480px) {
 .container {
 padding: 0 10px;
 }
 
 .ph-head h2 {
 font-size: 1rem;
 }
}

@media (min-width: 1024px) {
 .photo-container {
 max-height: 82vh;
 }
}

      /* Container for the hidden image/video */
        .content-wrapper {
            position: relative;
            width: 400px;
            height: 500px; 
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        }

        .blurred-bg {
            width: 100%;
            height: 100%; 
            filter: blur(20px);
            transform: scale(1.1);
        }

        /* The Canvas Overlay */
        #pixelCanvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 10;
        }

        /* Button styling */
        .unlock-btn {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 20;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            padding: 12px 24px;
            border-radius: 50px;
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            white-space: nowrap;
            font-weight: 500;
    font-size: 15px;
    color: #fff;
        }

        .unlock-btn:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translate(-50%, -50%) scale(1.05);
        }

        /* Modal styling adapted from your code */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 100;
        }

        .app {
            background: #17212b;
            padding: 24px;
            border-radius: 20px;
            width: 90%;
            max-width: 400px;
            text-align: center;
            border: 1px solid #242f3d;
        }

        .prem-title {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 20px;
            color: #fff;
        }

        .tabs {
            margin-bottom: 20px;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        #pass_password {
            background: #0e1621;
            border: 1px solid #242f3d;
            padding: 12px;
            border-radius: 10px;
            color: white;
            outline: none;
        }

        #pass_x {
            display: none;
            color: #ff595a;
            margin-bottom: 15px;
            font-size: 14px;
        }

        .tab_container {
            font-size: 14px;
            line-height: 1.5;
            color: #7f91a4;
        }

        .pass_by {
            display: inline-block;
            background: #3390ec;
            color: white !important;
            padding: 8px 16px;
            border-radius: 8px;
            text-decoration: none;
            margin: 10px 0;
            font-weight: bold;
        }

  
        .button-link {
            display: inline-block;
            padding: 8px 15px;
            border-radius: 8px;
            margin: 5px;
            font-size: 12px;
            text-decoration: none;
            color: white;
            background: #242f3d;
        }

        .button_yellow { background: #f1c40f; color: black; }
        .promo-btn { background: #8e44ad; }
.pass_view_photo .pass_view_photos,
.pass_noview_photo .pass_view_photon {
display:block;
}

.pass_noview_photo .pass_view_photos,
.pass_view_photo .pass_view_photon {
display:none;
}

        .pass_button {
            background: #2481cc!important;
            color: white!important;
            border: none;
            padding: 12px;
            border-radius: 10px!important;
            cursor: pointer;
            font-weight: bold;
        }

.comment-date {
 display: inline-block;
 padding: 2px 4px;
 border-radius: 4px;
 font-size: 10px;
 margin-left: auto;
}
.comment-date.today {
 background: #27ae6033; 
 font-weight: 600;
}
.comment-date.yesterday {
 background: #507fff33; 
 font-weight: 600;
}
.comment-date.older {
 background: #80808033; 
 font-weight: 600;
}

/* Основные стили комментариев */
 
.comment-header {
 display: flex;
 align-items: center;
}
.comment-avatar {
    width: 22px!important;
    height: 22px!important;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 5px;
}
.comment-author {
 font-weight: bold; 
 text-decoration: none;
 font-size: 12px;
}
/* Стиль для гостей без аккаунта */
.comment-author.guest { 
}
.comment-body {   
    padding-bottom: 10px;
  font-size: 12px;
}
.comment-footer {
border: 2px dashed #95959545;
    padding: 5px;
    display: flex;
    margin-bottom: 10px;
}
.comment-material {
    font-size: 11px;
 text-decoration: none; 
  line-height: 1.1;
    vertical-align: top;
      color:#548c00;
}  


.comment {
  display:table;
  width:-webkit-fill-available;
  border-radius: 10px; 
  margin-bottom:5px;
}
.comment_avatar {
    display: table-cell;
    vertical-align: top;
    width: 45px;
    height: 45px;
    padding-right: 15px;
}
.comment_avatar img {
    border-radius: 50%;
    width: 100%;
    height: 100%;
}
.comment_message {display:table-cell;vertical-align:top;text-align:left}
.comment_rate {display:table-cell;text-align: center;  position: absolute; right: 30px;}
.comment_top {font-weight: bold;padding-bottom: 10px;} 
a.adm-group {color: #ff2e2e!important; text-shadow: 1px 1px 9px #ff2e2e69; font-weight: 500;} 
a.vip-group {color: #ff2eca!important; text-shadow: 1px 1px 12px #ff00ae78; font-weight: 500;}  
a.moder-group {color: #2e5eff!important; text-shadow: 1px 1px 9px #2e3dff69; font-weight: 500;}
.comment_top .comm_time {font-size: 12px;color: #888;display: block;font-weight:400} 
.comment_over {margin-bottom:5px;}
.comment_over .comment_answer_button a {opacity:0.5;display:inline-block}
.comment_over:hover .c_rate_plus a, .comment_over:hover .c_rate_minus a, .comment_over:hover .comment_answer_button a {opacity:1}
.comment_answer_button {margin-top:10px;height:24px}
.comment_answer_button a {color:#666;font-size:13px;text-decoration:none;background:#efefef;padding:3px 10px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px}
.comment_answer_button a:hover {color:#1d1d1d;text-decoration:none;background:#eaeaea;}
.c_minus, .c_ziro, .c_plus {width:24px;padding:3px 0px;font-size:13px;text-align:center;font-weight:bold;-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;line-height: normal;}
.c_minus {background:#ffcccc;color:#cc0000}
.c_ziro {background:#82828259;    opacity: .6;}
.c_plus {background:#ccffcc;color:#009900}
.c_rate_t {display:table;height:24px}
.c_rate_plus {display:table-cell;vertical-align:top;  padding-left: 8px;}
.c_rate_minus {display:table-cell;vertical-align:top;width:22px;}
.c_rate_count {display:table-cell;vertical-align:top;text-align:center}
.c_rate_plus a {width:18px;height:18px;display:block;color:rgba(0,0,0,0);font-size:0px;background:url('/icons/like.png');margin-top:1px;opacity:0.3;position:absolute}
.c_rate_minus a {width:18px;height:18px;display:block;color:rgba(0,0,0,0);font-size:0px;background:url('/icons/dislike.png');margin-top:4px;margin-left:-3px;opacity:0.3;position:absolute;}