/* Property of Lwa | Discord ID: 592946414276050945 | © 2020 (Lwa) */
    
    

    

/* ══ أوفرلاي الدخول (Lwa) Entry Overlay ══ */
    #entry-overlay {
      position: fixed;
      inset: 0;
      z-index: 999999;
      
      background: #000;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      touch-action: manipulation;
      user-select: none;
      -webkit-user-select: none;
      overflow: hidden;
      
      transform: translateZ(0);
      will-change: opacity, transform;
    }

    
    .entry-marquee {
      position: absolute;
      bottom: clamp(24px, 8%, 56px);
      left: 0;
      width: 100%;
      overflow: hidden;
      
      pointer-events: none;
      
      -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 10%,
        #000 90%,
        transparent 100%
      );
      mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 10%,
        #000 90%,
        transparent 100%
      );
    }
    .entry-marquee-inner {
      display: flex;
      gap: 10px;
      width: max-content;
      padding: 4px 0;
      animation: marquee-ltr 55s linear infinite;
      will-change: transform;
      
      pointer-events: none;
    }
    
    .entry-marquee-inner:has(.tech-pill:hover) {
      animation-play-state: paused;
    }
    @keyframes marquee-ltr {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    
    .tech-pill {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 6px 14px 6px 10px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.055);
      border: 1px solid rgba(255, 255, 255, 0.09);
      font-family: 'JetBrains Mono', 'Inter', monospace;
      font-size: clamp(11px, 1.2vw, 13px);
      color: rgba(255, 255, 255, 0.60);
      white-space: nowrap;
      flex-shrink: 0;
      
      pointer-events: auto;
      cursor: default;
      transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    }
    
    .tech-pill:hover {
      background: linear-gradient(135deg, rgba(0,212,255,0.11) 0%, rgba(180,79,255,0.11) 100%);
      border-color: rgba(0,212,255,0.45);
      box-shadow:
        0 0 0 1px rgba(180,79,255,0.35),
        0 0 18px rgba(0,212,255,0.22),
        0 0 18px rgba(180,79,255,0.18);
      color: #fff;
      cursor: default;
    }
    .tech-pill i {
      font-size: clamp(13px, 1.4vw, 15px);
      
    }

    
    @media (max-width: 480px) {
      .entry-marquee-inner {
        animation-duration: 35s;
        gap: 8px;
      }
      .tech-pill {
        padding: 5px 11px 5px 8px;
        gap: 5px;
      }
    }
    @media (min-width: 481px) and (max-width: 768px) {
      .entry-marquee-inner {
        animation-duration: 42s;
      }
    }
    
    @media (min-width: 769px) and (max-width: 1024px) {
      .entry-marquee {
        -webkit-mask-image: linear-gradient(
          to right,
          transparent 0%,
          #000 8%,
          #000 92%,
          transparent 100%
        );
        mask-image: linear-gradient(
          to right,
          transparent 0%,
          #000 8%,
          #000 92%,
          transparent 100%
        );
      }
    }

    
    .entry-content {
      position: relative;
      z-index: 10;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1.1rem;
      transform: translateZ(0);
    }

    
    .entry-code-icon {
      width: clamp(70px, 10vw, 110px);
      height: auto;
      overflow: visible;
      animation: logo-breathe 4s ease-in-out infinite;
      will-change: opacity, transform;
    }
    @keyframes logo-breathe {
      0%, 100% { opacity: 0.85; transform: scale(1); }
      50%       { opacity: 1;    transform: scale(1.04); }
    }

    
    .entry-line {
      width: 36px;
      height: 1px;
      background: linear-gradient(90deg, transparent, #00d4ff 50%, transparent);
      transform: translateZ(0);
      animation: entry-line-glow 2.8s ease-in-out infinite;
    }
    @keyframes entry-line-glow {
      0%, 100% { opacity: 0.3; width: 26px; }
      50%       { opacity: 1;   width: 56px; }
    }

    
    .entry-click-text {
      font-family: 'Inter', sans-serif;
      font-size: clamp(0.88rem, 3vw, 1.25rem);
      font-weight: 300;
      letter-spacing: 0.38em;
      text-transform: uppercase;
      color: #ffffff;
      transform: translateZ(0);
      animation: entry-pulse 3s ease-in-out infinite;
      will-change: opacity, transform;
    }
    @keyframes entry-pulse {
      0%, 100% { opacity: 0.4;  transform: scale(1)    translateZ(0); }
      50%       { opacity: 1;   transform: scale(1.025) translateZ(0); }
    }

    
    .entry-click-text.glitching {
      animation: entry-glitch 0.35s steps(1) forwards;
    }
    @keyframes entry-glitch {
      0%   { text-shadow: none;                           transform: translate(0,0)    translateZ(0); clip-path: none; }
      15%  { text-shadow: -3px 0 #00d4ff, 3px 0 #b44fff; transform: translate(-3px,1px) translateZ(0); }
      30%  { text-shadow: 3px 0 #00d4ff, -2px 0 #b44fff; transform: translate(3px,-2px) translateZ(0); clip-path: inset(10% 0 50% 0); }
      45%  { text-shadow: -2px 0 #b44fff;                 transform: translate(-1px,0)  translateZ(0); clip-path: inset(60% 0 10% 0); }
      60%  { text-shadow: 2px 0 #00d4ff;                  transform: translate(2px,0)   translateZ(0); clip-path: none; }
      75%  { text-shadow: -1px 0 #b44fff, 1px 0 #00d4ff; transform: translate(0,0)    translateZ(0); }
      100% { text-shadow: none;                           transform: translate(0,0)    translateZ(0); clip-path: none; }
    }

    
    .entry-sub-text {
      font-family: 'Inter', sans-serif;
      font-size: clamp(0.58rem, 1.4vw, 0.66rem);
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.22);
    }
    
    .entry-dev-bottom {
      position: absolute;
      bottom: 8px;
      left: 50%;
      transform: translateX(-50%);
      font-family: 'Inter', 'Segoe UI', sans-serif;
      font-size: clamp(0.6rem, 1.4vw, 0.75rem);
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: none;
      color: rgba(255,255,255,0.55);
      white-space: nowrap;
      pointer-events: none;
      z-index: 1;
    }
    
    .edb-name {
      background: linear-gradient(90deg, #3b82f6, #b44fff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-weight: 800;
    }
    
    .edb-tag {
      color: #00d4ff;
      font-weight: 800;
      text-shadow: 0 0 8px #00d4ff, 0 0 16px rgba(0,212,255,0.5);
    }

    
    #entry-overlay.cyber-exit {
      animation: cyber-zoom-out 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
      pointer-events: none;
    }
    @keyframes cyber-zoom-out {
      0%   { opacity: 1; transform: scale(1)    translateZ(0); filter: blur(0px);  }
      25%  { opacity: 1; transform: scale(1.04) translateZ(0); filter: blur(0px);  }
      100% { opacity: 0; transform: scale(1.18) translateZ(0); filter: blur(10px); }
    }


/* ══ المتغيرات (Lwa) Variables ══ */
    :root {
      --cyan: #00d4ff;
      --purple: #b44fff;
      --dark: #000;
      --card: #0f0f17;
      --border: #1a1a2e;
    }
    * { scroll-behavior: smooth; box-sizing: border-box; }
    html {
      background: #000 !important;
      overflow-x: hidden;           
      overflow-y: auto;
      overscroll-behavior-y: contain;
    }
    body {
      font-family: 'Inter', sans-serif;
      background: #000 !important; color: #e2e8f0;
      margin: 0; padding: 0;
      overflow-x: hidden;
      overflow-y: auto !important;
      -webkit-text-size-adjust: 100%;
      touch-action: pan-x pan-y;
      
      text-rendering: optimizeSpeed;
    }

    
    html { scrollbar-width: none; }
    ::-webkit-scrollbar { width: 0; display: none; }

    .g-text {
      background: linear-gradient(135deg, #00d4ff, #9b59f5, #b44fff);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }

    
    .gs-wrap{
      flex:1; display:flex; justify-content:center;
      margin:0 2rem; position:relative; max-width:380px;
    }
    .gs-box{
      position:relative; width:100%;
    }
    .gs-icon{
      position:absolute; left:0.85rem; top:50%; transform:translateY(-50%);
      color:#475569; font-size:0.8rem; pointer-events:none;
      transition:color 0.2s; z-index:2;
    }
    .gs-input{
      width:100%; padding:0.55rem 2.5rem 0.55rem 2.2rem;
      background:rgba(255,255,255,0.05);
      border:1px solid rgba(255,255,255,0.08);
      border-radius:10px; color:#e2e8f0;
      font-size:0.82rem; font-family:'Inter',sans-serif;
      outline:none; transition:all 0.25s;
    }
    .gs-input::placeholder{ color:#334155; }
    .gs-input:focus{
      border-color:rgba(0,212,255,0.4);
      background:rgba(0,212,255,0.04);
      box-shadow:0 0 0 3px rgba(0,212,255,0.08);
    }
    .gs-box:focus-within .gs-icon{ color:var(--cyan); }
    .gs-kbd{
      position:absolute; right:0.75rem; top:50%; transform:translateY(-50%);
      font-size:0.65rem; color:#334155; background:rgba(255,255,255,0.05);
      border:1px solid rgba(255,255,255,0.08); border-radius:4px;
      padding:1px 5px; pointer-events:none; font-family:monospace;
      transition:opacity 0.2s;
    }
    .gs-box:focus-within .gs-kbd{ opacity:0; }

    

/* ══ قائمة البحث (Lwa) Search ══ */
    .gs-dropdown{
      position:absolute; top:calc(100% + 8px); left:0; right:0;
      background:#0d0f1e;
      border:1px solid rgba(0,212,255,0.15);
      border-radius:14px;
      box-shadow:0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,212,255,0.05);
      overflow:hidden; z-index:9999;
      max-height:480px; overflow-y:auto;
      display:none; animation:gsDropIn 0.18s cubic-bezier(0.4,0,0.2,1);
    }
    .gs-dropdown.open{ display:block; }
    @keyframes gsDropIn{
      from{ opacity:0; transform:translateY(-8px) scale(0.98); }
      to{   opacity:1; transform:translateY(0)    scale(1);    }
    }
    .gs-dropdown::-webkit-scrollbar{ width:4px; }
    .gs-dropdown::-webkit-scrollbar-track{ background:transparent; }
    .gs-dropdown::-webkit-scrollbar-thumb{ background:rgba(0,212,255,0.2); border-radius:4px; }

    
    .gs-section-head{
      display:flex; align-items:center; gap:8px;
      padding:0.65rem 1rem 0.3rem;
      font-size:0.65rem; font-weight:700; letter-spacing:0.1em;
      text-transform:uppercase; color:#475569;
      border-top:1px solid rgba(255,255,255,0.04);
    }
    .gs-section-head:first-child{ border-top:none; }
    .gs-section-icon{
      width:20px; height:20px;
      background:rgba(0,212,255,0.1);
      border:1px solid rgba(0,212,255,0.2);
      border-radius:5px; display:flex; align-items:center; justify-content:center;
      font-size:0.6rem; color:var(--cyan);
    }

    
    .gs-item{
      display:flex; align-items:flex-start; gap:10px;
      padding:0.6rem 1rem; cursor:pointer;
      transition:background 0.15s;
      border-radius:0;
    }
    .gs-item:hover, .gs-item.gs-active{
      background:rgba(0,212,255,0.07);
    }
    .gs-item-icon{
      width:28px; height:28px; flex-shrink:0;
      background:rgba(255,255,255,0.04);
      border:1px solid rgba(255,255,255,0.07);
      border-radius:7px; display:flex; align-items:center; justify-content:center;
      font-size:0.7rem; color:#64748b; margin-top:1px;
    }
    .gs-item:hover .gs-item-icon, .gs-item.gs-active .gs-item-icon{
      border-color:rgba(0,212,255,0.25); color:var(--cyan);
    }
    .gs-item-body{ flex:1; min-width:0; }
    .gs-item-title{
      font-size:0.82rem; font-weight:600; color:#cbd5e1;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
      margin-bottom:2px;
    }
    .gs-item:hover .gs-item-title, .gs-item.gs-active .gs-item-title{ color:#fff; }
    .gs-item-sub{
      font-size:0.72rem; color:#475569; line-height:1.4;
      display:-webkit-box; -webkit-line-clamp:2;
      -webkit-box-orient:vertical; overflow:hidden;
    }
    .gs-item-arrow{
      color:#334155; font-size:0.65rem; margin-top:4px; flex-shrink:0;
    }
    .gs-item:hover .gs-item-arrow, .gs-item.gs-active .gs-item-arrow{ color:var(--cyan); }

    /* Path breadcrumb header — badge + title on one line */
    .gs-item-header{
      display:flex; align-items:center; gap:6px;
      min-width:0; margin-bottom:2px;
    }
    .gs-item-header .gs-item-title{ margin-bottom:0; flex:1; min-width:0; }
    .gs-path-tag{
      display:inline-flex; align-items:center;
      padding:1px 7px; border-radius:4px; border:1px solid transparent;
      font-size:0.575rem; font-weight:700;
      letter-spacing:0.07em; text-transform:uppercase;
      white-space:nowrap; flex-shrink:0; line-height:1.7;
      font-family:'JetBrains Mono',monospace;
    }

    
    .gs-empty{
      padding:2rem 1rem; text-align:center;
      color:#334155; font-size:0.82rem;
    }
    .gs-empty i{ display:block; font-size:1.5rem; margin-bottom:0.5rem; color:#1e293b; }

    .gs-more-hint{
      padding:0.3rem 1rem 0.5rem 1rem;
      font-size:0.72rem; color:#334155;
      font-style:italic; text-align:right;
    }

    
    mark.gs-hl{
      background:rgba(0,212,255,0.18); color:var(--cyan);
      border-radius:2px; padding:0 2px; font-style:normal;
    }

    @media(max-width:768px){  }

    
    
    .toc-sidebar{
      height: auto;
      max-height: 100%;
      align-self: flex-start;
      width: 220px;
      flex-shrink: 0;
      overflow-y: auto;
      overflow-x: hidden;
      scrollbar-width: none;
      background: rgba(0,0,4,0.72);
      backdrop-filter: blur(20px) saturate(140%);
      -webkit-backdrop-filter: blur(20px) saturate(140%);
      border: 1px solid rgba(0,212,255,0.14);
      border-radius: 16px;
      box-shadow:
        0 8px 32px rgba(0,0,0,0.6),
        0 0 0 1px rgba(180,79,255,0.06),
        inset 0 1px 0 rgba(0,212,255,0.08);
      padding: 0 0 0.5rem;
    }
    .toc-sidebar::-webkit-scrollbar{ display: none; }

    
    .toc-inner{ display: flex; flex-direction: column; }
    .toc-heading{
      display: flex; align-items: center; gap: 7px;
      font-size: 0.58rem; font-weight: 800; letter-spacing: 0.18em;
      text-transform: uppercase;
      background: linear-gradient(135deg, var(--cyan), var(--purple));
      -webkit-background-clip: text; background-clip: text; color: transparent;
      padding: 0.75rem 1rem 0.6rem;
      border-bottom: 1px solid rgba(0,212,255,0.1);
      margin-bottom: 0.35rem;
    }
    .toc-heading i{
      font-size: 0.62rem;
      background: linear-gradient(135deg, var(--cyan), var(--purple));
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }

    
    #tocNav{
      display: flex; flex-direction: column; gap: 0;
      padding: 0 0.55rem;
      position: relative;
    }
    #tocNav::before{
      content: '';
      position: absolute; left: 1.05rem; top: 4px; bottom: 4px; width: 1px;
      background: linear-gradient(to bottom, rgba(0,212,255,0.18), rgba(180,79,255,0.12), rgba(0,212,255,0.06));
      border-radius: 1px;
    }

    
    .toc-item{
      display: flex; align-items: flex-start; gap: 9px;
      padding: 0.28rem 0.6rem 0.28rem 0.85rem;
      font-size: 0.72rem; color: #3d4f68;
      border-radius: 7px;
      cursor: pointer; text-decoration: none;
      transition: color 0.15s, background 0.15s;
      line-height: 1.45;
      white-space: normal; word-break: break-word;
      position: relative;
    }
    
    .toc-item::before{
      content: '';
      width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0;
      background: rgba(0,212,255,0.2);
      border: 1px solid rgba(0,212,255,0.25);
      position: absolute; left: 0.3rem; top: 0.52rem;
      transition: background 0.15s, box-shadow 0.15s, border-color 0.15s;
    }
    .toc-item:hover{
      color: #7ab8d8;
      background: rgba(0,212,255,0.05);
    }
    .toc-item:hover::before{
      background: rgba(0,212,255,0.55);
      border-color: var(--cyan);
      box-shadow: 0 0 6px rgba(0,212,255,0.45);
    }
    .toc-item.active{
      color: var(--cyan) !important;
      font-weight: 700;
      background: linear-gradient(90deg, rgba(0,212,255,0.10), rgba(0,212,255,0.02));
    }
    .toc-item.active::before{
      background: var(--cyan) !important;
      border-color: var(--cyan) !important;
      box-shadow: 0 0 8px rgba(0,212,255,0.7), 0 0 16px rgba(0,212,255,0.3) !important;
    }
    
    .toc-item.h3{
      padding-left: 1.9rem;
      font-size: 0.64rem;
      color: #283444;
      font-weight: 400;
      letter-spacing: 0;
    }
    
    .toc-item.h3::before{
      left: 0.8rem;
      top: 0.56rem;
      width: 9px;
      height: 1.5px;
      border-radius: 1px;
      background: rgba(0,212,255,0.15);
      border: none;
      box-shadow: none;
    }
    .toc-item.h3:hover{
      color: #5a8aaa;
      background: rgba(0,212,255,0.03);
    }
    .toc-item.h3:hover::before{
      background: rgba(0,212,255,0.4);
      box-shadow: none;
    }
    .toc-item.h3.active{
      color: rgba(0,212,255,0.75) !important;
      font-weight: 600;
      background: linear-gradient(90deg, rgba(0,212,255,0.06), transparent);
    }
    .toc-item.h3.active::before{
      background: rgba(0,212,255,0.6) !important;
      box-shadow: 0 0 5px rgba(0,212,255,0.3) !important;
    }
    @media(max-width:1200px){ .toc-sidebar{ display: none; } }

    
    
    .main-toc{
      position:fixed; right:0; top:50%;
      transform:translateY(-50%);
      display:flex; flex-direction:column; gap:4px;
      padding:0.6rem 0; z-index:90;
    }
    .mtoc-item{
      display:flex; align-items:center;
      gap:8px; padding:4px 12px 4px 8px;
      cursor:pointer; text-decoration:none;
      justify-content:flex-end;
      transition:all 0.2s;
    }
    .mtoc-label{
      font-size:0.7rem; font-weight:600;
      letter-spacing:0.05em; color:#334155;
      text-align:right;
      opacity:0; transform:translateX(8px);
      transition:all 0.2s;
      white-space:nowrap;
    }
    .mtoc-dot{
      width:6px; height:6px; flex-shrink:0;
      border-radius:50%;
      background:rgba(255,255,255,0.12);
      border:1px solid rgba(255,255,255,0.18);
      transition:all 0.2s;
    }
    .mtoc-item:hover .mtoc-label,
    .mtoc-item.active .mtoc-label{
      opacity:1; color:#cbd5e1; transform:translateX(0);
    }
    .mtoc-item.active .mtoc-dot{
      background:var(--cyan);
      border-color:var(--cyan);
      box-shadow:0 0 8px rgba(0,212,255,0.5);
      width:8px; height:8px;
    }
    .mtoc-item:hover .mtoc-dot{
      background:rgba(0,212,255,0.5);
      border-color:rgba(0,212,255,0.6);
    }
    @media(max-width:1100px){ .main-toc{ display:none; } }

    
    #main-site {
      background:
        radial-gradient(ellipse 70% 50% at 15% 10%, rgba(0,212,255,0.07) 0%, transparent 55%),
        radial-gradient(ellipse 60% 45% at 85% 15%, rgba(139,92,246,0.07) 0%, transparent 55%),
        radial-gradient(ellipse 50% 40% at 50% 85%, rgba(0,212,255,0.05) 0%, transparent 50%),
        radial-gradient(ellipse 40% 30% at 90% 60%, rgba(180,79,255,0.06) 0%, transparent 50%),
        #08091a;
    }
    
    .orb { position: fixed; border-radius: 50%; filter: blur(160px); pointer-events: none; z-index: 0; }
    .orb-1 { width: 600px; height: 600px; background: rgba(0,212,255,0.025); top: -200px; left: -200px; animation: orb-drift 12s ease-in-out infinite alternate; }
    .orb-2 { width: 500px; height: 500px; background: rgba(180,79,255,0.025); bottom: -100px; right: -200px; animation: orb-drift 15s ease-in-out infinite alternate-reverse; }
    .orb-3 { width: 300px; height: 300px; background: rgba(0,212,255,0.015); top: 50%; left: 50%; transform: translate(-50%,-50%); animation: orb-drift 18s ease-in-out infinite alternate; }
    @keyframes orb-drift {
      0%{ transform: translate(0,0) scale(1); }
      100%{ transform: translate(30px, 20px) scale(1.08); }
    }

    
    

/* ══ الناف بار (Lwa) Navbar ══ */
    #navbar {
      position: fixed; top: 34px; left: 0; right: 0; z-index: 9999;
      backdrop-filter: blur(24px) saturate(180%);
      -webkit-backdrop-filter: blur(24px) saturate(180%);
      background: rgba(8,9,26,0.55);
      border-bottom: 1px solid rgba(255,255,255,0.06);
      transition: background 0.3s, box-shadow 0.3s, border-color 0.3s;
      
      transform: translateZ(0);
      will-change: transform;
    }
    #navbar.scrolled {
      background: rgba(8,9,26,0.82);
      border-bottom-color: rgba(0,212,255,0.15);
      box-shadow: 0 1px 0 rgba(0,212,255,0.08), 0 8px 32px rgba(0,0,0,0.4);
    }
    .nav-inner {
      max-width: 1180px; margin: 0 auto;
      padding: 0 2rem 0 75px; height: 60px;
      display: flex; align-items: center; justify-content: space-between;
    }
    .nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
    .nav-logo img {
      width: 34px; height: 34px; border-radius: 50%;
      border: 2px solid rgba(0,212,255,0.5);
      box-shadow: 0 0 10px rgba(0,212,255,0.2);
    }
    .nav-logo span { font-size: 1.1rem; font-weight: 800; font-family: monospace; letter-spacing:0.02em; }
    .nav-links { display: flex; align-items: center; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
    .nav-links li { display: flex; align-items: center; }
    .nav-links a {
      color: rgba(148,163,184,0.85); font-size: 0.82rem; font-weight: 500; line-height: 1;
      text-decoration: none; padding: 6px 14px; border-radius: 8px;
      transition: color 0.2s, background 0.2s, border-color 0.2s, box-shadow 0.2s;
      position: relative;
      border: 1px solid transparent;
    }
    .nav-links a:hover {
      color: #fff;
      background: rgba(255,255,255,0.05);
    }
    .nav-links a.active {
      color: #fff;
      background: rgba(0,212,255,0.06);
      border-color: rgba(0,212,255,0.45);
      box-shadow: 0 0 10px rgba(0,212,255,0.15), 0 0 20px rgba(0,212,255,0.07);
    }
/* ══ About Dropdown (Lwa) ══ */
    .nav-dd { position: relative; list-style: none; }
    .nav-dd-btn {
      color: rgba(148,163,184,0.85); font-size: 0.82rem; font-weight: 500;
      text-decoration: none; padding: 6px 14px; border-radius: 8px;
      border: 1px solid transparent;
      display: inline-flex; align-items: center; gap: 5px;
      transition: color 0.2s, background 0.2s;
      cursor: pointer; user-select: none;
    }
    .nav-dd-btn:hover, .nav-dd.open .nav-dd-btn {
      color: #fff; background: rgba(255,255,255,0.05);
    }
    .nav-dd-arrow { font-size: .68rem; transition: transform .2s; display: inline-block; line-height: 1; }
    .nav-dd.open .nav-dd-arrow { transform: rotate(180deg); }
    .nav-dd-menu {
      position: absolute; top: calc(100% + 8px); left: 0;
      display: none;
      background: rgba(10,10,12,0.94);
      backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255,255,255,0.1); border-radius: 10px;
      padding: 6px; min-width: 152px;
      box-shadow: 0 20px 48px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.04);
      flex-direction: column; z-index: 10000;
    }
    .nav-dd.open .nav-dd-menu {
      display: flex;
      animation: navDdIn .14s ease;
    }
    @keyframes navDdIn { from{opacity:0;transform:translateY(-5px)} to{opacity:1;transform:translateY(0)} }
    .nav-dd-menu a {
      color: rgba(148,163,184,0.85); font-size: 0.79rem; font-weight: 500;
      text-decoration: none; padding: 7px 11px; border-radius: 7px;
      transition: color .15s, background .15s; display: flex; align-items: center;
      gap: 8px; border: 1px solid transparent; white-space: nowrap;
    }
    .nav-dd-menu a:hover { color: #fff; background: rgba(0,212,255,0.09); border-color: rgba(0,212,255,0.18); }
/* ══ Navbar CTA Button (Lwa) ══ */
    .nav-cta-btn {
      color: #00d4ff !important; border: 1px solid rgba(0,212,255,0.45) !important;
      background: rgba(0,212,255,0.06) !important; font-weight: 600 !important;
      white-space: nowrap;
    }
    .nav-cta-btn:hover { background: rgba(0,212,255,0.14) !important; box-shadow: 0 0 14px rgba(0,212,255,0.22) !important; }
    #menuBtn { display: none; background: none; border: none; color: #94a3b8; font-size: 1.2rem; cursor: pointer; padding: 6px; }
    #mobileMenu {
      display: none; flex-direction: column; gap: 0.5rem;
      background: rgba(8,9,26,0.97);
      backdrop-filter: blur(20px);
      border-top: 1px solid rgba(255,255,255,0.06);
      padding: 1rem 1.5rem;
      position: absolute;
      top: 100%; left: 0; right: 0;
      width: 100%;
      z-index: 999;
      box-shadow: 0 20px 40px rgba(0,0,0,0.5);
    }
    #mobileMenu a {
      color: #94a3b8; text-decoration: none; font-size: 0.9rem;
      padding: 8px 10px; border-radius: 8px; transition: all 0.2s;
    }
    #mobileMenu a:hover { color: #fff; background: rgba(255,255,255,0.05); }
    @media(max-width:768px) {
      .nav-links { display: none; }
      #menuBtn { display: block; }

      /* navbar layout: tight even padding so logo hugs left, search expands center */
      .nav-inner {
        padding: 0 0.85rem;
        gap: 0.5rem;
      }

      /* logo: tighter gap + slightly smaller so search bar gets more room */
      .nav-logo { gap: 5px; }
      .nav-logo img { width: 30px; height: 30px; }
      .nav-logo span { font-size: 1rem; }

      /* search bar: grow to fill available center space */
      .gs-wrap {
        flex: 1;
        min-width: 0;
        max-width: none;
      }

      /* hide [ESC] desktop shortcut — meaningless on touch devices */
      .gs-kbd { display: none; }

      /* remove the right padding reserved for the ESC badge */
      .gs-input { padding-right: 0.75rem; }

      #announce-banner { height: 28px !important; }
      #announce-banner .announce-inner { font-size: 0.65rem !important; }
      #navbar { position: fixed !important; top: 28px !important; left: 0 !important; right: 0 !important; }
      body { padding-top: 88px !important; }

      #navbar {
        backdrop-filter: blur(14px) saturate(160%) !important;
        -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
      }
    }

    
    .music-player {
      
      position: absolute;
      left: 20px;
      top: 50%;
      transform: translateY(-50%) translateZ(0);
      display: flex;
      align-items: center;
      flex-shrink: 0;
      z-index: 300;
      
      isolation: isolate;
      
      cursor: pointer;
      touch-action: manipulation;
    }

    
    .music-btn {
      width: 38px; height: 38px;
      border-radius: 50%;
      border: 1.5px solid rgba(0,212,255,0.28);
      background: rgba(0,212,255,0.06);
      color: var(--cyan);
      font-size: 0.85rem;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      position: relative;
      transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
      flex-shrink: 0;
      outline: none;
    }
    .music-btn:hover {
      border-color: rgba(0,212,255,0.6);
      background: rgba(0,212,255,0.1);
      box-shadow: 0 0 14px rgba(0,212,255,0.22);
    }
    .music-btn.playing {
      border-color: var(--cyan);
      background: rgba(0,212,255,0.13);
      box-shadow: 0 0 18px rgba(0,212,255,0.35), 0 0 6px rgba(0,212,255,0.15) inset;
    }
    
    .music-btn.playing::before {
      content: '';
      position: absolute; inset: -5px;
      border-radius: 50%;
      border: 1px solid rgba(0,212,255,0.22);
      animation: music-ping 2.2s ease-in-out infinite;
    }
    @keyframes music-ping {
      0%   { transform: scale(1);   opacity: 0.65; }
      70%  { transform: scale(1.55); opacity: 0; }
      100% { transform: scale(1.55); opacity: 0; }
    }

    
    .music-icon { font-size: 0.95rem; pointer-events: none; display: inline-block; color: var(--cyan); }

    
    .music-waves {
      display: none;
      align-items: flex-end;
      gap: 2.5px;
      height: 18px;
      pointer-events: none;
    }
    
    @media (min-width: 769px) {
      .music-btn.playing .music-icon { display: none; }
      .music-waves.active { display: flex; }
    }
    
    @media (max-width: 768px) {
      .music-waves { display: none !important; }
      .music-icon  { display: inline-block !important; }
    }
    .music-waves span {
      display: inline-block;
      width: 2.5px;
      border-radius: 2px;
      background: var(--cyan);
      box-shadow: 0 0 5px rgba(0,212,255,0.65);
      height: 4px;
    }
    .music-waves.active span:nth-child(1){ animation: eq1 0.72s ease-in-out infinite; }
    .music-waves.active span:nth-child(2){ animation: eq2 0.58s ease-in-out infinite; }
    .music-waves.active span:nth-child(3){ animation: eq3 0.88s ease-in-out infinite; }
    .music-waves.active span:nth-child(4){ animation: eq4 0.65s ease-in-out infinite; }
    .music-waves.active span:nth-child(5){ animation: eq5 0.79s ease-in-out infinite; }
    @keyframes eq1 { 0%,100%{height:3px}  50%{height:16px} }
    @keyframes eq2 { 0%,100%{height:11px} 40%{height:4px}  }
    @keyframes eq3 { 0%,100%{height:15px} 30%{height:3px}  }
    @keyframes eq4 { 0%,100%{height:5px}  60%{height:15px} }
    @keyframes eq5 { 0%,100%{height:8px}  70%{height:3px}  }

    
    .music-popup {
      position: fixed;
      top: 62px;
      left: 12px;
      width: 230px;
      background: rgba(6,7,20,0.92);
      border: 1px solid rgba(0,212,255,0.22);
      border-radius: 14px;
      padding: 12px 14px 13px;
      display: flex; flex-direction: column; gap: 10px;
      box-shadow:
        0 10px 40px rgba(0,0,0,0.7),
        0 0 0 1px rgba(0,212,255,0.06) inset,
        0 0 30px rgba(0,212,255,0.07);
      backdrop-filter: blur(18px) saturate(1.4);
      -webkit-backdrop-filter: blur(18px) saturate(1.4);
      opacity: 0;
      transform: translateY(-6px) scale(0.96) translateZ(0);
      pointer-events: none;
      transition: opacity 0.22s ease, transform 0.22s ease;
      z-index: 9999;
      will-change: transform, opacity;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }
    
    .music-popup::before {
      content: '';
      position: absolute;
      top: 0; left: 16px; right: 16px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(0,212,255,0.4), transparent);
      border-radius: 1px;
    }
    .music-player.popup-open .music-popup {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: all;
    }

    
    .music-track-name {
      font-size: 0.72rem;
      color: rgba(255,255,255,0.5);
      letter-spacing: 0.04em;
      font-family: 'JetBrains Mono', 'Fira Code', monospace;
      display: flex; align-items: center; gap: 7px;
      white-space: nowrap;
    }
    .music-live-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--cyan);
      box-shadow: 0 0 6px rgba(0,212,255,0.8);
      flex-shrink: 0;
      animation: dot-ping 2s ease-in-out infinite;
    }

    

    
    .ac-vol-row {
      display: flex;
      align-items: center;
      gap: 9px;
      width: 100%;
      padding: 2px 0;
    }
    .ac-vol-icon {
      font-size: 0.75rem;
      color: rgba(255,255,255,0.38);
      flex-shrink: 0;
      pointer-events: none;
      transition: color 0.2s;
    }

    
    .music-vol {
      -webkit-appearance: none;
      appearance: none;
      flex: 1;
      height: 5px;
      border-radius: 99px;
      
      background: linear-gradient(to right, #00d4ff 25%, rgba(255,255,255,0.1) 25%);
      outline: none;
      cursor: pointer;
      min-width: 0;
      transition: height 0.15s ease;
    }
    .music-vol:active { height: 7px; }
    
    .music-vol::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 18px; height: 18px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 2px 8px rgba(0,0,0,0.55), 0 0 0 2px rgba(0,212,255,0.45);
      cursor: pointer;
      transition: transform 0.15s, box-shadow 0.15s;
    }
    .music-vol::-webkit-slider-thumb:hover {
      transform: scale(1.18);
      box-shadow: 0 2px 12px rgba(0,0,0,0.6), 0 0 0 3px rgba(0,212,255,0.7);
    }
    .music-vol::-moz-range-thumb {
      width: 18px; height: 18px;
      border: none; border-radius: 50%;
      background: #fff;
      box-shadow: 0 2px 8px rgba(0,0,0,0.55);
      cursor: pointer;
    }
    
    @media (max-width: 768px) {
      .music-vol { height: 6px; }
      .music-vol::-webkit-slider-thumb {
        width: 24px !important; height: 24px !important;
      }
    }

    
    .ac-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      margin-top: 2px;
    }

    
    .music-vol-pct {
      font-size: 0.7rem;
      font-family: 'JetBrains Mono', 'Fira Code', monospace;
      color: rgba(255,255,255,0.45);
      letter-spacing: -0.02em;
      flex-shrink: 0;
      min-width: 30px;
    }

    
    .ac-mute-btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 11px 4px 9px;
      border-radius: 99px;
      border: 1px solid rgba(0,212,255,0.25);
      background: rgba(0,212,255,0.07);
      color: rgba(0,212,255,0.85);
      font-size: 0.68rem;
      font-family: inherit;
      cursor: pointer;
      flex-shrink: 0;
      outline: none;
      transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }
    .ac-mute-btn:hover {
      background: rgba(0,212,255,0.16);
      border-color: rgba(0,212,255,0.6);
      color: var(--cyan);
    }
    .ac-mute-btn:active { transform: scale(0.95); }
    
    .ac-mute-btn.muted {
      background: rgba(255,80,80,0.1);
      border-color: rgba(255,80,80,0.35);
      color: rgba(255,100,100,0.9);
    }
    .ac-mute-btn.muted:hover {
      background: rgba(255,80,80,0.18);
      border-color: rgba(255,80,80,0.65);
      color: #ff6464;
    }
    @media (max-width: 768px) {
      
      .music-popup {
        position: fixed !important;
        left: 8px !important;
        top: 90px !important;
        bottom: auto !important;
        transform: none !important;
        width: 230px !important;
        max-width: calc(100vw - 16px) !important;
      }
      .music-player.popup-open .music-popup {
        transform: none !important;
      }
    }

    
    .btn-primary {
      display: inline-flex; align-items: center; gap: 8px;
      background: linear-gradient(135deg, var(--cyan), var(--purple));
      color: #fff; font-weight: 600; font-size: 0.9rem;
      padding: 0.7rem 1.8rem; border-radius: 9999px; text-decoration: none;
      border: none; cursor: pointer; position: relative; overflow: hidden;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }
    .btn-primary::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent); opacity: 0; transition: opacity 0.25s; }
    .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,212,255,0.3); }
    .btn-primary:hover::before { opacity: 1; }
    .btn-primary:active { transform: translateY(0); }

    .btn-outline {
      display: inline-flex; align-items: center; gap: 8px;
      background: transparent; color: var(--cyan); font-weight: 600; font-size: 0.9rem;
      padding: 0.7rem 1.8rem; border-radius: 9999px; text-decoration: none;
      border: 1px solid rgba(0,212,255,0.45); cursor: pointer; transition: all 0.25s ease;
    }
    .btn-outline:hover { background: rgba(0,212,255,0.1); border-color: var(--cyan); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,212,255,0.15); color: #fff; }

    
    .section-label { display: inline-flex; align-items: center; gap: 8px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan); margin-bottom: 0.75rem; }
    .section-label::before, .section-label::after { content: ''; display: block; width: 24px; height: 1px; background: linear-gradient(to right, var(--cyan), var(--purple)); }
    .section-title { font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 900; color: #fff; margin: 0 0 0.5rem; }
    .section-sub { color: #64748b; font-size: 0.95rem; }
    .divider { height: 1px; max-width: 900px; margin: 0 auto; background: linear-gradient(to right, transparent, rgba(0,212,255,0.25), rgba(180,79,255,0.25), transparent); }

    

/* ══ قسم من أنا (Lwa) About ══ */
    #about { display: flex; align-items: center; justify-content: center; padding: 7rem 2rem 7rem; position: relative; z-index: 1; }
    .hero-wrap { max-width: 720px; width: 100%; text-align: center; }
    .avatar-ring { display: inline-block; padding: 3px; border-radius: 50%; background: linear-gradient(135deg, var(--cyan), #7c3aed, var(--purple)); animation: glow-pulse 3s ease-in-out infinite; margin-bottom: 2rem; }
    .avatar-ring img { width: 140px; height: 140px; border-radius: 50%; display: block; object-fit: cover; border: 4px solid var(--dark); transition: transform 0.4s cubic-bezier(0.4,0,0.2,1); cursor: pointer; }
    .avatar-ring:hover img { transform: scale(1.12); }
    .avatar-ring { transition: box-shadow 0.4s ease; }
    .avatar-ring:hover { box-shadow: 0 0 40px rgba(0,212,255,0.5), 0 0 80px rgba(180,79,255,0.3); }
    @keyframes glow-pulse { 0%,100% { box-shadow: 0 0 20px rgba(0,212,255,0.4); } 50% { box-shadow: 0 0 50px rgba(180,79,255,0.6); } }
    .hero-name { font-size: clamp(2.5rem, 7vw, 4rem); font-weight: 900; line-height: 1.1; margin-bottom: 1rem; }
    .hero-typed-row { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 1.5rem; }
    .hero-typed-row span.line { width: 32px; height: 1px; background: linear-gradient(to right, var(--cyan), var(--purple)); }
    .typed-text { color: #94a3b8; font-size: 1.1rem; }
    .typed-cursor::after { content: '|'; color: var(--cyan); animation: blink 1s step-end infinite; }
    @keyframes blink { 50% { opacity: 0; } }
    .hero-bio { color: #94a3b8; font-size: 1rem; line-height: 1.8; max-width: 560px; margin: 0 auto 2rem; }
    .stats-row { display: flex; justify-content: center; align-items: center; gap: 2.5rem; margin-bottom: 2.5rem; }
    .stat-item { text-align: center; }
    .stat-num { font-size: 2rem; font-weight: 900; }
    .stat-label { font-size: 0.78rem; color: #64748b; margin-top: 2px; letter-spacing: 0.05em; }
    .stat-divider { width: 1px; height: 40px; background: var(--border); }
    .hero-btns { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-bottom: 3rem; }
    .scroll-hint { color: #374151; animation: bounce 2s infinite; }
    @keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }

    
    .lwa-sig {
      margin-top: 1.5rem;
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      background: linear-gradient(90deg, var(--cyan), var(--purple));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      filter: drop-shadow(0 0 10px rgba(0, 212, 255, 0.55));
      user-select: none;
    }
    .lwa-sig strong { font-weight: 800; }
    .lwa-sig-tag { opacity: 0.85; }

    
    .is-iphone #musicPlayer,
    .is-iphone .music-player { display: none !important; }

    
    

/* ══ المشاريع (Lwa) Projects ══ */
    #projects { padding: 8rem 2rem; position: relative; z-index: 1; }
    .section-wrap { max-width: 1180px; margin: 0 auto; }

    .projects-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 1.1rem;
      margin-top: 3.5rem;
    }

    
    .pcard {
      position: relative; overflow: hidden;
      background: linear-gradient(135deg, rgba(9,10,24,0.95), rgba(15,16,32,0.98));
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 16px;
      padding: 1.35rem 1.35rem 1.1rem;
      transition: transform 0.35s cubic-bezier(0.4,0,0.2,1),
                  border-color 0.35s ease,
                  box-shadow 0.35s ease;
      cursor: pointer;
      animation: float-pcard 5s ease-in-out infinite;
      
      contain: layout style;
      transform: translateZ(0);
    }
    .pcard:hover { animation-play-state: paused; }

    
    .projects-grid .pcard:nth-child(2)  { animation-delay:0.5s }
    .projects-grid .pcard:nth-child(3)  { animation-delay:1.0s }
    .projects-grid .pcard:nth-child(4)  { animation-delay:1.5s }
    .projects-grid .pcard:nth-child(5)  { animation-delay:2.0s }
    .projects-grid .pcard:nth-child(6)  { animation-delay:2.5s }
    .projects-grid .pcard:nth-child(7)  { animation-delay:0.3s }
    .projects-grid .pcard:nth-child(8)  { animation-delay:0.8s }
    .projects-grid .pcard:nth-child(9)  { animation-delay:1.3s }
    .projects-grid .pcard:nth-child(10) { animation-delay:1.8s }
    .projects-grid .pcard:nth-child(11) { animation-delay:2.3s }
    .projects-grid .pcard:nth-child(12) { animation-delay:2.8s }
    .projects-grid .pcard:nth-child(13) { animation-delay:0.4s }
    .projects-grid .pcard:nth-child(14) { animation-delay:0.9s }
    .projects-grid .pcard:nth-child(15) { animation-delay:1.4s }

    @keyframes float-pcard {
      0%, 100% { transform: translateY(0px); }
      50%       { transform: translateY(-6px); }
    }

    
    .pcard::before {
      content: ''; position: absolute; inset: 0; border-radius: 16px;
      background: linear-gradient(135deg, rgba(0,212,255,0.05), rgba(180,79,255,0.07));
      opacity: 0; transition: opacity 0.35s ease; pointer-events: none;
    }
    .pcard:hover::before { opacity: 1; }
    .pcard:hover {
      transform: translateY(-8px) scale(1.015);
      border-color: rgba(0,212,255,0.35);
      box-shadow:
        0 0 0 1px rgba(0,212,255,0.1),
        0 16px 40px rgba(0,0,0,0.5),
        0 0 24px rgba(0,212,255,0.08),
        0 0 40px rgba(180,79,255,0.06);
    }

    
    .pcard .p-bar {
      position: absolute; top: 0; left: 0; right: 0; height: 2px;
      background: linear-gradient(to right, var(--cyan), var(--purple));
      transform: scaleX(0); transform-origin: left;
      transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
      border-radius: 16px 16px 0 0;
    }
    .pcard:hover .p-bar { transform: scaleX(1); }

    
    .pcard .p-body { position: relative; transition: transform 0.35s cubic-bezier(0.4,0,0.2,1); }
    .pcard:hover .p-body { transform: translateY(-3px); }

    
    .p-num {
      position: absolute; top: 13px; right: 14px;
      font-size: 0.62rem; font-weight: 700;
      font-family: 'JetBrains Mono', monospace;
      color: rgba(255,255,255,0.15);
      letter-spacing: 0.04em;
      line-height: 1;
      transition: color 0.3s;
      pointer-events: none;
    }
    .pcard:hover .p-num { color: rgba(0,212,255,0.4); }

    
    .p-icon {
      width: 46px; height: 46px;
      background: var(--ic-bg, rgba(0,212,255,0.08));
      border: 1px solid var(--ic-border, rgba(0,212,255,0.22));
      border-radius: 13px;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 0.9rem;
      transition: background 0.3s, border-color 0.3s, transform 0.3s, box-shadow 0.3s;
      box-shadow: 0 0 0 rgba(0,212,255,0);
    }
    .p-icon i {
      font-size: 1.05rem;
      transition: filter 0.3s, transform 0.3s;
    }
    .pcard:hover .p-icon {
      background: var(--ic-hover-bg, rgba(180,79,255,0.12));
      border-color: var(--ic-hover-border, rgba(180,79,255,0.45));
      transform: scale(1.12) rotate(-6deg);
      box-shadow: 0 0 14px var(--ic-glow, rgba(0,212,255,0.25));
    }
    .pcard:hover .p-icon i { filter: brightness(1.3); transform: scale(1.05); }

    
    .p-title {
      font-size: 0.96rem; font-weight: 700; margin-bottom: 0.35rem;
      background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
      transition: all 0.3s;
      line-height: 1.3;
    }
    .pcard:hover .p-title {
      background: linear-gradient(135deg, #00d4ff, #b44fff);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
      letter-spacing: 0.02em;
    }

    
    .p-desc {
      color: #475569; font-size: 0.79rem; line-height: 1.6;
      margin-bottom: 0.85rem;
      transition: color 0.3s;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .pcard:hover .p-desc { color: #64748b; }

    
    .p-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 1rem; }
    .p-tag {
      font-size: 0.65rem; font-weight: 600;
      padding: 3px 9px; border-radius: 9999px;
      background: rgba(0,212,255,0.06);
      border: 1px solid rgba(180,79,255,0.25);
      color: rgba(0,212,255,0.75);
      transition: all 0.22s;
      letter-spacing: 0.02em;
    }
    .pcard:hover .p-tag {
      background: rgba(180,79,255,0.1);
      border-color: rgba(0,212,255,0.38);
      color: #c084fc;
    }
    .p-tag:hover {
      transform: scale(1.08) translateY(-1px) !important;
      background: rgba(0,212,255,0.15) !important;
      color: #fff !important;
      border-color: var(--cyan) !important;
    }

    
    .p-gh {
      display: inline-flex; align-items: center; gap: 7px;
      font-size: 0.76rem; font-weight: 600;
      padding: 6px 16px; border-radius: 9999px;
      border: 1px solid rgba(0,212,255,0.2);
      background: rgba(0,212,255,0.04);
      color: rgba(0,212,255,0.5);
      text-decoration: none;
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 0.28s ease, transform 0.28s ease,
                  color 0.2s, background 0.2s, border-color 0.2s;
    }
    .pcard:hover .p-gh {
      opacity: 1;
      transform: translateY(0);
      color: var(--cyan);
      border-color: rgba(0,212,255,0.4);
      background: rgba(0,212,255,0.08);
    }
    .p-gh:hover {
      color: #fff !important;
      background: linear-gradient(135deg, rgba(0,212,255,0.18), rgba(180,79,255,0.14)) !important;
      border-color: var(--cyan) !important;
      transform: translateY(-1px) !important;
      box-shadow: 0 4px 14px rgba(0,212,255,0.2);
    }

    

/* ══ المهارات (Lwa) Skills ══ */
    #skills { padding: 8rem 2rem; position: relative; z-index: 1; }
    #skills .skills-categories > .reveal {
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    #skills .skills-categories > .reveal > div:last-child {
      flex: 1;
    }
    .skill-bars {
      height: auto;
    }

    .skills-categories {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
      margin-top: 2.5rem;
      align-items: start;
    }
    @media (max-width: 900px) { .skills-categories { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 580px) { .skills-categories { grid-template-columns: 1fr; } }

    .skill-category-title {
      display: flex; align-items: center; gap: 12px;
      font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
      color: #64748b; margin-bottom: 0.6rem;
    }
    .skill-category-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(to right, var(--border), transparent); }

    .skill-bars { display: flex; flex-direction: column; gap: 0.55rem; height: auto; }

    .skill-row {
      background: var(--card); border: 1px solid var(--border); border-radius: 1rem;
      padding: 0.65rem 1rem; position: relative; overflow: hidden;
      transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    }
    .skill-row::before { content: ''; position: absolute; inset: 0; border-radius: 1rem; background: linear-gradient(135deg, rgba(0,212,255,0.04), rgba(180,79,255,0.06)); opacity: 0; transition: opacity 0.3s; pointer-events: none; }
    .skill-row:hover::before { opacity: 1; }
    @keyframes float-skill {
      0%, 100% { transform: translateX(0px); }
      50%       { transform: translateX(5px); }
    }
    .skill-row { animation: float-skill 4s ease-in-out infinite; }
    .skill-row:nth-child(2) { animation-delay: 0.5s; }
    .skill-row:nth-child(3) { animation-delay: 1s; }
    .skill-row:nth-child(4) { animation-delay: 1.5s; }
    .skill-row:nth-child(5) { animation-delay: 2s; }
    .skill-row:hover { transform: translateX(6px) scale(1.01) !important; border-color: rgba(0,212,255,0.3); box-shadow: 0 4px 20px rgba(0,212,255,0.1); animation-play-state: paused; }

    .skill-row-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; }
    .skill-row-left { display: flex; align-items: center; gap: 10px; }
    .skill-dot { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--cyan), var(--purple)); flex-shrink: 0; }
    .skill-name-text { font-size: 0.875rem; font-weight: 600; color: #e2e8f0; transition: color 0.3s; }
    .skill-row:hover .skill-name-text { color: #fff; }
    .skill-pct { font-size: 0.75rem; font-weight: 700; color: var(--cyan); font-family: monospace; }

    .skill-bar-bg { height: 5px; background: rgba(255,255,255,0.05); border-radius: 9999px; overflow: hidden; }
    .skill-bar-fill {
      height: 5px; border-radius: 9999px;
      background: linear-gradient(to right, var(--cyan), var(--purple));
      position: relative;
    }
    .skill-bar-fill::after {
      content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--purple); box-shadow: 0 0 8px var(--purple);
      opacity: 0; transition: opacity 0.3s 0.8s;
    }
    .skill-bar-fill.filled::after { opacity: 1; }

    .skill-tags-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 0.35rem; }
    .s-pill { font-size: 0.65rem; font-weight: 500; padding: 2px 8px; border-radius: 9999px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); color: #64748b; transition: all 0.25s; }
    .skill-row:hover .s-pill { background: rgba(0,212,255,0.06); border-color: rgba(0,212,255,0.2); color: #94a3b8; }

    

/* ══ التواصل (Lwa) Contact ══ */
    #contact { padding: 7rem 2rem 5rem; position: relative; z-index: 1; }
    .contact-wrapper { max-width: 900px; margin: 4rem auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
    @media(max-width:700px){ .contact-wrapper { grid-template-columns: 1fr; } }

    
    .contact-info-card {
      background: var(--card); border: 1px solid var(--border);
      border-radius: 1.5rem; padding: 2.25rem 2rem;
      position: relative; overflow: hidden;
      display: flex; flex-direction: column; gap: 1.25rem;
      transition: border-color 0.3s, box-shadow 0.3s;
    }
    .contact-info-card::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
      background: linear-gradient(to right, var(--cyan), var(--purple));
    }
    .contact-info-card:hover { border-color: rgba(0,212,255,0.3); box-shadow: 0 20px 60px rgba(0,212,255,0.07); }
    .ci-title { font-size: 1.35rem; font-weight: 800; color: #fff; }
    .ci-title span { background: linear-gradient(135deg, var(--cyan), var(--purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    .ci-desc { color: #64748b; font-size: 0.875rem; line-height: 1.7; }
    .ci-status { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: #94a3b8; background: rgba(0,212,255,0.05); border: 1px solid rgba(0,212,255,0.1); border-radius: 2rem; padding: 0.45rem 1rem; width: fit-content; }
    .ci-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,0.6); animation: pulse-dot 2s ease-in-out infinite; }
    @keyframes pulse-dot { 0%,100%{ box-shadow:0 0 6px rgba(34,197,94,0.5); } 50%{ box-shadow:0 0 14px rgba(34,197,94,0.9); } }

    
    .contact-links-card {
      background: var(--card); border: 1px solid var(--border);
      border-radius: 1.5rem; padding: 2.25rem 2rem;
      position: relative; overflow: hidden;
      display: flex; flex-direction: column; gap: 1rem;
      transition: border-color 0.3s, box-shadow 0.3s;
    }
    .contact-links-card::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
      background: linear-gradient(to right, var(--purple), var(--cyan));
    }
    .contact-links-card:hover { border-color: rgba(180,79,255,0.3); box-shadow: 0 20px 60px rgba(180,79,255,0.07); }
    .cl-label { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; color: #475569; text-transform: uppercase; }

    .c-link {
      display: flex; align-items: center; gap: 14px;
      background: rgba(255,255,255,0.02); border: 1px solid var(--border);
      border-radius: 1rem; padding: 1rem 1.25rem;
      text-decoration: none; color: #94a3b8;
      font-size: 0.875rem; font-weight: 600;
      position: relative; overflow: hidden;
      transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    }
    .c-link::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0)); opacity: 0; transition: opacity 0.3s; }
    .c-link:hover::after { opacity: 1; }
    .c-link-icon { width: 38px; height: 38px; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
    .c-link-text { display: flex; flex-direction: column; gap: 2px; }
    .c-link-name { color: #e2e8f0; font-size: 0.875rem; font-weight: 700; }
    .c-link-sub  { color: #475569; font-size: 0.72rem; font-weight: 500; }
    .c-link-arrow { margin-left: auto; color: #334155; font-size: 0.75rem; transition: transform 0.3s, color 0.3s; }
    .c-link:hover .c-link-arrow { transform: translateX(4px); }

    .c-link.github:hover { border-color: rgba(226,232,240,0.2); box-shadow: 0 8px 28px rgba(255,255,255,0.04); color: #fff; }
    .c-link.github:hover .c-link-arrow { color: #e2e8f0; }
    .c-link.github .c-link-icon { background: rgba(226,232,240,0.06); color: #e2e8f0; }

    .c-link.discord:hover { border-color: rgba(88,101,242,0.4); box-shadow: 0 8px 28px rgba(88,101,242,0.12); }
    .c-link.discord:hover .c-link-arrow { color: #5865F2; }
    .c-link.discord .c-link-icon { background: rgba(88,101,242,0.1); color: #5865F2; }

    

/* ══ الفوتر (Lwa) Footer ══ */
    footer {
      border-top: 1px solid rgba(255,255,255,0.04);
      padding: 3rem 2rem 2.5rem;
      position: relative; z-index: 1;
      background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.3));
    }
    .footer-inner {
      max-width: 900px; margin: 0 auto;
      display: flex; flex-direction: column; align-items: center; gap: 2rem;
    }
    .footer-owner {
      display: flex; align-items: center; gap: 1rem;
      background: var(--card); border: 1px solid var(--border);
      border-radius: 9999px; padding: 0.6rem 1.25rem 0.6rem 0.6rem;
      position: relative; overflow: hidden;
      transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
    }
    .footer-owner::before {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(135deg, rgba(0,212,255,0.04), rgba(180,79,255,0.06));
      opacity: 0; transition: opacity 0.3s;
    }
    .footer-owner:hover::before { opacity: 1; }
    .footer-owner:hover { border-color: rgba(0,212,255,0.25); box-shadow: 0 8px 32px rgba(0,212,255,0.08); transform: translateY(-2px); }
    .fo-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid transparent; background: linear-gradient(var(--card),var(--card)) padding-box, linear-gradient(135deg,var(--cyan),var(--purple)) border-box; flex-shrink: 0; }
    .fo-info { display: flex; flex-direction: column; gap: 2px; }
    .fo-name { font-size: 0.9rem; font-weight: 800; background: linear-gradient(135deg, var(--cyan), var(--purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    .fo-role { font-size: 0.68rem; font-weight: 600; color: #475569; display: flex; align-items: center; gap: 5px; }
    .fo-role::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 6px rgba(0,212,255,0.5); }
    .footer-links { display: flex; align-items: center; gap: 1.5rem; }
    .footer-links a { color: #334155; font-size: 0.75rem; text-decoration: none; transition: color 0.2s; }
    .footer-links a:hover { color: #94a3b8; }
    .footer-dot { width: 3px; height: 3px; border-radius: 50%; background: #1e293b; }
    .footer-copy { color: #1e293b; font-size: 0.72rem; }
    .footer-copy span { background: linear-gradient(135deg, var(--cyan), var(--purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 700; }

    

    .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; }
    .reveal.visible { opacity: 1; transform: translateY(0); }

    @media(max-width: 640px) {
      .stats-row { gap: 1.25rem; } .stat-num { font-size: 1.5rem; }
      .projects-grid { grid-template-columns: 1fr; }
      .contact-box { padding: 2rem 1.5rem; }
      
      .p-gh { opacity: 1; transform: translateY(0); }
    }

    
    .nav-logo img {
      transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), box-shadow 0.4s ease;
    }
    .nav-logo:hover img {
      transform: rotate(15deg) scale(1.15);
      box-shadow: 0 0 20px rgba(0,212,255,0.5), 0 0 40px rgba(180,79,255,0.3);
    }
    .nav-logo span {
      transition: letter-spacing 0.3s ease;
    }
    .nav-logo:hover span {
      letter-spacing: 0.08em;
    }

    
    .owner-card {
      display: flex; align-items: center; gap: 1.25rem;
      background: var(--card); border: 1px solid var(--border);
      border-radius: 1.25rem; padding: 1rem 1.5rem;
      position: relative; overflow: hidden;
      transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
      max-width: 340px; margin: 0 auto;
    }
    .owner-card::before {
      content: ''; position: absolute; inset: 0; border-radius: 1.25rem;
      background: linear-gradient(135deg, rgba(0,212,255,0.05), rgba(180,79,255,0.07));
      opacity: 0; transition: opacity 0.3s; pointer-events: none;
    }
    .owner-card:hover::before { opacity: 1; }
    .owner-card:hover {
      border-color: rgba(0,212,255,0.35);
      box-shadow: 0 8px 32px rgba(0,212,255,0.1), 0 4px 16px rgba(180,79,255,0.1);
      transform: translateY(-3px);
    }
    .owner-card .o-bar {
      position: absolute; top: 0; left: 0; right: 0; height: 2px;
      background: linear-gradient(to right, var(--cyan), var(--purple));
      transform: scaleX(0); transform-origin: left;
      transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
    }
    .owner-card:hover .o-bar { transform: scaleX(1); }
    .owner-avatar {
      width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
      border: 2px solid transparent;
      background: linear-gradient(var(--card), var(--card)) padding-box,
                  linear-gradient(135deg, var(--cyan), var(--purple)) border-box;
      object-fit: cover;
      transition: transform 0.3s ease;
    }
    .owner-card:hover .owner-avatar { transform: scale(1.08); }
    .owner-info { display: flex; flex-direction: column; gap: 2px; }
    .owner-name { font-size: 0.95rem; font-weight: 800; }
    .owner-role {
      font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em;
      color: #64748b;
      display: flex; align-items: center; gap: 5px;
    }
    .owner-role::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); }

    
    * { transition-property: transform, box-shadow, color, background, border-color, opacity, letter-spacing; transition-duration: 0.3s; transition-timing-function: cubic-bezier(0.4,0,0.2,1); }

    img:hover {
      transform: scale(1.09);
      box-shadow: 0 0 20px rgba(0,212,255,0.35), 0 0 40px rgba(180,79,255,0.2);
      z-index: 10; position: relative;
    }
    .btn-primary:hover {
      transform: translateY(-3px) scale(1.04);
      box-shadow: 0 8px 30px rgba(0,212,255,0.45), 0 4px 16px rgba(180,79,255,0.3);
    }
    .btn-outline:hover {
      transform: translateY(-3px) scale(1.04);
      box-shadow: 0 8px 24px rgba(0,212,255,0.25);
    }
    .nav-links a:hover {
      transform: translateY(-2px) scale(1.05);
      text-shadow: 0 0 12px rgba(0,212,255,0.5);
    }
    .c-link:hover {
      transform: translateY(-4px) scale(1.04);
    }
    .c-link.github:hover { box-shadow: 0 8px 24px rgba(255,255,255,0.1); }
    .c-link.discord:hover { box-shadow: 0 8px 24px rgba(88,101,242,0.25); }
    .p-gh:hover {
      transform: translateX(3px) scale(1.05);
      box-shadow: 0 4px 14px rgba(0,212,255,0.2);
    }
    .p-tag:hover, .s-pill:hover, .skill-pill:hover {
      transform: scale(1.12) translateY(-2px);
      box-shadow: 0 4px 12px rgba(0,212,255,0.2);
    }
    #menuBtn:hover {
      transform: scale(1.2) rotate(5deg);
      color: var(--cyan);
      text-shadow: 0 0 12px rgba(0,212,255,0.6);
    }
    .scroll-hint:hover {
      transform: scale(1.2) translateY(5px);
      color: var(--cyan);
      text-shadow: 0 0 12px rgba(0,212,255,0.5);
    }
    .owner-avatar:hover {
      transform: scale(1.1);
      box-shadow: 0 0 20px rgba(0,212,255,0.4), 0 0 40px rgba(180,79,255,0.25);
    }
    .skill-row:hover {
      box-shadow: 0 4px 24px rgba(0,212,255,0.1), 0 0 0 1px rgba(0,212,255,0.15);
    }
    .stat-item:hover .stat-num {
      text-shadow: 0 0 20px rgba(0,212,255,0.5);
      transform: scale(1.08);
      display: inline-block;
    }
    .nav-logo:hover img {
      transform: rotate(12deg) scale(1.18);
      box-shadow: 0 0 18px rgba(0,212,255,0.55), 0 0 36px rgba(180,79,255,0.35);
    }
    .nav-logo:hover span { letter-spacing: 0.08em; }

    

/* ══ الخدمات (Lwa) Services ══ */
    #services { padding: 8rem 2rem; position: relative; z-index: 1; }
    .features-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0.75rem;
      margin-top: 2rem;
    }
    .feat-card {
      position: relative; overflow: hidden;
      border-radius: 1rem;
      padding: 0.75rem 0.9rem;
      min-height: 85px;
      display: flex; flex-direction: column; justify-content: flex-end;
      cursor: default;
      animation: float-card 5s ease-in-out infinite;
      transition: transform 0.35s ease, box-shadow 0.35s ease;
    }
    .feat-card:nth-child(2) { animation-delay: 1s; }
    .feat-card:nth-child(3) { animation-delay: 2s; }
    .feat-card:nth-child(4) { animation-delay: 0.5s; }

    @keyframes float-card {
      0%, 100% { transform: translateY(0px); }
      50%       { transform: translateY(-8px); }
    }
    .feat-card:hover {
      transform: translateY(-14px) scale(1.02) !important;
      box-shadow: 0 24px 60px rgba(0,212,255,0.25), 0 8px 24px rgba(180,79,255,0.2);
      animation-play-state: paused;
    }

    
    .feat-card.c1 { background: linear-gradient(135deg, #00d4ff22, #7c3aed88, #b44fff99); border: 1px solid rgba(0,212,255,0.3); }
    .feat-card.c2 { background: linear-gradient(135deg, #b44fff22, #7c3aed88, #00d4ff99); border: 1px solid rgba(180,79,255,0.3); }
    .feat-card.c3 { background: linear-gradient(135deg, #00d4ff33, #0ea5e988, #7c3aed99); border: 1px solid rgba(0,212,255,0.25); }
    .feat-card.c4 { background: linear-gradient(135deg, #7c3aed33, #b44fff88, #00d4ff66); border: 1px solid rgba(180,79,255,0.25); }

    
    .feat-card::before {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, transparent 60%);
      pointer-events: none;
    }

    
    .feat-card .fc-shape {
      position: absolute; top: 0; right: 0;
      width: 80px; height: 80px; opacity: 0.15;
      border-radius: 50%;
      background: radial-gradient(circle, #fff 0%, transparent 70%);
      transform: translate(30%, -30%);
      transition: opacity 0.3s, transform 0.3s;
    }
    .feat-card:hover .fc-shape { opacity: 0.28; transform: translate(20%, -20%) scale(1.1); }

    .feat-card .fc-dots {
      position: absolute; top: 0.6rem; right: 0.75rem;
      display: flex; flex-direction: column; gap: 4px; align-items: center; opacity: 0.5;
    }
    .feat-card .fc-dots span {
      display: block; width: 6px; height: 6px; border-radius: 50%;
      background: rgba(255,255,255,0.7);
    }
    .feat-card .fc-dots span:first-child { width: 4px; height: 4px; }

    
    .feat-card .fc-icon {
      position: absolute; top: 0.75rem; left: 0.9rem;
      width: 32px; height: 32px; border-radius: 8px;
      background: rgba(255,255,255,0.1);
      border: 1px solid rgba(255,255,255,0.2);
      display: flex; align-items: center; justify-content: center;
      backdrop-filter: blur(4px);
      transition: transform 0.3s, background 0.3s;
    }
    .feat-card:hover .fc-icon { transform: scale(1.1) rotate(-5deg); background: rgba(255,255,255,0.18); }
    .feat-card .fc-icon i { color: #fff; font-size: 0.85rem; }

    
    .feat-card .fc-label {
      font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
      color: rgba(255,255,255,0.5); margin-bottom: 0.25rem; margin-top: 2.5rem; position: relative;
    }
    .feat-card .fc-title {
      font-size: 0.75rem; font-weight: 800; color: #fff; line-height: 1.35; position: relative;
      text-shadow: 0 2px 8px rgba(0,0,0,0.3);
    }

    
    .feat-card .fc-wave {
      position: absolute; bottom: -10px; right: -10px;
      width: 100px; height: 100px; opacity: 0.12;
      border: 2px solid #fff; border-radius: 50%;
      transition: opacity 0.3s, transform 0.3s;
    }
    .feat-card .fc-wave::after {
      content: ''; position: absolute; inset: 12px;
      border: 2px solid #fff; border-radius: 50%;
    }
    .feat-card:hover .fc-wave { opacity: 0.22; transform: scale(1.1); }

    
    @keyframes bounce-in-left {
      0%   { opacity: 0; transform: translateX(-60px); }
      60%  { transform: translateX(10px); }
      80%  { transform: translateX(-5px); }
      100% { opacity: 1; transform: translateX(0); }
    }
    @keyframes bounce-in-up {
      0%   { opacity: 0; transform: translateY(50px); }
      60%  { transform: translateY(-10px); }
      80%  { transform: translateY(5px); }
      100% { opacity: 1; transform: translateY(0); }
    }
    @keyframes fade-in-scale {
      0%   { opacity: 0; transform: scale(0.85); }
      70%  { transform: scale(1.04); }
      100% { opacity: 1; transform: scale(1); }
    }
    @keyframes shimmer-text {
      0%, 100% { background-position: 0% 50%; }
      50%       { background-position: 100% 50%; }
    }
    @keyframes float-word {
      0%, 100% { transform: translateY(0px); }
      50%       { transform: translateY(-6px); }
    }

    
    .hero-name {
      animation: bounce-in-left 0.9s cubic-bezier(0.4,0,0.2,1) both;
    }
    .hero-name .g-text {
      display: inline-block;
      animation: float-word 3s ease-in-out infinite;
    }
    
    .hero-bio {
      animation: bounce-in-up 1s cubic-bezier(0.4,0,0.2,1) 0.3s both;
    }
    
    .section-title {
      animation: none;
    }
    .section-title.animated {
      animation: bounce-in-up 0.8s cubic-bezier(0.4,0,0.2,1) both;
    }
    .section-title .g-text {
      display: inline-block;
      animation: float-word 3.5s ease-in-out infinite;
    }
    
    .contact-title {
      animation: fade-in-scale 0.8s ease both;
    }
    
    #skills .section-title,
    #contact .section-title {
      display: inline-block;
    }
    #skills .section-title.animated,
    #contact .section-title.animated {
      animation: bounce-in-up 0.85s cubic-bezier(0.4,0,0.2,1) both;
    }

  
    

/* ══ المميزات (Lwa) Features ══ */
    #features { padding: 8rem 1.5rem; }
    .features-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      justify-content: center;
      margin-top: 2.5rem;
    }
    .feat-pill {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 2rem;
      padding: 0.55rem 1.1rem;
      font-size: 0.9rem;
      color: var(--text);
      font-weight: 500;
      transition: all 0.3s ease;
      cursor: default;
      position: relative;
      overflow: hidden;
    }
    .feat-pill::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(0,255,224,0.05), rgba(168,85,247,0.05));
      opacity: 0;
      transition: opacity 0.3s;
    }
    .feat-pill:hover::before { opacity: 1; }
    .feat-pill:hover {
      border-color: var(--cyan);
      transform: translateY(-2px);
      box-shadow: 0 4px 20px rgba(0,255,224,0.15);
      color: var(--cyan);
    }
    .feat-pill span { font-size: 1.1rem; }
    .feat-pill .fp-icon {
      width: 26px; height: 26px;
      border-radius: 7px;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.72rem;
      flex-shrink: 0;
      background: rgba(0,212,255,0.1);
      border: 1px solid rgba(0,212,255,0.25);
      color: var(--cyan);
      transition: background 0.3s, border-color 0.3s, transform 0.3s;
    }
    .feat-pill .fp-icon.p {
      background: rgba(180,79,255,0.1);
      border: 1px solid rgba(180,79,255,0.28);
      color: var(--purple);
    }
    .feat-pill:hover .fp-icon { transform: scale(1.1) rotate(-5deg); }

    .p-price { font-size: 0.82rem; color: #64748b; margin-top: 0.6rem; font-weight: 500; }

    
    @keyframes pill-drift-1 {
      0%   { transform: translateX(0px) translateY(0px); opacity:1; }
      45%  { transform: translateX(-18px) translateY(-4px); opacity:0.7; }
      50%  { transform: translateX(22px) translateY(3px); opacity:0; }
      55%  { transform: translateX(22px) translateY(3px); opacity:0; }
      100% { transform: translateX(0px) translateY(0px); opacity:1; }
    }
    @keyframes pill-drift-2 {
      0%   { transform: translateX(0px) translateY(0px); opacity:1; }
      40%  { transform: translateX(16px) translateY(-6px); opacity:0.6; }
      50%  { transform: translateX(-20px) translateY(4px); opacity:0; }
      55%  { transform: translateX(-20px) translateY(4px); opacity:0; }
      100% { transform: translateX(0px) translateY(0px); opacity:1; }
    }
    @keyframes pill-drift-3 {
      0%   { transform: translateX(0px) scale(1); opacity:1; }
      45%  { transform: translateX(20px) scale(0.92); opacity:0.5; }
      50%  { transform: translateX(-18px) scale(0.88); opacity:0; }
      55%  { transform: translateX(-18px) scale(0.88); opacity:0; }
      100% { transform: translateX(0px) scale(1); opacity:1; }
    }
    @keyframes pill-drift-4 {
      0%   { transform: translateY(0px); opacity:1; }
      45%  { transform: translateY(-8px); opacity:0.6; }
      50%  { transform: translateY(10px); opacity:0; }
      55%  { transform: translateY(10px); opacity:0; }
      100% { transform: translateY(0px); opacity:1; }
    }
    @keyframes pill-glow {
      0%,100% { box-shadow: 0 0 0px rgba(0,212,255,0); border-color: rgba(255,255,255,0.08); color: #cbd5e1; }
      50%      { box-shadow: 0 0 14px rgba(0,212,255,0.35), 0 0 28px rgba(180,79,255,0.2); border-color: rgba(0,212,255,0.5); color: #fff; }
    }

    .feat-pill { animation: pill-glow 4s ease-in-out infinite; }
    .feat-pill:hover { animation: none; }

    
    #features .feat-pill:nth-child(4n+1) { animation: pill-drift-1 var(--dur, 6s) ease-in-out infinite var(--delay, 0s), pill-glow 4s ease-in-out infinite var(--delay, 0s); }
    #features .feat-pill:nth-child(4n+2) { animation: pill-drift-2 var(--dur, 7s) ease-in-out infinite var(--delay, 0s), pill-glow 4s ease-in-out infinite var(--delay, 0s); }
    #features .feat-pill:nth-child(4n+3) { animation: pill-drift-3 var(--dur, 5s) ease-in-out infinite var(--delay, 0s), pill-glow 4s ease-in-out infinite var(--delay, 0s); }
    #features .feat-pill:nth-child(4n)   { animation: pill-drift-4 var(--dur, 8s) ease-in-out infinite var(--delay, 0s), pill-glow 4s ease-in-out infinite var(--delay, 0s); }
    #features .feat-pill:hover { animation: none; background: rgba(0,212,255,0.1); border-color: rgba(0,212,255,0.5); color:#fff; }

  
    
    .skill-icon {
      width: 24px; height: 24px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      transition: transform 0.3s, filter 0.3s;
    }
    .skill-icon i { font-size: 1.2rem; line-height: 1; }
    .skill-row:hover .skill-icon i { filter: drop-shadow(0 0 6px currentColor); transform: scale(1.15); }

    
    
    @media (max-width: 1024px) {
      .features-grid { grid-template-columns: repeat(2, 1fr); }
      .skill-grid { grid-template-columns: repeat(2, 1fr) !important; }
      .projects-grid { grid-template-columns: repeat(2, 1fr); }
      .stats-row { gap: 1.5rem; }
    }
    
    @media (max-width: 640px) {
      .features-grid { grid-template-columns: 1fr; }
      .feat-card[style*="grid-column"] { grid-column: auto !important; }
      .skill-grid { grid-template-columns: 1fr !important; }
      .projects-grid { grid-template-columns: 1fr; }
      .stats-row { flex-wrap: wrap; gap: 1rem; }
      .stat-item { min-width: 80px; }
      .hero-name { font-size: clamp(2rem, 8vw, 3rem); }
      .section-title { font-size: clamp(1.5rem, 6vw, 2.5rem); }
    }
  
    

    
    .pm-overlay {
      position: fixed; inset: 0; z-index: 9000;
      display: flex; align-items: center; justify-content: center;
      padding: 1.5rem;
      background: rgba(4,5,15,0.0);
      backdrop-filter: blur(0px);
      -webkit-backdrop-filter: blur(0px);
      pointer-events: none;
      transition: background 0.35s ease, backdrop-filter 0.35s ease;
      
      transform: translateZ(0);
    }
    .pm-overlay.pm-active {
      background: rgba(4,5,15,0.72);
      backdrop-filter: blur(18px) saturate(140%);
      -webkit-backdrop-filter: blur(18px) saturate(140%);
      pointer-events: none;
    }
    .pm-overlay.pm-active .pm-box {
      pointer-events: all;
    }

    
    .pm-box {
      position: relative;
      background: linear-gradient(145deg, rgba(12,13,28,0.98), rgba(18,19,38,0.99));
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 22px;
      padding: 2.4rem 2.5rem 2.2rem;
      width: 100%; max-width: 640px;
      box-shadow:
        0 0 0 1px rgba(0,212,255,0.08),
        0 32px 80px rgba(0,0,0,0.7),
        0 0 60px rgba(0,212,255,0.06),
        inset 0 1px 0 rgba(255,255,255,0.06);
      opacity: 0;
      transform: scale(0.88) translateY(16px) translateZ(0);
      transition: opacity 0.32s cubic-bezier(0.4,0,0.2,1),
                  transform 0.32s cubic-bezier(0.34,1.56,0.64,1);
      overflow: hidden;
      
      will-change: transform, opacity;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }
    .pm-box::before {
      content: '';
      position: absolute; top: 0; left: 0; right: 0; height: 2px;
      background: linear-gradient(to right, var(--cyan), var(--purple), var(--cyan));
      background-size: 200% 100%;
      animation: pm-bar-shine 3s linear infinite;
      border-radius: 22px 22px 0 0;
    }
    @keyframes pm-bar-shine {
      0%   { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }
    .pm-box-visible {
      opacity: 1;
      transform: scale(1) translateY(0) translateZ(0);
    }

    
    .pm-close {
      position: absolute; top: 1rem; right: 1rem;
      width: 32px; height: 32px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 50%;
      color: #94a3b8;
      font-size: 0.85rem;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
      z-index: 2;
    }
    .pm-close:hover {
      background: rgba(239,68,68,0.15);
      border-color: rgba(239,68,68,0.4);
      color: #ef4444;
      transform: rotate(90deg) scale(1.1);
    }

    
    .pm-header {
      display: flex; align-items: center; gap: 1.1rem;
      margin-bottom: 1.2rem;
      padding-right: 2rem;
    }
    .pm-icon-box {
      width: 60px; height: 60px; flex-shrink: 0;
      border: 1px solid rgba(0,212,255,0.25);
      border-radius: 16px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.4rem;
      transition: box-shadow 0.3s;
    }
    .pm-header-text { flex: 1; min-width: 0; }
    .pm-meta-row {
      display: flex; align-items: center; gap: 8px;
      margin-bottom: 0.35rem;
    }
    .pm-num-badge {
      font-size: 0.62rem; font-weight: 700;
      font-family: 'JetBrains Mono', monospace;
      color: rgba(0,212,255,0.6);
      background: rgba(0,212,255,0.08);
      border: 1px solid rgba(0,212,255,0.18);
      padding: 2px 8px; border-radius: 9999px;
      letter-spacing: 0.04em;
    }
    .pm-cat-badge {
      font-size: 0.62rem; font-weight: 600;
      color: rgba(180,79,255,0.8);
      background: rgba(180,79,255,0.08);
      border: 1px solid rgba(180,79,255,0.2);
      padding: 2px 9px; border-radius: 9999px;
      letter-spacing: 0.03em;
    }
    .pm-title {
      font-size: 1.3rem; font-weight: 800;
      background: linear-gradient(135deg, #ffffff, #cbd5e1);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
      line-height: 1.2;
      margin: 0;
    }

    
    .pm-divider {
      height: 1px;
      background: linear-gradient(to right, transparent, rgba(0,212,255,0.2), rgba(180,79,255,0.15), transparent);
      margin-bottom: 1.25rem;
    }

    /* ══ Glassmorphic sub-panels (Lwa) ══ */
    .pm-glass-panel {
      background: rgba(255,255,255,0.025);
      border: 1px solid rgba(0,212,255,0.1);
      border-radius: 14px;
      padding: 1.1rem 1.3rem 1.15rem;
      margin-bottom: 0.9rem;
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
    }
    .pm-glass-panel-tech {
      border-color: rgba(180,79,255,0.12);
      background: rgba(180,79,255,0.018);
    }
    .pm-panel-label {
      font-size: 0.6rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.1em;
      color: rgba(0,212,255,0.5);
      display: flex; align-items: center; gap: 6px;
      margin-bottom: 0.65rem;
    }
    .pm-glass-panel-tech .pm-panel-label { color: rgba(180,79,255,0.6); }

    .pm-desc {
      color: #94a3b8;
      font-size: 0.875rem;
      line-height: 1.82;
      margin: 0;
    }

    .pm-tags {
      display: flex; flex-wrap: wrap; gap: 7px;
      margin: 0;
    }
    .pm-tag {
      font-size: 0.7rem; font-weight: 600;
      padding: 4px 12px; border-radius: 9999px;
      background: rgba(0,212,255,0.07);
      border: 1px solid rgba(180,79,255,0.28);
      color: rgba(0,212,255,0.85);
      letter-spacing: 0.02em;
      transition: all 0.2s;
    }
    .pm-tag:hover {
      background: rgba(0,212,255,0.14);
      border-color: var(--cyan);
      color: #fff;
      transform: translateY(-1px);
    }

    
    .pm-actions {
      display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;
      padding-top: 1.5rem;
      margin-top: 0.4rem;
      border-top: 1px solid rgba(255,255,255,0.055);
    }
    .pm-btn {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 0.82rem; font-weight: 600;
      padding: 9px 20px; border-radius: 9999px;
      text-decoration: none; cursor: pointer;
      transition: all 0.25s ease;
      border: 1px solid transparent;
      font-family: inherit;
    }
    .pm-btn-primary {
      background: linear-gradient(135deg, rgba(0,212,255,0.18), rgba(180,79,255,0.14));
      border-color: rgba(0,212,255,0.35);
      color: var(--cyan);
      padding: 11px 30px;
      font-size: 0.85rem;
    }
    .pm-btn-primary:hover {
      background: linear-gradient(135deg, rgba(0,212,255,0.28), rgba(180,79,255,0.22));
      border-color: var(--cyan);
      color: #fff;
      box-shadow: 0 4px 20px rgba(0,212,255,0.25);
      transform: translateY(-2px);
    }
    .pm-btn-ghost {
      background: rgba(255,255,255,0.04);
      border-color: rgba(255,255,255,0.1);
      color: #64748b;
    }
    .pm-btn-ghost:hover {
      background: rgba(255,255,255,0.08);
      border-color: rgba(255,255,255,0.2);
      color: #94a3b8;
      transform: translateY(-1px);
    }

    
    @media (max-width: 600px) {
      /* overlay: 1rem padding all sides, vertically centered in visible viewport */
      .pm-overlay {
        padding: 1rem;
        align-items: center;
      }
      .pm-overlay.pm-active {
        backdrop-filter: blur(10px) saturate(120%);
        -webkit-backdrop-filter: blur(10px) saturate(120%);
      }

      /* box: compact 92vw, capped height, smooth vertical scroll */
      .pm-box {
        width: 92vw;
        max-width: 92vw;
        max-height: 70vh;   /* vh fallback for old browsers */
        max-height: 70svh;  /* svh = excludes browser chrome (Safari/Chrome) */
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 1rem 1rem 1.1rem;
        border-radius: 16px;
      }

      /* X button: enough breathing room from box edges */
      .pm-close {
        top: 0.75rem;
        right: 0.75rem;
        width: 30px;
        height: 30px;
        font-size: 0.78rem;
      }

      /* interior: proportionally compact */
      .pm-title      { font-size: 1rem; }
      .pm-num-badge,
      .pm-cat-badge  { font-size: 0.58rem; }
      .pm-icon-box   { width: 42px; height: 42px; font-size: 1rem; border-radius: 11px; }
      .pm-header     { gap: 0.7rem; margin-bottom: 0.7rem; padding-top: 0.25rem; padding-right: 2.2rem; }
      .pm-divider    { margin-bottom: 0.65rem; }
      .pm-glass-panel { padding: 0.65rem 0.8rem 0.7rem; margin-bottom: 0.55rem; border-radius: 10px; }
      .pm-panel-label { font-size: 0.55rem; margin-bottom: 0.4rem; gap: 5px; }
      .pm-desc       { font-size: 0.79rem; line-height: 1.62; }
      .pm-tag        { font-size: 0.62rem; padding: 3px 9px; }
      .pm-tags       { gap: 5px; }
      .pm-actions    { flex-direction: column; padding-top: 0.75rem; margin-top: 0; }
      .pm-btn        { justify-content: center; width: 100%; padding: 9px 18px; font-size: 0.78rem; }
    }

    

/* ══ الدوكس (Lwa) Docs ══ */
    #docs-page {
      display:none;
      flex-direction: row;
      align-items: stretch;
      background: #000 !important;
      padding: 0;
      
      height: calc(100vh - 94px);
      overflow: hidden;
    }
    #docs-page > .docs-layout {
      width:100%; max-width:1400px;
      background: transparent;
      border: none;
      box-shadow: none;
      border-radius: 0;
    }
    #docs-page.active { display:flex !important; }
    @media(max-width:900px){ #docs-page{ height: calc(100vh - 94px); } }
    @media(max-width:768px){ #docs-page{ height: calc(100vh - 94px); } }
    #main-site { display:block; background:#000 !important; }
    #main-site.hidden { display:none; }

    :root { --cyan:#00d4ff; --purple:#b44fff; --dark:#000; --card:#080808; --border:#1a1a2e; }
    *{ box-sizing:border-box; margin:0; padding:0; }
    .g-text{ background:linear-gradient(135deg,#00d4ff,#9b59f5,#b44fff); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

    
    .docs-layout{
      display: flex;
      flex: 1;
      flex-direction: row;
      flex-wrap: nowrap;
      overflow: hidden;
      width: 100%;
      max-width: 1400px;
      margin: 0 auto;
      gap: 12px;
      padding: 12px 12px 0;
      align-items: stretch;
      min-height: 0;
    }

    
    .sidebar{
      width:230px; flex-shrink:0;
      /* position:relative + z-index:2 puts sidebar above docs-content
         (which is position:relative) in the stacking order so its hit area
         is never captured by the content column.
         min-height:0 removes the flex default min-height:auto floor so
         overflow-y:auto actually fires and the sidebar scrolls.           */
      position: relative;
      z-index: 2;
      align-self: stretch;
      min-height: 0;
      pointer-events: auto;
      touch-action: pan-y;
      background: rgba(0,0,2,0.78);
      backdrop-filter: blur(24px) saturate(160%);
      -webkit-backdrop-filter: blur(24px) saturate(160%);
      border: 1px solid rgba(0,212,255,0.18);
      border-radius: 20px;
      box-shadow:
        0 8px 40px rgba(0,0,0,0.7),
        0 0 0 1px rgba(180,79,255,0.08),
        inset 0 1px 0 rgba(0,212,255,0.1);
      overflow-y: auto; overflow-x: hidden;
      padding: 0.5rem 0 0.6rem;
      transition: transform 0.3s cubic-bezier(.4,0,.2,1);
    }
    .sidebar-logo {
      display:flex; align-items:center; gap:10px;
      padding: 0.75rem 1.25rem 0.75rem;
      border-bottom: 1px solid rgba(255,255,255,0.05);
      margin-bottom:0.75rem;
    }
    .sidebar-logo-icon {
      width:30px; height:30px; border-radius:8px;
      background: linear-gradient(135deg, var(--cyan), var(--purple));
      display:flex; align-items:center; justify-content:center;
      font-size:0.8rem; color:#fff; flex-shrink:0;
    }
    .sidebar-logo-text { font-size:0.82rem; font-weight:700; color:#e2e8f0; letter-spacing:0.04em; }
    .sidebar-logo-sub  { font-size:0.62rem; color:#3d4a60; }

    .sidebar-section { margin-bottom:0.25rem; }
    .sidebar-group-label {
      font-size:0.57rem; font-weight:800; letter-spacing:0.2em; text-transform:uppercase;
      background: linear-gradient(135deg, var(--cyan), var(--purple));
      -webkit-background-clip: text; background-clip: text; color: transparent;
      padding: 0.5rem 1.25rem 0.2rem;
      display:flex; align-items:center; gap:8px;
    }
    .sidebar-group-label::after {
      content:''; flex:1; height:1px;
      background: linear-gradient(90deg, rgba(0,212,255,0.2), rgba(180,79,255,0.12), transparent);
    }

    .sidebar-item {
      display:flex; align-items:center; gap:8px;
      padding: 0.28rem 0.75rem 0.28rem 0.9rem;
      font-size:0.73rem; font-weight:500;
      color:#3d4f68; text-decoration:none; cursor:pointer;
      transition: all 0.18s ease;
      margin: 1px 0.6rem;
      border-radius:7px;
      border: 1px solid transparent;
      border-left: 2px solid transparent;
      position:relative; z-index:2;
      pointer-events: auto;
      touch-action: manipulation;
    }
    .sidebar-item:hover {
      color: #94a3b8;
      background: linear-gradient(90deg, rgba(0,212,255,0.07), rgba(180,79,255,0.04));
      border-left-color: rgba(0,212,255,0.45);
    }
    .sidebar-item:hover .si-icon-wrap {
      color: var(--cyan);
      border-color: rgba(0,212,255,0.22);
    }
    .sidebar-item.active {
      color: var(--cyan);
      background: linear-gradient(90deg, rgba(0,212,255,0.12), rgba(180,79,255,0.05));
      border-left-color: var(--cyan);
      box-shadow: inset 0 0 16px rgba(0,212,255,0.06), 0 0 8px rgba(0,212,255,0.08);
    }
    .sidebar-item.active .si-icon-wrap {
      background: linear-gradient(135deg, var(--cyan), var(--purple));
      border-color: transparent;
      color:#fff;
      box-shadow: 0 0 10px rgba(0,212,255,0.45);
    }
    .sidebar-item.active .si-label { color: var(--cyan); font-weight:700; }

    .si-icon-wrap {
      width:24px; height:24px; border-radius:6px; flex-shrink:0;
      display:flex; align-items:center; justify-content:center;
      border: 1px solid rgba(255,255,255,0.06);
      background: rgba(255,255,255,0.02);
      color: #3d4f68;
      font-size:0.68rem;
      transition: all 0.18s ease;
    }
    .si-label { flex:1; }
    .si-badge {
      font-size:0.52rem; font-weight:700; padding:1px 5px; border-radius:4px;
      background: rgba(0,212,255,0.08); color:rgba(0,212,255,0.6);
      border: 1px solid rgba(0,212,255,0.12); letter-spacing:0.04em;
      text-transform:uppercase; flex-shrink:0;
    }
    .sidebar-item.active .si-badge { background: rgba(0,212,255,0.18); color:var(--cyan); }
    .sidebar::-webkit-scrollbar { width:2px; }
    .sidebar::-webkit-scrollbar-thumb { background:rgba(0,212,255,0.15); border-radius:2px; }

    /* ── Sidebar folder (nested dropdown) ── */
    .sidebar-folder { margin:0; }
    .sidebar-folder-btn {
      display:flex; align-items:center; gap:0.35rem;
      width:100%; padding:0.35rem 0.75rem;
      background:none; border:none; cursor:pointer;
      font-size:0.65rem; font-weight:700; letter-spacing:0.08em;
      color:#475569; text-transform:uppercase;
      transition:color .15s;
    }
    .sidebar-folder-btn:hover { color:#94a3b8; }
    .sidebar-folder-btn .sf-arrow {
      margin-left:auto; font-size:0.58rem;
      transition:transform .2s;
      color:#475569;
    }
    .sidebar-folder-btn.open { color:#7a8fa6; }
    .sidebar-folder-btn.open .sf-arrow { transform:rotate(90deg); }
    .sidebar-folder-items { display:none; }
    .sidebar-folder-items.open { display:block; }
    .sidebar-folder-items .sidebar-item { padding-left:1.6rem; }
    /* External SPA link items in sidebar */
    .sidebar-item.si-external { opacity:0.82; }
    .sidebar-item.si-external .si-ext-icon {
      font-size:0.55rem; color:#475569; margin-left:auto; flex-shrink:0;
    }
    /* ── Hybrid dropdown: toggle lives INSIDE the <a> as last flex child ── */
    .sf-toggle {
      margin-left:auto; flex-shrink:0;
      width:20px; height:20px;
      background:none; border:none; cursor:pointer;
      color:#475569;
      display:flex; align-items:center; justify-content:center;
      border-radius:4px;
      transition:color .15s, background .15s;
    }
    .sf-toggle:hover { color:#94a3b8; background:rgba(255,255,255,0.08); }
    .sf-toggle .sf-arrow { font-size:0.58rem; transition:transform .2s; }
    .sf-toggle.open .sf-arrow { transform:rotate(90deg); }

    
    .docs-content{
      flex:1; overflow-x:hidden;
      overflow-y: auto;
      height: 100%;
      /* min-height:0 removes the flex default min-height:auto floor so
         overflow-y:auto fires correctly within the flex chain             */
      min-height: 0;
      min-width: 0;
      background: rgba(0,0,2,0.96);
      border: 1px solid rgba(0,212,255,0.12);
      border-radius: 20px;
      box-shadow:
        0 8px 40px rgba(0,0,0,0.8),
        0 0 0 1px rgba(180,79,255,0.06),
        inset 0 1px 0 rgba(0,212,255,0.07);
      position:relative;
      padding: 2rem 1.5rem 2.5rem 2rem;
    }
    .docs-content::before{
      content:'';
      position:absolute; inset:0;
      pointer-events:none; z-index:0;
      border-radius: 20px;
      background-image:
        linear-gradient(rgba(0,212,255,0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,212,255,0.018) 1px, transparent 1px);
      background-size: 48px 48px;
      mask-image: radial-gradient(ellipse 90% 70% at 50% 20%, black 0%, transparent 100%);
      -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 20%, black 0%, transparent 100%);
    }

    .docs-inner{
      max-width: 780px;
      padding: 0 0 3rem;
      position:relative; z-index:1;
    }
    @media(max-width:900px){ .docs-inner{ padding:0 0 2rem; } }
    @media(max-width:768px){ .docs-inner{ padding:0.25rem 0 2rem; } }

    #docsContent{ animation: fadeInUp 0.3s ease; }
    @keyframes fadeInUp{
      from{ opacity:0; }
      to{   opacity:1; }
    }
    /* NOTE: transform removed from fadeInUp — any transform on #docsContent
       (or its ancestor #docs-page via spaFadeIn) creates a stacking context
       that displaces position:fixed children and hides content during fade. */

    
    .page-header{
      margin-bottom:2rem; padding-bottom:1.75rem;
      border-bottom:1px solid rgba(255,255,255,0.05);
      position:relative;
      padding-top: 0.5rem;
    }
    @media(max-width:768px){
      .page-header{ padding-top: 1rem !important; }
    }
    .page-header::after{
      content:''; position:absolute; bottom:-1px; left:0;
      width:60px; height:2px;
      background:linear-gradient(90deg, var(--cyan), var(--purple));
      border-radius:2px;
    }
    .page-badge{
      display:inline-flex; align-items:center; gap:6px;
      font-size:0.63rem; font-weight:800; letter-spacing:0.16em; text-transform:uppercase;
      color: #00d4ff;
      background: rgba(55,20,180,0.12);
      border: 1px solid rgba(0,212,255,0.55);
      box-shadow: 0 0 14px rgba(0,212,255,0.22), 0 0 28px rgba(0,212,255,0.08), inset 0 0 10px rgba(0,212,255,0.05);
      text-shadow: 0 0 10px rgba(0,212,255,0.65), 0 0 20px rgba(0,212,255,0.3);
      padding:5px 15px; border-radius:9999px; margin-bottom:8px;
    }
    .page-title{
      font-size:1.9rem; font-weight:900; color:#fff;
      font-family: 'Space Grotesk', 'Inter', sans-serif;
      margin-bottom:0.5rem; line-height:1.2;
      letter-spacing:-0.02em;
      text-shadow: 0 0 30px rgba(0,212,255,0.18), 0 0 60px rgba(0,212,255,0.07);
    }
    .page-subtitle{ color:#475569; font-size:0.87rem; line-height:1.7; max-width:580px; }

    
    .doc-section{
      margin-bottom:2.4rem;
      background: rgba(0,212,255,0.02);
      border:1px solid rgba(0,212,255,0.1);
      border-radius:12px;
      padding:1.8rem 1.8rem 2rem;
      position:relative; overflow:hidden;
      transition:border-color 0.2s, background 0.2s;
    }
    .doc-section:hover{
      border-color:rgba(0,212,255,0.18);
      background: linear-gradient(135deg, rgba(0,212,255,0.03) 0%, rgba(180,79,255,0.025) 100%);
      box-shadow: 0 0 0 1px rgba(180,79,255,0.08);
    }
    .doc-section::before{
      content:''; position:absolute; top:0; left:0; right:0; height:1px;
      background:linear-gradient(90deg, transparent, rgba(0,212,255,0.2), rgba(180,79,255,0.15), transparent);
    }

    
    .doc-section h2{
      font-size:1.05rem; font-weight:800;
      font-family: 'Space Grotesk', 'Inter', sans-serif;
      color: var(--cyan);
      text-shadow: 0 0 14px rgba(0,212,255,0.28), 0 0 30px rgba(0,212,255,0.1);
      margin-bottom:1.3rem; display:flex; align-items:center; gap:8px;
    }
    .doc-section h2 .sec-icon{
      order: 1;
    }
    .doc-section h3{
      font-size:0.88rem; font-weight:700; color:#cbd5e1;
      margin:1.6rem 0 0.7rem;
    }
    
    h3.doc-h3{
      font-size:1rem; font-weight:800; margin:2rem 0 0.85rem;
      display:flex; align-items:center; gap:8px;
      background: linear-gradient(135deg, var(--cyan) 30%, var(--purple) 100%);
      -webkit-background-clip: text; background-clip: text; color: transparent;
      -webkit-text-fill-color: transparent;
    }
    h3.doc-h3 i{
      order: 1; flex-shrink: 0;
      background: linear-gradient(135deg, var(--cyan) 0%, var(--purple) 100%);
      -webkit-background-clip: text; background-clip: text;
      color: transparent !important; -webkit-text-fill-color: transparent !important;
      filter: drop-shadow(0 0 5px rgba(0,212,255,0.35));
    }
    
    .note-box i{
      background: linear-gradient(135deg, var(--cyan) 0%, var(--purple) 100%);
      -webkit-background-clip: text; background-clip: text;
      color: transparent !important; -webkit-text-fill-color: transparent !important;
      filter: drop-shadow(0 0 4px rgba(0,212,255,0.3));
    }
    
    .doc-section li strong i, .doc-section li i{
      order: 1;
      background: linear-gradient(135deg, var(--cyan) 0%, var(--purple) 100%);
      -webkit-background-clip: text; background-clip: text;
      color: transparent !important; -webkit-text-fill-color: transparent !important;
      filter: drop-shadow(0 0 3px rgba(0,212,255,0.25));
    }
    
    .doc-table th i{
      background: linear-gradient(135deg, var(--cyan) 0%, var(--purple) 100%);
      -webkit-background-clip: text; background-clip: text;
      color: transparent !important; -webkit-text-fill-color: transparent !important;
    }
    
    .doc-table td:not(.icon-td) i{
      background: linear-gradient(135deg, var(--cyan) 0%, var(--purple) 100%);
      -webkit-background-clip: text; background-clip: text;
      color: transparent !important; -webkit-text-fill-color: transparent !important;
    }
    .doc-section p{
      font-size:0.855rem; color:#94a3b8; line-height:1.75;
      margin-bottom:0.6rem;
    }
    .doc-section ul{
      list-style:none; display:flex; flex-direction:column; gap:0.45rem;
      margin:0.75rem 0; padding:0;
    }
    .doc-section ul li{
      font-size:0.845rem; color:#94a3b8;
      display:flex; align-items:flex-start; gap:12px; line-height:1.6;
      padding: 10px 14px;
      background: rgba(255,255,255,0.015);
      border: 0.5px solid rgba(0,212,255,0.07);
      border-radius: 8px;
      transition: all 0.18s ease;
    }
    .doc-section ul li:hover{
      border-color: rgba(0,212,255,0.2);
      background: rgba(0,212,255,0.03);
      color: #cbd5e1;
    }
    .doc-section ul li strong{
      color: var(--cyan);
      font-weight: 700;
    }
    .doc-section ul li::before{
      content: '›';
      background: linear-gradient(135deg, var(--cyan), var(--purple));
      -webkit-background-clip: text; background-clip: text;
      color: transparent; -webkit-text-fill-color: transparent;
      font-size: 1.15rem; font-weight: 900; flex-shrink: 0; margin-top: 0px;
      filter: drop-shadow(0 0 4px rgba(0,212,255,0.4));
      line-height: 1.4;
    }
    .sec-icon{ transition: all 0.2s; }
    .sec-icon i {
      background: linear-gradient(135deg, var(--cyan) 0%, var(--purple) 100%);
      -webkit-background-clip: text; background-clip: text;
      color: transparent !important;
      -webkit-text-fill-color: transparent !important;
      filter: drop-shadow(0 0 4px rgba(0,212,255,0.3));
    }
    .doc-section:hover .sec-icon i{
      filter: drop-shadow(0 0 8px rgba(0,212,255,0.5)) drop-shadow(0 0 4px rgba(180,79,255,0.3));
    }
    .doc-section:hover h2{
      color: var(--cyan);
      text-shadow: 0 0 20px rgba(0,212,255,0.4), 0 0 40px rgba(180,79,255,0.15);
    }

    
    .price-grid{
      display:grid; grid-template-columns:repeat(3,1fr); gap:0.75rem;
      margin-top:0.5rem;
    }
    @media(max-width:900px){ .price-grid{ grid-template-columns:1fr; gap:0.6rem; } }
    .price-tier{
      background:rgba(255,255,255,0.025);
      border:1px solid rgba(255,255,255,0.07);
      border-radius:10px; padding:1rem 1.1rem;
      display:flex; flex-direction:column; gap:0.5rem;
      transition:border-color 0.2s, background 0.2s, box-shadow 0.2s;
    }
    .price-tier:hover,
    .price-tier.pt-featured:hover{
      border-color:rgba(0,212,255,0.4) !important;
      background:linear-gradient(135deg, rgba(0,212,255,0.08), rgba(180,79,255,0.06)) !important;
      box-shadow:0 0 22px rgba(0,212,255,0.1), 0 0 22px rgba(180,79,255,0.07) !important;
    }
    .price-tier.pt-featured{
      border-color:rgba(255,255,255,0.07);
      background:rgba(255,255,255,0.025);
    }
    .pt-header{ display:flex; align-items:center; gap:8px; }
    .pt-icon{
      font-size:1.1rem;
      order: 1;
    }
    .pt-icon i{
      background: linear-gradient(135deg, var(--cyan) 0%, var(--purple) 100%);
      -webkit-background-clip: text; background-clip: text;
      color: transparent !important;
      -webkit-text-fill-color: transparent !important;
      filter: drop-shadow(0 0 5px rgba(0,212,255,0.3));
    }
    .pt-name{ font-size:0.8rem; font-weight:700; color:#cbd5e1; }
    .pt-price{
      font-size:1.25rem; font-weight:900;
      letter-spacing:-0.02em; line-height:1;
      background: linear-gradient(90deg, var(--cyan) 0%, var(--purple) 100%) !important;
      -webkit-background-clip: text !important; background-clip: text !important;
      color: transparent !important;
      -webkit-text-fill-color: transparent !important;
      filter: drop-shadow(0 0 8px rgba(0,212,255,0.25));
    }
    .pt-from{
      font-size:1.1rem; font-weight:900; margin-left:1px;
      background: linear-gradient(90deg, var(--cyan) 0%, var(--purple) 100%) !important;
      -webkit-background-clip: text !important; background-clip: text !important;
      color: transparent !important;
      -webkit-text-fill-color: transparent !important;
    }
    .pt-desc{ font-size:0.78rem; color:#64748b; line-height:1.5; }

    
    .note-error{
      background:rgba(239,68,68,0.07); border-left:3px solid #ef4444; color:#94a3b8;
    }
    .note-error i{ color:#ef4444; }

    .section-heading{
      font-size:0.7rem; font-weight:800; letter-spacing:0.16em; text-transform:uppercase;
      background: linear-gradient(135deg, var(--cyan), var(--purple));
      -webkit-background-clip: text; background-clip: text; color: transparent;
      margin-bottom:0.75rem;
      display:flex; align-items:center; gap:8px;
    }
    .section-heading::after{
      content:''; flex:1; height:1px;
      background:linear-gradient(90deg, rgba(0,212,255,0.18), rgba(180,79,255,0.12), transparent);
    }
    .doc-text{ color:#64748b; font-size:0.855rem; line-height:1.8; }
    .doc-text strong{ color:#94a3b8; font-weight:600; }
    .doc-text a{ color:var(--cyan); text-decoration:none; border-bottom:1px solid rgba(0,212,255,0.25); transition:all 0.2s; }
    .doc-text a:hover{
      background: linear-gradient(135deg, var(--cyan), var(--purple));
      -webkit-background-clip: text; background-clip: text; color: transparent;
      border-bottom-color: var(--purple);
    }

    code{
      background:rgba(0,212,255,0.07); color:var(--cyan);
      padding:2px 7px; border-radius:5px; font-family:monospace;
      font-size:0.82em; border:1px solid rgba(0,212,255,0.12);
    }

    
    .feat-grid{
      display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
      gap:0.75rem; margin-top:0.85rem;
    }
    .feat-item{
      background: linear-gradient(135deg, rgba(0,212,255,0.03) 0%, rgba(180,79,255,0.025) 100%);
      border: 0.5px solid rgba(0,212,255,0.14);
      border-radius:12px; padding:1rem 1.1rem;
      transition:all 0.22s ease; cursor:default;
      position:relative;
    }
    .feat-item:hover{
      border-color: rgba(0,212,255,0.4);
      background: linear-gradient(135deg, rgba(0,212,255,0.07) 0%, rgba(180,79,255,0.06) 100%);
      box-shadow: 0 0 20px rgba(0,212,255,0.1), 0 0 12px rgba(180,79,255,0.07);
      transform:translateY(-2px);
    }
    .feat-item .fi-icon{ font-size:1.2rem; margin-bottom:0.55rem; display:block; }
    .feat-item .fi-icon i{
      background: linear-gradient(135deg, var(--cyan) 0%, var(--purple) 100%);
      -webkit-background-clip: text; background-clip: text;
      color: transparent !important;
      -webkit-text-fill-color: transparent !important;
      filter: drop-shadow(0 0 5px rgba(0,212,255,0.35));
      transition: filter 0.22s;
    }
    .feat-item:hover .fi-icon i{
      filter: drop-shadow(0 0 10px rgba(0,212,255,0.55)) drop-shadow(0 0 5px rgba(180,79,255,0.35));
    }
    .feat-item .fi-title{ font-size:0.78rem; font-weight:700; color:var(--cyan); margin-bottom:0.3rem; transition: all 0.22s; text-shadow:0 0 8px rgba(0,212,255,0.2); }
    .feat-item:hover .fi-title{ text-shadow:0 0 14px rgba(0,212,255,0.4); }
    .feat-item .fi-desc{ font-size:0.72rem; color:#64748b; line-height:1.55; }

    
    .doc-table td.icon-td{
      display: flex; align-items: center; gap: 16px;
      overflow: hidden;
    }
    .doc-table td.icon-td i{
      background: linear-gradient(135deg, var(--cyan) 0%, var(--purple) 100%);
      -webkit-background-clip: text; background-clip: text;
      color: transparent !important;
      -webkit-text-fill-color: transparent !important;
      filter: drop-shadow(0 0 6px rgba(0,212,255,0.45)) drop-shadow(0 0 12px rgba(180,79,255,0.25));
      flex-shrink: 0;
      min-width: 20px; text-align: center;
    }
    .doc-table td.icon-td .icon-td-text{
      flex: 1; min-width: 0;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      line-height: 1.5;
    }
    .doc-table tbody tr:hover .icon-td-text { color: var(--cyan); }
    .doc-table tbody tr:hover td:first-child { color: inherit; font-weight: inherit; }

    
    .sec-list{ display:flex; flex-direction:column; margin:0.75rem 0; }
    .sec-row{
      display:flex; align-items:flex-start; gap:16px;
      padding:20px 0;
      border-bottom:0.5px solid rgba(0,212,255,0.12);
      transition:background 0.22s ease, border-color 0.22s ease;
      border-radius:6px; padding-left:8px; padding-right:8px;
    }
    .sec-row:last-child{ border-bottom:none; }
    .sec-row:hover{
      background: linear-gradient(90deg, transparent, rgba(180,79,255,0.06));
      border-bottom-color: rgba(180,79,255,0.18);
    }
    .sec-row-icon{
      flex-shrink:0; width:36px; height:36px;
      display:flex; align-items:center; justify-content:center;
      border-radius:8px;
      background:rgba(0,212,255,0.06);
      border:0.5px solid rgba(0,212,255,0.18);
      font-size:0.95rem; margin-top:2px;
    }
    .sec-row-icon i{
      background: linear-gradient(135deg, var(--cyan) 0%, var(--purple) 100%);
      -webkit-background-clip:text; background-clip:text;
      color:transparent !important; -webkit-text-fill-color:transparent !important;
      filter:drop-shadow(0 0 6px rgba(0,212,255,0.5)) drop-shadow(0 0 12px rgba(180,79,255,0.3));
    }
    .sec-row-body{ flex:1; min-width:0; }
    .sec-row-title{
      font-size:0.83rem; font-weight:700;
      color:var(--cyan);
      letter-spacing:0.02em; margin-bottom:4px;
      text-shadow:0 0 10px rgba(0,212,255,0.25);
    }
    .sec-row-desc{
      font-size:0.79rem; color:#94a3b8; line-height:1.65;
    }

    
    .price-val,
    td .price-val,
    th .price-val,
    .doc-table .price-val{
      display: inline-block !important;
      background: linear-gradient(90deg, var(--cyan) 0%, var(--purple) 100%) !important;
      -webkit-background-clip: text !important; background-clip: text !important;
      color: transparent !important;
      -webkit-text-fill-color: transparent !important;
      font-weight: 800 !important;
      filter: drop-shadow(0 0 6px rgba(0,212,255,0.3));
    }

    
    .step-badge{
      display:inline-flex; align-items:center; justify-content:center;
      width:32px; height:32px; border-radius:50%;
      background: rgba(0,212,255,0.07);
      border: 1.5px solid rgba(0,212,255,0.45);
      color: var(--cyan);
      font-size:0.78rem; font-weight:900; letter-spacing:0;
      box-shadow: 0 0 10px rgba(0,212,255,0.22), inset 0 0 6px rgba(0,212,255,0.06);
      text-shadow: 0 0 8px rgba(0,212,255,0.5);
      transition: all 0.2s ease;
    }
    .doc-table.step-table tbody tr:hover .step-badge{
      border-color: rgba(0,212,255,0.8);
      box-shadow: 0 0 16px rgba(0,212,255,0.4), inset 0 0 8px rgba(0,212,255,0.1);
      background: rgba(0,212,255,0.12);
    }
    
    .doc-table.step-table th:first-child,
    .doc-table.step-table td:first-child{
      width: 64px !important; min-width: 64px !important;
      text-align: center; padding: 14px 8px;
    }
    
    .doc-table.step-table th:nth-child(2),
    .doc-table.step-table td:nth-child(2){
      width: 28%; min-width: 120px;
      font-weight: 600; color: #cbd5e1;
    }
    
    .doc-table.step-table td:nth-child(3){
      color: #94a3b8; line-height: 1.6;
    }
    .doc-table.step-table tbody tr:hover td:nth-child(2){
      color: var(--cyan);
    }

    
    .doc-table{
      width:100%; border-collapse:separate; border-spacing:0;
      margin-top:0.85rem; font-size:0.81rem;
      border:0.5px solid rgba(0,212,255,0.12); border-radius:10px;
      overflow:hidden;
    }
    
    .doc-table th:first-child,
    .doc-table td:first-child{
      width: 35%; min-width: 260px;
    }
    
    .doc-table td:first-child:not(.icon-td){
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .doc-table thead tr{
      background: rgba(0,212,255,0.06);
      box-shadow: 0 1px 0 rgba(0,212,255,0.22);
    }
    .doc-table tbody tr{
      background: rgba(0,0,0,0.85);
      
      box-shadow: 0 1px 0 rgba(0,212,255,0.09);
    }
    .doc-table tbody tr:last-child{ box-shadow: none; }
    .doc-table th{
      color:var(--cyan); font-weight:700; text-align:left;
      padding: 18px; border-bottom: none;
      font-size:0.72rem; letter-spacing:0.07em; text-transform:uppercase;
      text-shadow:0 0 8px rgba(0,212,255,0.25);
      vertical-align: middle;
    }
    .doc-table td{
      padding: 18px; border-bottom: none;
      color:#94a3b8; vertical-align:middle; transition:all 0.18s;
    }
    .doc-table tr:last-child td{ border-bottom:none; }
    
    .doc-table tbody tr:hover{
      background: rgba(0,212,255,0.055);
      box-shadow: 0 1px 0 rgba(180,79,255,0.18);
    }
    .doc-table tbody tr:hover td{
      color: #cbd5e1;
      background: transparent;
    }
    .doc-table tbody tr:hover td:first-child{
      color: var(--cyan);
      font-weight: 600;
    }

    
    .badge{
      display:inline-flex; align-items:center; gap:4px;
      font-size:0.65rem; font-weight:700; padding:3px 9px;
      border-radius:9999px; letter-spacing:0.04em;
    }
    .badge-red{ background:rgba(239,68,68,0.08); border:1px solid rgba(239,68,68,0.2); color:#f87171; }
    .badge-green{ background:rgba(34,197,94,0.08); border:1px solid rgba(34,197,94,0.18); color:#4ade80; }
    .badge-gray{ background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); color:#64748b; }

    
    .price-card{
      background:linear-gradient(135deg,rgba(0,212,255,0.07),rgba(139,92,246,0.07));
      border:1px solid rgba(0,212,255,0.18); border-radius:14px;
      padding:1.5rem 1.75rem; margin-top:1rem;
      display:flex; align-items:center; justify-content:space-between;
      gap:1rem; flex-wrap:wrap; position:relative; overflow:hidden;
    }
    .price-card::after{
      content:''; position:absolute; top:-40px; right:-40px;
      width:140px; height:140px; border-radius:50%;
      background:radial-gradient(circle, rgba(0,212,255,0.07), transparent 70%);
      pointer-events:none;
    }
    .price-amount{ font-size:2rem; font-weight:900; background:linear-gradient(135deg,var(--cyan),var(--purple)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
    .price-label{ font-size:0.72rem; color:#475569; margin-top:2px; }
    .price-btn{
      display:inline-flex; align-items:center; gap:8px;
      background:linear-gradient(135deg,var(--cyan),var(--purple));
      color:#fff; font-weight:700; font-size:0.82rem;
      padding:0.6rem 1.4rem; border-radius:9999px;
      text-decoration:none; transition:all 0.25s;
      box-shadow:0 4px 16px rgba(0,212,255,0.18);
    }
    .price-btn:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,212,255,0.3); }

    
    .note-box{
      border-radius:9px; padding:0.85rem 1.1rem; margin:0.75rem 0;
      font-size:0.81rem; line-height:1.65; display:flex; gap:11px; align-items:flex-start;
    }
    .note-box i{ flex-shrink:0; margin-top:2px; font-size:0.85rem; }
    .note-info{
      background: linear-gradient(90deg, rgba(0,212,255,0.06), rgba(180,79,255,0.03));
      border: 0.5px solid rgba(0,212,255,0.2);
      border-left: 3px solid var(--cyan);
      color:#94a3b8;
      box-shadow: 0 0 12px rgba(0,212,255,0.05);
    }
    .note-info i{ color:var(--cyan); }
    .note-warn{
      background: linear-gradient(90deg, rgba(251,191,36,0.06), rgba(180,79,255,0.03));
      border: 0.5px solid rgba(251,191,36,0.2);
      border-left: 3px solid #fbbf24;
      color:#94a3b8;
      box-shadow: 0 0 12px rgba(251,191,36,0.05);
    }
    .note-warn i{ color:#fbbf24; }
    .note-success{
      background: linear-gradient(90deg, rgba(34,197,94,0.06), rgba(0,212,255,0.03));
      border: 0.5px solid rgba(34,197,94,0.2);
      border-left: 3px solid #22c55e;
      color:#94a3b8;
      box-shadow: 0 0 12px rgba(34,197,94,0.05);
    }
    .note-success i{ color:#22c55e; }

    
    .store-notice{
      background:rgba(251,191,36,0.05);
      border:1px solid rgba(251,191,36,0.2); border-radius:9px;
      padding:0.8rem 1.1rem; margin-bottom:1.25rem;
      display:flex; align-items:center; gap:10px;
      font-size:0.8rem; color:#fbbf24; font-weight:500;
    }
    .store-notice i{ font-size:0.9rem; flex-shrink:0; }

    
    .faq-item{
      border:1px solid rgba(255,255,255,0.05);
      border-radius:9px; overflow:hidden; margin-bottom:0.5rem;
      transition:border-color 0.2s;
    }
    .faq-item:hover{ border-color:rgba(0,212,255,0.2); box-shadow: 0 0 0 1px rgba(180,79,255,0.1); }
    .faq-q{
      padding:0.8rem 1rem;
      font-size:0.83rem; font-weight:600; color:#94a3b8;
      background:rgba(255,255,255,0.02);
      display:flex; align-items:center; gap:8px;
    }
    .faq-q i{
      order: 1;
      background: linear-gradient(135deg, var(--cyan) 0%, var(--purple) 100%);
      -webkit-background-clip: text; background-clip: text;
      color: transparent !important;
      -webkit-text-fill-color: transparent !important;
      filter: drop-shadow(0 0 4px rgba(0,212,255,0.3));
      flex-shrink: 0;
    }
    .faq-a{
      padding:0.8rem 1rem;
      font-size:0.8rem; color:#475569; line-height:1.65;
      border-top:1px solid rgba(255,255,255,0.04);
      background:rgba(0,0,0,0.12);
    }

    
    .page-nav{
      display:flex; gap:0.85rem; margin-top:2.5rem;
      padding-top:1.5rem; border-top:1px solid rgba(255,255,255,0.04);
    }
    .page-nav-btn{
      flex:1; display:flex; align-items:center; gap:9px;
      padding:0.8rem 1rem;
      border:1px solid rgba(255,255,255,0.06); border-radius:10px;
      text-decoration:none; color:#475569; font-size:0.8rem;
      transition:all 0.22s ease;
      background:rgba(255,255,255,0.02);
    }
    .page-nav-btn:hover{
      border-color:rgba(0,212,255,0.3); color:#e2e8f0;
      background:linear-gradient(135deg, rgba(0,212,255,0.06), rgba(180,79,255,0.05));
      box-shadow: 0 0 0 1px rgba(180,79,255,0.12);
      transform:translateY(-1px);
    }
    .page-nav-btn.next{ justify-content:flex-end; text-align:right; }
    .pnb-label{ font-size:0.6rem; text-transform:uppercase; letter-spacing:0.1em; color:#334155; }
    .pnb-title{ font-weight:700; color:#94a3b8; font-size:0.82rem; }

    
    .sidebar-toggle{
      display:none;
      position:fixed !important;
      top:96px !important;
      right:14px !important;
      bottom:auto !important;
      left:auto !important;
      z-index:9500 !important;
      background:linear-gradient(135deg,var(--cyan),var(--purple));
      color:#fff; border:none; width:42px; height:42px; border-radius:50%;
      font-size:0.9rem; cursor:pointer; box-shadow:0 4px 18px rgba(0,212,255,0.25);
      pointer-events:auto !important;
      touch-action:manipulation !important;
    }
    @media(max-width:768px){
      .sidebar-toggle{
        display:flex !important;
        align-items:center;
        justify-content:center;
        position:fixed !important;
        top:96px !important;
        right:14px !important;
        bottom:auto !important;
        left:auto !important;
        z-index:9500 !important;
        pointer-events:auto !important;
      }
      .sidebar{
        position:fixed; top:94px; left:0; bottom:0; z-index:10000;
        transform:translateX(-100%);
        width:82vw !important; max-width:300px;
        box-shadow:4px 0 30px rgba(0,0,0,0.6);
        max-height: none;
        height: calc(100vh - 94px) !important;
        overflow-y: scroll !important;
        -webkit-overflow-scrolling: touch !important;
        padding-top: 0;
      }
      .sidebar.open{ transform:translateX(0); }
      .docs-layout{ max-width:100%; }
      .docs-content{ padding:1.5rem 0.85rem 2rem !important; }
      
      .sidebar-overlay{
        display:none; position:fixed; inset:0; z-index:4999;
        background:rgba(0,0,0,0.5); backdrop-filter:blur(2px);
      }
      .sidebar.open ~ .sidebar-overlay,
      body.sidebar-open .sidebar-overlay{ display:block; }
    }
    @media(max-width:768px){
      .docs-content{
        padding: 1rem !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
      }
      .sec-row{ padding:14px 6px; gap:12px; }
      .sec-row-icon{ width:30px; height:30px; font-size:0.8rem; }
      .sec-row-title{ font-size:0.78rem; }
      .sec-row-desc{ font-size:0.74rem; }
      .doc-table td.icon-td{ gap:10px; }
    }

    
    #announce-banner{
      position:fixed; top:0; left:0; right:0; z-index:99999;
      width:100vw;
      height:34px; overflow:hidden;
      background:rgba(8,8,18,0.85);
      backdrop-filter:blur(12px);
      -webkit-backdrop-filter:blur(12px);
      border-bottom:1px solid rgba(255,255,255,0.06);
      margin:0; padding:0;
    }
    
    #dev-credit {
      position: fixed;
      top: 0; right: 14px;
      height: 34px;
      z-index: 100000;
      display: flex; align-items: center;
      gap: 4px;
      font-family: 'JetBrains Mono','Fira Code',monospace;
      font-size: 0.58rem;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.38);
      white-space: nowrap;
      pointer-events: none;
    }
    #dev-credit span {
      background: linear-gradient(90deg,#00d4ff,#b44fff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-weight: 700;
      letter-spacing: 0.06em;
    }
    @media(max-width:480px){
      #dev-credit { font-size:0.5rem; right:8px; letter-spacing:0.05em; }
    }
    .announce-marquee{
      display:flex; align-items:center;
      height:100%;
      white-space:nowrap;
      overflow:hidden;
      width:100%;
    }
    .announce-track{
      display:flex; align-items:center;
      will-change:transform;
      animation:marquee-scroll 40s linear infinite;
    }
    .announce-inner{
      display:flex; align-items:center; gap:2.5rem;
      padding:0 3rem;
      font-size:0.72rem; font-weight:500;
      color:#94a3b8; letter-spacing:0.03em;
      flex-shrink:0;
    }
    .announce-item{
      display:flex; align-items:center; gap:7px; flex-shrink:0;
    }
    .announce-dot{
      width:5px; height:5px; border-radius:50%;
      background:#ef4444; box-shadow:0 0 5px rgba(239,68,68,0.7);
      animation:pulse-dot 1.8s ease-in-out infinite; flex-shrink:0;
    }
    @keyframes pulse-dot{
      0%,100%{opacity:1;} 50%{opacity:0.3;}
    }
    .a-badge{
      font-size:0.58rem; font-weight:800; letter-spacing:0.1em;
      text-transform:uppercase; color:#ef4444;
      background:rgba(239,68,68,0.1);
      border:1px solid rgba(239,68,68,0.18);
      padding:1px 6px; border-radius:3px; flex-shrink:0;
    }
    .a-sep{ color:#1e293b; font-size:1rem; }
    .a-icon{ width:14px; height:14px; flex-shrink:0; }
    @keyframes marquee-scroll{
      0%   { transform:translateX(0); }
      100% { transform:translateX(-50%); }
    }
    body{ padding-top:94px !important; }

    
    #main-site,
    #about, #services, #projects, #features, #skills, #contact {
      background: #000 !important;
    }

    @keyframes codeBounceGlow {
      0%, 100% { transform: translateY(0px);  filter: drop-shadow(0 0 6px rgba(0,212,255,0.5)); }
      30%       { transform: translateY(-9px); filter: drop-shadow(0 0 16px rgba(0,212,255,1)) drop-shadow(0 0 24px rgba(168,85,247,0.8)); }
      60%       { transform: translateY(-4px); filter: drop-shadow(0 0 10px rgba(0,212,255,0.7)); }
    }
    .hero-name .fa-code {
      display: inline-block;
      animation: codeBounceGlow 2s ease-in-out infinite;
      will-change: transform, filter;
    }

    @media(max-width:768px){
      
      #docsPage, #docsPage * { max-width: 100vw; }
      .docs-layout { overflow: hidden !important; }
      .docs-content { overflow-x: hidden !important; padding: 1.5rem 0.85rem 2rem !important; }
      
      
      .table-scroll-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-width: calc(100vw - 1.7rem) !important;
      }
      .table-scroll-wrap .doc-table {
        min-width: 400px;
        white-space: nowrap;
      }
      .doc-table td, .doc-table th {
        white-space: nowrap !important;
        font-size: 0.72rem !important;
        padding: 0.45rem 0.65rem !important;
      }

      
      .doc-section {
        padding: 1rem !important;
        overflow: hidden !important;
      }
      
      
      .note-box { font-size: 0.75rem !important; padding: 0.6rem 0.85rem !important; }
      
      
      #docsPage .doc-section > * { max-width: 100% !important; word-break: break-word; }
    }

@media(max-width:768px){
  input, select, textarea, button {
    font-size: 16px !important; 
  }
  .gs-input { font-size: 16px !important; }
}
* { -webkit-tap-highlight-color: transparent; }

/* dh: layout rules at end of file */

/* ══ Career & Code Fix SPA Pages (Lwa) ══ */
#career-page, #code-fix-page {
  display: none !important;
  min-height: calc(100vh - 94px);
  background: #000 !important;
}
#career-page.active, #code-fix-page.active { display: block !important; }

/* Force all inner backgrounds to pure black — no navy bleed (Lwa) */
#career-page .sp-feat-card,
#career-page .sp-coming-card,
#career-page .sp-wrap,
#career-page .sp-header,
#career-page .sp-hero-text,
#career-page .sp-feat-grid,
#code-fix-page .sp-feat-card,
#code-fix-page .sp-coming-card,
#code-fix-page .sp-wrap,
#code-fix-page .sp-header,
#code-fix-page .sp-hero-text,
#code-fix-page .sp-feat-grid {
  background: #000 !important;
}

.sp-wrap {
  max-width: 1140px; margin: 0 auto;
  padding: 2.5rem 2rem 5rem;
}
.sp-header {
  display: flex; align-items: center; gap: 1.25rem;
  margin-bottom: 2.5rem; padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.sp-back-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  background: transparent; border: 1px solid rgba(0,212,255,.3);
  color: var(--cyan); font-size: .82rem; font-weight: 600;
  padding: 8px 16px; border-radius: 9px; cursor: pointer;
  transition: all .2s ease; white-space: nowrap; font-family: inherit;
}
.sp-back-btn:hover {
  color: #fff; background: rgba(0,212,255,.08);
  border-color: var(--cyan);
  box-shadow: 0 0 16px rgba(0,212,255,.25), 0 4px 18px rgba(0,212,255,.12);
  transform: translateY(-1px);
}
.sp-title-block { flex: 1; }
.sp-title {
  font-size: 1.8rem; font-weight: 800; color: #fff; margin-bottom: .2rem;
}
.sp-title .fa-briefcase, .sp-title .fa-bug { font-size: 1.4rem; margin-right: .35rem; }
.sp-sub { color: #64748b; font-size: .85rem; }

.sp-hero-text { margin-bottom: 2.5rem; }
.sp-tag {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cyan); background: rgba(0,212,255,.07); border: 1px solid rgba(0,212,255,.22);
  border-radius: 20px; padding: 4px 14px; margin-bottom: 1rem;
}
.sp-tag-purple { color: var(--purple); background: rgba(180,79,255,.07); border-color: rgba(180,79,255,.22); }
.sp-desc {
  color: #94a3b8; font-size: .93rem; line-height: 1.75;
  max-width: 720px; margin-bottom: 1rem;
}
.sp-status-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .05em;
  background: rgba(0,212,255,.07); border: 1px solid rgba(0,212,255,.22);
  border-radius: 20px; padding: 5px 14px; color: var(--cyan);
}
.sp-pill-purple { background: rgba(180,79,255,.07); border-color: rgba(180,79,255,.22); color: var(--purple); }
.sp-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 8px rgba(0,212,255,.8);
  display: inline-block; animation: spDotPulse 2s ease-in-out infinite; flex-shrink: 0;
}
.sp-dot-purple { background: var(--purple); box-shadow: 0 0 8px rgba(180,79,255,.8); }
@keyframes spDotPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.45;transform:scale(.8)} }

.sp-feat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.25rem; margin-bottom: 2rem;
}
.sp-feat-card {
  background: var(--card); border: 1px solid rgba(255,255,255,.05);
  border-radius: 16px; padding: 1.75rem;
  position: relative; overflow: hidden;
  transition: border-color .25s, box-shadow .25s;
}
.sp-feat-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,212,255,.25), transparent);
}
.sp-feat-card:hover { border-color: rgba(0,212,255,.18); box-shadow: 0 8px 32px rgba(0,0,0,.35); }
.sp-card-purple::before { background: linear-gradient(90deg, transparent, rgba(180,79,255,.25), transparent); }
.sp-card-purple:hover { border-color: rgba(180,79,255,.18); }

.sp-feat-icon {
  width: 44px; height: 44px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; margin-bottom: 1rem;
}
.sp-icon-cyan { background: rgba(0,212,255,.08); border: 1px solid rgba(0,212,255,.18); color: var(--cyan); }
.sp-icon-purple { background: rgba(180,79,255,.08); border: 1px solid rgba(180,79,255,.2); color: var(--purple); }
.sp-feat-title { font-size: .94rem; font-weight: 700; color: #fff; margin-bottom: .5rem; }
.sp-feat-desc { color: #64748b; font-size: .82rem; line-height: 1.72; margin-bottom: .8rem; }
.sp-feat-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.sp-feat-tags span {
  font-size: .63rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--cyan); background: rgba(0,212,255,.07);
  border: 1px solid rgba(0,212,255,.18); border-radius: 6px; padding: 2px 8px;
}
.sp-tags-purple span { color: var(--purple); background: rgba(180,79,255,.07); border-color: rgba(180,79,255,.2); }

.sp-coming-card {
  border-radius: 20px; padding: 3rem 2.5rem; text-align: center;
  background: var(--card); position: relative; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.sp-coming-card::before {
  content: ''; position: absolute; top: -60px; left: 50%; transform: translateX(-50%);
  width: 320px; height: 320px; pointer-events: none;
  background: radial-gradient(circle, rgba(0,212,255,.06) 0%, transparent 70%);
}
.sp-coming-cyan { border: 1px solid rgba(0,212,255,.12); box-shadow: 0 0 80px rgba(0,212,255,.04), inset 0 1px 0 rgba(255,255,255,.04); }
.sp-coming-purple { border: 1px solid rgba(180,79,255,.12); box-shadow: 0 0 80px rgba(180,79,255,.04), inset 0 1px 0 rgba(255,255,255,.04); }
.sp-coming-purple::before { background: radial-gradient(circle, rgba(180,79,255,.07) 0%, transparent 70%); }
.sp-coming-emoji { font-size: 3rem; margin-bottom: 1rem; display: block; }
.sp-coming-title { font-size: 1.2rem; font-weight: 800; color: #fff; margin-bottom: .6rem; }
.sp-coming-text { color: #64748b; font-size: .85rem; line-height: 1.75; max-width: 480px; margin: 0 auto 1.75rem; }
.sp-coming-badges { display: flex; align-items: center; justify-content: center; gap: .6rem; flex-wrap: wrap; }
.sp-coming-badges span {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 20px;
  background: rgba(0,212,255,.06); border: 1px solid rgba(0,212,255,.18); color: var(--cyan);
}
.sp-badges-purple span { background: rgba(180,79,255,.06); border-color: rgba(180,79,255,.2); color: var(--purple); }

@media(max-width: 768px) {
  .sp-wrap { padding: 1.5rem 1.25rem 4rem; }
  .sp-title { font-size: 1.4rem; }
  .sp-feat-grid { grid-template-columns: 1fr; }
  .sp-coming-card { padding: 2rem 1.25rem; }
}

.dh-page-wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: .9rem 1.5rem 2.5rem;
}

.dh-page-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.4rem;
}
.dh-back-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: #94a3b8;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: .85rem;
  transition: all .2s;
  white-space: nowrap;
  font-family: inherit;
}
.dh-back-btn:hover { border-color: var(--cyan); color: var(--cyan); }
.dh-page-title { font-size: 1.7rem; font-weight: 700; margin: 0 0 .2rem; }
.dh-page-sub   { color: #64748b; margin: 0; font-size: .85rem; }

.dh-section { margin-bottom: 1.4rem; }
.dh-section-label {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: .7rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--border);
}
.dh-section-badge {
  background: rgba(0,212,255,.1);
  color: var(--cyan);
  border: 1px solid rgba(0,212,255,.25);
  border-radius: 20px;
  padding: 2px 10px;
  font-size: .72rem;
  letter-spacing: .05em;
}
.dh-section-badge.js-badge {
  background: rgba(180,79,255,.1);
  color: var(--purple);
  border-color: rgba(180,79,255,.25);
}

.dh-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .7rem;
}

.dh-card {
  background: rgba(0,212,255,0.03);
  border: 1px solid rgba(0,212,255,0.12);
  border-radius: 12px;
  padding: .8rem .85rem;
  display: flex;
  align-items: center;
  gap: .7rem;
  cursor: pointer;
  transition: all .2s;
  position: relative;
  overflow: hidden;
}
.dh-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,212,255,.04), transparent);
  opacity: 0;
  transition: opacity .2s;
}
.dh-card:hover { border-color: var(--cyan); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,212,255,.12); }
.dh-card:hover::before { opacity: 1; }

.dh-card-icon {
  width: 38px; height: 38px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.dh-card-icon.ai { background: linear-gradient(135deg,rgba(180,79,255,.2),rgba(0,212,255,.1)); color: var(--purple); border: 1px solid rgba(180,79,255,.3); }
.dh-card-icon.js { background: rgba(0,212,255,.08); color: var(--cyan); border: 1px solid rgba(0,212,255,.2); }
.dh-card-icon.dh-ci-green  { color:#22c55e; background:rgba(34,197,94,.09);  border:1px solid rgba(34,197,94,.22);  box-shadow:0 0 14px rgba(34,197,94,.18); }
.dh-card-icon.dh-ci-blue   { color:#3b82f6; background:rgba(59,130,246,.09); border:1px solid rgba(59,130,246,.22); box-shadow:0 0 14px rgba(59,130,246,.18); }
.dh-card-icon.dh-ci-orange { color:#f97316; background:rgba(249,115,22,.09); border:1px solid rgba(249,115,22,.22); box-shadow:0 0 14px rgba(249,115,22,.18); }
.dh-card-icon.dh-ci-red    { color:#ef4444; background:rgba(239,68,68,.09);  border:1px solid rgba(239,68,68,.22);  box-shadow:0 0 14px rgba(239,68,68,.18); }
.dh-card-icon.dh-ci-purple { color:#a855f7; background:rgba(168,85,247,.09); border:1px solid rgba(168,85,247,.22); box-shadow:0 0 14px rgba(168,85,247,.18); }
.dh-card-icon.dh-ci-teal   { color:#14b8a6; background:rgba(20,184,166,.09); border:1px solid rgba(20,184,166,.22); box-shadow:0 0 14px rgba(20,184,166,.18); }
.dh-card-icon.dh-ci-amber  { color:#f59e0b; background:rgba(245,158,11,.09); border:1px solid rgba(245,158,11,.22); box-shadow:0 0 14px rgba(245,158,11,.18); }
.dh-card-icon.dh-ci-indigo { color:#818cf8; background:rgba(129,140,248,.09);border:1px solid rgba(129,140,248,.22);box-shadow:0 0 14px rgba(129,140,248,.18); }
.dh-card-icon.dh-ci-pink   { color:#ec4899; background:rgba(236,72,153,.09); border:1px solid rgba(236,72,153,.22); box-shadow:0 0 14px rgba(236,72,153,.18); }
.dh-card-icon.dh-ci-yellow { color:#eab308; background:rgba(234,179,8,.09);  border:1px solid rgba(234,179,8,.22);  box-shadow:0 0 14px rgba(234,179,8,.18); }
.dh-card-icon.dh-ci-cyan   { color:#06b6d4; background:rgba(6,182,212,.09);  border:1px solid rgba(6,182,212,.22);  box-shadow:0 0 14px rgba(6,182,212,.18); }
.dh-card-icon.dh-ci-slate  { color:#94a3b8; background:rgba(148,163,184,.08); border:1px solid rgba(148,163,184,.2);  box-shadow:0 0 14px rgba(148,163,184,.14); }

.dh-card-content { flex: 1; min-width: 0; }
.dh-card-name { font-size: .8rem; font-weight: 600; color: #e2e8f0; margin-bottom: .15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dh-card-desc { font-size: .7rem; color: #64748b; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.dh-card-badge {
  font-size: .65rem; font-weight: 700;
  padding: 2px 8px; border-radius: 20px;
  letter-spacing: .05em; flex-shrink: 0;
}
.dh-card-badge.ai { background: rgba(180,79,255,.15); color: var(--purple); border: 1px solid rgba(180,79,255,.3); }
.dh-card-badge.js { background: rgba(0,212,255,.1); color: var(--cyan); border: 1px solid rgba(0,212,255,.25); }

@keyframes dhModalIn {
  from { opacity:0; transform:scale(.95) translateY(12px); }
  to   { opacity:1; transform:scale(1)   translateY(0); }
}
@keyframes dhGlow {
  0%,100% { box-shadow: 0 0 30px rgba(0,212,255,.12), 0 0 60px rgba(180,79,255,.06), 0 32px 80px rgba(0,0,0,.8); }
  50%      { box-shadow: 0 0 40px rgba(0,212,255,.2),  0 0 80px rgba(180,79,255,.12), 0 32px 80px rgba(0,0,0,.8); }
}

.dh-modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(4,4,18,.85);
  backdrop-filter: blur(12px) saturate(1.2);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.dh-modal-overlay.active { display: flex; }

.dh-modal-box {
  background: linear-gradient(145deg, #0b0b1c 0%, #0d0d22 60%, #0a0a1a 100%);
  border: 1px solid rgba(0,212,255,.22);
  border-radius: 20px;
  width: 100%;
  max-width: 780px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: dhModalIn .28s cubic-bezier(.34,1.2,.64,1) forwards, dhGlow 4s ease-in-out infinite;
  position: relative;
}
.dh-modal-box::before {
  content: '';
  position: absolute; inset: 0; border-radius: 20px;
  background:
    linear-gradient(0deg, transparent 24px, rgba(0,212,255,.025) 25px, transparent 26px),
    linear-gradient(90deg, transparent 24px, rgba(0,212,255,.025) 25px, transparent 26px);
  background-size: 25px 25px;
  pointer-events: none; z-index: 0;
}
.dh-modal-box > * { position: relative; z-index: 1; }

.dh-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(0,212,255,.12);
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(0,212,255,.06) 0%, rgba(180,79,255,.04) 100%);
}
.dh-modal-title-row {
  display: flex; align-items: center; gap: .9rem;
}
.dh-modal-title-row i {
  font-size: 1.1rem;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,212,255,.12);
  border: 1px solid rgba(0,212,255,.3);
  border-radius: 10px;
  color: var(--cyan);
  box-shadow: 0 0 16px rgba(0,212,255,.2), inset 0 0 10px rgba(0,212,255,.05);
}
.dh-modal-title-row h2 {
  margin: 0; font-size: 1.05rem; font-weight: 700;
  background: linear-gradient(135deg, #e2e8f0, #a8c0d0);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.dh-modal-badge { font-size: .65rem; font-weight: 700; padding: 3px 10px; border-radius: 20px; letter-spacing: .06em; }
.badge-ai { background: rgba(180,79,255,.15); color: var(--purple); border: 1px solid rgba(180,79,255,.4); box-shadow: 0 0 8px rgba(180,79,255,.15); }
.badge-js { background: rgba(0,212,255,.1); color: var(--cyan); border: 1px solid rgba(0,212,255,.35); box-shadow: 0 0 8px rgba(0,212,255,.12); }

.dh-modal-close {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: #64748b;
  font-size: 1rem; cursor: pointer; padding: 6px 10px;
  border-radius: 8px; transition: all .2s;
}
.dh-modal-close:hover { color: #fff; background: rgba(255,71,87,.12); border-color: rgba(255,71,87,.3); }

.dh-modal-body-wrap {
  overflow-y: auto; padding: 1.5rem;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,212,255,.3) transparent;
}

.dh-tool-body { display: flex; flex-direction: column; gap: 1rem; }

.dh-input {
  width: 100%;
  background: #0c0c20;
  border: 1px solid rgba(0,212,255,.18);
  color: #e2e8f0;
  padding: 9px 13px;
  border-radius: 9px;
  font-size: .88rem;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.5);
}
.dh-input:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0,212,255,.1), inset 0 1px 3px rgba(0,0,0,.4);
  background: rgba(0,212,255,.04);
}
.dh-input::placeholder { color: #4a6080; }

/* ── Dark Select — forces dark bg in ALL browsers ── */
select.dh-input,
.dh-tool-body select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #0c0c20;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3e%3cpath d='M6 8l4 4 4-4' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 18px;
  padding-right: 34px;
  cursor: pointer;
}
select.dh-input:focus,
.dh-tool-body select:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0,212,255,.1);
  outline: none;
}
select.dh-input option,
.dh-tool-body select option {
  background: #0d0d22;
  color: #e2e8f0;
  font-size: .88rem;
}
select.dh-input option:checked,
select.dh-input option:hover,
.dh-tool-body select option:checked {
  background: #180840;
  color: #00d4ff;
}

.dh-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #0c0c20;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3e%3cpath d='M6 8l4 4 4-4' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 18px;
  border: 1px solid rgba(0,212,255,.18);
  color: #e2e8f0;
  padding: 9px 34px 9px 13px;
  border-radius: 9px;
  font-size: .88rem;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  outline: none;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}
.dh-select:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,212,255,.1); }

.dh-textarea {
  width: 100%;
  background: #08081a;
  border: 1px solid rgba(0,212,255,.15);
  color: #cdd6f4;
  padding: 11px 14px;
  border-radius: 9px;
  font-size: .84rem;
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  outline: none;
  resize: vertical;
  line-height: 1.65;
  transition: border-color .2s, box-shadow .2s;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.55);
}
.dh-textarea:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0,212,255,.1), inset 0 2px 6px rgba(0,0,0,.5);
}
.dh-textarea::placeholder { color: #3d5070; }
.dh-output-area {
  background: rgba(2,2,12,.95);
  color: #7aa2f7;
  border-color: rgba(122,162,247,.15);
}

.dh-btn {
  background: linear-gradient(135deg, #00c8f0, #9b4df5);
  border: none; color: #fff;
  padding: 9px 20px; border-radius: 10px;
  font-size: .83rem; font-weight: 700;
  cursor: pointer; font-family: inherit;
  white-space: nowrap;
  transition: all .2s;
  display: inline-flex; align-items: center; gap: 7px;
  box-shadow: 0 4px 16px rgba(0,212,255,.25), 0 2px 8px rgba(0,0,0,.4);
  letter-spacing: .02em;
  position: relative; overflow: hidden;
}
.dh-btn::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.12) 0%, transparent 60%);
  border-radius: inherit;
}
.dh-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,212,255,.35), 0 4px 12px rgba(0,0,0,.4); }
.dh-btn:active { transform: translateY(0); }

.dh-btn-sec {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(0,212,255,.2);
  color: #7aa2b8;
  padding: 8px 16px; border-radius: 10px;
  font-size: .83rem; font-family: inherit;
  cursor: pointer; white-space: nowrap;
  transition: all .2s;
  display: inline-flex; align-items: center; gap: 7px;
}
.dh-btn-sec:hover { border-color: var(--cyan); color: var(--cyan); background: rgba(0,212,255,.06); box-shadow: 0 0 12px rgba(0,212,255,.1); }

.dh-btn-icon {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(0,212,255,.15);
  color: #64748b;
  padding: 8px 12px; border-radius: 10px;
  font-size: .85rem; cursor: pointer;
  transition: all .2s;
}
.dh-btn-icon:hover { border-color: var(--cyan); color: var(--cyan); background: rgba(0,212,255,.07); box-shadow: 0 0 10px rgba(0,212,255,.12); }

.dh-row { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.dh-label { font-size: .78rem; color: #7a9abf; margin-bottom: .25rem; display: block; letter-spacing: .04em; text-transform: uppercase; font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; font-weight: 500; }

.dh-ai-output {
  background: rgba(3,3,14,.95);
  border: 1px solid rgba(0,212,255,.15);
  border-radius: 12px;
  padding: 1.1rem 1.2rem;
  min-height: 90px;
  font-size: .84rem;
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-y: auto;
  max-height: 360px;
  box-shadow: inset 0 0 30px rgba(0,0,0,.5), 0 0 20px rgba(0,212,255,.04);
}
.dh-ai-output pre { background: #04040f; border: 1px solid rgba(0,212,255,.15); padding: .8rem 1rem; border-radius: 8px; overflow-x: auto; margin: .6rem 0; }
.dh-ai-output code { font-family: monospace; font-size: .82rem; color: var(--cyan); }
.dh-ai-thinking { color: #475569; display: flex; align-items: center; gap: .6rem; padding: .5rem 0; }
.dh-code { background: rgba(0,212,255,.06); padding: 2px 6px; border-radius: 4px; font-family: monospace; color: var(--cyan); border: 1px solid rgba(0,212,255,.15); }
.dh-inline-code { background: rgba(180,79,255,.08); padding: 1px 6px; border-radius: 4px; font-family: monospace; color: var(--purple); border: 1px solid rgba(180,79,255,.2); }

.dh-tab-row { display: flex; gap: .4rem; }
.dh-tab {
  background: rgba(255,255,255,.02); border: 1px solid rgba(0,212,255,.12);
  color: #4a6080; padding: 7px 16px; border-radius: 8px;
  font-size: .8rem; cursor: pointer; font-family: inherit;
  transition: all .2s; letter-spacing: .02em;
}
.dh-tab.active { border-color: var(--cyan); color: var(--cyan); background: rgba(0,212,255,.08); box-shadow: 0 0 12px rgba(0,212,255,.1); }

.dh-strength-bar { height: 8px; background: rgba(255,255,255,.05); border-radius: 4px; overflow: hidden; margin-bottom: 6px; box-shadow: inset 0 1px 3px rgba(0,0,0,.5); }
.dh-strength-fill { height: 100%; border-radius: 4px; transition: width .4s cubic-bezier(.34,1.2,.64,1), background .3s; box-shadow: 0 0 8px currentColor; }
.dh-strength-label { font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.dh-info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.dh-info-item { font-size: .78rem; padding: 6px 10px; border-radius: 8px; display: flex; align-items: center; gap: .5rem; border: 1px solid transparent; }
.dh-info-item.ok { color: #2ed573; background: rgba(46,213,115,.07); border-color: rgba(46,213,115,.15); }
.dh-info-item.bad { color: #ff4757; background: rgba(255,71,87,.07); border-color: rgba(255,71,87,.15); }
.dh-suggest { background: rgba(255,165,0,.05); border: 1px solid rgba(255,165,0,.2); border-radius: 10px; padding: .85rem 1rem; font-size: .8rem; color: #ffa502; box-shadow: 0 0 20px rgba(255,165,0,.04); }

.dh-base-grid { display: grid; grid-template-columns: 80px 1fr; gap: .6rem .8rem; align-items: center; }
.dh-base-grid label { font-size: .75rem; color: var(--cyan); white-space: nowrap; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

.dh-tree-output {
  background: rgba(3,3,14,.95); border: 1px solid rgba(0,212,255,.15); border-radius: 12px;
  padding: 1rem; min-height: 60px; max-height: 340px; overflow-y: auto;
  font-family: monospace; font-size: .8rem;
  box-shadow: inset 0 0 30px rgba(0,0,0,.5);
}
.jt-list { list-style: none; padding-left: 1.2rem; border-left: 1px solid rgba(255,255,255,.07); margin: .2rem 0; }
.jt-toggle { cursor: pointer; color: #64748b; margin-right: .3rem; user-select: none; }
.jt-key { color: var(--cyan); }
.jt-str { color: #2ed573; }
.jt-num { color: #ffa502; }
.jt-bool { color: var(--purple); }
.jt-null { color: #ff4757; }
.jt-bracket { color: #94a3b8; margin-left: .3rem; }

.dh-diff-cols { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.dh-diff-output {
  background: rgba(3,3,14,.95); border: 1px solid rgba(0,212,255,.15); border-radius: 12px;
  padding: 1rem; min-height: 60px; line-height: 1.9; font-size: .85rem;
  max-height: 220px; overflow-y: auto;
  box-shadow: inset 0 0 20px rgba(0,0,0,.4);
}
.diff-add { background: rgba(46,213,115,.15); color: #2ed573; border-radius: 4px; padding: 1px 5px; border: 1px solid rgba(46,213,115,.2); }
.diff-del { background: rgba(255,71,87,.15); color: #ff4757; text-decoration: line-through; border-radius: 4px; padding: 1px 5px; border: 1px solid rgba(255,71,87,.2); }

.dh-qr-output {
  display: flex; justify-content: center; padding: 1.5rem;
  background: rgba(255,255,255,.02); border: 1px solid rgba(0,212,255,.1);
  border-radius: 12px; margin-top: .4rem;
}
.dh-qr-output canvas, .dh-qr-output img { border-radius: 8px; box-shadow: 0 0 20px rgba(0,212,255,.15); }

.dh-result-big {
  font-size: 2rem; font-weight: 700; text-align: center; padding: 1.2rem;
  background: linear-gradient(135deg, var(--cyan), var(--purple));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.dh-result-small { font-size: .92rem; padding: .6rem .2rem; color: #c0d0e0; font-family: monospace; }

.rx-ok { color: #2ed573; font-size: .82rem; }
.rx-err { color: #ff4757; font-size: .82rem; }
.dh-rx-status { min-height: 24px; }
.dh-rx-matches { display: flex; flex-direction: column; gap: .4rem; max-height: 180px; overflow-y: auto; }
.rx-match { background: rgba(0,212,255,.06); border: 1px solid rgba(0,212,255,.15); border-radius: 6px; padding: .4rem .7rem; font-size: .8rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.rx-idx { color: #64748b; }
.rx-match code { background: #080817; padding: 2px 6px; border-radius: 4px; color: var(--cyan); font-size: .78rem; }
.rx-pos { color: #64748b; font-size: .75rem; }
.rx-group { background: rgba(180,79,255,.1); color: var(--purple); padding: 1px 6px; border-radius: 4px; font-size: .74rem; }

.dh-hl-output {
  background: rgba(3,3,14,.95); border: 1px solid rgba(0,212,255,.15); border-radius: 12px;
  overflow: auto; max-height: 300px;
  box-shadow: inset 0 0 20px rgba(0,0,0,.4);
}
.dh-hl-pre { margin: 0; padding: 1.1rem 1.2rem; font-size: .82rem; line-height: 1.7; }
.ht-kw { color: var(--purple); font-weight: 600; }
.ht-str { color: #2ed573; }
.ht-cmt { color: #475569; font-style: italic; }
.ht-num { color: #ffa502; }
.ht-fn  { color: var(--cyan); }

.dh-drop-zone {
  border: 2px dashed rgba(0,212,255,.25);
  border-radius: 14px;
  padding: 2.5rem;
  text-align: center;
  cursor: pointer;
  transition: all .25s;
  color: #4a6080;
  background: rgba(0,212,255,.02);
}
.dh-drop-zone:hover, .dh-drop-zone.drag-over {
  border-color: var(--cyan);
  background: rgba(0,212,255,.06);
  box-shadow: 0 0 30px rgba(0,212,255,.08), inset 0 0 20px rgba(0,212,255,.04);
  color: var(--cyan);
}

.dh-speed-output { margin-top: .6rem; }
.dh-speed-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
.dh-speed-stat {
  background: rgba(0,212,255,.04); border: 1px solid rgba(0,212,255,.15);
  border-radius: 12px; padding: 1rem .8rem; text-align: center;
  font-size: .75rem; color: #4a6080; letter-spacing: .04em; text-transform: uppercase;
}
.dh-speed-val {
  font-size: 1.4rem; font-weight: 700; margin-bottom: .3rem;
  background: linear-gradient(135deg, var(--cyan), var(--purple));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.dh-headers-output { display: flex; flex-direction: column; gap: .4rem; max-height: 340px; overflow-y: auto; }
.hh-row {
  display: grid; grid-template-columns: 200px 1fr; gap: .5rem;
  padding: .5rem .8rem; border-radius: 8px; font-size: .78rem;
  background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.03);
  transition: background .15s;
}
.hh-row:hover { background: rgba(0,212,255,.04); }
.hh-key { color: var(--cyan); font-weight: 600; word-break: break-all; }
.hh-val { color: #94a3b8; word-break: break-all; }
.hh-status { background: rgba(0,212,255,.07) !important; border-color: rgba(0,212,255,.15) !important; }
.dh-loading { color: #4a6080; display: flex; align-items: center; gap: .6rem; font-size: .85rem; padding: .5rem 0; }

.dh-card-inner {
  background: rgba(0,212,255,.04); border: 1px solid rgba(0,212,255,.15);
  border-radius: 12px; padding: 1.2rem; margin-bottom: .5rem; text-align: center;
  box-shadow: 0 0 20px rgba(0,212,255,.04);
}

.dh-toast {
  position: fixed; bottom: 1.8rem; left: 50%; transform: translateX(-50%) translateY(20px);
  background: linear-gradient(135deg, rgba(0,212,255,.15), rgba(180,79,255,.1));
  backdrop-filter: blur(16px);
  border: 1px solid rgba(0,212,255,.3);
  color: #e2e8f0; padding: 9px 22px; border-radius: 24px;
  font-size: .82rem; z-index: 99999; opacity: 0; transition: all .25s;
  white-space: nowrap; box-shadow: 0 8px 24px rgba(0,0,0,.4), 0 0 20px rgba(0,212,255,.12);
}
.dh-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.dh-toast.warn {
  background: linear-gradient(135deg,rgba(180,79,255,.18),rgba(0,212,255,.1));
  border-color: rgba(180,79,255,.4);
  color: #e2d4ff;
  font-size: .88rem;
  max-width: 92vw;
  white-space: normal;
  text-align: center;
  box-shadow: 0 8px 28px rgba(0,0,0,.5), 0 0 24px rgba(180,79,255,.2);
  padding: 12px 28px;
}

/* ══ ماركداون بريفيو (Lwa) Markdown Preview ══ */
.dh-md-wrap { display: flex; gap: 1rem; min-height: 320px; }
.dh-md-pane { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.dh-md-toolbar { display: flex; gap: .3rem; flex-wrap: wrap; padding: .3rem 0; }
.dh-md-tb {
  background: rgba(0,212,255,.06); border: 1px solid rgba(0,212,255,.15);
  color: #c0d0e0; border-radius: 6px; padding: 3px 9px; font-size: .75rem;
  cursor: pointer; transition: all .15s;
}
.dh-md-tb:hover { border-color: var(--cyan); color: var(--cyan); background: rgba(0,212,255,.12); }
.dh-md-editor { flex: 1; font-family: 'JetBrains Mono', monospace; font-size: .82rem; resize: none; }
.dh-md-preview {
  flex: 1; padding: .75rem 1rem; overflow-y: auto;
  background: rgba(0,212,255,.03); border: 1px solid rgba(0,212,255,.12);
  border-radius: 10px; color: #c8d8e8; font-size: .88rem; line-height: 1.6;
}
.dh-md-preview h1,.dh-md-preview h2,.dh-md-preview h3 { color: var(--cyan); margin: .6rem 0 .3rem; }
.dh-md-preview code { background: rgba(0,212,255,.1); padding: 2px 6px; border-radius: 4px; font-size: .82rem; }
.dh-md-preview pre { background: rgba(0,0,0,.3); padding: .75rem; border-radius: 8px; overflow-x: auto; margin: .5rem 0; }
.dh-md-preview ul { padding-left: 1.4rem; }
.dh-md-preview blockquote { border-left: 3px solid rgba(0,212,255,.4); margin: .5rem 0; padding: .4rem .8rem; color: #8aa0b8; }
@media (max-width: 640px) { .dh-md-wrap { flex-direction: column; } }

/* ══ محوّل صيغ التسمية (Lwa) Naming Converter ══ */
.dh-nc-grid { display: flex; flex-direction: column; gap: .55rem; }
.dh-nc-row { display: flex; align-items: center; gap: .5rem; }
.dh-nc-label { min-width: 148px; font-size: .72rem; color: #4a6080; letter-spacing: .04em; text-transform: uppercase; flex-shrink: 0; }
@media (max-width: 500px) { .dh-nc-label { min-width: 90px; font-size: .65rem; } }

/* ══ مرجع HTML (Lwa) HTML Entity ══ */
.dh-he-ref {
  display: flex; flex-wrap: wrap; gap: .4rem .8rem;
  padding: .6rem .8rem; border: 1px solid rgba(0,212,255,.1);
  border-radius: 8px; background: rgba(0,212,255,.03);
}
.dh-he-ref span { font-size: .75rem; color: #5a7090; font-family: 'JetBrains Mono', monospace; }

/* ══ مولّد الكرون (Lwa) Cron Generator ══ */
.dh-cron-presets { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .3rem; }
.dh-cron-preset {
  background: rgba(0,212,255,.06); border: 1px solid rgba(0,212,255,.15);
  color: #8ab4c8; border-radius: 20px; padding: 4px 14px; font-size: .75rem;
  cursor: pointer; transition: all .15s;
}
.dh-cron-preset:hover { border-color: var(--cyan); color: var(--cyan); background: rgba(0,212,255,.12); }
.dh-cron-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: .6rem; }
@media (max-width: 540px) { .dh-cron-grid { grid-template-columns: repeat(3,1fr); } }
.dh-cron-field { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.dh-cron-lbl { font-size: .72rem; color: #4a6080; text-transform: uppercase; letter-spacing: .04em; }
.dh-cron-hint { font-size: .67rem; color: #334455; }
.dh-cron-result {
  display: flex; align-items: center; justify-content: center; gap: .8rem;
  padding: .9rem; background: rgba(0,0,0,.25); border: 1px solid rgba(0,212,255,.2);
  border-radius: 12px; margin-top: .4rem;
}
.dh-cron-expr {
  font-family: 'JetBrains Mono', monospace; font-size: 1.35rem;
  color: var(--cyan); letter-spacing: .12em;
}
.dh-cron-desc {
  text-align: center; font-size: .82rem; color: #6a8aaa;
  padding: .3rem 0 .1rem; font-style: italic;
}


@media (max-width: 600px) {
  .dh-grid { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
  .dh-card { padding: .65rem .7rem; gap: .55rem; }
  .dh-card-icon { width: 32px; height: 32px; font-size: .85rem; }
  .dh-card-name { font-size: .72rem; }
  .dh-card-desc { font-size: .62rem; }
  .dh-section { margin-bottom: 1rem; }
  .dh-speed-grid { grid-template-columns: repeat(2,1fr); }
  .dh-diff-cols { grid-template-columns: 1fr; }
  .dh-page-wrap { padding: 70px .75rem 2rem; }
  .dh-modal-box { border-radius: 14px; }
  .hh-row { grid-template-columns: 1fr; }
}

@media (min-width: 601px) and (max-width: 1024px) {
  .dh-grid { grid-template-columns: repeat(3, 1fr); gap: .65rem; }
  .dh-card { padding: .75rem .8rem; }
  .dh-card-icon { width: 36px; height: 36px; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  #about   { padding: 6rem 2rem; }
  #projects, #services, #features, #skills, #contact { padding: 6rem 1.5rem; }
  .projects-grid { grid-template-columns: repeat(2, 1fr); }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .skills-grid   { grid-template-columns: repeat(3, 1fr); }
  .footer-links  { flex-wrap: wrap; justify-content: center; gap: 0.75rem 1.25rem; }
}

@media (max-width: 768px) {

  
  section, footer, #main-site, .section-wrap {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  
  #about {
    padding: 4.5rem 1rem 3.5rem;
    min-height: auto;
  }
  .hero-wrap {
    width: 100%;
    padding: 0;
    max-width: 100%;
  }
  .avatar-ring img {
    width: 100px !important;
    height: 100px !important;
  }
  .avatar-ring { margin-bottom: 1.25rem; }
  .hero-name {
    font-size: clamp(1.75rem, 7vw, 2.4rem) !important;
    margin-bottom: 0.75rem;
  }
  .hero-bio {
    font-size: 0.85rem;
    line-height: 1.7;
    padding: 0;
    max-width: 100%;
  }
  .hero-typed-row { gap: 8px; }
  .typed-text { font-size: 0.9rem; }

  
  .stats-row {
    gap: 1rem;
    margin-bottom: 1.75rem;
  }
  .stat-num { font-size: 1.5rem; }
  .stat-label { font-size: 0.68rem; }
  .stat-divider { height: 28px; }

  
  .hero-btns {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 2rem;
  }
  .btn-primary, .btn-outline {
    width: 100%;
    max-width: 260px;
    justify-content: center;
    text-align: center;
  }

  
  #services  { padding: 5rem 1rem !important; }
  #projects  { padding: 5rem 1rem !important; }
  #features  { padding: 5rem 1rem !important; }
  #skills    { padding: 5rem 1rem !important; }
  #contact   { padding: 5rem 1rem !important; }
  .section-wrap { padding: 0; }

  
  .projects-grid {
    grid-template-columns: 1fr !important;
    gap: 0.85rem;
    width: 100%;
    overflow-x: hidden;
  }
  .pcard {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
  }

  
  .features-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem;
  }
  .feat-card[style*="grid-column"] {
    grid-column: auto !important; 
  }

  
  .skills-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.65rem;
  }

  
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem;
  }
  .contact-card { padding: 1.2rem 1rem; }

  
  footer { padding: 2.5rem 1rem 2rem; }
  .footer-inner { gap: 1.25rem; }
  .footer-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1rem;
    max-width: 100%;
  }
  .footer-links a { font-size: 0.7rem; }
  .footer-copy {
    text-align: center;
    font-size: 0.62rem;
    padding: 0 0.5rem;
    word-break: break-word;
  }
  .footer-owner { padding: 0.5rem 1rem 0.5rem 0.5rem; }
  .fo-avatar { width: 36px; height: 36px; }
  .fo-name   { font-size: 0.82rem; }
  .fo-role   { font-size: 0.62rem; }
}

@media (max-width: 480px) {
  #about { padding: 4rem 0.75rem 3rem; }
  .hero-name { font-size: clamp(1.5rem, 8vw, 2rem) !important; }
  .avatar-ring img { width: 88px !important; height: 88px !important; }
  .stats-row { gap: 0.6rem; }
  .stat-num  { font-size: 1.3rem; }
  .hero-bio  { font-size: 0.82rem; }
  .skills-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .footer-links { gap: 0.4rem 0.75rem; }
  .footer-copy  { font-size: 0.6rem; }
  #services, #projects, #features, #skills, #contact { padding: 4rem 0.75rem !important; }

  /* pcard scale-down for small phones */
  .pcard {
    padding: 1rem 0.95rem 0.9rem;
    border-radius: 13px;
  }
  .pcard-title    { font-size: 0.9rem; }
  .pcard-desc     { font-size: 0.75rem; line-height: 1.55; }
  .pcard-tags     { gap: 5px; }
  .pcard-tag      { font-size: 0.62rem; padding: 2px 8px; }
  .pcard-actions  { margin-top: 0.75rem; }
}


/* ══ Dev Hub Dashboard v3 ─ single source of truth (Lwa) ══ */

/* ── Container ───────────────────────────────── */
#devhub-page {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9500 !important;
  display: none;
  background: #000;
  overflow: hidden;
  padding-top: 60px;
  box-sizing: border-box;
}
#devhub-page.active {
  display: flex !important;
  flex-direction: row !important;
}

/* ── Sidebar ───────────────────────────────── */
.dh-sidebar {
  flex: 0 0 210px;
  overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column;
  border-right: 1px solid rgba(0,212,255,.09);
  background: rgba(0,0,0,.98);
}
.dh-sidebar::-webkit-scrollbar { width: 3px; }
.dh-sidebar::-webkit-scrollbar-thumb { background: rgba(0,212,255,.14); border-radius: 2px; }
.dh-nav-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 14px;
  border: none; background: none;
  color: #94a3b8; font-size: .835rem; font-weight: 600;
  font-family: inherit; text-align: left; cursor: pointer;
  transition: all .16s; user-select: none; box-sizing: border-box;
}
.dh-nav-item:hover { color: #e2e8f0; background: rgba(255,255,255,.04); }
.dh-nav-item i { width: 16px; text-align: center; flex-shrink: 0; }
.dh-nav-home { color: #94a3b8; }
.dh-nav-explore { color: var(--cyan,#00d4ff); font-weight: 700; }
.dh-nav-explore:hover { background: rgba(0,212,255,.07); }
.dh-nav-section-label {
  padding: 14px 14px 4px; margin-top: 2px;
  font-size: .6rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .12em; color: #334155;
}
.dh-nav-sub {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 7px 14px 7px 26px;
  border: none; background: none;
  color: #64748b; font-size: .775rem; font-family: inherit;
  text-align: left; cursor: pointer;
  transition: all .16s; user-select: none; box-sizing: border-box;
}
.dh-nav-sub:hover { color: #e2e8f0; background: rgba(255,255,255,.032); }
.dh-nav-sub i { font-size: .72rem; width: 14px; text-align: center; flex-shrink: 0; }
.dh-nav-cat {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 7px 14px;
  border: none; border-left: 3px solid transparent; background: none;
  color: #64748b; font-size: .78rem; font-family: inherit;
  text-align: left; cursor: pointer;
  transition: all .16s; user-select: none; box-sizing: border-box;
}
.dh-nav-cat:hover { color: #cbd5e1; background: rgba(255,255,255,.03); border-left-color: rgba(0,212,255,.2); }
.dh-nav-cat.active { color: var(--cyan,#00d4ff); background: rgba(0,212,255,.08); border-left-color: var(--cyan,#00d4ff); }
.dh-nav-cat i { width: 15px; text-align: center; font-size: .8rem; flex-shrink: 0; }

/* ── Main area ──────────────────────────────── */
.dh-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.dh-view { display: none; flex-direction: column; flex: 1; overflow: hidden; min-height: 0; }
.dh-view.active { display: flex; }

/* ════ Dashboard view ══════════════════════════════════════ */
#dh-v-dashboard { padding: 16px 22px 12px; gap: 10px; overflow: hidden; }

/* Hero ─ 2-col grid [text left | image right] */
.dh-hero {
  display: grid;
  grid-template-columns: minmax(280px, 430px) 1fr;
  gap: 0; align-items: center; flex-shrink: 0; min-height: 0;
}
.dh-hero-text { display: flex; flex-direction: column; gap: 6px; }
.dh-hero-badge {
  display: inline-flex; align-items: center; gap: 6px; width: fit-content;
  background: rgba(0,212,255,.1); border: 1px solid rgba(0,212,255,.25);
  color: var(--cyan,#00d4ff); font-size: .67rem; font-weight: 700;
  letter-spacing: .05em; padding: 3px 11px; border-radius: 20px;
}
.dh-hero-title { font-size: clamp(1.2rem,2.1vw,1.7rem); font-weight: 800; line-height: 1.1; color: #f1f5f9; margin: 0; }
.dh-hero-sub { font-size: .74rem; color: #64748b; line-height: 1.5; margin: 0; }
.dh-hero-search {
  display: flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(0,212,255,.18);
  border-radius: 10px; padding: 7px 13px; max-width: 330px; transition: border-color .18s;
}
.dh-hero-search:focus-within { border-color: rgba(0,212,255,.48); box-shadow: 0 0 0 3px rgba(0,212,255,.06); }
.dh-hero-search i { color: #475569; font-size: .78rem; flex-shrink: 0; }
.dh-hero-search input {
  flex: 1; background: none; border: none; outline: none;
  color: #e2e8f0; font-size: .81rem; font-family: inherit;
}
.dh-hero-search input::placeholder { color: #475569; }
.dh-hero-img { display: flex; align-items: center; justify-content: flex-end; overflow: hidden; height: 100%; }
.dh-hero-img img {
  max-height: 180px; max-width: 100%; object-fit: contain;
  filter: drop-shadow(0 0 40px rgba(180,79,255,.5)) drop-shadow(0 0 20px rgba(0,212,255,.22));
  user-select: none; pointer-events: none;
}

/* Section header */
.dh-dash-row { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.dh-dash-section-hdr { display: flex; align-items: center; justify-content: space-between; font-size: .78rem; font-weight: 700; color: #e2e8f0; }
.dh-view-all-link {
  font-size: .69rem; color: var(--cyan,#00d4ff); cursor: pointer;
  background: none; border: none; font-family: inherit; opacity: .82; transition: opacity .15s;
}
.dh-view-all-link:hover { opacity: 1; text-decoration: underline; }

/* Trending ─ 3 × 2 grid */
.dh-trending-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }

/* Explore ─ 6 columns */
.dh-explore-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 6px; }
.dh-explore-card {
  background: rgba(255,255,255,.026); border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px; padding: 10px 7px;
  cursor: pointer; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  transition: transform .18s, border-color .18s, background .18s;
}
.dh-explore-card:hover { border-color: rgba(0,212,255,.28); background: rgba(0,212,255,.04); transform: translateY(-2px); }
.dh-ec-icon { font-size: 1.15rem; line-height: 1; }
.dh-ec-name { font-size: .68rem; font-weight: 700; color: #e2e8f0; line-height: 1.2; }
.dh-ec-count { font-size: .61rem; color: #475569; }
.dh-ec-viewall { border-color: rgba(180,79,255,.2); background: rgba(180,79,255,.04); }
.dh-ec-viewall:hover { border-color: rgba(180,79,255,.4); }
.dh-ec-viewall .dh-ec-icon { color: var(--purple,#b44fff); }

/* Bottom workspace ─ 2 equal columns */
.dh-bottom-workspace { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex-shrink: 0; }
.dh-ws-block {
  background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.dh-ws-grid { display: flex; flex-direction: column; gap: 5px; }

/* ── Tool card (.dh-tc) ─────────────────────────── */
.dh-tc {
  display: flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,.022); border: 1px solid rgba(255,255,255,.077);
  border-radius: 9px; padding: 9px 11px;
  cursor: pointer; overflow: hidden;
  transition: border-color .18s, background .18s, transform .15s;
}
.dh-tc:hover { border-color: rgba(0,212,255,.28); background: rgba(0,212,255,.042); transform: translateY(-1px); }
.dh-tc-icon {
  width: 36px; height: 36px; min-width: 36px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: .88rem;
}
.dh-tc-body { flex: 1; min-width: 0; }
.dh-tc-name { font-size: .77rem; font-weight: 700; color: #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dh-tc-desc { font-size: .64rem; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.dh-tc-right { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.dh-tc-arr { color: #334155; font-size: .66rem; transition: color .18s, transform .18s; }
.dh-tc:hover .dh-tc-arr { color: var(--cyan,#00d4ff); transform: translateX(2px); }
.dh-empty-state { display: flex; align-items: center; gap: 7px; color: #334155; font-size: .73rem; padding: 5px 2px; }
.dh-empty-state i { font-size: .85rem; }

/* ════ Category view ════════════════════════════════════ */
.dh-cat-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 22px 12px; border-bottom: 1px solid rgba(255,255,255,.07); flex-shrink: 0;
}
.dh-cat-title-block { flex: 1; min-width: 0; }
.dh-cat-title-block h2 { margin: 0; font-size: 1.1rem; font-weight: 700; color: #f1f5f9; }
.dh-cat-title-block p  { margin: 2px 0 0; font-size: .72rem; color: #475569; }
.dh-cat-controls { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.dh-cat-search-wrap {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px; padding: 5px 11px; transition: border-color .18s;
}
.dh-cat-search-wrap:focus-within { border-color: rgba(0,212,255,.3); }
.dh-cat-search-wrap i { color: #475569; font-size: .76rem; }
.dh-cat-search-wrap input { background: none; border: none; outline: none; color: #e2e8f0; font-size: .77rem; font-family: inherit; width: 130px; }
.dh-layout-btns { display: flex; gap: 3px; }
.dh-layout-btn {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  color: #64748b; border-radius: 6px; padding: 5px 8px; cursor: pointer; font-size: .76rem; transition: all .15s;
}
.dh-layout-btn.active { background: rgba(0,212,255,.1); border-color: rgba(0,212,255,.28); color: var(--cyan,#00d4ff); }
.dh-sort-sel {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  color: #94a3b8; border-radius: 6px; padding: 5px 8px; font-size: .75rem; cursor: pointer; font-family: inherit;
}
#dh-cat-grid {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 9px; padding: 16px 22px;
  overflow-y: auto; flex: 1; align-content: start; min-height: 0;
}
#dh-cat-grid.dh-list { grid-template-columns: 1fr; }
#dh-cat-grid::-webkit-scrollbar { width: 4px; }
#dh-cat-grid::-webkit-scrollbar-thumb { background: rgba(0,212,255,.14); border-radius: 2px; }

/* Shared back arrow */
.dh-back-arrow {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  color: #94a3b8; border-radius: 8px; padding: 7px 12px;
  cursor: pointer; font-size: .85rem; transition: all .18s; flex-shrink: 0;
}
.dh-back-arrow:hover { border-color: var(--cyan,#00d4ff); color: var(--cyan,#00d4ff); }

/* ════ Tool workspace ══════════════════════════════════ */
.dh-tool-ws-header {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 22px 12px;
  border-bottom: 1px solid rgba(0,212,255,.12);
  background: linear-gradient(135deg,rgba(0,212,255,.04),transparent);
  flex-shrink: 0;
}
.dh-tool-ws-title-row { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; flex-wrap: wrap; }
.dh-tw-icon-el {
  font-size: 1.05rem; width: 38px; height: 38px; min-width: 38px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,212,255,.1); border: 1px solid rgba(0,212,255,.28);
  border-radius: 10px; color: var(--cyan,#00d4ff);
}
.dh-tool-ws-title-row > div:nth-child(2) h2 { margin: 0; font-size: .97rem; font-weight: 700; color: #f1f5f9; }
.dh-tool-ws-title-row > div:nth-child(2) p  { margin: 2px 0 0; font-size: .71rem; color: #64748b; }
.dh-tool-meta-row { display: flex; align-items: center; gap: 5px; margin-left: auto; flex-shrink: 0; }
.dh-meta-capsule { font-size: .59rem; font-weight: 700; letter-spacing: .05em; padding: 3px 9px; border-radius: 20px; }
.capsule-js   { background: rgba(0,212,255,.1); color: var(--cyan,#00d4ff); border: 1px solid rgba(0,212,255,.3); }
.capsule-ai   { background: rgba(180,79,255,.1); color: var(--purple,#b44fff); border: 1px solid rgba(180,79,255,.3); }
.capsule-free { background: rgba(34,197,94,.1); color: #22c55e; border: 1px solid rgba(34,197,94,.27); }
.dh-fav-btn {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  color: #64748b; padding: 6px 13px; border-radius: 8px;
  cursor: pointer; font-size: .74rem; font-weight: 600;
  transition: all .18s; white-space: nowrap; flex-shrink: 0; font-family: inherit;
}
.dh-fav-btn:hover { border-color: #eab308; color: #eab308; }
.dh-fav-btn.dh-fav-active { background: rgba(234,179,8,.08); border-color: rgba(234,179,8,.34); color: #eab308; }
.dh-tw-body { flex: 1; overflow-y: auto; min-height: 0; }
.dh-tw-body::-webkit-scrollbar { width: 4px; }
.dh-tw-body::-webkit-scrollbar-thumb { background: rgba(0,212,255,.14); border-radius: 2px; }

/* Filter strip kept for JS API compatibility (hidden from dashboard) */
.dh-filter-strip { display: none; }

/* ══ Dev Hub v3.1 — reference-aligned density + polish ══ */

/* Dashboard container — tighter padding */
#dh-v-dashboard { padding: 13px 20px 10px !important; gap: 7px !important; }

/* Hero — compact text column */
.dh-hero { grid-template-columns: minmax(260px,420px) 1fr !important; }
.dh-hero-text { gap: 5px !important; }
.dh-hero-title { font-size: clamp(1.05rem,1.75vw,1.42rem) !important; }
.dh-hero-sub { font-size: .72rem !important; line-height: 1.4 !important; }
.dh-hero-search { max-width: none !important; padding: 6px 12px !important; }
.dh-hero-img img { max-height: 172px !important; }

/* CTA buttons */
.dh-hero-ctas { display: flex; align-items: center; gap: 8px; }
.dh-cta-primary {
  display: inline-flex; align-items: center; gap: 7px;
  background: linear-gradient(135deg,#7c3aed,#b44fff);
  border: none; color: #fff; padding: 7px 17px;
  border-radius: 9px; font-size: .76rem; font-weight: 700;
  font-family: inherit; cursor: pointer;
  transition: opacity .18s, transform .14s; white-space: nowrap;
}
.dh-cta-primary:hover { opacity: .86; transform: translateY(-1px); }
.dh-cta-ghost {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.14);
  color: #94a3b8; padding: 6px 14px; border-radius: 9px;
  font-size: .76rem; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: all .18s; white-space: nowrap;
}
.dh-cta-ghost:hover { border-color: rgba(255,255,255,.3); color: #e2e8f0; }

/* Stats row */
.dh-stats-row {
  display: flex; align-items: center;
  background: rgba(255,255,255,.022); border: 1px solid rgba(255,255,255,.074);
  border-radius: 11px; padding: 9px 16px;
  flex-shrink: 0;
}
.dh-stat { display: flex; flex-direction: column; align-items: center; gap: 1px; flex: 1; }
.dh-stat-num { font-size: .92rem; font-weight: 800; color: #f1f5f9; line-height: 1; }
.dh-stat-label { font-size: .57rem; color: #475569; text-transform: uppercase; letter-spacing: .07em; }
.dh-stat-sep { width: 1px; height: 24px; background: rgba(255,255,255,.08); flex-shrink: 0; margin: 0 4px; }

/* Section headers — smaller */
.dh-dash-section-hdr { font-size: .74rem !important; }
.dh-dash-row { gap: 5px !important; }

/* Trending — 6 columns single row (matches reference) */
.dh-trending-grid { grid-template-columns: repeat(6,1fr) !important; gap: 5px !important; }

/* Trending cards — compact */
.dh-trending-grid .dh-tc { padding: 8px 9px !important; gap: 7px !important; }
.dh-trending-grid .dh-tc-icon { width: 32px !important; height: 32px !important; min-width: 32px !important; font-size: .82rem !important; border-radius: 7px !important; }
.dh-trending-grid .dh-tc-name { font-size: .73rem !important; }
.dh-trending-grid .dh-tc-desc { font-size: .61rem !important; }
.dh-trending-grid .dh-tc-right { gap: 4px !important; }
.dh-trending-grid .dh-card-badge { font-size: .56rem !important; padding: 2px 6px !important; }

/* Explore cards — compact */
.dh-explore-card { padding: 9px 6px !important; gap: 4px !important; }
.dh-ec-icon { font-size: 1.08rem !important; }
.dh-ec-name { font-size: .66rem !important; }
.dh-ec-count { font-size: .59rem !important; }

/* Workspace blocks — compact */
.dh-bottom-workspace { gap: 8px !important; }
.dh-ws-block { padding: 8px 10px !important; gap: 5px !important; }
.dh-ws-block .dh-tc { padding: 7px 9px !important; gap: 7px !important; }
.dh-ws-block .dh-tc-icon { width: 30px !important; height: 30px !important; min-width: 30px !important; font-size: .78rem !important; }
.dh-ws-block .dh-tc-name { font-size: .73rem !important; }
.dh-ws-block .dh-tc-desc { font-size: .6rem !important; }

/* Sidebar nav — tighter */
.dh-nav-item { padding: 8px 13px !important; }
.dh-nav-sub  { padding: 6px 13px 6px 24px !important; }
.dh-nav-cat  { padding: 6px 13px !important; }
.dh-nav-section-label { padding: 12px 13px 3px !important; }

/* Active home highlight (matches reference "Home" highlighted) */
.dh-nav-home {
  color: #fff !important;
  background: linear-gradient(90deg,rgba(124,58,237,.28),rgba(180,79,255,.12)) !important;
  border-radius: 8px !important;
  margin: 0 6px !important;
  width: calc(100% - 12px) !important;
}

/* Card border/shadow polish */
.dh-tc:hover { box-shadow: 0 3px 14px rgba(0,0,0,.32) !important; }
.dh-explore-card { border-radius: 11px !important; }
.dh-ws-block { border-radius: 11px !important; }

/* ══ Dev Hub v3.2 — vertical card architecture + layout anchor ══ */

/* Trending — restore 3×2 */
.dh-trending-grid { grid-template-columns: repeat(3,1fr) !important; gap: 6px !important; }
/* Reset per-card overrides from v3.1 that assumed 6-col compact */
.dh-trending-grid .dh-tc { padding: 10px 11px !important; gap: 0 !important; }
.dh-trending-grid .dh-tc-icon { width: 28px !important; height: 28px !important; min-width: 28px !important; font-size: .8rem !important; border-radius: 7px !important; }
.dh-trending-grid .dh-tc-name { font-size: .75rem !important; }
.dh-trending-grid .dh-tc-desc { font-size: .62rem !important; }

/* Vertical card base */
.dh-tc.dh-tc-vert {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 4px !important;
  padding: 9px 11px !important;
}
/* Top row: icon left, star right */
.dh-tcv-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1px;
}
/* Star button */
.dh-tcv-star {
  background: none; border: none; padding: 0 2px;
  cursor: pointer; color: #475569; font-size: .75rem;
  transition: color .18s; flex-shrink: 0; line-height: 1;
  margin-top: 1px;
}
.dh-tcv-star:hover { color: #eab308; }
.dh-tcv-star.dh-tcv-fav { color: #eab308; }
/* Mid: name + desc */
.dh-tcv-mid {
  display: flex; flex-direction: column; gap: 2px; flex: 1;
}
.dh-tc.dh-tc-vert .dh-tc-name {
  font-size: .74rem !important; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dh-tc.dh-tc-vert .dh-tc-desc {
  font-size: .61rem !important; color: #475569; line-height: 1.3;
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 1; -webkit-box-orient: vertical;
}
/* Bottom row: badge left, arrow right */
.dh-tcv-bot {
  display: flex; align-items: center;
  justify-content: space-between; margin-top: 3px;
}
.dh-tcv-arr { color: #334155; font-size: .62rem; transition: color .18s, transform .18s; }
.dh-tc.dh-tc-vert:hover .dh-tcv-arr { color: var(--cyan,#00d4ff); transform: translateX(2px); }
.dh-tc.dh-tc-vert:hover { border-color: rgba(0,212,255,.28) !important; background: rgba(0,212,255,.042) !important; }

/* Workspace — always horizontal compact (overrides any .dh-tc-vert in workspace) */
.dh-ws-grid .dh-tc { flex-direction: row !important; align-items: center !important; gap: 9px !important; padding: 7px 9px !important; }
.dh-ws-grid .dh-tc .dh-tcv-top, .dh-ws-grid .dh-tc .dh-tcv-mid, .dh-ws-grid .dh-tc .dh-tcv-bot { display: none !important; }
.dh-ws-grid .dh-tc .dh-tc-icon { width: 28px !important; height: 28px !important; min-width: 28px !important; font-size: .76rem !important; display: flex !important; }
.dh-ws-grid .dh-tc .dh-tc-body { display: flex !important; flex: 1 !important; min-width: 0 !important; flex-direction: column; }
.dh-ws-grid .dh-tc .dh-tc-name { display: block !important; font-size: .73rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dh-ws-grid .dh-tc .dh-tc-desc { display: block !important; font-size: .6rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dh-ws-grid .dh-tc .dh-tc-right { display: flex !important; align-items: center; gap: 4px; flex-shrink: 0; }

/* Workspace blocks — anchor flush to viewport base */
.dh-bottom-workspace { margin-top: auto !important; }

/* Sidebar — ensure full height column with no gaps */
.dh-sidebar { justify-content: flex-start !important; }

/* ══════════════════════════════════════════════════════════════
   Dev Hub v4.0 — Full Landing Page Architecture
   Removes sidebar, adds scrollable landing page, premium cards
══════════════════════════════════════════════════════════════ */

/* ── Page: reset to scrollable block ── */
#devhub-page { padding-top: 0 !important; }
#devhub-page.active {
  display: block !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  flex-direction: unset !important;
}
.dh-sidebar { display: none !important; }
.dh-view { display: none !important; overflow: visible !important; flex: none !important; min-height: unset !important; }
.dh-view.active { display: block !important; }

/* ── Topbar ── */
.dh-topbar {
  position: sticky; top: 0; z-index: 200;
  display: flex; align-items: center; gap: 1rem;
  padding: 0 2rem; height: 58px; box-sizing: border-box;
  background: rgba(0,0,0,.94);
  backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(0,212,255,.1);
}
.dh-tb-back {
  display: flex; align-items: center; gap: .5rem;
  background: none; border: 1px solid rgba(255,255,255,.08);
  color: #64748b; font-size: .78rem; font-family: inherit;
  padding: .4rem .85rem; border-radius: 8px;
  cursor: pointer; transition: all .18s; white-space: nowrap;
  font-weight: 600;
}
.dh-tb-back:hover { color: #e2e8f0; background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.15); }
.dh-tb-brand {
  display: flex; align-items: center; gap: .5rem;
  font-size: .95rem; font-weight: 800; color: #fff; flex-shrink: 0;
}
.dh-tb-brand i { color: var(--cyan,#00d4ff); font-size: .95rem; }
.dh-tb-search {
  flex: 1; display: flex; align-items: center; gap: .65rem;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px; padding: .5rem 1rem; max-width: 520px;
  transition: border-color .18s, box-shadow .18s;
}
.dh-tb-search:focus-within { border-color: rgba(0,212,255,.3); box-shadow: 0 0 0 3px rgba(0,212,255,.06); }
.dh-tb-search i { color: #475569; font-size: .8rem; flex-shrink: 0; }
.dh-tb-search input {
  flex: 1; background: none; border: none; outline: none;
  color: #e2e8f0; font-size: .83rem; font-family: inherit;
}
.dh-tb-search input::placeholder { color: #475569; }
.dh-tb-search kbd {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  border-radius: 5px; padding: 1px 6px; font-size: .66rem; color: #475569;
}
.dh-tb-actions { margin-left: auto; display: flex; align-items: center; gap: .65rem; flex-shrink: 0; }
.dh-tb-suggest {
  display: inline-flex; align-items: center; gap: .45rem;
  background: rgba(180,79,255,.1); border: 1px solid rgba(180,79,255,.25);
  color: var(--purple,#b44fff); padding: .45rem 1rem;
  border-radius: 8px; font-size: .78rem; font-family: inherit;
  cursor: pointer; font-weight: 600; transition: all .18s;
}
.dh-tb-suggest:hover { background: rgba(180,79,255,.18); border-color: rgba(180,79,255,.45); }

/* ── Landing page wrapper ── */
.dh-lp { width: 100%; }
.dh-lp-inner { max-width: 1200px; margin: 0 auto; padding: 0 2.5rem; box-sizing: border-box; }
.dh-lp-section { padding: 4rem 0; border-bottom: 1px solid rgba(255,255,255,.04); }
.dh-lp-section:last-child { border-bottom: none; padding-bottom: 5rem; }
.dh-hero-section { padding: 4.5rem 0 3.5rem; }
.dh-stats-section { padding: 1.5rem 0; background: rgba(0,212,255,.018); border-top: 1px solid rgba(0,212,255,.07); border-bottom: 1px solid rgba(0,212,255,.07); }

/* Section header */
.dh-lp-shdr { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 2rem; gap: 1rem; }
.dh-lp-stitle { font-size: 1.4rem; font-weight: 800; color: #f1f5f9; margin: 0 0 .3rem; }
.dh-lp-ssub { color: #475569; font-size: .82rem; margin: 0; }
.dh-lp-viewall {
  display: inline-flex; align-items: center; gap: .45rem;
  background: rgba(255,255,255,.04); border: 1px solid rgba(0,212,255,.18);
  color: var(--cyan,#00d4ff); padding: .5rem 1.1rem;
  border-radius: 9px; font-size: .78rem; font-family: inherit;
  cursor: pointer; font-weight: 600; transition: all .18s; white-space: nowrap;
}
.dh-lp-viewall:hover { background: rgba(0,212,255,.08); border-color: rgba(0,212,255,.38); }

/* ── Hero ── */
.dh-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.dh-hero-text { display: flex; flex-direction: column; gap: 1.35rem; }
.dh-hero-badge {
  display: inline-flex; align-items: center; gap: .5rem; width: fit-content;
  background: rgba(0,212,255,.08); border: 1px solid rgba(0,212,255,.22);
  color: var(--cyan,#00d4ff); font-size: .73rem; font-weight: 700;
  letter-spacing: .06em; padding: .35rem 1rem; border-radius: 20px;
}
.dh-hero-h1 { font-size: clamp(2rem,3.2vw,2.9rem); font-weight: 900; line-height: 1.1; color: #f1f5f9; margin: 0; }
.dh-hero-desc { font-size: .9rem; color: #64748b; line-height: 1.75; margin: 0; }
.dh-hero-ctas { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.dh-cta-primary {
  display: inline-flex; align-items: center; gap: .5rem;
  background: linear-gradient(135deg, var(--purple,#b44fff), #7c3aed);
  color: #fff; border: none; padding: .75rem 1.6rem;
  border-radius: 10px; font-size: .88rem; font-weight: 700;
  font-family: inherit; cursor: pointer;
  box-shadow: 0 4px 22px rgba(180,79,255,.38);
  transition: transform .2s, box-shadow .2s;
}
.dh-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(180,79,255,.55); }
.dh-cta-ghost {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  color: #94a3b8; padding: .75rem 1.5rem;
  border-radius: 10px; font-size: .88rem; font-weight: 600;
  font-family: inherit; cursor: pointer; transition: all .2s;
}
.dh-cta-ghost:hover { background: rgba(255,255,255,.09); color: #e2e8f0; border-color: rgba(255,255,255,.22); }
.dh-hero-art { display: flex; align-items: center; justify-content: center; }
.dh-hero-art img {
  max-width: 100%; max-height: 340px; object-fit: contain;
  filter: drop-shadow(0 0 60px rgba(180,79,255,.55)) drop-shadow(0 0 30px rgba(0,212,255,.28));
  user-select: none; pointer-events: none;
  animation: hero-float 6s ease-in-out infinite;
}
@keyframes hero-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ── Stats ── */
.dh-stats-strip { display: flex; align-items: center; justify-content: center; }
.dh-stat-item { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: 1rem 3.5rem; }
.dh-stat-num { font-size: 2rem; font-weight: 900; color: #fff; line-height: 1; }
.dh-stat-lbl { font-size: .7rem; color: #475569; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.dh-stat-div { width: 1px; height: 44px; background: rgba(255,255,255,.07); flex-shrink: 0; }

/* ── Premium tool card — vertical ── */
.dh-tc {
  background: rgba(255,255,255,.025) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 14px !important;
  padding: 1.25rem 1.25rem 1.1rem !important;
  display: flex !important; flex-direction: column !important;
  gap: 0 !important; align-items: stretch !important;
  cursor: pointer; position: relative; overflow: hidden;
  transition: border-color .22s, box-shadow .22s, transform .22s;
}
.dh-tc::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,212,255,.32), transparent);
  opacity: 0; transition: opacity .22s;
}
.dh-tc:hover {
  border-color: rgba(0,212,255,.22) !important;
  box-shadow: 0 10px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(0,212,255,.07) !important;
  transform: translateY(-3px);
}
.dh-tc:hover::before { opacity: 1; }

/* Zones */
.dh-tcv-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1rem; }
.dh-tc-icon {
  width: 42px !important; height: 42px !important; min-width: 42px !important;
  display: flex !important; align-items: center; justify-content: center;
  border-radius: 11px !important; font-size: 1rem !important;
}
.dh-tcv-star {
  background: none; border: none; padding: 4px 5px;
  cursor: pointer; color: #334155; font-size: .9rem;
  transition: color .18s, transform .15s; line-height: 1;
}
.dh-tcv-star:hover { color: #eab308; transform: scale(1.2); }
.dh-tcv-star.dh-tcv-fav { color: #eab308; }
.dh-tcv-mid { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.dh-tc-name {
  font-size: .93rem !important; font-weight: 700 !important; color: #e2e8f0 !important;
  white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
}
.dh-tc-desc {
  font-size: .78rem !important; color: #64748b !important; line-height: 1.55 !important;
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.dh-tcv-bot { display: flex; align-items: center; justify-content: space-between; }
.dh-card-badge { font-size: .62rem; padding: 2px 9px; border-radius: 20px; font-weight: 700; letter-spacing: .04em; }
.dh-card-badge.js { background: rgba(234,179,8,.1); border: 1px solid rgba(234,179,8,.25); color: #eab308; }
.dh-card-badge.ai { background: rgba(0,212,255,.1); border: 1px solid rgba(0,212,255,.25); color: var(--cyan,#00d4ff); }
.dh-tcv-arr-btn {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,212,255,.06); border: 1px solid rgba(0,212,255,.16);
  color: var(--cyan,#00d4ff); font-size: .7rem;
  transition: all .2s; flex-shrink: 0;
}
.dh-tc:hover .dh-tcv-arr-btn { background: rgba(0,212,255,.16); border-color: rgba(0,212,255,.4); transform: translateX(2px); }

/* ── Tool grid ── */
.dh-tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap: 1rem; }
.dh-tool-grid.dh-list { grid-template-columns: 1fr !important; }
.dh-tool-grid.dh-list .dh-tc { flex-direction: row !important; align-items: center !important; gap: 1rem !important; padding: .9rem 1.25rem !important; }
.dh-tool-grid.dh-list .dh-tcv-top { margin-bottom: 0; }
.dh-tool-grid.dh-list .dh-tcv-mid { margin-bottom: 0; flex: 1; min-width: 0; }
.dh-tool-grid.dh-list .dh-tcv-bot { flex-shrink: 0; }
.dh-tool-grid.dh-list .dh-tcv-star { order: 99; }

/* ── Explore by Category grid ── */
.dh-cat-lp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 1rem; }
.dh-explore-card {
  background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px; padding: 1.4rem 1.25rem;
  display: flex; flex-direction: column; align-items: flex-start; gap: .5rem;
  cursor: pointer; transition: border-color .2s, background .2s, transform .2s;
}
.dh-explore-card:hover { border-color: rgba(0,212,255,.22); background: rgba(0,212,255,.03); transform: translateY(-2px); }
.dh-ec-icon { font-size: 1.4rem; margin-bottom: .3rem; }
.dh-ec-name { font-size: .9rem; font-weight: 700; color: #e2e8f0; }
.dh-ec-count { font-size: .74rem; color: #475569; }
.dh-explore-card.dh-ec-viewall .dh-ec-icon { color: #64748b; }
.dh-explore-card.dh-ec-viewall .dh-ec-name { color: #94a3b8; }

/* ── Category/All page header ── */
.dh-pg-hdr {
  display: flex; align-items: center; gap: 1.5rem;
  padding-top: 2.5rem; padding-bottom: 2rem; flex-wrap: wrap;
}
.dh-pg-back {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
  color: #94a3b8; padding: .55rem 1.1rem;
  border-radius: 9px; font-size: .8rem; font-family: inherit;
  cursor: pointer; font-weight: 600; transition: all .18s; white-space: nowrap;
}
.dh-pg-back:hover { background: rgba(255,255,255,.07); color: #e2e8f0; border-color: rgba(255,255,255,.18); }
.dh-pg-title-block { flex: 1; min-width: 0; }
.dh-pg-title-block h1 { font-size: 1.55rem; font-weight: 900; color: #fff; margin: 0 0 .3rem; }
.dh-pg-title-block p { color: #475569; font-size: .83rem; margin: 0; }
.dh-pg-controls { display: flex; align-items: center; gap: .65rem; flex-shrink: 0; flex-wrap: wrap; }
.dh-pg-srch {
  display: flex; align-items: center; gap: .55rem;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px; padding: .5rem .9rem; transition: border-color .18s;
}
.dh-pg-srch:focus-within { border-color: rgba(0,212,255,.3); }
.dh-pg-srch i { color: #475569; font-size: .78rem; }
.dh-pg-srch input {
  background: none; border: none; outline: none;
  color: #e2e8f0; font-size: .82rem; font-family: inherit; width: 160px;
}
.dh-pg-srch input::placeholder { color: #475569; }
.dh-pg-body { padding-bottom: 4rem; }

/* Layout + sort controls */
.dh-layout-btns { display: flex; gap: 3px; }
.dh-layout-btn {
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  color: #64748b; border-radius: 8px; cursor: pointer; font-size: .8rem; transition: all .18s;
}
.dh-layout-btn.active { background: rgba(0,212,255,.1); border-color: rgba(0,212,255,.25); color: var(--cyan,#00d4ff); }
.dh-sort-sel {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
  color: #94a3b8; padding: .45rem .75rem; border-radius: 8px;
  font-size: .78rem; font-family: inherit; cursor: pointer;
  outline: none; appearance: none;
}

/* ── Tool workspace ── */
.dh-tw-hdr {
  display: flex; align-items: center; gap: 1.5rem;
  padding-top: 2.5rem; padding-bottom: 1.5rem; flex-wrap: wrap;
}
.dh-tool-ws-title-row {
  display: flex; align-items: center; gap: 1.25rem; flex: 1; min-width: 0; flex-wrap: wrap;
}
.dh-tw-icon-el { font-size: 1.5rem; color: var(--cyan,#00d4ff); flex-shrink: 0; }
.dh-tool-ws-title-row > div:not(.dh-tool-meta-row) > h2 { font-size: 1.25rem; font-weight: 800; color: #fff; margin: 0 0 .2rem; }
.dh-tool-ws-title-row > div:not(.dh-tool-meta-row) > p { color: #475569; font-size: .82rem; margin: 0; }
.dh-tool-meta-row { display: flex; gap: .5rem; align-items: center; }
.dh-meta-capsule {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 20px; font-size: .67rem; font-weight: 700;
}
.capsule-js { background: rgba(234,179,8,.1); border: 1px solid rgba(234,179,8,.25); color: #eab308; }
.capsule-ai { background: rgba(0,212,255,.1); border: 1px solid rgba(0,212,255,.25); color: var(--cyan,#00d4ff); }
.capsule-free { background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.2); color: #22c55e; }
.dh-fav-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  color: #64748b; padding: .5rem 1.1rem;
  border-radius: 9px; font-size: .8rem; font-family: inherit;
  cursor: pointer; font-weight: 600; transition: all .18s;
}
.dh-fav-btn:hover { border-color: rgba(234,179,8,.3); color: #eab308; }
.dh-fav-active { background: rgba(234,179,8,.08) !important; border-color: rgba(234,179,8,.28) !important; color: #eab308 !important; }
.dh-tw-body { padding-bottom: 4rem; }

/* Empty state */
.dh-empty-state {
  grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center;
  gap: .75rem; padding: 3rem 1rem; color: #334155; font-size: .82rem;
}
.dh-empty-state i { font-size: 1.8rem; opacity: .5; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .dh-hero-grid { grid-template-columns: 1fr; }
  .dh-hero-art { display: none; }
  .dh-topbar { padding: 0 1rem; gap: .6rem; }
  .dh-tb-brand span { display: none; }
  .dh-lp-inner { padding: 0 1.25rem; }
  .dh-stats-strip { flex-wrap: wrap; }
  .dh-stat-item { padding: .75rem 1.5rem; }
}
@media (max-width: 600px) {
  .dh-tb-search kbd, .dh-tb-suggest { display: none; }
  .dh-tool-grid { grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); }
  .dh-stat-num { font-size: 1.4rem; }
}

/* ── v4.1 patch: override inline display set by SPA_PAGES ── */
/* navigateToPage() sets style.display='flex'; override at element level */
#devhub-page {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-top: 0 !important;
  flex-direction: column !important; /* harmless if flex, correct for block */
}
/* When display is set to flex by JS, force block layout inside via the inner lp wrap */
#devhub-page > .dh-topbar,
#devhub-page > .dh-view { width: 100%; }
#devhub-page.active, #devhub-page[style*="flex"] {
  display: block !important;
  overflow-y: auto !important;
}

/* ══════════════════════════════════════════════════════════════
   Dev Hub Coming Soon — v5.0 WIPE
   Kills all v4.0 layout; single-screen, no scroll, career-style
══════════════════════════════════════════════════════════════ */

/* Kill every v4.0 structure */
.dh-topbar, .dh-view, .dh-lp, .dh-lp-section,
.dh-tool-grid, .dh-cat-lp-grid, .dh-sidebar { display: none !important; }

/* Page: single-screen, no scroll, pure black */
#devhub-page {
  overflow: hidden !important;
  padding-top: 0 !important;
  background: #000 !important;
  display: flex !important;
  flex-direction: column !important;
}
#devhub-page.active,
#devhub-page[style*="block"],
#devhub-page[style*="flex"] {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* sp-header inherits from career/security */
#devhub-page .sp-wrap { flex-shrink: 0; }

/* Centered hero — fills remaining viewport */
.dh-cs-hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 2rem 4rem;
  gap: 1.15rem;
}

.dh-cs-title {
  font-size: clamp(1.85rem, 3vw, 2.8rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.15;
  margin: 0;
  max-width: 760px;
}

.dh-cs-desc {
  color: #64748b;
  font-size: .9rem;
  line-height: 1.85;
  max-width: 640px;
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE OVERHAUL — Global SPA & Component Fixes
   Eliminates scroll freeze, grid crushes, and layout breaks
   Author: Lwa | lwaaero.com
══════════════════════════════════════════════════════════════ */

/* ── 1. DevHub scroll unlock on mobile ──
   The coming-soon page uses overflow:hidden for the full-viewport
   desktop layout. On mobile the content can exceed viewport height
   so we restore scroll. */
@media (max-width: 768px) {
  #devhub-page,
  #devhub-page.active,
  #devhub-page[style*="block"],
  #devhub-page[style*="flex"] {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    min-height: calc(100vh - 88px);
    height: auto !important;
  }
  /* dh-cs-hero: remove flex:1 stretch that clips content on short screens */
  .dh-cs-hero {
    flex: 0 0 auto;
    padding: 2.5rem 1.25rem 3rem;
    min-height: calc(100vh - 200px);
    justify-content: center;
  }
  .dh-cs-title { font-size: clamp(1.4rem, 6vw, 1.85rem); }
}

/* ── 2. SPA pages — scroll & min-height reset on mobile ── */
@media (max-width: 768px) {
  #career-page,
  #code-fix-page,
  #security-page {
    min-height: auto;
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* sp-header: allow wrapping so back button + title don't crush */
  .sp-header {
    flex-wrap: wrap;
    gap: .85rem;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
  }
  .sp-title { font-size: 1.25rem; }
  .sp-sub { font-size: .78rem; }
  .sp-back-btn { padding: 7px 13px; font-size: .78rem; }

  /* sp-wrap: tighter padding on very narrow screens */
  .sp-wrap { padding: 1.25rem .9rem 3rem; }

  /* sp-feat-grid: single column on mobile */
  .sp-feat-grid { grid-template-columns: 1fr; gap: 1rem; }

  /* sp-feat-card: less internal padding */
  .sp-feat-card { padding: 1.25rem; }

  /* sp-coming-card: less padding */
  .sp-coming-card { padding: 2rem 1.1rem; }
  .sp-coming-text { font-size: .8rem; }
  .sp-coming-title { font-size: 1.05rem; }
  .sp-coming-badges { gap: .45rem; }
  .sp-coming-badges span { font-size: .62rem; padding: 4px 9px; }
}

/* ── 3. DevHub tool grid — min card width fix ── */
@media (max-width: 480px) {
  .dh-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .dh-card { padding: .65rem .7rem; gap: .55rem; }
  .dh-card-icon { width: 32px; height: 32px; font-size: .85rem; }
  .dh-card-name { font-size: .75rem; }
  .dh-card-desc { font-size: .65rem; }
}

/* ── 4. Speed test grid: 4 cols → 2 cols on mobile ── */
@media (max-width: 600px) {
  .dh-speed-grid { grid-template-columns: repeat(2, 1fr); gap: .55rem; }
  .dh-speed-val { font-size: 1.15rem; }
  .dh-speed-stat { padding: .75rem .6rem; font-size: .68rem; }
}

/* ── 5. HTTP headers row: fixed 200px left col → full width ── */
@media (max-width: 600px) {
  .hh-row {
    grid-template-columns: 1fr;
    gap: .2rem;
    padding: .5rem .7rem;
  }
  .hh-key { font-size: .74rem; }
  .hh-val { font-size: .72rem; color: #7aa2b8; padding-left: .5rem; border-left: 2px solid rgba(0,212,255,.15); }
}

/* ── 6. Diff columns: 2 cols → 1 col on mobile ── */
@media (max-width: 640px) {
  .dh-diff-cols { grid-template-columns: 1fr; gap: .6rem; }
  .dh-diff-output { max-height: 180px; }
}

/* ── 7. DevHub modal: full-width on mobile ── */
@media (max-width: 640px) {
  .dh-modal-overlay { padding: .5rem; align-items: flex-end; }
  .dh-modal-box {
    max-width: 100%;
    max-height: 92vh;
    border-radius: 20px 20px 14px 14px;
  }
  .dh-modal-header { padding: 1rem 1.1rem; }
  .dh-modal-body-wrap { padding: 1.1rem; }
  .dh-modal-title-row h2 { font-size: .95rem; }
  .dh-modal-title-row i { width: 32px; height: 32px; font-size: .95rem; }
  .dh-modal-badge { display: none; }
}

/* ── 8. Base converter grid: responsive ── */
@media (max-width: 480px) {
  .dh-base-grid { grid-template-columns: 68px 1fr; gap: .45rem .6rem; }
  .dh-base-grid label { font-size: .68rem; }
}

/* ── 9. Tab row: allow wrapping ── */
@media (max-width: 480px) {
  .dh-tab-row { flex-wrap: wrap; gap: .3rem; }
  .dh-tab { padding: 6px 12px; font-size: .74rem; }
}

/* ── 10. Drop zone: less padding on mobile ── */
@media (max-width: 480px) {
  .dh-drop-zone { padding: 1.75rem 1rem; font-size: .82rem; }
}

/* ── 11. Docs page sidebar: prevent hidden overflow trap on mobile ── */
@media (max-width: 768px) {
  #docs-page {
    overflow-y: auto !important;
    height: auto !important;
    min-height: calc(100vh - 88px);
  }
  .docs-layout { overflow: visible !important; }
}

/* ── 12. Main site hero: responsive title & stat grid ── */
@media (max-width: 480px) {
  .hero-name { font-size: clamp(1.8rem, 9vw, 2.5rem); line-height: 1.15; }
  .hero-sub  { font-size: .85rem; }
}

/* ── 13. General: prevent horizontal overflow on all SPA pages ── */
#career-page *, #code-fix-page *, #security-page *, #devhub-page * {
  max-width: 100%;
  box-sizing: border-box;
}
/* Allow pre/code blocks to scroll horizontally instead of breaking layout */
#career-page pre, #code-fix-page pre, #security-page pre, #devhub-page pre,
.cs-terminal-body, .dh-hl-pre {
  max-width: 100%;
  overflow-x: auto;
  word-break: normal;
  white-space: pre;
}

/* ── 14. Project modal: full-width on mobile ── */
@media (max-width: 600px) {
  .pm-box {
    padding: 1.75rem 1.25rem 1.5rem;
    border-radius: 18px;
  }
  .pm-overlay { padding: .75rem; }
}

/* ── 15. Contact form grid: stack on mobile ── */
@media (max-width: 480px) {
  .contact-wrapper { grid-template-columns: 1fr !important; gap: 1.5rem; }
}

/* ── 16. Skills grid: already responsive, reinforce on tiny screens ── */
@media (max-width: 420px) {
  .skills-categories { grid-template-columns: 1fr !important; }
}

/* ── 17. Global fixed-UI protection: chat widget + docs toggle ── */
/* Ensures no SPA page container, overlay, or stacking context can block
   touch/pointer events on the two persistent fixed buttons.             */
#lwa-chat-btn,
#lwa-chat-window {
  position: fixed !important;
  z-index: 9900 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}
#lwa-chat-btn  { bottom: 22px !important; right: 22px !important; top: auto !important; left: auto !important; }
#lwa-chat-window { bottom: 74px !important; right: 22px !important; top: auto !important; left: auto !important; }

/* old #sidebarToggle removed — replaced by #docs-nav-fab (self-contained component) */

/* Prevent any SPA page wrapper from creating a new stacking context
   that would trap fixed descendants (no transform/filter on page roots) */
#docs-page,
#devhub-page,
#career-page,
#code-fix-page,
#security-page {
  transform: none !important;
  filter: none !important;
  will-change: auto !important;
  isolation: auto !important;
}