:root {
      --op-bg-deep: #020c18;
      --op-bg-mid: #071a30;
      --op-bg-glow: rgba(60, 140, 255, 0.28);

      --op-text-main: #eaf4ff;
      --op-text-muted: #9fbedc;
      --op-text-bright: #ffffff;

      --op-border-strong: rgba(112, 175, 255, 0.95);
      --op-border-glow: rgba(158, 210, 255, 0.9);

      --op-gradient-surface: radial-gradient(circle at top left,
        rgba(85, 168, 255, 0.48) 0%,
        rgba(10, 28, 48, 0.94) 40%,
        #06101f 100%);

      --op-gradient-surface-alt: radial-gradient(circle at top right,
        rgba(118, 187, 255, 0.5) 0%,
        rgba(8, 26, 54, 0.95) 42%,
        #05101d 100%);
    }

    body {
      margin: 0;
      min-height: 100vh;
      background: linear-gradient(180deg, #031427 0%, #020812 60%, #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; }

    /* ================= SECTION ================= */
    .op-news-section {
      padding: 4rem 0 4.5rem;
      position: relative;
      background: radial-gradient(circle at 45% -10%,
        rgba(120, 200, 255, 0.23) 0%,
        rgba(3, 14, 30, 0.98) 55%,
        #01050f 100%);
      border-top: 1px solid rgba(0,0,0,0.85);
      border-bottom: 1px solid rgba(0,0,0,0.85);
    }

    .op-news-header {
      margin-bottom: 2.2rem;
    }

    .op-news-kicker {
      text-transform: uppercase;
      letter-spacing: 0.28em;
      font-size: 0.75rem;
      color: var(--op-text-muted);
    }

    .op-news-title {
      font-size: 1.85rem;
      font-weight: 700;
      color: var(--op-text-bright);
    }

    .op-news-subtitle {
      font-size: 0.95rem;
      color: var(--op-text-muted);
      max-width: 680px;
    }

    /* ================= GRID ================= */
    .op-news-grid {
      display: grid;
      gap: 1.6rem;
      grid-template-columns: minmax(0, 1fr);
    }

    @media (min-width: 992px) {
      .op-news-grid {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
      }
    }

    /* ================= PANELS ================= */

    .op-panel-shell {
      border-radius: 18px;
      background: var(--op-gradient-surface);
      backdrop-filter: blur(20px);
      border: 1px solid var(--op-border-strong);
      box-shadow:
        0 0 0 1px rgba(0,0,0,0.92),
        0 25px 55px rgba(10,20,40,0.85),
        inset 0 0 22px rgba(130,190,255,0.12);
      transition: 0.2s ease-in-out;
    }

    .op-panel-shell:hover {
      border-color: var(--op-border-glow);
      box-shadow:
        0 0 0 1px rgba(0,0,0,0.95),
        0 32px 65px rgba(20,40,60,0.92),
        inset 0 0 30px rgba(150,210,255,0.18);
      transform: translateY(-2px);
    }

    .op-panel-shell--archive {
      background: var(--op-gradient-surface-alt);
    }

    .op-panel-body {
      padding: 1.25rem 1.4rem;
    }

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

    .op-panel-title {
      font-size: 0.95rem;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      color: var(--op-text-muted);
      display: flex;
      align-items: center;
      gap: 0.45rem;
    }

    .op-panel-title i {
      color: var(--op-text-bright);
      opacity: 0.8;
    }

    .op-panel-divider {
      height: 1px;
      background: linear-gradient(90deg,
        rgba(150,210,255,0.05),
        rgba(150,210,255,0.65),
        rgba(150,210,255,0.05));
      border-radius: 999px;
      margin-bottom: 1rem;
    }

    /* ================= RECENT NEWS ================= */

    .op-month-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.35rem;
    }

    .op-month-label {
      font-size: 0.9rem;
      color: #e3f0ff;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .op-month-meta {
      font-size: 0.78rem;
      color: rgba(200,225,255,0.85);
    }

    .op-month-divider-thin {
      height: 1px;
      background: linear-gradient(
        90deg,
        rgba(118,168,255,0) 0%,
        rgba(118,168,255,0.8) 50%,
        rgba(118,168,255,0) 100%);
      margin-bottom: 0.45rem;
    }

    .op-article-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
    }

    .op-article-item {
      display: flex;
      gap: 0.6rem;
      font-size: 0.84rem;
      padding: 0.35rem 0.4rem;
      border-radius: 8px;
      transition: 0.16s ease-out;
    }

    .op-article-item:hover {
      background: rgba(120,182,255,0.16);
      transform: translateX(3px);
    }

    .op-article-date {
      min-width: 5rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      font-size: 0.78rem;
      color: #bcd9ff;
    }

    .op-article-headline { color: var(--op-text-bright); }
    .op-article-tagline { font-size: 0.74rem; color: var(--op-text-muted); }

    /* ================= ARCHIVE ================= */

    .op-archive-grid {
      display: grid;
      gap: 1rem;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .op-archive-year {
      padding: 0.75rem;
      border-radius: 14px;
      background: rgba(10,24,48,0.65);
      border: 1px solid rgba(130,180,255,0.6);
      box-shadow: inset 0 0 16px rgba(80,140,255,0.12),
                  0 10px 25px rgba(0,0,0,0.7);
    }

    .op-archive-year-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 0.45rem;
    }

    .op-archive-year-label {
      font-size: 1rem;
      font-weight: 600;
      color: #e8f3ff;
    }

    .op-archive-months {
      display: grid;
      grid-template-columns: repeat(3,minmax(0,1fr));
      gap: 0.35rem;
    }

    .op-archive-month {
      padding: 0.2rem 0.55rem;
      border-radius: 999px;
      background: rgba(8,20,40,0.95);
      border: 1px solid rgba(120,180,255,0.7);
      color: #ecf6ff;
      display: flex;
      justify-content: space-between;
      font-size: 0.75rem;
      cursor: pointer;
      transition: 0.16s ease-out;
    }

    .op-archive-month:hover {
      background: rgba(118,182,255,0.35);
      border-color: rgba(160,220,255,1);
      transform: translateY(-2px);
    }

    .op-archive-month--empty {
      opacity: 0.4;
      border-style: dashed;
      cursor: default;
      transform: none !important;
    }