:root {
      --bg: #0f1115;
      --panel: #161a22;
      --muted: #8a94a7;
      --text: #e6eaf2;
      --primary: #72e1d1;
      --accent: #ff6b6b;
      --focus: #ffd166;
      --border: #232835;
    }

    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0;
      background: linear-gradient(180deg, #0c0f14 0%, #0f1115 100%);
      color: var(--text);
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    }

    header {
      position: sticky;
      top: 0;
      z-index: 20;
      backdrop-filter: saturate(1.2) blur(6px);
      background: rgba(16, 18, 24, 0.75);
      border-bottom: 1px solid var(--border);
    }

    .container {
      max-width: 1100px;
      margin: 0 auto;
      padding: 16px;
    }

    .toolbar {
      display: grid;
      grid-template-columns: 1fr auto auto auto;
      gap: 12px;
      align-items: center;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 700;
      letter-spacing: 0.2px;
    }

    .brand .logo {
      width: 28px; height: 28px;
      display: inline-grid; place-items: center;
      border-radius: 8px;
      background: radial-gradient(100% 100% at 0% 0%, #2a2f3b 0%, #161a22 100%);
      border: 1px solid var(--border);
      color: var(--primary);
      font-weight: 800;
      font-size: 16px;
    }

    .btn, select {
      border: 1px solid var(--border);
      background: var(--panel);
      color: var(--text);
      padding: 10px 12px;
      border-radius: 10px;
      cursor: pointer;
      transition: border-color 0.15s ease, transform 0.05s ease;
      font-weight: 600;
    }
    .btn:hover, select:hover { border-color: #2f3646; }
    .btn:active { transform: translateY(1px); }

    .btn-primary {
      background: linear-gradient(180deg, #1d222e 0%, #161a22 100%);
      border-color: #2a3141;
      color: var(--primary);
    }

    .btn-tab {
      background: #141822;
      border-color: #23293a;
    }
    .btn-tab.active {
      color: var(--primary);
      border-color: #3a445b;
      background: #17202e;
    }

    main .controls {
      display: grid;
      grid-template-columns: auto auto 1fr auto;
      gap: 10px;
      align-items: center;
      margin: 10px 0 20px;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat( auto-fill, minmax(220px, 1fr) );
      gap: 14px;
    }

    .card {
      border: 1px solid var(--border);
      background: #121620;
      border-radius: 14px;
      overflow: hidden;
      position: relative;
    }

    .card img {
      width: 100%;
      height: 220px;
      object-fit: cover;
      display: block;
      background: #0b0e14;
    }

    .card .meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 12px;
      border-top: 1px solid var(--border);
      gap: 8px;
    }

    .tag {
      font-size: 12px;
      color: var(--muted);
      background: #11151e;
      border: 1px solid #22283a;
      padding: 6px 8px;
      border-radius: 999px;
    }

    .fav-btn {
      border: 1px solid #2a3144;
      background: #151a26;
      color: #eaeaea;
      padding: 8px 10px;
      border-radius: 10px;
      cursor: pointer;
      font-weight: 700;
    }
    .fav-btn.active {
      color: var(--accent);
      border-color: #3d2430;
      background: #1a0f14;
    }

    .empty {
      text-align: center;
      color: var(--muted);
      padding: 40px 20px;
      border: 1px dashed #2a3144;
      border-radius: 16px;
      background: #10141d;
    }

    .pill {
      font-size: 13px;
      color: var(--muted);
      background: #11151e;
      border: 1px solid #22283a;
      padding: 8px 12px;
      border-radius: 999px;
    }

    .status {
      display: flex; gap: 10px; align-items: center;
      color: var(--muted);
      font-size: 14px;
    }

    .footer {
      margin: 24px 0 12px;
      color: var(--muted);
      font-size: 13px;
      text-align: center;
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0,0,0,0);
      white-space: nowrap;
      border: 0;
    }

    @media (max-width: 640px) {
      .toolbar { grid-template-columns: 1fr auto auto; }
      main .controls { grid-template-columns: auto auto 1fr; }
      .hide-sm { display: none; }
    }