:root {
      --bg: #f1f4f8;
      --card: #ffffff;
      --text: #222;
      --gray: #666;
      --yellow: #f5c518;
      --border: #e0e4ea;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      font-family: 'Cairo', sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.8;
    }

    .container {
      max-width: 760px;
      margin: 0 auto;
      padding: 20px;
    }

    a { color: #9a6b00; }

    /* الهيدر */
    header {
      background: var(--card);
      border: 1px solid var(--border);
      border-top: 6px solid var(--yellow);
      border-radius: 10px;
      padding: 30px 24px;
      margin-top: 20px;
      text-align: center;
    }

    .avatar {
      width: 90px;
      height: 90px;
      border-radius: 50%;
      background: var(--yellow);
      color: #222;
      font-size: 42px;
      font-weight: 700;
      line-height: 90px;
      margin: 0 auto 10px;
    }

    header h1 { margin: 0; font-size: 30px; }
    header .title { color: var(--gray); margin: 4px 0 14px; }

    .links a {
      display: inline-block;
      margin: 4px;
      padding: 6px 16px;
      border: 1px solid var(--yellow);
      border-radius: 20px;
      text-decoration: none;
      color: var(--text);
      font-size: 14px;
    }
    .links a:hover { background: var(--yellow); }

    /* الأقسام */
    section {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 20px 24px;
      margin-top: 18px;
    }

    h2 {
      margin: 0 0 12px;
      font-size: 20px;
      border-right: 5px solid var(--yellow);
      padding-right: 10px;
    }

    p { margin: 0 0 10px; }

    /* الأرقام */
    .stats {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }
    .stat-box {
      flex: 1;
      min-width: 200px;
      background: var(--bg);
      border-radius: 8px;
      padding: 12px;
    }
    .stat-box h3 { margin: 0 0 6px; font-size: 16px; }
    .stat-box span { display: block; font-size: 14px; color: var(--gray); }
    .stat-box b { color: var(--text); font-size: 18px; }

    /* المهارات */
    .skills {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .skills li {
      display: flex;
      align-items: center;
      gap: 8px;
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 6px 12px;
      font-size: 15px;
    }
    .skills i { font-size: 24px; }

    ul.simple { padding-right: 20px; margin: 0; }
    ul.simple li { margin-bottom: 6px; }

    /* الإيميل طويل فلازم يلف على الموبايل */
    .email {
      display: block;
      margin-top: 6px;
      overflow-wrap: anywhere;
      word-break: break-all;
      font-size: 15px;
    }

    footer {
      text-align: center;
      color: var(--gray);
      font-size: 14px;
      padding: 24px 0;
    }

    /* Dark theme */
    body.dark-theme {
      --bg: #1e1e1e;
      --card: #2c2c2c;
      --text: #f1f1f1;
      --gray: #aaa;
      --yellow: #f58a18;
      --border: #444;
    }
    #theme-toggle {
      position:absolute;
      top: 20px;
      right: 20px;
      padding: 10px 16px;
      background: var(--yellow);
      color: var(--text);
      border: none;
      border-radius: 8px;
      cursor: pointer;
    }
  #translate {
      position:absolute;
      top: 20px;
      left: 20px;
      padding: 10px 16px;
      background: var(--yellow);
      color: var(--text);
      border: none;
      border-radius: 8px;
      cursor: pointer;
    }
    body, header, section, .stat-box, .skills li, button, a {
  transition: background-color .5s ease, color .5s ease,
              border-color .5s ease, box-shadow .5s ease;
}