:root{

  --bg:#09090d;
--bg2:#0f1016;
--panel:#12131a;
--panel2:#171821;
--text:#f6f7fb;
--muted:#9295a3;
--line:rgba(255,255,255,.08);

  --pink:#ff3f78;
--violet:#8b5cf6;
--green:#29d391;
--danger:#ff5b69;
--shadow:0 22px 70px rgba(0,0,0,.38);

}

*{
box-sizing:border-box}
html{
scroll-behavior:smooth}
body{
margin:0;
font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
background:var(--bg);
color:var(--text);
min-height:100vh}
button,input,textarea,select{
font:inherit}
button{
cursor:pointer}
a{
text-decoration:none;
color:inherit}
img{
display:block;
max-width:100%}
[hidden]{
display:none!important}

body:before{
content:"";
position:fixed;
inset:0;
pointer-events:none;
background:radial-gradient(circle at 85% 12%,rgba(139,92,246,.10),transparent 28%),radial-gradient(circle at 15% 25%,rgba(255,63,120,.07),transparent 26%);
z-index:-1}

.shell-wide{
width:min(1180px,calc(100% - 48px));
margin-inline:auto}
.brand{
display:inline-flex;
align-items:center;
gap:10px;
font-weight:850;
letter-spacing:.14em;
font-size:15px;
border:0;
background:none;
color:#fff;
padding:0}
.brand-mark{
display:grid;
place-items:center;
width:32px;
height:32px;
border-radius:10px;
background:linear-gradient(135deg,var(--pink),var(--violet));
color:#fff;
font-weight:900;
letter-spacing:0;
box-shadow:0 8px 24px rgba(255,63,120,.25)}

.primary-btn,.ghost-btn,.soft-btn,.text-btn,.upload-btn{
border:0;
transition:.2s ease}
.primary-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
background:linear-gradient(135deg,var(--pink),#ff5d61 48%,var(--violet));
color:#fff;
border-radius:14px;
padding:14px 20px;
font-weight:750;
box-shadow:0 12px 28px rgba(255,63,120,.20)}
.primary-btn:hover{
transform:translateY(-1px);
filter:brightness(1.05)}
.primary-btn.compact{
padding:10px 16px;
border-radius:11px}
.ghost-btn{
background:rgba(255,255,255,.05);
border:1px solid var(--line);
color:#fff;
padding:10px 16px;
border-radius:11px;
font-weight:650}
.ghost-btn:hover,.soft-btn:hover{
background:rgba(255,255,255,.09)}
.text-btn{
background:none;
color:#b8bac4;
padding:12px;
font-weight:650}
.text-btn:hover{
color:#fff}
.soft-btn{
background:rgba(255,255,255,.05);
border:1px solid var(--line);
color:#d6d7dc;
border-radius:12px;
padding:10px 14px;
font-weight:650}

.direct-warning{
position:fixed;
top:14px;
left:50%;
transform:translateX(-50%);
z-index:9999;
background:#30131d;
border:1px solid rgba(255,91,105,.35);
padding:14px 18px;
border-radius:14px;
box-shadow:var(--shadow);
max-width:650px;
width:calc(100% - 30px)}
.direct-warning div{
display:flex;
flex-direction:column;
gap:4px}
.direct-warning span{
color:#ffc4ca;
font-size:13px}

/* LANDING */

.landing{
overflow:hidden;
background:linear-gradient(180deg,#09090d 0%,#0b0b10 35%,#09090d 100%)}
.landing-header{
height:82px;
display:flex;
align-items:center;
justify-content:space-between;
border-bottom:1px solid rgba(255,255,255,.055)}
.landing-nav{
display:flex;
gap:28px;
color:#a7a9b3;
font-size:14px}
.landing-nav a:hover{
color:#fff}
.landing-actions{
display:flex;
gap:10px}
.hero{
min-height:720px;
display:grid;
grid-template-columns:1.04fr .96fr;
align-items:center;
gap:50px;
padding-block:60px 80px}
.eyebrow,.page-kicker,.section-kicker,.modal-kicker,.match-kicker{
font-size:11px;
font-weight:800;
letter-spacing:.18em;
color:#a8a9b4}
.eyebrow{
display:flex;
align-items:center;
gap:9px;
color:#b8a6ff}
.eyebrow span{
width:22px;
height:1px;
background:linear-gradient(90deg,var(--pink),var(--violet))}
.hero h1{
font-size:clamp(48px,6.4vw,78px);
line-height:.99;
letter-spacing:-.055em;
margin:22px 0 24px;
max-width:720px}
.hero h1 em{
font-style:normal;
color:#a9a9b4;
font-weight:600}
.hero-copy>p{
max-width:590px;
font-size:18px;
line-height:1.6;
color:#9fa1ad;
margin:0}
.hero-actions{
display:flex;
align-items:center;
gap:12px;
margin-top:32px}
.hero-cta{
padding:17px 22px;
border-radius:16px;
font-size:15px}
.hero-cta span{
font-size:20px}
.hero-proof{
display:flex;
align-items:center;
gap:20px;
margin-top:48px}
.proof-item{
display:flex;
flex-direction:column;
gap:3px}
.proof-item strong{
font-size:19px}
.proof-item span{
font-size:12px;
color:#7f828f}
.proof-divider{
width:1px;
height:34px;
background:var(--line)}

.hero-visual{
height:610px;
position:relative;
display:grid;
place-items:center}
.ambient{
position:absolute;
border-radius:999px;
filter:blur(45px);
opacity:.55}
.ambient.one{
width:220px;
height:220px;
background:rgba(255,63,120,.18);
right:10%;
top:17%}
.ambient.two{
width:250px;
height:250px;
background:rgba(139,92,246,.16);
left:7%;
bottom:13%}
.visual-card{
position:absolute;
width:335px;
height:500px;
border-radius:32px;
padding:8px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.12);
box-shadow:var(--shadow);
overflow:hidden}
.back-card{
transform:translate(76px,12px) rotate(9deg) scale(.93);
opacity:.34}
.mid-card{
transform:translate(-70px,14px) rotate(-9deg) scale(.95);
opacity:.62}
.main-card{
z-index:2;
transform:translateY(-2px)}
.visual-photo{
position:absolute;
inset:8px;
border-radius:26px;
overflow:hidden}
.photo-a{
background:linear-gradient(155deg,#efb28b 0 30%,#6f463c 30% 46%,#322d3a 46% 62%,#1e1d28 62%)}
.photo-b{
background:linear-gradient(155deg,#a8c2db 0 28%,#423b51 28% 48%,#252634 48%)}
.photo-c{
background:linear-gradient(155deg,#ddc0a2 0 32%,#6a5665 32% 50%,#292630 50%)}
.visual-face{
position:absolute;
width:120px;
height:160px;
border-radius:60px 60px 46px 46px;
background:rgba(255,255,255,.20);
left:50%;
top:23%;
transform:translateX(-50%);
box-shadow:0 -26px 0 -12px rgba(24,20,27,.5)}
.visual-gradient{
position:absolute;
inset:8px;
border-radius:26px;
background:linear-gradient(180deg,transparent 43%,rgba(8,8,12,.85) 100%)}
.visual-copy{
position:absolute;
left:30px;
right:30px;
bottom:34px;
z-index:2}
.visual-name{
display:flex;
gap:8px;
align-items:center}
.visual-name i{
font-style:normal;
display:grid;
place-items:center;
width:18px;
height:18px;
border-radius:50%;
background:var(--violet);
font-size:10px}
.skeleton{
display:block;
height:15px;
border-radius:8px;
background:rgba(255,255,255,.84)}
.skeleton.wide{
width:130px;
height:21px}
.skeleton.small{
width:84px;
height:8px;
margin-top:10px;
background:rgba(255,255,255,.38)}
.visual-tags{
display:flex;
gap:6px;
margin-top:15px}
.visual-tags b{
width:62px;
height:22px;
border-radius:999px;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.1)}
.floating-pill{
position:absolute;
z-index:5;
border:1px solid rgba(255,255,255,.12);
background:rgba(20,20,28,.82);
backdrop-filter:blur(18px);
box-shadow:0 12px 34px rgba(0,0,0,.32);
font-weight:700}
.like-pill{
right:-58px;
top:95px;
border-radius:13px;
padding:12px 16px;
color:#ff7ca3;
transform:rotate(5deg)}
.voice-pill{
left:-78px;
bottom:118px;
border-radius:999px;
padding:10px 13px;
display:flex;
align-items:center;
gap:4px}
.voice-pill span{
color:var(--pink);
font-size:9px}
.voice-pill i{
width:2px;
background:#d6d6df;
border-radius:3px}
.voice-pill i:nth-of-type(1){
height:7px}
.voice-pill i:nth-of-type(2){
height:13px}
.voice-pill i:nth-of-type(3){
height:18px}
.voice-pill i:nth-of-type(4){
height:10px}
.voice-pill i:nth-of-type(5){
height:15px}
.voice-pill small{
color:#aaaeb8;
margin-left:5px}

.feature-section{
padding:110px 0}
.section-heading{
display:flex;
justify-content:space-between;
align-items:flex-end;
margin-bottom:42px}
.section-heading>span{
color:#9075f2;
font-size:11px;
font-weight:850;
letter-spacing:.18em}
.section-heading h2{
margin:0;
font-size:44px;
line-height:1.08;
letter-spacing:-.04em}
.feature-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px}
.feature-grid article{
min-height:300px;
padding:28px;
border:1px solid var(--line);
background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
border-radius:24px;
position:relative}
.feature-grid article small{
position:absolute;
right:24px;
top:22px;
color:#5f626f;
font-weight:800}
.feature-icon{
width:52px;
height:52px;
border-radius:16px;
display:grid;
place-items:center;
background:rgba(139,92,246,.12);
border:1px solid rgba(139,92,246,.18);
color:#bdaeff;
font-size:23px}
.feature-grid h3{
font-size:21px;
margin:64px 0 10px}
.feature-grid p{
margin:0;
color:#8f929e;
line-height:1.6;
font-size:14px}
.safety-section{
padding:40px 0 110px}
.safety-card{
min-height:380px;
border-radius:32px;
border:1px solid var(--line);
background:radial-gradient(circle at 83% 44%,rgba(139,92,246,.13),transparent 32%),linear-gradient(135deg,#11121a,#0d0e14);
display:grid;
grid-template-columns:1fr 300px;
align-items:center;
padding:54px 64px;
overflow:hidden}
.safety-card h2{
font-size:42px;
letter-spacing:-.04em;
line-height:1.08;
margin:16px 0}
.safety-card p{
max-width:650px;
line-height:1.7;
color:#9598a4}
.shield-art{
justify-self:center;
width:180px;
height:210px;
border-radius:70px 70px 90px 90px;
background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.015));
border:1px solid rgba(255,255,255,.1);
display:grid;
place-items:center;
transform:rotate(4deg);
box-shadow:inset 0 0 40px rgba(139,92,246,.08)}
.shield-art span{
width:62px;
height:62px;
border-radius:50%;
display:grid;
place-items:center;
background:linear-gradient(135deg,var(--pink),var(--violet));
font-size:30px}
.final-cta{
padding:100px 0 120px;
text-align:center}
.final-cta>div{
border-top:1px solid var(--line);
padding-top:80px}
.final-cta>div>span{
color:#7f6bd5;
font-size:12px;
font-weight:850;
letter-spacing:.2em}
.final-cta h2{
font-size:48px;
letter-spacing:-.04em;
line-height:1.08;
margin:18px 0 28px}
.landing-footer{
height:100px;
border-top:1px solid var(--line);
display:flex;
align-items:center;
justify-content:space-between;
color:#6f727e;
font-size:12px}

/* MODALS */

.modal-backdrop{
position:fixed;
inset:0;
background:rgba(2,2,5,.76);
backdrop-filter:blur(12px);
z-index:300;
display:grid;
place-items:center;
padding:20px}
.modal-card{
position:relative;
width:min(450px,100%);
border-radius:28px;
border:1px solid rgba(255,255,255,.11);
background:linear-gradient(160deg,#171821,#101117);
box-shadow:0 35px 100px rgba(0,0,0,.55);
padding:34px}
.modal-close{
position:absolute;
right:18px;
top:18px;
width:34px;
height:34px;
border-radius:50%;
border:1px solid var(--line);
background:rgba(255,255,255,.04);
color:#aaa;
font-size:20px}
.auth-brand{
margin-bottom:22px}
.auth-modal h2{
font-size:31px;
margin:10px 0 7px;
letter-spacing:-.035em}
.auth-modal>p{
color:#90939e;
margin:0 0 22px;
font-size:14px;
line-height:1.55}
.auth-tabs{
display:grid;
grid-template-columns:1fr 1fr;
background:#0d0e13;
border:1px solid var(--line);
border-radius:12px;
padding:4px;
margin-bottom:20px}
.auth-tabs button{
border:0;
border-radius:9px;
padding:9px;
background:transparent;
color:#747783;
font-weight:700}
.auth-tabs button.active{
background:#1c1d26;
color:#fff}
.auth-modal form{
display:flex;
flex-direction:column;
gap:14px}
.auth-modal label,.form-grid label{
display:flex;
flex-direction:column;
gap:7px}
.auth-modal label span,.form-grid label span{
font-size:12px;
color:#9fa2ad;
font-weight:650}
.auth-modal input,.form-grid input,.form-grid select,.full-field input,.full-field textarea{
width:100%;
border:1px solid var(--line);
background:#0d0e13;
color:#fff;
border-radius:12px;
padding:12px 13px;
outline:none}
.auth-modal input:focus,.form-grid input:focus,.form-grid select:focus,.full-field input:focus,.full-field textarea:focus{
border-color:rgba(139,92,246,.5);
box-shadow:0 0 0 3px rgba(139,92,246,.08)}
.auth-submit{
width:100%;
margin-top:5px}
.form-error{
min-height:17px;
color:#ff8e98;
font-size:12px}
.legal-note{
display:block;
text-align:center;
color:#656873;
margin-top:17px;
line-height:1.5}
.match-modal{
text-align:center;
overflow:hidden}
.match-glow{
position:absolute;
width:300px;
height:300px;
border-radius:50%;
background:rgba(255,63,120,.13);
filter:blur(55px);
top:-120px;
left:50%;
transform:translateX(-50%);
pointer-events:none}
.match-modal h2{
font-size:37px;
margin:11px 0}
.match-avatars{
display:flex;
justify-content:center;
align-items:center;
margin:28px 0;
gap:0}
.match-avatars>div{
width:94px;
height:94px;
border-radius:50%;
border:4px solid #16171e;
overflow:hidden;
background:#242631}
.match-avatars>div:first-child{
transform:translateX(8px) rotate(-6deg)}
.match-avatars>div:last-child{
transform:translateX(-8px) rotate(6deg)}
.match-avatars img{
width:100%;
height:100%;
object-fit:cover}
.match-avatars>span{
z-index:2;
width:42px;
height:42px;
border-radius:50%;
display:grid;
place-items:center;
background:linear-gradient(135deg,var(--pink),var(--violet));
box-shadow:0 8px 20px rgba(255,63,120,.3)}
.match-modal p{
color:#9a9da8;
line-height:1.55}
.match-modal .primary-btn{
width:100%;
margin-top:8px}
.match-modal .text-btn{
width:100%;
margin-top:4px}

/* APP */

.app-shell{
min-height:100vh;
display:grid;
grid-template-columns:232px 1fr;
background:#09090d}
.sidebar{
position:fixed;
left:0;
top:0;
bottom:0;
width:232px;
border-right:1px solid var(--line);
background:rgba(10,10,14,.94);
display:flex;
flex-direction:column;
justify-content:space-between;
padding:24px 16px;
z-index:50}
.app-brand{
margin:0 12px 34px}
.side-nav{
display:flex;
flex-direction:column;
gap:5px}
.nav-item{
height:46px;
border:0;
border-radius:12px;
background:transparent;
color:#81848f;
display:flex;
align-items:center;
gap:12px;
padding:0 12px;
text-align:left;
font-weight:650}
.nav-item:hover{
background:rgba(255,255,255,.04);
color:#c8cad2}
.nav-item.active{
background:linear-gradient(90deg,rgba(139,92,246,.15),rgba(255,63,120,.07));
color:#fff}
.nav-icon{
width:22px;
font-size:20px;
text-align:center}
.nav-item b{
margin-left:auto;
background:var(--pink);
font-size:10px;
padding:2px 6px;
border-radius:999px}
.sidebar-bottom{
display:flex;
align-items:center;
gap:8px;
border-top:1px solid var(--line);
padding-top:16px}
.sidebar-user{
min-width:0;
display:flex;
align-items:center;
gap:9px;
flex:1}
.mini-avatar{
width:36px;
height:36px;
border-radius:11px;
overflow:hidden;
background:linear-gradient(135deg,#252734,#171821);
display:grid;
place-items:center;
flex:0 0 auto}
.mini-avatar img{
width:100%;
height:100%;
object-fit:cover}
.mini-avatar i{
font-style:normal;
font-weight:800;
color:#b0b2bd}
.sidebar-user div{
min-width:0;
display:flex;
flex-direction:column}
.sidebar-user strong{
font-size:12px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis}
.sidebar-user small{
color:#777a86;
font-size:10px}
.logout-btn{
width:34px;
height:34px;
border:0;
background:transparent;
color:#70737f;
border-radius:8px;
font-size:18px}
.logout-btn:hover{
background:rgba(255,255,255,.05);
color:#fff}
.app-main{
grid-column:2;
min-width:0;
padding:34px 42px 80px}
.page{
display:none;
max-width:1220px;
margin:0 auto}
.page.active{
display:block}
.page-head{
display:flex;
align-items:flex-end;
justify-content:space-between;
margin-bottom:26px}
.page-head h1{
font-size:31px;
letter-spacing:-.035em;
margin:6px 0 0}
.page-kicker{
color:#7866bd}
.mobile-header,.mobile-nav{
display:none}

/* DISCOVER */

.discover-content{
min-height:650px;
display:grid;
place-items:center}
.empty-state{
width:min(620px,100%);
text-align:center;
border:1px solid var(--line);
background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
border-radius:28px;
padding:54px 34px}
.empty-icon{
width:66px;
height:66px;
border-radius:20px;
display:grid;
place-items:center;
margin:0 auto 20px;
background:rgba(139,92,246,.10);
border:1px solid rgba(139,92,246,.18);
font-size:29px;
color:#b6a9ff}
.empty-state h2,.empty-state h3{
margin:0 0 10px;
font-size:25px}
.empty-state p{
color:#8f929d;
line-height:1.6;
margin:0 auto 22px;
max-width:450px}
.deck-wrap{
position:relative;
width:min(440px,calc(100vw - 330px));
height:650px}
.profile-card{
position:absolute;
inset:0;
border-radius:30px;
overflow:hidden;
background:#171821;
border:1px solid rgba(255,255,255,.11);
box-shadow:0 30px 90px rgba(0,0,0,.45);
touch-action:none;
user-select:none;
transform-origin:50% 85%}
.profile-card.behind-one{
transform:translateY(13px) scale(.965);
opacity:.62}
.profile-card.behind-two{
transform:translateY(25px) scale(.93);
opacity:.32}
.profile-card.front{
z-index:3}
.profile-card.dragging{
transition:none!important;
cursor:grabbing}
.profile-photo{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
pointer-events:none}
.card-shade{
position:absolute;
inset:0;
background:linear-gradient(180deg,rgba(0,0,0,.02) 38%,rgba(5,5,8,.18) 56%,rgba(5,5,8,.93) 100%)}
.card-body{
position:absolute;
z-index:2;
left:26px;
right:26px;
bottom:28px}
.card-title{
display:flex;
align-items:center;
gap:8px}
.card-title h2{
font-size:30px;
letter-spacing:-.035em;
margin:0}
.card-location{
color:#d1d3d9;
font-size:13px;
margin-top:5px}
.card-goal{
display:inline-flex;
margin-top:12px;
padding:6px 9px;
border-radius:999px;
background:rgba(255,255,255,.12);
backdrop-filter:blur(8px);
font-size:11px;
font-weight:700}
.card-bio{
color:#d0d2d8;
line-height:1.5;
font-size:13px;
margin:12px 0}
.card-interests{
display:flex;
flex-wrap:wrap;
gap:6px}
.card-interests span{
padding:5px 8px;
border-radius:999px;
background:rgba(255,255,255,.1);
font-size:10px}
.swipe-stamp{
position:absolute;
z-index:5;
top:44px;
border:3px solid;
border-radius:10px;
padding:7px 12px;
font-weight:900;
font-size:24px;
letter-spacing:.05em;
opacity:0}
.like-stamp{
left:27px;
color:#54e7a7;
transform:rotate(-12deg)}
.nope-stamp{
right:27px;
color:#ff6f81;
transform:rotate(12deg)}
.super-stamp{
left:50%;
transform:translateX(-50%) rotate(-2deg);
color:#a796ff}
.card-actions{
position:absolute;
z-index:10;
left:50%;
bottom:-72px;
transform:translateX(-50%);
display:flex;
gap:13px}
.deck-stage{
position:relative;
padding-bottom:92px}
.round-action{
width:58px;
height:58px;
border-radius:50%;
border:1px solid var(--line);
background:#15161d;
color:#fff;
display:grid;
place-items:center;
font-size:22px;
box-shadow:0 10px 30px rgba(0,0,0,.3)}
.round-action.reject{
color:#ff7385}
.round-action.like{
width:68px;
height:68px;
background:linear-gradient(135deg,#ff3f78,#ff6a5f);
font-size:25px}
.round-action.super{
color:#a895ff}
.round-action:hover{
transform:translateY(-2px)}

/* LIKES */

.likes-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
gap:14px}
.like-card{
border-radius:20px;
overflow:hidden;
background:#14151c;
border:1px solid var(--line)}
.like-card img{
width:100%;
aspect-ratio:4/5;
object-fit:cover}
.like-card-copy{
padding:12px}
.like-card-copy strong{
display:block}
.like-card-copy small{
color:#81848f}
.likes-empty{
margin-top:70px}

/* MESSAGES */

.messages-shell{
width:100%;
max-width:100%;
min-width:0;
height:calc(100vh - 150px);
min-height:570px;
display:grid;
grid-template-columns:320px 1fr;
border:1px solid var(--line);
background:#101117;
border-radius:24px;
overflow:hidden}
.conversation-list{
min-width:0;
max-width:100%;
border-right:1px solid var(--line);
overflow-y:auto;
overflow-x:hidden}
.conversation-list-head{
padding:18px 18px 12px;
font-size:12px;
color:#777a85}
.conversation-item{
width:100%;
display:flex;
align-items:center;
gap:11px;
border:0;
background:transparent;
color:#fff;
text-align:left;
padding:12px 14px;
border-left:2px solid transparent}
.conversation-item:hover{
background:rgba(255,255,255,.025)}
.conversation-item.active{
background:rgba(139,92,246,.09);
border-left-color:var(--violet)}
.conversation-avatar{
width:46px;
height:46px;
border-radius:14px;
overflow:hidden;
background:#242631;
flex:0 0 auto}
.conversation-avatar img{
width:100%;
height:100%;
object-fit:cover}
.conversation-copy{
min-width:0;
display:flex;
flex-direction:column;
gap:4px;
flex:1}
.conversation-copy strong{
font-size:13px}
.conversation-copy span{
font-size:11px;
color:#7f828e;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis}
.conversation-time{
font-size:9px;
color:#636672}
.chat-panel{
min-width:0;
position:relative}
.chat-empty{
position:absolute;
inset:0;
display:grid;
place-content:center;
text-align:center;
color:#767985}
.chat-empty h3{
color:#d8dae0;
margin:10px 0 4px}
.chat-empty p{
margin:0;
font-size:13px}
.chat-active{
height:100%;
display:grid;
grid-template-rows:68px 1fr auto auto}
.chat-header{
border-bottom:1px solid var(--line);
display:flex;
align-items:center;
padding:0 20px}
.chat-person{
display:flex;
align-items:center;
gap:10px}
.chat-person img{
width:40px;
height:40px;
border-radius:12px;
object-fit:cover}
.chat-person div{
display:flex;
flex-direction:column}
.chat-person strong{
font-size:13px}
.chat-person small{
font-size:10px;
color:#7e818d}
.chat-messages{
padding:22px;
overflow-y:auto;
display:flex;
flex-direction:column;
gap:9px}
.message{
max-width:min(72%,520px);
padding:10px 12px;
border-radius:15px;
font-size:13px;
line-height:1.45;
display:flex;
flex-direction:column;
gap:4px}
.message.them{
align-self:flex-start;
background:#1b1c24;
border-bottom-left-radius:5px}
.message.me{
align-self:flex-end;
background:linear-gradient(135deg,rgba(139,92,246,.95),rgba(255,63,120,.8));
border-bottom-right-radius:5px}
.message time{
font-size:8px;
opacity:.62;
align-self:flex-end}
.voice-message{
min-width:230px}
.voice-message audio{
width:100%;
height:34px}
.recording-bar{
border-top:1px solid var(--line);
padding:10px 16px;
display:flex;
align-items:center;
gap:9px;
background:#151019}
.record-dot{
width:8px;
height:8px;
border-radius:50%;
background:var(--pink);
animation:pulse 1s infinite}
.recording-bar strong{
font-size:11px}
.recording-bar time{
font-size:11px;
color:#ff8aa9}
.recording-bar button{
margin-left:auto;
border:0;
background:none;
color:#999ca8;
font-size:11px}
.composer{
border-top:1px solid var(--line);
padding:11px 12px;
display:grid;
grid-template-columns:1fr 42px 42px;
gap:7px;
align-items:end}
.composer textarea{
resize:none;
min-height:42px;
max-height:120px;
border:1px solid var(--line);
background:#171820;
color:#fff;
border-radius:13px;
padding:11px 12px;
outline:none}
.mic-btn,.send-btn{
width:42px;
height:42px;
border-radius:12px;
border:1px solid var(--line);
background:#171820;
color:#c4c6cf}
.mic-btn.recording{
background:#38131f;
color:#ff6b91;
border-color:rgba(255,63,120,.3)}
.send-btn{
background:linear-gradient(135deg,var(--violet),var(--pink));
color:#fff;
border:0;
font-size:20px}
@keyframes pulse{
50%{
opacity:.35;
transform:scale(.8)}
}

/* PROFILE */

.profile-status{
border:1px solid var(--line);
border-radius:999px;
padding:7px 10px;
font-size:11px;
color:#9598a4}
.profile-status.ready{
color:#72d9ab;
border-color:rgba(41,211,145,.22);
background:rgba(41,211,145,.06)}
.profile-layout{
display:grid;
grid-template-columns:minmax(0,1fr) 340px;
gap:18px;
align-items:start}
.card-surface{
border:1px solid var(--line);
background:#101117;
border-radius:24px}
.profile-editor{
overflow:hidden}
.editor-section{
padding:24px;
border-bottom:1px solid var(--line)}
.editor-title{
display:flex;
justify-content:space-between;
gap:20px;
align-items:center;
margin-bottom:18px}
.editor-title>div{
display:flex;
flex-direction:column;
gap:4px}
.editor-title span{
font-weight:750}
.editor-title small{
color:#777a86;
font-size:11px}
.upload-btn{
display:flex;
align-items:center;
gap:6px;
background:rgba(255,255,255,.055);
border:1px solid var(--line);
border-radius:11px;
padding:9px 12px;
color:#d6d8de;
font-size:12px;
font-weight:650}
.photo-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px}
.photo-slot{
position:relative;
aspect-ratio:4/5;
border-radius:15px;
overflow:hidden;
background:#171820;
border:1px solid var(--line)}
.photo-slot img{
width:100%;
height:100%;
object-fit:cover}
.photo-slot.empty{
display:grid;
place-items:center;
color:#454854;
border-style:dashed;
font-size:28px}
.photo-actions{
position:absolute;
left:6px;
right:6px;
bottom:6px;
display:flex;
justify-content:space-between}
.photo-actions button{
border:0;
border-radius:8px;
background:rgba(8,8,12,.72);
backdrop-filter:blur(8px);
color:#fff;
padding:6px 8px;
font-size:10px}
.photo-actions button.primary{
color:#ffc7d8}
.main-photo-badge{
position:absolute;
top:7px;
left:7px;
background:rgba(8,8,12,.72);
backdrop-filter:blur(8px);
border-radius:999px;
padding:5px 7px;
font-size:9px}
.form-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px}
.form-grid select{
appearance:none}
.full-field{
display:block;
position:relative}
.full-field textarea{
resize:vertical;
min-height:120px}
.counter{
position:absolute;
right:10px;
bottom:8px;
color:#666a76;
font-size:10px}
.save-row{
display:flex;
align-items:center;
justify-content:flex-end;
gap:16px;
padding:20px 24px}
.save-row>span{
font-size:11px;
color:#7d808c;
margin-right:auto}
.profile-preview{
position:sticky;
top:24px;
padding:16px}
.preview-label{
text-align:center;
color:#727580;
font-size:10px;
text-transform:uppercase;
letter-spacing:.13em;
margin:3px 0 13px}
.preview-card{
height:500px;
border-radius:22px;
overflow:hidden;
position:relative;
background:#191a23}
.preview-card img{
width:100%;
height:100%;
object-fit:cover}
.preview-placeholder{
position:absolute;
inset:0;
display:grid;
place-content:center;
text-align:center;
color:#696c77;
background:radial-gradient(circle at 50% 30%,#282a36,#171820 62%)}
.preview-placeholder span{
font-size:44px}
.preview-shade{
position:absolute;
inset:0;
background:linear-gradient(180deg,transparent 42%,rgba(5,5,8,.94))}
.preview-copy{
position:absolute;
left:19px;
right:19px;
bottom:20px}
.preview-copy h3{
font-size:23px;
margin:0}
.preview-copy p{
font-size:11px;
color:#c4c6cd;
line-height:1.45}
.preview-copy small{
color:#a1a4ae}
.preview-tags{
display:flex;
flex-wrap:wrap;
gap:5px;
margin-top:10px}
.preview-tags b{
font-size:9px;
background:rgba(255,255,255,.1);
padding:5px 7px;
border-radius:999px}

.toast{
position:fixed;
left:50%;
bottom:28px;
transform:translateX(-50%);
z-index:500;
background:#20212a;
border:1px solid var(--line);
color:#fff;
padding:11px 15px;
border-radius:11px;
box-shadow:0 15px 45px rgba(0,0,0,.4);
font-size:12px}

@media(max-width:1000px){
.landing-nav{
display:none}
.hero{
grid-template-columns:1fr;
min-height:auto;
padding-top:70px}
.hero-copy{
text-align:center}
.hero-copy>p{
margin-inline:auto}
.eyebrow,.hero-actions,.hero-proof{
justify-content:center}
.hero-visual{
height:570px}
.feature-grid{
grid-template-columns:1fr}
.section-heading{
display:block}
.section-heading>span{
display:block;
margin-bottom:15px}
.safety-card{
grid-template-columns:1fr;
padding:40px}
.shield-art{
display:none}
.profile-layout{
grid-template-columns:1fr}
.profile-preview{
position:static;
max-width:380px;
margin-inline:auto;
width:100%}
}

@media(max-width:760px){
.shell-wide{
width:min(100% - 28px,1180px)}
.landing-header{
height:70px}
.landing-header .brand{
font-size:0}
.landing-header .brand-mark{
font-size:15px}
.landing-actions .primary-btn{
display:none}
.hero{
padding:56px 0 48px;
gap:20px}
.hero h1{
font-size:45px}
.hero-copy>p{
font-size:15px}
.hero-actions{
flex-direction:column}
.hero-proof{
gap:10px;
align-items:flex-start}
.proof-item span{
font-size:10px}
.hero-visual{
height:500px;
transform:scale(.86)}
.feature-section{
padding:70px 0}
.section-heading h2,.safety-card h2,.final-cta h2{
font-size:34px}
.safety-section{
padding-bottom:60px}
.safety-card{
padding:30px 24px}
.final-cta{
padding:70px 0}
.landing-footer{
height:auto;
padding:25px 0;
gap:10px;
flex-wrap:wrap}
.app-shell{
display:block}
.sidebar{
display:none}
.mobile-header{
height:62px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 15px;
border-bottom:1px solid var(--line);
position:sticky;
top:0;
background:rgba(9,9,13,.92);
backdrop-filter:blur(14px);
z-index:70}
.app-main{
padding:20px 14px 88px}
.page-head{
margin-bottom:18px}
.page-head h1{
font-size:25px}
.mobile-nav{
display:grid;
grid-template-columns:repeat(4,1fr);
position:fixed;
left:0;
right:0;
bottom:0;
z-index:80;
background:rgba(12,12,17,.95);
backdrop-filter:blur(18px);
border-top:1px solid var(--line);
padding:7px 8px max(7px,env(safe-area-inset-bottom))}
.mobile-nav-item{
border:0;
background:none;
color:#656874;
display:flex;
flex-direction:column;
align-items:center;
gap:2px}
.mobile-nav-item span{
font-size:20px}
.mobile-nav-item small{
font-size:9px}
.mobile-nav-item.active{
color:#fff}
.discover-content{
min-height:580px}
.deck-wrap{
width:min(100%,410px);
height:580px}
.profile-card{
border-radius:24px}
.card-actions{
bottom:-68px}
.messages-title{
display:none}
.messages-shell{
height:calc(100vh - 170px);
min-height:540px;
grid-template-columns:1fr}
.conversation-list{
min-width:0;
max-width:100%;
border-right:0;
overflow-y:auto;
overflow-x:hidden}
.chat-panel{
display:none}
.messages-shell.chat-open .conversation-list{
display:none}
.messages-shell.chat-open .chat-panel{
display:block}
.chat-active{
height:100%}
.message{
max-width:82%}
.profile-layout{
display:block}
.profile-preview{
margin-top:15px}
.photo-grid{
grid-template-columns:repeat(2,1fr)}
.form-grid{
grid-template-columns:1fr}
.editor-section{
padding:18px}
.editor-title{
align-items:flex-start;
flex-direction:column}
.save-row{
position:sticky;
bottom:74px;
background:rgba(16,17,23,.96);
backdrop-filter:blur(12px);
z-index:5;
padding:12px 18px}
.save-row .primary-btn{
width:100%}
.save-row>span{
display:none}
.modal-card{
padding:28px 20px;
border-radius:23px}
.auth-modal h2{
font-size:27px}
}

/* WELCOME / AUTH FLOW v5 */

.welcome-landing{
min-height:100vh}
.welcome-note{
display:flex;
gap:12px;
align-items:flex-start;
margin-top:34px;
padding:15px 17px;
border:1px solid var(--line);
border-radius:16px;
background:rgba(255,255,255,.025);
max-width:560px}
.welcome-note>span{
flex:0 0 auto;
display:grid;
place-items:center;
width:42px;
height:42px;
border-radius:13px;
background:rgba(139,92,246,.13);
border:1px solid rgba(139,92,246,.2);
font-weight:850;
color:#c8bbff}
.welcome-note p{
margin:1px 0 0;
color:#858895;
font-size:12px;
line-height:1.55}
.welcome-split{
display:grid;
grid-template-columns:1fr 390px;
align-items:center;
gap:80px;
padding:60px 0 130px}
.welcome-split-copy h2{
font-size:44px;
line-height:1.08;
letter-spacing:-.04em;
margin:16px 0}
.welcome-split-copy p{
color:#9295a3;
line-height:1.75;
max-width:620px;
margin:0 0 26px}
.profile-mock{
height:520px;
border-radius:32px;
position:relative;
overflow:hidden;
border:1px solid rgba(255,255,255,.12);
background:#181923;
box-shadow:var(--shadow);
transform:rotate(2deg)}
.profile-mock-photo{
position:absolute;
inset:0;
background:radial-gradient(circle at 50% 27%,rgba(255,255,255,.22) 0 17%,transparent 17.4%),linear-gradient(150deg,#d6a88d 0 31%,#674c5d 31% 51%,#282834 51%)}
.profile-mock-shade{
position:absolute;
inset:0;
background:linear-gradient(180deg,transparent 45%,rgba(7,7,11,.94))}
.profile-mock-copy{
position:absolute;
left:25px;
right:25px;
bottom:27px;
display:flex;
flex-direction:column;
gap:7px}
.profile-mock-copy b{
font-size:26px}
.profile-mock-copy span{
color:#aaaeba;
font-size:12px}
.profile-mock-copy div{
display:flex;
gap:7px;
margin-top:10px}
.profile-mock-copy i{
width:65px;
height:24px;
border-radius:999px;
background:rgba(255,255,255,.11);
border:1px solid rgba(255,255,255,.08)}

.auth-page{
min-height:100vh;
overflow-x:hidden}
.auth-page-shell{
min-height:100vh;
display:grid;
grid-template-columns:minmax(420px,1fr) minmax(520px,.82fr)}
.auth-page-brand{
position:relative;
overflow:hidden;
padding:52px clamp(42px,6vw,92px);
display:flex;
flex-direction:column;
justify-content:space-between;
border-right:1px solid var(--line);
background:radial-gradient(circle at 75% 26%,rgba(255,63,120,.15),transparent 30%),radial-gradient(circle at 27% 77%,rgba(139,92,246,.17),transparent 33%),linear-gradient(150deg,#111119,#09090d)}
.auth-page-brand:after{
content:"";
position:absolute;
inset:0;
background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
background-size:42px 42px;
mask-image:linear-gradient(to bottom,transparent,black 25%,black 75%,transparent);
pointer-events:none}
.auth-page-message{
position:relative;
z-index:2;
max-width:650px;
margin-block:auto}
.auth-page-message h1{
font-size:clamp(48px,6vw,78px);
line-height:.98;
letter-spacing:-.055em;
margin:24px 0}
.auth-page-message h1 em{
font-style:normal;
color:#989ba7;
font-weight:600}
.auth-page-message p{
font-size:16px;
line-height:1.7;
color:#9295a3;
max-width:570px}
.auth-page-orbit{
position:absolute;
right:-120px;
bottom:-135px;
width:410px;
height:410px;
border-radius:50%;
border:1px solid rgba(255,255,255,.07)}
.auth-page-orbit:before,.auth-page-orbit:after{
content:"";
position:absolute;
border-radius:50%;
border:1px solid rgba(255,255,255,.07);
inset:55px}
.auth-page-orbit:after{
inset:115px}
.auth-page-orbit span{
position:absolute;
width:12px;
height:12px;
border-radius:50%;
background:linear-gradient(135deg,var(--pink),var(--violet));
box-shadow:0 0 24px rgba(255,63,120,.4)}
.auth-page-orbit span:nth-child(1){
left:40px;
top:92px}
.auth-page-orbit span:nth-child(2){
right:55px;
top:170px}
.auth-page-orbit span:nth-child(3){
left:150px;
bottom:24px}
.auth-page-orbit b{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
font-size:34px;
color:#ff6d98}
.auth-page-form-wrap{
display:grid;
place-items:center;
padding:42px 26px;
background:#0b0b10}
.auth-page-form-card{
width:min(440px,100%)}
.auth-back{
display:inline-flex;
margin-bottom:52px;
color:#747784;
font-size:12px}
.auth-back:hover{
color:#fff}
.auth-form-kicker{
font-size:10px;
font-weight:850;
letter-spacing:.18em;
color:#9d88f7}
.auth-page-form-card h2{
font-size:38px;
letter-spacing:-.04em;
margin:12px 0 8px}
.auth-page-form-card>p{
color:#858895;
font-size:13px;
line-height:1.55;
margin:0 0 27px}
.auth-page-form-card form{
display:flex;
flex-direction:column;
gap:14px}
.auth-page-form-card label:not(.agreement-row){
display:flex;
flex-direction:column;
gap:7px}
.auth-page-form-card label>span{
font-size:11px;
color:#a0a3ae;
font-weight:650}
.auth-page-form-card input:not([type="checkbox"]){
width:100%;
height:50px;
border:1px solid var(--line);
background:#13141b;
color:#fff;
border-radius:13px;
padding:0 14px;
outline:none;
transition:.2s}
.auth-page-form-card input:focus{
border-color:rgba(139,92,246,.55);
box-shadow:0 0 0 3px rgba(139,92,246,.08)}
.agreement-row{
display:flex;
align-items:center;
gap:9px;
color:#8f929f;
font-size:11px;
margin:3px 0}
.agreement-row input{
accent-color:var(--violet)}
.auth-page-submit{
width:100%;
height:52px;
margin-top:4px}
.auth-switch{
text-align:center;
margin-top:23px;
color:#777b87;
font-size:12px}
.auth-switch a{
color:#c4b8ff;
font-weight:700}
.form-error{
min-height:17px;
color:#ff7c89;
font-size:11px}
.login-visual{
background:radial-gradient(circle at 71% 28%,rgba(139,92,246,.17),transparent 31%),radial-gradient(circle at 23% 76%,rgba(255,63,120,.12),transparent 33%),linear-gradient(150deg,#111119,#09090d)}

@media(max-width:1000px){
.welcome-split{
grid-template-columns:1fr;
gap:40px}
.profile-mock{
width:min(390px,100%);
justify-self:center}
.auth-page-shell{
grid-template-columns:1fr}
.auth-page-brand{
min-height:320px;
padding:34px 30px}
.auth-page-message{
margin:48px 0 18px}
.auth-page-message h1{
font-size:48px}
.auth-page-form-wrap{
padding:54px 22px}
.auth-page-orbit{
opacity:.55}
.auth-back{
margin-bottom:34px}
}

@media(max-width:600px){
.welcome-note{
max-width:100%}
.welcome-split{
padding:30px 0 80px}
.welcome-split-copy h2{
font-size:34px}
.profile-mock{
height:470px}
.auth-page-brand{
min-height:260px}
.auth-page-message h1{
font-size:39px}
.auth-page-message p{
font-size:13px}
.auth-page-form-wrap{
place-items:start center;
padding-top:38px}
.auth-page-form-card h2{
font-size:31px}
.auth-page-orbit{
width:280px;
height:280px;
right:-100px;
bottom:-120px}
}


.admin-self-pill{display:inline-flex;align-items:center;margin-left:6px;padding:2px 6px;border-radius:999px;background:rgba(255,255,255,.07);color:#aeb1bc;font-size:9px;letter-spacing:.08em;vertical-align:middle}
.admin-role-action{white-space:nowrap}.danger-lite{border-color:rgba(255,91,105,.25)!important;color:#ff9aa4!important;background:rgba(255,91,105,.06)!important}

/* VIPKA v11 */
.v11-discover-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-4px 0 14px}.v11-discover-toolbar #activeFiltersLabel{font-size:10px;color:#767a86;margin-left:auto}.v11-filter-panel{border:1px solid var(--line);background:#101117;border-radius:18px;padding:16px;margin-bottom:18px}.v11-filter-grid{display:grid;grid-template-columns:repeat(5,minmax(110px,1fr));gap:10px}.v11-filter-grid label:not(.v11-check){display:flex;flex-direction:column;gap:6px}.v11-filter-grid label>span{font-size:10px;color:#8f929e}.v11-filter-grid input,.v11-filter-grid select,.v11-verification-panel input,.v11-verification-panel select{height:42px;border:1px solid var(--line);background:#15161e;color:#fff;border-radius:11px;padding:0 10px;outline:none}.v11-check{display:flex;align-items:center;gap:8px;color:#aaa;font-size:11px}.v11-check input{accent-color:var(--violet)}.v11-filter-actions{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}.v11-filter-actions small{color:#6f7280}.v11-profile-head{display:flex;align-items:center;gap:8px}.v11-progress{padding:6px 9px;border-radius:999px;background:rgba(139,92,246,.12);color:#c5b7ff;font-size:10px;font-weight:800}.v11-email-verify{border-bottom:1px solid var(--line)}.v11-email-card{display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid rgba(255,193,74,.18);background:rgba(255,193,74,.055);padding:14px;border-radius:15px}.v11-email-card.verified{border-color:rgba(41,211,145,.18);background:rgba(41,211,145,.055)}.v11-email-card b{display:block;margin-bottom:3px}.v11-email-card small{color:#888b96}.v11-note{padding:11px 12px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid var(--line);color:#8d909b;font-size:11px}.v11-verification-panel{display:flex;flex-direction:column;gap:10px}.v11-verification-status{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;border:1px solid var(--line);border-radius:14px;background:#12131a}.verified-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 7px;border-radius:999px;background:rgba(57,197,255,.12);color:#7fd8ff;font-size:9px;font-weight:800}.v11-privacy-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.v11-privacy-grid label{display:flex;align-items:center;gap:9px;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02);font-size:11px;color:#a8abb5}.v11-privacy-grid input{accent-color:var(--violet)}.v11-tool-buttons{display:flex;gap:8px;flex-wrap:wrap}.v11-tool-buttons a.soft-btn{display:inline-flex;align-items:center}.v11-danger-zone{border-top:1px solid rgba(255,91,105,.13)}.v11-image-btn{display:grid!important;place-items:center}.v11-notification-fab{position:fixed;right:22px;top:20px;z-index:100;width:42px;height:42px;border-radius:14px;border:1px solid var(--line);background:rgba(17,18,25,.88);backdrop-filter:blur(14px);color:#fff;box-shadow:0 12px 34px rgba(0,0,0,.25)}.v11-notification-fab b{position:absolute;right:-5px;top:-5px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:var(--pink);font-size:9px;display:grid;place-items:center}.v11-drawer-backdrop{position:fixed;inset:0;z-index:400;background:rgba(0,0,0,.52);backdrop-filter:blur(5px)}.v11-drawer{position:absolute;right:0;top:0;bottom:0;width:min(420px,100%);background:#0f1016;border-left:1px solid var(--line);box-shadow:-25px 0 70px rgba(0,0,0,.35);padding:20px;overflow:auto}.v11-drawer header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.v11-drawer h3{margin:3px 0 0}.v11-notification{display:block;width:100%;text-align:left;border:1px solid var(--line);background:#13141b;color:#ddd;border-radius:14px;padding:13px;margin-bottom:8px}.v11-notification.unread{border-color:rgba(139,92,246,.25);background:rgba(139,92,246,.07)}.v11-notification b{display:block;margin-bottom:5px}.v11-notification p{margin:0;color:#9396a2;font-size:11px;line-height:1.45}.v11-notification time{display:block;color:#656975;font-size:9px;margin-top:8px}.v11-list{display:flex;flex-direction:column;gap:8px;max-height:500px;overflow:auto}.v11-list-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);padding:10px;border-radius:12px}.v11-list-row strong{display:block}.v11-list-row small{color:#777}.v11-profile-actions{position:absolute;right:20px;top:20px;z-index:12;display:flex;gap:6px}.v11-profile-actions button{width:36px;height:36px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(10,10,14,.66);color:#fff;backdrop-filter:blur(10px)}.v11-card-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.v11-card-meta span{padding:4px 7px;border-radius:999px;background:rgba(255,255,255,.08);font-size:9px;color:#ddd}.v11-chat-status{color:#747784;font-size:10px}.v11-read{margin-left:4px;color:#8f80e8}.v11-image-message img{max-width:260px;max-height:330px;border-radius:12px;object-fit:cover}.v11-admin-tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}.v11-admin-tab.active{background:rgba(139,92,246,.15);border-color:rgba(139,92,246,.3)}.v11-admin-section{border:1px solid var(--line);border-radius:18px;background:#101117;padding:16px}.v11-admin-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.v11-admin-item{border:1px solid var(--line);border-radius:14px;padding:13px;background:#13141b}.v11-admin-item p{color:#9295a2;font-size:11px;line-height:1.5;white-space:pre-wrap}.v11-admin-item small{color:#6f7280}.v11-promo-form{display:grid;grid-template-columns:1.2fr 1fr 100px 100px auto;gap:8px;margin-bottom:14px}.v11-promo-form input,.v11-promo-form select{height:40px;border:1px solid var(--line);border-radius:10px;background:#15161e;color:#fff;padding:0 10px}.v11-sub-extra{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}.v11-sub-card{border:1px solid var(--line);border-radius:18px;background:#101117;padding:17px}.v11-sub-card h3{margin:0 0 10px}.v11-sub-card p,.v11-sub-card small{color:#828591;font-size:11px;line-height:1.5}.v11-sub-card input{width:100%;height:42px;border:1px solid var(--line);border-radius:11px;background:#15161e;color:#fff;padding:0 10px;margin:8px 0}.v11-purchase-row{display:grid;grid-template-columns:1fr auto;gap:8px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:11px}.v11-typing{color:#b6a9ff!important}.v11-photo-order{display:flex;gap:4px;position:absolute;left:7px;top:7px;z-index:3}.v11-photo-order button{border:0;border-radius:8px;background:rgba(0,0,0,.6);color:#fff;width:26px;height:26px}.v11-freeze-banner{margin-bottom:12px;padding:13px 15px;border-radius:14px;background:rgba(255,193,74,.06);border:1px solid rgba(255,193,74,.18);display:flex;align-items:center;justify-content:space-between;gap:12px}.v11-dev-link{display:inline-flex;margin-top:8px;color:#c5b7ff;font-size:11px}
@media(max-width:900px){.v11-filter-grid{grid-template-columns:repeat(2,1fr)}.v11-admin-cards,.v11-sub-extra{grid-template-columns:1fr}.v11-promo-form{grid-template-columns:1fr 1fr}.v11-notification-fab{top:10px;right:70px}.v11-privacy-grid{grid-template-columns:1fr}}
@media(max-width:560px){.v11-filter-grid{grid-template-columns:1fr}.v11-profile-actions{right:12px;top:12px}.v11-promo-form{grid-template-columns:1fr}.v11-email-card{align-items:flex-start;flex-direction:column}.v11-tool-buttons>*{flex:1 1 140px;justify-content:center}}

/* VIPKA v11 photo crop */
.crop-backdrop{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:18px;background:rgba(2,2,6,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.crop-card{width:min(500px,100%);border:1px solid rgba(255,255,255,.12);border-radius:26px;background:#12131a;box-shadow:0 35px 110px rgba(0,0,0,.58);padding:20px}
.crop-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:14px}.crop-head>div{display:flex;flex-direction:column;gap:5px}.crop-head b{font-size:18px}.crop-head small{color:#858895;font-size:11px}.crop-close{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.04);color:#aaa;font-size:21px}
.crop-stage{width:min(340px,80vw);aspect-ratio:4/5;margin:0 auto;border-radius:20px;overflow:hidden;background:#08080b;border:1px solid rgba(255,255,255,.1);touch-action:none}.crop-stage canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none}.crop-stage canvas:active{cursor:grabbing}
.crop-zoom{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;margin:18px 0 14px;color:#9da0ab;font-size:12px}.crop-zoom input{width:100%;accent-color:var(--violet)}.crop-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.crop-actions button{width:100%}
@media(max-width:560px){.crop-card{padding:16px;border-radius:22px}.crop-stage{width:min(300px,76vw)}}


/* v12.2 audited: compact mobile navigation without a visible horizontal scrollbar */
@media(max-width:760px){
  .mobile-nav{display:flex;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;white-space:nowrap}
  .mobile-nav::-webkit-scrollbar{display:none;width:0;height:0}
  .mobile-nav-item{flex:0 0 70px;min-width:70px}
  .app-main{min-width:0}
}