:root{
      --border-c:#FFFFFF;
      --border-soft:rgba(255,255,255,0.12);
      --shadow-solid: 4px 4px 0px #000000;
      --shadow-solid-sm: 2px 2px 0px #000000;
      --shadow-gold: 4px 4px 0px rgba(251,191,36,0.45);
      --shadow-gold-sm: 2px 2px 0px rgba(251,191,36,0.45);
      --radius-sm: 8px; --radius-md: 16px; --radius-lg: 24px; --radius-pill: 999px;
      --bg-card: #131313;
    }
    body { margin: 0; background-color: #0A0A0A; color: #F5F5F5; font-family: 'Poppins', sans-serif; overflow-x: hidden; }
    h1,h2,h3,h4,.font-heading{ font-weight: 800; }
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: #131313; }
    ::-webkit-scrollbar-thumb { background: #FBBF24; border-radius: 10px; }
    ::-webkit-scrollbar-thumb:hover { background: #F59E0B; }

    .text-gradient-gold {
      background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 50%, #FBBF24 100%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    }

    /* "glass" panels -> flat solid panels with thick border (no blur) */
    .glass {
      background: var(--bg-card);
      border: 2.5px solid var(--border-c);
      border-radius: var(--radius-md);
    }
    .glass-strong {
      background: #101010;
      border: 2.5px solid var(--border-c);
    }
    .glass-gold {
      background: rgba(251,191,36,0.06);
      border: 2.5px solid #FBBF24;
      border-radius: var(--radius-md);
    }

    /* background: flatten the perspective grid / glow blur into a subtle dotted grid */
    .perspective-grid {
      position: fixed; inset: 0; height: 100%;
      background-image: radial-gradient(rgba(251,191,36,0.18) 1.5px, transparent 1.5px);
      background-size: 30px 30px;
      transform: none;
      animation: none;
      pointer-events: none; z-index: 0;
      opacity: .35;
      mask-image: none;
    }
    @keyframes twinkle { 0%, 100% { opacity: 0.1; } 50% { opacity: 0.6; } }
    .star-t { animation: twinkle 6s ease-in-out infinite; will-change: opacity; }
    .ambient-glow { display: none; } /* no soft blur glows in flat brutalist theme */

    .loader-wrapper { position: fixed; inset: 0; background: #0A0A0A; z-index: 9999; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 32px; }
    .loader-hex-ring { position: relative; width: 140px; height: 140px; }
    .hex-border { position: absolute; inset: 0; border: 3px solid transparent; border-top-color: #FBBF24; border-right-color: rgba(251,191,36,0.3); border-radius: 50%; }
    .hex-border:nth-child(1) { animation: hex-spin 2s linear infinite; }
    .hex-border:nth-child(2) { inset: 12px; border-top-color: rgba(245,158,11,0.5); border-right-color: transparent; border-bottom-color: rgba(251,191,36,0.15); animation: hex-spin 1.5s linear infinite reverse; }
    .hex-border:nth-child(3) { inset: 24px; border-top-color: rgba(251,191,36,0.2); border-left-color: rgba(245,158,11,0.3); border-right-color: transparent; border-bottom-color: transparent; animation: hex-spin 3s linear infinite; }
    .loader-core { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 36px; height: 36px; border-radius: var(--radius-sm); background: #FBBF24; border: 2.5px solid #000; box-shadow: var(--shadow-solid); animation: pulse-neon 2s ease-in-out infinite; }
    .loader-bars { display: flex; gap: 4px; align-items: flex-end; height: 32px; }
    .loader-bar { width: 5px; border-radius: 2px; background: #FBBF24; border: 1.5px solid #000; animation: bar-rise 1.2s ease-out infinite; }
    .loader-terminal { font-family: 'Consolas', 'Monaco', monospace; background: var(--bg-card); border: 2.5px solid var(--border-c); border-radius: var(--radius-md); padding: 20px 24px; width: 360px; max-width: 90vw; position: relative; overflow: hidden; box-shadow: var(--shadow-solid); }
    .loader-terminal::after { content: ''; position: absolute; left: 0; right: 0; height: 2px; background: #FBBF24; opacity: 0.5; animation: scan-line 2s linear infinite; }
    .typing-line { display: flex; align-items: center; margin-bottom: 6px; }
    .typing-prefix { color: #FBBF24; margin-right: 8px; font-weight: 800; font-size: 11px; }
    .typing-text { color: #A1A1AA; font-size: 12px; }
    .typing-cursor { display: inline-block; width: 7px; height: 15px; background: #FBBF24; margin-left: 2px; animation: typing-cursor 1s infinite; border-radius: 1px; }

    /* 3d hover kept subtle (lift only, no blur glow) */
    .card-3d { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
    .card-3d:hover { transform: translateY(-4px); box-shadow: var(--shadow-gold); border-color: #FBBF24 !important; }
    .card-shine { display: none; }
    .glow-line { height: 3px; background: #FBBF24; opacity: 1; border-top: 2.5px solid #000; border-bottom: 2.5px solid #000; }

    .category-card { background: var(--bg-card); border: 2.5px solid var(--border-c); border-radius: var(--radius-lg); padding: 24px; transition: transform 0.18s ease, box-shadow 0.18s ease; cursor: pointer; position: relative; overflow: hidden; margin-bottom: 16px; box-shadow: var(--shadow-solid-sm); }
    .category-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: #FBBF24; opacity: 0; transition: opacity 0.18s ease; }
    .category-card:hover { border-color: #FBBF24; transform: translate(-2px,-2px); box-shadow: var(--shadow-gold); }
    .category-card:hover::before { opacity: 1; }

    .endpoint-item-card { background: var(--bg-card); border: 2.5px solid var(--border-c); border-radius: var(--radius-md); padding: 18px 20px; margin-bottom: 16px; transition: transform 0.18s ease, box-shadow 0.18s ease; cursor: pointer; position: relative; overflow: hidden; box-shadow: var(--shadow-solid-sm); }
    .endpoint-item-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: #FBBF24; opacity: 0; transition: opacity 0.18s ease; }
    .endpoint-item-card:hover { border-color: #FBBF24; transform: translate(-2px,-2px); box-shadow: var(--shadow-gold); }
    .endpoint-item-card:hover::before { opacity: 1; }
    .endpoint-item-card.is-offline { border-color: #EF4444; opacity: 0.7; }
    .endpoint-item-card.is-offline:hover { border-color: #EF4444; box-shadow: 4px 4px 0px rgba(239,68,68,0.5); }
    .endpoint-item-card.is-offline::before { background: #EF4444; }

    .method-badge { display: inline-block; padding: 4px 14px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; min-width: 58px; text-align: center; border: 2px solid #000; }
    .method-get { background: #FBBF24; color: #0A0A0A; }
    .method-post { background: #F59E0B; color: #0A0A0A; }

    .search-input { background: var(--bg-card); border: 2.5px solid var(--border-c); border-radius: var(--radius-md); padding: 16px 20px 16px 54px; color: white; width: 100%; transition: box-shadow .15s ease, background .15s ease; font-size: 15px; font-family: 'Poppins', sans-serif; font-weight: 600; }
    .search-input:focus { outline: none; border-color: #FBBF24; box-shadow: var(--shadow-gold); background: #1A1A1A; }
    .search-input::placeholder { color: #737373; font-weight: 500; }

    .copy-btn { background: #FBBF24; border: 2px solid #000; color: #0A0A0A; padding: 7px 16px; border-radius: var(--radius-sm); cursor: pointer; font-weight: 800; text-transform: uppercase; transition: transform .1s, box-shadow .1s; font-size: 11px; box-shadow: var(--shadow-solid-sm); font-family: 'Poppins', sans-serif; }
    .copy-btn:hover:not(:disabled) { transform: translate(-1px,-1px); box-shadow: 3px 3px 0px #000; }
    .copy-btn:active:not(:disabled) { transform: translate(1px,1px); box-shadow: 0px 0px 0px transparent; }
    .copy-btn:disabled { filter: grayscale(1); opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }

    .param-input, .param-select { background: var(--bg-card); border: 2.5px solid var(--border-c); border-radius: var(--radius-sm); padding: 13px 18px; color: white; width: 100%; transition: box-shadow .15s ease, background .15s ease; box-sizing: border-box; font-family: 'Poppins', sans-serif; font-weight: 600; }
    .param-input:focus, .param-select:focus { outline: none; border-color: #FBBF24; box-shadow: var(--shadow-gold-sm); background: #1A1A1A; }
    .param-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23FBBF24' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; cursor: pointer; }
    .param-select option { background: #131313; color: #F5F5F5; }

    .code-block { background: #050505; border: 2.5px solid var(--border-c); border-radius: var(--radius-sm); padding: 16px; font-family: 'Consolas', 'Monaco', monospace; font-size: 13px; color: #D4D4D4; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word; }
    .json-key { color: #FBBF24; }
    .json-string { color: #34D399; }
    .json-number { color: #F59E0B; }
    .json-boolean { color: #FBBF24; }
    .json-null { color: #737373; }

    .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; }
    .modal-content { background: var(--bg-card); border: 2.5px solid var(--border-c); border-radius: var(--radius-lg); max-width: 800px; width: 100%; max-height: 90vh; overflow-y: auto; animation: modalSlideIn 0.25s ease-out; box-shadow: 8px 8px 0px #000; }
    @keyframes modalSlideIn { from { opacity: 0; transform: translateY(20px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }

    .response-panel { position: relative; overflow: hidden; border-radius: var(--radius-sm); background: #050505; border: 2.5px solid var(--border-c); box-shadow: var(--shadow-solid-sm); }
    .response-panel::before { display: none; }
    .response-panel .scan-bar { position: absolute; left: 0; right: 0; height: 2px; background: #FBBF24; opacity: .6; animation: scan-line 2.5s linear infinite; }

    .api-loading-dots { display: flex; gap: 6px; align-items: center; justify-content: center; padding: 32px 0; }
    .api-loading-dots span { width: 9px; height: 9px; border-radius: 50%; background: #FBBF24; border: 1.5px solid #000; animation: dot-bounce 1.4s ease-in-out infinite; }
    .api-loading-dots span:nth-child(2) { animation-delay: 0.16s; }
    .api-loading-dots span:nth-child(3) { animation-delay: 0.32s; }
    @keyframes dot-bounce { 0%, 80%, 100% { transform: scale(0.4); opacity: 0.3; } 40% { transform: scale(1); opacity: 1; } }

    .video-container { position: relative; width: 100%; border-radius: var(--radius-sm); overflow: hidden; background: #000; border: 2.5px solid var(--border-c); box-shadow: var(--shadow-solid); }
    .video-container video { width: 100%; max-height: 450px; display: block; object-fit: contain; background: #000; }
    .video-controls { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,0.9), transparent); padding: 30px 12px 10px; display: flex; align-items: center; gap: 8px; opacity: 0; transition: opacity 0.3s ease; }
    .video-container:hover .video-controls { opacity: 1; }
    .video-btn { background: #FBBF24; border: 2px solid #000; color: #000; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; transition: transform .15s; }
    .video-btn:hover { transform: scale(1.1); }
    .video-progress { flex: 1; height: 6px; border-radius: var(--radius-pill); background: rgba(255,255,255,0.2); border: 1.5px solid #000; cursor: pointer; position: relative; }
    .video-progress-fill { height: 100%; border-radius: var(--radius-pill); background: #FBBF24; width: 0%; transition: width 0.1s linear; }
    .video-time { color: white; font-size: 11px; font-family: 'Consolas', 'Monaco', monospace; min-width: 40px; }
    .video-fullscreen { background: transparent; border: none; color: white; cursor: pointer; font-size: 14px; padding: 4px; }

    .count-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 800; text-transform: uppercase; background: rgba(251,191,36,0.1); border: 2px solid #FBBF24; color: #FBBF24; }
    .back-btn { display: inline-flex; align-items: center; gap: 8px; color: #A1A1AA; font-size: 14px; font-weight: 700; cursor: pointer; transition: color .15s, transform .15s; padding: 8px 0; background: none; border: none; font-family: 'Poppins', sans-serif; }
    .back-btn:hover { color: #FBBF24; transform: translateX(-4px); }
    .blocked-overlay { position: relative; }
    .blocked-overlay::after { content: ''; position: absolute; inset: 0; background: rgba(5, 5, 5, 0.8); border-radius: var(--radius-sm); z-index: 2; }

    .btn-neon-test { background: #FBBF24; box-shadow: var(--shadow-solid); border: 2.5px solid #000; transition: transform .1s, box-shadow .1s; color: #0A0A0A; font-weight: 800; font-family: 'Poppins', sans-serif; }
    .btn-neon-test:hover:not(:disabled) { transform: translate(-2px,-2px); box-shadow: 6px 6px 0px #000; }
    .btn-neon-test:active:not(:disabled) { transform: translate(2px,2px); box-shadow: 0px 0px 0px transparent; }
    .btn-neon-test:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; transform:none; }

    /* "premium-3d-card" -> flat bordered card with hard offset shadow, used everywhere */
    .premium-3d-card {
      background: var(--bg-card);
      border: 2.5px solid var(--border-c);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-solid);
      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    }
    .premium-3d-card:hover {
      border-color: #FBBF24;
      box-shadow: var(--shadow-gold);
      transform: translate(-3px,-3px);
    }

    .hidden { display: none !important; }
    a { text-decoration: none; }

    @media (max-width: 768px) {
      .perspective-grid { background-size: 22px 22px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .star-t, .hex-border, .perspective-grid, .loader-bar, .scan-bar, .api-loading-dots span { animation: none !important; }
    }