/* ── CSS Custom Properties (Theming) ── */
    :root {
      --bg-primary: #fafaf9; --bg-secondary: #f5f5f4; --bg-card: #ffffff;
      --text-primary: #1c1917; --text-secondary: #78716c; --text-muted: #a8a29e;
      --border: #e7e5e4; --accent: #3b82f6; --accent-light: #dbeafe;
      --shadow: 0 10px 15px -3px rgba(0,0,0,.08); --shadow-lg: 0 20px 25px -5px rgba(0,0,0,.1);
    }
    .dark {
      --bg-primary: #0c0a09; --bg-secondary: #1c1917; --bg-card: #292524;
      --text-primary: #fafaf9; --text-secondary: #a8a29e; --text-muted: #78716c;
      --border: #44403c; --accent: #60a5fa; --accent-light: #1e3a5f;
      --shadow: 0 10px 15px -3px rgba(0,0,0,.3); --shadow-lg: 0 20px 25px -5px rgba(0,0,0,.4);
    }
    body { background: var(--bg-primary); color: var(--text-primary); transition: background .4s, color .4s; }

    /* ── Scrollbar ── */
    ::-webkit-scrollbar { width: 8px; }
    ::-webkit-scrollbar-track { background: var(--bg-secondary); }
    ::-webkit-scrollbar-thumb { background: var(--text-muted); border-radius: 4px; }

    /* ── Typing Cursor ── */
    .typing-cursor { display:inline-block; width:3px; height:1.1em; background:var(--accent); margin-left:4px; animation:blink 1s step-end infinite; vertical-align:text-bottom; }
    @keyframes blink { 50%{opacity:0} }

    /* ── Hero Slider ── */
    .hero-slide { position:absolute; inset:0; opacity:0; transition:opacity 1.2s ease-in-out; }
    .hero-slide.active { opacity:1; }

    /* ── Fade-in Animation ── */
    .fade-section { opacity:0; transform:translateY(40px); transition:opacity .8s ease, transform .8s ease; }
    .fade-section.visible { opacity:1; transform:translateY(0); }

    /* ── Skill Bar ── */
    .skill-fill { width:0; transition:width 1.2s ease-in-out; }
    .skill-fill.animated { /* width set by JS */ }

    /* ── Toast ── */
    .toast-enter { animation:toastIn .4s ease forwards; }
    .toast-exit { animation:toastOut .4s ease forwards; }
    @keyframes toastIn { from{transform:translateX(120%);opacity:0} to{transform:translateX(0);opacity:1} }
    @keyframes toastOut { from{transform:translateX(0);opacity:1} to{transform:translateX(120%);opacity:0} }

    /* ── Admin Overlay ── */
    .admin-overlay { transform:translateX(100%); transition:transform .4s ease; }
    .admin-overlay.open { transform:translateX(0); }

    /* ── Project Modal ── */
    .modal-backdrop { opacity:0; pointer-events:none; transition:opacity .3s; }
    .modal-backdrop.open { opacity:1; pointer-events:auto; }
    .modal-content { transform:scale(.9) translateY(20px); transition:transform .3s ease; }
    .modal-backdrop.open .modal-content { transform:scale(1) translateY(0); }

    /* ── Misc ── */
    .card-hover { transition: transform .3s ease, box-shadow .3s ease; }
    .card-hover:hover { transform:translateY(-8px); box-shadow:var(--shadow-lg); }

    /* Timeline line */
    .timeline-line { position:absolute; left:50%; top:0; bottom:0; width:2px; background:var(--border); transform:translateX(-50%); }
    @media(max-width:767px) { .timeline-line { left:20px; } }

    /* Table styling */
    .data-table { border-collapse:separate; border-spacing:0; }
    .data-table th, .data-table td { padding:12px 16px; border-bottom:1px solid var(--border); text-align:left; }
    .data-table th { background:var(--bg-secondary); font-weight:600; font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-secondary); }
    .data-table tr:hover td { background:var(--accent-light); }

    /* Tab active */
    .tab-btn { transition:all .2s; }
    .tab-btn.active { color:var(--accent); border-color:var(--accent); }