/* Authentication Modal */
.auth-overlay[hidden]{display:none}
.auth-overlay{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:20px;background:#000e;backdrop-filter:blur(10px);opacity:0;transition:opacity .22s ease;overflow-y:auto}
.auth-overlay.open{opacity:1}
.auth-card{width:min(430px,100%);max-height:calc(100vh - 24px);overflow-y:auto;position:relative;padding:29px;border:1px solid #1a2023;border-radius:20px;background:#070809;box-shadow:0 24px 70px #000d;line-height:1.5;transform:scale(0.97);transition:transform 0.24s cubic-bezier(0.16, 1, 0.3, 1)}
.auth-overlay.open .auth-card{transform:scale(1)}
body .auth-card,body .auth-card *{font-family:Inter,"Segoe UI",Arial,sans-serif!important}
.auth-close{position:absolute;right:16px;top:16px;width:33px;height:33px;border:1px solid #ffffff0c;border-radius:10px;background:#080a0b;color:#aeb8bd;font-family:Arial,sans-serif!important;font-size:18px;cursor:pointer;transition:background 0.2s,color 0.2s}
.auth-close:hover{background:#ffffff12;color:white}
.auth-brand{display:flex;align-items:center;gap:10px;margin-bottom:25px}
.auth-brand img{width:38px;height:38px;border-radius:10px;object-fit:cover;border:1px solid #ff9c4b55}
.auth-brand b{display:block;font-size:15px;letter-spacing:-.025em}
.auth-brand small{display:block;color:#8d9aa3;font-size:10px;font-weight:700;letter-spacing:.12em}
.auth-kicker{font-size:11px;color:#83bbce;font-weight:800;letter-spacing:.1em}
.auth-card h2{font-family:Inter,"Segoe UI",Arial,sans-serif!important;font-size:30px;line-height:1.2;letter-spacing:-.03em;font-weight:750;margin:7px 0}
.auth-subtitle{margin:0 0 19px;color:#b0b8bd;font-size:14px;line-height:1.55}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:10px;background:#030405;border:1px solid #ffffff08;margin-bottom:18px}
.auth-tab{padding:9px;border:0;border-radius:7px;background:transparent;color:#7e888f;font-size:13px;font-weight:700;cursor:pointer;transition:background-color .22s cubic-bezier(0.16, 1, 0.3, 1),color .2s,box-shadow .2s,transform .14s}
.auth-tab:active{transform:scale(0.97)}
.auth-tab.active{background:#11191d;color:#dce6ea;box-shadow:0 0 0 1px #8099a31b}
.auth-field{display:grid;gap:8px;margin:14px 0}
.auth-field[hidden]{display:none}
#authEmailField:not([hidden]){animation:fieldSlide 0.24s cubic-bezier(0.16, 1, 0.3, 1)}
@keyframes fieldSlide{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.auth-field label{color:#dce1e3;font-size:13px;font-weight:700}
.auth-field input{width:100%;height:46px;padding:0 13px;border-radius:9px;border:1px solid #202629;background:#040506;color:#f4f7f8;font-family:Inter,"Segoe UI",Arial,sans-serif!important;font-size:14px;font-weight:500;outline:0;transition:border-color .2s,box-shadow .2s}
.auth-field input::placeholder{color:#98a1a6}
.auth-field input:focus{border-color:#76bed5a3;box-shadow:0 0 0 3px #6db9d51a}
.password-wrap{position:relative}
.password-wrap input{padding-right:61px}
.password-toggle{position:absolute;right:8px;top:7px;height:29px;padding:0 8px;border:0;border-radius:6px;background:transparent;color:#aeb7bb;font-size:11px;font-weight:700;cursor:pointer;transition:color 0.2s}
.password-toggle:hover{color:#d7e8ee}
.password-hint{color:#9ca6ab;font-size:11px}
.auth-submit{width:100%;height:46px;margin-top:7px;border:1px solid #354850;border-radius:9px;background:linear-gradient(110deg,#22323a,#142127);color:#d9edf3;font-family:Inter,"Segoe UI",Arial,sans-serif!important;font-size:14px;font-weight:800;cursor:pointer;transition:background .2s,transform .16s}
.auth-submit:hover{background:#1b2a30}
.auth-submit:active{transform:scale(0.98)}
.auth-submit:disabled{opacity:.6;cursor:wait}
.auth-error{min-height:17px;margin:9px 0 0;color:#ffaaa4;font-size:11px}
.auth-security{display:flex;gap:8px;align-items:flex-start;margin:13px 0 0;padding-top:13px;border-top:1px solid #ffffff0b;color:#aab3b7;font-size:11px;line-height:1.65}
.auth-security span{color:#8dc9dc}
.auth-switch{margin:16px 0 0;text-align:center;color:#c2ccd0;font-size:12px}
.auth-switch button{padding:0;border:0;background:transparent;color:#c2ccd0;font-size:12px;font-weight:700;cursor:pointer;transition:color 0.2s}
.auth-switch button:hover{color:#ffffff;text-decoration:underline}
.auth-success{display:none;padding:15px;border:1px solid #92d7ec19;border-radius:11px;background:#080d10;color:#e5f4f8;font-size:13px}
.auth-success.show{display:block;animation:fieldSlide 0.25s ease-out}
.auth-success strong{display:block;font-size:16px}
.auth-success p{color:#98a6ae;font-size:11px}
.auth-logout{border:1px solid #ffffff15;background:#ffffff08;border-radius:8px;padding:8px 12px;color:#d6e2e7;font-size:11px;font-weight:700;cursor:pointer;transition:background 0.2s}
.auth-logout:hover{background:#ffffff15}
@media(max-width:590px){.auth-card{padding:23px 20px}}

/* Checkout Modal */
.checkout-overlay[hidden]{display:none}
.checkout-overlay{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:18px;background:#000e;backdrop-filter:blur(10px);opacity:0;transition:opacity .22s ease}
.checkout-overlay.open{opacity:1}
.checkout-sheet{width:min(520px,100%);max-height:calc(100vh - 36px);overflow:auto;position:relative;padding:30px;border:1px solid #1a2023;border-radius:20px;background:#070809;box-shadow:0 24px 70px #000d;opacity:0;transform:scale(0.96);transition:opacity .22s ease,transform .24s cubic-bezier(0.16, 1, 0.3, 1)}
.checkout-overlay.open .checkout-sheet{opacity:1;transform:scale(1)}
.checkout-close{position:absolute;right:16px;top:16px;width:36px;height:36px;border:1px solid #20272a;border-radius:10px;background:#080a0b;color:#b7c0c4;font-family:Arial,sans-serif!important;font-size:21px;cursor:pointer;transition:background 0.2s}
.checkout-close:hover{background:#101416;color:#fff}
.checkout-kicker{margin:0 45px 8px 0;color:#839ba5;font-size:10px;font-weight:800;letter-spacing:.16em}
.checkout-sheet h2{margin:0;color:#f0f4f6;font-family:Inter,"Segoe UI",Arial,sans-serif!important;font-size:30px;line-height:1.2;letter-spacing:-.03em}
.checkout-description{margin:9px 0 20px;color:#c0c8cb;font-size:15px;line-height:1.6}
.checkout-summary{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 14px;padding:15px 16px;border:1px solid #ffffff0d;border-radius:12px;background:rgba(2,4,5,.38)}
.checkout-summary span{color:#aab4b8;font-size:13px}.checkout-summary strong{color:#d9e1e5;font-size:14px}.checkout-summary .checkout-total{padding-top:9px;margin-top:5px;border-top:1px solid #ffffff0c;color:#d6e0e4}.checkout-summary strong.checkout-price{padding-top:9px;margin-top:5px;border-top:1px solid #ffffff0c;color:#eaf8fd;font-size:20px}
.checkout-section-title{margin:21px 0 10px;color:#dbe2e6;font-size:15px;font-weight:750}
.payment-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.payment-option{min-width:0;display:flex;align-items:center;gap:11px;padding:13px;text-align:left;border:1px solid #20282c;border-radius:12px;background:#090c0d;color:#e1e8eb;cursor:pointer;transition:transform .22s cubic-bezier(0.34, 1.56, 0.64, 1),background .18s,border-color .18s,box-shadow .2s}
.payment-option:hover{background:#0e1315;border-color:#3b4c53;transform:translateY(-2px)}
.payment-option[aria-pressed="true"]{background:#10181b;border-color:#7197a3;box-shadow:0 0 16px rgba(113, 151, 163, 0.3) inset,0 0 12px rgba(113, 151, 163, 0.2);transform:scale(1.02)}
.payment-icon{width:37px;height:37px;display:grid;place-items:center;flex:none;border:1px solid #2b3438;border-radius:10px;background:#101517;color:#c5e3ec;font-size:14px;font-weight:850;transition:transform 0.2s}
.payment-option[aria-pressed="true"] .payment-icon{transform:scale(1.08)}
.payment-icon.funpay-mark,.payment-icon.tron-mark{padding:0;border:0;background:transparent;overflow:hidden}
.payment-icon.funpay-mark svg,.payment-icon.tron-mark svg{display:block;width:37px;height:37px}
.payment-copy{min-width:0;display:grid;gap:3px}.payment-copy strong{font-size:14px}.payment-copy small{color:#aab4b8;font-size:12px;line-height:1.35}
.checkout-foot{margin:13px 0 0;color:#b4bec2;font-size:13px;line-height:1.5}
.checkout-pay{width:100%;min-height:49px;margin-top:17px;padding:12px 16px;border:1px solid #20272a;border-radius:11px;background:#0a0c0d;color:#d8dfe2;font-family:Inter,"Segoe UI",Arial,sans-serif!important;font-size:16px;font-weight:800;cursor:pointer;transition:background-color .14s,border-color .14s,box-shadow .14s,transform .14s}
.checkout-pay:hover:not(:disabled){background:#101416;border-color:#303a3e}
.checkout-pay:active:not(:disabled){background:#070809;border-color:#39484e;box-shadow:inset 0 3px 8px #000c,0 0 0 1px #3b4a5044;transform:scale(0.98)}
.checkout-pay:disabled{opacity:.5;cursor:not-allowed}
.checkout-pay.tap{animation:checkout-tap .22s ease-out}
@keyframes checkout-tap{0%{box-shadow:0 0 0 0 #5a707522;transform:scale(1)}45%{box-shadow:inset 0 3px 8px #000b,0 0 0 3px #52656c55;transform:scale(0.97)}100%{box-shadow:0 0 0 0 #5a707500;transform:scale(1)}}
.checkout-feedback{margin:12px 0 0;padding:11px 12px;border:1px solid #282f32;border-radius:10px;background:#090c0d;color:#b4bec2;font-size:13px;line-height:1.55;animation:fieldSlide 0.24s ease-out}
body.checkout-open{overflow:hidden}
@media(max-width:480px){.checkout-sheet{padding:25px 19px 20px;border-radius:17px}.checkout-sheet h2{font-size:25px}.payment-options{grid-template-columns:1fr}.payment-option{padding:11px}}

/* Profile & Friends Modal */
.profile-overlay{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:20px;background:rgba(2,5,7,.62);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);opacity:0;transition:opacity .22s ease}
.profile-overlay[hidden]{display:none}.profile-overlay.open{opacity:1}
.profile-view[hidden]{display:none}
.profile-view:not([hidden]){animation:viewSwitch 0.26s cubic-bezier(0.16, 1, 0.3, 1)}
@keyframes viewSwitch{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.profile-snow{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.72}
.profile-card{position:relative;z-index:1;width:min(940px,100%);max-height:90vh;overflow:auto;padding:22px;border:1px solid rgba(190,224,235,.18);border-radius:20px;background:#080d10;box-shadow:0 28px 90px #000a;transform:translateY(12px) scale(0.98);transition:transform .25s cubic-bezier(0.16, 1, 0.3, 1)}
.profile-overlay.open .profile-card{transform:translateY(0) scale(1)}
.profile-close{position:absolute;right:15px;top:14px;width:34px;height:34px;border:1px solid #ffffff19;border-radius:10px;background:#ffffff08;color:#d9e5e9;font-size:21px;cursor:pointer;transition:background 0.2s}
.profile-close:hover{background:#ffffff18}
.profile-kicker{margin:0 0 20px;color:#92b9c5;font-family:Inter,"Segoe UI",Arial,sans-serif!important;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;text-shadow:none;-webkit-font-smoothing:antialiased}
.profile-user{display:flex;align-items:center;gap:15px;margin-bottom:14px;padding:17px;border:1px solid #b5dce922;border-radius:15px;background:rgba(160,211,228,.055)}
.profile-avatar{width:58px;height:58px;display:grid;place-items:center;border:1px solid #bbdeea33;border-radius:12px;overflow:hidden;background:#0c171b}
.profile-avatar svg{width:46px;height:46px;image-rendering:pixelated}
.profile-avatar .cat-avatar-video{width:100%;height:100%;object-fit:cover;object-position:center;border-radius:inherit;image-rendering:auto}
.profile-user h2{margin:0;color:#f0f6f8;font-family:Inter,"Segoe UI",Arial,sans-serif!important;font-size:23px;font-weight:800;letter-spacing:-.025em;text-transform:none;text-shadow:none;-webkit-font-smoothing:antialiased}
.profile-user p{margin:3px 0 0;color:#9eafb6;font-size:12px}
.profile-info{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:18px 0 0;overflow:hidden;border:1px solid #ffffff12;border-radius:13px;background:#ffffff12}.profile-info div{padding:15px;background:rgba(5,9,11,.56)}.profile-info small{display:block;margin-bottom:5px;color:#91a4ab;font-size:10px;letter-spacing:.08em;text-transform:uppercase}.profile-info strong{color:#e1ebee;font-size:13px;overflow-wrap:anywhere}.profile-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px}.profile-plans,.profile-logout{padding:11px 15px;border:1px solid #ffffff1a;border-radius:10px;background:rgba(255,255,255,.045);color:#e3edf0;font:700 12px Inter,"Segoe UI",Arial,sans-serif;cursor:pointer}.profile-plans:hover,.profile-logout:hover{background:rgba(177,220,235,.12)}
.profile-layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:16px}.profile-sidebar{align-self:start;padding:13px;border:1px solid rgba(190,224,235,.14);border-radius:15px;background:rgba(4,8,10,.56);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.profile-menu-title{padding:8px 9px 13px;color:#9db1b8;font-size:11px;font-weight:700;letter-spacing:.06em}
.profile-nav{width:100%;display:flex;align-items:center;gap:10px;margin:3px 0;padding:11px 10px;border:1px solid transparent;border-radius:10px;background:transparent;color:#b9c6cb;text-align:left;font:600 12px Inter,"Segoe UI",Arial,sans-serif;cursor:pointer;transition:all 0.2s cubic-bezier(0.16, 1, 0.3, 1)}
.profile-nav:hover{border-color:#abd8e51c;background:rgba(154,205,221,.1);color:#edf7fa;transform:translateX(3px)}
.profile-nav:active{transform:scale(0.98)}
.profile-nav.active{border-color:#abd8e51c;background:rgba(154,205,221,.14);color:#edf7fa;box-shadow:0 0 14px rgba(154,205,221,0.12)}
.profile-nav-icon{width:19px;text-align:center;color:#9ccbd8;font-size:15px;transition:transform 0.2s}
.profile-nav:hover .profile-nav-icon{transform:scale(1.15)}
.profile-nav.logout{margin-top:12px;border-top:1px solid #ffffff14;border-radius:0;padding-top:17px}.profile-main{min-width:0;padding:8px}
.profile-nav:disabled{opacity:.42;cursor:not-allowed}
.profile-subscription{display:flex;justify-content:space-between;align-items:center;gap:15px;margin:0 0 14px;padding:17px 18px;border:1px solid rgba(166,217,232,.22);border-radius:14px;background:linear-gradient(110deg,rgba(97,157,176,.11),rgba(5,9,11,.58))}
.profile-subscription span{color:#9eb2b9;font-size:12px}.profile-subscription strong{display:block;color:#e9f4f7;font-size:15px}.profile-subscription small{color:#9eb2b9;font-size:11px}
.profile-help-intro{margin:8px 0 19px}.profile-help-intro .profile-kicker{margin-bottom:9px}.profile-help-intro h2{margin:0;color:#eef5f7;font-size:25px;font-weight:800;letter-spacing:-.03em}.profile-help-intro p{max-width:510px;margin:8px 0 0;color:#aab8bd;font-size:13px;line-height:1.65}
.profile-support{margin-top:0;padding:20px;border:1px solid #ffffff12;border-radius:14px;background:rgba(4,8,10,.48)}.profile-support h3{margin:0;color:#e8f1f4;font-size:14px}.profile-support p{margin:4px 0 12px;color:#9eabb0;font-size:12px;line-height:1.6}.profile-support-links{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.profile-support-links a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;border:1px solid #b5dce922;border-radius:12px;background:rgba(161,213,230,.07);color:#dcebf0;text-decoration:none;font-size:12px;font-weight:700;transition:transform .2s,background .16s,border-color .16s}
.profile-support-links a:hover{background:rgba(161,213,230,.15);border-color:#b5dce94a;transform:translateY(-2px)}
.profile-support-links svg{width:16px;height:16px;fill:currentColor}
@media(max-width:680px){.profile-layout{grid-template-columns:1fr}.profile-sidebar{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:8px}.profile-menu-title{display:none}.profile-nav{justify-content:center;gap:5px;padding:9px 5px;font-size:10px}.profile-nav.logout{margin:0;border:0}.profile-card{max-height:90vh;overflow:auto}}
@media(max-width:590px){.profile-card{padding:14px}.profile-main{padding:4px}.profile-user h2{font-size:19px}.profile-info div{padding:12px}.profile-actions{flex-wrap:wrap}}

.friends-intro{margin:8px 0 18px}.friends-intro .profile-kicker{margin-bottom:8px}.friends-intro h2{margin:0;color:#eef5f7;font-size:24px;letter-spacing:-.035em}.friends-intro p{margin:7px 0 0;color:#aab8bd;font-size:12px;line-height:1.6}.friends-search{display:flex;gap:9px;margin-bottom:14px}
.friends-search input{min-width:0;flex:1;height:44px;padding:0 14px;border:1px solid rgba(190,224,235,.17);border-radius:11px;background:rgba(2,7,9,.62);color:#eef5f7;font:500 13px Inter,"Segoe UI",Arial,sans-serif;outline:none;transition:border-color 0.2s}
.friends-search input:focus{border-color:#8dc6d8;box-shadow:0 0 0 3px rgba(141,198,216,.11)}
.friends-search button,.friend-action{min-height:42px;padding:0 15px;border:1px solid rgba(173,219,232,.2);border-radius:11px;background:rgba(139,193,210,.12);color:#e8f5f8;font:700 12px Inter,"Segoe UI",Arial,sans-serif;cursor:pointer;transition:transform .16s,background .16s,border-color .16s}
.friends-search button:hover,.friend-action:hover{background:rgba(139,193,210,.2);border-color:rgba(173,219,232,.38)}
.friends-search button:active,.friend-action:active{transform:scale(.97)}
.friends-message{min-height:18px;margin:0 0 11px;color:#9eb2b9;font-size:11px}.friends-message.error{color:#ff9898}.friends-group{margin-top:13px;padding:15px;border:1px solid rgba(190,224,235,.12);border-radius:14px;background:rgba(3,8,10,.48)}.friends-group h3{display:flex;align-items:center;justify-content:space-between;margin:0 0 11px;color:#dfecef;font-size:12px}.friends-count{color:#94bac6;font-size:10px}.friends-list{display:grid;gap:8px}
.friend-row{display:flex;align-items:center;gap:11px;min-width:0;padding:10px;border:1px solid rgba(190,224,235,.09);border-radius:11px;background:rgba(255,255,255,.025);transition:background 0.2s,border-color 0.2s}
.friend-row:hover{background:rgba(255,255,255,.04);border-color:rgba(190,224,235,.18)}
.friend-mini-avatar{position:relative;display:grid;place-items:center;flex:none;width:34px;height:34px;border:1px solid #a9d2df27;border-radius:9px;background:rgba(134,189,206,.1);color:#c7e3eb;font-size:13px;font-weight:800;text-transform:uppercase}.friend-presence{position:absolute;right:-2px;bottom:-2px;width:9px;height:9px;border:2px solid #0b1215;border-radius:50%;background:#58656a}.friend-presence.online{background:#78d3a0;box-shadow:0 0 8px #78d3a077}.friend-copy{flex:1;min-width:0}.friend-copy strong{display:block;overflow:hidden;color:#eaf3f5;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.friend-copy small{display:block;margin-top:3px;color:#93a4aa;font-size:10px}.friend-row-actions{display:flex;gap:6px;flex:none}.friend-action{min-height:31px;padding:0 10px;font-size:10px}.friend-action.secondary{background:rgba(255,255,255,.045)}.friends-empty{padding:10px;color:#84969d;font-size:11px;line-height:1.55;text-align:center}.profile-nav-friends-count{min-width:17px;margin-left:auto;padding:2px 5px;border:1px solid #9bcddb30;border-radius:20px;color:#b9e0eb;font-size:9px;text-align:center}

/* Role Badges */
.role-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    vertical-align: middle;
}
.role-badge.owner {
    background: linear-gradient(135deg, rgba(255, 60, 60, 0.24), rgba(255, 150, 20, 0.28));
    color: #ffa477;
    border: 1px solid rgba(255, 110, 50, 0.5);
    text-shadow: 0 0 10px rgba(255, 90, 50, 0.5);
    box-shadow: 0 0 12px rgba(255, 80, 40, 0.25);
}
.role-badge.admin {
    background: rgba(240, 180, 60, 0.18);
    color: #ffd074;
    border: 1px solid rgba(240, 180, 60, 0.45);
    box-shadow: 0 0 10px rgba(240, 180, 60, 0.2);
}
.role-badge.moderator {
    background: rgba(92, 225, 230, 0.16);
    color: #62ecf0;
    border: 1px solid rgba(92, 225, 230, 0.4);
    box-shadow: 0 0 10px rgba(92, 225, 230, 0.18);
}
.role-badge.mediaplus {
    background: linear-gradient(135deg, rgba(255, 112, 166, 0.22), rgba(166, 78, 255, 0.25));
    color: #f7a8ff;
    border: 1px solid rgba(210, 100, 255, 0.5);
    text-shadow: 0 0 8px rgba(200, 90, 255, 0.4);
    box-shadow: 0 0 12px rgba(200, 90, 255, 0.25);
}
.role-badge.media {
    background: rgba(192, 132, 252, 0.16);
    color: #d8b4fe;
    border: 1px solid rgba(192, 132, 252, 0.4);
    box-shadow: 0 0 8px rgba(192, 132, 252, 0.2);
}
.role-badge.user {
    background: rgba(255, 255, 255, 0.05);
    color: #8da1ab;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.friend-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.friend-name-row strong {
    margin: 0;
}
.friend-name-row .role-badge {
    padding: 2px 6px;
    font-size: 9px;
}