body {
            background-color: #050505;
            color: #ffffff !important;
            font-family: 'Inter', sans-serif;
            overflow-x: hidden;
        }
	p {
	    color: #fff !imporant;
}
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Space Grotesk', sans-serif;
            color: #ffffff;
        }

        /* FIX: Ensure all text inside cards is white by default */
        .premium-card, .premium-card * {
            color: inherit;
        }
        .premium-card {
            color: #ffffff;
        }

        .glass-panel {
            background: rgba(15, 15, 15, 0.65);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
        }

        .premium-card {
            background: linear-gradient(180deg, #111111 0%, #0a0a0a 100%);
            border: 1px solid #222;
            transition: all 0.3s ease;
        }
        
        .premium-card:hover {
            border-color: rgba(255, 255, 255, 0.2);
        }

        .main-wrapper {
            position: relative;
            background-color: #050505;
            width: 100%;
            padding-bottom: 8rem;
        }

        .bg-grid-layout {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: 160px 160px;
            background-image: 
                linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
            z-index: 1;
            pointer-events: none;
            -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%);
            mask-image: linear-gradient(to bottom, transparent 0%, black 15%);
        }

        .reveal {
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* Improved pulsing dot */
        @keyframes ping-dot {
            0% { transform: scale(1); opacity: 0.8; }
            70% { transform: scale(2.2); opacity: 0; }
            100% { transform: scale(2.2); opacity: 0; }
        }
        .ping-dot {
            animation: ping-dot 1.4s cubic-bezier(0, 0, 0.2, 1) infinite;
        }

        /* Badge glow pulse */
        @keyframes badge-glow {
            0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.0), 0 2px 20px rgba(0,0,0,0.6); }
            50% { box-shadow: 0 0 0 4px rgba(34,197,94,0.08), 0 2px 20px rgba(0,0,0,0.6); }
        }
        .badge-glow {
            animation: badge-glow 2s ease-in-out infinite;
        }

        /* Number flip animation */
        @keyframes num-tick {
            0% { transform: translateY(-4px); opacity: 0.4; }
            100% { transform: translateY(0); opacity: 1; }
        }
        .counter-tick {
            animation: num-tick 0.15s ease-out;
        }

        .glitch-text {
            position: relative;
        }
        .glitch-text::before,
        .glitch-text::after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0.8;
            pointer-events: none;
        }
        .glitch-text::before {
            left: 2px;
            text-shadow: -1px 0 rgba(255,255,255,0.7);
            clip: rect(24px, 550px, 90px, 0);
            animation: glitch-anim 3s infinite linear alternate-reverse;
        }
        .glitch-text::after {
            left: -2px;
            text-shadow: -1px 0 rgba(180,180,180,0.7);
            clip: rect(85px, 550px, 140px, 0);
            animation: glitch-anim 2.5s infinite linear alternate-reverse;
        }
        @keyframes glitch-anim {
            0% { clip: rect(10px, 9999px, 31px, 0); transform: translate(-1px, 0); }
            20% { clip: rect(62px, 9999px, 86px, 0); transform: translate(1px, 0); }
            40% { clip: rect(41px, 9999px, 9px, 0); transform: translate(-1px, 0); }
            60% { clip: rect(98px, 9999px, 72px, 0); transform: translate(1px, 0); }
            80% { clip: rect(15px, 9999px, 45px, 0); transform: translate(-1px, 0); }
            100% { clip: rect(81px, 9999px, 19px, 0); transform: translate(1px, 0); }
        }

        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #050505; }
        ::-webkit-scrollbar-thumb { background: #222; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #555; }

        .faq-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease-out, opacity 0.4s ease-out;
            opacity: 0;
        }
        .faq-item.active .faq-content { max-height: 200px; opacity: 1; }
        .faq-item.active .faq-icon { transform: rotate(180deg); color: #ffffff; }

        /* Corner text animation */
        @keyframes blink-cursor {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }
        .cursor-blink::after {
            content: '_';
            animation: blink-cursor 1.1s step-end infinite;
        }


 .stat-card {
    background: linear-gradient(180deg, #111111 0%, #0a0a0a 100%);
    border: 1px solid #1c1c1c;
    border-radius: 1rem;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s ease;
  }
  .stat-card:hover { border-color: #2a2a2a; }

  /* Orange glow top-right */
  .stat-card::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, rgba(240,148,9,0.14) 0%, transparent 68%);
    pointer-events: none;
    z-index: 0;
  }
  .stat-card > * { position: relative; z-index: 1; }

  /* Arc gauge */
  @keyframes arc-draw {
    from { stroke-dashoffset: 100; }
    to   { stroke-dashoffset: 0; }
  }
  .arc-fill {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: arc-draw 1.6s cubic-bezier(0.16,1,0.3,1) 0.3s forwards;
  }

  /* Sparkline */
  @keyframes line-draw {
    from { stroke-dashoffset: 320; }
    to   { stroke-dashoffset: 0; }
  }
  .spark-line {
    stroke-dasharray: 320;
    stroke-dashoffset: 320;
    animation: line-draw 1.4s cubic-bezier(0.16,1,0.3,1) 0.4s forwards;
  }

  /* Histogram bars */
  @keyframes bar-up {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
  }
  .h-bar { transform-origin: bottom; animation: bar-up 0.55s cubic-bezier(0.16,1,0.3,1) both; }
  .h-bar:nth-child(1){animation-delay:.08s}
  .h-bar:nth-child(2){animation-delay:.14s}
  .h-bar:nth-child(3){animation-delay:.20s}
  .h-bar:nth-child(4){animation-delay:.26s}
  .h-bar:nth-child(5){animation-delay:.32s}
  .h-bar:nth-child(6){animation-delay:.38s}
  .h-bar:nth-child(7){animation-delay:.44s}
  .h-bar:nth-child(8){animation-delay:.50s}

  /* Progress bars */
  @keyframes prog-in { from { width: 0; } }
  .p-fill { animation: prog-in 1.1s cubic-bezier(0.16,1,0.3,1) both; }

  /* Status ping */
  @keyframes s-ping {
    0%   { transform: scale(1); opacity: .7; }
    70%  { transform: scale(2.2); opacity: 0; }
    100% { transform: scale(2.2); opacity: 0; }
  }
  .s-ping { animation: s-ping 1.6s ease-out infinite; }

  /* Spark end-dot */
  @keyframes dot-in { from { opacity:0; } to { opacity:1; } }
  .spark-dot { animation: dot-in 0.3s ease 1.7s both; }


/* Heading corner brackets — fit-content so they hug the text */
  .feat-h-wrap {
    position: relative;
    display: inline-block; /* shrinks to text width */
    width: fit-content;
  }
  .feat-h-wrap::before {
    content: '';
    position: absolute;
    bottom: -6px;
    left: -10px;
    width: 16px;
    height: 16px;
    border-left:  1.5px solid #f09409;
    border-bottom: 1.5px solid #f09409;
    pointer-events: none;
  }
  .feat-h-wrap::after {
    content: '';
    position: absolute;
    top: -6px;
    right: -10px;
    width: 16px;
    height: 16px;
    border-right: 1.5px solid #f09409;
    border-top:   1.5px solid #f09409;
    pointer-events: none;
  }

  /* Number badge */
  .f-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1px solid rgba(240,148,9,0.30);
    background: rgba(240,148,9,0.07);
    font-family: monospace;
    font-size: 9px;
    font-weight: 700;
    color: #f09409;
    flex-shrink: 0;
  }

  /* Card base */
  .f-card {
    background: linear-gradient(170deg, #111 0%, #0c0c0c 100%);
    border: 1px solid #1e1e1e;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color 0.25s ease;
  }
  .f-card:hover { border-color: #2e2e2e; }

  /* Anti-cheat pill */
  .ac-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;
    background: rgba(255,255,255,0.02);
  }
  .ac-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 5px rgba(74,222,128,0.8);
    flex-shrink: 0;
  }


 .g-card {
    background: linear-gradient(160deg, #131313 0%, #0c0c0c 100%);
    border: 1px solid #1e1e1e;
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: border-color 0.25s ease, transform 0.25s ease;
  }
  .g-card:hover { border-color: #2c2c2c; transform: translateY(-2px); }

  /* Top: image left + name/badges right */
  .g-top { display: flex; align-items: center; gap: 11px; }

  .g-img {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
  }

  .g-info { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }

  .g-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #f3f4f6;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .g-row { display: flex; align-items: center; gap: 5px; }

  .g-ac {
    padding: 2px 6px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 5px;
    font-size: 8px;
    font-family: monospace;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .07em;
    background: rgba(255,255,255,0.03);
    white-space: nowrap;
  }

  .g-dot {
    width: 5px; height: 5px; flex-shrink: 0;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 6px rgba(74,222,128,0.9);
  }
  .g-live-lbl {
    font-size: 8px;
    font-family: monospace;
    color: #4ade80;
    text-transform: uppercase;
    letter-spacing: .07em;
  }

  /* Divider */
  .g-div {
    height: 1px;
    background: rgba(255,255,255,0.05);
    margin: 0 -16px;
  }

  /* Bottom: desc + button */
  .g-bottom { display: flex; flex-direction: column; gap: 10px; }

  .g-desc {
    font-size: 10.5px;
    color: #4b5563;
    line-height: 1.6;
    margin: 0;
  }

  .g-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    padding: 7px 0;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 9px;
    font-size: 9px;
    font-weight: 600;
    color: #9ca3af;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: .11em;
    transition: background .2s, border-color .2s, color .2s;
  }
  .g-btn:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.16);
    color: #fff;
  }
  .g-btn svg { opacity: .6; flex-shrink: 0; }


 /* Step card */
  .step-card {
    background: linear-gradient(160deg, #131313 0%, #0c0c0c 100%);
    border: 1px solid #1e1e1e;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: border-color .25s ease;
    position: relative;
  }
  .step-card:hover { border-color: #2c2c2c; }

  /* Number badge */
  .step-num {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .step-num-badge {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.03);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: monospace;
    font-size: 10px;
    font-weight: 700;
    color: #6b7280;
    letter-spacing: .05em;
  }
  .step-num-badge.active {
    border-color: rgba(240,148,9,0.4);
    background: rgba(240,148,9,0.08);
    color: #f09409;
  }

  /* Icon circle */
  .step-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Divider */
  .step-div {
    height: 1px;
    background: rgba(255,255,255,0.05);
    margin: 0 -20px;
  }

  /* Title */
  .step-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #f3f4f6;
  }

  /* Desc */
  .step-desc {
    font-size: 11px;
    color: #4b5563;
    line-height: 1.65;
    margin: 0;
    flex: 1;
  }

  /* Detail pill at bottom */
  .step-detail {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
  }
  .step-detail-dot {
    width: 4px; height: 4px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .step-detail span {
    font-size: 9px;
    font-family: monospace;
    color: #6b7280;
    letter-spacing: .07em;
    text-transform: uppercase;
  }
  .step-detail span.hl { color: #9ca3af; }

  /* Arrow between steps */
  .step-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 4px; /* optical align with card top */
    flex-shrink: 0;
  }

  /* Vertical arrow for mobile */
  @media (max-width: 767px) {
    .step-arrow { padding: 0; transform: rotate(90deg); }
    .steps-grid { grid-template-columns: 1fr !important; }
  }


/* macOS window */
  .cl-window {
    background: #0a0a0a;
    border: 1px solid #222;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,0.6);
  }

  /* Title bar */
  .cl-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #111;
    border-bottom: 1px solid #1a1a1a;
    flex-shrink: 0;
  }
  .cl-lights { display: flex; align-items: center; gap: 6px; }
  .cl-light {
    width: 12px; height: 12px; border-radius: 50%;
    flex-shrink: 0;
  }
  .cl-light.r { background: #ff5f57; box-shadow: 0 0 4px rgba(255,95,87,0.5); }
  .cl-light.y { background: #febc2e; box-shadow: 0 0 4px rgba(254,188,46,0.5); }
  .cl-light.g { background: #28c840; box-shadow: 0 0 4px rgba(40,200,64,0.5); }

  .cl-bar-title {
    flex: 1;
    text-align: center;
    font-size: 11px;
    font-family: monospace;
    color: #4b5563;
    letter-spacing: .05em;
    margin-right: 60px; /* optical center offset for lights */
  }

  /* Body: sidebar + content */
  .cl-body {
    display: flex;
    height: 500px;
  }

  /* Sidebar */
  .cl-sidebar {
    width: 196px;
    flex-shrink: 0;
    border-right: 1px solid #1a1a1a;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .cl-sidebar-head {
    padding: 12px 14px 10px;
    border-bottom: 1px solid #1a1a1a;
    flex-shrink: 0;
  }
  .cl-sidebar-label {
    font-size: 8px;
    font-family: monospace;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: .14em;
  }

  .cl-ver-list {
    overflow-y: auto;
    flex: 1;
    padding: 8px 0;
    scrollbar-width: thin;
    scrollbar-color: #222 transparent;
  }
  .cl-ver-list::-webkit-scrollbar { width: 4px; }
  .cl-ver-list::-webkit-scrollbar-thumb { background: #222; border-radius: 4px; }

  .cl-ver-item {
    padding: 10px 14px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 3px;
    border-left: 2px solid transparent;
    transition: background .15s, border-color .15s;
  }
  .cl-ver-item:hover { background: rgba(255,255,255,0.03); }
  .cl-ver-item.active {
    background: rgba(255,255,255,0.04);
    border-left-color: #f09409;
  }

  .cl-ver-num {
    font-size: 13px;
    font-family: monospace;
    font-weight: 700;
    color: #9ca3af;
    transition: color .15s;
  }
  .cl-ver-item.active .cl-ver-num { color: #fff; }

  .cl-ver-row { display: flex; align-items: center; gap: 5px; }

  .cl-ver-date {
    font-size: 9px;
    font-family: monospace;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: .06em;
  }

  .cl-badge {
    font-size: 7px;
    font-family: monospace;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 1px 5px;
    border-radius: 4px;
  }
  .cl-badge.current {
    background: rgba(240,148,9,0.12);
    border: 1px solid rgba(240,148,9,0.3);
    color: #f09409;
  }
  .cl-badge.minor {
    background: rgba(99,102,241,0.10);
    border: 1px solid rgba(99,102,241,0.2);
    color: #818cf8;
  }
  .cl-badge.patch {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: #4b5563;
  }

  /* Content area */
  .cl-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px 28px;
    scrollbar-width: thin;
    scrollbar-color: #222 transparent;
  }
  .cl-content::-webkit-scrollbar { width: 4px; }
  .cl-content::-webkit-scrollbar-thumb { background: #222; border-radius: 4px; }

  /* Content panels */
  .cl-panel { display: none; flex-direction: column; gap: 24px; }
  .cl-panel.active { display: flex; }

  /* Version header */
  .cl-v-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-bottom: 16px;
    border-bottom: 1px solid #1a1a1a;
  }
  .cl-v-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    letter-spacing: -.02em;
  }
  .cl-v-sub {
    font-size: 11px;
    color: #4b5563;
    font-family: monospace;
    margin-top: 6px;
  }
  .cl-v-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
  .cl-v-date-tag {
    font-size: 10px;
    font-family: monospace;
    color: #4b5563;
    text-transform: uppercase;
    letter-spacing: .1em;
  }

  /* Change group */
  .cl-group { display: flex; flex-direction: column; gap: 8px; }

  .cl-group-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 9px;
    font-family: monospace;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    margin-bottom: 2px;
  }
  .cl-group-line {
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,0.05);
  }

  /* Change item */
  .cl-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    transition: background .15s;
  }
  .cl-item:hover { background: rgba(255,255,255,0.04); }

  .cl-item-tag {
    font-size: 7px;
    font-family: monospace;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 2px 6px;
    border-radius: 4px;
    flex-shrink: 0;
    margin-top: 1px;
  }

  .cl-item-text {
    font-size: 11.5px;
    color: #6b7280;
    line-height: 1.55;
    font-family: monospace;
  }
  .cl-item-text strong { color: #9ca3af; font-weight: 500; }

  /* Tag color themes */
  .tag-new    { background: rgba(34,197,94,0.10);  border: 1px solid rgba(34,197,94,0.25);  color: #4ade80; }
  .tag-change { background: rgba(240,148,9,0.10);  border: 1px solid rgba(240,148,9,0.25);  color: #f09409; }
  .tag-fix    { background: rgba(234,179,8,0.10);  border: 1px solid rgba(234,179,8,0.20);  color: #fbbf24; }
  .tag-remove { background: rgba(239,68,68,0.08);  border: 1px solid rgba(239,68,68,0.20);  color: #f87171; }

  .grp-new    { color: #4ade80; }
  .grp-change { color: #f09409; }
  .grp-fix    { color: #fbbf24; }
  .grp-remove { color: #f87171; }



/* ── Mobile: sidebar moves to top ── */
@media (max-width: 768px) {

  .cl-body {
    flex-direction: column;
    height: auto;
  }

  /* Sidebar becomes a horizontal scrollable tab bar */
  .cl-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #1a1a1a;
    flex-direction: row;
    overflow: hidden;
  }

  .cl-sidebar-head {
    display: none; /* hide "Versions" label on mobile */
  }

  .cl-ver-list {
    display: flex;
    flex-direction: row;
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    white-space: nowrap;
  }
  .cl-ver-list::-webkit-scrollbar { display: none; }

  .cl-ver-item {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border-left: none;
    border-bottom: 2px solid transparent;
    flex-shrink: 0;
    white-space: nowrap;
  }
  .cl-ver-item.active {
    background: rgba(255,255,255,0.04);
    border-left-color: transparent;
    border-bottom-color: #f09409;
  }

  /* Hide date + type badge on mobile tabs — just show version number */
  .cl-ver-row { display: none; }

  .cl-ver-num {
    font-size: 12px;
  }

  /* Content area: fixed height with scroll */
  .cl-content {
    height: 420px;
    padding: 18px 16px;
  }

  /* Version header: stack on mobile */
  .cl-v-header {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
  .cl-v-meta {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  .cl-v-title { font-size: 20px; }

  /* Items: smaller padding */
  .cl-item { padding: 7px 8px; }
  .cl-item-text { font-size: 10.5px; }
}



  /* Mode card */
  .m-card {
    background: linear-gradient(160deg, #131313 0%, #0c0c0c 100%);
    border: 1px solid #1e1e1e;
    border-radius: 16px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: border-color .25s ease, transform .25s ease;
  }
  .m-card:hover { border-color: #2c2c2c; transform: translateY(-2px); }

  /* Top row: num + icon */
  .m-top { display: flex; align-items: flex-start; justify-content: space-between; }

  .m-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    border-radius: 7px;
    border: 1px solid rgba(240,148,9,0.28);
    background: rgba(240,148,9,0.07);
    font-family: monospace;
    font-size: 9px;
    font-weight: 700;
    color: #f09409;
    flex-shrink: 0;
  }

  .m-icon-wrap {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  /* Divider */
  .m-div { height: 1px; background: rgba(255,255,255,0.05); margin: 0 -22px; }

  /* Title */
  .m-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #f3f4f6;
    line-height: 1.3;
  }

  /* Tag */
  .m-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 5px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    font-size: 8px;
    font-family: monospace;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .07em;
    width: fit-content;
  }
  .m-tag.green {
    border-color: rgba(74,222,128,0.2);
    background: rgba(74,222,128,0.04);
    color: #4ade80;
  }
  .m-tag.orange {
    border-color: rgba(240,148,9,0.25);
    background: rgba(240,148,9,0.06);
    color: #f09409;
  }

  /* Desc */
  .m-desc {
    font-size: 11.5px;
    color: #4b5563;
    line-height: 1.7;
    margin: 0;
    flex: 1;
  }

  /* Feature list */
  .m-features { display: flex; flex-direction: column; gap: 7px; }
  .m-feat {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10.5px;
    color: #6b7280;
    line-height: 1.4;
  }
  .m-feat-dot {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: #374151;
    flex-shrink: 0;
  }

  /* Bottom mode indicator bar */
  .m-bar-wrap {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  .m-bar-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .m-bar-track {
    height: 3px;
    background: #1a1a1a;
    border-radius: 99px;
    overflow: hidden;
  }
  .m-bar-fill {
    height: 100%;
    border-radius: 99px;
  }



 .reviews-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
  }
  @media (max-width: 1024px) {
    .reviews-grid { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 640px) {
    .reviews-grid { grid-template-columns: repeat(2, 1fr); }
  }

  .r-card {
    background: linear-gradient(160deg, #131313 0%, #0c0c0c 100%);
    border: 1px solid #1e1e1e;
    border-radius: 14px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color .25s ease;
    height: 100%;
  }
  .r-card:hover { border-color: #2c2c2c; }

  .r-user { display: flex; align-items: center; gap: 9px; }

  .r-avatar {
    width: 32px; height: 32px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px; font-weight: 700;
    flex-shrink: 0;
  }

  .r-info { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }

  .r-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px; font-weight: 700;
    color: #e5e7eb;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  .r-meta { display: flex; align-items: center; gap: 4px; }

  .r-game {
    font-size: 7px; font-family: monospace; font-weight: 700;
    color: #6b7280; text-transform: uppercase; letter-spacing: .06em;
    padding: 1px 5px;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 4px;
    background: rgba(255,255,255,0.03);
    white-space: nowrap;
  }

  .r-verified {
    display: flex; align-items: center; gap: 2px;
    font-size: 7px; font-family: monospace;
    color: #4ade80; text-transform: uppercase; letter-spacing: .05em;
  }

  .r-stars { display: flex; align-items: center; gap: 1.5px; }

  .r-div { height: 1px; background: rgba(255,255,255,0.05); margin: 0 -14px; }

  /* Text fills flex space, pushing footer down */
  .r-body {
    display: flex; flex-direction: column; gap: 10px;
    flex: 1;
  }

  .r-text {
    font-size: 10.5px; color: #4b5563; line-height: 1.6; margin: 0;
    flex: 1;
  }
  .r-text strong { color: #9ca3af; font-weight: 500; }

  /* Footer always at bottom */
  .r-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.04);
    margin-top: auto;
  }
  .r-date {
    font-size: 7.5px; font-family: monospace;
    color: #374151; text-transform: uppercase; letter-spacing: .07em;
  }
  .r-mode {
    font-size: 7.5px; font-family: monospace;
    color: #2d3748; text-transform: uppercase; letter-spacing: .06em;
  }

/* Category label */
  .ts-cat {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
  }
  .ts-cat-label {
    font-size: 8px;
    font-family: monospace;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: #374151;
  }
  .ts-cat-line {
    flex: 1; height: 1px;
    background: rgba(255,255,255,0.05);
  }

  /* Accordion item */
  .ts-item {
    background: linear-gradient(160deg,#131313 0%,#0c0c0c 100%);
    border: 1px solid #1e1e1e;
    border-radius: 12px;
    overflow: hidden;
    transition: border-color .2s ease;
  }
  .ts-item:hover { border-color: #262626; }
  .ts-item.open  { border-color: #252525; }

  /* Severity left bar */
  .ts-item.err  { border-left: 2px solid rgba(239,68,68,0.45); }
  .ts-item.warn { border-left: 2px solid rgba(234,179,8,0.40); }
  .ts-item.info { border-left: 2px solid rgba(99,102,241,0.40); }

  /* Trigger row */
  .ts-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    cursor: pointer;
    background: none;
    border: none;
    text-align: left;
    transition: background .15s;
  }
  .ts-trigger:hover { background: rgba(255,255,255,0.02); }

  /* Severity dot */
  .ts-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .ts-item.err  .ts-dot { background:#f87171; box-shadow:0 0 5px rgba(248,113,113,.6); }
  .ts-item.warn .ts-dot { background:#fbbf24; box-shadow:0 0 5px rgba(251,191,36,.5); }
  .ts-item.info .ts-dot { background:#818cf8; box-shadow:0 0 5px rgba(129,140,248,.5); }

  /* Issue number */
  .ts-n {
    font-size: 9px;
    font-family: monospace;
    font-weight: 700;
    color: #374151;
    letter-spacing: .06em;
    flex-shrink: 0;
    width: 20px;
  }

  /* Title */
  .ts-t {
    font-size: 12.5px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    color: #d1d5db;
    flex: 1;
    line-height: 1.3;
  }

  /* Right badges + arrow */
  .ts-right {
    display: flex; align-items: center; gap: 6px; flex-shrink: 0;
  }

  .ts-badge {
    font-size: 7px;
    font-family: monospace;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
  }
  .ts-badge.fix  { background:rgba(34,197,94,.07);  border:1px solid rgba(34,197,94,.18);  color:#4ade80; }
  .ts-badge.wrk  { background:rgba(240,148,9,.07);  border:1px solid rgba(240,148,9,.18);  color:#f09409; }
  .ts-badge.v241 { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); color:#6b7280; }

  .ts-arrow {
    width: 18px; height: 18px;
    display: flex; align-items: center; justify-content: center;
    color: #374151;
    transition: transform .25s cubic-bezier(.16,1,.3,1), color .2s;
    flex-shrink: 0;
  }
  .ts-item.open .ts-arrow { transform: rotate(180deg); color: #9ca3af; }

  /* Expandable body */
  .ts-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s cubic-bezier(.16,1,.3,1);
  }
  .ts-item.open .ts-body { max-height: 600px; }

  .ts-inner {
    padding: 0 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 14px;
  }

  /* Cause row */
  .ts-cause-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 12px;
    background: rgba(255,255,255,0.02);
    border-radius: 9px;
    border: 1px solid rgba(255,255,255,0.04);
  }
  .ts-cause-icon { flex-shrink:0; margin-top:1px; opacity:.6; }
  .ts-cause-txt {
    font-size: 11px;
    color: #4b5563;
    line-height: 1.65;
  }
  .ts-cause-txt strong { color: #6b7280; font-weight:500; }

  /* Tags row (affected games/ac) */
  .ts-tags { display:flex; flex-wrap:wrap; gap:4px; }
  .ts-tag {
    font-size: 7.5px;
    font-family: monospace;
    color: #4b5563;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 4px;
    padding: 2px 6px;
    text-transform: uppercase;
    letter-spacing: .06em;
  }

  /* Steps */
  .ts-steps-label {
    font-size: 8px;
    font-family: monospace;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: #374151;
    margin-bottom: 6px;
  }
  .ts-steps { display:flex; flex-direction:column; gap:5px; }
  .ts-step  { display:flex; gap:9px; align-items:flex-start; }
  .ts-sn {
    width: 17px; height: 17px;
    border-radius: 5px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    font-size: 8px; font-family:monospace; font-weight:700;
    color: #4b5563;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; margin-top:1px;
  }
  .ts-st {
    font-size: 11px;
    color: #6b7280;
    line-height: 1.6;
  }
  .ts-st strong { color:#9ca3af; font-weight:500; }
  .ts-st code {
    font-family: monospace; font-size:10px; color:#9ca3af;
    background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.07);
    border-radius:4px; padding:1px 5px;
  }


 .faq-item-new {
    background: linear-gradient(160deg, #131313 0%, #0c0c0c 100%);
    border: 1px solid #1e1e1e;
    border-radius: 12px;
    overflow: hidden;
    transition: border-color .2s ease;
  }
  .faq-item-new:hover { border-color: #262626; }
  .faq-item-new.faq-open { border-color: #252525; }

  .faq-btn-new {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background .15s;
  }
  .faq-btn-new:hover { background: rgba(255,255,255,0.02); }

  /* Number */
  .faq-qn {
    font-size: 9px;
    font-family: monospace;
    font-weight: 700;
    color: rgba(240,148,9,0.5);
    letter-spacing: .06em;
    flex-shrink: 0;
    width: 22px;
  }

  /* Question text */
  .faq-q {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #d1d5db;
    flex: 1;
    line-height: 1.35;
    text-align: left;
  }

  /* Tag */
  .faq-qtag {
    font-size: 7.5px;
    font-family: monospace;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 2px 7px;
    border-radius: 4px;
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* Arrow */
  .faq-arr {
    width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
    color: #374151;
    flex-shrink: 0;
    transition: transform .25s cubic-bezier(.16,1,.3,1), color .2s;
  }
  .faq-item-new.faq-open .faq-arr { transform: rotate(180deg); color: #9ca3af; }
  .faq-item-new.faq-open .faq-q   { color: #f3f4f6; }

  /* Body */
  .faq-body-new {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s cubic-bezier(.16,1,.3,1);
  }
  .faq-item-new.faq-open .faq-body-new { max-height: 400px; }

  .faq-ans {
    padding: 0 18px 16px 54px; /* 54px = 22 num + 14 gap + 18 pad */
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 14px;
  }

  .faq-ans-txt {
    font-size: 11.5px;
    color: #4b5563;
    line-height: 1.7;
    margin: 0;
  }
  .faq-ans-txt strong { color: #9ca3af; font-weight: 500; }
  .faq-ans-txt a { color: #f09409; text-decoration: none; }
  .faq-ans-txt a:hover { text-decoration: underline; }

  /* Tags in answer */
  .faq-atags { display: flex; flex-wrap: wrap; gap: 4px; }
  .faq-atag {
    font-size: 7.5px; font-family: monospace;
    color: #4b5563; background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 4px; padding: 2px 6px;
    text-transform: uppercase; letter-spacing: .06em;
  }


  @media (max-width: 768px) {
    footer > div:first-child {
      grid-template-columns: 1fr 1fr !important;
      gap: 32px !important;
    }
    footer > div:first-child > div:first-child {
      grid-column: 1 / -1;
    }
  }
  @media (max-width: 480px) {
    footer > div:first-child {
      grid-template-columns: 1fr !important;
    }
  }