:root{--backdrop-blur:blur(3px);--backdrop-filter:blur(3px);--shadow-base:0 4px 15px rgba(0,0,0,0.2);--border-radius-sm:5px;--border-radius-md:8px;--border-radius-lg:12px;--transition-base:all 0.3s cubic-bezier(0.25,0.46,0.45,0.94);--backdrop-bg:rgba(255,255,255,0.05);--text-shadow:2px 2px 4px #000;--orange:#ff6b00}
*{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
input,textarea,[contenteditable="true"]{-webkit-user-select:auto;user-select:auto;-webkit-touch-callout:default}
body{touch-action:manipulation}
.h-vh-100{height:100dvh;overflow:hidden;scrollbar-width:none;-ms-overflow-style:none}
#index-section{display:flex;flex-direction:column;justify-content:space-between;scrollbar-width:none;-ms-overflow-style:none}
#index-section::-webkit-scrollbar,#settings_form::-webkit-scrollbar{display:none}
.header-wrapper{flex:1;overflow:hidden}
.profile-container,.settings-container{background:url(/images/giftcode/giftcode.jpg) center center / cover fixed no-repeat;color:#fff;height:100%;display:flex;flex-direction:column;gap:10px;padding:10px}
.settings-container{align-items:center}
#settings_form{flex:1;overflow-y:auto;display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}
.input-user{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}
.input-group{width:100%;max-width:420px}
.input-group-text{width:45px;display:flex;align-items:center;justify-content:center;color:#ddd;border-radius:var(--border-radius-sm) 0 0 var(--border-radius-sm);background:var(--backdrop-bg);box-shadow:var(--shadow-base),inset 0 0 12px rgba(255,255,255,0.25);backdrop-filter:var(--backdrop-filter);border:1px solid rgba(255,255,255,0.5)}
.form-control,.form-select{background:rgba(30,30,60,0.7);border:1px solid rgba(255,255,255,0.25);color:white;border-radius:0 var(--border-radius-sm) var(--border-radius-sm) 0}
.form-control:focus,.form-select:focus{background:rgba(40,40,80,0.9);border-color:var(--orange);box-shadow:0 0 0 0.2rem rgba(255,107,0,0.25);color:white}
.info-user{display:flex;flex-direction:column;align-items:center;gap:5px}
.avatar-user{position:relative}
.info-user img,.avatar-user img{width:78px;aspect-ratio:1;object-fit:cover;border-radius:50%;background:var(--backdrop-bg);box-shadow:var(--shadow-base),inset 0 0 12px rgba(255,255,255,0.25);backdrop-filter:var(--backdrop-filter);border:1px solid rgba(255,255,255,0.5)}
.change_avatar_edit{position:absolute;bottom:4px;right:4px;background:rgba(0,0,0,0.5);color:var(--orange);width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;border:1px solid #fff;transition:var(--transition-base)}
.change_avatar_edit:hover{transform:scale(1.1)}
.info-user h1{font-size:1.5rem;margin:0;text-shadow:var(--text-shadow)}
.info-user span{font-size:0.9rem;color:#ccc;opacity:0.9}
.profile-info{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.profile-info a{display:flex;flex-direction:column;justify-content:center;align-items:center;color:white;text-decoration:none;width:70px;aspect-ratio:1 / 1;transition:var(--transition-base);position:relative;border-radius:var(--border-radius-sm);overflow:hidden;background:var(--backdrop-bg);box-shadow:var(--shadow-base);backdrop-filter:var(--backdrop-filter);border:1px solid rgba(255,255,255,0.25)}
.profile-info a:hover{background:rgba(255,255,255,0.15);transform:translateY(-2px)}
.profile-info i{font-size:1.4rem}
.profile-info span{font-size:0.75rem}
.profile-manage{display:flex;flex-direction:column;gap:10px;flex:1;min-height:0}
.profile-tab{display:flex;background:rgba(0,0,0,0.3);border-radius:5px 5px 0 0;overflow:hidden}
.profile-tab div{flex:1;padding:5px;text-align:center;cursor:pointer;color:#ddd;transition:var(--transition-base)}
.profile-tab div.active{color:var(--orange);background:rgba(255,107,0,0.15);font-weight:700;border-bottom:3px solid var(--orange)}
.profile-journey{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(6,1fr);gap:5px;align-content:start;scrollbar-width:none}
.profile-journey::-webkit-scrollbar{display:none}
.profile-journey-item{position:relative;border-radius:var(--border-radius-sm);overflow:hidden;background:var(--backdrop-bg);box-shadow:var(--shadow-base);backdrop-filter:var(--backdrop-filter);border:1px solid rgba(255,255,255,0.25)}
.profile-journey-item img{width:100%;aspect-ratio:3 / 4;object-fit:cover;display:block}
.position-absolute{bottom:0;right:0;cursor:pointer;background:var(--swal2-backdrop);padding:5px;border-radius:5px 0}
.profile-popup{display:none;position:absolute;inset:0;background:rgba(0,0,0,0.75);border-radius:inherit;z-index:1}
.profile-popup-item{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;color:white;font-size:12px}
.profile-popup-item div{display:flex;align-items:center;gap:5px;width:90%;background:#fff;color:#000;padding:5px;border-radius:5px;cursor:pointer;transition:var(--transition-base)}
.profile-popup-item div:hover{background:rgba(255,255,255,0.15)}
.custom-divider{width:100%;max-width:360px;display:flex;align-items:center;gap:12px;margin:16px 0}
.custom-divider hr{flex:1;border-color:rgba(255,255,255,0.3)}
.alert-bank{font-size:0.8rem;color:#ffcc80;text-align:center;margin-bottom:8px}
.change_password_form{display:flex;flex-direction:column;gap:10px}
.swal2-popup{border-radius:var(--border-radius-sm)!important;background:radial-gradient(circle at center,#7800ffa3,#000)!important;backdrop-filter:var(--backdrop-blur)!important;border:1px solid rgba(255,255,255,0.6)!important;color:#e5d7ff!important}
.swal2-styled.swal2-confirm,.swal2-styled.swal2-cancel{background:url(/images/arena/battle/vs-button.webp) center / 100% 100% no-repeat!important;padding:10px 24px!important;font-weight:900!important;text-transform:uppercase!important;text-shadow:var(--text-shadow)!important;color:var(--orange)!important;filter:drop-shadow(0 0 12px #ff6b0066)!important}
.swal2-styled.swal2-cancel{filter:grayscale(0.7) drop-shadow(0 0 8px #666)!important}
.swal2-backdrop-show{background:rgba(0,0,0,0.82)!important}
@media (min-width:576px){.info-user img,.avatar-user img{width:96px}.profile-journey{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px}}
@media (max-width:767px){.profile-journey{grid-template-columns:repeat(3,1fr)}}