:root {
      --op-bg-deep: #020713;
      --op-bg-panel: #051325;
      --op-bg-panel-alt: #071a33;

      --op-text-main: #e5f1ff;
      --op-text-soft: #a0b2d2;
      --op-text-faded: #7d90b2;
      --op-text-bright: #ffffff;

      --op-border-strong: rgba(122, 190, 255, 0.96);
      --op-border-soft: rgba(96, 145, 220, 0.9);

      --op-accent: #3ba7ff;
      --op-accent-soft: rgba(59, 167, 255, 0.24);

      --op-badge-blue: rgba(71, 159, 255, 0.2);
      --op-badge-green: rgba(83, 224, 179, 0.17);
      --op-badge-amber: rgba(255, 211, 107, 0.18);
      --op-badge-red: rgba(255, 111, 138, 0.2);
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      min-height: 100vh;
      background:
        radial-gradient(circle at 10% -10%, rgba(121, 190, 255, 0.28) 0, transparent 55%),
        radial-gradient(circle at 90% -15%, rgba(98, 170, 255, 0.22) 0, transparent 60%),
        linear-gradient(180deg, #020713 0%, #01030b 52%, #000 100%);
      color: var(--op-text-main);
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        sans-serif;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    a:hover {
      text-decoration: underline;
    }

    /* ====== Layout shell ====== */
    .op-forum-section {
      padding: 2.5rem 0 4rem;
      border-top: 1px solid rgba(0,0,0,0.85);
      border-bottom: 1px solid rgba(0,0,0,0.85);
    }

    /* ====== Glass panel utility ====== */
    .op-glass-panel {
      border-radius: 18px;
      background: radial-gradient(circle at top left,
                  rgba(92, 160, 255, 0.3) 0,
                  rgba(5, 15, 32, 0.96) 46%,
                  #040915 100%);
      border: 1px solid var(--op-border-soft);
      box-shadow:
        0 0 0 1px rgba(0,0,0,0.95),
        0 24px 48px rgba(5, 20, 48, 0.9),
        inset 0 0 18px rgba(110, 180, 255, 0.15);
      padding: 1rem 1.2rem;
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }

    .op-glass-panel--alt {
      background: radial-gradient(circle at top right,
                  rgba(111, 187, 255, 0.24) 0,
                  rgba(4, 15, 32, 0.96) 55%,
                  #030712 100%);
    }

    .op-panel-heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      margin-bottom: 0.9rem;
    }

    .op-panel-title {
      font-size: 0.86rem;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      color: var(--op-text-soft);
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
    }

    .op-panel-title i {
      color: var(--op-accent);
      font-size: 1rem;
    }

    .op-panel-meta {
      font-size: 0.75rem;
      color: var(--op-text-faded);
    }

    .op-panel-divider {
      height: 1px;
      border-radius: 999px;
      background: linear-gradient(
        90deg,
        rgba(110, 180, 255, 0.08),
        rgba(110, 180, 255, 0.85),
        rgba(110, 180, 255, 0.08)
      );
      margin-bottom: 0.75rem;
    }

    /* ====== Forum categories ====== */
    .op-forum-category {
      margin-bottom: 1.1rem;
    }

    .op-forum-category-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      margin-bottom: 0.5rem;
    }

    .op-forum-category-title {
      display: flex;
      flex-direction: column;
      gap: 0.1rem;
    }

    .op-forum-category-name {
      font-size: 0.9rem;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      color: var(--op-text-soft);
    }

    .op-forum-category-description {
      font-size: 0.8rem;
      color: var(--op-text-faded);
    }

    .op-forum-category-meta {
      font-size: 0.75rem;
      color: var(--op-text-faded);
      white-space: nowrap;
    }

    /* Forum list (no table headers now) */
    .op-forum-list {
      border-radius: 14px;
      overflow: hidden;
      border: 1px solid rgba(75, 122, 196, 0.95);
      background: radial-gradient(circle at top left,
                  rgba(83, 152, 252, 0.16) 0,
                  rgba(3, 9, 20, 0.98) 45%,
                  #01040c 100%);
      box-shadow: 0 18px 40px rgba(0,0,0,0.9);
    }

    .op-forum-row {
      display: grid;
      grid-template-columns: minmax(0, 1.8fr) minmax(0, 0.7fr) minmax(0, 1fr);
      gap: 0.5rem;
      padding: 0.65rem 0.7rem;
      border-top: 1px solid rgba(44, 82, 148, 0.8);
      font-size: 0.82rem;
      cursor: pointer;
      transition: background 0.15s ease-out, transform 0.13s ease-out,
        box-shadow 0.13s ease-out;
    }

    .op-forum-row:first-child {
      border-top: none;
    }

    .op-forum-row:hover {
      background: radial-gradient(circle at top,
                  rgba(108, 176, 255, 0.22) 0,
                  rgba(2, 8, 20, 0.98) 55%);
      transform: translateY(-1px);
      box-shadow: 0 12px 24px rgba(0,0,0,0.9);
    }

    @media (max-width: 767.98px) {
      .op-forum-row {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    .op-forum-main {
      display: flex;
      align-items: flex-start;
      gap: 0.6rem;
    }

    .op-forum-icon {
      width: 34px;
      height: 34px;
      border-radius: 12px;
      background: radial-gradient(circle at 30% 0,
                  rgba(148, 206, 255, 0.7) 0,
                  rgba(38, 96, 178, 0.96) 35%,
                  #020816 100%);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #e7f4ff;
      flex-shrink: 0;
      box-shadow:
        0 0 0 1px rgba(0,0,0,0.9),
        0 6px 14px rgba(0,0,0,0.9);
      font-size: 1rem;
    }

    .op-forum-text {
      display: flex;
      flex-direction: column;
      gap: 0.15rem;
    }

    .op-forum-name {
      font-weight: 500;
      color: var(--op-text-bright);
    }

    .op-forum-description {
      font-size: 0.78rem;
      color: var(--op-text-soft);
    }

    .op-forum-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 0.28rem;
      margin-top: 0.2rem;
    }

    .op-badge-pill {
      font-size: 0.7rem;
      border-radius: 999px;
      padding: 0.1rem 0.45rem;
      border: 1px solid rgba(121, 182, 255, 0.85);
      background: var(--op-badge-blue);
      color: #d9e8ff;
    }

    .op-badge-pill--green {
      background: var(--op-badge-green);
      border-color: rgba(83, 224, 179, 0.9);
    }

    .op-badge-pill--amber {
      background: var(--op-badge-amber);
      border-color: rgba(255, 211, 107, 0.9);
    }

    .op-badge-pill--red {
      background: var(--op-badge-red);
      border-color: rgba(255, 111, 138, 0.9);
    }

    .op-forum-stats {
      font-size: 0.78rem;
      color: var(--op-text-soft);
      display: flex;
      flex-direction: column;
      gap: 0.1rem;
    }

    .op-forum-stats strong {
      color: var(--op-text-main);
      font-weight: 500;
    }

    .op-forum-last {
      font-size: 0.78rem;
      color: var(--op-text-soft);
      display: flex;
      flex-direction: column;
      gap: 0.15rem;
    }

    .op-forum-last-topic {
      color: var(--op-text-main);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .op-forum-last-meta {
      color: var(--op-text-faded);
    }

    @media (max-width: 767.98px) {
      .op-forum-stats,
      .op-forum-last {
        flex-direction: row;
        justify-content: space-between;
      }
    }

    /* ====== Sidebar panels ====== */
    .op-sidebar-panel {
      margin-bottom: 1.2rem;
    }

    .op-sidebar-list {
      list-style: none;
      margin: 0;
      padding: 0;
      font-size: 0.8rem;
    }

    .op-sidebar-list li + li {
      margin-top: 0.4rem;
      padding-top: 0.45rem;
      border-top: 1px solid rgba(62, 104, 179, 0.8);
    }

    .op-badge-tag {
      font-size: 0.7rem;
      border-radius: 999px;
      padding: 0.1rem 0.45rem;
      background: rgba(9, 25, 50, 0.96);
      border: 1px solid rgba(116, 175, 248, 0.9);
      color: #ddebff;
    }

    .op-sidebar-link {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      color: var(--op-text-main);
    }

    .op-sidebar-link i {
      font-size: 0.9rem;
      color: var(--op-accent);
    }

    .op-sidebar-meta {
      font-size: 0.75rem;
      color: var(--op-text-faded);
      margin-top: 0.1rem;
    }

    /* ====== Bottom meta row ====== */
    .op-bottom-meta {
      margin-top: 1.8rem;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 0.75rem;
      font-size: 0.78rem;
      color: var(--op-text-soft);
    }

    .op-legend {
      display: inline-flex;
      flex-wrap: wrap;
      gap: 0.4rem;
      align-items: center;
    }

    .op-legend-item {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
    }

    .op-legend-dot {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: var(--op-accent-soft);
      border: 1px solid rgba(110, 180, 255, 0.9);
    }

    .op-legend-dot--new {
      background: rgba(83, 224, 179, 0.3);
      border-color: rgba(83, 224, 179, 0.9);
    }

    .op-legend-dot--locked {
      background: rgba(255, 111, 138, 0.28);
      border-color: rgba(255, 111, 138, 0.95);
    }

    .op-actions {
      display: inline-flex;
      flex-wrap: wrap;
      gap: 0.4rem;
    }

    .op-action-link {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      padding: 0.22rem 0.55rem;
      border-radius: 999px;
      border: 1px solid rgba(103, 162, 245, 0.9);
      background: rgba(3, 13, 30, 0.96);
      color: #dde8ff;
      text-decoration: none;
    }

    .op-action-link:hover {
      background: rgba(13, 32, 64, 0.98);
      text-decoration: none;
    }

    .op-action-link i {
      font-size: 0.85rem;
      color: var(--op-accent);
    }