:root {
      --bg: #0b0d12;
      --panel: #121620;
      --muted: #a8b0c0;
      --text: #e7ecf5;
      --accent: #6ea8ff;
      --chip: #1b2230;
      --chip-border: #273149;
      --ring: #2a3a64;
      --shadow: 0 10px 30px rgba(0,0,0,0.35);
      --radius: 16px;
    }
    
    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0; background: radial-gradient(1200px 600px at 70% -10%, #14203b33, transparent), var(--bg); color: var(--text);
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji';
      line-height: 1.45;
    }

    .container { max-width: 1080px; margin: 0 auto; padding: 24px; }

    header {
      text-align: center; padding: 40px 0 24px; margin-bottom: 8px;
    }
    h1 { font-size: clamp(28px, 3vw, 40px); margin: 0 0 10px; }
    .sub { color: var(--muted); font-size: clamp(14px, 2vw, 18px); margin: 0; }

    .toolbar {
      display: grid; gap: 12px; grid-template-columns: 1fr; margin: 24px 0 20px;
    }
    @media (min-width: 720px) {
      .toolbar { grid-template-columns: 1fr 180px 180px; }
    }

    .control {
      background: var(--panel); border: 1px solid var(--ring); border-radius: var(--radius);
      display: flex; align-items: center; padding: 10px 12px; gap: 10px; box-shadow: var(--shadow);
    }
    .control input, .control select {
      background: transparent; border: none; outline: none; color: var(--text); width: 100%; font-size: 14px;
    }
    

    .grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
    @media (min-width: 600px) { .grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 980px) { .grid { grid-template-columns: repeat(3, 1fr); } }

    .card {
      background: linear-gradient(0deg, rgba(255,255,255,0.02), rgba(255,255,255,0.02)), var(--panel);
      border: 1px solid #1e2433; border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow);
      display: flex; flex-direction: column; gap: 12px; min-height: 190px;
    }
    .top { display: flex; gap: 12px; align-items: center; }
    .logo { width: 48px; height: 48px; border-radius: 12px; background: #0f1320; flex: 0 0 48px; object-fit: cover; }
    .name { font-weight: 700; margin: 0; font-size: 18px; }
    .meta { color: var(--muted); font-size: 12px; margin-top: 2px; }

    .desc { color: #cfd6e6; font-size: 14px; margin: 4px 0 0; }

    .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
    .chip { font-size: 11px; padding: 6px 10px; background: var(--chip); border: 1px solid var(--chip-border); border-radius: 999px; color: #d6def0; }

    .actions { margin-top: auto; }
    .btn {
      display: inline-flex; justify-content: center; align-items: center; gap: 8px;
      width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid #2a3a64; background: #16203a;
      color: #e2ebff; text-decoration: none; font-weight: 600; transition: transform .04s ease, background .2s ease;
    }
    .btn:hover { background: #1a2950; transform: translateY(-1px); }

    footer { text-align: center; color: var(--muted); font-size: 12px; padding: 24px 0 40px; }
    .count { color: #a4b8ff; font-weight: 700; }

    .empty { text-align: center; color: var(--muted); padding: 24px; border: 1px dashed #2a3a64; border-radius: var(--radius); }