:root{
      --op-bg-deep:#020713;
      --op-text-main:#e5f1ff;
      --op-text-soft:#a0b2d2;
      --op-text-faded:#7d90b2;
      --op-text-bright:#ffffff;

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

      --op-accent:#3ba7ff;
      --op-accent-strong:#66d1ff;

      --op-gold:#ffcc78;
      --op-gold-soft:rgba(255,204,120,.22);

      --op-success:#53e0b3;
      --op-warning:#ffd36b;
      --op-danger:#ff6f8a;

      --op-ink:#04101f;
    }

    *{ box-sizing:border-box; }

    body{
      margin:0;
      min-height:100vh;
      background:
        radial-gradient(circle at 12% -10%, rgba(121,190,255,.20) 0, transparent 55%),
        radial-gradient(circle at 90% -18%, rgba(98,170,255,.16) 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; }

    main{ padding:1.35rem 0 4rem; }
    @media (max-width:575.98px){ main{ padding:1.1rem 0 3.2rem; } }

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

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

    .op-pad{ padding:1.05rem 1.2rem; }
    @media (max-width:575.98px){ .op-pad{ padding:0.95rem 1rem; } }

    .op-divider{
      height:1px;
      border-radius:999px;
      background: linear-gradient(90deg, rgba(110,180,255,.10), rgba(110,180,255,.82), rgba(110,180,255,.10));
      margin:0.65rem 0 0.85rem;
    }

    /* Breadcrumbs */
    .op-breadcrumbs{
      display:flex;
      flex-wrap:wrap;
      gap:.35rem;
      align-items:center;
      font-size:.78rem;
      color:var(--op-text-faded);
      margin-bottom:0.9rem;
      letter-spacing:.04em;
    }
    .op-breadcrumbs a{ color:var(--op-text-soft); }
    .op-breadcrumb-sep{ opacity:.75; }
    .op-breadcrumb-current{ color:rgba(230,244,255,.92); }

    /* Forum header */
    .op-forum-kicker{
      display:flex;
      align-items:center;
      gap:.55rem;
      font-size:.78rem;
      text-transform:uppercase;
      letter-spacing:.16em;
      color:var(--op-text-faded);
      margin-bottom:.35rem;
    }
    .op-forum-title{
      font-size:clamp(1.4rem, 2.6vw, 1.95rem);
      font-weight:650;
      color:var(--op-text-bright);
      margin:0 0 .25rem;
      line-height:1.15;
    }
    .op-forum-desc{
      margin:0;
      font-size:.88rem;
      color:var(--op-text-soft);
      max-width:85ch;
      line-height:1.5;
    }

    /* Compact action row */
    .op-actions{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      justify-content:space-between;
      gap:.65rem 1rem;
      margin-top:.9rem;
    }

    .op-search{
      position:relative;
      flex: 1 1 420px;
      max-width: 620px;
    }
    .op-search i{
      position:absolute;
      left:14px;
      top:50%;
      transform:translateY(-50%);
      color:rgba(148,206,255,.92);
      pointer-events:none;
    }
    .op-search input{
      width:100%;
      border-radius:999px;
      border:1px solid rgba(92,150,230,.96);
      padding:.58rem .95rem .58rem 2.25rem;
      font-size:.92rem;
      background: rgba(3,10,24,.96);
      color: var(--op-text-main);
      box-shadow:
        inset 0 0 12px rgba(0,0,0,.9),
        0 0 12px rgba(120,185,255,.16);
    }
    .op-search input::placeholder{ color: rgba(160,178,210,.72); }
    .op-search input:focus{
      outline:none;
      border-color: rgba(151,210,255,1);
      box-shadow:
        inset 0 0 12px rgba(0,0,0,.9),
        0 0 20px rgba(151,210,255,.56);
    }

    .op-btn-primary{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.45rem;
      border-radius:999px;
      padding:.55rem 1.05rem;
      border:1px solid rgba(214,238,255,.98);
      background: linear-gradient(135deg, rgba(67,151,255,.42), rgba(134,209,255,.88));
      color:var(--op-ink);
      font-size:.82rem;
      font-weight:700;
      letter-spacing:.09em;
      text-transform:uppercase;
      cursor:pointer;
      box-shadow:
        0 10px 22px rgba(0,0,0,.92),
        0 0 18px rgba(110,190,255,.40);
      transition:.16s ease-out;
      text-decoration:none;
      white-space:nowrap;
    }
    .op-btn-primary:hover{
      transform: translateY(-1px);
      box-shadow:
        0 14px 28px rgba(0,0,0,.96),
        0 0 26px rgba(145,214,255,.66);
      text-decoration:none;
    }

    .op-btn-outline{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.4rem;
      border-radius:999px;
      padding:.48rem .92rem;
      font-size:.8rem;
      letter-spacing:.06em;
      text-transform:uppercase;
      border:1px solid rgba(122,190,255,.96);
      background: rgba(3,10,24,.98);
      color: var(--op-text-main);
      cursor:pointer;
      box-shadow:
        0 7px 14px rgba(0,0,0,.9),
        0 0 12px rgba(110,190,255,.24);
      transition:.16s ease-out;
      text-decoration:none;
      white-space:nowrap;
    }
    .op-btn-outline:hover{
      border-color: rgba(151,210,255,1);
      transform: translateY(-1px);
      box-shadow:
        0 10px 20px rgba(0,0,0,.96),
        0 0 18px rgba(148,206,255,.52);
      text-decoration:none;
    }

    /* Thread list */
    .op-thread-list{ padding:0.25rem 0; }
    .op-thread-item{
      display:grid;
      grid-template-columns: minmax(0, 1fr) 180px;
      gap: 0.8rem 1rem;
      padding: 0.95rem 1.1rem;
      border-top: 1px solid rgba(63,103,180,.55);
    }
    .op-thread-item:first-child{ border-top:none; }
    @media (max-width: 991.98px){
      .op-thread-item{ grid-template-columns: minmax(0,1fr); }
    }

    .op-thread-main{
      display:flex;
      gap: 0.85rem;
      min-width:0;
      align-items:flex-start;
    }

    .op-thread-icon{
      width:44px;
      height:44px;
      border-radius:14px;
      border:1px solid rgba(122,190,255,.96);
      background:
        radial-gradient(circle at 30% 0,
          rgba(148,206,255,.55) 0,
          rgba(67,151,255,.32) 45%,
          rgba(3,10,24,.98) 100%);
      box-shadow:
        0 0 0 1px rgba(0,0,0,.96),
        0 12px 22px rgba(0,0,0,.92),
        inset 0 0 12px rgba(110,180,255,.12);
      display:flex;
      align-items:center;
      justify-content:center;
      color: rgba(225,245,255,.92);
      flex: 0 0 auto;
    }
    .op-thread-icon i{ font-size:1.05rem; }

    .op-thread-title{
      font-size:1rem;
      font-weight:650;
      color: var(--op-text-bright);
      line-height:1.25;
      margin:0 0 .15rem;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }

    .op-thread-snippet{
      margin:0;
      font-size:.84rem;
      color: var(--op-text-soft);
      line-height:1.45;
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
    }

    .op-thread-meta{
      margin-top:.45rem;
      display:flex;
      flex-wrap:wrap;
      gap:.45rem .8rem;
      align-items:center;
      color: var(--op-text-faded);
      font-size:.78rem;
    }

    .op-pill{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      border-radius:999px;
      padding:.2rem .62rem;
      border:1px solid rgba(63,103,180,.86);
      background: rgba(3,10,24,.96);
      color: var(--op-text-soft);
      font-size:.74rem;
      letter-spacing:.04em;
    }
    .op-pill i{ font-size:.82rem; color: rgba(148,206,255,.92); }

    .op-pill--pinned{
      border-color: rgba(255,204,120,.72);
      background: rgba(40,22,6,.55);
      color: rgba(255,231,198,.92);
    }
    .op-pill--pinned i{ color: var(--op-gold); }

    .op-pill--new{
      border-color: rgba(83,224,179,.72);
      background: rgba(6,25,18,.55);
      color: rgba(196,255,236,.92);
    }
    .op-pill--new i{ color: var(--op-success); }

    .op-last{
      border:1px solid rgba(63,103,180,.72);
      border-radius:16px;
      padding:.65rem .75rem;
      background: rgba(3,10,24,.78);
      box-shadow:
        inset 0 0 10px rgba(0,0,0,.86),
        0 0 12px rgba(120,185,255,.12);
    }
    .op-last .label{
      font-size:.74rem;
      text-transform:uppercase;
      letter-spacing:.14em;
      color: var(--op-text-faded);
      margin-bottom:.25rem;
      display:flex;
      align-items:center;
      gap:.35rem;
    }
    .op-last .who{
      font-size:.84rem;
      color: var(--op-text-main);
      margin:0;
      line-height:1.35;
    }
    .op-last .when{
      font-size:.78rem;
      color: var(--op-text-faded);
      margin: .2rem 0 0;
    }

    .op-counts{
      display:flex;
      flex-wrap:wrap;
      gap:.5rem .8rem;
      margin-top:.45rem;
      color: var(--op-text-faded);
      font-size:.78rem;
    }
    .op-counts span i{
      margin-right:.25rem;
      color: rgba(148,206,255,.9);
      font-size:.86rem;
    }

    /* Pagination */
    .op-pagination{
      display:flex;
      flex-wrap:wrap;
      gap:.5rem;
      align-items:center;
      justify-content:space-between;
      padding: .9rem 1.1rem 1.05rem;
      border-top: 1px solid rgba(63,103,180,.55);
    }
    .op-page-links{
      display:flex;
      flex-wrap:wrap;
      gap:.45rem;
      align-items:center;
    }
    .op-page{
      min-width:36px;
      height:36px;
      border-radius:999px;
      border:1px solid rgba(122,190,255,.96);
      background: rgba(3,10,24,.96);
      color: var(--op-text-main);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-size:.82rem;
      cursor:pointer;
      transition:.14s ease-out;
      text-decoration:none;
    }
    .op-page:hover{
      transform: translateY(-1px);
      border-color: rgba(151,210,255,1);
      text-decoration:none;
      box-shadow: 0 12px 22px rgba(0,0,0,.92);
    }
    .op-page.is-active{
      border-color: rgba(214,238,255,.98);
      background: linear-gradient(135deg, rgba(67,151,255,.42), rgba(134,209,255,.88));
      color: var(--op-ink);
      font-weight:700;
    }

    /* Sidebar */
    .op-sticky{ position:sticky; top:1rem; }
    @media (max-width:991.98px){ .op-sticky{ position:static; } }

    .op-mini-kicker{
      font-size:.78rem;
      text-transform:uppercase;
      letter-spacing:.16em;
      color:var(--op-text-faded);
      display:flex;
      align-items:center;
      gap:.45rem;
      margin-bottom:.25rem;
    }
    .op-mini-title{
      font-size:1rem;
      font-weight:650;
      color:var(--op-text-bright);
      margin:0 0 .35rem;
    }
    .op-mini-list{
      list-style:none;
      padding:0;
      margin:0;
      font-size:.84rem;
      color:var(--op-text-soft);
      line-height:1.45;
    }
    .op-mini-list li + li{ margin-top:.35rem; }
    .op-mini-list i{ margin-right:.35rem; color: rgba(148,206,255,.95); }

    .op-taglist{
      display:flex;
      flex-wrap:wrap;
      gap:.4rem;
      margin-top:.35rem;
    }
    .op-tag{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      border-radius:999px;
      padding:.2rem .6rem;
      border:1px solid rgba(63,103,180,.86);
      background: rgba(3,10,24,.92);
      color: var(--op-text-soft);
      font-size:.76rem;
      cursor:pointer;
      text-decoration:none;
      transition:.14s ease-out;
    }
    .op-tag:hover{
      border-color: rgba(151,210,255,1);
      transform: translateY(-1px);
      box-shadow: 0 12px 22px rgba(0,0,0,.92);
      text-decoration:none;
    }