:root{
      --teal:#0b8069;
      --beige:#f6eede;
      --panel:#efe7db;
      --muted:#7a7a7a;
      --accent:#f6b219;
      --card-shadow: 0 6px 18px rgba(16,24,40,0.08);
      --radius:10px;
      --glass: rgba(255,255,255,0.6);
    }

    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      color:#222;
      overflow-x: hidden;
      max-width: 100vw;
    }

  

    /* Page layout */
    .container{
      max-width:1150px;margin:26px auto;display:flex;gap:22px;padding:0 18px; 
      width: 100%;
    }

    /* Sidebar */
    .sidebar{
      padding:18px;
      width: 220px;
      flex-shrink: 0;
    }
    .profile-mini{display:flex;align-items:center;gap:12px}
    .avatar-sm{width:58px;height:58px;border-radius:8px;background:linear-gradient(180deg,#cfeffc,#e8f7ff);display:flex;align-items:center;justify-content:center}
    .username{font-weight:700}
    .side-menu{margin-top:16px}
    .side-menu h4{margin:8px 0;color:var(--muted);font-size:13px}
    .side-menu a{display:block;color:#333;text-decoration:none;padding:6px 6px;border-radius:6px;margin:4px 0}
    .side-menu a.active{color:#EDB80A;font-weight:600}

    /* Main panel */
    .main-panel{
      flex-grow: 1;
      min-width: 0;
      background-color: #e7ddd1;
      padding:24px;
      border-radius:8px;
      box-shadow:var(--card-shadow);
    }
    .panel-title{font-size:18px;font-weight:700;margin-bottom:8px}
    .panel-sub{color:var(--muted);font-size:13px;margin-bottom:18px}

    .profile-grid{display:grid;grid-template-columns:1fr 220px;gap:18px}
    .form{padding:18px;border-radius:8px}
    .field{display:flex;align-items:center;gap:14px;padding:8px 0;border-bottom:1px dashed rgba(0,0,0,0.03)}
    .field label{width:140px;font-size:14px;color:black}
    .field .value{flex:1}
    input[type="text"], input[type="email"], input[type="tel"]{width:100%;padding:8px 10px;border-radius:6px;border:1px solid rgba(0,0,0,0.08);background:transparent}
    .small{font-size:13px;color:var(--muted)}

    .avatar-big {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 60px;
  padding: 18px;
  border-radius: 8px;
}
    .avatar-circle{width:140px;height:140px;border-radius:50%;background:linear-gradient(180deg,#cfeffc,#e8f7ff);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(16,24,40,0.06)}
   .save-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--card-shadow);
  transition: background 0.25s ease;
}

.save-btn:hover {
  background: #dca215;
}

    /* Toggle */
    .toggle{display:inline-flex;align-items:center;gap:10px}
    .switch{width:44px;height:26px;border-radius:20px;background:#ddd;position:relative;cursor:pointer}
    .switch .knob{width:20px;height:20px;border-radius:50%;background:#fff;position:absolute;top:3px;left:3px;box-shadow:0 2px 6px rgba(0,0,0,0.12);transition:all .18s}
    .switch.on{background:linear-gradient(90deg,#0b8069,#0c8f75)}
    .switch.on .knob{left:21px}

    /* Footer note */
    .help{margin-top:14px;color:var(--muted);font-size:13px}

    /* Responsive */
    @media (max-width:880px){
      .container{flex-direction:column;max-width:100%;}
      .sidebar{width:100%;}
      .profile-grid{grid-template-columns:1fr;}
      .avatar-big{order:2; gap: 20px;}
    }

    @media (max-width:600px){
      .field { flex-direction: column; align-items: flex-start; gap: 4px; }
      .field label { width: 100%; margin-bottom: 5px; }
      .sidebar { display: flex; flex-direction: column; align-items: center; text-align: center; }
      .profile-mini { flex-direction: column; }
    }

    /* Dark mode styles overrides using global variables */
    body.dark{background:var(--dm-bg);color:var(--dm-text);}
    body.dark .sidebar{background:transparent;color:var(--dm-text);}
    body.dark .main-panel{background:var(--dm-surface); border-color: var(--dm-border);}
    body.dark .panel-title{color:var(--dm-text);}
    body.dark .panel-sub{color:var(--dm-muted);}
    body.dark input{background:var(--dm-bg);color:var(--dm-text);border:1px solid var(--dm-border);}
    body.dark .field label{color:var(--dm-text);}
    body.dark .small{color:var(--dm-muted);}
    body.dark .side-menu a{color:var(--dm-muted);}
    body.dark .side-menu a.active{color:var(--dm-accent);}