:root{
    --accent:#ff8c00;
    --deep:#02030a;
    --glass: rgba(255,255,255,.07);
    --line: rgba(255,255,255,.10);
    --txt: rgba(255,255,255,.92);
    --muted: rgba(255,255,255,.70);
    --shadow: 0 22px 70px rgba(0,0,0,.45);
    --r: 18px;
  }

  .projects-header{
    border: 1px solid var(--line);
    border-radius: calc(var(--r) + 4px);
    padding: 22px 18px;
    background: linear-gradient(135deg, rgba(255,140,0,.10), rgba(255,255,255,.04));
    box-shadow: var(--shadow);
  }
  .section-title{ color: var(--txt); margin:0 0 8px; font-weight:800; letter-spacing:.2px }
  .section-subtitle{ color: var(--muted); margin:0 }
  .highlight{ color: var(--accent) }

  .glassBackground{
    border: 1px solid var(--line);
    border-radius: calc(var(--r) + 6px);
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    box-shadow: var(--shadow);
  }

  .project-toolbar{
    display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:space-between;
    margin-bottom: 14px;
  }
  .project-search{
    flex: 1 1 320px;
    display:flex; gap:10px; align-items:center;
    border:1px solid var(--line);
    background: rgba(0,0,0,.25);
    border-radius: 999px;
    padding: 10px 12px;
  }
  .project-search input{
    width:100%;
    border:0; outline:0;
    background: transparent;
    color: var(--txt);
    font-size: .95rem;
  }
  .project-search .bi{ color: var(--muted) }

  .project-count{
    flex: 0 0 auto;
    border:1px solid var(--line);
    background: rgba(0,0,0,.22);
    padding: 10px 12px;
    border-radius: 999px;
    color: var(--muted);
    font-size: .92rem;
    white-space: nowrap;
  }

  .project-tabs{
    display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  }
  .project-tab{
    border-radius: 999px !important;
    border: 1px solid rgba(255,140,0,.40) !important;
    color: rgba(255,255,255,.85) !important;
    background: rgba(0,0,0,.18) !important;
    padding: 10px 14px !important;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  }
  .project-tab:hover{
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(255,140,0,.12);
    background: rgba(255,140,0,.10) !important;
  }
  .project-tab.active{
    background: linear-gradient(135deg, rgba(255,140,0,.30), rgba(255,140,0,.12)) !important;
    border-color: rgba(255,140,0,.65) !important;
    box-shadow: 0 18px 45px rgba(255,140,0,.18);
  }

  .project-card{
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: rgba(0,0,0,.25);
    box-shadow: 0 18px 60px rgba(0,0,0,.35);
    position: relative;
    overflow:hidden;
    transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .project-card::before{
    content:"";
    position:absolute; inset:-2px;
    background: radial-gradient(650px 160px at 20% 0%, rgba(255,140,0,.22), transparent 60%);
    opacity:.9;
    pointer-events:none;
  }
  .project-card:hover{
    transform: translateY(-4px);
    border-color: rgba(255,140,0,.40);
    box-shadow: 0 22px 80px rgba(0,0,0,.55);
  }
  .project-card h6{
    position:relative;
    margin:0 0 10px;
    font-weight:800;
    letter-spacing:.2px;
  }
  .project-card p{ position:relative; margin:0 0 12px; color: var(--muted); line-height:1.45 }
  .project-meta{
    position:relative;
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap;
    justify-content:space-between;
  }
  .project-meta .badge{
    border-radius: 999px;
    padding: 8px 10px;
  }
  .project-actions{
    display:flex; gap:10px; align-items:center;
  }
  .action-link{
    border:0;
    background: transparent;
    color: rgba(255,255,255,.90);
    font-size: .9rem;
    padding: 0;
    text-decoration: none;
  }
  .action-link:hover{ color: var(--accent) }

  .project-group{ transition: opacity .2s ease, transform .2s ease }
  .project-group.is-hidden{
    opacity:0;
    transform: scale(.98);
    pointer-events:none;
    position:absolute !important;
    left:-99999px !important;
    top:auto !important;
  }

  #siteViewerModal .modal-content{
    border-radius: 18px;
    overflow:hidden;
    box-shadow: var(--shadow);
  }

  .viewer-loader{
    position:absolute; inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background: rgba(0,0,0,.65);
    backdrop-filter: blur(6px);
    z-index: 10;
  }
  .loader-card{
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    border-radius: 16px;
    padding: 14px 16px;
    color: rgba(255,255,255,.9);
    display:flex;
    align-items:center;
    gap: 12px;
    min-width: 220px;
  }
  .loader-dot{
    width:10px; height:10px; border-radius:999px;
    background: var(--accent);
    box-shadow: 0 0 0 6px rgba(255,140,0,.18);
    animation: pulse 1.1s infinite ease-in-out;
  }
  @keyframes pulse{
    0%,100%{ transform: scale(1); opacity: 1 }
    50%{ transform: scale(1.45); opacity: .6 }
  }

  .draw-hint{
    position:absolute;
    left: 12px;
    bottom: 12px;
    z-index: 11;
    padding: 8px 10px;
    border-radius: 999px;
    border:1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.35);
    color: rgba(255,255,255,.85);
    font-size: .85rem;
    display:none;
    user-select:none;
  }
  .draw-hint.show{ display:inline-flex }

  @media (max-width: 576px){
    .projects-header{ padding: 18px 14px }
    .project-tab{ padding: 9px 12px !important; font-size: .92rem }
    #viewerWrap{ height: 78vh !important }
  }