/* ==========================================================================
   摸鱼冲浪舱 · 七站热搜（/moyu/surf）
   独立设计系统：深海青 + 珊瑚红，深浅双主题，与摸鱼乐园的橙色体系错开。
   注意：所有浮层（.ms-toast 等）必须与 .ms-page 一起写入变量作用域，
        否则浮层取不到 --ms-* 变量会变成透明。
   ========================================================================== */

.ms-page,
.ms-toast {
    --ms-accent: #0e7490;
    --ms-accent-soft: #ecfeff;
    --ms-hot: #f43f5e;
    --ms-ink: #0f172a;
    --ms-ink-2: #475569;
    --ms-muted: #7c8b9a;
    --ms-surface: #ffffff;
    --ms-surface-2: #f5fafb;
    --ms-line: #e2ecf0;
    --ms-shadow: 0 10px 30px rgba(15, 23, 42, .07);
    --ms-shadow-hover: 0 16px 40px rgba(15, 23, 42, .12);
    --ms-hero-1: #052432;
    --ms-hero-2: #0a4c5f;
    --ms-hero-3: #0e7490;
    --ms-hero-ink: #f2fbfe;
    --ms-radius: 16px;
}

:root[data-theme="dark"] .ms-page,
:root[data-theme="dark"] .ms-toast {
    --ms-accent: #22d3ee;
    --ms-accent-soft: rgba(34, 211, 238, .12);
    --ms-hot: #fb7185;
    --ms-ink: #e6f3f7;
    --ms-ink-2: #a9c2cc;
    --ms-muted: #7e9aa6;
    --ms-surface: #0e1a22;
    --ms-surface-2: #0a151c;
    --ms-line: #1c2f3b;
    --ms-shadow: 0 10px 30px rgba(0, 0, 0, .45);
    --ms-shadow-hover: 0 16px 40px rgba(0, 0, 0, .55);
    --ms-hero-1: #03131b;
    --ms-hero-2: #062733;
    --ms-hero-3: #0a4556;
    --ms-hero-ink: #eafbff;
}

/* ---------- 外壳 ---------- */
.ms-page {
    padding-bottom: 56px;
    color: var(--ms-ink);
}

.ms-page .container {
    max-width: 1180px;
}

.ms-crumb {
    padding: 14px 0 0;
}

.ms-crumb-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ms-muted);
    flex-wrap: wrap;
}

.ms-crumb-inner a {
    color: var(--ms-muted);
    text-decoration: none;
}

.ms-crumb-inner a:hover {
    color: var(--ms-accent);
}

.ms-crumb-inner .sep {
    opacity: .55;
}

.ms-crumb-inner .current {
    color: var(--ms-ink-2);
    font-weight: 600;
}

/* ---------- Hero ---------- */
.ms-hero {
    position: relative;
    margin: 16px 0 0;
    padding: 40px 0 26px;
    overflow: hidden;
    border-radius: 22px;
    background:
        radial-gradient(900px 320px at 88% -20%, rgba(34, 211, 238, .30), transparent 62%),
        radial-gradient(620px 300px at 6% 110%, rgba(244, 63, 94, .22), transparent 65%),
        linear-gradient(135deg, var(--ms-hero-1) 0%, var(--ms-hero-2) 58%, var(--ms-hero-3) 100%);
    color: var(--ms-hero-ink);
    box-shadow: 0 18px 46px rgba(4, 36, 50, .28);
}

.ms-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000 35%, transparent 100%);
    mask-image: radial-gradient(80% 70% at 50% 40%, #000 35%, transparent 100%);
    pointer-events: none;
}

.ms-hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 24px;
    align-items: center;
}

.ms-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 13px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .2px;
    color: #d5fbff;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
}

.ms-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #35f0c0;
    animation: ms-pulse 1.8s ease-out infinite;
}

@keyframes ms-pulse {
    0% { box-shadow: 0 0 0 0 rgba(53, 240, 192, .65); }
    70% { box-shadow: 0 0 0 9px rgba(53, 240, 192, 0); }
    100% { box-shadow: 0 0 0 0 rgba(53, 240, 192, 0); }
}

.ms-hero h1 {
    margin: 14px 0 10px;
    font-size: clamp(26px, 3.6vw, 38px);
    line-height: 1.16;
    font-weight: 800;
    letter-spacing: -.5px;
    color: #ffffff;
}

.ms-hero-lead {
    margin: 0;
    max-width: 620px;
    font-size: 14.5px;
    line-height: 1.75;
    color: rgba(255, 255, 255, .80);
}

.ms-hero-lead b {
    color: #ffffff;
}

.ms-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.ms-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 16px;
    border-radius: 11px;
    border: 1px solid rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .10);
    color: #f2fdff;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}

.ms-btn:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, .18);
}

.ms-btn-primary {
    background: linear-gradient(135deg, #22d3ee, #0ea5e9);
    border-color: transparent;
    color: #04222b;
    box-shadow: 0 8px 20px rgba(34, 211, 238, .32);
}

.ms-btn-primary:hover {
    background: linear-gradient(135deg, #4edff5, #22b8f0);
    box-shadow: 0 12px 26px rgba(34, 211, 238, .42);
}

.ms-btn-ghost {
    border-style: dashed;
}

.ms-hero-tip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 16px 0 0;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    color: #d8fbff;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .18);
}

.ms-hero-tip kbd {
    padding: 1px 7px;
    border-radius: 5px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    color: #04222b;
    background: linear-gradient(180deg, #f4feff, #c9f4fb);
}

.ms-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .68);
}

.ms-hero-meta b {
    color: #ffffff;
    font-variant-numeric: tabular-nums;
}

.ms-dot {
    opacity: .45;
}

/* 雷达舱窗 */
.ms-hero-visual {
    display: grid;
    place-items: center;
}

.ms-radar {
    position: relative;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    border: 1px solid rgba(140, 248, 255, .35);
    background: radial-gradient(circle at 50% 50%, rgba(10, 76, 95, .85), rgba(4, 24, 33, .55));
    box-shadow: inset 0 0 46px rgba(34, 211, 238, .28), 0 0 32px rgba(34, 211, 238, .14);
    overflow: hidden;
}

.ms-radar-ring {
    position: absolute;
    border: 1px solid rgba(140, 248, 255, .20);
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.ms-radar-ring.r1 { width: 72%; height: 72%; }
.ms-radar-ring.r2 { width: 44%; height: 44%; }
.ms-radar-ring.r3 { width: 16%; height: 16%; background: rgba(53, 240, 192, .55); border-color: transparent; }

.ms-radar-sweep {
    position: absolute;
    inset: 0;
    background: conic-gradient(from 0deg, rgba(53, 240, 192, .55), rgba(53, 240, 192, .05) 42%, transparent 62%);
    animation: ms-sweep 3.6s linear infinite;
}

@keyframes ms-sweep {
    to { transform: rotate(360deg); }
}

.ms-radar-label {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    font-size: 10.5px;
    letter-spacing: 3px;
    font-weight: 700;
    color: #8ff6ff;
    opacity: .85;
}

/* 热度均衡条 */
.ms-wave {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 26px;
    margin: 26px auto 0;
    padding: 0 24px;
    max-width: 1120px;
    opacity: .75;
}

.ms-wave i {
    flex: 1;
    height: 30%;
    border-radius: 3px;
    background: linear-gradient(180deg, rgba(53, 240, 192, .95), rgba(34, 211, 238, .28));
    animation: ms-eq 2.4s ease-in-out infinite;
}

.ms-wave i:nth-child(3n) { animation-duration: 1.7s; height: 62%; }
.ms-wave i:nth-child(4n) { animation-duration: 2.9s; height: 44%; }
.ms-wave i:nth-child(5n) { animation-duration: 2.1s; height: 82%; }
.ms-wave i:nth-child(7n) { animation-duration: 3.3s; height: 22%; }

@keyframes ms-eq {
    0%, 100% { transform: scaleY(.55); opacity: .55; }
    50% { transform: scaleY(1); opacity: 1; }
}

/* ---------- 主推区 ---------- */
.ms-focus {
    margin-top: 26px;
}

.ms-focus-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: 18px;
}

.ms-focus-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 20px 22px 16px;
    border-radius: var(--ms-radius);
    background: var(--ms-surface);
    border: 1px solid var(--ms-line);
    box-shadow: var(--ms-shadow);
    overflow: hidden;
}

.ms-focus-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, #f43f5e, #fb7185, #22d3ee);
}

.ms-focus-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.ms-focus-head b {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .2px;
}

.ms-focus-head span {
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #f43f5e, #e11d48);
}

.ms-focus-item {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 13px 4px;
    border-bottom: 1px dashed var(--ms-line);
    text-decoration: none;
    color: var(--ms-ink);
    transition: padding-left .16s ease, color .16s ease;
}

.ms-focus-item:last-of-type {
    border-bottom: 0;
}

.ms-focus-item:hover {
    padding-left: 8px;
    color: var(--ms-hot);
}

.ms-focus-no {
    flex: none;
    width: 22px;
    font-size: 15px;
    font-weight: 800;
    font-style: italic;
    color: var(--ms-hot);
    font-variant-numeric: tabular-nums;
}

.ms-focus-title {
    flex: 1;
    min-width: 0;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ms-focus-hot {
    flex: none;
    font-size: 12px;
    color: var(--ms-muted);
    font-variant-numeric: tabular-nums;
}

.ms-focus-foot {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--ms-line);
    text-align: right;
}

.ms-focus-foot a {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ms-accent);
    text-decoration: none;
}

.ms-focus-foot a:hover {
    text-decoration: underline;
}

/* 七站头条 */
.ms-headline {
    padding: 18px 20px;
    border-radius: var(--ms-radius);
    background: var(--ms-surface);
    border: 1px solid var(--ms-line);
    box-shadow: var(--ms-shadow);
}

.ms-headline h2 {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .2px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ms-headline h2 small {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ms-muted);
}

.ms-headline ul {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
}

.ms-headline li {
    border-top: 1px dashed var(--ms-line);
}

.ms-headline li:first-child {
    border-top: 0;
}

.ms-headline a {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 0;
    text-decoration: none;
    color: var(--ms-ink);
}

.ms-headline a:hover .ms-hl-title {
    color: var(--ms-accent);
}

.ms-hl-site {
    flex: none;
    width: 68px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ms-ink-2);
}

.ms-hl-title {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    line-height: 1.45;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color .16s ease;
}

/* ---------- 工具栏 ---------- */
.ms-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 30px 0 16px;
}

.ms-search {
    position: relative;
    flex: 1 1 260px;
    max-width: 360px;
}

.ms-search input {
    width: 100%;
    height: 40px;
    padding: 0 14px 0 38px;
    border-radius: 11px;
    border: 1px solid var(--ms-line);
    background: var(--ms-surface);
    color: var(--ms-ink);
    font-size: 13.5px;
    outline: none;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.ms-search input:focus {
    border-color: var(--ms-accent);
    box-shadow: 0 0 0 3px var(--ms-accent-soft);
}

.ms-search::before {
    content: "🔎";
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    opacity: .75;
    pointer-events: none;
}

.ms-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.ms-chip {
    --ms-chip: var(--ms-accent);
    height: 32px;
    padding: 0 13px;
    border-radius: 999px;
    border: 1px solid var(--ms-line);
    background: var(--ms-surface);
    color: var(--ms-ink-2);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all .16s ease;
}

.ms-chip:hover {
    border-color: var(--ms-chip);
    color: var(--ms-chip);
}

.ms-chip.is-on {
    background: var(--ms-chip);
    border-color: var(--ms-chip);
    color: #fff;
    box-shadow: 0 6px 14px color-mix(in srgb, var(--ms-chip) 32%, transparent);
}

/* ---------- 榜单网格 ---------- */
.ms-boards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

.ms-board {
    --ms-brand: var(--ms-accent);
    display: flex;
    flex-direction: column;
    padding: 16px 16px 12px;
    border-radius: var(--ms-radius);
    background: var(--ms-surface);
    border: 1px solid var(--ms-line);
    box-shadow: var(--ms-shadow);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.ms-board:hover {
    transform: translateY(-3px);
    box-shadow: var(--ms-shadow-hover);
    border-color: color-mix(in srgb, var(--ms-brand) 34%, var(--ms-line));
}

.ms-board[data-board="weibo"],
.ms-board[data-board="douyin"] {
    grid-column: span 2;
}

/* 站点筛选：只留一个站时卡片占满整行、条目双栏并默认全展开，避免右侧大片留白 */
.ms-boards.is-single .ms-board {
    grid-column: 1 / -1;
}

.ms-boards.is-single .ms-more {
    display: none;
}

.ms-boards.is-single .ms-list {
    columns: 2;
    column-gap: 26px;
}

.ms-boards.is-single .ms-item {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
}

/* 搜索态：匹配项已全部展开，折叠按钮没有意义，直接收起 */
.ms-board.is-searching .ms-more {
    display: none;
}

/* 搜索无结果时的占位提示 */
.ms-board.is-no-match .ms-list {
    min-height: 52px;
}

.ms-board.is-no-match .ms-list::after {
    content: "没有匹配的条目，换个关键词试试";
    display: block;
    padding: 16px 4px;
    font-size: 12px;
    color: var(--ms-muted);
}

.ms-board-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 11px;
    border-bottom: 1px solid var(--ms-line);
}

.ms-board-logo {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 17px;
    background: color-mix(in srgb, var(--ms-brand) 14%, var(--ms-surface));
    border: 1px solid color-mix(in srgb, var(--ms-brand) 26%, transparent);
}

.ms-board-name {
    flex: 1;
    min-width: 0;
}

.ms-board-head b {
    display: block;
    font-size: 14.5px;
    font-weight: 800;
    color: var(--ms-ink);
}

.ms-board-head small {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--ms-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ms-board-count {
    flex: none;
    font-size: 11px;
    font-weight: 700;
    color: var(--ms-brand);
    padding: 3px 8px;
    border-radius: 7px;
    background: color-mix(in srgb, var(--ms-brand) 12%, transparent);
    font-variant-numeric: tabular-nums;
}

.ms-list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    flex: 1;
}

.ms-item.is-hidden,
.ms-item.is-filtered {
    display: none;
}

.ms-item-link {
    display: flex;
    align-items: baseline;
    gap: 9px;
    padding: 8px 2px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--ms-ink);
    transition: background .14s ease, padding-left .14s ease;
}

.ms-item-link:hover {
    background: color-mix(in srgb, var(--ms-brand) 8%, transparent);
    padding-left: 6px;
}

.ms-item-link:hover .ms-item-title {
    color: var(--ms-brand);
}

.ms-rank {
    flex: none;
    width: 19px;
    height: 19px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 800;
    color: var(--ms-muted);
    background: var(--ms-surface-2);
    font-variant-numeric: tabular-nums;
    transform: translateY(2px);
}

.ms-rank.is-top {
    color: #fff;
    background: var(--ms-brand);
    box-shadow: 0 3px 8px color-mix(in srgb, var(--ms-brand) 36%, transparent);
}

.ms-item-title {
    flex: 1;
    min-width: 0;
    font-size: 13.5px;
    line-height: 1.5;
    transition: color .14s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ms-item-side {
    flex: none;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--ms-muted);
    font-variant-numeric: tabular-nums;
}

.ms-item-side em {
    font-style: normal;
    color: var(--ms-hot);
    font-weight: 700;
}

.ms-tag {
    font-style: normal;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 700;
    color: #fff;
    background: #f43f5e;
}

.ms-meta {
    font-style: normal;
    opacity: .85;
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ms-more {
    margin-top: 8px;
    height: 34px;
    border-radius: 9px;
    border: 1px dashed var(--ms-line);
    background: transparent;
    color: var(--ms-ink-2);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all .16s ease;
}

.ms-more:hover {
    border-color: var(--ms-brand);
    color: var(--ms-brand);
    background: color-mix(in srgb, var(--ms-brand) 6%, transparent);
}

.ms-empty {
    padding: 22px 4px;
    text-align: center;
    font-size: 12.5px;
    color: var(--ms-muted);
    line-height: 1.7;
}

.ms-board.is-filtered-out {
    display: none;
}

/* ---------- 底部区块 ---------- */
.ms-bottom {
    margin-top: 34px;
}

/* 数据口径 */
.ms-spec {
    margin-top: 0;
    padding: 20px 22px;
    border-radius: var(--ms-radius);
    background: var(--ms-surface);
    border: 1px solid var(--ms-line);
    box-shadow: var(--ms-shadow);
}

.ms-spec-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ms-line);
}

.ms-spec-head h2 {
    margin: 0;
    font-size: 15.5px;
    font-weight: 800;
}

.ms-spec-head span {
    font-size: 12px;
    color: var(--ms-muted);
}

.ms-spec-table {
    margin: 0;
}

.ms-spec-table > div {
    display: flex;
    gap: 18px;
    padding: 11px 0;
    border-bottom: 1px dashed var(--ms-line);
}

.ms-spec-table > div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.ms-spec-table dt {
    flex: none;
    width: 84px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ms-ink);
    line-height: 1.8;
}

.ms-spec-table dd {
    flex: 1;
    margin: 0;
    font-size: 12.5px;
    line-height: 1.8;
    color: var(--ms-ink-2);
}

.ms-spec-table dd b {
    color: var(--ms-ink);
}

/* Tabs */
.ms-tabs {
    margin-top: 18px;
    border-radius: var(--ms-radius);
    background: var(--ms-surface);
    border: 1px solid var(--ms-line);
    box-shadow: var(--ms-shadow);
    overflow: hidden;
}

.ms-tabbar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 14px 0;
    border-bottom: 1px solid var(--ms-line);
    background: var(--ms-surface-2);
}

.ms-tab {
    position: relative;
    height: 42px;
    padding: 0 14px;
    border: 0;
    background: transparent;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ms-ink-2);
    cursor: pointer;
    transition: color .16s ease;
}

.ms-tab::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -1px;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: var(--ms-accent);
    transform: scaleX(0);
    transition: transform .18s ease;
}

.ms-tab:hover {
    color: var(--ms-accent);
}

.ms-tab.is-on {
    color: var(--ms-accent);
    font-weight: 700;
}

.ms-tab.is-on::after {
    transform: scaleX(1);
}

.ms-tabpanel {
    display: none;
    padding: 20px 22px 22px;
}

.ms-tabpanel.is-on {
    display: block;
}

.ms-tabpanel h3 {
    margin: 18px 0 6px;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--ms-ink);
}

.ms-tabpanel h3:first-child {
    margin-top: 0;
}

.ms-tabpanel p {
    margin: 0;
    font-size: 13px;
    line-height: 1.9;
    color: var(--ms-ink-2);
}

.ms-tabpanel a {
    color: var(--ms-accent);
    font-weight: 600;
    text-decoration: none;
}

.ms-tabpanel a:hover {
    text-decoration: underline;
}

.ms-tabpanel code {
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 12px;
    background: var(--ms-accent-soft);
    color: var(--ms-accent);
}

.ms-tabpanel kbd {
    padding: 1px 6px;
    border-radius: 5px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    color: var(--ms-ink);
    background: var(--ms-surface-2);
    border: 1px solid var(--ms-line);
}

/* 相关工具 */
.ms-rel {
    margin-top: 18px;
    padding: 20px 22px;
    border-radius: var(--ms-radius);
    background: var(--ms-surface);
    border: 1px solid var(--ms-line);
    box-shadow: var(--ms-shadow);
}

.ms-rel h2 {
    margin: 0 0 14px;
    font-size: 15.5px;
    font-weight: 800;
}

.ms-rel-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.ms-rel-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--ms-ink);
    background: var(--ms-surface-2);
    border: 1px solid var(--ms-line);
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.ms-rel-card:hover {
    transform: translateY(-3px);
    border-color: var(--ms-accent);
    box-shadow: 0 8px 20px rgba(15, 23, 42, .10);
}

.ms-rel-icon {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 17px;
    background: color-mix(in srgb, var(--ms-accent) 12%, transparent);
}

.ms-rel-body {
    min-width: 0;
}

.ms-rel-body b {
    display: block;
    font-size: 13px;
    font-weight: 700;
}

.ms-rel-body small {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--ms-muted);
}

.ms-bottom-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.ms-bottom-links a {
    padding: 7px 13px;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    color: var(--ms-accent);
    background: var(--ms-accent-soft);
    border: 1px solid color-mix(in srgb, var(--ms-accent) 22%, transparent);
}

.ms-bottom-links a:hover {
    background: color-mix(in srgb, var(--ms-accent) 18%, transparent);
}

/* ---------- 浮层提示 ---------- */
.ms-toast {
    position: fixed;
    left: 50%;
    bottom: 34px;
    z-index: 9999;
    transform: translate(-50%, 16px);
    padding: 10px 18px;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 600;
    color: #f2fdff;
    background: rgba(8, 32, 42, .95);
    border: 1px solid rgba(34, 211, 238, .38);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .32);
    opacity: 0;
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
}

.ms-toast[hidden] {
    display: none !important;
}

.ms-toast.is-show {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* ---------- 响应式 ---------- */
@media (max-width: 1080px) {
    .ms-boards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* 两列网格下只让微博跨列：7 张卡正好填满 4 行，不会留下空格 */
    .ms-board[data-board="weibo"] {
        grid-column: span 2;
    }

    .ms-board[data-board="douyin"] {
        grid-column: span 1;
    }

    .ms-boards.is-single .ms-list {
        columns: 1;
    }
}

@media (max-width: 900px) {
    .ms-hero {
        padding: 30px 0 20px;
        border-radius: 18px;
    }

    .ms-hero-inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .ms-hero-visual,
    .ms-wave {
        display: none;
    }

    .ms-focus-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ms-rel-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .ms-boards {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .ms-board[data-board="weibo"] {
        grid-column: span 1;
    }

    .ms-hero-lead {
        font-size: 13.5px;
    }

    .ms-hero-actions .ms-btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    .ms-toolbar {
        margin-top: 22px;
    }

    .ms-search {
        max-width: none;
    }

    .ms-board {
        padding: 14px 13px 10px;
    }

    /* 小屏优先保住标题宽度：热度留着，阅读量/亮回复这类次要信息收起 */
    .ms-focus-hot,
    .ms-meta {
        display: none;
    }

    .ms-item-side em {
        font-size: 10.5px;
    }

    .ms-spec-table > div {
        gap: 12px;
    }

    .ms-spec-table dt {
        width: 68px;
    }

    .ms-rel-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ms-tabpanel,
    .ms-spec,
    .ms-rel {
        padding: 16px 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ms-radar-sweep,
    .ms-wave i,
    .ms-badge-dot {
        animation: none;
    }
}