*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Rajdhani',sans-serif;
    background:#0F0F0F;
    color:#fff;
    display: flex;
    height: 100vh;
    
}

 .main {
      padding-bottom: 100px;
      flex: 1;
      padding: 40px;
      overflow-y: auto;
      height: 100vh;
    }

.page-header{
    background:linear-gradient(145deg,#C93131,#a91f1f);
    border-radius:16px;
    padding:30px;
    margin-bottom:30px;
    box-shadow:0 0 30px rgba(201,49,49,.25);
}

.page-header h1{
    font-size:36px;
    font-weight:700;
}

.page-header p{
    margin-top:10px;
    color:#f0f0f0;
    font-size:18px;
}

.settings-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.65);
    backdrop-filter:blur(8px);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    visibility:hidden;
    transition:.25s;
    z-index:99999;
}

.settings-overlay.active{
    opacity:1;
    visibility:visible;
}

.settings-container{
    width:min(1200px,95vw);
    height:min(750px,92vh);
    background:#111;
    border:1px solid #333;
    border-radius:20px;
    overflow:hidden;
    position:relative;
    transform:scale(.96);
    transition:.25s;
}

.settings-overlay.active .settings-container{
    transform:scale(1);
}

.settings-container iframe{
    width:100%;
    height:100%;
    border:none;
    background:#111;
}

.settings-close{
    position:absolute;
    top:18px;
    right:18px;
    width:42px;
    height:42px;
    border:none;
    border-radius:50%;
    background:#1c1c1c;
    color:#fff;
    cursor:pointer;
    font-size:26px;
    z-index:2;
}

.settings-close:hover{
    background:#C93131;
}

    ::-webkit-scrollbar{
      width:3px;
    }

    ::-webkit-scrollbar-track{
     background:#111;
    }

    ::-webkit-scrollbar-thumb{
      background: #695d5d;
      border-radius:999px;
    }

.settings-page{
    display:flex;
    flex-direction:column;
    gap:40px;
}

.settings-section h2{
    font-size:28px;
    margin-bottom:5px;
}

.settings-section{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.setting-card{
    background:#1C1C1C;
    border:1px solid #333;
    border-radius:16px;
    padding:23px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap: 12px;
    transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.setting-card h3{
    font-size:22px;
    margin-bottom:6px;
}

.setting-card p{
    color:#aaa;
    max-width:500px;
}

.setting-card button {
    background:#111;
    color:#fff;
    border:1px solid #333;
    border-radius:10px;
    padding:11px 17px;
    font-family:inherit;
    transition:background .15s ease;

}

.setting-card select{
    background:#111;
    color:#fff;
    border:1px solid #333;
    border-radius:10px;
    padding:11px 17px;
    font-family:inherit;
    transition:background .15s ease;

}

.setting-card button:hover,
.setting-card select:hover{
    background:#161616;
}

@media(max-width:768px){
    .setting-card{
        flex-direction:column;
        align-items:flex-start;
    }
}

:focus {
  outline: none; 
  box-shadow: none; 
}

:focus-visible {
  outline: 3px solid #C93131; 
}