#previewCarousel img{
  border-radius: 1rem;
  max-height: 70vh;
  object-fit: cover;
}
    :root{
      --radius: 1rem;
      --shadow: 0 12px 30px rgba(17,24,39,.10);
      --shadow-soft: 0 8px 24px rgba(17,24,39,.06);

      --bg: #f6f8fc;
      --surface: #ffffff;
      --surface-2: #f3f4f6;
      --border: #e5e7eb;
      --text: #111827;
      --muted: #6b7280;

      --accent: #3b82f6;
      --accent-weak: rgba(59,130,246,.15);
      --accent-weak-2: rgba(59,130,246,.08);

      --success: #10b981;
      --warning: #f59e0b;
      --danger: #ef4444;
    }

    html[data-theme="dark"]{
      --bg: #0b1220;
      --surface: rgba(17,24,39,.75);
      --surface-2: rgba(31,41,55,.55);
      --border: rgba(255,255,255,.10);
      --text: #e5e7eb;
      --muted: rgba(229,231,235,.70);
      --shadow: 0 18px 45px rgba(0,0,0,.35);
      --shadow-soft: 0 10px 28px rgba(0,0,0,.25);
      --accent-weak: rgba(59,130,246,.22);
      --accent-weak-2: rgba(59,130,246,.10);
    }

    html[data-accent="green"]{
      --accent: #10b981;
      --accent-weak: rgba(16,185,129,.15);
      --accent-weak-2: rgba(16,185,129,.08);
    }

    body{
      background: var(--bg);
      color: var(--text);
    }

    .text-muted{ color: var(--muted) !important; }
    a{ color: var(--accent); }
    a:hover{ filter: brightness(.9); }

    .topbar{
      position: sticky;
      top: 0;
      z-index: 1030;
      background: color-mix(in srgb, var(--surface) 85%, transparent);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--border);
      box-shadow: 0 10px 20px rgba(0,0,0,.04);
    }

    .brand-pill{
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      padding: .35rem .75rem;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--surface);
      box-shadow: var(--shadow-soft);
      font-weight: 600;
    }

    .btn-accent{
      background: var(--accent);
      border-color: var(--accent);
      color: #fff;
    }
    .btn-accent:hover{ filter: brightness(.95); color: #fff; }

    .btn-soft{
      background: var(--accent-weak-2);
      border: 1px solid var(--border);
      color: var(--text);
    }
    .btn-soft:hover{ background: var(--accent-weak); }

    .card-surface{
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow-soft);
    }

    .section-sep{
      height: 1px;
      background: var(--border);
      margin: 2.25rem 0;
    }

    .hero{
      border-bottom: 1px solid var(--border);
      background:
        radial-gradient(1200px circle at 20% 20%, var(--accent-weak), transparent 55%),
        radial-gradient(1200px circle at 80% 30%, rgba(16,185,129,.10), transparent 60%),
        radial-gradient(900px circle at 60% 90%, rgba(99,102,241,.10), transparent 60%);
    }

    .badge-soft{
      background: var(--surface-2);
      border: 1px solid var(--border);
      color: var(--text);
      font-weight: 500;
    }

    .project-card{
      overflow: hidden;
      transition: transform .15s ease, box-shadow .15s ease;
    }
    .project-card:hover{
      transform: translateY(-2px);
      box-shadow: var(--shadow);
    }

    .thumb{
      height: 190px;
      width: 100%;
      object-fit: cover;
      background: var(--surface-2);
    }

    .filter-chip{
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text);
      padding: .35rem .75rem;
      font-weight: 600;
      cursor: pointer;
      user-select: none;
      transition: background .12s ease;
    }
    .filter-chip:hover{ background: var(--surface-2); }
    .filter-chip.active{
      border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
      box-shadow: 0 0 0 .25rem var(--accent-weak);
    }

    .form-control, .form-select{
      background: var(--surface);
      border-color: color-mix(in srgb, var(--border) 80%, transparent);
      color: var(--text);
    }
    .form-control:focus, .form-select:focus{
      border-color: color-mix(in srgb, var(--accent) 70%, var(--border));
      box-shadow: 0 0 0 .25rem var(--accent-weak);
      color: var(--text);
    }

    .dropdown-menu{
      background: var(--surface);
      border: 1px solid var(--border);
      box-shadow: var(--shadow-soft);
    }
    .dropdown-item{ color: var(--text); }
    .dropdown-item:hover{ background: var(--surface-2); }

    .modal-admin .modal-content{
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 1.25rem;
      box-shadow: var(--shadow);
    }
    .modal-admin .modal-header{ border-bottom: 1px solid var(--border); }
    .modal-admin .modal-footer{ border-top: 1px solid var(--border); }

    .progress{
      background: color-mix(in srgb, var(--surface-2) 75%, transparent);
      border: 1px solid var(--border);
      border-radius: 999px;
      overflow: hidden;
      height: 12px;
    }
    .progress-bar{ background: var(--accent); }

    .timeline{
      position: relative;
      padding-left: 1.25rem;
    }
    .timeline:before{
      content:"";
      position:absolute;
      left: .48rem;
      top: .25rem;
      bottom: .25rem;
      width: 2px;
      background: var(--border);
    }
    .tl-item{
      position: relative;
      padding-left: 1rem;
      margin-bottom: 1.25rem;
    }
    .tl-item:last-child{ margin-bottom: 0; }
    .tl-dot{
      position: absolute;
      left: -.02rem;
      top: .15rem;
      width: .9rem;
      height: .9rem;
      border-radius: 999px;
      background: var(--surface);
      border: 2px solid var(--accent);
      box-shadow: 0 0 0 .25rem var(--accent-weak);
    }
    .tl-content{
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: 1rem;
      padding: .9rem;
    }