:root {
      --bg: #07131b;
      --surface: #0f1d28;
      --surface-elevated: #132431;
      --border: rgba(141, 183, 196, 0.14);
      --border-bright: rgba(117, 217, 226, 0.34);
      --text: #edf5f7;
      --text-muted: #7c9aa6;
      --text-dim: #b0c4cb;
      --accent: #57f0d5;
      --accent-dim: #1bb6c9;
      --danger-accent: #ff6a5b;
      --success: #62f0a7;
      --error: #ff7d68;
      --warning: #ffc65c;
      --gold: #d7b46d;
      --r: 4px;
      --r-lg: 8px;
      --r-xl: 12px;
    }
    
    /* Disable text selection on non-input elements */
    body, .card, .hero, .dw-member, .friendly-card, .stats-row, .hero-title, .hero-sub {
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    
    /* Allow selection in input fields for usability */
    input, select, textarea, #response, .friendly-value, .friendly-value code, .info-val code {
      -webkit-user-select: text;
      -moz-user-select: text;
      -ms-user-select: text;
      user-select: text;
    }
    
    html { 
      scroll-behavior: smooth; 
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
    }
    
    body {
      font-family: 'DM Sans', system-ui, sans-serif;
      background: var(--bg);
      color: var(--text);
      min-height: 100vh;
      line-height: 1.5;
      font-size: 14px;
      -webkit-font-smoothing: antialiased;
      position: relative;
      overscroll-behavior: none;
      background-image:
        radial-gradient(circle at 14% 16%, rgba(87,240,213,0.18), transparent 24%),
        radial-gradient(circle at 82% 12%, rgba(215,180,109,0.14), transparent 24%),
        radial-gradient(circle at 50% 100%, rgba(27,182,201,0.16), transparent 38%),
        linear-gradient(180deg, #061118 0%, #091822 32%, #07131b 100%);
      margin: 0;
    }
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(115deg, rgba(87,240,213,0.06), transparent 30%),
        linear-gradient(295deg, rgba(215,180,109,0.05), transparent 28%);
      opacity: 1;
      animation: auroraShift 16s ease-in-out infinite alternate;
      z-index: 0;
    }
    
    /* FIXED: Disable image dragging but keep pointer events for error handlers */
    img {
      -webkit-user-drag: none;
      -khtml-user-drag: none;
      -moz-user-drag: none;
      -o-user-drag: none;
      -user-drag: none;
      /* CRITICAL: Allow pointer events so onerror handlers work */
      pointer-events: auto;
    }
    
    /* Decorative images don't need pointer events */
    .dw-avatar, .friendly-avatar, .dw-vc-avatar img {
      pointer-events: none;
    }
    
    /* But keep them for interactive elements */
    .dw-join-btn img, button img, a img {
      pointer-events: none;
    }
    
    body::after {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIklEQVQYV2NkYGBoYmBg+M8ABYxgKgaKMTIwMEA5YFUkDwBmQAb6it1O7gAAAABJRU5ErkJggg==');
      opacity: 0.05;
      z-index: 9999;
    }

    @keyframes auroraShift {
      0% { transform: translate3d(-1%, 0, 0) scale(1); }
      50% { transform: translate3d(1.5%, -1%, 0) scale(1.03); }
      100% { transform: translate3d(0, 1%, 0) scale(1.01); }
    }
    
    ::-webkit-scrollbar { width: 5px; height: 5px; }
    ::-webkit-scrollbar-track { background: var(--surface); }
    ::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

    .hero {
      position: relative;
      min-height: 420px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background:
        radial-gradient(circle at 50% 0%, rgba(87,240,213,0.12), transparent 36%),
        radial-gradient(circle at 82% 22%, rgba(215,180,109,0.12), transparent 30%),
        linear-gradient(180deg, rgba(10,25,33,0.92), rgba(7,19,27,0.98));
      border-bottom: 1px solid rgba(255,255,255,0.05);
      box-shadow: inset 0 -60px 90px rgba(0,0,0,0.35);
      padding: 3.5rem 1.25rem 5.5rem;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(
        90deg,
        transparent 0px,
        transparent 34px,
        rgba(87,240,213,0.05) 35px,
        rgba(87,240,213,0.05) 36px
      );
      opacity: 0.6;
      animation: scan 14s linear infinite;
      pointer-events: none;
      z-index: 1;
    }

    @keyframes scan {
      from { transform: translateY(0); }
      to { transform: translateY(100%); }
    }

    @keyframes orbitFloat {
      0% { transform: translate3d(0, 0, 0) scale(1); }
      50% { transform: translate3d(10px, -8px, 0) scale(1.05); }
      100% { transform: translate3d(-8px, 10px, 0) scale(0.98); }
    }

    @keyframes titlePulse {
      0%, 100% { text-shadow: 0 0 12px rgba(87,240,213,0.42), 0 0 30px rgba(87,240,213,0.14); }
      50% { text-shadow: 0 0 16px rgba(87,240,213,0.55), 0 0 42px rgba(87,240,213,0.2); }
    }

    @keyframes titleGlitch {
      0%, 91%, 100% { transform: translate3d(0, 0, 0); filter: none; }
      92% { transform: translate3d(1px, -1px, 0); filter: hue-rotate(10deg); }
      94% { transform: translate3d(-2px, 1px, 0); filter: hue-rotate(-8deg); }
      96% { transform: translate3d(2px, 0, 0); filter: saturate(1.2); }
      98% { transform: translate3d(-1px, -1px, 0); filter: none; }
    }

    @keyframes statSweep {
      0% { transform: translateX(-120%); }
      100% { transform: translateX(140%); }
    }

    @keyframes ringSpin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    @keyframes tickerScroll {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }

    @keyframes cardReveal {
      from {
        opacity: 0;
        transform: translateY(18px) scale(0.985);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .hero::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.06), transparent 42%),
        linear-gradient(180deg, rgba(255,255,255,0.06), transparent 14%, transparent 86%, rgba(255,255,255,0.02));
      opacity: 0.9;
      pointer-events: none;
      z-index: 1;
    }

    .hero-overlay {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at center, transparent 18%, rgba(4,11,15,0.35) 64%, rgba(0,0,0,0.88) 100%),
        linear-gradient(180deg, rgba(0,0,0,0.12), transparent 20%, transparent 80%, rgba(0,0,0,0.45));
      z-index: 2;
      pointer-events: none;
    }
    .hero-overlay::before {
      content: "";
      position: absolute;
      width: 140vmax;
      height: 140vmax;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background: conic-gradient(from 0deg, rgba(87,240,213,0) 0deg, rgba(87,240,213,0.16) 18deg, rgba(87,240,213,0) 40deg);
      mix-blend-mode: screen;
      opacity: 0.55;
      animation: radarSweep 9s linear infinite;
    }

    @keyframes radarSweep {
      from { transform: translate(-50%, -50%) rotate(0deg); }
      to { transform: translate(-50%, -50%) rotate(360deg); }
    }

    .hero-content {
      position: relative;
      z-index: 3;
      text-align: center;
      padding: 2.4rem 1.8rem 1.4rem;
      width: min(980px, 100%);
      border: 1px solid rgba(255,255,255,0.05);
      border-radius: 28px;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)),
        radial-gradient(circle at top, rgba(87,240,213,0.06), transparent 55%);
      backdrop-filter: blur(12px);
      box-shadow: 0 24px 70px rgba(3, 10, 16, 0.35), inset 0 1px 0 rgba(255,255,255,0.06);
    }
    .hero-kicker {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      padding: 0.38rem 0.82rem;
      border-radius: 999px;
      border: 1px solid rgba(87,240,213,0.16);
      background: rgba(6,22,29,0.55);
      color: rgba(237,245,247,0.8);
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.64rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      margin-bottom: 1rem;
      box-shadow: 0 0 0 1px rgba(255,255,255,0.02) inset;
    }
    .hero-kicker::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 0 0 rgba(87,240,213,0.6);
      animation: pulse-g 2s infinite;
    }
    .hero-ring {
      position: absolute;
      right: clamp(0.8rem, 3vw, 2rem);
      top: 1rem;
      width: 128px;
      height: 128px;
      border-radius: 50%;
      border: 1px solid rgba(87,240,213,0.16);
      box-shadow: 0 0 28px rgba(87,240,213,0.12);
      pointer-events: none;
      opacity: 0.9;
    }
    .hero-ring::before,
    .hero-ring::after {
      content: "";
      position: absolute;
      inset: 14px;
      border-radius: 50%;
      border: 1px dashed rgba(255,255,255,0.14);
      animation: ringSpin 18s linear infinite;
    }
    .hero-ring::after {
      inset: 32px;
      border-style: solid;
      border-color: rgba(215,180,109,0.22);
      animation-direction: reverse;
      animation-duration: 10s;
    }
    .hero-ring-sweep {
      position: absolute;
      inset: 8px;
      border-radius: 50%;
      background: conic-gradient(from 0deg, rgba(87,240,213,0) 0deg, rgba(87,240,213,0.22) 26deg, rgba(87,240,213,0) 56deg);
      animation: ringSpin 6s linear infinite;
      opacity: 0.8;
    }
    .hero-ticker {
      margin: 1.5rem auto 0;
      width: min(760px, 100%);
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.7rem 0.95rem;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,0.06);
      background: linear-gradient(90deg, rgba(8,24,32,0.86), rgba(10,29,38,0.64));
      overflow: hidden;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    }
    .hero-ticker-label {
      flex-shrink: 0;
      font-family: 'Rajdhani', sans-serif;
      font-size: 0.66rem;
      font-weight: 800;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--gold);
      white-space: nowrap;
    }
    .hero-ticker-track {
      min-width: 0;
      overflow: hidden;
      position: relative;
      mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    }
    .hero-ticker-items {
      display: inline-flex;
      gap: 2.2rem;
      white-space: nowrap;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.68rem;
      color: rgba(237,245,247,0.7);
      animation: tickerScroll 20s linear infinite;
      padding-right: 2rem;
    }
    .hero-ticker-items span::before {
      content: "//";
      color: rgba(87,240,213,0.55);
      margin-right: 0.65rem;
    }

    .hero-content::before,
    .hero-content::after {
      content: "";
      position: absolute;
      border-radius: 999px;
      pointer-events: none;
    }

    .hero-content::before {
      width: 180px;
      height: 180px;
      right: -40px;
      top: -50px;
      border: 1px solid rgba(87,240,213,0.16);
      box-shadow: 0 0 40px rgba(87,240,213,0.12);
      animation: orbitFloat 13s ease-in-out infinite;
    }

    .hero-content::after {
      width: 120px;
      height: 120px;
      left: -20px;
      bottom: -35px;
      border: 1px solid rgba(215,180,109,0.18);
      box-shadow: 0 0 28px rgba(215,180,109,0.12);
      animation: orbitFloat 11s ease-in-out infinite reverse;
    }

    .hero-title {
      font-family: 'Rajdhani', sans-serif;
      font-size: clamp(3.25rem, 9vw, 5.9rem);
      font-weight: 800;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: #f6fdff;
      text-shadow:
        0 0 12px rgba(87,240,213,0.42),
        0 0 30px rgba(87,240,213,0.14);
      margin: 0;
      line-height: 0.9;
      animation: titlePulse 4.5s ease-in-out infinite, titleGlitch 8s steps(1) infinite;
    }

    .hero-title span {
      color: var(--gold);
      text-shadow:
        0 0 12px rgba(215,180,109,0.4),
        0 0 25px rgba(215,180,109,0.18);
    }

    .hero-sub {
      font-size: 0.86rem;
      letter-spacing: 0.28em;
      color: rgba(237,245,247,0.62);
      text-align: center;
      margin: 1rem 0 0;
      text-transform: uppercase;
    }

    @media (max-width: 780px) {
      .hero-ring {
        width: 92px;
        height: 92px;
        top: 0.8rem;
        right: 0.8rem;
      }
      .hero-ticker {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.45rem;
      }
      .hero-ticker-track {
        width: 100%;
      }
    }

    .hero-stats {
      display: flex;
      gap: 1rem;
      justify-content: center;
      margin-top: 2rem;
      flex-wrap: wrap;
    }

    .hero-stat {
      text-align: center;
      min-width: 200px;
      padding: 1rem 1.15rem;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)),
        rgba(9,23,31,0.72);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 22px;
      backdrop-filter: blur(14px);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 18px 38px rgba(0,0,0,0.22);
      position: relative;
      overflow: hidden;
    }

    .hero-stat::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.08) 50%, transparent 80%);
      transform: translateX(-120%);
      animation: statSweep 7s linear infinite;
    }

    .hero-stat-value {
      font-family: 'Rajdhani', sans-serif;
      font-size: 2rem;
      font-weight: 700;
      color: #ecfffb;
      line-height: 1;
    }

    .hero-stat-label {
      font-size: 0.62rem;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      color: rgba(237,245,247,0.42);
      margin-top: 0.3rem;
    }

    .app { display: flex; flex-direction: column; min-height: 100vh; }
    .app::before,
    .app::after {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
    }
    .app::before {
      background:
        linear-gradient(rgba(87,240,213,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(87,240,213,0.03) 1px, transparent 1px);
      background-size: 78px 78px;
      mask-image: radial-gradient(circle at center, rgba(0,0,0,0.9), transparent 92%);
      opacity: 0.35;
      animation: gridDrift 24s linear infinite;
    }
    .app::after {
      background:
        radial-gradient(circle at 18% 24%, rgba(87,240,213,0.11), transparent 18%),
        radial-gradient(circle at 78% 16%, rgba(215,180,109,0.09), transparent 16%),
        radial-gradient(circle at 60% 82%, rgba(88,101,242,0.08), transparent 18%);
      filter: blur(14px);
      opacity: 0.55;
      animation: nodePulse 18s ease-in-out infinite alternate;
    }

    @keyframes gridDrift {
      from { transform: translate3d(0, 0, 0); }
      to { transform: translate3d(26px, 18px, 0); }
    }

    @keyframes nodePulse {
      0% { transform: scale(1) translate3d(0, 0, 0); }
      50% { transform: scale(1.03) translate3d(1%, -1%, 0); }
      100% { transform: scale(1.01) translate3d(-1%, 1%, 0); }
    }

    .page-body {
      flex: 1;
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.55rem;
      padding: 2.6rem 1.6rem 1.8rem;
      max-width: 1480px;
      margin: 0 auto;
      width: 100%;
      position: relative;
      z-index: 1;
      align-items: start;
    }
    @media (min-width: 1060px) {
      .page-body {
        grid-template-columns: minmax(0, 1fr) 380px;
        margin-top: -1.5rem;
      }
    }
    @media (min-width: 1280px) {
      .page-body {
        padding-left: 2rem;
        padding-right: 2rem;
      }
    }
    .main-col { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
    .side-col { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; align-self: start; }

    .card {
      background:
        linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012)),
        linear-gradient(145deg, rgba(17,33,43,0.96), rgba(11,23,31,0.98));
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 26px;
      box-shadow:
        0 28px 80px rgba(3,10,16,0.45),
        0 0 0 1px rgba(255,255,255,0.02) inset,
        inset 0 1px 0 rgba(255,255,255,0.04);
      overflow: hidden;
      transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
      backdrop-filter: blur(14px);
      animation: cardReveal 0.75s ease both;
      position: relative;
    }
    .main-col > .card:nth-child(1) { animation-delay: 0.03s; }
    .main-col > .card:nth-child(2) { animation-delay: 0.08s; }
    .main-col > .card:nth-child(3) { animation-delay: 0.13s; }
    .main-col > .card:nth-child(4) { animation-delay: 0.18s; }
    .side-col > .card:nth-child(1) { animation-delay: 0.12s; }
    .card:hover {
      transform: translateY(-2px);
      border-color: rgba(87,240,213,0.18);
      box-shadow:
        0 32px 90px rgba(3,10,16,0.5),
        0 0 0 1px rgba(255,255,255,0.03) inset,
        inset 0 1px 0 rgba(255,255,255,0.05);
    }
    .card::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(115deg, transparent 15%, rgba(87,240,213,0.045) 48%, transparent 82%);
      opacity: 0;
      transition: opacity 0.25s ease;
    }
    .card:hover::after {
      opacity: 1;
    }
    .card::before {
      content: "";
      position: absolute;
      inset: 12px;
      pointer-events: none;
      border: 1px solid transparent;
      border-image: linear-gradient(135deg, rgba(87,240,213,0.22), transparent 25%, transparent 75%, rgba(215,180,109,0.18)) 1;
      opacity: 0.45;
    }
    .card-hd {
      display: flex; align-items: center; justify-content: space-between;
      padding: 1rem 1.3rem;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.018)),
        var(--surface-elevated);
      border-bottom: 1px solid rgba(255,255,255,0.05);
      gap: 0.75rem;
    }
    .card-title {
      font-family: 'Rajdhani', sans-serif;
      font-size: 0.74rem; font-weight: 700;
      color: var(--text-dim);
      text-transform: uppercase; letter-spacing: 0.16em;
      display: flex; align-items: center; gap: 0.5rem;
    }
    .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
    .dot-accent { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
    .dot-danger { background: var(--danger-accent); box-shadow: 0 0 6px var(--danger-accent); }
    .dot-dim { background: var(--text-muted); }
    .dot-discord { background: #5865f2; box-shadow: 0 0 6px #5865f2; }
    .card-meta-tag {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.625rem;
      color: var(--text-dim);
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      padding: 0.3rem 0.65rem;
      border-radius: 999px;
      cursor: pointer;
    }
    .card-bd { padding: 1.25rem; }

    .stats-row {
      display: flex; gap: 0;
      border-bottom: 1px solid rgba(255,255,255,0.05);
      background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent);
    }
    .stat {
      flex: 1; padding: 1rem 1.1rem;
      border-right: 1px solid rgba(255,255,255,0.05);
      display: flex; flex-direction: column; gap: 0.1rem;
    }
    .stat:last-child { border-right: none; }
    .stat-v {
      font-family: 'Rajdhani', sans-serif; font-size: 1.4rem; font-weight: 700;
      color: var(--text); line-height: 1;
    }
    .stat-l {
      font-size: 0.58rem; color: var(--text-muted);
      text-transform: uppercase; letter-spacing: 0.14em;
      font-family: 'Rajdhani', sans-serif; font-weight: 600;
    }

    .select-wrap { position: relative; margin-bottom: 0; }
    .select-wrap::after {
      content: '';
      position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%);
      width: 0; height: 0;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-top: 5px solid var(--text-muted);
      pointer-events: none;
      transition: border-color 0.15s;
    }
    .select-wrap:focus-within::after { border-top-color: var(--accent); }
    .select-wrap select {
      appearance: none; -webkit-appearance: none;
      padding-right: 2rem;
      cursor: pointer;
      font-family: 'DM Sans', sans-serif;
      font-size: 0.875rem;
      font-weight: 500;
    }
    .select-wrap select option {
      background: #0f1220;
      color: var(--text);
      padding: 0.35rem 0.5rem;
    }
    .select-wrap select optgroup {
      background: #080a12;
      color: var(--accent);
      font-family: 'Rajdhani', sans-serif;
      font-weight: 700;
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .api-info-panel {
      display: none;
      margin-top: 0.75rem;
      border: 1px solid var(--border-bright);
      border-radius: var(--r-lg);
      overflow: hidden;
      animation: slideDown 0.18s ease;
    }
    .api-info-panel.visible { display: block; }
    @keyframes slideDown {
      from { opacity: 0; transform: translateY(-6px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .eip-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 0.5rem 0.875rem;
      background: var(--surface-elevated);
      border-bottom: 1px solid var(--border);
      gap: 0.5rem;
    }
    .eip-name {
      font-family: 'Rajdhani', sans-serif;
      font-size: 0.875rem; font-weight: 700;
      color: var(--accent); letter-spacing: 0.03em;
      flex: 1; min-width: 0;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .eip-badge {
      font-family: 'Rajdhani', sans-serif;
      font-size: 0.5625rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.07em;
      padding: 0.1rem 0.45rem; border-radius: 3px;
      flex-shrink: 0;
    }
    .eip-body {
      background: var(--bg);
      padding: 0.75rem 0.875rem;
    }
    .info-grid {
      display: grid;
      grid-template-columns: 4.75rem 1fr;
      gap: 0.375rem 0.75rem;
    }
    .info-lbl {
      font-family: 'Rajdhani', sans-serif;
      font-size: 0.5625rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.08em;
      color: var(--text-muted); padding-top: 3px;
      align-self: start;
    }
    .info-val {
      font-size: 0.75rem; color: var(--text-dim);
      line-height: 1.5;
    }
    .info-val code {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.6875rem;
      background: var(--surface-elevated);
      border: 1px solid var(--border);
      padding: 0.075rem 0.35rem;
      border-radius: 3px;
      color: var(--accent);
    }

    .form-group { margin-bottom: 0.875rem; }
    .form-group:last-child { margin-bottom: 0; }
    label, .flabel {
      display: block;
      font-family: 'Rajdhani', sans-serif;
      font-size: 0.5625rem; font-weight: 700;
      color: var(--text-muted);
      text-transform: uppercase; letter-spacing: 0.12em;
      margin-bottom: 0.35rem;
    }
    input, select, textarea {
      width: 100%;
      padding: 0.86rem 0.95rem;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.8125rem;
      background: linear-gradient(180deg, rgba(7,19,27,0.98), rgba(11,26,35,1));
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 16px;
      color: var(--text);
      transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
      margin: 0;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
    }
    input:focus, select:focus, textarea:focus {
      outline: none;
      border-color: rgba(87,240,213,0.42);
      box-shadow: 0 0 0 4px rgba(87,240,213,0.09), 0 0 18px rgba(87,240,213,0.1);
      transform: translateY(-1px);
    }
    input::placeholder { color: var(--text-muted); }

    button { font-family: 'Rajdhani', sans-serif; font-weight: 700; border: none; cursor: pointer; transition: all 0.15s; border-radius: var(--r); }
    button:active { transform: scale(0.98); }
    .btn-run {
      width: 100%; padding: 1rem 1.6rem;
      background: linear-gradient(90deg, #d7b46d 0%, #70efd7 52%, #2db7c7 100%);
      color: #07212b;
      font-size: 0.9rem; letter-spacing: 0.14em; text-transform: uppercase;
      position: relative; overflow: hidden;
      box-shadow: 0 18px 34px rgba(10,45,50,0.28);
      border-radius: 18px;
      isolation: isolate;
    }
    .btn-run::before {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
      transform: translateX(-100%); transition: transform 0.4s;
    }
    .btn-run:hover { background: linear-gradient(90deg, #dfbf7a 0%, #7ef5de 52%, #38c1d0 100%); box-shadow: 0 22px 44px rgba(10,45,50,0.35); }
    .btn-run:hover::before { transform: translateX(100%); }
    .btn-run::after {
      content: "";
      position: absolute;
      inset: 2px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,0.24);
      opacity: 0.45;
      z-index: -1;
    }
    .btn-run.is-loading {
      opacity: 0.92;
      cursor: progress;
      box-shadow: 0 14px 26px rgba(10,45,50,0.22);
    }
    .preset-search-meta {
      margin-top: 0.45rem;
      font-size: 0.66rem;
      color: var(--text-muted);
      font-family: 'JetBrains Mono', monospace;
    }

    .preset-note {
      display: flex; align-items: flex-start; gap: 0.5rem;
      font-size: 0.75rem; line-height: 1.45;
      background: rgba(0,224,255,0.07);
      border: 1px solid rgba(0,224,255,0.18);
      border-radius: var(--r);
      padding: 0.5rem 0.75rem;
      color: var(--text-dim);
      margin-top: 0.625rem;
      word-break: break-word;
    }
    .lookup-actions {
      margin-top: 1rem;
      padding-top: 1rem;
      border-top: 1px solid var(--border);
      display: flex;
      gap: 0.65rem;
      align-items: center;
    }
    .lookup-actions .btn-run {
      flex: 1;
    }

    .tool-panels { margin-top: 0.75rem; }
    .tool-panel {
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 14px;
      background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
      overflow: hidden;
    }
    .tool-panel + .tool-panel { margin-top: 0.5rem; }
    .tool-panel-summary {
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      padding: 0.5rem 0.75rem;
      cursor: pointer;
      user-select: none;
      font-family: 'Rajdhani', sans-serif;
      font-size: 0.625rem;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--text-muted);
      background: rgba(255,255,255,0.03);
      border-bottom: 1px solid var(--border);
    }
    .tool-panel-summary::-webkit-details-marker { display: none; }
    .tool-panel[open] .tool-panel-summary { color: var(--text); }
    .tool-panel-meta {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.625rem;
      letter-spacing: 0.04em;
      color: var(--text-dim);
    }
    .tool-panel-body { padding: 0.75rem; }
    .tool-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.625rem; }
    .btn-mini {
      padding: 0.48rem 0.8rem;
      font-size: 0.6875rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      background: rgba(255,255,255,0.05);
      color: var(--text);
      border: 1px solid rgba(255,255,255,0.09);
      border-radius: 999px;
      box-shadow: none;
    }
    .btn-mini:hover { background: rgba(255,255,255,0.09); border-color: rgba(87,240,213,0.18); }
    .btn-mini.danger { border-color: rgba(255,51,85,0.35); color: #ff8aa0; }
    .saved-list { display: flex; flex-direction: column; gap: 0.5rem; }
    .saved-item {
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 18px;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.012)),
        rgba(5,15,21,0.28);
      padding: 0.8rem 0.9rem;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
    }
    .saved-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
    .saved-title {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.72rem;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .saved-badges { display: inline-flex; gap: 0.35rem; align-items: center; flex-shrink: 0; }
    .badge {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.62rem;
      padding: 0.1rem 0.45rem;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.12);
      color: var(--text-dim);
      background: rgba(255,255,255,0.04);
      white-space: nowrap;
    }
    .badge.ok { border-color: rgba(0,232,122,0.35); color: rgba(0,232,122,0.95); }
    .badge.err { border-color: rgba(255,51,85,0.35); color: rgba(255,51,85,0.95); }
    .saved-actions { display: flex; gap: 0.35rem; margin-top: 0.5rem; flex-wrap: wrap; }
    .saved-io { margin-top: 0.5rem; width: 100%; }

    .response-box { min-height: 180px; max-height: 55vh; overflow: auto; }
    #response {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.75rem; line-height: 1.6;
      white-space: pre-wrap; word-break: break-word;
      min-height: 180px; max-height: 50vh; overflow: auto;
      padding: 1.1rem;
      background:
        linear-gradient(180deg, rgba(8,22,30,0.98), rgba(7,17,24,1));
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,0.08);
      color: var(--text);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
      position: relative;
    }
    #response::before,
    .response-tree::before {
      content: "";
      display: block;
      height: 1px;
      margin: -1.1rem -1.1rem 1rem;
      background: linear-gradient(90deg, transparent, rgba(87,240,213,0.48), transparent);
      box-shadow: 0 0 18px rgba(87,240,213,0.25);
    }
    #response.response-placeholder { color: var(--text-muted); }
    .meta {
      font-size: 0.6875rem; color: var(--text-muted);
      display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
      font-family: 'JetBrains Mono', monospace;
    }
    .meta a { color: var(--accent); text-decoration: none; }
    .meta a:hover { text-decoration: underline; }
    .meta span { white-space: nowrap; }
    .status-ok { color: var(--success); }
    .status-err { color: var(--error); }
    .rate-limit { color: var(--warning); }
    .response-summary {
      font-size: 0.75rem; margin-bottom: 0.75rem;
      padding: 0.5rem 0.75rem; border-radius: var(--r);
      font-family: 'JetBrains Mono', monospace; line-height: 1.5;
    }
    .response-summary.error { background: rgba(255,51,85,0.08); border-left: 2px solid var(--error); }
    .response-summary.warn  { background: rgba(255,179,0,0.08);  border-left: 2px solid var(--warning); }
    .response-summary.success { background: rgba(0,232,122,0.08); border-left: 2px solid var(--success); }
    .response-view-toggle {
      font-size: 0.6875rem; color: var(--accent);
      cursor: pointer; margin-top: 0.5rem; display: inline-block;
      font-family: 'JetBrains Mono', monospace; text-decoration: none;
    }
    .response-view-toggle:hover { text-decoration: underline; }

    .response-friendly { font-size: 0.875rem; line-height: 1.5; }
    .friendly-card {
      background:
        linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015)),
        var(--surface-elevated);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 18px;
      padding: 1rem 1.15rem; margin-bottom: 0.85rem;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
      position: relative;
    }
    .friendly-card::after {
      content: "";
      position: absolute;
      right: 14px;
      top: 14px;
      width: 34px;
      height: 34px;
      border-top: 1px solid rgba(87,240,213,0.22);
      border-right: 1px solid rgba(87,240,213,0.22);
      opacity: 0.65;
    }
    .response-tree::before {
      content: "";
      display: block;
      height: 1px;
      margin: -1rem -1rem 1rem;
      background: linear-gradient(90deg, transparent, rgba(87,240,213,0.48), transparent);
      box-shadow: 0 0 18px rgba(87,240,213,0.25);
    }
    .friendly-card:first-child { margin-top: 0; }
    .friendly-card h3 {
      font-family: 'Rajdhani', sans-serif;
      font-size: 0.5625rem; font-weight: 700;
      color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.12em;
      margin-bottom: 0.625rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border);
    }
    .friendly-row { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.4rem; }
    .friendly-row:last-child { margin-bottom: 0; }
    .friendly-label {
      font-family: 'Rajdhani', sans-serif;
      font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
      color: var(--text-muted); min-width: 6rem; flex-shrink: 0;
    }
    .friendly-value { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: var(--text); word-break: break-word; }
    .friendly-value a { color: var(--accent); text-decoration: none; }
    .friendly-value a:hover { text-decoration: underline; }
    .friendly-value-muted { color: var(--text-muted); font-style: italic; }
    .friendly-avatar { display: block; width: 68px; height: 68px; border-radius: var(--r); object-fit: cover; margin-top: 0.375rem; border: 1px solid var(--border); }
    .friendly-groups { list-style: none; margin: 0.25rem 0 0; padding: 0; }
    .friendly-groups li { padding: 0.3rem 0.625rem; background: var(--bg); border-radius: var(--r); margin-bottom: 0.25rem; font-size: 0.75rem; border: 1px solid var(--border); }

    .discord-card { overflow: hidden; position: relative; }
    .discord-card::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(180deg, rgba(87,240,213,0.04), transparent 14%, transparent 86%, rgba(215,180,109,0.04));
      z-index: 0;
    }
    .discord-card .card-bd { padding: 0; }
    .dw-wrap { display: flex; flex-direction: column; height: 500px; overflow: hidden; }
    .dw-scroll { flex: 1; overflow-y: auto; min-height: 0; }
    .dw-scroll::-webkit-scrollbar { width: 4px; }
    .dw-scroll::-webkit-scrollbar-track { background: transparent; }
    .dw-scroll::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 2px; }
    .dw-hero {
      position: relative; padding: 1.25rem 1.125rem 1rem;
      background: linear-gradient(135deg, #1a1040 0%, #0d1025 50%, #0a1530 100%);
      border-bottom: 1px solid var(--border); overflow: hidden;
    }
    .dw-hero::after {
      content: "";
      position: absolute;
      inset: -40% auto auto 55%;
      width: 180px;
      height: 180px;
      border-radius: 50%;
      border: 1px solid rgba(87,240,213,0.18);
      box-shadow: 0 0 30px rgba(87,240,213,0.15);
      animation: orbitFloat 10s ease-in-out infinite;
      pointer-events: none;
    }
    .dw-hero::before {
      content: ''; position: absolute; inset: 0;
      background: radial-gradient(ellipse 120% 80% at 80% 50%, rgba(88,101,242,0.18) 0%, transparent 60%),
        radial-gradient(ellipse 60% 60% at 10% 80%, rgba(0,224,255,0.08) 0%, transparent 50%);
      pointer-events: none;
    }
    .dw-hero-scan {
      position: absolute; inset: 0; pointer-events: none;
      background: repeating-linear-gradient(0deg, transparent 0px, transparent 3px, rgba(88,101,242,0.03) 3px, rgba(88,101,242,0.03) 4px);
    }
    .dw-hero-banner {
      position: absolute; inset: 0; pointer-events: none;
      background-size: cover; background-position: center;
      opacity: 0.18; border-radius: 0;
    }
    .dw-server-row { display: flex; align-items: center; gap: 0.875rem; position: relative; z-index: 1; }
    .dw-server-icon {
      width: 48px; height: 48px; border-radius: 14px;
      background: linear-gradient(135deg, #5865f2 0%, #3b4bdb 100%);
      display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.375rem;
      box-shadow: 0 0 0 2px rgba(88,101,242,0.3), 0 4px 20px rgba(88,101,242,0.25);
    }
    .dw-server-name {
      font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 1rem; letter-spacing: 0.04em;
      color: #fff; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .dw-server-tag { font-size: 0.625rem; color: rgba(255,255,255,0.4); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.06em; margin-top: 2px; }
    .dw-stats-row { display: flex; gap: 0.5rem; margin-top: 0.875rem; position: relative; z-index: 1; }
    .dw-stat-chip {
      display: flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.625rem;
      background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 20px;
      font-size: 0.6875rem; font-weight: 600; font-family: 'JetBrains Mono', monospace; color: rgba(255,255,255,0.7);
      transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
    }
    .dw-stat-chip:hover { transform: translateY(-1px); border-color: rgba(87,240,213,0.24); background: rgba(255,255,255,0.09); }
    .dw-stat-chip .pdot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
    .dw-stat-chip .pdot.green { background: #00e87a; box-shadow: 0 0 0 0 rgba(0,232,122,0.6); animation: pulse-g 2s infinite; }
    .dw-stat-chip .pdot.grey { background: #4d5470; }
    @keyframes pulse-g { 0%{box-shadow:0 0 0 0 rgba(0,232,122,0.6)} 70%{box-shadow:0 0 0 5px rgba(0,232,122,0)} 100%{box-shadow:0 0 0 0 rgba(0,232,122,0)} }
    .dw-section-hd {
      display: flex; align-items: center; gap: 0.5rem;
      padding: 0.625rem 1.125rem 0.375rem;
      font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 0.5625rem;
      text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-muted);
    }
    .dw-section-hd::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--border) 0%, transparent 100%); }
    .dw-members { padding: 0 0.75rem 0.75rem; display: flex; flex-direction: column; gap: 0.3rem; flex: 1; }
    .dw-member {
      display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.625rem;
      border-radius: 8px; border: 1px solid transparent; cursor: default;
      transition: background 0.18s, border-color 0.18s, transform 0.15s;
      opacity: 0; animation: memberIn 0.35s ease forwards; position: relative; overflow: hidden;
    }
    .dw-member::before {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(90deg, rgba(88,101,242,0.06) 0%, transparent 60%);
      opacity: 0; transition: opacity 0.18s;
    }
    .dw-member:hover { background: rgba(255,255,255,0.04); border-color: rgba(88,101,242,0.25); transform: translateX(2px); }
    .dw-member:hover::before { opacity: 1; }
    @keyframes memberIn { from{opacity:0;transform:translateX(-8px)} to{opacity:1;transform:translateX(0)} }
    .dw-avatar-wrap { position: relative; flex-shrink: 0; }
    .dw-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; display: block; }
    .dw-avatar-fallback {
      width: 34px; height: 34px; border-radius: 50%;
      background: linear-gradient(135deg, #5865f2 0%, #3b4bdb 100%);
      display: flex; align-items: center; justify-content: center;
      font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 0.875rem; color: #fff; flex-shrink: 0;
    }
    .dw-status-ring { position: absolute; bottom: -1px; right: -1px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--surface); }
    .dw-member-name {
      font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 0.8125rem; color: var(--text);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2;
    }
    .dw-member-activity { font-size: 0.6rem; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
    .dw-member.staff-highlight {
      border-color: rgba(215,180,109,0.28);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 0 0 1px rgba(215,180,109,0.12);
    }
    .dw-member.staff-highlight::before {
      background: linear-gradient(90deg, rgba(215,180,109,0.12) 0%, transparent 70%);
      opacity: 1;
    }
    .dw-live-note {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.6rem;
      color: var(--text-dim);
      padding: 0.25rem 0.55rem;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.04);
    }
    .dw-live-note::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 0 0 rgba(87,240,213,0.55);
      animation: pulse-g 2s infinite;
    }
    .dw-change-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      padding: 0.55rem 0.65rem;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.06);
      background: rgba(255,255,255,0.025);
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.64rem;
      color: var(--text-dim);
      transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
    }
    .dw-change-item:hover {
      transform: translateX(3px);
      border-color: rgba(87,240,213,0.18);
      background: rgba(255,255,255,0.045);
    }
    .dw-change-item strong {
      color: var(--text);
      font-weight: 600;
    }
    .dw-change-item.join strong { color: var(--success); }
    .dw-change-item.leave strong { color: var(--danger-accent); }
    .dw-change-item.voice strong { color: var(--accent); }
    .dw-change-time {
      color: var(--text-muted);
      white-space: nowrap;
      flex-shrink: 0;
    }
    .dw-refresh-live {
      position: relative;
      padding-left: 0.9rem;
    }
    .dw-refresh-live::before {
      content: "";
      position: absolute;
      left: 0.4rem;
      top: 50%;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      transform: translateY(-50%);
      background: var(--accent);
      box-shadow: 0 0 0 0 rgba(87,240,213,0.55);
      animation: pulse-g 2s infinite;
    }
    .dw-refresh-live.is-updating {
      color: #ecfffb;
      border-color: rgba(87,240,213,0.2);
      background: rgba(87,240,213,0.08);
    }
    .dw-refresh-live.is-updating::before {
      animation: spinPulse 0.9s linear infinite;
      box-shadow: none;
    }
    .dw-refresh-live.just-updated {
      border-color: rgba(98,240,167,0.22);
      background: rgba(98,240,167,0.08);
    }
    @keyframes spinPulse {
      0% { transform: translateY(-50%) scale(0.8); opacity: 0.5; }
      50% { transform: translateY(-50%) scale(1.2); opacity: 1; }
      100% { transform: translateY(-50%) scale(0.8); opacity: 0.5; }
    }
    .dw-footer {
      padding: 0.75rem 1.125rem; border-top: 1px solid var(--border); background: var(--surface-elevated);
      display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    }
    .dw-footer-text { font-size: 0.6rem; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.04em; }
    .dw-join-btn {
      display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.875rem;
      background: #5865f2; border-radius: 6px; border: none;
      font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 0.75rem;
      letter-spacing: 0.06em; text-transform: uppercase; color: #fff; text-decoration: none; cursor: pointer;
      transition: background 0.15s, box-shadow 0.15s, transform 0.12s;
      box-shadow: 0 2px 12px rgba(88,101,242,0.3);
    }
    .dw-join-btn:hover { background: #4752c4; box-shadow: 0 4px 20px rgba(88,101,242,0.5); transform: translateY(-1px); }
    .dw-join-btn svg { width: 12px; height: 12px; fill: currentColor; }
    .dw-loading { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; padding: 2rem 1rem; }
    .dw-spinner { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border); border-top-color: #5865f2; animation: spin 0.8s linear infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }
    .dw-loading-txt { font-size: 0.6875rem; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }
    .dw-error { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; padding: 2rem 1rem; text-align: center; }
    .dw-error-icon { font-size: 2rem; }
    .dw-error-txt { font-size: 0.75rem; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; line-height: 1.5; }

    .dw-role {
      display: inline-flex; align-items: center; gap: 0.25rem;
      padding: 0.1rem 0.4rem; border-radius: 3px;
      font-family: 'Rajdhani', sans-serif; font-weight: 700;
      font-size: 0.5rem; text-transform: uppercase; letter-spacing: 0.07em;
      white-space: nowrap; margin-right: 0.2rem;
    }
    .dw-role-dot { width: 5px; height: 5px; border-radius: 50%; }

    .dw-vc {
      border: 1px solid var(--border); border-radius: 8px;
      background: var(--surface-elevated); overflow: hidden;
    }
    .dw-vc-header {
      display: flex; align-items: center; gap: 0.5rem;
      padding: 0.4rem 0.75rem;
      background: rgba(88,101,242,0.07);
      border-bottom: 1px solid var(--border);
    }
    .dw-vc-icon { font-size: 0.75rem; }
    .dw-vc-name { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 0.6875rem; letter-spacing: 0.06em; color: #8b9cf4; text-transform: uppercase; }
    .dw-vc-count { margin-left: auto; font-size: 0.5625rem; font-family: 'JetBrains Mono', monospace; color: var(--text-muted); }
    .dw-vc-members { padding: 0.375rem 0.5rem; display: flex; flex-direction: column; gap: 0.25rem; }
    .dw-vc-member {
      display: flex; align-items: center; gap: 0.5rem;
      padding: 0.3rem 0.375rem; border-radius: 5px;
      transition: background 0.15s;
    }
    .dw-vc-member:hover { background: rgba(255,255,255,0.04); }
    .dw-vc-avatar {
      width: 24px; height: 24px; border-radius: 50%; object-fit: cover;
      background: linear-gradient(135deg,#5865f2,#3b4bdb);
      display: flex; align-items: center; justify-content: center;
      font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 0.625rem; color: #fff;
      flex-shrink: 0;
    }
    .dw-vc-uname { font-family: 'DM Sans', sans-serif; font-size: 0.75rem; font-weight: 500; color: var(--text-dim); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .dw-vc-empty { padding: 0.5rem 0.75rem; font-size: 0.6rem; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }

    /* Discord widget refresh */
    .discord-card {
      background:
        radial-gradient(circle at top right, rgba(87,240,213,0.08), transparent 26%),
        radial-gradient(circle at bottom left, rgba(88,101,242,0.08), transparent 24%),
        linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01)),
        var(--surface);
      border: 1px solid rgba(255,255,255,0.07);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.025), 0 16px 44px rgba(0,0,0,0.24);
    }
    .discord-card .card-hd {
      background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
      border-bottom-color: rgba(255,255,255,0.05);
    }
    .dw-wrap {
      height: clamp(500px, 72vh, 660px);
      min-height: 0;
      background:
        linear-gradient(180deg, rgba(6,10,20,0.12), rgba(6,10,20,0.62)),
        radial-gradient(circle at top, rgba(88,101,242,0.08), transparent 28%);
    }
    .dw-scroll {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      gap: 0.8rem;
      min-height: 0;
      padding: 0.9rem 0.75rem 1rem;
      background: linear-gradient(180deg, rgba(5,8,18,0.2), rgba(5,8,18,0.55));
      overscroll-behavior: contain;
      scrollbar-gutter: stable;
    }
    .dw-hero {
      flex: 0 0 auto;
      padding: 1.35rem 1.1rem 1.05rem;
      background:
        linear-gradient(135deg, rgba(19,24,58,0.98) 0%, rgba(12,17,37,0.98) 52%, rgba(8,20,43,0.98) 100%);
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .dw-server-row {
      gap: 0.95rem;
      align-items: flex-start;
    }
    .dw-server-icon {
      width: 52px;
      height: 52px;
      border-radius: 16px;
      box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 10px 30px rgba(88,101,242,0.28);
    }
    .dw-server-name {
      font-size: 1.06rem;
      letter-spacing: 0.05em;
    }
    .dw-server-tag {
      margin-top: 0.25rem;
      color: rgba(255,255,255,0.54);
    }
    .dw-stats-row {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.6rem;
      margin-top: 1rem;
    }
    .dw-stat-chip {
      align-items: flex-start;
      gap: 0.6rem;
      padding: 0.7rem 0.75rem;
      border-radius: 14px;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.035)),
        rgba(8,12,28,0.58);
      border: 1px solid rgba(255,255,255,0.08);
      min-width: 0;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
    }
    .dw-stat-copy {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 0.12rem;
    }
    .dw-stat-value {
      font-family: 'Rajdhani', sans-serif;
      font-size: 1.08rem;
      line-height: 1;
      color: #fff;
      letter-spacing: 0.04em;
    }
    .dw-stat-label {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.62rem;
      color: rgba(255,255,255,0.62);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }
    .dw-stat-glyph {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      background: rgba(88,101,242,0.18);
      border: 1px solid rgba(88,101,242,0.28);
      color: #9ca8ff;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.58rem;
      font-weight: 700;
      letter-spacing: 0.04em;
    }
    .dw-hero-meta {
      position: relative;
      z-index: 1;
      margin-top: 0.85rem;
      display: flex;
      flex-wrap: wrap;
      gap: 0.45rem;
    }
    .dw-hero-pill {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.3rem 0.55rem;
      border-radius: 999px;
      border: 1px solid rgba(87,240,213,0.14);
      background: rgba(87,240,213,0.08);
      color: #cffff6;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.58rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .dw-hero-pill.is-muted {
      border-color: rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.05);
      color: rgba(255,255,255,0.72);
    }
    .dw-section {
      flex: 0 0 auto;
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 16px;
      overflow: hidden;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015)),
        rgba(10,14,26,0.7);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
    }
    .dw-section-hd {
      padding: 0.72rem 0.9rem 0.56rem;
      font-size: 0.58rem;
      color: rgba(232,238,255,0.72);
    }
    .dw-section-hd::after {
      order: 1;
      flex: 1;
      margin: 0 0.5rem;
      background: linear-gradient(90deg, rgba(255,255,255,0.08) 0%, transparent 100%);
    }
    .dw-section-count {
      order: 2;
      margin-left: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 24px;
      height: 20px;
      padding: 0 0.45rem;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.05);
      color: rgba(255,255,255,0.76);
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.58rem;
      letter-spacing: 0.04em;
    }
    .dw-members {
      padding: 0.2rem 0.45rem 0.45rem;
      gap: 0.5rem;
    }
    .dw-member {
      align-items: flex-start;
      gap: 0.75rem;
      padding: 0.72rem 0.8rem;
      border-radius: 14px;
      border-color: rgba(255,255,255,0.045);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.012)),
        rgba(9,13,24,0.72);
      transform-origin: left center;
    }
    .dw-member::before {
      background: linear-gradient(90deg, rgba(88,101,242,0.08) 0%, transparent 65%);
    }
    .dw-member:hover {
      background:
        linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.018)),
        rgba(12,18,32,0.84);
      border-color: rgba(88,101,242,0.24);
      transform: translateY(-1px);
    }
    .dw-avatar,
    .dw-avatar-fallback {
      width: 38px;
      height: 38px;
    }
    .dw-avatar-fallback {
      border-radius: 14px;
      font-size: 0.95rem;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
    }
    .dw-avatar {
      border-radius: 14px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.28);
    }
    .dw-status-ring {
      bottom: -2px;
      right: -2px;
      width: 12px;
      height: 12px;
      border: 2px solid rgba(10,14,26,0.96);
      box-shadow: 0 0 0 2px rgba(10,14,26,0.45);
    }
    .dw-member-body {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
    }
    .dw-member-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 0.6rem;
    }
    .dw-member-title {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 0.45rem;
      flex-wrap: wrap;
    }
    .dw-member-name {
      font-size: 0.86rem;
      letter-spacing: 0.01em;
      color: #f7f9ff;
    }
    .dw-member-presence {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.16rem 0.44rem;
      border-radius: 999px;
      border: 1px solid color-mix(in srgb, var(--dw-status) 35%, transparent);
      background: color-mix(in srgb, var(--dw-status) 16%, transparent);
      color: color-mix(in srgb, var(--dw-status) 72%, white 28%);
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.56rem;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .dw-member-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 0.28rem;
    }
    .dw-member-activity {
      display: flex;
      flex-wrap: wrap;
      gap: 0.38rem;
      align-items: center;
      margin-top: 0;
      font-size: 0.61rem;
      color: var(--text-muted);
    }
    .dw-activity-label {
      color: rgba(87,240,213,0.9);
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.58rem;
      text-transform: uppercase;
      letter-spacing: 0.07em;
    }
    .dw-activity-text {
      min-width: 0;
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .dw-member.staff-highlight {
      border-color: rgba(255,215,74,0.2);
      background:
        linear-gradient(180deg, rgba(255,215,74,0.055), rgba(255,255,255,0.014)),
        rgba(14,16,22,0.82);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 0 0 1px rgba(255,215,74,0.08);
    }
    .dw-member.staff-highlight::before {
      background: linear-gradient(90deg, rgba(255,215,74,0.11) 0%, transparent 72%);
      opacity: 1;
    }
    .dw-role {
      gap: 0.32rem;
      padding: 0.18rem 0.48rem;
      border-radius: 999px;
      font-size: 0.53rem;
      letter-spacing: 0.08em;
      margin-right: 0;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    }
    .dw-role-dot {
      width: 5px;
      height: 5px;
      box-shadow: 0 0 8px currentColor;
    }
    .dw-voice-list {
      padding: 0.2rem 0.45rem 0.45rem;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }
    .dw-vc {
      border-radius: 14px;
      border-color: rgba(255,255,255,0.055);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.022), rgba(255,255,255,0.012)),
        rgba(10,14,26,0.72);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
    }
    .dw-vc-header {
      padding: 0.55rem 0.75rem;
      background: linear-gradient(90deg, rgba(88,101,242,0.12), rgba(88,101,242,0.03));
      border-bottom-color: rgba(255,255,255,0.06);
    }
    .dw-vc-name {
      color: #b4beff;
      letter-spacing: 0.08em;
    }
    .dw-vc-members {
      padding: 0.4rem;
      gap: 0.35rem;
    }
    .dw-vc-member {
      align-items: flex-start;
      gap: 0.6rem;
      padding: 0.48rem 0.52rem;
      border-radius: 10px;
      background: rgba(255,255,255,0.02);
    }
    .dw-vc-main {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 0.28rem;
    }
    .dw-vc-top {
      display: flex;
      align-items: center;
      gap: 0.35rem;
      min-width: 0;
    }
    .dw-vc-uname {
      color: #eef2ff;
      font-size: 0.76rem;
    }
    .dw-vc-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 0.25rem;
      align-items: center;
    }
    .dw-vc-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.15rem 0.4rem;
      border-radius: 999px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.7);
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.54rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .dw-empty-state {
      padding: 0.85rem 0.9rem 1rem;
      font-size: 0.66rem;
      color: var(--text-muted);
      font-family: 'JetBrains Mono', monospace;
    }
    .dw-footer {
      flex: 0 0 auto;
      padding: 0.85rem 1.1rem;
      border-top-color: rgba(255,255,255,0.06);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)),
        rgba(8,12,22,0.82);
    }
    .dw-join-btn {
      border-radius: 999px;
      padding: 0.48rem 1rem;
      box-shadow: 0 8px 22px rgba(88,101,242,0.24);
    }
    @media (max-width: 780px) {
      .dw-wrap {
        height: min(620px, 76vh);
      }
      .dw-stats-row {
        grid-template-columns: 1fr;
      }
      .dw-footer {
        flex-direction: column;
        align-items: stretch;
      }
      .dw-join-btn {
        justify-content: center;
      }
    }

    /* ==================== ITEM 4: PER-FIELD COPY & JSON PATH ==================== */
    .friendly-row {
      position: relative;
    }
    .friendly-row:hover {
      background: rgba(0,224,255,0.03);
      border-radius: 4px;
      margin-left: -0.25rem;
      padding-left: 0.25rem;
    }
    .fr-actions {
      display: none;
      position: absolute;
      right: 0; top: 50%;
      transform: translateY(-50%);
      align-items: center;
      gap: 0.2rem;
    }
    .friendly-row:hover .fr-actions { display: flex; }
    .fr-btn {
      font-family: 'Rajdhani', sans-serif; font-weight: 700;
      font-size: 0.5rem; text-transform: uppercase; letter-spacing: 0.08em;
      padding: 0.1rem 0.3rem; border-radius: 3px;
      border: 1px solid rgba(0,224,255,0.25); background: rgba(0,224,255,0.06);
      color: var(--accent); cursor: pointer;
      transition: background 0.12s, border-color 0.12s;
      white-space: nowrap;
    }
    .fr-btn:hover { background: rgba(0,224,255,0.14); border-color: rgba(0,224,255,0.5); }
    .fr-btn.path { border-color: rgba(139,92,246,0.3); background: rgba(139,92,246,0.06); color: #a78bfa; }
    .fr-btn.path:hover { background: rgba(139,92,246,0.14); border-color: rgba(139,92,246,0.5); }
    .fr-btn.copied { border-color: rgba(0,232,122,0.4); background: rgba(0,232,122,0.1); color: #00e87a; }

    /* Raw JSON toolbar */
    .raw-json-toolbar {
      display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
      padding: 0.375rem 0.625rem;
      background: var(--surface-elevated);
      border: 1px solid var(--border);
      border-bottom: none;
      border-radius: var(--r) var(--r) 0 0;
      font-family: 'JetBrains Mono', monospace;
    }
    .raw-json-toolbar.hidden { display: none; }
    #response.has-toolbar { border-radius: 0 0 var(--r) var(--r); }
    .rjt-btn {
      font-family: 'Rajdhani', sans-serif; font-weight: 700;
      font-size: 0.55rem; text-transform: uppercase; letter-spacing: 0.1em;
      padding: 0.15rem 0.45rem; border-radius: 3px;
      border: 1px solid var(--border); background: transparent;
      color: var(--text-muted); cursor: pointer;
      transition: all 0.12s;
    }
    .rjt-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(0,224,255,0.06); }
    .rjt-label { font-size: 0.55rem; color: var(--text-muted); letter-spacing: 0.06em; margin-left: auto; }

    /* ==================== ITEM 5: PRIVACY REDACTION ==================== */
    .privacy-toggle {
      display: flex; align-items: center; gap: 0.35rem;
      font-family: 'Rajdhani', sans-serif; font-weight: 700;
      font-size: 0.55rem; text-transform: uppercase; letter-spacing: 0.1em;
      padding: 0.2rem 0.55rem; border-radius: var(--r);
      border: 1px solid var(--border); background: transparent;
      color: var(--text-muted); cursor: pointer;
      transition: all 0.15s;
    }
    .privacy-toggle:hover { border-color: var(--warning); color: var(--warning); }
    .privacy-toggle.active {
      border-color: rgba(255,179,0,0.5); background: rgba(255,179,0,0.08);
      color: var(--warning);
      box-shadow: 0 0 8px rgba(255,179,0,0.15);
    }
    .privacy-toggle .pt-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--text-muted); transition: background 0.15s;
    }
    .privacy-toggle.active .pt-dot { background: var(--warning); box-shadow: 0 0 5px var(--warning); }

    .priv-blur {
      filter: blur(4px);
      transition: filter 0.2s;
      border-radius: 2px;
    }
    .priv-blur:hover { filter: blur(0); }
    body.privacy-off .priv-blur { filter: none; }

    /* ==================== ITEM 6: SESSION STATS PANEL ==================== */
    .stats-panel {
      border: 1px solid var(--border);
      border-radius: var(--r);
      background: rgba(255,255,255,0.015);
      overflow: hidden;
      margin-top: 0.5rem;
    }
    .stats-panel-hd {
      display: flex; align-items: center; justify-content: space-between;
      padding: 0.4rem 0.75rem;
      background: rgba(255,255,255,0.025);
      border-bottom: 1px solid var(--border);
      cursor: pointer; user-select: none;
    }
    .stats-panel-title {
      font-family: 'Rajdhani', sans-serif; font-weight: 700;
      font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.12em;
      color: var(--text-muted);
      display: flex; align-items: center; gap: 0.4rem;
    }
    .stats-panel-toggle { font-size: 0.6rem; color: var(--text-muted); transition: transform 0.2s; }
    .stats-panel.open .stats-panel-toggle { transform: rotate(180deg); }
    .stats-panel-body {
      display: none; padding: 0.625rem 0.75rem;
    }
    .stats-panel.open .stats-panel-body { display: block; }
    .sp-grid {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 0.375rem; margin-bottom: 0.625rem;
    }
    .sp-cell {
      background: var(--bg); border: 1px solid var(--border);
      border-radius: var(--r); padding: 0.4rem 0.5rem; text-align: center;
    }
    .sp-val {
      font-family: 'Rajdhani', sans-serif; font-size: 1rem; font-weight: 700;
      color: var(--accent); line-height: 1;
    }
    .sp-val.ok-color { color: var(--success); }
    .sp-val.err-color { color: var(--error); }
    .sp-val.warn-color { color: var(--warning); }
    .sp-label {
      font-family: 'Rajdhani', sans-serif; font-size: 0.5rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted);
      margin-top: 0.15rem;
    }
    .sp-latency-bar {
      height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; margin: 0.25rem 0;
    }
    .sp-latency-fill {
      height: 100%; border-radius: 2px;
      background: linear-gradient(90deg, #00e87a, #ffb300, #ff3355);
      transition: width 0.4s ease;
    }
    .sp-preset-list {
      display: flex; flex-direction: column; gap: 0.25rem;
      max-height: 120px; overflow-y: auto;
    }
    .sp-preset-list::-webkit-scrollbar { width: 3px; }
    .sp-preset-list::-webkit-scrollbar-thumb { background: var(--border-bright); }
    .sp-preset-row {
      display: flex; align-items: center; gap: 0.5rem;
      font-family: 'JetBrains Mono', monospace; font-size: 0.6rem;
      padding: 0.2rem 0.375rem; border-radius: 3px;
      background: var(--bg); border: 1px solid var(--border);
    }
    .sp-preset-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-dim); }
    .sp-preset-count { color: var(--accent); font-weight: 600; flex-shrink: 0; }
    .sp-preset-avg { color: var(--text-muted); flex-shrink: 0; }
    .sp-reset-btn {
      font-family: 'Rajdhani', sans-serif; font-weight: 700;
      font-size: 0.5rem; text-transform: uppercase; letter-spacing: 0.08em;
      padding: 0.15rem 0.4rem; border-radius: 3px;
      border: 1px solid rgba(255,51,85,0.25); background: transparent;
      color: rgba(255,51,85,0.6); cursor: pointer; margin-top: 0.5rem;
      transition: all 0.12s; display: block; width: 100%; text-align: center;
    }
    .sp-reset-btn:hover { background: rgba(255,51,85,0.08); color: #ff8aa0; border-color: rgba(255,51,85,0.5); }
    .hidden { display: none !important; }
    .preset-query-wrap { margin-top: 0.75rem; }
    .divider { height: 1px; background: var(--border); margin: 0.875rem 0; }

    .modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding: 1rem;
      background: rgba(0,0,0,0.85);
      backdrop-filter: blur(8px);
      z-index: 1000;
      align-items: center;
      justify-content: center;
      animation: fadeIn 0.2s ease;
    }
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    @keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
    .modal-content {
      background: linear-gradient(145deg, #0b0e18, #0a0c14);
      border: 1px solid rgba(0,224,255,0.15);
      border-radius: var(--r-xl);
      max-width: 700px;
      width: 90%;
      max-height: 85vh;
      overflow: auto;
      box-shadow: 0 20px 40px rgba(0,0,0,0.6), 0 0 20px rgba(0,224,255,0.2);
      animation: slideUp 0.25s ease;
    }
    .modal-content.tos-modal {
      border-top: 2px solid var(--warning);
    }
    .modal-content.faq-modal {
      border-top: 2px solid var(--accent);
    }
    .modal-close-btn {
      margin-left: auto;
      width: 38px;
      height: 38px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.1);
      background: rgba(255,255,255,0.03);
      color: var(--text-dim);
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.8rem;
      cursor: pointer;
      transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;
    }
    .modal-close-btn:hover {
      border-color: rgba(255,255,255,0.2);
      background: rgba(255,255,255,0.07);
      color: var(--text);
      transform: translateY(-1px);
    }
    .modal-content.tos-modal {
      max-width: 920px;
      width: min(920px, 92vw);
      max-height: min(88vh, 960px);
      display: flex;
      flex-direction: column;
      border-top: 1px solid rgba(255,179,0,0.28);
      border-color: rgba(255,179,0,0.18);
      background:
        radial-gradient(circle at top right, rgba(255,179,0,0.08), transparent 28%),
        linear-gradient(180deg, rgba(13,18,29,0.98), rgba(7,10,17,0.99));
      box-shadow: 0 26px 70px rgba(0,0,0,0.55), 0 0 36px rgba(255,179,0,0.09);
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-y;
    }
    .tos-shell {
      position: relative;
      display: block;
      min-height: auto;
      max-height: none;
    }
    .tos-head {
      position: sticky;
      top: 0;
      z-index: 4;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1rem;
      padding: 1.3rem 1.35rem 1.05rem;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      background:
        linear-gradient(180deg, rgba(17,22,35,0.96), rgba(10,14,23,0.94)),
        rgba(10,14,23,0.92);
      backdrop-filter: blur(16px);
    }
    .tos-head-main {
      display: flex;
      gap: 0.95rem;
      align-items: flex-start;
      min-width: 0;
    }
    .tos-icon {
      width: 42px;
      height: 42px;
      border-radius: 14px;
      border: 1px solid rgba(255,179,0,0.28);
      background: linear-gradient(180deg, rgba(255,179,0,0.18), rgba(255,179,0,0.06));
      color: var(--warning);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: 'Rajdhani', sans-serif;
      font-size: 1.4rem;
      font-weight: 800;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
      flex-shrink: 0;
    }
    .tos-head-copy {
      min-width: 0;
    }
    .tos-kicker {
      margin-bottom: 0.28rem;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.64rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.48);
    }
    .tos-head-copy h2 {
      margin: 0;
      font-family: 'Rajdhani', sans-serif;
      font-size: 1.5rem;
      font-weight: 800;
      letter-spacing: 0.05em;
      color: #fff8e6;
    }
    .tos-head-copy p {
      margin: 0.28rem 0 0;
      max-width: 620px;
      font-size: 0.8rem;
      line-height: 1.6;
      color: var(--text-dim);
    }
    .tos-lock-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      align-self: flex-start;
      padding: 0.55rem 0.8rem;
      border-radius: 999px;
      border: 1px solid rgba(255,179,0,0.22);
      background: linear-gradient(180deg, rgba(255,179,0,0.14), rgba(255,179,0,0.05));
      color: #ffe8af;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.62rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      white-space: nowrap;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
    }
    .tos-body {
      padding: 1.15rem 1.35rem 1rem;
      display: flex;
      flex-direction: column;
      gap: 0.8rem;
      color: var(--text-dim);
      font-size: 0.84rem;
      line-height: 1.68;
    }
    .modal-content.tos-modal::-webkit-scrollbar {
      width: 8px;
    }
    .modal-content.tos-modal::-webkit-scrollbar-thumb {
      background: rgba(255,255,255,0.14);
      border-radius: 999px;
    }
    .modal-content.tos-modal::-webkit-scrollbar-track {
      background: transparent;
    }
    .tos-alert {
      border: 1px solid rgba(255,179,0,0.18);
      border-radius: 18px;
      padding: 0.95rem 1rem;
      background:
        linear-gradient(180deg, rgba(255,179,0,0.1), rgba(255,179,0,0.03)),
        rgba(18,18,12,0.6);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    }
    .tos-alert-label {
      margin-bottom: 0.35rem;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.63rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--warning);
    }
    .tos-alert p {
      margin: 0;
      color: #f5ead1;
    }
    .tos-summary-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.75rem;
    }
    .tos-summary-card {
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 18px;
      padding: 0.95rem 1rem;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012)),
        rgba(8,12,20,0.72);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
    }
    .tos-summary-card.is-danger {
      border-color: rgba(255,87,112,0.18);
      background:
        linear-gradient(180deg, rgba(255,87,112,0.08), rgba(255,255,255,0.012)),
        rgba(17,10,17,0.78);
    }
    .tos-summary-label {
      display: block;
      margin-bottom: 0.4rem;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.58rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.48);
    }
    .tos-summary-card strong {
      display: block;
      font-family: 'Rajdhani', sans-serif;
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: 0.03em;
      color: var(--text);
    }
    .tos-summary-card p {
      margin: 0.35rem 0 0;
      font-size: 0.74rem;
      color: var(--text-dim);
      line-height: 1.6;
    }
    .tos-section {
      display: grid;
      grid-template-columns: 68px minmax(0, 1fr);
      gap: 0.95rem;
      align-items: start;
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 22px;
      padding: 1rem 1.05rem;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)),
        rgba(8,12,20,0.82);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
    }
    .tos-section-num {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 52px;
      height: 52px;
      border-radius: 16px;
      border: 1px solid rgba(0,224,255,0.14);
      background: linear-gradient(180deg, rgba(0,224,255,0.12), rgba(0,224,255,0.03));
      color: var(--accent);
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.9rem;
      font-weight: 600;
      letter-spacing: 0.08em;
    }
    .tos-section-body h3 {
      margin: 0 0 0.35rem;
      font-family: 'Rajdhani', sans-serif;
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      color: var(--text);
    }
    .tos-section-body p {
      margin: 0 0 0.7rem;
      color: var(--text-dim);
    }
    .tos-list {
      margin: 0;
      padding-left: 1.15rem;
      color: var(--text-dim);
    }
    .tos-list li {
      margin-bottom: 0.45rem;
    }
    .tos-list.compact li:last-child,
    .tos-list li:last-child {
      margin-bottom: 0;
    }
    .tos-conduct-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.75rem;
      margin-top: 0.85rem;
    }
    .tos-conduct-card {
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,0.08);
      padding: 0.95rem 1rem;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)),
        rgba(8,12,20,0.74);
    }
    .tos-conduct-card.is-danger {
      border-color: rgba(255,51,85,0.22);
      background:
        linear-gradient(180deg, rgba(255,51,85,0.08), rgba(255,255,255,0.01)),
        rgba(18,10,14,0.76);
    }
    .tos-conduct-card.is-safe {
      border-color: rgba(0,232,122,0.2);
      background:
        linear-gradient(180deg, rgba(0,232,122,0.06), rgba(255,255,255,0.01)),
        rgba(8,18,15,0.76);
    }
    .tos-conduct-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 0.65rem;
      padding: 0.24rem 0.55rem;
      border-radius: 999px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.58rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      background: rgba(255,255,255,0.06);
      color: rgba(255,255,255,0.82);
    }
    .tos-footer {
      position: sticky;
      bottom: 0;
      z-index: 4;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      gap: 0.8rem;
      padding: 1rem 1.35rem 1.15rem;
      border-top: 1px solid rgba(255,255,255,0.08);
      background:
        linear-gradient(180deg, rgba(12,17,28,0.88), rgba(7,10,17,0.98)),
        rgba(8,11,18,0.95);
      backdrop-filter: blur(16px);
    }
    .tos-footer-copy {
      font-size: 0.77rem;
      color: var(--text-dim);
    }
    .tos-actions {
      display: flex;
      gap: 0.75rem;
      flex-wrap: wrap;
    }
    .tos-btn {
      min-width: 180px;
      padding: 0.72rem 1.15rem;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.1);
      font-family: 'Rajdhani', sans-serif;
      font-size: 0.88rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      cursor: pointer;
      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
    }
    .tos-btn:hover {
      transform: translateY(-1px);
    }
    .tos-btn-primary {
      border: none;
      background: linear-gradient(90deg, #00d9ff, #ff8f3f);
      color: #031017;
      box-shadow: 0 10px 30px rgba(0,217,255,0.22);
    }
    .tos-btn-primary:hover {
      box-shadow: 0 14px 34px rgba(0,217,255,0.28);
    }
    .tos-btn-secondary {
      background: rgba(255,255,255,0.03);
      color: var(--text-dim);
    }
    .tos-btn-secondary:hover {
      border-color: rgba(255,255,255,0.2);
      background: rgba(255,255,255,0.06);
      color: var(--text);
    }
    .tos-meta {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.62rem;
      letter-spacing: 0.06em;
      color: rgba(255,255,255,0.45);
    }
    .tos-legacy {
      display: none !important;
    }

    .faq-item {
      margin-bottom: 1.25rem;
      border-bottom: 1px solid var(--border);
      padding-bottom: 1rem;
    }
    .faq-item:last-child {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
    }
    .faq-question {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      font-family: 'Rajdhani', sans-serif;
      font-weight: 600;
      font-size: 1rem;
      color: var(--accent);
      cursor: pointer;
      padding: 0.25rem 0;
      transition: color 0.15s;
    }
    .faq-question:hover {
      color: var(--accent-dim);
    }
    .faq-question::before {
      content: '▸';
      font-size: 1.125rem;
      color: var(--accent);
      transition: transform 0.2s;
    }
    .faq-item.active .faq-question::before {
      transform: rotate(90deg);
    }
    .faq-answer {
      font-size: 0.875rem;
      color: var(--text-dim);
      margin-top: 0.75rem;
      margin-left: 2rem;
      line-height: 1.6;
    }
    .faq-answer ul {
      margin-top: 0.5rem;
      margin-left: 1.5rem;
    }
    .faq-answer li {
      margin-bottom: 0.25rem;
    }
    .faq-answer code {
      font-family: 'JetBrains Mono', monospace;
      background: var(--surface-elevated);
      border: 1px solid var(--border);
      padding: 0.1rem 0.3rem;
      border-radius: 3px;
      color: var(--accent);
    }

    .dash-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 1rem;
      margin-bottom: 1.1rem;
      align-items: stretch;
    }
    .dash-stat, .dash-panel {
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 20px;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012)),
        rgba(10,25,33,0.65);
      padding: 1rem;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
      position: relative;
      overflow: hidden;
    }
    .dash-stat::before, .dash-panel::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(87,240,213,0.42), transparent);
      opacity: 0.75;
    }
    .dash-stat-v {
      display: block;
      font-family: 'Rajdhani', sans-serif;
      font-size: 1.6rem;
      font-weight: 700;
      color: var(--text);
      line-height: 1.1;
    }
    .dash-stat-l, .dash-panel-title {
      display: block;
      font-family: 'Rajdhani', sans-serif;
      font-size: 0.62rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      color: var(--text-muted);
    }
    .dash-panels {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.75rem;
      align-items: start;
    }
    .dash-list {
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
      margin-top: 0.6rem;
      min-height: 72px;
    }
    .dash-item {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.67rem;
      border: 1px solid rgba(255,255,255,0.05);
      border-radius: 14px;
      background: linear-gradient(180deg, rgba(8,20,27,0.96), rgba(9,18,25,1));
      color: var(--text-dim);
      padding: 0.7rem 0.75rem;
      word-break: break-word;
      transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
    }
    .dash-item:hover {
      transform: translateX(3px);
      border-color: rgba(87,240,213,0.16);
      background: linear-gradient(180deg, rgba(10,24,32,0.98), rgba(9,18,25,1));
    }
    .dashboard-card .card-bd {
      padding: 0.95rem;
    }
    .dashboard-card .dash-grid {
      gap: 0.7rem;
      margin-bottom: 0.7rem;
    }
    .dashboard-card .dash-stat,
    .dashboard-card .dash-panel {
      padding: 0.8rem 0.9rem;
      border-radius: 18px;
    }
    .dashboard-card .dash-stat-v {
      font-size: 1.25rem;
      line-height: 1;
    }
    .dashboard-card .dash-stat-l,
    .dashboard-card .dash-panel-title {
      font-size: 0.56rem;
      letter-spacing: 0.14em;
    }
    .dashboard-card .dash-panels {
      gap: 0.6rem;
    }
    .dashboard-card .dash-list {
      margin-top: 0.45rem;
      gap: 0.32rem;
      min-height: 0;
    }
    .dashboard-card .dash-item {
      padding: 0.55rem 0.65rem;
      border-radius: 12px;
      font-size: 0.63rem;
      line-height: 1.35;
    }
    .validation-row, .saved-tools {
      display: flex;
      gap: 0.5rem;
      align-items: center;
      margin-top: 0.5rem;
      flex-wrap: wrap;
    }
    .validation-hint {
      flex: 1;
      min-width: 220px;
      font-size: 0.7rem;
      color: var(--text-dim);
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.03);
      border-radius: var(--r);
      padding: 0.45rem 0.6rem;
    }
    .validation-hint.ok {
      border-color: rgba(0,232,122,0.35);
      color: var(--success);
    }
    .validation-hint.err {
      border-color: rgba(255,51,85,0.35);
      color: #ff96aa;
    }
    .saved-tools input, .rjt-search {
      flex: 1;
      min-width: 180px;
    }
    .saved-compare-status {
      margin-bottom: 0.5rem;
      padding: 0.45rem 0.6rem;
      font-size: 0.7rem;
      color: var(--text-dim);
      background: rgba(255,255,255,0.03);
      border: 1px solid var(--border);
      border-radius: var(--r);
      font-family: 'JetBrains Mono', monospace;
    }
    .saved-storage-hint {
      margin-bottom: 0.5rem;
      font-size: 0.66rem;
      color: var(--text-muted);
      font-family: 'JetBrains Mono', monospace;
    }
    .saved-item.selected-compare {
      border-color: rgba(0,224,255,0.45);
      box-shadow: 0 0 0 1px rgba(0,224,255,0.25);
    }
    .saved-notes, .saved-tags {
      margin-top: 0.4rem;
      font-size: 0.66rem;
      color: var(--text-muted);
      font-family: 'JetBrains Mono', monospace;
      word-break: break-word;
    }
    .saved-tags span {
      display: inline-block;
      margin: 0 0.25rem 0.25rem 0;
      padding: 0.1rem 0.35rem;
      border-radius: 999px;
      border: 1px solid rgba(0,224,255,0.18);
      background: rgba(0,224,255,0.08);
      color: var(--accent);
    }
    .compact-select select {
      width: auto;
      min-width: 150px;
      padding-top: 0.45rem;
      padding-bottom: 0.45rem;
    }
    .indicator-panel {
      margin-bottom: 0.75rem;
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 16px;
      background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
      padding: 0.9rem;
    }
    .indicator-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.5rem;
    }
    .indicator-block {
      border: 1px solid var(--border);
      border-radius: var(--r);
      background: var(--bg);
      padding: 0.5rem;
    }
    .indicator-title {
      font-family: 'Rajdhani', sans-serif;
      font-size: 0.6rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--text-muted);
      margin-bottom: 0.35rem;
    }
    .indicator-value {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.66rem;
      color: var(--text);
      word-break: break-word;
    }
    .response-tree {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.72rem;
      line-height: 1.55;
      padding: 1rem;
      background: linear-gradient(180deg, rgba(8,22,30,0.98), rgba(7,17,24,1));
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,0.08);
    }
    .json-node { margin-left: 0.9rem; }
    .json-node details { margin-left: 0.25rem; }
    .json-line {
      display: flex;
      gap: 0.5rem;
      align-items: baseline;
      padding: 0.1rem 0;
      word-break: break-word;
    }
    .json-key { color: #7dd3fc; }
    .json-string { color: #a7f3d0; cursor: pointer; }
    .json-number { color: #f9a8d4; cursor: pointer; }
    .json-bool { color: #fdba74; cursor: pointer; }
    .json-null { color: var(--text-muted); }
    .json-copyable:hover { text-decoration: underline; }
    .json-match { background: rgba(255,179,0,0.18); border-radius: 3px; }
    .syntax-key { color: #7dd3fc; }
    .syntax-string { color: #a7f3d0; }
    .syntax-number { color: #f9a8d4; }
    .syntax-bool { color: #fdba74; }
    .syntax-null { color: var(--text-muted); }
    .diff-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.75rem;
    }
    .diff-pane {
      min-height: 240px;
      max-height: 50vh;
      overflow: auto;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 14px;
      background: linear-gradient(180deg, rgba(8,11,18,0.98), rgba(5,7,13,1));
      padding: 0.9rem;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.7rem;
      line-height: 1.55;
      white-space: pre-wrap;
      word-break: break-word;
    }
    .footer {
      margin-top: 2.4rem;
      padding: 2rem 1.5rem 2.2rem;
      border-top: 1px solid rgba(255,255,255,0.05);
      text-align: center;
      font-size: 0.75rem;
      color: var(--text-muted);
      background: linear-gradient(180deg, rgba(8,20,27,0.7), rgba(7,17,24,0.94));
      backdrop-filter: blur(14px);
      position: relative;
      z-index: 1;
    }
    .footer::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(90deg, transparent, rgba(87,240,213,0.06), transparent);
      opacity: 0.8;
    }
    @media (max-width: 780px) {
      .modal-content.tos-modal {
        width: 94vw;
        max-height: 88vh;
      }
      .tos-head,
      .tos-body,
      .tos-footer {
        padding-left: 1rem;
        padding-right: 1rem;
      }
      .tos-head {
        flex-direction: column;
        align-items: stretch;
      }
      .tos-lock-pill {
        align-self: flex-start;
      }
      .tos-head-main {
        width: 100%;
      }
      .modal-close-btn {
        align-self: flex-end;
      }
      .tos-summary-grid,
      .tos-conduct-grid {
        grid-template-columns: 1fr;
      }
      .tos-section {
        grid-template-columns: 1fr;
      }
      .tos-actions {
        flex-direction: column;
      }
      .tos-btn {
        width: 100%;
      }
      .hero {
        min-height: 360px;
        padding: 2.2rem 0.9rem 2.8rem;
      }
      .hero-stat {
        width: 100%;
        max-width: 100%;
        min-width: 0;
      }
      .page-body {
        padding: 1.25rem 1rem 1rem;
        margin-top: 0;
      }
      .card-hd {
        padding: 0.82rem 1rem;
      }
      .card-bd {
        padding: 1rem;
      }
      .saved-top,
      .friendly-row {
        flex-direction: column;
        align-items: flex-start;
      }
      .fr-actions {
        position: static;
        transform: none;
        display: flex;
        margin-top: 0.35rem;
      }
    }
    .safe-screenshot .dw-member-name,
    .safe-screenshot .saved-title,
    .safe-screenshot .friendly-value,
    .safe-screenshot #responseFriendly,
    .safe-screenshot #response,
    .safe-screenshot #responseTree {
      filter: blur(8px);
    }
    .safe-screenshot .indicator-panel,
    .safe-screenshot #diffCard {
      display: none !important;
    }
    .tamper-lockdown .app {
      filter: blur(10px) saturate(0.7);
      pointer-events: none;
      user-select: none;
    }
    .devtools-guard {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 20000;
      background:
        radial-gradient(circle at center, rgba(11,14,24,0.88), rgba(5,7,13,0.98)),
        linear-gradient(135deg, rgba(0,224,255,0.08), rgba(255,42,92,0.08));
      align-items: center;
      justify-content: center;
      padding: 1.5rem;
      backdrop-filter: blur(16px);
    }
    .tamper-lockdown .devtools-guard {
      display: flex;
    }
    .devtools-guard-card {
      width: min(560px, 100%);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 18px;
      background: linear-gradient(180deg, rgba(14,18,29,0.96), rgba(7,9,15,0.98));
      box-shadow: 0 28px 80px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.04);
      padding: 1.4rem 1.3rem;
      text-align: center;
    }
    .devtools-guard-title {
      font-family: 'Rajdhani', sans-serif;
      font-size: 1.4rem;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #fff;
      margin-bottom: 0.55rem;
    }
    .devtools-guard-copy {
      font-size: 0.86rem;
      color: var(--text-dim);
      margin-bottom: 1rem;
    }
    .devtools-guard-meta {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.68rem;
      color: var(--text-muted);
      margin-bottom: 1rem;
      word-break: break-word;
    }
    .devtools-guard-actions {
      display: flex;
      gap: 0.6rem;
      justify-content: center;
      flex-wrap: wrap;
    }
    @media (max-width: 900px) {
      .dash-grid, .dash-panels, .indicator-grid, .diff-grid {
        grid-template-columns: 1fr;
      }
      .page-body {
        gap: 1rem;
        margin-top: 0;
      }
    }

    .footer a {
      color: var(--accent);
      text-decoration: none;
      margin: 0 0.5rem;
    }
    .footer a:hover {
      text-decoration: underline;
    }
    .footer .brand-credit {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.625rem;
      margin-top: 0.5rem;
      color: var(--text-dim);
    }
    .footer-links {
      margin-top: 0.75rem;
    }