/* 订阅费用计算器 — 作用域限制在 .sc-page；基础样式沿用站内工具页（在线音频工具）设计 */
.sc-page {
    --sc-primary: #2563eb;
    --sc-primary-dark: #1d4ed8;
    --sc-primary-soft: #eef3fe;
    --sc-ink: #0f1c2e;
    --sc-muted: #5a6b80;
    --sc-line: #e4eaf2;
    --sc-bg: #f6f8fc;
    --sc-panel: #fbfcfe;
    --sc-warn: #8a5a12;
    --sc-warn-soft: #fdf3e2;
    --sc-danger: #b42318;
    --sc-wave-bg: #f8fafd;
    --sc-wave-muted: #c3cedd;
    --sc-sel: rgba(37, 99, 235, .10);
    --sc-remove: rgba(220, 38, 38, .12);
    --sc-playhead: #f97316;
    --sc-radius-card: 16px;
    --sc-radius-ctl: 12px;
    --sc-shadow: 0 10px 26px rgba(19, 44, 79, .05);

    color: var(--sc-ink);
    font-family: Arial, "Microsoft YaHei", "PingFang SC", sans-serif;
    background: #fff;
    margin: 0;
    padding: 0 0 88px;
    overflow-x: hidden;
}
.sc-page * { box-sizing: border-box; }
.sc-page button,
.sc-page input,
.sc-page select { color: inherit; font: inherit; }
.sc-page button { -webkit-tap-highlight-color: transparent; }
.sc-page [hidden] { display: none !important; }

.sc-page .page-shell {
    width: min(1128px, calc(100% - 64px));
    margin: 0 auto;
    padding: 36px 0 0;
}

/* 面包屑 */
.sc-page .sc-breadcrumb { margin: 0 0 18px; font-size: 13px; color: var(--sc-muted); }
.sc-page .sc-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px 8px; list-style: none; margin: 0; padding: 0; align-items: center; }
.sc-page .sc-breadcrumb li { display: inline-flex; align-items: center; gap: 8px; }
.sc-page .sc-breadcrumb li:not(:last-child)::after { content: "/"; color: #b0b6bd; margin-left: 2px; }
.sc-page .sc-breadcrumb a { color: var(--sc-primary); text-decoration: none; }
.sc-page .sc-breadcrumb a:hover { text-decoration: underline; }
.sc-page .sc-breadcrumb [aria-current="page"] { color: var(--sc-ink); font-weight: 600; }

/* 页头 */
.sc-page .page-title { margin-bottom: 24px; }
.sc-page .page-title .eyebrow {
    display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .08em;
    color: var(--sc-primary); background: var(--sc-primary-soft);
    border-radius: 999px; padding: 4px 12px; margin-bottom: 12px;
}
.sc-page .page-title h1 { margin: 0 0 10px; font-size: 30px; line-height: 1.25; letter-spacing: -.01em; }
.sc-page .page-title p { margin: 0; color: var(--sc-muted); font-size: 15px; line-height: 1.7; max-width: 820px; }

/* 工具卡 */
.sc-page .sc-tool {
    border: 1px solid var(--sc-line);
    border-radius: var(--sc-radius-card);
    background: #fff;
    box-shadow: var(--sc-shadow);
    padding: 24px;
    margin-bottom: 18px;
}
.sc-page .sc-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.sc-page .sc-status { margin: 10px 0 0; font-size: 13px; color: var(--sc-muted); min-height: 0; }
.sc-page .sc-status:empty { display: none; }
.sc-page .sc-loading .sc-status::before {
    content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -1px;
    border: 2px solid var(--sc-line); border-top-color: var(--sc-primary); border-radius: 50%;
    animation: sc-spin .8s linear infinite;
}
@keyframes sc-spin { to { transform: rotate(360deg); } }

/* 按钮 */
.sc-page .sc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 15px; border: 1px solid var(--sc-line); border-radius: 999px;
    background: #fff; color: var(--sc-ink); font-size: 14px; font-weight: 600;
    cursor: pointer; text-decoration: none; line-height: 1.2; white-space: nowrap;
}
.sc-page .sc-btn:hover { border-color: #c9d6ea; background: #f8fbff; }
.sc-page .sc-btn:focus-visible { outline: 3px solid rgba(37, 99, 235, .25); outline-offset: 1px; }
.sc-page .sc-btn:disabled { opacity: .45; cursor: not-allowed; }
.sc-page .sc-btn-primary { background: var(--sc-primary); border-color: var(--sc-primary); color: #fff; }
.sc-page .sc-btn-primary:hover { background: var(--sc-primary-dark); border-color: var(--sc-primary-dark); }
.sc-page .sc-btn-sm { padding: 6px 11px; font-size: 12.5px; }

/* 标签页 */
.sc-page .sc-tabs {
    display: flex; gap: 6px; margin: 20px 0 0; padding: 4px;
    border: 1px solid var(--sc-line); border-radius: 999px; background: var(--sc-panel);
    overflow-x: auto; scrollbar-width: none;
}
.sc-page .sc-tabs::-webkit-scrollbar { display: none; }
.sc-page .sc-tab {
    flex: 1 0 auto; padding: 8px 14px; border: 0; border-radius: 999px; background: transparent;
    font-size: 13.5px; font-weight: 700; color: var(--sc-muted); cursor: pointer; white-space: nowrap;
}
.sc-page .sc-tab:hover { color: var(--sc-primary); }
.sc-page .sc-tab[aria-selected="true"] { background: var(--sc-primary); color: #fff; }
.sc-page .sc-tab:focus-visible { outline: 3px solid rgba(37, 99, 235, .25); outline-offset: 1px; }
.sc-page .sc-opt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sc-page .sc-opt > span,
.sc-page .sc-opt-label { font-size: 12.5px; font-weight: 700; color: var(--sc-muted); }
.sc-page .sc-opt select,
.sc-page .sc-opt input[type="text"] {
    width: 100%; padding: 8px 10px; border: 1px solid var(--sc-line);
    border-radius: 10px; background: #fff; font-size: 14px;
}
.sc-page .sc-opt input[type="text"] { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
.sc-page .sc-opt input.is-invalid { border-color: var(--sc-danger); box-shadow: 0 0 0 3px rgba(180, 35, 24, .12); }
.sc-page .sc-opt select:disabled,
.sc-page .sc-opt input:disabled { opacity: .5; }
.sc-page .sc-opt input[type="range"] { width: 100%; accent-color: var(--sc-primary); }
.sc-page .sc-val { font-weight: 700; color: var(--sc-ink); font-variant-numeric: tabular-nums; }
.sc-page .sc-radio { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; }
.sc-page .sc-radio label,
.sc-page .sc-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.sc-page .sc-radio input,
.sc-page .sc-check input { width: 16px; height: 16px; accent-color: var(--sc-primary); }
.sc-page .sc-panel-hint { margin: 12px 0 0; font-size: 12.5px; color: var(--sc-muted); line-height: 1.7; }
.sc-page .sc-panel-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.sc-page .sc-error {
    margin: 14px 0 0; padding: 12px 14px; border-radius: var(--sc-radius-ctl);
    border: 1px solid #f3d6cf; background: #fdf6f5; color: var(--sc-danger);
    font-size: 13.5px; line-height: 1.7;
}

/* 隐私 */
.sc-page .sc-privacy {
    margin: 18px 0 0; padding: 12px 14px; border: 1px solid var(--sc-line);
    border-radius: var(--sc-radius-ctl); background: var(--sc-panel); color: var(--sc-muted); font-size: 13px; line-height: 1.7;
}

/* 说明区 */
.sc-page .info-section { margin: 36px 0 0; }
.sc-page .info-section > h2 { margin: 0 0 16px; font-size: 21px; line-height: 1.4; }
.sc-page .info-content { color: var(--sc-ink); font-size: 15px; line-height: 1.8; }
.sc-page .info-content p { margin: 0 0 12px; }
.sc-page .info-content ol,
.sc-page .info-content ul { margin: 0 0 12px; padding-left: 22px; }
.sc-page .info-content li { margin-bottom: 8px; }
.sc-page .sc-table { width: 100%; border-collapse: collapse; margin: 0 0 12px; font-size: 14px; }
.sc-page .sc-table th,
.sc-page .sc-table td { padding: 10px 12px; border-bottom: 1px solid var(--sc-line); text-align: left; vertical-align: top; }
.sc-page .sc-table th { background: var(--sc-panel); font-weight: 700; }
.sc-page .sc-ok { color: #12804b; font-weight: 700; }
.sc-page .sc-no { color: var(--sc-warn); font-weight: 700; }

.sc-page .sc-faq-item { border: 1px solid var(--sc-line); border-radius: var(--sc-radius-ctl); margin-bottom: 10px; background: #fff; }
.sc-page .sc-faq-item > summary { padding: 13px 16px; cursor: pointer; font-weight: 700; font-size: 15px; }
.sc-page .sc-faq-item > summary::marker { color: var(--sc-primary); }
.sc-page .sc-faq-a { padding: 0 16px 14px; color: var(--sc-muted); font-size: 14px; line-height: 1.8; }
.sc-page .sc-faq-a p { margin: 0; }

.sc-page .sc-related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sc-page .sc-related a {
    display: block; padding: 16px; border: 1px solid var(--sc-line); border-radius: var(--sc-radius-ctl);
    background: #fff; text-decoration: none; color: inherit;
}
.sc-page .sc-related a:hover { border-color: #c9d6ea; background: #f8fbff; }
.sc-page .sc-related .rel-title { font-weight: 700; margin-bottom: 6px; }
.sc-page .sc-related .rel-desc { font-size: 13px; color: var(--sc-muted); line-height: 1.6; }

/* 答案优先摘要 + 关键信息 */
.sc-page .page-title .sc-answer { max-width: 860px; }
.sc-page .sc-facts-wrap > h2 { margin: 0 0 14px; font-size: 21px; line-height: 1.4; }
.sc-page .sc-facts {
    margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px;
    border: 1px solid var(--sc-line); border-radius: var(--sc-radius-card); background: #fff;
    padding: 6px 20px; box-shadow: var(--sc-shadow);
}
.sc-page .sc-fact { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 12px; padding: 11px 0; border-bottom: 1px dashed var(--sc-line); }
.sc-page .sc-fact:nth-last-child(-n+2) { border-bottom: 0; }
.sc-page .sc-fact dt { margin: 0; font-size: 13px; font-weight: 700; color: var(--sc-primary); line-height: 1.6; }
.sc-page .sc-fact dd { margin: 0; font-size: 14px; color: var(--sc-ink); line-height: 1.6; overflow-wrap: anywhere; }
@media (max-width: 767.98px) {
   .sc-page .sc-facts { grid-template-columns: 1fr; padding: 4px 16px; }
   .sc-page .sc-fact:nth-last-child(2) { border-bottom: 1px dashed var(--sc-line); }
}
@media (max-width: 575.98px) {
   .sc-page .sc-fact { grid-template-columns: 1fr; gap: 2px; }
   .sc-page .sc-facts-wrap > h2 { font-size: 19px; }
}

/* 使用步骤卡片（4 列桌面 / 2 列平板 / 1 列手机，断点对齐 Bootstrap 4 lg/sm） */
.sc-page .sc-howto-head { margin: 0 0 18px; }
.sc-page .sc-howto-head > h2 { margin: 0 0 6px; font-size: 21px; line-height: 1.4; }
.sc-page .sc-howto-lead { margin: 0; color: var(--sc-muted); font-size: 14.5px; line-height: 1.7; max-width: 820px; }
.sc-page .sc-steps {
    list-style: none; margin: 0; padding: 0; counter-reset: none;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px;
}
.sc-page .sc-step {
    position: relative; display: flex; flex-direction: column; margin: 0;
    border: 1px solid var(--sc-line); border-radius: var(--sc-radius-card);
    background: #fff; box-shadow: var(--sc-shadow); overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sc-page .sc-step:hover { transform: translateY(-3px); border-color: #c9d6ea; box-shadow: 0 16px 34px rgba(19, 44, 79, .10); }
.sc-page .sc-step:target { border-color: var(--sc-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, .18), var(--sc-shadow); }
.sc-page .sc-step-shot {
    position: relative; margin: 0; aspect-ratio: 16 / 10;
    background: var(--sc-wave-bg); border-bottom: 1px solid var(--sc-line); overflow: hidden;
}
.sc-page .sc-step-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sc-page .sc-step-num {
    position: absolute; top: 10px; left: 10px; width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--sc-primary); color: #fff;
    font-size: 15px; font-weight: 800; line-height: 1;
    box-shadow: 0 0 0 3px #fff, 0 6px 14px rgba(37, 99, 235, .35);
}
.sc-page .sc-step-body { padding: 14px 16px 16px; flex: 1 1 auto; }
.sc-page .sc-step-meta { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.sc-page .sc-step-icon {
    width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--sc-primary-soft); color: var(--sc-primary); font-size: 14px;
}
.sc-page .sc-step-kicker { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--sc-primary); }
.sc-page .sc-step-title { margin: 0 0 6px; font-size: 16px; font-weight: 700; line-height: 1.45; color: var(--sc-ink); }
.sc-page .sc-step-text { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--sc-muted); }
.sc-page .sc-howto-cta { margin: 18px 0 0; text-align: center; }
.sc-page .sc-howto-cta .sc-btn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.sc-page .sc-howto-cta .sc-btn:hover { color: #fff; text-decoration: none; }
@media (max-width: 991.98px) {
   .sc-page .sc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 575.98px) {
   .sc-page .sc-steps { grid-template-columns: 1fr; gap: 14px; }
   .sc-page .sc-howto-head > h2 { font-size: 19px; }
   .sc-page .sc-step-title { font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) {
   .sc-page .sc-step { transition: none; }
   .sc-page .sc-step:hover { transform: none; }
}

/* 响应式 */
@media (max-width: 900px) {
   .sc-page .page-shell { width: calc(100% - 40px); padding-top: 24px; }
   .sc-page .sc-related { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
   .sc-page { padding-bottom: 64px; }
   .sc-page .page-shell { width: calc(100% - 28px); padding-top: 18px; }
   .sc-page .page-title h1 { font-size: 24px; }
   .sc-page .page-title p { font-size: 14px; }
   .sc-page .sc-tool { padding: 16px; }
   .sc-page .sc-tabs { border-radius: 14px; flex-wrap: wrap; overflow: visible; }
   .sc-page .sc-tab { flex: 1 1 calc(33.333% - 6px); padding: 8px 6px; font-size: 13px; }
   .sc-page .info-section > h2 { font-size: 19px; }
}

/* 深色模式 */
html[data-theme="dark"] .sc-page {
    --sc-ink: #e8eef5;
    --sc-muted: #b7c3d0;
    --sc-line: rgba(255, 255, 255, 0.14);
    --sc-bg: #141c28;
    --sc-panel: #141c28;
    --sc-primary-soft: #1a2a44;
    --sc-wave-bg: #101722;
    --sc-wave-muted: #3a4658;
    --sc-sel: rgba(96, 165, 250, .14);
    --sc-warn-soft: #2b2312;
    --sc-warn: #f0c27a;
    background: transparent;
}
html[data-theme="dark"] .sc-page .sc-tool,
html[data-theme="dark"] .sc-page .sc-btn,
html[data-theme="dark"] .sc-page .sc-faq-item,
html[data-theme="dark"] .sc-page .sc-related a,
html[data-theme="dark"] .sc-page .sc-opt select,
html[data-theme="dark"] .sc-page .sc-opt input[type="text"] {
    background-color: #182231;
    color: #e8eef5;
    border-color: rgba(255, 255, 255, 0.14);
}
html[data-theme="dark"] .sc-page .sc-btn-primary,
html[data-theme="dark"] .sc-page .sc-tab[aria-selected="true"] { background: var(--sc-primary); border-color: var(--sc-primary); color: #fff; }
html[data-theme="dark"] .sc-page .sc-error { background: #2a1513; border-color: #5c2a24; color: #f3a99f; }
html[data-theme="dark"] .sc-page .sc-ok { color: #6ad49b; }
html[data-theme="dark"] .sc-page .sc-step { background: #182231; border-color: rgba(255, 255, 255, 0.14); box-shadow: none; }
html[data-theme="dark"] .sc-page .sc-step:hover { border-color: rgba(96, 165, 250, .45); box-shadow: 0 12px 28px rgba(0, 0, 0, .35); }
html[data-theme="dark"] .sc-page .sc-step-num { box-shadow: 0 0 0 3px #182231, 0 6px 14px rgba(0, 0, 0, .4); }
html[data-theme="dark"] .sc-page .sc-step-icon { color: #93c5fd; }
html[data-theme="dark"] .sc-page .sc-step-kicker { color: #93c5fd; }
html[data-theme="dark"] .sc-page .sc-facts { background: #182231; border-color: rgba(255, 255, 255, 0.14); box-shadow: none; }
html[data-theme="dark"] .sc-page .sc-fact dt { color: #93c5fd; }

/* ================= 通用补充 ================= */
.sc-page .sc-hint { margin: 8px 0 0; font-size: 12.5px; color: var(--sc-muted); line-height: 1.7; }
.sc-page .sc-btn-lg { padding: 12px 20px; font-size: 15px; }
.sc-page .sc-btn-icon { padding: 6px 9px; }
.sc-page .sc-btn-danger:hover:not(:disabled) { color: var(--sc-danger); border-color: #f3c7c0; background: #fdf6f5; }
.sc-page .sc-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sc-page .sc-nowrap { white-space: nowrap; }
.sc-page .sc-table code { font-size: 13px; white-space: nowrap; }
.sc-page .sc-table td.sc-ok,
.sc-page .sc-table td.sc-no { white-space: nowrap; }
.sc-page .sc-noscript { border-color: #f3d6cf; background: #fdf6f5; color: #b42318; }
.sc-page .sc-steps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sc-page .sc-cross { margin: 14px 0 0; font-size: 14px; }
.sc-page .sc-cross a, .sc-page .sc-card-tip a { color: var(--sc-primary); font-weight: 600; }
.sc-page .sc-status { overflow-wrap: anywhere; }

/* 移动端表格：尺寸表改为卡片行，避免文件名逐字换行 */
@media (max-width: 600px) {
  .sc-page .sc-table { font-size: 13px; }
  .sc-page .sc-table th,
  .sc-page .sc-table td { padding: 8px; }
  .sc-page .sc-size-table thead { display: none; }
  .sc-page .sc-size-table,
  .sc-page .sc-size-table tbody { display: block; }
  .sc-page .sc-size-table tr { display: grid; grid-template-columns: auto auto 1fr; gap: 4px 12px; align-items: baseline; padding: 10px 2px; border-bottom: 1px solid var(--sc-line); }
  .sc-page .sc-size-table td { padding: 0; border: 0; }
  .sc-page .sc-size-table td:nth-child(2) { font-weight: 600; }
  .sc-page .sc-size-table td:nth-child(3) { color: var(--sc-muted); }
  .sc-page .sc-size-table td:last-child { grid-column: 1 / -1; color: var(--sc-muted); line-height: 1.6; }
}

/* ================= 订阅费用计算器 ================= */
.sc-page .sc-opt input[type="number"],
.sc-page .sc-opt input[type="date"],
.sc-page .sc-search {
    width: 100%; padding: 8px 10px; border: 1px solid var(--sc-line);
    border-radius: 10px; background: #fff; font-size: 14px; min-width: 0;
    font-variant-numeric: tabular-nums;
}
.sc-page .sc-opt input[type="date"] { min-height: 38px; }
.sc-page .sc-search { margin: 10px 0 12px; }
.sc-page .sc-opt input:focus,
.sc-page .sc-opt select:focus,
.sc-page .sc-search:focus { outline: none; border-color: var(--sc-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, .14); }
.sc-page .sc-opt input.is-invalid,
.sc-page .sc-rate input.is-invalid,
.sc-page .sc-nas input.is-invalid { border-color: var(--sc-danger); box-shadow: 0 0 0 3px rgba(180, 35, 24, .12); }

/* 工具栏 */
.sc-page .sc-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.sc-page .sc-cur-pick { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 700; color: var(--sc-muted); }
.sc-page .sc-cur-pick select {
    padding: 8px 12px; border: 1px solid var(--sc-primary); border-radius: 10px; background: var(--sc-primary-soft);
    color: var(--sc-ink); font-weight: 700; font-size: 14px; max-width: 260px;
}
.sc-page .sc-toolbar-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-page .sc-file-btn { position: relative; overflow: hidden; }
.sc-page .sc-file-btn:focus-within { outline: 3px solid rgba(37, 99, 235, .25); outline-offset: 1px; }
.sc-page .sc-banner {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0 0; padding: 12px 14px;
    border: 1px solid #c9d8f5; border-radius: var(--sc-radius-ctl); background: var(--sc-primary-soft); font-size: 14px;
}
.sc-page .sc-banner > i { color: var(--sc-primary); }
.sc-page .sc-banner-actions { display: inline-flex; gap: 8px; margin-left: auto; }
.sc-page .sc-status { margin-top: 12px; }
.sc-page .sc-undo { margin-left: 4px; }

/* 卡片与布局 */
.sc-page .sc-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-top: 18px; align-items: start; }
.sc-page .sc-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.sc-page .sc-card { border: 1px solid var(--sc-line); border-radius: 14px; background: #fff; padding: 18px; min-width: 0; }
.sc-page .sc-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; }
.sc-page .sc-card-head h3 { margin: 0; font-size: 16px; line-height: 1.4; display: flex; align-items: center; gap: 8px; }
.sc-page .sc-card-head h3 > i { color: var(--sc-primary); }
.sc-page .sc-sub-head { margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--sc-line); }
.sc-page .sc-badge { display: inline-block; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--sc-primary-soft); color: var(--sc-primary); font-size: 12px; text-align: center; }
.sc-page .sc-tag { padding: 3px 10px; border-radius: 999px; background: var(--sc-warn-soft); color: var(--sc-warn); font-size: 12px; font-weight: 700; white-space: nowrap; }
.sc-page .sc-muted { margin: 6px 0 0; color: var(--sc-muted); font-size: 13px; line-height: 1.7; }
.sc-page .sc-dot { display: inline-block; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }

/* 汇率 */
.sc-page .sc-rates { margin-top: 14px; background: var(--sc-panel); }
.sc-page .sc-rates-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.sc-page .sc-rate > span { font-weight: 600; }
.sc-page .sc-rate input { width: 100%; padding: 7px 9px; border: 1px solid var(--sc-line); border-radius: 9px; background: #fff; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.sc-page .sc-rates-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sc-page #sc-rates-credit a { color: var(--sc-primary); }

/* 预置目录 */
.sc-page .sc-ref-note { margin: -4px 0 12px; padding: 9px 12px; border-radius: 10px; background: var(--sc-warn-soft); color: var(--sc-warn); font-size: 12.5px; line-height: 1.65; }
.sc-page .sc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-page .sc-chip {
    display: inline-flex; align-items: center; padding: 5px 11px; border: 1px solid var(--sc-line); border-radius: 999px;
    background: #fff; font-size: 12.5px; font-weight: 600; color: var(--sc-muted); cursor: pointer;
}
.sc-page .sc-chip:hover { border-color: #c9d6ea; color: var(--sc-ink); }
.sc-page .sc-chip.is-active { background: var(--sc-primary); border-color: var(--sc-primary); color: #fff; }
.sc-page .sc-chip:focus-visible,
.sc-page .sc-preset:focus-visible { outline: 3px solid rgba(37, 99, 235, .25); outline-offset: 1px; }
.sc-page .sc-preset-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: 372px; overflow-y: auto; padding: 2px; overscroll-behavior: contain; }
.sc-page .sc-preset {
    position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0;
    padding: 9px 34px 9px 11px; border: 1px solid var(--sc-line); border-radius: 11px; background: #fff; text-align: left; cursor: pointer;
}
.sc-page .sc-preset:hover { border-color: #b9cdf0; background: #f8fbff; }
.sc-page .sc-preset-name { display: flex; align-items: center; font-size: 13.5px; font-weight: 700; line-height: 1.35; min-width: 0; overflow-wrap: anywhere; }
.sc-page .sc-preset-price { font-size: 12.5px; color: var(--sc-muted); font-variant-numeric: tabular-nums; padding-left: 15px; }
.sc-page .sc-preset-price small { font-size: 11.5px; }
.sc-page .sc-approx { font-style: normal; margin-right: 3px; color: var(--sc-warn); font-weight: 700; }
.sc-page .sc-preset-add {
    position: absolute; top: 50%; right: 9px; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 50%;
    display: grid; place-items: center; font-size: 10px; background: var(--sc-primary-soft); color: var(--sc-primary);
}
.sc-page .sc-preset.is-added { border-color: #9fd3b8; background: #f3fbf6; }
.sc-page .sc-preset.is-added .sc-preset-add { background: #12804b; color: #fff; }

/* 表单 */
.sc-page .sc-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sc-page .sc-span-2 { grid-column: 1 / -1; }
.sc-page .sc-form-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.sc-page .sc-form.is-editing { border-color: var(--sc-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, .10); }
.sc-page .sc-form .sc-error { margin-top: 10px; padding: 8px 12px; }

/* 汇总 */
.sc-page .sc-summary { background: linear-gradient(135deg, #f3f7ff 0%, #ffffff 70%); }
.sc-page .sc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sc-page .sc-stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px; border: 1px solid var(--sc-line); border-radius: 12px; background: #fff; }
.sc-page .sc-stat-k { font-size: 12px; font-weight: 700; color: var(--sc-muted); }
.sc-page .sc-stat-v { font-size: 20px; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sc-page .sc-stat small { font-size: 11.5px; color: var(--sc-muted); line-height: 1.5; }
.sc-page .sc-stat-main { border-color: #bcd0f7; background: var(--sc-primary-soft); }
.sc-page .sc-stat-main .sc-stat-v { color: var(--sc-primary); font-size: 24px; }
.sc-page .sc-count { margin: 10px 0 0; font-size: 12.5px; color: var(--sc-muted); }
.sc-page .sc-ai {
    display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 0; padding: 12px 14px; border-radius: 12px;
    background: #fff4e5; border: 1px solid #f6d7a8; color: #6b3f00; font-size: 14px; line-height: 1.65;
}
.sc-page .sc-ai > i { margin-top: 3px; color: #d97706; }
.sc-page .sc-ai strong { font-size: 17px; color: #b45309; }
.sc-page .sc-ai.is-none { background: var(--sc-panel); border-color: var(--sc-line); color: var(--sc-muted); }
.sc-page .sc-ai.is-none > i { color: var(--sc-muted); }

/* 订阅列表 */
.sc-page .sc-empty { margin: 0; padding: 18px; border: 1px dashed var(--sc-line); border-radius: 12px; color: var(--sc-muted); font-size: 13.5px; line-height: 1.7; text-align: center; }
.sc-page .sc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 520px; overflow-y: auto; }
.sc-page .sc-row {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px;
    padding: 10px 10px 10px 12px; border: 1px solid var(--sc-line); border-radius: 12px; background: #fff;
}
.sc-page .sc-row.is-off { opacity: .55; }
.sc-page .sc-row.is-off .sc-row-amt strong { text-decoration: line-through; }
.sc-page .sc-row.is-flash { animation: sc-flash 1.2s ease; }
@keyframes sc-flash { 0% { background: #e6efff; border-color: var(--sc-primary); } 100% { background: #fff; } }
.sc-page .sc-row-main { min-width: 0; }
.sc-page .sc-row-name { display: flex; align-items: center; font-weight: 700; font-size: 14px; line-height: 1.35; }
.sc-page .sc-row-name span { overflow-wrap: anywhere; }
.sc-page .sc-row-meta { margin-top: 2px; font-size: 12px; color: var(--sc-muted); line-height: 1.5; overflow-wrap: anywhere; }
.sc-page .sc-row-amt { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sc-page .sc-row-amt strong { font-size: 15px; }
.sc-page .sc-row-amt small { font-size: 11.5px; color: var(--sc-muted); margin-left: 1px; }
.sc-page .sc-row-act { display: flex; gap: 4px; }
.sc-page .sc-row-act .sc-btn-icon { width: 30px; height: 30px; padding: 0; }
.sc-page .sc-switch { position: relative; display: inline-block; width: 34px; height: 20px; flex: 0 0 auto; cursor: pointer; }
.sc-page .sc-switch input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.sc-page .sc-switch span { position: absolute; inset: 0; border-radius: 999px; background: #cbd5e1; transition: background .15s; }
.sc-page .sc-switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .15s; }
.sc-page .sc-switch input:checked + span { background: var(--sc-primary); }
.sc-page .sc-switch input:checked + span::after { transform: translateX(14px); }
.sc-page .sc-switch input:focus-visible + span { outline: 3px solid rgba(37, 99, 235, .3); outline-offset: 1px; }

/* 图表 */
.sc-page .sc-layout-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sc-page .sc-chart-wrap { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 18px; align-items: center; }
.sc-page .sc-chart-wrap.is-empty { display: none; }
.sc-page .sc-donut { width: 180px; height: 180px; }
.sc-page .sc-donut-big { font-size: 17px; font-weight: 700; fill: var(--sc-ink); }
.sc-page .sc-donut-small { font-size: 11px; fill: var(--sc-muted); }
.sc-page .sc-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sc-page .sc-legend-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 6px; font-size: 13px; }
.sc-page .sc-legend-name { overflow-wrap: anywhere; }
.sc-page .sc-legend-val { font-variant-numeric: tabular-nums; color: var(--sc-muted); white-space: nowrap; }
.sc-page .sc-legend-pct { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }
.sc-page .sc-top { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; counter-reset: sctop; }
.sc-page .sc-top-item { counter-increment: sctop; }
.sc-page .sc-top-line { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.sc-page .sc-top-name { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.sc-page .sc-top-name::before { content: counter(sctop) ". "; color: var(--sc-muted); }
.sc-page .sc-top-val { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--sc-muted); }
.sc-page .sc-bar { height: 6px; margin-top: 5px; border-radius: 999px; background: var(--sc-line); overflow: hidden; }
.sc-page .sc-bar span { display: block; height: 100%; border-radius: 999px; }
.sc-page .sc-renewals { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sc-page .sc-renew { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 10px; background: var(--sc-panel); font-size: 13px; }
.sc-page .sc-renew time { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sc-page .sc-renew-name { min-width: 0; overflow-wrap: anywhere; }
.sc-page .sc-renew-amt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc-page .sc-renew-when { color: var(--sc-muted); font-size: 12px; white-space: nowrap; }
.sc-page .sc-renew.is-soon { background: #fff4e5; }
.sc-page .sc-renew.is-soon .sc-renew-when { color: #b45309; font-weight: 700; }

/* NAS */
.sc-page .sc-nas { margin-top: 18px; }
.sc-page .sc-nas-intro { margin: 0 0 14px; color: var(--sc-muted); font-size: 13.5px; line-height: 1.7; }
.sc-page .sc-nas-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 22px; align-items: start; }
.sc-page .sc-nas-inputs { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sc-page .sc-nas-inputs > .sc-btn { align-self: flex-start; }
.sc-page .sc-fieldset { margin: 0; padding: 12px 14px; border: 1px solid var(--sc-line); border-radius: 12px; min-width: 0; }
.sc-page .sc-fieldset legend { padding: 0 6px; font-size: 13px; font-weight: 700; }
.sc-page .sc-nas-replace { display: flex; flex-direction: column; gap: 6px; }
.sc-page .sc-nas-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; font-size: 13.5px; }
.sc-page .sc-nas-item-name { display: flex; align-items: center; min-width: 0; overflow-wrap: anywhere; }
.sc-page .sc-nas-item-amt { color: var(--sc-muted); white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 12.5px; }
.sc-page .sc-stats-nas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sc-page .sc-stats-nas .sc-stat-v { font-size: 18px; }
.sc-page .sc-stats-nas .sc-stat-main .sc-stat-v { font-size: 20px; }
.sc-page .sc-stat-v.is-pos { color: #12804b; }
.sc-page .sc-stat-v.is-neg { color: var(--sc-danger); }
.sc-page .sc-nas-chart-wrap { margin-top: 14px; padding: 10px 12px; border: 1px solid var(--sc-line); border-radius: 12px; }
.sc-page .sc-nas-chart { display: block; width: 100%; height: auto; }
.sc-page .sc-grid-line { stroke: var(--sc-line); stroke-width: 1; }
.sc-page .sc-axis { font-size: 11px; fill: var(--sc-muted); }
.sc-page .sc-line-subs { stroke: #f97316; stroke-width: 2.5; }
.sc-page .sc-line-nas { stroke: var(--sc-primary); stroke-width: 2.5; }
.sc-page .sc-pb-dot { fill: #12804b; stroke: #fff; stroke-width: 2; }
.sc-page .sc-pb-label { font-size: 11.5px; font-weight: 700; fill: #12804b; }
.sc-page .sc-nas-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; font-size: 12.5px; color: var(--sc-muted); }
.sc-page .sc-nas-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sc-page .sc-line-key { display: inline-block; width: 18px; height: 3px; border-radius: 2px; }
.sc-page .sc-key-subs { background: #f97316; }
.sc-page .sc-key-nas { background: var(--sc-primary); }
.sc-page .sc-nas-verdict { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--sc-panel); font-size: 14px; line-height: 1.65; }
.sc-page .sc-nas-verdict.is-good { background: #ecfdf3; color: #0f6b3e; }
.sc-page .sc-nas-verdict.is-bad { background: #fff4e5; color: #8a4b00; }
.sc-page .sc-nas-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 16px 0 0; font-size: 13.5px; }
.sc-page .sc-nas-links span { font-weight: 700; color: var(--sc-muted); }
.sc-page .sc-nas-links a { color: var(--sc-primary); font-weight: 600; text-decoration: none; }
.sc-page .sc-nas-links a:hover { text-decoration: underline; }
.sc-page .sc-nas-disclaimer { padding: 9px 12px; border-radius: 10px; background: var(--sc-warn-soft); color: var(--sc-warn); }

/* 响应式 */
@media (max-width: 991.98px) {
    .sc-page .sc-layout,
    .sc-page .sc-layout-even,
    .sc-page .sc-nas-grid { grid-template-columns: minmax(0, 1fr); }
    .sc-page .sc-rates-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .sc-page .sc-toolbar { align-items: stretch; }
    .sc-page .sc-cur-pick { width: 100%; justify-content: space-between; }
    .sc-page .sc-cur-pick select { flex: 1; max-width: none; }
    .sc-page .sc-toolbar-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
    .sc-page .sc-toolbar-actions .sc-btn { white-space: normal; text-align: center; min-height: 34px; }
    .sc-page .sc-banner-actions { margin-left: 0; }
    .sc-page .sc-card { padding: 14px; }
    .sc-page .sc-rates-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sc-page .sc-preset-grid { max-height: 330px; }
    .sc-page .sc-preset { padding: 8px 30px 8px 9px; }
    .sc-page .sc-preset-name { font-size: 13px; }
    .sc-page .sc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sc-page .sc-stats .sc-stat-main { grid-column: 1 / -1; }
    .sc-page .sc-stat-v { font-size: 17px; }
    .sc-page .sc-row { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 6px; }
    .sc-page .sc-row-act { grid-column: 2 / -1; justify-content: flex-end; }
    .sc-page .sc-chart-wrap { grid-template-columns: minmax(0, 1fr); justify-items: center; }
    .sc-page .sc-legend { width: 100%; }
    .sc-page .sc-renew { grid-template-columns: auto minmax(0, 1fr) auto; }
    .sc-page .sc-renew-when { grid-column: 2 / -1; text-align: right; margin-top: -4px; }
    .sc-page .sc-stats-nas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sc-page .sc-stats-nas .sc-stat-main { grid-column: auto; }
    .sc-page .sc-axis { font-size: 13px; }
    /* 功能表与价格表：卡片行，避免 CJK 文字被挤成竖排 */
    .sc-page .sc-sup-table thead,
    .sc-page .sc-price-table thead { display: none; }
    .sc-page .sc-sup-table, .sc-page .sc-sup-table tbody,
    .sc-page .sc-price-table, .sc-page .sc-price-table tbody { display: block; }
    .sc-page .sc-sup-table tr,
    .sc-page .sc-price-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; padding: 10px 2px; border-bottom: 1px solid var(--sc-line); }
    .sc-page .sc-sup-table td,
    .sc-page .sc-price-table td { padding: 0; border: 0; }
    .sc-page .sc-sup-table td:first-child,
    .sc-page .sc-price-table td:first-child { font-weight: 600; }
    .sc-page .sc-sup-table td:last-child { grid-column: 1 / -1; color: var(--sc-muted); line-height: 1.6; }
    .sc-page .sc-price-table td:nth-child(2) { grid-row: 2; color: var(--sc-muted); font-size: 12px; }
    .sc-page .sc-price-table td:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
}

/* 深色模式 */
html[data-theme="dark"] .sc-page .sc-card,
html[data-theme="dark"] .sc-page .sc-stat,
html[data-theme="dark"] .sc-page .sc-row,
html[data-theme="dark"] .sc-page .sc-preset,
html[data-theme="dark"] .sc-page .sc-chip,
html[data-theme="dark"] .sc-page .sc-opt input[type="number"],
html[data-theme="dark"] .sc-page .sc-opt input[type="date"],
html[data-theme="dark"] .sc-page .sc-search,
html[data-theme="dark"] .sc-page .sc-rate input {
    background-color: #182231; color: #e8eef5; border-color: rgba(255, 255, 255, 0.14);
}
html[data-theme="dark"] .sc-page .sc-opt input[type="date"] { color-scheme: dark; }
html[data-theme="dark"] .sc-page .sc-summary { background: #16233a; }
html[data-theme="dark"] .sc-page .sc-stat-main { background: #1a2a44; border-color: rgba(96, 165, 250, .4); }
html[data-theme="dark"] .sc-page .sc-stat-main .sc-stat-v { color: #93c5fd; }
html[data-theme="dark"] .sc-page .sc-chip.is-active { background: var(--sc-primary); color: #fff; }
html[data-theme="dark"] .sc-page .sc-preset.is-added { background: #13291f; border-color: #2f6b4c; }
html[data-theme="dark"] .sc-page .sc-ai { background: #2b2312; border-color: #5a4720; color: #f5d9a8; }
html[data-theme="dark"] .sc-page .sc-ai strong { color: #fbbf24; }
html[data-theme="dark"] .sc-page .sc-ai.is-none { background: #141c28; border-color: rgba(255, 255, 255, 0.14); color: #b7c3d0; }
html[data-theme="dark"] .sc-page .sc-renew.is-soon { background: #2b2312; }
html[data-theme="dark"] .sc-page .sc-renew.is-soon .sc-renew-when { color: #fbbf24; }
html[data-theme="dark"] .sc-page .sc-banner { background: #1a2a44; border-color: rgba(96, 165, 250, .35); }
html[data-theme="dark"] .sc-page .sc-cur-pick select { background: #1a2a44; color: #e8eef5; }
html[data-theme="dark"] .sc-page .sc-nas-verdict.is-good { background: #13291f; color: #86efac; }
html[data-theme="dark"] .sc-page .sc-nas-verdict.is-bad { background: #2b2312; color: #f5d9a8; }
html[data-theme="dark"] .sc-page .sc-stat-v.is-pos { color: #6ad49b; }
html[data-theme="dark"] .sc-page .sc-stat-v.is-neg { color: #f3a99f; }
html[data-theme="dark"] .sc-page .sc-pb-dot { stroke: #182231; }
html[data-theme="dark"] .sc-page .sc-switch span { background: #475569; }
@keyframes sc-flash-dark { 0% { background: #1a2a44; } 100% { background: #182231; } }
html[data-theme="dark"] .sc-page .sc-row.is-flash { animation-name: sc-flash-dark; }
@media (prefers-reduced-motion: reduce) {
    .sc-page .sc-row.is-flash { animation: none; }
    .sc-page .sc-switch span, .sc-page .sc-switch span::after { transition: none; }
}