/* Creator Credit Box */
        .creator-credit {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: rgba(1, 3, 5, 0);
            border: 2px solid #2ac9fe;
            border-radius: 12px;
            padding: 8px 16px;
            color: #ffffff;
            font-family: 'Arial', sans-serif;
            font-size: 12px;
            font-weight: 600;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.428);
            box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3),
                        inset 0 1px 0 rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            z-index: 9999;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .creator-credit:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4),
                        inset 0 1px 0 rgba(255, 255, 255, 0.2);
            border-color: #ef4444;
        }

        .creator-credit::before {
            content: '';
            position: absolute;
            bottom: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: linear-gradient(45deg, #dc2626, #ef4444, #f87171, #dc2626);
            border-radius: 14px;
            z-index: -1;
            animation: borderGlow 3s ease-in-out infinite;
        }

        @keyframes borderGlow {
            0%, 100% { opacity: 0.6; }
            50% { opacity: 1; }
        }

        /* Responsive adjustments */
        @media (max-width: 640px) {
            .creator-credit {
                bottom: 10px;
                right: 10px;
                font-size: 11px;
                padding: 6px 12px;
            }
        }

    
    :root {
      --bg: #070708;
      --panel: #0f1116e6;
      --accent: #7c5cff;
      --accent-2: #00f0ff;
      --text: #e8eaf0;
      --muted: #9aa0a6;
      --good: #1fd66e;
      --warn: #ffb020;
      --err: #ff5c7c;
      --shadow: rgba(124, 92, 255, 0.16);
      --shadow-2: rgba(0, 240, 255, 0.08);
    }
    /* Soft Glow theme for soothing effect */
    [data-theme="soft-glow"] {
      --bg: #1c2526; /* Muted dark gray-blue for calm background */
      --panel: #2a2f33e6; /* Softer panel with slight transparency */
      --accent: #a78bfa; /* Pastel purple for glow */
      --accent-2: #4dd0e1; /* Soft cyan for secondary glow */
      --text: #e2e8f0; /* Light gray for readability */
      --muted: #b0b8c1; /* Softer muted text */
      --shadow: rgba(167, 139, 250, 0.1); /* Subtle purple shadow */
      --shadow-2: rgba(77, 208, 225, 0.1); /* Subtle cyan shadow */
    }
    * { box-sizing: border-box; }
    html, body { height: 100%; margin: 0; }
    body {
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
      color: var(--text);
     
background: url(/gif/bg.gif)repeat center/cover;
      min-height: 100%;
      display: grid;
      place-items: center;
      padding: clamp(12px, 3vw, 24px);
    }
    [data-theme="soft-glow"] body {
      background: linear-gradient(180deg, #2a2f33, #1c2526 60%, #1e2728);
    }
    .app {
      width: min(900px, 100%);
      padding: 0 clamp(8px, 2vw, 16px);
    }
    .card {
      background: var(--panel);
      border: 1px solid #1b1d26;
      border-radius: clamp(16px, 2vw, 24px);
      padding: clamp(16px, 2.5vw, 28px);
      box-shadow: 0 0 0 1px var(--shadow) inset,
                  0 20px 60px var(--shadow),
                  0 10px 20px var(--shadow-2);
      backdrop-filter: blur(6px); /* Reduced for softer effect */
    }
    [data-theme="soft-glow"] .card {
      border-color: #3b444b;
      box-shadow: 0 0 0 1px var(--shadow) inset,
                  0 10px 30px var(--shadow),
                  0 5px 15px var(--shadow-2);
    }
    .title {
      display: flex;
      align-items: center;
      gap: clamp(8px, 1.5vw, 12px);
      margin: 0 0 10px;
      letter-spacing: 0.5px;
      font-weight: 700;
      font-size: clamp(16px, 2.5vw, 20px);
      text-transform: uppercase;
      color: #cfd3ff;
    }
    [data-theme="soft-glow"] .title {
      color: #d1d5db;
    }
    .spark {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: conic-gradient(from 0deg, var(--accent), var(--accent-2), var(--accent));
      filter: drop-shadow(0 0 8px var(--accent)) drop-shadow(0 0 16px var(--accent-2));
      animation: spin 4s linear infinite; /* Slower for calmer effect */
    }
    @keyframes spin { to { transform: rotate(1turn); } }

    blockquote {
      margin: 0;
      font-size: clamp(16px, 2.2vw, 24px);
      line-height: 1.5;
      font-weight: 600;
      position: relative;
      padding: clamp(12px, 2vw, 18px) 0 0 0;
      text-wrap: balance;
    }
    blockquote::before {
      content: "“";
      position: absolute;
      left: -8px;
      top: -4px;
      font-size: clamp(40px, 5vw, 62px);
      line-height: 0;
      opacity: 0.3;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      -webkit-background-clip: text;
      color: transparent;
      filter: drop-shadow(0 0 10px var(--shadow));
    }
    .author {
      margin-top: clamp(8px, 1.5vw, 14px);
      color: var(--muted);
      font-weight: 600;
      letter-spacing: 0.3px;
      font-size: clamp(12px, 1.8vw, 16px);
    }

    .toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: clamp(8px, 1vw, 10px);
      margin-top: clamp(12px, 2vw, 18px);
    }
    button {
      appearance: none;
      border: none;
      cursor: pointer;
      border-radius: 14px;
      padding: clamp(10px, 1.5vw, 12px) clamp(12px, 1.8vw, 14px);
      font-weight: 700;
      font-size: clamp(12px, 1.6vw, 14px);
      color: #0b0d12;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      box-shadow: 0 10px 20px var(--shadow), 0 10px 20px var(--shadow-2);
      transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
      min-height: 44px;
      touch-action: manipulation;
    }
    button:active {
      transform: translateY(1px) scale(0.995);
    }
    button.ghost {
      background: #111319;
      color: var(--text);
      border: 1px solid #222533;
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    }
    [data-theme="soft-glow"] button.ghost {
      background: #2a2f33;
      border-color: #3b444b;
    }
    .pill {
      border-radius: 999px;
      padding: clamp(8px, 1.2vw, 10px) clamp(12px, 1.8vw, 14px);
    }

    .row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: clamp(8px, 1vw, 10px);
      margin-top: clamp(8px, 1.5vw, 12px);
    }
    .meta {
      display: flex;
      align-items: center;
      gap: clamp(6px, 1vw, 10px);
      color: var(--muted);
      font-size: clamp(11px, 1.5vw, 13px);
    }
    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--muted);
    }
    .ok { background: var(--good); }
    .warn { background: var(--warn); }
    .err { background: var(--err); }

    .footer {
      margin-top: clamp(12px, 2vw, 20px);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: clamp(8px, 1.5vw, 12px);
      flex-wrap: wrap;
      color: var(--muted);
      font-size: clamp(10px, 1.4vw, 12px);
    }
    .switch {
      --h: 22px;
      --w: 46px;
      --r: 999px;
      display: inline-grid;
      grid-template-columns: var(--w) auto;
      align-items: center;
      gap: clamp(6px, 1vw, 10px);
      user-select: none;
    }
    .switch input {
      appearance: none;
      width: var(--w);
      height: var(--h);
      background: #1a1d27;
      border-radius: var(--r);
      position: relative;
      outline: none;
      border: 1px solid #23273a;
    }
    [data-theme="soft-glow"] .switch input {
      background: #3b444b;
      border-color: #4b5563;
    }
    .switch input::after {
      content: "";
      position: absolute;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      left: 2px;
      top: 1px;
      transition: left 0.2s ease;
    }
    .switch input:checked::after {
      left: calc(var(--w) - 20px);
    }

    .kbd {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      font-weight: 700;
      background: #131620;
      border: 1px solid #24283b;
      border-bottom-width: 3px;
      border-radius: 8px;
      padding: 2px 6px;
    }
    [data-theme="soft-glow"] .kbd {
      background: #2a2f33;
      border-color: #3b444b;
    }

    .hidden { display: none; }

    .category-box {
      margin: clamp(12px, 2vw, 16px) 0;
      display: flex;
      align-items: center;
      gap: clamp(8px, 1vw, 10px);
    }
    select {
      background: #111319;
      color: var(--text);
      border: 1px solid #222533;
      border-radius: 12px;
      padding: clamp(8px, 1.2vw, 10px) clamp(12px, 1.8vw, 14px);
      font-weight: 600;
      cursor: pointer;
      font-size: clamp(12px, 1.6vw, 14px);
      min-height: 44px;
    }
    [data-theme="soft-glow"] select {
      background: #2a2f33;
      border-color: #3b444b;
    }

    .fav-box {
      margin-top: clamp(12px, 2vw, 16px);
    }
    .fav-list {
      display: flex;
      flex-wrap: wrap;
      gap: clamp(6px, 1vw, 8px);
      margin-top: 8px;
    }
    .fav-item {
      background: #1a1d27;
      padding: clamp(4px, 1vw, 6px) clamp(8px, 1.2vw, 10px);
      border-radius: 10px;
      font-size: clamp(11px, 1.5vw, 13px);
      cursor: pointer;
    }
    [data-theme="soft-glow"] .fav-item {
      background: #2a2f33;
    }

    /* Mobile-specific optimizations */
    @media (max-width: 600px) {
      body { padding: 12px; }
      .app { width: 100%; }
      .card { padding: 16px; border-radius: 16px; }
      .title { font-size: 16px; gap: 8px; }
      .spark { width: 8px; height: 8px; filter: drop-shadow(0 0 6px var(--accent)); }
      blockquote { font-size: 18px; padding: 12px 0 0 0; }
      blockquote::before { font-size: 40px; left: -6px; top: -2px; }
      .author { font-size: 14px; margin-top: 8px; }
      .toolbar { gap: 8px; margin-top: 12px; }
      button, select { min-height: 48px; font-size: 13px; padding: 10px 12px; }
      .footer { font-size: 11px; gap: 8px; }
      .meta { font-size: 12px; gap: 6px; }
      .dot { width: 6px; height: 6px; }
    }