/* 页面版心 */
.app-container {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    min-height: 100vh;
    padding-top: calc(var(--layout-page-gutter) + env(safe-area-inset-top));
    padding-right: calc(var(--layout-page-gutter) + env(safe-area-inset-right));
    padding-bottom: calc(var(--layout-page-gutter) + env(safe-area-inset-bottom));
    padding-left: calc(var(--layout-page-gutter) + env(safe-area-inset-left));
    box-sizing: border-box;
}

/* 顶部标题区 */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-6);
}

.logo {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-medium);
}

.header-icons {
    display: flex;
    gap: var(--space-4);
}

.header-icon-link,
.header-icons svg {
    width: 24px;
    height: 24px;
}

.header-icon-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.header-icon-link svg,
.header-icons svg {
    cursor: pointer;
}

/* 顶部导航标签：直接高亮当前项，不再使用独立滑块 */
.nav-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: 6px;
    margin-bottom: var(--space-5);
    min-height: 50px;
    padding: 5px;
    background-color: var(--tab-bg);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
}

.tab-indicator {
    display: none;
}

.tab {
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 38px;
    padding: 0;
    user-select: none;
    cursor: pointer;
    text-align: center;
    color: var(--color-tab-text-default);
    font-family: 'Plus Jakarta Sans', var(--font-family-ui);
    font-size: var(--font-size-sm);
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.01em;
    border-radius: var(--radius-md);
    background: transparent;
    transition: none;
}

.tab.active,
.tab.active:hover {
    color: var(--color-tab-text-active);
    font-weight: var(--font-weight-medium);
    background: var(--gradient-tab-indicator), var(--color-tab-indicator-bg);
    box-shadow: var(--shadow-tab-indicator);
}

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

.spa-panel,
.spa-panel.history-page,
.spa-panel.settings-page {
    display: none;
}

.spa-panel.is-active {
    display: block;
}

.spa-panel.history-page.is-active,
.spa-panel.settings-page.is-active {
    display: flex;
}

/* 历史页 */
.history-page {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 0;
    font-family: 'Plus Jakarta Sans', var(--font-family-sans);
}

.history-title {
    margin: 4px 0 0;
    color: var(--color-history-title);
    font-size: 18px;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.01em;
}

.history-list {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.history-list--empty {
    flex: 1 1 auto;
    justify-content: center;
    min-height: 420px;
}

.history-day-group {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    column-gap: 16px;
    align-items: start;
}

.history-day-rail {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding-top: 2px;
}

.history-day-number {
    color: #FFFFFF;
    font-size: 20px;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.01em;
}

.history-day-month {
    color: rgba(255, 255, 255, 0.68);
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.01em;
}

.history-day-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.history-entry-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.history-entry-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    min-width: 0;
    margin-bottom: 0;
}

.history-entry-time {
    margin: 0;
    color: #FFFFFF;
    font-family: 'Plus Jakarta Sans', var(--font-family-sans);
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.01em;
}

.history-entry-location {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
    min-height: 20px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.history-entry-location-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.history-entry-location-icon svg {
    width: 18px;
    height: 18px;
}

.history-entry-location-text {
    color: #FFFFFF;
    font-family: 'Plus Jakarta Sans', var(--font-family-sans);
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.history-entry-panel {
    min-height: 88px;
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 18px 20px 16px;
    background: linear-gradient(180deg, rgba(34, 34, 34, 0.98) 0%, rgba(30, 30, 30, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 8px 22px rgba(0, 0, 0, 0.2);
}

.history-metric {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-width: 0;
}

.history-metric + .history-metric {
    margin-left: 20px;
    padding-left: 20px;
}

.history-metric-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.history-metric-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.history-metric-icon svg {
    width: 18px;
    height: 18px;
}

.history-metric-value {
    color: #EAEAEA;
    font-size: 18px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.history-metric-unit {
    color: rgba(255, 255, 255, 0.82);
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.01em;
}

.history-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    width: 100%;
    min-height: 430px;
    padding: 26px 0 18px;
}

.history-empty-image {
    width: min(236px, 72vw);
    height: auto;
    display: block;
    object-fit: contain;
}

.history-empty-label {
    margin: 0;
    color: rgba(255, 255, 255, 0.46);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.03em;
}

/* 设置页 */
.settings-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.settings-profile-card,
.settings-option {
    position: relative;
    overflow: hidden;
    background: var(--gradient-settings-card);
    border: 1px solid var(--color-settings-card-border);
    border-radius: var(--radius-md);
    box-shadow:
        inset 0 1px 0 var(--color-settings-card-highlight),
        0 14px 34px var(--color-settings-card-shadow);
}

.settings-profile-card::before,
.settings-option::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.03) 0%, rgba(0, 0, 0, 0) 54%);
}

.settings-profile-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    padding: 24px 20px 24px;
    text-align: center;
}

.settings-app-icon {
    width: 88px;
    height: 88px;
    margin-bottom: 18px;
    background: var(--color-settings-app-icon);
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.52);
}

.settings-brand {
    margin: 0;
    color: var(--color-settings-brand);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.03em;
}

.settings-version {
    margin: 8px 0 0;
    color: var(--color-settings-version);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.settings-copy {
    margin: 10px 0 0;
    color: var(--color-settings-copy);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.settings-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.settings-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 46px;
    padding: 0 16px;
    text-decoration: none;
}

.settings-option-main {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.settings-option-icon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}

.settings-option-label {
    color: var(--color-settings-row-text);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.settings-option-chevron {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: var(--color-settings-row-chevron);
}

.settings-sheet-open {
    overflow: hidden;
}

.settings-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    background: var(--color-settings-sheet-overlay);
    opacity: 0;
    transition: opacity 0.28s ease;
}

.settings-sheet-backdrop[hidden] {
    display: none !important;
}

.settings-sheet-backdrop.is-open {
    opacity: 1;
}

.settings-sheet {
    position: relative;
    width: 100%;
    max-height: min(74vh, 520px);
    padding: 22px 16px 18px;
    background: var(--gradient-settings-sheet);
    border: 1px solid var(--color-settings-sheet-border);
    border-bottom: none;
    border-radius: 28px 28px 0 0;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 -14px 36px rgba(0, 0, 0, 0.34);
    transform: translateY(100%);
    transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.settings-sheet-backdrop.is-open .settings-sheet {
    transform: translateY(0);
}

.settings-sheet-header {
    margin-bottom: 16px;
}

.settings-sheet-title-wrap {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.settings-sheet-title-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
}

.settings-sheet-title {
    margin: 0;
    color: var(--color-settings-sheet-title);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.02em;
}

.settings-language-list-wrap {
    position: relative;
    padding-right: 12px;
}

.settings-language-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: min(56vh, 370px);
    overflow-y: auto;
    padding-right: 2px;
    scrollbar-width: none;
}

.settings-language-list::-webkit-scrollbar {
    display: none;
}

.settings-language-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 54px;
    padding: 0 20px;
    background: var(--color-settings-sheet-option-bg);
    border: 1px solid var(--color-settings-sheet-option-border);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    cursor: pointer;
}

.settings-language-option.active {
    border-color: var(--color-settings-sheet-option-active-border);
}

.settings-language-name {
    color: var(--color-settings-sheet-option-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.settings-language-option.active .settings-language-name {
    color: var(--color-settings-sheet-option-active-text);
    font-weight: 700;
}

.settings-language-indicator {
    position: relative;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border: 2px solid var(--color-settings-sheet-option-ring);
    border-radius: 50%;
}

.settings-language-indicator--active {
    border: none;
}

.settings-language-indicator--active svg {
    display: block;
    width: 18px;
    height: 18px;
}

.settings-language-scrollbar {
    position: absolute;
    top: 6px;
    right: 0;
    width: 6px;
    height: calc(100% - 12px);
    pointer-events: none;
}

.settings-language-scrollbar::before {
    content: '';
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 50%;
    width: 2px;
    background: var(--color-settings-sheet-scrollbar-track);
    border-radius: var(--radius-pill);
    transform: translateX(-50%);
    opacity: 0.95;
}

.settings-language-scrollbar-thumb {
    width: 4px;
    height: 30px;
    margin: 0 auto;
    background: var(--color-settings-sheet-scrollbar-thumb);
    border-radius: var(--radius-pill);
    box-shadow: 0 0 6px rgba(0, 242, 255, 0.2);
}

/* 帮助页 */
.help-page {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.help-toolbar {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    margin-top: 1px;
}

.help-back-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--color-help-back-bg);
    border: 1px solid var(--color-help-back-border);
    border-radius: var(--radius-md);
    color: var(--color-help-back-icon);
    text-decoration: none;
}

.help-back-button svg {
    width: 17px;
    height: 17px;
}

.help-toolbar-spacer {
    width: 44px;
    height: 44px;
}

.help-page-title {
    margin: 0;
    font-family: 'Plus Jakarta Sans', var(--font-family-sans);
    color: var(--color-help-title);
    font-size: 18px;
    font-weight: 700;
    line-height: normal;
    text-align: center;
    letter-spacing: 0.01em;
}

.help-tabs {
    display: flex;
    gap: 13px;
    overflow-x: auto;
    margin-top: 14px;
    padding: 0 0 8px;
    border-bottom: 1px solid var(--color-help-tab-divider);
    scrollbar-width: none;
    scroll-padding-inline: 20px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

.help-tabs::-webkit-scrollbar {
    display: none;
}

.help-tab {
    position: relative;
    flex: 0 0 auto;
    padding: 0 0 10px;
    font-family: 'Plus Jakarta Sans', var(--font-family-sans);
    color: var(--color-help-tab-default);
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.01em;
    white-space: nowrap;
    text-align: left;
    cursor: pointer;
    scroll-snap-align: start;
}

.help-tab.active {
    color: var(--color-help-tab-active);
    font-weight: 700;
}

.help-tab.active::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 3px;
    background: var(--color-help-tab-underline);
    border-radius: var(--radius-pill);
}

.help-tab-panel {
    display: none;
}

.help-tab-panel.active {
    display: block;
}

.help-card-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 12px;
}

.help-card {
    position: relative;
    overflow: hidden;
    padding: 18px 18px 16px;
    background: #1E1E1E;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.help-card--higher {
    border-color: var(--color-help-card-cyan);
}

.help-card--lower {
    border-color: var(--color-help-card-orange);
}

.help-card--reference {
    border-color: var(--color-help-card-green);
}

.help-card--normal {
    border-color: var(--color-help-card-cyan);
}

.help-card-badge {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 130px;
    height: 40px;
    padding: 0 14px;
    font-family: 'Plus Jakarta Sans', var(--font-family-sans);
    color: var(--color-help-chip-text-dark);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
    border-radius: 0 12px 0 12px;
}

.help-card--higher .help-card-badge {
    background: var(--color-help-card-cyan);
}

.help-card--lower .help-card-badge {
    background: var(--color-help-card-orange);
}

.help-card--reference .help-card-badge {
    background: var(--color-help-card-green);
}

.help-card--normal .help-card-badge {
    background: var(--color-help-card-cyan);
}

.help-card-body {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-top: 0;
    min-height: 100%;
}

.help-card-question,
.help-card-answer {
    margin: 0;
    font-family: 'Plus Jakarta Sans', var(--font-family-sans);
    color: var(--color-help-card-text);
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.01em;
}

.help-card-answer {
    margin-top: 18px;
}

.help-card-subtitle {
    margin: 4px 0 0 20px;
    font-family: 'Plus Jakarta Sans', var(--font-family-sans);
    color: var(--color-help-card-muted);
    font-size: 12px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: normal;
}

.help-card-divider {
    width: 100%;
    height: 2px;
    margin: 18px 0 16px;
    border-radius: var(--radius-pill);
}

.help-card--higher .help-card-divider {
    background: var(--color-help-divider-cyan);
}

.help-card--lower .help-card-divider {
    background: var(--color-help-divider-orange);
}

.help-card--reference .help-card-divider {
    background: var(--color-help-divider-green);
}

.help-card--normal .help-card-divider {
    background: var(--color-help-divider-cyan);
}

.help-card-note {
    margin: 0;
    font-family: 'Plus Jakarta Sans', var(--font-family-sans);
    color: var(--color-help-card-note);
    font-size: 12px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: normal;
}

.help-card-note + .help-card-note {
    margin-top: 8px;
}

.help-end-marker {
    margin-top: 16px;
    font-family: 'Plus Jakarta Sans', var(--font-family-sans);
    color: var(--color-help-end-text);
    font-size: 12px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.01em;
    text-align: center;
}

.help-page-footer {
    margin-top: 16px;
}

.help-page-footer .footer-title {
    margin-bottom: 18px;
    font-size: 20px;
}

.help-page-footer .footer-links {
    gap: 14px;
    margin-bottom: 14px;
}

.help-page-footer .footer-links a,
.help-page-footer .footer-email {
    font-size: 14px;
}

.help-page-footer .footer-email {
    margin-bottom: 16px;
}

.help-page-footer .footer-copy {
    font-size: 14px;
}

/* 主测速卡片 */
.main-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: var(--space-5);
    padding: var(--space-7) 18px var(--space-5);
    background: var(--gradient-surface-card);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
}

/* 仪表盘容器与尺寸 */
.dial-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--layout-dial-shell-width);
    height: var(--layout-dial-shell-height);
    margin-bottom: var(--font-size-sm);
    overflow: visible;
}

/* 仪表盘刻度与圆环主体 */
.dial-face {
    position: relative;
    width: var(--layout-dial-width);
    height: var(--layout-dial-height);
    --dial-center-x: 50%;
    --dial-center-y: 54.7826%;
    --dial-start-angle: -132deg;
}

.dial-ring-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.dial-track,
.dial-meter {
    fill: none;
    stroke-width: 18;
    stroke-linecap: round;
}

.dial-track {
    stroke: var(--dial-rest);
}

.dial-meter {
    stroke: url(#dialGradient);
    opacity: 0;
    stroke-dasharray: 0 1000;
    stroke-dashoffset: 0;
    filter: drop-shadow(var(--shadow-dial-meter));
    transition: stroke-dasharray var(--transition-fast), stroke-dashoffset var(--transition-fast);
}

.dial-label {
    position: absolute;
    left: var(--x);
    top: var(--y);
    z-index: 1;
    user-select: none;
    pointer-events: none;
    transform: translate(-50%, -50%);
    color: #FFFFFF;
    font-family: 'Plus Jakarta Sans', var(--font-family-ui);
    font-size: 14px;
    font-weight: 500;
    line-height: 15.83px;
    letter-spacing: -0.01px;
    text-align: center;
    transition: color 0.2s ease, text-shadow 0.2s ease, opacity 0.2s ease;
}

.dial-label.active {
    color: var(--color-text-primary);
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.32);
}

/* 仪表盘指示器 */
.needle-css {
    position: absolute;
    bottom: 96px;
    left: 52%;
    z-index: 2;
    width: 16px;
    height: 61px;
    overflow: visible;
    border-radius: var(--radius-pill);
    background: linear-gradient(
        180deg,
        #FFFFFF 0%,
        rgba(255, 255, 255, 0.82) 22%,
        rgba(255, 255, 255, 0.38) 58%,
        rgba(255, 255, 255, 0) 100%
    );
    filter: drop-shadow(var(--shadow-needle));
    transform: translateX(-50%) rotate(var(--needle-angle, -132deg));
    transform-origin: bottom center;
    transition: transform var(--transition-needle);
}

.needle-css::after {
    content: '';
    position: absolute;
    inset: -2px;
    z-index: -1;
    opacity: 0.85;
    border-radius: var(--radius-pill);
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.34) 0%,
        rgba(255, 255, 255, 0.14) 36%,
        rgba(255, 255, 255, 0.04) 62%,
        rgba(255, 255, 255, 0) 100%
    );
    filter: blur(2.5px);
}

/* 中央状态文案 */
.ready-text {
    position: absolute;
    bottom: -2px;
    width: 100%;
    color: var(--color-text-soft);
    font-size: var(--font-size-xs);
    text-align: center;
    letter-spacing: var(--tracking-soft);
    transition: color var(--transition-fast);
}

/* 读数区域 */
.speed-value {
    margin: 6px 0 26px 0;
    text-align: center;
}

.speed-readout {
    min-height: 46px;
    color: var(--text-white);
    font-size: var(--font-size-display);
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
    line-height: var(--line-height-tight);
    letter-spacing: var(--tracking-tight-display);
}

.unit-box {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
    margin-top: var(--space-2);
    color: var(--text-white);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    opacity: 0.96;
}

.go-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 168px;
    min-height: 44px;
    padding: 10px 0;
    cursor: pointer;
    color: var(--text-white);
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    background: var(--gradient-brand);
    border: none;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-button-glow);
    user-select: none;
    transition: transform var(--transition-fast), filter var(--transition-fast);
}

.go-btn:hover {
    filter: brightness(1.03);
}

.go-btn:active {
    transform: scale(0.985);
}

.go-btn[aria-busy='true'] {
    pointer-events: none;
    filter: saturate(0.94) brightness(0.96);
}

.runtime-context {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 320px;
    margin-top: 14px;
}

.runtime-pill {
    align-self: center;
    padding: 6px 12px;
    color: #DDF9FF;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: rgba(10, 177, 231, 0.14);
    border: 1px solid rgba(10, 177, 231, 0.3);
    border-radius: 999px;
}

.runtime-note,
.runtime-error {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
}

.runtime-note {
    color: var(--color-text-soft);
}

.runtime-error {
    color: #FFAC81;
}

/* 底部四张小卡片 */
.grid-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: var(--space-5);
}

.small-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 110px;
    padding: var(--space-4) var(--space-4) 0 var(--space-4);
    overflow: hidden;
    background: var(--gradient-surface-card);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
}

.card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.card-icon {
    width: 16px;
    height: 16px;
}

.card-title {
    color: var(--text-white);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.small-card:nth-child(1) .card-title {
    color: var(--color-upload);
}

.card-value {
    display: flex;
    align-items: baseline;
    gap: 6px;

    z-index: 1;
}

.card-value .dashes {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

.card-value .unit {
    color: var(--text-gray);
    font-size: var(--font-size-xs);
}

.chart-box {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 34px;
}

.results-section {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    margin-bottom: 0;
    pointer-events: none;
    transform: translateY(16px);
    transition:
        opacity 0.34s ease,
        transform 0.34s ease,
        max-height 0.34s ease,
        margin-bottom 0.34s ease;
}

.results-section.is-visible {
    opacity: 1;
    max-height: 1600px;
    pointer-events: auto;
    transform: translateY(0);
}

.grid-cards.results-section.is-visible,
.detail-panels.results-section.is-visible {
    margin-bottom: var(--space-5);
}

/* 详情模板卡片区域 */
.detail-panels {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    margin-bottom: 0;
}

.detail-card {
    position: relative;
    overflow: hidden;
    padding: var(--layout-detail-card-padding);
    background: var(--gradient-panel-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-panel-card);
}

.detail-card::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--gradient-panel-glow);
}

.detail-card-score {
    --score-state-value-color: var(--color-score-good-value);
    --score-state-caption-color: var(--color-score-good-caption);
    --score-state-badge-bg: var(--color-score-good-badge-bg);
    --score-state-badge-border: var(--color-score-good-badge-border);
    --score-state-badge-text: var(--color-score-good-badge-text);
    --score-state-glow: var(--color-score-good-glow);
    padding: 15px 16px 12px;
    background: var(--gradient-score-card);
    border: 1px solid var(--color-score-card-border);
    border-radius: var(--radius-md);
    box-shadow:
        inset 0 1px 0 var(--color-score-card-inner-highlight),
        0 12px 30px rgba(0, 0, 0, 0.22);
}

.detail-card-score::before {
    background:
        radial-gradient(circle at 100% 0%, var(--score-state-glow) 0%, rgba(0, 0, 0, 0) 58%);
    opacity: 0.96;
}

.detail-card-score[data-score-state='fair'] {
    --score-state-value-color: var(--color-score-fair-value);
    --score-state-caption-color: var(--color-score-fair-caption);
    --score-state-badge-bg: var(--color-score-fair-badge-bg);
    --score-state-badge-border: var(--color-score-fair-badge-border);
    --score-state-badge-text: var(--color-score-fair-badge-text);
    --score-state-glow: var(--color-score-fair-glow);
}

.detail-card-score[data-score-state='poor'] {
    --score-state-value-color: var(--color-score-poor-value);
    --score-state-caption-color: var(--color-score-poor-caption);
    --score-state-badge-bg: var(--color-score-poor-badge-bg);
    --score-state-badge-border: var(--color-score-poor-badge-border);
    --score-state-badge-text: var(--color-score-poor-badge-text);
    --score-state-glow: var(--color-score-poor-glow);
}

.detail-card-head {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: 18px;
}

.detail-card-score .detail-card-head {
    position: relative;
    display: block;
    margin-bottom: 4px;
}

.detail-card-title {
    margin: 0;
    color: var(--color-panel-title);
    font-size: var(--font-size-panel-title);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.01em;
}

.detail-card-score .detail-card-title {
    display: block;
    max-width: calc(100% - 102px);
    color: var(--color-score-title);
    font-size: var(--font-size-panel-title);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.detail-badge {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 58px;
    padding: 6px 12px;
    color: var(--color-panel-badge-text);
    font-size: var(--font-size-panel-badge);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.02em;
    background: var(--color-panel-badge-bg);
    border: 1px solid var(--color-panel-badge-border);
    border-radius: var(--radius-md);
}

.detail-card-score .detail-badge {
    position: absolute;
    top: 5px;
    right: 0px;
    width: 90px;
    height: 76px;
    padding: 0;
    box-sizing: border-box;
    color: var(--score-state-badge-text);
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    background: var(--score-state-badge-bg);
    border: 1px solid var(--score-state-badge-border);
    border-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.quality-overview {
    position: relative;
    z-index: 1;
}

.detail-card-score .quality-overview {
    margin-top: 2px;
}

.quality-score-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.detail-card-score .quality-score-block {
    gap: 2px;
}

.quality-score-line {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.detail-card-score .quality-score-line {
    margin-top: 8px;
    gap: 5px;
}

.quality-score-value {
    color: var(--color-panel-score);
    font-size: var(--font-size-panel-score);
    font-weight: var(--font-weight-bold);
    line-height: 0.92;
    letter-spacing: -0.04em;
}

.detail-card-score .quality-score-value {
    color: var(--score-state-value-color);
    font-size: 32px;
    font-weight: var(--font-weight-medium);
    line-height: 0.88;
    letter-spacing: -0.045em;
}

.quality-score-total {
    color: var(--color-panel-score-total);
    font-size: 22px;
    font-weight: var(--font-weight-medium);
}

.detail-card-score .quality-score-total {
    display: inline-flex;
    align-items: baseline;
    color: var(--color-score-total);
    font-size: 12px;
    font-weight: var(--font-weight-medium);
}

.quality-score-total-prefix {
    display: inline-block;
}

.quality-score-total-value {
    display: inline-block;
    margin-left: 4px;
}

.quality-score-caption,
.quality-score-helper {
    margin: 0;
}

.quality-score-caption {
    color: var(--color-panel-caption);
    font-size: var(--font-size-panel-caption);
    font-weight: var(--font-weight-medium);
}

.detail-card-score .quality-score-caption {
    margin-top: 6px;
    color: var(--score-state-caption-color);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.quality-score-helper {
    max-width: 260px;
    color: var(--color-panel-helper);
    font-size: var(--font-size-sm);
    line-height: 1.45;
}

.detail-card-score .quality-score-helper {
    max-width: 282px;
    color: var(--color-score-helper);
    font-size: 12px;
    line-height: 1.18;
}

.quality-metrics {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 22px;
}

.detail-card-score .quality-metrics {
    gap: 10px;
    margin-top: 14px;
}

.quality-metric {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    padding: 15px 16px 15px 38px;
    background: var(--color-panel-row-bg);
    border: 1px solid var(--color-panel-row-border);
    border-radius: var(--radius-md);
}

.quality-metric::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 16px;
    width: 8px;
    height: 8px;
    background: var(--color-panel-note-dot);
    border-radius: 50%;
    box-shadow: 0 0 0 6px rgba(64, 217, 173, 0.08);
    transform: translateY(-50%);
}

.detail-card-score .quality-metric {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--color-score-metric-bg);
    border: 1px solid var(--color-score-metric-border);
    border-radius: var(--radius-md);
}

.detail-card-score .quality-metric::before {
    content: none;
}

.quality-metric-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 1px;
}

.quality-metric-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 3px;
    min-width: 0;
}

.quality-metric-label,
.quality-metric-value {
    font-size: var(--font-size-sm);
    line-height: 1.4;
}

.quality-metric-label {
    color: var(--color-panel-row-label);
}

.quality-metric-value {
    color: var(--color-panel-row-value);
    font-weight: var(--font-weight-medium);
    text-align: right;
}

.detail-card-score .quality-metric-label {
    color: var(--color-score-metric-title);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.16;
    text-align: left;
}

.detail-card-score .quality-metric-value {
    color: var(--color-score-metric-description);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.18;
    text-align: left;
}

.environment-list,
.environment-notes {
    position: relative;
    z-index: 1;
}

.detail-card-environment {
    padding: 18px 18px 16px;
    background: var(--gradient-environment-card);
    border: 1px solid var(--color-environment-card-border);
    border-radius: var(--radius-md);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 12px 28px rgba(0, 0, 0, 0.18);
}

.detail-card-environment::before {
    background: none;
}

.detail-card-environment .detail-card-head {
    margin-bottom: 14px;
}

.detail-card-environment .detail-card-title {
    color: var(--color-environment-title);
    font-size: var(--font-size-panel-title);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.environment-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.environment-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 14px 14px 12px;
    background: var(--color-environment-row-bg);
    border: 1px solid var(--color-environment-row-border);
    border-radius: var(--radius-md);
}

.environment-row-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
}

.environment-row-main {
    display: grid;
    grid-template-columns: minmax(max-content, 44%) minmax(0, 1fr);
    align-items: center;
    column-gap: 16px;
    flex: 1 1 auto;
    min-width: 0;
}

.environment-label,
.environment-value {
    line-height: 1.2;
}

.environment-label {
    color: var(--color-environment-label);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.environment-value {
    color: var(--color-environment-value);
    font-size: 14px;
    font-weight: 600;
    justify-self: stretch;
    min-width: 0;
    text-align: right;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    line-height: 1.3;
    max-width: 100%;
}

.environment-notes {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 14px;
}

.environment-note {
    position: relative;
    padding-left: 10px;
    color: var(--color-environment-note);
    font-size: 12px;
    line-height: 1.35;
}

.environment-note::before {
    content: '';
    position: absolute;
    top: 7px;
    left: 0;
    width: 3px;
    height: 3px;
    background: var(--color-environment-note-dot);
    border-radius: 50%;
}

.environment-note.environment-note-tail {
    padding-left: 0;
    margin-top: 2px;
    color: var(--color-environment-note-tail);
}

.environment-note.environment-note-tail::before {
    content: none;
}

/* 页脚 */
.footer {
    margin-top: 0;
    margin-bottom: var(--space-5);
    padding: 16px 13px 14px;
    background: var(--gradient-footer-card);
    border: 1px solid var(--color-footer-border);
    border-radius: var(--radius-md);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 10px 24px rgba(0, 0, 0, 0.14);
}

body[data-active-panel='history'] .footer,
body[data-active-panel='settings'] .footer {
    margin-top: var(--space-5);
}

.footer-title {
    margin: 0 0 20px 0;
    color: var(--color-footer-title);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 18px;
}

.footer-links a {
    color: var(--color-footer-link);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.15;
    text-decoration: none;
}

.footer-email {
    margin-bottom: 20px;
    color: var(--color-footer-email);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.15;
}

.footer-copy {
    color: var(--color-footer-copy);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
}

@media (min-width: 768px) {
    .app-container {
        max-width: var(--layout-app-max-width);
    }
}

@media (max-width: 360px) {
    .history-card {
        padding-inline: 14px;
    }

    .history-speed {
        font-size: 22px;
    }

    .settings-profile-card {
        min-height: 238px;
        padding-inline: 16px;
    }

    .settings-brand {
        font-size: 20px;
    }

    .settings-option-label {
        font-size: 14px;
    }

    .help-toolbar {
        grid-template-columns: 44px 1fr 44px;
    }

    .help-back-button,
    .help-toolbar-spacer {
        width: 44px;
        height: 44px;
    }

    .help-page-title {
        font-size: 18px;
    }

    .help-tab {
        font-size: 14px;
    }

    .help-card {
        padding: 14px 14px 12px;
    }

    .help-card-badge {
        min-width: 128px;
        height: 34px;
        font-size: 14px;
    }

    .help-card-question,
    .help-card-answer {
        font-size: 14px;
    }

    .help-card-subtitle {
        font-size: 12px;
    }

    .detail-card {
        padding: 18px;
    }

    .quality-score-value {
        font-size: 23px;
    }

    .quality-metric,
    .environment-row,
    .environment-note {
        padding-inline: 14px;
    }

    .quality-metric {
        padding-left: 34px;
    }

    .environment-note {
        padding-left: 32px;
    }
}