:root{
      --main-bg: #f3f8ff;
      --main-txt: #123f7a;
      --main-accent: #1976d2;
      --card-bg: #fff;
    }
    [data-theme="dark"]{
      --main-bg: #121826;
      --main-txt: #eaf3ff;
      --main-accent: #42a5f5;
      --card-bg: #1b2433;
    }
    body{
      font-family: 'Cairo', sans-serif;
      margin: 0; padding: 0;
      background: var(--main-bg);
      color: var(--main-txt);
      min-height: 100vh;
      transition: background 0.3s, color 0.3s;
    }
    header{
      background: var(--card-bg);
      color: var(--main-accent);
      padding: 15px 0 7px 0;
      text-align: center;
      font-size: 25px;
      font-weight: 900;
      box-shadow: 0 2px 8px rgba(0,0,0,0.03);
      letter-spacing: 1px;
    }
    .settings-container{
      max-width: 430px;
      margin: 36px auto 0 auto;
      background: var(--card-bg);
      border-radius: 17px;
      box-shadow: 0 6px 24px rgba(25,118,210,0.12);
      padding: 30px 18px 20px 18px;
      display: flex;
      flex-direction: column;
      gap: 32px;
    }
    .settings-title{
      text-align: center;
      font-size: 22px;
      font-weight: bold;
      color: var(--main-accent);
      margin-bottom: 13px;
      letter-spacing: 0.5px;
    }
    .settings-group{
      margin-bottom: 20px;
    }
    .settings-label{
      font-weight: 700;
      margin-bottom: 6px;
      display: block;
      color: var(--main-accent);
    }
    .settings-input,
.settings-select{
      width: 100%;
      padding: 10px;
      margin-bottom: 10px;
      border-radius: 7px;
      border: 1.2px solid #c7ddf8;
      background: #f8fbff;
      color: var(--main-txt);
      font-size: 16px;
      box-sizing: border-box;
      transition: border 0.2s;
    }
    .settings-input:focus,
.settings-select:focus{
      outline: none;
      border: 1.2px solid var(--main-accent);
    }
    .settings-btn{
      padding: 10px 0;
      width: 100%;
      background: var(--main-accent);
      color: #fff;
      border: none;
      border-radius: 7px;
      font-size: 16px;
      font-weight: 700;
      cursor: pointer;
      margin-top: 5px;
      transition: background 0.18s;
      box-shadow: 0 2px 8px rgba(25,118,210,0.16);
    }
    .settings-btn:hover{
      background: #0d5cab;
    }
    .profile-pic-box{
      display: flex;
      align-items: center;
      gap: 13px;
      margin-bottom: 10px;
      flex-wrap: wrap;
    }
    .custom-file-upload{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      padding: 0 18px;
      border-radius: 9px;
      background: var(--main-accent);
      color: #fff;
      font-size: 15px;
      font-weight: 800;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(25,118,210,0.16);
      transition: background 0.18s, transform 0.18s;
      user-select: none;
    }
    .custom-file-upload:hover{
      background: #0d5cab;
      transform: translateY(-1px);
    }
    .file-name-label{
      font-size: 14px;
      font-weight: 700;
      color: var(--main-txt);
      max-width: 190px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .file-name-label:empty{
      display: none;
    }
    .hidden-file-input{
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    .profile-pic-preview{
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: #e4f0ff;
      border: 2px solid #9bc7f5;
      object-fit: cover;
      box-shadow: 0 1px 6px #1976d225;
    }
    .theme-switch{
      display: flex; align-items: center; gap: 10px; margin-top: 10px;
    }
    .theme-switch label{
      font-size: 17px; font-weight: 700; color: var(--main-accent);
      cursor: pointer;
    }
    .status-msg{
      color: #1976d2; font-size: 14px; text-align: center; margin-top: 4px; font-weight: 700;
    }
    .field-hint{
      display: block;
      margin: -4px 0 10px 0;
      color: #5f7fa8;
      font-size: 13px;
      font-weight: 600;
    }
    @media (max-width: 650px){
      .settings-container{ max-width: 98vw; padding: 18px 3vw; }
    }