.login-page{

display:flex;

justify-content:center;

align-items:center;

min-height:100vh;

padding:30px;

}

.login-card{

width:100%;

max-width:420px;

background:#FFF;

border-radius:18px;

padding:35px;

box-shadow:0 15px 50px rgba(0,0,0,.08);

}

.profile-card{

max-width:520px;

}

.logo{

font-size:34px;

font-weight:bold;

color:#E84E5E;

margin-bottom:25px;

text-align:center;

}

.login-card h1{

font-size:30px;

margin-bottom:10px;

}

.login-card p{

margin-bottom:30px;

color:#666;

}

.field{

margin-bottom:18px;

}

.field input,
.field select,
.field textarea{

width:100%;

padding:15px;

border:1px solid #DDD;

border-radius:12px;

}

.field input,
.field select{

height:52px;

}

.field textarea{

min-height:120px;

resize:vertical;

}

.field.has-error input,
.field.has-error select,
.field.has-error textarea{

border-color:#E84E5E;

background:#FFF5F6;

}

.field-error{

display:block;

margin-top:6px;

font-size:12px;

line-height:1.35;

color:#D63B4D;

}

.success-message{

color:#207A45;

}

button{

width:100%;

height:52px;

background:#E84E5E;

border:none;

border-radius:12px;

color:white;

font-size:16px;

transition:.3s;

}

button:hover{

background:#D63B4D;

}

.links{

margin-top:25px;

display:flex;

justify-content:space-between;

font-size:14px;

}

.profile-page{

min-height:100vh;

background:#F7F8FA;

padding-bottom:32px;
padding-bottom:174px;

}

.profile-topbar{

position:sticky;

top:0;

z-index:10;

display:grid;

grid-template-columns:64px 1fr 64px;

align-items:center;

gap:8px;

min-height:56px;

padding:10px 14px;

background:#FFFFFF;

border-bottom:1px solid #E3E3E3;

}

.profile-topbar h1{

font-size:15px;

font-weight:800;

text-align:center;

}

.profile-back,
.profile-gear{

color:#516274;

font-weight:700;

font-size:14px;

}

.profile-gear{

text-align:right;

}

.profile-form{

width:100%;

max-width:720px;

margin:0 auto;

padding:14px;

}

.profile-summary,
.profile-section,
.account-panel,
.profile-save,
.profile-footer{

max-width:720px;

margin:0 auto 14px;

}

.profile-summary,
.profile-section,
.account-panel{

background:#FFFFFF;

border:1px solid #E6E8EC;

border-radius:8px;

padding:16px;

}

.profile-summary{

display:grid;

grid-template-columns:96px 1fr auto;

align-items:center;

gap:12px;

}

.profile-avatar,
.avatar-thumb{

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:#E84E5E;

color:#FFFFFF;

font-weight:800;

}

.profile-avatar{

width:96px;

height:96px;

}

.avatar-thumb{

width:111px;

height:111px;

flex:0 0 111px;

}

.profile-avatar img,
.avatar-thumb img{

width:100%;

height:100%;

object-fit:cover;

border-radius:50%;

}

.profile-summary-info strong{

display:block;

font-size:19px;

}

.profile-genders{

font-size:20px;

}

.gender-male,
.male-block h3{

color:#2F80ED;

}

.gender-female,
.female-block h3{

color:#E84E8A;

}

.profile-public-id{

display:flex;

align-items:center;

gap:5px;

font-weight:800;

color:#4E5968;

}

.crown{

color:#D6A11D;

font-size:20px;

}

.profile-section h2{

font-size:19px;

margin-bottom:14px;

}

.profile-section h3{

font-size:14px;

margin:16px 0 10px;

}

.readonly-line{

display:flex;

justify-content:space-between;

gap:12px;

padding:10px 0;

border-bottom:1px solid #EEF0F3;

}

.vertical-actions{

display:grid;

gap:10px;

margin:16px 0;

}

.btn{

width:100%;

min-height:46px;

border:0;

border-radius:8px;

padding:12px 16px;

font-size:15px;

font-weight:800;

color:#FFFFFF;

}

.btn.secondary,
.btn.blue{

background:#2F80ED;

}

.btn.light{

background:#EEF0F3;

color:#596575;

}

.btn.danger-dark{

background:#8E1C2A;

}

.btn.danger{

background:#E84E5E;

}

.btn.orange{

background:#F28C28;

}

.btn.muted-blue{

background:#5F748B;

}

.btn.rounded{

border-radius:999px;

}

.info-text{

font-size:14px;

line-height:1.55;

color:#626D7C;

}

.info-text.strong{

font-weight:700;

color:#3E4855;

}

.info-text.highlight{

padding:12px;

background:#F1F5FA;

border-left:4px solid #5F748B;

border-radius:6px;

}

.warning-text{

font-size:13px;

line-height:1.45;

color:#D63B4D;

}

.upload-box{

position:relative;

display:flex;

align-items:center;

justify-content:center;

margin-bottom:14px;

background:#3D4148;

border:2px dashed #FFFFFF;

border-radius:8px;

color:#FFFFFF;

text-align:center;

font-size:14px;

overflow:hidden;

}

.upload-box input{

position:absolute;

inset:0;

opacity:0;

cursor:pointer;

}

.upload-box img{

position:absolute;

inset:0;

width:100%;

height:100%;

object-fit:cover;

}

.hidden-file{

display:none;

}

.upload-box small{

position:absolute;

left:10px;

right:10px;

bottom:8px;

padding:5px 8px;

border-radius:6px;

background:rgba(0,0,0,.55);

font-size:12px;

}

.upload-progress{

display:none;

position:absolute;

left:10px;

right:10px;

bottom:38px;

width:calc(100% - 20px);

height:8px;

}

.avatar-progress{

position:static;

width:100%;

margin-top:10px;

}

.upload-progress.is-visible{

display:block;

}

.avatar-upload{

aspect-ratio:1 / 1;

}

.poster-upload{

aspect-ratio:16 / 7;

}

.avatar-current{

display:flex;

gap:14px;

align-items:flex-start;

padding:12px;

background:#FAFBFC;

border:1px solid #EEF0F3;

border-radius:8px;

}

.form-grid{

display:grid;

grid-template-columns:1fr;

gap:12px;

}

.field span{

display:block;

margin-bottom:7px;

font-size:13px;

font-weight:800;

color:#4C5664;

}

.field input[readonly]{

background:#F1F3F6;

color:#596575;

}

.check-list{

display:grid;

gap:10px;

}

.check-list label{

display:flex;

align-items:center;

gap:10px;

min-height:36px;

font-size:15px;

}

.person-block{

padding:12px;

border:1px solid #EEF0F3;

border-radius:8px;

margin-top:12px;

}

.is-disabled{

opacity:.45;

}

.preference-list{

display:grid;

gap:10px;

}

.preference-list label{

display:grid;

grid-template-columns:1fr 132px;

align-items:center;

gap:10px;

font-size:14px;

}

.preference-list select{

height:42px;

border:1px solid #DDE2E8;

border-radius:8px;

padding:8px;

font-weight:800;

}

.status-green{

color:#207A45;

}

.status-red{

color:#D63B4D;

}

.account-panel{

background:#FAFBFC;

}

.danger-panel{

border-color:#F3C9CF;

}

.account-panel p{

font-size:14px;

line-height:1.55;

color:#4C5664;

margin-bottom:12px;

}

.profile-save{

display:grid;

gap:10px;

padding:8px 14px 16px;

}

.profile-save.fixed-save{

position:fixed;

left:0;

right:0;

bottom:82px;

z-index:20;

max-width:none;

grid-template-columns:1fr 1fr;

padding:10px 14px;

margin:0;

background:rgba(255,255,255,.96);

border-top:1px solid #E3E3E3;

box-shadow:0 -8px 24px rgba(0,0,0,.08);

}

.profile-footer{

padding:14px;

text-align:center;

font-size:12px;

line-height:1.6;

color:#6D7785;

}

@media (min-width:640px){

.form-grid{

grid-template-columns:1fr 1fr;

}

.profile-save{

grid-template-columns:1fr 1fr;

}

}