:root {
      --bg: rgba(0,0,0,0.6);
      --accent: #ff4d4d;
      --text: #fff;
      --glass: rgba(255,255,255,0.1);
      --radius: 16px;
      --blur: 20px;
    }
    body {
      font-family: "Fira Code", monospace;
      background: url('https://imrs.madebydanny.uk/?url=https%3A%2F%2Fpublic-cdn.madebydanny.uk%2Fuser-content%2F2025-10-07%2F23-16-02_Untitled-8.png');
      color: var(--text);
      margin: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 100vh;
      text-align: center;
    }
    nav {
      display: flex;
      justify-content: center;
      gap: 1rem;
      padding: 1rem;
      background: var(--glass);
      backdrop-filter: blur(var(--blur));
      border-radius: var(--radius);
      margin-top: 1rem;
    }
    nav a { color: var(--text); text-decoration: none; font-weight: 600; }
    nav a.active, nav a:hover { color: var(--accent); }
    .container {
      background: var(--glass);
      backdrop-filter: blur(var(--blur));
      border-radius: var(--radius);
      padding: 2rem;
      max-width: 600px;
      width: 90%;
      margin-top: 2rem;
      box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    }
    input {
      width: 100%;
      padding: 0.8rem;
      border: none;
      border-radius: var(--radius);
      margin-bottom: 1rem;
      background: rgba(255,255,255,0.15);
      color: var(--text);
      font-size: 1rem;
    }
    input::placeholder { color: rgba(255,255,255,0.6); }
    button, .btn {
      background: var(--accent);
      color: var(--text);
      border: none;
      border-radius: var(--radius);
      padding: 0.8rem 1.5rem;
      font-size: 1rem;
      cursor: pointer;
      transition: all 0.2s ease;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
    }
    button:hover, .btn:hover { opacity: 0.85; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
    #loading { margin-top: 1rem; display: none; color: #ccc; }
    #result { margin-top: 1.5rem; display: none; }
    #result img { max-width: 100%; border-radius: var(--radius); margin-top: 1rem; }
    .btn-group { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 1rem; }
    footer { margin-top: 2rem; padding-bottom: 1rem; font-size: 0.9rem; }
    #imageCounter { margin-top: 1rem; font-weight: bold; }