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

    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: #f5f5f3;
      color: #1a1a18;
      min-height: 100vh;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding: 2rem 1rem;
      transition: background 0.2s, color 0.2s;
    }

    .wrap { width: 100%; max-width: 680px; }

    .lang-bar {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 1.25rem;
      direction: rtl;
      align-items: center;
      gap: 8px;
    }
    .lang-toggle {
      display: flex;
      border: 0.5px solid rgba(0,0,0,0.15);
      border-radius: 8px;
      overflow: hidden;
      background: #fff;
      transition: background 0.2s, border-color 0.2s;
    }
    .lang-toggle button {
      padding: 6px 16px;
      font-size: 13px;
      font-family: inherit;
      background: none;
      border: none;
      cursor: pointer;
      color: #888780;
      transition: all 0.15s;
    }
    .lang-toggle button.active {
      background: #1a1a18;
      color: #fff;
    }

    .info-btn, .theme-btn {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 0.5px solid rgba(0,0,0,0.15);
      background: #fff;
      color: #888780;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s;
      flex-shrink: 0;
    }
    .info-btn:hover, .theme-btn:hover { background: #1a1a18; color: #fff; border-color: #1a1a18; }

    h1 { font-size: 22px; font-weight: 500; margin-bottom: 4px; }
    .sub { font-size: 14px; color: #888780; margin-bottom: 1.5rem; }

    .card {
      background: #fff;
      border: 0.5px solid rgba(0,0,0,0.12);
      border-radius: 12px;
      padding: 1.25rem 1.5rem;
      margin-bottom: 1.25rem;
      transition: background 0.2s, border-color 0.2s;
    }

    .col-labels {
      display: grid;
      grid-template-columns: 1fr 90px 90px 90px 36px;
      gap: 8px;
      margin-bottom: 8px;
      padding: 0 2px;
    }
    .col-labels span { font-size: 12px; color: #888780; text-align: center; }
    .col-labels span:first-child { text-align: right; }
    html[lang="en"] .col-labels span:first-child { text-align: left; }

    .courses-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 1rem; }

    .course-row {
      display: grid;
      grid-template-columns: 1fr 90px 90px 90px 36px;
      gap: 8px;
      align-items: center;
    }

    input[type="text"],
    input[type="number"] {
      width: 100%;
      height: 36px;
      padding: 0 10px;
      font-size: 14px;
      font-family: inherit;
      border: 0.5px solid rgba(0,0,0,0.2);
      border-radius: 8px;
      background: #fff;
      color: #1a1a18;
      outline: none;
      transition: border-color 0.15s, background 0.2s, color 0.2s;
      text-align: center;
    }
    input[type="text"] { text-align: right; }
    html[lang="en"] input[type="text"] { text-align: left; }
    input[type="text"]:focus,
    input[type="number"]:focus { border-color: rgba(0,0,0,0.45); }

    .grade-display {
      height: 36px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 500;
      border: 0.5px solid rgba(0,0,0,0.1);
      transition: all 0.2s;
    }

    .remove-btn {
      width: 36px; height: 36px;
      background: none;
      border: none;
      cursor: pointer;
      color: #888780;
      font-size: 18px;
      border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.15s;
    }
    .remove-btn:hover { background: #f1efe8; color: #1a1a18; }

    .actions-row {
      display: flex;
      gap: 8px;
      margin-top: 4px;
    }

    .add-btn {
      flex: 1;
      padding: 9px;
      font-size: 14px;
      font-family: inherit;
      color: #888780;
      background: none;
      border: 0.5px dashed rgba(0,0,0,0.2);
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.15s;
    }
    .add-btn:hover { background: #f5f5f3; color: #1a1a18; }

    .reset-btn {
      flex: 1;
      padding: 9px;
      font-size: 14px;
      font-family: inherit;
      color: #A32D2D;
      background: none;
      border: 0.5px dashed rgba(163,45,45,0.35);
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.15s;
    }
    .reset-btn:hover { background: #FCEBEB; color: #A32D2D; }

    body.dark .reset-btn { border-color: rgba(220,90,90,0.35); color: #e08585; }
    body.dark .reset-btn:hover { background: rgba(163,45,45,0.15); color: #ff9a9a; }

    .result-area {
      background: #f1efe8;
      border-radius: 12px;
      padding: 1.25rem 1.5rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 1rem;
      margin-bottom: 1.25rem;
      transition: background 0.2s;
    }

    .gpa-num { font-size: 44px; font-weight: 500; line-height: 1; }
    .gpa-label { font-size: 13px; color: #888780; margin-top: 4px; }

    .stats { display: flex; gap: 1.5rem; }
    .stat { text-align: center; }
    .stat-val { font-size: 20px; font-weight: 500; }
    .stat-lbl { font-size: 12px; color: #888780; margin-top: 2px; }

    .grade-badge {
      display: inline-block;
      padding: 6px 20px;
      border-radius: 999px;
      font-size: 15px;
      font-weight: 500;
      background: #d3d1c7;
      color: #5f5e5a;
    }

    .scale-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }
    .scale-table th {
      font-size: 12px;
      font-weight: 500;
      color: #888780;
      padding: 6px 10px;
      text-align: center;
      border-bottom: 0.5px solid rgba(0,0,0,0.1);
    }
    .scale-table td {
      padding: 6px 10px;
      text-align: center;
      border-bottom: 0.5px solid rgba(0,0,0,0.06);
    }
    .scale-table tr:last-child td { border-bottom: none; }
    .scale-table .fail { color: #A32D2D; font-weight: 500; }

    .footer {
      text-align: center;
      padding: 1.5rem 0 0.5rem;
      font-size: 13px;
      color: #b4b2a9;
    }
    .footer span { color: #888780; font-weight: 500; }

    /* Modal */
    .modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.35);
      z-index: 100;
      align-items: center;
      justify-content: center;
      padding: 1rem;
    }
    .modal-overlay.open { display: flex; }
    .modal-box {
      background: #fff;
      border-radius: 14px;
      padding: 1.5rem;
      max-width: 400px;
      width: 100%;
      box-shadow: 0 8px 32px rgba(0,0,0,0.12);
      transition: background 0.2s;
    }
    .modal-icon {
      width: 44px; height: 44px;
      border-radius: 50%;
      background: #FAEEDA;
      color: #854F0B;
      font-size: 20px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1rem;
    }
    .modal-title { font-size: 16px; font-weight: 500; margin-bottom: 8px; color: #1a1a18; transition: color 0.2s; }
    .modal-text { font-size: 14px; color: #5f5e5a; line-height: 1.7; margin-bottom: 1.25rem; transition: color 0.2s; }
    .modal-close {
      width: 100%;
      padding: 9px;
      font-size: 14px;
      font-family: inherit;
      background: #1a1a18;
      color: #fff;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: opacity 0.15s;
    }
    .modal-close:hover { opacity: 0.85; }

    /* ===== DARK MODE ===== */
    body.dark { background: #1a1a18; color: #e8e6df; }
    body.dark .card { background: #242422; border-color: rgba(255,255,255,0.08); }
    body.dark .result-area { background: #2a2a27; }
    body.dark .lang-toggle { background: #242422; border-color: rgba(255,255,255,0.1); }
    body.dark .lang-toggle button { color: #a8a69f; }
    body.dark .lang-toggle button.active { background: #e8e6df; color: #1a1a18; }
    body.dark .info-btn,
    body.dark .theme-btn { background: #242422; border-color: rgba(255,255,255,0.1); color: #a8a69f; }
    body.dark .info-btn:hover,
    body.dark .theme-btn:hover { background: #e8e6df; color: #1a1a18; border-color: #e8e6df; }
    body.dark input[type="text"],
    body.dark input[type="number"] { background: #2e2e2b; border-color: rgba(255,255,255,0.12); color: #e8e6df; }
    body.dark input[type="text"]:focus,
    body.dark input[type="number"]:focus { border-color: rgba(255,255,255,0.35); }
    body.dark .add-btn { border-color: rgba(255,255,255,0.15); color: #a8a69f; }
    body.dark .add-btn:hover { background: #2e2e2b; color: #e8e6df; }
    body.dark .remove-btn:hover { background: #2e2e2b; }
    body.dark .grade-display { border-color: rgba(255,255,255,0.08); }
    body.dark .gpa-label,
    body.dark .stat-lbl,
    body.dark .col-labels span,
    body.dark .scale-table th,
    body.dark .footer { color: #6b6963; }
    body.dark .footer span { color: #a8a69f; }
    body.dark .scale-table td { border-color: rgba(255,255,255,0.05); }
    body.dark .scale-table th { border-color: rgba(255,255,255,0.08); }
    body.dark .modal-box { background: #242422; }
    body.dark .modal-title { color: #e8e6df; }
    body.dark .modal-text { color: #a8a69f; }
    body.dark .modal-close { background: #e8e6df; color: #1a1a18; }

    @media (max-width: 768px) {

  .course-row,
  .col-labels{
    grid-template-columns: 1fr 60px 60px 60px 28px;
    gap:6px;
  }

  .result-area{
    flex-direction:column;
    align-items:center;
    text-align:center;
  }

  .card{
    padding:16px;
  }

  body{
    padding:16px 10px;
  }

}

    .contact-links {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-top: 12px;
}

.contact-links a {
    color: #888780;
    font-size: 24px;
    transition: 0.2s;
    text-decoration: none;
}

.contact-links a:hover {
    color: #1a1a18;
    transform: translateY(-2px);
}

/* Dark Mode */
body.dark .contact-links a {
    color: #a8a69f;
}

body.dark .contact-links a:hover {
    color: #e8e6df;
}

  .download-btn-wrap {
  display: flex;
  justify-content: center;
  margin: 1.25rem 0 0.5rem;
}

.download-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  font-size: 14px;
  font-family: inherit;
  font-weight: 500;
  background: #1a1a18;
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s, transform 0.15s;
}
.download-btn:hover { opacity: 0.85; transform: translateY(-1px); }
.download-btn i { font-size: 18px; }
body.dark .download-btn { background: #e8e6df; color: #1a1a18; }


.result-actions{
    display:flex;
    align-items:center;
    gap:10px;
}

.gpa-info-btn{

    width:30px;
    height:30px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:none;
    border-radius:50%;

    background:#d9d5ca;

    color:#555;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:.2s;
}

.gpa-info-btn:hover{

    background:#1a1a18;

    color:white;

}

body.dark .gpa-info-btn{

    background:#4a4a46;

    color:white;

}

/* Animation عند إضافة مادة */

.new-course{

    animation:addCourse .35s ease;

}

@keyframes addCourse{

    0%{

        opacity:0;

        transform:translateY(-15px) scale(.95);

    }

    100%{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}

.removing{

    animation:removeCourse .35s ease forwards;

}

@keyframes removeCourse{

    from{

        opacity:1;
        transform:scale(1);

    }

    to{

        opacity:0;
        transform:scale(.95);

    }

}

/* ===========================
   Modal Animation
=========================== */

body.modal-open{
    overflow:hidden;
}

.modal-overlay{
    display:flex;
    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:
        opacity .25s ease,
        visibility .25s ease;

    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
}

.modal-overlay.show{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.modal-overlay.show{
    opacity:1;
    visibility:visible;
}

.modal-box{
    transform:translateY(20px) scale(.96);
    opacity:0;
    transition:all .28s ease;
}

.modal-overlay.show .modal-box{
    transform:translateY(0) scale(1);
    opacity:1;
}




/* ===========================
   Loader
=========================== */

#loader{

    position:fixed;
    inset:0;

    background:#f5f5f3;

    display:flex;
    align-items:center;
    justify-content:center;

    z-index:9999;

    transition:
        opacity .4s ease,
        visibility .4s ease;

}

body.dark #loader{

    background:#1a1a18;

}

#loader.hide{

    opacity:0;
    visibility:hidden;

}

.loader-content{

    text-align:center;

}

.loader-logo{

    width:70px;
    margin-bottom:15px;

    animation:fadeIn .5s ease;

}

.loader-title{

    font-size:28px;
    margin-bottom:12px;

    color:#1a1a18;

}

body.dark .loader-title{

    color:#e8e6df;

}

.loader-spinner{

    width:38px;
    height:38px;

    border:4px solid #ddd;
    border-top-color:#1a1a18;

    border-radius:50%;

    margin:0 auto 12px;

    animation:spin .8s linear infinite;

}

body.dark .loader-spinner{

    border-color:#444;
    border-top-color:#e8e6df;

}

.loader-text{

    color:#777;

    font-size:14px;

}

body.dark .loader-text{

    color:#aaa;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}

@keyframes fadeIn{

    from{

        opacity:0;
        transform:translateY(-10px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

.header-help{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:5px;

}

.tooltip{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:help;

    color:#888780;

    font-size:35px;

    transition:.2s;

}

.tooltip:hover{

    color:#1a1a18;

}

.tooltip-text{

    position:absolute;

    bottom:130%;

    left:50%;

    transform:translateX(-50%) translateY(-20px);

    background:#1a1a18;

    color:white;

    padding:8px 12px;

    border-radius:8px;

    font-size:12px;

    white-space:nowrap;

    opacity:0;

    visibility:hidden;

    transition:.2s;

    pointer-events:none;

    z-index:1000;

}

.tooltip:hover .tooltip-text{

    opacity:1;

    visibility:visible;

}

body.dark .tooltip{

    color:#a8a69f;

}

body.dark .tooltip:hover{

    color:#ffffff;

}

body.dark .tooltip-text{

    background:#f5f5f3;

    color:#1a1a18;

}

/* =========================
   Toast
========================= */

.toast{

    position:fixed;

    top:20px;

    left:50%;

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 18px;

    border-radius:12px;

    background:#1a1a18;

    color:white;

    font-size:14px;

    box-shadow:0 8px 20px rgba(0,0,0,.18);

    opacity:0;

    visibility:hidden;

    transform:translate(-50%, -40px);

    transition:.3s;

    z-index:9999;

}

.toast.show{

    opacity:1;

    visibility:visible;

    transform:translateX(-50%) translateY(0);

}

body.dark .toast{

    background:#f5f5f3;

    color:#1a1a18;

}

.toast i{

    font-size:18px;

}

.copy-result-btn{

    margin-top:18px;

    width:100%;

    height:46px;

    border:none;

    border-radius:12px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    cursor:pointer;

    font-size:15px;

    font-weight:600;

    background:#1a1a18;

    color:#fff;

    transition:.25s;

}

.copy-result-btn:hover{

    transform:translateY(-2px);

    opacity:.9;

}

body.dark .copy-result-btn{

    background:#f5f5f3;

    color:#1a1a18;

}

.copy-result-btn{

    width:220px;

    margin:18px auto 0;

}


/* ===========================
   Calculator Switch
=========================== */

.calc-switch{

    display:flex;

    margin:18px 0;

    background:#f1efe8;

    border:0.5px solid rgba(0,0,0,.12);

    border-radius:12px;

    overflow:hidden;

}

.calc-tab{

    flex:1;

    height:46px;

    border:none;

    background:transparent;

    color:#888780;

    font-size:15px;

    font-family:inherit;

    cursor:pointer;

    transition:.25s;

}

.calc-tab.active{

    background:#1a1a18;

    color:#fff;

    font-weight:600;

}

body.dark .calc-switch{

    background:#2a2a27;

    border-color:rgba(255,255,255,.08);

}

body.dark .calc-tab{

    color:#a8a69f;

}

body.dark .calc-tab.active{

    background:#e8e6df;

    color:#1a1a18;

}

/* ===========================
   CGPA Calculator
=========================== */

.cgpa-form{

    display:flex;

    flex-direction:column;

    gap:18px;

    margin-top:20px;

}

.cgpa-input{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.cgpa-input label{

    font-size:14px;

    color:#888780;

    font-weight:500;

}

.cgpa-input input{

    width:100%;

    height:42px;

    border:0.5px solid rgba(0,0,0,.15);

    border-radius:10px;

    padding:0 12px;

    background:#fff;

    color:#1a1a18;

    font-size:14px;

    font-family:inherit;

}

body.dark .cgpa-input input{

    background:#2e2e2b;

    color:#e8e6df;

    border-color:rgba(255,255,255,.12);

}

body.dark .cgpa-input label{

    color:#a8a69f;

}

.btn-tooltip{

    position:relative;

    flex:1;

}

.shortcut-tooltip{

    position:absolute;

    bottom:115%;

    left:50%;

    transform:translateX(-50%) translateY(8px);

    background:#1a1a18;

    color:#fff;

    padding:6px 10px;

    border-radius:8px;

    font-size:12px;

    white-space:nowrap;

    opacity:0;

    visibility:hidden;

    transition:.2s;

    pointer-events:none;

    z-index:1000;

}

.btn-tooltip:hover .shortcut-tooltip{

    opacity:1;

    visibility:visible;

    transform:translateX(-50%) translateY(0);

}

body.dark .shortcut-tooltip{

    background:#f5f5f3;

    color:#1a1a18;

}

.semester-box{

    margin-bottom:18px;

}

.semester-box label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

}

.semester-box input{

    width:100%;

    height:48px;

    border-radius:12px;

    padding:0 16px;

}

.scroll-top-btn{

    position:fixed;

    bottom:25px;

    right:25px;

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:#2a2a27;

    color:#fff;

    font-size:22px;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:0 10px 25px rgba(0,0,0,.25);

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:
    opacity .3s,
    transform .3s,
    background .3s;

    z-index:9999;

}

.scroll-top-btn.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.scroll-top-btn:hover{

    background:#2a2a27;

    transform:translateY(-3px);

}

body.dark .scroll-top-btn{

    background:#81807c;

}

html,
body{
    overflow-x:hidden;
}

.site-version{
    margin-top:8px;
    font-size:12px;
    color:#b4b2a9;
}

body.dark .site-version{
    color:#6b6963;
}