/* ===== community-only styles ===== */
    .opc-banner .page-banner-title { max-width: 760px; }

    /* top tabs */
    .opc-toolbar {
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      position: sticky;
      top: 64px;
      z-index: 30;
    }
    .opc-toolbar .container {
      display: flex;
      align-items: center;
      gap: 16px;
      padding-top: 14px;
      padding-bottom: 14px;
      flex-wrap: wrap;
    }
    .opc-tabs {
      display: flex;
      gap: 4px;
      flex-wrap: wrap;
    }
    .opc-toolbar-actions {
      margin-left: auto;
      display: flex;
      gap: 10px;
      align-items: center;
    }
    .opc-tab {
      padding: 8px 16px;
      border-radius: var(--r-pill);
      font-size: 13.5px;
      font-weight: 500;
      color: var(--muted);
      transition: all 0.15s ease;
      border: 1px solid transparent;
      background: transparent;
    }
    .opc-tab:hover { color: var(--fg); background: var(--surface-2); }
    .opc-tab.active {
      color: var(--fg);
      background: var(--surface-2);
      border-color: var(--border);
    }
    .opc-toolbar .publish-btn {
      padding: 7px 16px;
      border-radius: var(--r-pill);
      font-size: 13px;
      font-weight: 500;
      color: #fff;
      border: 1px solid #f0b07d;
      background: #f28c28;
      transition: all 0.15s ease;
    }
    .opc-toolbar .publish-btn:hover {
      background: #e57d17;
    }

    /* sub filter */
    .opc-subbar {
      border-bottom: 1px solid var(--border);
      background: var(--surface);
    }
    .opc-subbar .container {
      display: flex;
      align-items: center;
      gap: 16px;
      padding-top: 12px;
      padding-bottom: 12px;
      flex-wrap: wrap;
    }
    .opc-subtabs {
      display: flex;
      gap: 18px;
      flex-wrap: wrap;
    }
    .opc-subtab {
      font-size: 13px;
      color: var(--muted);
      padding: 6px 0;
      border-bottom: 2px solid transparent;
      transition: all 0.15s ease;
      background: transparent;
    }
    .opc-subtab:hover { color: var(--fg); }
    .opc-subtab.active {
      color: var(--accent);
      border-bottom-color: var(--accent);
    }
    .opc-subbar .search {
      width: 280px;
      max-width: 100%;
    }

    /* layout */
    .opc-page { padding: 40px 0 80px; }
    .opc-layout {
      display: grid;
      grid-template-columns: 1fr 320px;
      gap: 32px;
      align-items: start;
    }
    .opc-main { min-width: 0; }

    /* list head */
    .opc-list-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 20px;
      flex-wrap: wrap;
    }
    .opc-list-head h2 {
      font-size: 20px;
      font-weight: 600;
      letter-spacing: -0.01em;
      color: var(--fg);
      margin-bottom: 4px;
    }
    .opc-list-head .meta {
      font-size: 13px;
      color: var(--muted);
    }
    .opc-sort {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      color: var(--muted);
    }
    .opc-sort button {
      padding: 4px 10px;
      border-radius: var(--r-md);
      font-size: 13px;
      color: var(--muted);
      transition: all 0.15s ease;
    }
    .opc-sort button.active {
      background: var(--surface-2);
      color: var(--fg);
      font-weight: 500;
    }

    /* article cards */
    .opc-articles {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .opc-article {
      display: grid;
      grid-template-columns: 200px 1fr;
      gap: 20px;
      padding: 18px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      transition: all 0.2s ease;
      align-items: flex-start;
    }
    .opc-article:hover {
      border-color: var(--accent-line);
      box-shadow: var(--shadow-sm);
      transform: translateY(-1px);
    }
    .opc-thumb {
      aspect-ratio: 4/3;
      border-radius: var(--r-md);
      overflow: hidden;
      background: var(--surface-3);
      position: relative;
    }
    .opc-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.4s ease;
    }
    .opc-article:hover .opc-thumb img { transform: scale(1.04); }

    .opc-content { display: flex; flex-direction: column; min-width: 0; }
    .opc-cat-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 2px 9px;
      background: var(--accent-soft);
      color: var(--accent);
      border-radius: var(--r-pill);
      font-size: 11.5px;
      font-weight: 500;
      margin-bottom: 8px;
      letter-spacing: 0;
      align-self: flex-start;
    }
    .opc-title-link {
      font-family: var(--font-display);
      font-size: 17px;
      font-weight: 600;
      color: var(--fg);
      letter-spacing: -0.01em;
      line-height: 1.4;
      margin-bottom: 8px;
      display: block;
    }
    .opc-title-link:hover { color: var(--accent); }
    .opc-excerpt {
      font-size: 13.5px;
      color: var(--muted);
      line-height: 1.55;
      margin-bottom: 12px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .opc-tags-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 12px;
    }
    .opc-tags-row .tag {
      padding: 2px 8px;
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: var(--r-pill);
      font-size: 11px;
      color: var(--muted);
    }
    .opc-meta {
      display: flex;
      align-items: center;
      gap: 16px;
      font-size: 12.5px;
      color: var(--muted-2);
      margin-top: auto;
    }
    .opc-meta-item {
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }
    .opc-meta-author {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .opc-meta-author .avatar {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--accent), #6f3ce0);
      color: #fff;
      display: grid;
      place-items: center;
      font-size: 10px;
      font-weight: 600;
    }

    /* sidebar */
    .opc-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 138px; }
    .opc-side-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      padding: 22px 22px;
    }
    .opc-side-card h3 {
      font-size: 14.5px;
      font-weight: 600;
      color: var(--fg);
      margin-bottom: 14px;
      letter-spacing: -0.005em;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .opc-side-card h3 svg { color: var(--accent); }

    .opc-news-item {
      padding: 10px 0;
      border-bottom: 1px solid var(--border);
      display: block;
      transition: color 0.15s ease;
    }
    .opc-news-item:last-child { border-bottom: none; padding-bottom: 0; }
    .opc-news-item:first-child { padding-top: 0; }
    .opc-news-item:hover .opc-news-title { color: var(--accent); }
    .opc-news-title {
      font-size: 13.5px;
      color: var(--fg);
      line-height: 1.45;
      margin-bottom: 4px;
      transition: color 0.15s ease;
    }
    .opc-news-time {
      font-size: 11.5px;
      color: var(--muted-2);
    }

    .opc-cat-list { display: flex; flex-direction: column; gap: 4px; }
    .opc-cat-item {
      display: grid;
      grid-template-columns: 32px 1fr 14px;
      gap: 10px;
      align-items: center;
      padding: 10px 10px;
      border-radius: var(--r-md);
      transition: background 0.15s ease;
      cursor: pointer;
    }
    .opc-cat-item:hover { background: var(--surface-2); }
    .opc-cat-icon {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: var(--surface-2);
      color: var(--accent);
      display: grid;
      place-items: center;
    }
    .opc-cat-item .name {
      font-size: 13.5px;
      font-weight: 500;
      color: var(--fg);
    }
    .opc-cat-item .desc {
      font-size: 11.5px;
      color: var(--muted-2);
      display: block;
    }
    .opc-cat-item .arrow { color: var(--muted-2); }

    .opc-rec-item {
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding: 10px 0;
      border-bottom: 1px solid var(--border);
    }
    .opc-rec-item:last-child { border-bottom: none; padding-bottom: 0; }
    .opc-rec-item:first-child { padding-top: 0; }
    .opc-rec-title {
      font-size: 13.5px;
      color: var(--fg);
      line-height: 1.45;
    }
    .opc-rec-title:hover { color: var(--accent); }
    .opc-rec-meta {
      font-size: 11.5px;
      color: var(--muted-2);
      display: flex;
      align-items: center;
      gap: 6px;
    }

    /* community stats */
    .opc-stat-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    .opc-stat {
      padding: 14px 12px;
      background: var(--surface-2);
      border-radius: var(--r-md);
      text-align: center;
    }
    .opc-stat .value {
      font-family: var(--font-display);
      font-size: 22px;
      font-weight: 700;
      color: var(--accent);
      letter-spacing: -0.01em;
      line-height: 1.1;
      font-variant-numeric: tabular-nums;
    }
    .opc-stat .label {
      font-size: 11.5px;
      color: var(--muted);
      margin-top: 4px;
    }

    @media (max-width: 1100px) {
      .opc-layout { grid-template-columns: 1fr; }
      .opc-side { position: static; }
    }
    @media (max-width: 720px) {
      .opc-toolbar .container,
      .opc-subbar .container {
        gap: 12px;
      }
      .opc-toolbar-actions {
        margin-left: 0;
        width: 100%;
      }
      .opc-toolbar .publish-btn {
        flex: 1 1 auto;
        text-align: center;
      }
      .opc-subtabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
      }
      .opc-subtabs::-webkit-scrollbar { display: none; }
      .opc-subtab { white-space: nowrap; }
      .opc-subbar .search { width: 100%; }
      .opc-list-head {
        align-items: flex-start;
        gap: 12px;
      }
      .opc-article { grid-template-columns: 1fr; }
      .opc-thumb { aspect-ratio: 16/9; }
      .opc-meta {
        flex-wrap: wrap;
        gap: 10px;
      }
    }