.section { margin: 0 auto; max-width: 76rem; padding: 0 1rem; } .wrap { position: relative; overflow: hidden; border-radius: 1.1rem; border: 1px solid var(--border); background: linear-gradient(180deg, color-mix(in oklab, var(--card), transparent 0%) 0%, color-mix(in oklab, var(--card), transparent 6%) 100%); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.08); } .wrap::before { content: ""; position: absolute; inset: 0; background: radial-gradient(1200px 420px at 20% -10%, color-mix(in oklab, var(--accent), transparent 75%) 0%, transparent 60%), radial-gradient(900px 380px at 95% 10%, color-mix(in oklab, #7c3aed, transparent 78%) 0%, transparent 55%); pointer-events: none; opacity: 0.65; } .header { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.1rem 0.7rem; } .title { display: flex; align-items: center; gap: 0.6rem; font-weight: 800; letter-spacing: -0.02em; font-size: 1.05rem; } .subtitle { margin-top: 0.25rem; color: var(--muted-foreground); font-size: 0.88rem; } .badgeRow { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; } .gridWrap { padding: 0.55rem 1.1rem 1.05rem; } .badge { border: 1px solid var(--border); background: color-mix(in oklab, var(--card), transparent 25%); color: var(--foreground); padding: 0.3rem 0.55rem; border-radius: 999px; font-size: 0.8rem; line-height: 1; } .vipChip { border: 1px solid color-mix(in oklab, var(--accent), transparent 55%); background: color-mix(in oklab, var(--accent), transparent 85%); color: var(--foreground); } .guestChip { border: 1px solid color-mix(in oklab, var(--muted-foreground), transparent 55%); background: color-mix(in oklab, var(--card), transparent 40%); color: var(--muted-foreground); } .tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.65rem; } .tag { font-size: 0.72rem; border: 1px solid var(--border); color: var(--muted-foreground); border-radius: 999px; padding: 0.2rem 0.45rem; } .toggleBtn { border: 1px solid var(--border); background: color-mix(in oklab, var(--card), transparent 10%); color: var(--foreground); border-radius: 999px; padding: 0.35rem 0.6rem; font-size: 0.82rem; line-height: 1; display: inline-flex; align-items: center; gap: 0.4rem; transition: border-color 160ms ease, background 160ms ease, transform 160ms ease; } .toggleBtn:hover { border-color: color-mix(in oklab, var(--accent), transparent 55%); background: color-mix(in oklab, var(--accent), transparent 88%); } .toggleBtn:active { transform: scale(0.98); } .chev { transition: transform 160ms ease; } .chevOpen { transform: rotate(180deg); } .panel { border-top: 1px solid var(--border); padding: 0.55rem 0.55rem 0.65rem; width: 100%; align-self: stretch; text-align: center; } .panelHint { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.4rem; } .hintText { font-size: 0.8rem; color: var(--muted-foreground); } .links { display: grid; gap: 0.45rem; } .linkRow { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; border: 1px solid var(--border); border-radius: 0.9rem; padding: 0.45rem 0.6rem; background: color-mix(in oklab, var(--card), transparent 0%); } .provider { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 6rem; font-weight: 650; } .providerDot { width: 0.55rem; height: 0.55rem; border-radius: 999px; } .dotBaidu { background: #3b82f6; } .dotQuark { background: #f59e0b; } .linkTextWrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.79rem; color: var(--foreground); opacity: 0.95; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mutedMono { color: var(--muted-foreground); opacity: 0.95; } .actions { display: inline-flex; align-items: center; gap: 0.5rem; } .pillBtn { border: 1px solid var(--border); background: color-mix(in oklab, var(--card), transparent 10%); color: var(--foreground); border-radius: 999px; padding: 0.35rem 0.55rem; font-size: 0.79rem; line-height: 1; display: inline-flex; align-items: center; gap: 0.35rem; transition: border-color 160ms ease, background 160ms ease, transform 160ms ease; } .pillBtn:hover { border-color: color-mix(in oklab, var(--accent), transparent 55%); background: color-mix(in oklab, var(--accent), transparent 88%); } .pillBtn:active { transform: scale(0.98); } .pillBtnDisabled, .pillBtnDisabled:hover, .pillBtnDisabled:active { opacity: 0.45; cursor: not-allowed; transform: none; border-color: var(--border); background: color-mix(in oklab, var(--card), transparent 25%); } .guestCta { margin-top: 0.7rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid color-mix(in oklab, var(--accent), transparent 58%); background: color-mix(in oklab, var(--accent), transparent 90%); color: var(--accent); border-radius: 999px; padding: 0.35rem 0.6rem; font-size: 0.82rem; } .guestBlur { filter: blur(6px); opacity: 0.6; user-select: none; pointer-events: none; } .footerNote { position: relative; border-top: 1px solid var(--border); padding: 0.75rem 1.1rem 1.05rem; color: var(--muted-foreground); font-size: 0.85rem; line-height: 1.55; } .iconRow { display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding-top: 0.25rem; } .netdiskIconBtn { appearance: none; border: 1px solid var(--border); background: color-mix(in oklab, var(--card), transparent 0%); color: var(--foreground); width: 46px; height: 38px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, opacity 160ms ease; cursor: pointer; } .netdiskIconBtn:hover { border-color: color-mix(in oklab, var(--accent), transparent 55%); background: color-mix(in oklab, var(--accent), transparent 92%); transform: translateY(-1px); } .netdiskIconBtn:active { transform: translateY(0px) scale(0.98); } .netdiskIconBtnDisabled, .netdiskIconBtnDisabled:hover, .netdiskIconBtnDisabled:active { opacity: 0.45; cursor: not-allowed; transform: none; border-color: var(--border); background: color-mix(in oklab, var(--card), transparent 25%); } .iconColorBaidu { color: #3b82f6; } .iconColorQuark { color: #f59e0b; } .modalOverlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 50; } .modal { width: min(560px, 100%); background: var(--card); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 18px 60px rgba(0, 0, 0, 0.25); overflow: hidden; } .modalHeader { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 1rem 0.7rem; border-bottom: 1px solid var(--border); } .modalTitleRow { display: flex; align-items: center; gap: 0.7rem; min-width: 0; } .modalIcon { color: var(--accent); display: inline-flex; align-items: center; justify-content: center; } .modalTitle { font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .modalCloseBtn { border: 1px solid var(--border); background: color-mix(in oklab, var(--card), transparent 0%); width: 36px; height: 34px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--foreground); } .modalCloseBtn:hover { border-color: color-mix(in oklab, var(--accent), transparent 55%); background: color-mix(in oklab, var(--accent), transparent 92%); } .modalBody { padding: 0.9rem 1rem 1rem; } .modalPre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.86rem; color: var(--foreground); background: color-mix(in oklab, var(--card), transparent 0%); border: 1px solid var(--border); border-radius: 14px; padding: 0.75rem 0.85rem; white-space: pre-wrap; word-break: break-word; line-height: 1.55; } .modalRow { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; padding: 0.55rem 0; border-bottom: 1px solid color-mix(in oklab, var(--border), transparent 0%); } .modalRow:last-child { border-bottom: none; } .modalLabel { flex: 0 0 auto; width: 72px; color: var(--muted-foreground); font-size: 0.86rem; padding-top: 0.1rem; } .modalMono { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.86rem; color: var(--foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .modalActions { display: flex; align-items: center; justify-content: flex-end; gap: 0.65rem; padding: 0.9rem 1rem 1rem; border-top: 1px solid var(--border); } .modalCopyBtn { border: 1px solid var(--border); background: color-mix(in oklab, var(--card), transparent 0%); color: var(--foreground); border-radius: 14px; padding: 0.55rem 0.85rem; font-size: 0.9rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; } .modalCopyBtn:hover { border-color: color-mix(in oklab, var(--accent), transparent 55%); } .modalOpenBtn { border: 1px solid var(--border); background: var(--accent); color: var(--accent-foreground); border-radius: 14px; padding: 0.55rem 0.85rem; font-size: 0.9rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; text-decoration: none; } .modalOpenBtn:hover { opacity: 0.95; } .modalOpenBtnDisabled, .modalOpenBtnDisabled:hover { border: 1px solid var(--border); background: color-mix(in oklab, var(--card), transparent 15%); color: var(--muted-foreground); cursor: not-allowed; opacity: 0.65; text-decoration: none; }