/*
 * 可言Ai unified UI foundation (统一 UI 基础样式)
 *
 * 定位：全站通用的排版、间距、控件、响应式底层规则。
 * 规则：本文件不包含任何产品级色板/主题色，每个页面的主样式表（如 style.css）
 *       负责定义自己的颜色变量和视觉风格。
 *
 * 与 style.css 的关系：
 * - style.css 定义首页专属的色板变量 (:root { --primary, --bg, ... }) 和组件样式。
 * - ui-system.css 定义跨页面的通用规则（字体、表单、卡片、模态框等）。
 * - 两套文件并行加载，由于 ui-system.css 使用 :where() 选择器（特异性为 0），
 *   style.css 中的同名选择器规则优先级更高，可覆盖通用规则。
 * - .container 在两端均有定义：style.css 中定义首页的 max-width/padding，
 *   ui-system.css 中定义通用的 width/margin-inline 兜底值。
 */
:root {
    --ui-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
    --ui-text-xs: 0.75rem;
    --ui-text-sm: 0.8125rem;
    --ui-text-base: 0.9375rem;
    --ui-text-md: 1rem;
    --ui-text-lg: 1.125rem;
    --ui-text-xl: 1.375rem;
    --ui-text-2xl: clamp(1.625rem, 2.4vw, 2rem);
    --ui-text-3xl: clamp(2rem, 4vw, 3rem);
    --ui-leading-tight: 1.3;
    --ui-leading-normal: 1.65;
    --ui-space-1: 0.25rem;
    --ui-space-2: 0.5rem;
    --ui-space-3: 0.75rem;
    --ui-space-4: 1rem;
    --ui-space-5: 1.25rem;
    --ui-space-6: 1.5rem;
    --ui-space-8: 2rem;
    --ui-space-10: 2.5rem;
    --ui-space-12: 3rem;
    --ui-control-height: 2.75rem;
    --ui-control-radius: 0.75rem;
    --ui-card-radius: 1rem;
    --ui-content-width: 74rem;
    --ui-reading-width: 46rem;
    --ui-transition: 160ms ease;
}

html {
    font-family: var(--ui-font-sans);
    font-size: 16px;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--ui-font-sans);
    font-size: var(--ui-text-base);
    line-height: var(--ui-leading-normal);
    text-rendering: optimizeLegibility;
}

:where(button, input, select, textarea) {
    font: inherit;
}

:where(h1, h2, h3, h4, h5, h6) {
    line-height: var(--ui-leading-tight);
    text-wrap: balance;
}

:where(p, li, dd, .description, .subtitle, .section-desc) {
    overflow-wrap: anywhere;
}

:where(img, svg, video, canvas) {
    max-width: 100%;
}

:where(.container, .page-container, .content-wrapper, .dashboard-shell) {
    width: min(100%, var(--ui-content-width));
    margin-inline: auto;
}

:where(.btn, button, input[type="button"], input[type="submit"], input[type="reset"]) {
    min-height: var(--ui-control-height);
    align-items: center;
    justify-content: center;
    gap: var(--ui-space-2);
    font-size: var(--ui-text-sm);
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: transform var(--ui-transition), box-shadow var(--ui-transition), opacity var(--ui-transition), border-color var(--ui-transition);
}

:where(.btn, button):not(:disabled):active {
    transform: translateY(1px);
}

:where(button, input, select, textarea, a):focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 3px;
}

:where(button, input, select, textarea):disabled,
:where(.btn.disabled, .btn[aria-disabled="true"]) {
    cursor: not-allowed;
    opacity: 0.56;
}

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
    min-height: var(--ui-control-height);
    padding: var(--ui-space-3) var(--ui-space-4);
    border-radius: var(--ui-control-radius);
    line-height: 1.4;
}

:where(textarea) {
    min-height: 7.5rem;
    resize: vertical;
}

:where(.form-group, .field-group) {
    margin-bottom: var(--ui-space-5);
}

:where(.form-group label, .field-group label, .form-label) {
    display: inline-block;
    margin-bottom: var(--ui-space-2);
    font-size: var(--ui-text-sm);
    font-weight: 600;
    line-height: 1.4;
}

:where(.form-hint, .help-text, .field-hint) {
    margin-top: var(--ui-space-2);
    font-size: var(--ui-text-xs);
    line-height: 1.5;
}

:where(table) {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ui-text-sm);
}

:where(th, td) {
    padding: var(--ui-space-3) var(--ui-space-4);
    vertical-align: middle;
}

:where(th) {
    font-size: var(--ui-text-xs);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-align: left;
}

:where(.card, [class$="-card"], [class*="-card "]) {
    border-radius: var(--ui-card-radius);
}

:where(.empty-state, .loading-state, .error-state) {
    padding: var(--ui-space-10) var(--ui-space-6);
    text-align: center;
}

:where(.modal, .dialog, [role="dialog"]) {
    max-height: min(90vh, 50rem);
    max-height: min(90dvh, 50rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}

:where([hidden]) {
    display: none !important;
}

@media (max-width: 860px) {
    :root {
        --ui-text-base: 0.875rem;
        --ui-space-10: 2rem;
        --ui-space-12: 2.5rem;
    }

    :where(.container, .page-container, .content-wrapper, .dashboard-shell) {
        padding-inline: var(--ui-space-4);
    }

    :where(.table-wrap, .table-container, .data-table-wrap) {
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    :where(.modal, .dialog, [role="dialog"]) {
        width: calc(100% - 2rem);
        margin-inline: auto;
    }
}

@media (max-width: 480px) {
    :root {
        --ui-card-radius: 0.875rem;
    }

    :where(.container, .page-container, .content-wrapper, .dashboard-shell) {
        padding-inline: var(--ui-space-3);
    }

    :where(th, td) {
        padding: var(--ui-space-3);
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }

    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Unified SVG iconography for public-facing pages. */
.ui-icon {
    width: 1.05em;
    height: 1.05em;
    display: inline-block;
    flex: 0 0 auto;
    vertical-align: -0.16em;
    margin-inline: 0.08em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.85;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.brand-icon .ui-icon,
.feature-icon .ui-icon,
.step-card-icon .ui-icon,
.pricing-icon .ui-icon,
.scan-icon .ui-icon,
.done-icon .ui-icon,
.about-avatar .ui-icon {
    width: 1em;
    height: 1em;
    margin: 0;
    vertical-align: middle;
}

.feature-icon .ui-icon,
.step-card-icon .ui-icon,
.pricing-icon .ui-icon,
.scan-icon .ui-icon,
.done-icon .ui-icon {
    width: 0.9em;
    height: 0.9em;
    stroke-width: 1.65;
}

.mobile-menu-btn .ui-icon,
.password-toggle .ui-icon,
.announcement-close .ui-icon {
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
}

.step-tip .ui-icon,
.about-tag .ui-icon,
.about-section-icon .ui-icon,
.announcement-icon .ui-icon {
    color: var(--primary, currentColor);
}