/**
 * AI Studio 通用组件（玻璃卡片 / 表单 / 提示 / 页面容器）
 * 依赖 tokens-ai.css + home-theme-ai.css
 */

/* ---- 页面容器 ---- */
body.home-theme-ai .ai-page {
    padding-top: var(--ai-space-lg);
    padding-bottom: 56px;
    max-width: var(--ai-page-max);
    margin-left: auto;
    margin-right: auto;
}

body.home-theme-ai .ai-page--narrow {
    max-width: var(--ai-page-narrow);
}

body.home-theme-ai .ai-page--wide {
    max-width: min(100%, 1920px);
}

/* ---- 玻璃卡片 ---- */
body.home-theme-ai .ai-glass-card {
    position: relative;
    border-radius: var(--ai-radius);
    background: var(--ai-glass-bg);
    backdrop-filter: var(--ai-glass-blur);
    -webkit-backdrop-filter: var(--ai-glass-blur);
    border: 1px solid var(--ai-glass-border);
    box-shadow: var(--ai-glass-shadow);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

body.home-theme-ai .ai-glass-card:hover {
    border-color: rgba(139, 92, 246, 0.22);
}

body.home-theme-ai .ai-glass-card--accent {
    background: linear-gradient(145deg, rgba(139, 92, 246, 0.14), rgba(18, 18, 26, 0.72));
    border-color: rgba(139, 92, 246, 0.22);
}

body.home-theme-ai .ai-glass-card__inner {
    padding: clamp(20px, 2.5vw, 28px);
}

body.home-theme-ai .ai-glass-card--center .ai-glass-card__inner {
    text-align: center;
}

/* front-panel 兼容：子页统一玻璃 */
body.home-theme-ai.front-subpage .front-panel:not(.member-account-panel) {
    background: var(--ai-glass-bg);
    backdrop-filter: var(--ai-glass-blur);
    -webkit-backdrop-filter: var(--ai-glass-blur);
    border: 1px solid var(--ai-glass-border);
    box-shadow: var(--ai-glass-shadow);
    border-radius: var(--ai-radius);
}

/* ---- 提示 ---- */
body.home-theme-ai .ai-alert {
    display: flex;
    gap: 14px;
    padding: 14px 18px;
    border-radius: var(--ai-radius-sm);
    margin-bottom: var(--ai-space-md);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

body.home-theme-ai .ai-alert__icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 700;
}

body.home-theme-ai .ai-alert p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--ai-muted);
}

body.home-theme-ai .ai-alert strong {
    display: block;
    margin-bottom: 4px;
    font-size: 0.9375rem;
    color: var(--ai-text);
}

body.home-theme-ai .ai-alert--success {
    background: rgba(52, 211, 153, 0.08);
    border: 1px solid rgba(52, 211, 153, 0.22);
}

body.home-theme-ai .ai-alert--success .ai-alert__icon {
    background: rgba(52, 211, 153, 0.15);
    color: var(--ai-success);
}

body.home-theme-ai .ai-alert--warn {
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.22);
}

body.home-theme-ai .ai-alert--warn .ai-alert__icon {
    background: rgba(251, 191, 36, 0.15);
    color: var(--ai-warn);
}

body.home-theme-ai .ai-alert--error {
    background: rgba(248, 113, 113, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.22);
}

body.home-theme-ai .ai-alert--error .ai-alert__icon {
    background: rgba(248, 113, 113, 0.15);
    color: var(--ai-danger);
}

body.home-theme-ai .ai-alert--info {
    background: rgba(139, 92, 246, 0.08);
    border: 1px solid rgba(139, 92, 246, 0.22);
}

body.home-theme-ai .ai-alert--info .ai-alert__icon {
    background: rgba(139, 92, 246, 0.15);
    color: var(--ai-accent);
}

/* 兼容旧 alert 类名 */
body.home-theme-ai .login-error {
    padding: 12px 16px;
    margin-bottom: var(--ai-space-md);
    border-radius: var(--ai-radius-xs);
    font-size: 0.875rem;
    color: var(--ai-danger);
    background: rgba(248, 113, 113, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.22);
}

body.home-theme-ai .flash.flash-ok {
    padding: 12px 16px;
    margin-bottom: var(--ai-space-md);
    border-radius: var(--ai-radius-xs);
    font-size: 0.875rem;
    color: var(--ai-success);
    background: rgba(52, 211, 153, 0.08);
    border: 1px solid rgba(52, 211, 153, 0.22);
}

body.home-theme-ai .flash.flash-err {
    padding: 12px 16px;
    margin-bottom: var(--ai-space-md);
    border-radius: var(--ai-radius-xs);
    font-size: 0.875rem;
    color: var(--ai-danger);
    background: rgba(248, 113, 113, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.22);
}

/* ---- 表单 ---- */
body.home-theme-ai .ai-form .ai-field,
body.home-theme-ai .login-form .field {
    display: block;
    margin-bottom: var(--ai-space-md);
}

body.home-theme-ai .ai-field__label,
body.home-theme-ai .login-form .field > span,
body.home-theme-ai .ai-form legend {
    display: block;
    margin-bottom: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ai-muted);
}

body.home-theme-ai .ai-field__req {
    font-style: normal;
    font-size: 0.75rem;
    color: var(--ai-accent);
    margin-left: 4px;
}

body.home-theme-ai .ai-field__hint {
    display: block;
    margin-top: 6px;
    font-size: 0.75rem;
    color: var(--ai-muted);
    line-height: 1.45;
}

body.home-theme-ai .ai-input,
body.home-theme-ai .ai-textarea,
body.home-theme-ai .ai-select,
body.home-theme-ai.front-subpage input[type="text"],
body.home-theme-ai.front-subpage input[type="password"],
body.home-theme-ai.front-subpage input[type="email"],
body.home-theme-ai.front-subpage input[type="number"],
body.home-theme-ai.front-subpage input[type="url"],
body.home-theme-ai.front-subpage input[type="search"],
body.home-theme-ai.front-subpage textarea,
body.home-theme-ai.front-subpage select {
    width: 100%;
    padding: 12px 14px;
    border-radius: var(--ai-radius-xs);
    font-family: inherit;
    font-size: 0.9375rem;
    background-color: var(--ai-bg1, #111118);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--ai-text);
    transition: border-color 0.2s, box-shadow 0.2s;
}

body.home-theme-ai select option,
body.home-theme-ai select optgroup {
    background-color: var(--ht-card, #18181f);
    color: var(--ht-text, #fafafa);
}

body.home-theme-ai .ai-textarea,
body.home-theme-ai.front-subpage textarea {
    line-height: 1.55;
    resize: vertical;
    min-height: 100px;
}

body.home-theme-ai .ai-input:focus,
body.home-theme-ai .ai-textarea:focus,
body.home-theme-ai .ai-select:focus,
body.home-theme-ai.front-subpage input:focus,
body.home-theme-ai.front-subpage textarea:focus,
body.home-theme-ai.front-subpage select:focus {
    outline: none;
    border-color: rgba(139, 92, 246, 0.5);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

body.home-theme-ai .ai-input:disabled,
body.home-theme-ai.front-subpage input:disabled,
body.home-theme-ai.front-subpage select:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ---- 认证页窄卡 ---- */
body.home-theme-ai .front-auth-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 160px);
    padding-top: var(--ai-space-md);
    padding-bottom: var(--ai-space-xl);
}

body.home-theme-ai .ai-glass-card.front-auth-card {
    width: 100%;
    max-width: var(--ai-page-narrow);
    margin: 0 auto;
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0;
}

body.home-theme-ai .front-auth-card.login-card:not(.ai-glass-card) {
    width: 100%;
    max-width: var(--ai-page-narrow);
    margin: 0 auto;
    background: var(--ai-glass-bg);
    backdrop-filter: var(--ai-glass-blur);
    -webkit-backdrop-filter: var(--ai-glass-blur);
    border: 1px solid var(--ai-glass-border);
    box-shadow: var(--ai-glass-shadow);
    border-radius: var(--ai-radius);
    padding: clamp(28px, 4vw, 36px) clamp(24px, 3vw, 32px);
}

body.home-theme-ai .login-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--ai-space-lg);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ai-text);
}

body.home-theme-ai .login-tip {
    margin: 0 0 var(--ai-space-md);
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--ai-muted);
    text-align: center;
}

body.home-theme-ai .login-form-actions {
    margin-top: var(--ai-space-md);
}

body.home-theme-ai .btn-auth-submit {
    width: 100%;
    min-height: 48px;
    border-radius: var(--ai-radius-xs);
}

body.home-theme-ai .auth-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: var(--ai-space-lg);
}

body.home-theme-ai .back-home {
    font-size: 0.875rem;
    color: var(--ai-muted);
    text-decoration: none;
    transition: color 0.2s;
}

body.home-theme-ai .back-home:hover {
    color: var(--ai-cyan);
}

body.home-theme-ai .reg-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---- 区块标题 ---- */
body.home-theme-ai .ai-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    margin-bottom: var(--ai-space-md);
}

body.home-theme-ai .ai-section-head__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ai-text);
    display: flex;
    align-items: center;
    gap: 10px;
}

body.home-theme-ai .ai-section-head__meta {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ai-muted);
}

/* ---- 顶栏导航高亮 ---- */
body.home-theme-ai .nav a.is-active {
    color: var(--ai-cyan);
    background: rgba(139, 92, 246, 0.12);
}

/* ---- 页脚 ---- */
body.home-theme-ai .site-footer {
    border-top: 1px solid var(--ai-glass-border);
    padding-top: var(--ai-space-lg);
    padding-bottom: var(--ai-space-lg);
}

body.home-theme-ai .site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ai-space-md);
    max-width: var(--layout-max, 1920px);
    margin: 0 auto;
    padding: 0 var(--layout-gutter);
}

body.home-theme-ai .site-footer__brand {
    margin: 0;
    font-size: 0.875rem;
    color: var(--ai-muted);
}

body.home-theme-ai .site-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

body.home-theme-ai .site-footer__links a {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ai-muted);
    text-decoration: none;
    transition: color 0.2s;
}

body.home-theme-ai .site-footer__links a:hover {
    color: var(--ai-cyan);
}

/* ---- 子导航（通用 ai-subnav，兼容 author-subnav） ---- */
body.home-theme-ai .ai-subnav,
body.home-theme-ai .author-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px;
    border-radius: 999px;
    margin-bottom: var(--ai-space-lg);
    max-width: fit-content;
    background: var(--ai-glass-bg);
    backdrop-filter: var(--ai-glass-blur);
    -webkit-backdrop-filter: var(--ai-glass-blur);
    border: 1px solid var(--ai-glass-border);
    box-shadow: var(--ai-glass-shadow);
}

body.home-theme-ai .ai-subnav__link,
body.home-theme-ai .author-subnav__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ai-muted);
    text-decoration: none;
    transition: color 0.2s, background 0.2s, box-shadow 0.2s;
    white-space: nowrap;
}

body.home-theme-ai .ai-subnav__link:hover:not(.is-disabled),
body.home-theme-ai .author-subnav__link:hover:not(.is-disabled) {
    color: var(--ai-text);
    background: rgba(255, 255, 255, 0.06);
}

body.home-theme-ai .ai-subnav__link.is-active,
body.home-theme-ai .author-subnav__link.is-active {
    color: #fff;
    background: linear-gradient(135deg, var(--ai-accent-d), var(--ai-accent));
    box-shadow: 0 4px 20px var(--ai-glow);
}

body.home-theme-ai .ai-subnav__link.is-disabled,
body.home-theme-ai .author-subnav__link.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    body.home-theme-ai .header-start .nav--left {
        overflow-x: auto;
        flex-wrap: nowrap;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    body.home-theme-ai .header-start .nav--left::-webkit-scrollbar {
        display: none;
    }

    body.home-theme-ai .ai-subnav,
    body.home-theme-ai .author-subnav {
        max-width: 100%;
        border-radius: var(--ai-radius-sm);
    }

    body.home-theme-ai .ai-subnav__link,
    body.home-theme-ai .author-subnav__link {
        flex: 1 1 auto;
        justify-content: center;
        padding: 10px 12px;
        font-size: 0.8125rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.home-theme-ai .ai-glass-card,
    body.home-theme-ai .ai-subnav__link,
    body.home-theme-ai .author-subnav__link {
        transition: none;
    }
}