/* Custom Scrollbar */
    ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    ::-webkit-scrollbar-track {
      background: transparent;
    }
    ::-webkit-scrollbar-thumb {
      background: rgba(156, 163, 175, 0.4);
      border-radius: 9999px;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: rgba(107, 114, 128, 0.7);
    }

    /* Inline SVG icons (no external icon font needed) */
    p > svg.ic { display: inline-block; }
    .ic { width: 1em; height: 1em; flex-shrink: 0; vertical-align: -0.125em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

    /* Strong keyword emphasis */
    /* One colour for ALL keywords (change these two values to restyle them everywhere) */
    :root { --kw-color: currentColor; }  /* light mode: same colour as the surrounding text (bold only) */
    .dark { --kw-color: currentColor; }
    .kw { font-weight: 800; color: var(--kw-color); }

    /* ===== Arabic / RTL adjustments ===== */
    [dir="rtl"] body, [dir="rtl"] .font-sans { font-family: 'Noto Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif; }
    [dir="rtl"] * { letter-spacing: 0 !important; }           /* keeps Arabic letters joined */
    [dir="rtl"] .italic { font-style: normal; }
    /* Tailwind space-x-* gaps: flip so the gap stays between items */
    [dir="rtl"] [class*="space-x-"] > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 1; }
    /* Search field: icon and padding on the right */
    [dir="rtl"] .left-3 { left: auto; right: 0.75rem; }
    [dir="rtl"] #skillSearchInput, [dir="rtl"] #mobileSkillSearchInput { padding-left: 0.75rem; padding-right: 2.25rem; }
    /* Experience timeline: line, dots and text on the right */
    [dir="rtl"] .border-l-2 { border-left-width: 0; border-right-width: 2px; margin-left: 0; margin-right: 6px; }
    [dir="rtl"] .pl-7 { padding-left: 0; padding-right: 1.75rem; margin-left: 0; margin-right: -8px; }
    [dir="rtl"] .left-\[1px\] { left: auto; right: 1px; }
    [dir="rtl"] .mr-1 { margin-right: 0; margin-left: 0.25rem; }
    /* Bullet chevrons point the other way */
    [dir="rtl"] li > svg { transform: scaleX(-1); }
    @media (min-width: 640px) { [dir="rtl"] .sm\:text-left { text-align: right; } }


    /* ===== Animated light effect around the personal-info box ===== */
    @property --glow-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
    .glow-card { position: relative; isolation: isolate; animation: glowPulse 3.5s ease-in-out infinite; }
    /* light running around the border */
    .glow-card::before {
      content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; padding: 3px;
      background: conic-gradient(from var(--glow-angle), transparent 0deg, transparent 230deg,
        #38bdf8 280deg, #ffffff 320deg, #a855f7 345deg, transparent 360deg);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
              mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
      pointer-events: none; animation: glowSpin 5s linear infinite;
    }
    /* soft light band sweeping across the box */
    .glow-card::after {
      content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; z-index: 1;
      background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,0.09) 50%, transparent 100%);
      transform: translateX(-140%) skewX(-18deg); pointer-events: none;
      animation: shineSweep 6s ease-in-out infinite;
    }
    html:not(.dark) .glow-card::after { background: linear-gradient(105deg, transparent 0%, rgba(56,189,248,0.14) 50%, transparent 100%); }
    @keyframes glowSpin { to { --glow-angle: 360deg; } }
    @keyframes shineSweep {
      0% { transform: translateX(-140%) skewX(-18deg); }
      45%, 100% { transform: translateX(380%) skewX(-18deg); }
    }
    @keyframes glowPulse {
      0%, 100% { box-shadow: 0 0 10px rgba(56,189,248,0.15); }
      50%      { box-shadow: 0 0 30px rgba(56,189,248,0.42); }
    }

    /* ===== Neon frames for skill boxes ===== */
    @property --hv { syntax: '<number>'; initial-value: 0; inherits: false; }   /* hover amount, eased in/out */
    @property --ni { syntax: '<number>'; initial-value: 0.25; inherits: false; } /* pulse intensity */
    .neon {
      --neon: 56,189,248; --k: 1; --hv: 0;
      border: 1px solid rgba(100,116,139,0.35);
      transition: --hv .7s ease-in-out, transform .5s ease;
      animation: neonWave 2.6s ease-in-out infinite;   /* always cycling, but only visible while --hv > 0 */
    }
    html:not(.dark) .neon { --k: 0.6; }
    .neon.neon {
      box-shadow:
        0 0 0 1px rgba(var(--neon), calc(var(--hv) * var(--ni) * 0.9 * var(--k))),
        0 0 calc(var(--hv) * (6px + 8px * var(--ni))) rgba(var(--neon), calc(var(--hv) * var(--ni) * var(--k))),
        0 0 calc(var(--hv) * (14px + 22px * var(--ni))) rgba(var(--neon), calc(var(--hv) * var(--ni) * 0.55 * var(--k))),
        inset 0 0 calc(var(--hv) * 14px) rgba(var(--neon), calc(var(--hv) * var(--ni) * 0.18 * var(--k)));
    }
    .neon:hover { --hv: 1; transform: translateY(-2px); }
    @keyframes neonWave { 0%, 100% { --ni: 0.25; } 50% { --ni: 1; } }
    .neon-sky { --neon: 56,189,248; }     .neon-blue { --neon: 59,130,246; }
    .neon-emerald { --neon: 16,185,129; } .neon-teal { --neon: 20,184,166; }
    .neon-indigo { --neon: 129,140,248; } .neon-purple { --neon: 168,85,247; }
    .neon-pink { --neon: 236,72,153; }    .neon-rose { --neon: 251,63,94; }
    .neon-amber { --neon: 245,158,11; }


    /* ===== Neon nav buttons (profile card) ===== */
    .neon-btn { --hv: .55; background: #0b1220; color: #fff; border: 1px solid rgba(var(--neon), .6); }
    .neon-btn:hover { background: #0f172a; }
    html:not(.dark) .neon-btn { --k: .95; }
    .neon-btn .ic { color: #fff; filter: drop-shadow(0 0 3px rgba(var(--neon), .9)); }
    .neon-red { --neon: 239,68,68; }      .neon-yellow { --neon: 250,204,21; }
    .neon-green { --neon: 34,197,94; }    .neon-orange { --neon: 249,115,22; }
    .neon-crimson { --neon: 251,100,120; }


    /* ===== Action buttons — same style as access.html (.btn) ===== */
    .abtn {
      --a: #0ea5e9;
      display: inline-flex; align-items: center; gap: .375rem;
      padding: .4rem .875rem; border-radius: .5rem;
      font-size: .75rem; font-weight: 600; cursor: pointer;
      background: #f1f5f9; border: 1px solid #e2e8f0; color: #1e293b;
      transition: border-color .35s ease, box-shadow .35s ease, color .35s ease;
    }
    .dark .abtn { background: #1e293b; border-color: #1e293b; color: #f1f5f9; }
    .abtn.pri { border-color: var(--a); }
    .abtn:hover, .abtn:focus-visible {
      border-color: var(--a); color: var(--a); outline: 0;
      box-shadow: 0 0 0 1px var(--a), 0 0 8px 1px var(--a), 0 0 18px 2px color-mix(in srgb, var(--a) 55%, transparent);
    }
    .abtn .ic { color: inherit; filter: none; }

    @media (prefers-reduced-motion: reduce) {
      .glow-card, .glow-card::before, .glow-card::after, .neon { animation: none; --ni: 0.7; }
    }
    @media print {
      .glow-card::before, .glow-card::after { display: none; }
      .glow-card, .neon, .neon:hover { animation: none; transition: none; box-shadow: none !important; }
    }

    /* Modern Print Styles */
    @media print {
      body {
        background-color: #ffffff !important;
        color: #111827 !important;
      }
      .no-print {
        display: none !important;
      }
      .print-shadow-none {
        box-shadow: none !important;
        border: 1px solid #e5e7eb !important;
      }
      .page-break-inside-avoid {
        break-inside: avoid;
      }
    }
  

.cv-cover-fig{margin:.5rem 0 1.5rem}
.cv-cover{position:relative;display:block;width:100%;aspect-ratio:3/1;border-radius:.75rem;overflow:hidden;border:1.5px dashed rgba(14,165,233,.5);background:rgba(14,165,233,.07);cursor:default;padding:0;color:#64748b}
.cv-cover.has{border-style:solid;border-width:3px;border-color:#38bdf8;cursor:default}html.dark .cv-cover.has{border-color:#1e3a8a}
.cv-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cv-cover-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem}
.cv-cover-ph .ic{width:26px;height:26px;opacity:.7}.cv-cover-ph small{font-size:.72rem}
.cv-cover.has .cv-cover-ph{display:none}
@media print{.cv-cover:not(.has){display:none}.cv-cover-fig{margin-top:0}}