/**
 * Studio Air UI — 全局视觉刷新层
 * 仅覆盖设计 token 与外观，不改变 DOM 结构或 JS 行为。
 */

/* ── 全局设计 token ── */
:root {
	--bg-deep: #121214;
	--bg-elev: #1a1a1e;
	--panel: rgba(26, 26, 30, 0.92);
	--panel-solid: #1e1e22;
	--text: #f4f4f5;
	--muted: #a1a1aa;
	--line: rgba(255, 255, 255, 0.09);
	--accent: #2dd4bf;
	--accent-b: #14b8a6;
	--accent2: #38bdf8;
	--accent-soft: rgba(45, 212, 191, 0.12);
	--accent-glow: rgba(45, 212, 191, 0.22);
	--accent-muted: #5eead4;
	--coral: #f87171;
	--coral-hover: #fca5a5;
	--danger: #f87171;
	--ok: #34d399;
	--radius: 12px;
	--radius-sm: 8px;
	--shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
	--shadow-soft: 0 8px 32px rgba(0, 0, 0, 0.28);
}

html {
	color-scheme: dark;
}

/* ── 背景与氛围 ── */
.aith-bg {
	background-color: var(--bg-deep);
	background-image:
		radial-gradient(ellipse 90% 60% at 50% -20%, rgba(45, 212, 191, 0.08), transparent 58%),
		radial-gradient(ellipse 55% 40% at 100% 0%, rgba(56, 189, 248, 0.05), transparent 50%),
		radial-gradient(ellipse 50% 35% at 0% 100%, rgba(45, 212, 191, 0.04), transparent 55%);
}

body.aith-app::after {
	opacity: 0.12;
}

a:hover {
	color: var(--accent-muted);
}

/* ── 顶栏 ── */
.site-header {
	border-bottom-color: rgba(255, 255, 255, 0.07);
	background: rgba(18, 18, 20, 0.88);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.04) inset,
		0 8px 32px rgba(0, 0, 0, 0.22);
}

.brand--text {
	background: linear-gradient(120deg, #fafafa 0%, #5eead4 55%, #38bdf8 100%);
	-webkit-background-clip: text;
	background-clip: text;
}

.nav .menu a {
	border-radius: 999px;
	color: rgba(244, 244, 245, 0.78);
	font-weight: 400;
	transition:
		color 0.18s ease,
		background 0.18s ease,
		box-shadow 0.18s ease;
}

.nav .menu a:hover {
	color: #fafafa;
	background: rgba(255, 255, 255, 0.06);
}

.nav .menu a.is-active,
.nav .menu .current-menu-item > a,
.nav .menu .current_page_item > a {
	color: #fafafa;
	background: rgba(45, 212, 191, 0.14);
	box-shadow: inset 0 0 0 1px rgba(45, 212, 191, 0.28);
}

.aith-header-pill:not(.aith-header-pill--login):not(.aith-header-pill--vip):not(.aith-header-pill--credits) {
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: none;
}

.aith-header-pill:not(.aith-header-pill--login):not(.aith-header-pill--vip):not(.aith-header-pill--credits):hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(45, 212, 191, 0.25);
}

/* 未登录：登录/注册 — 图2 青绿渐变 + 黑字（与生成按钮一致） */
.aith-header-pill--login {
	color: #000000 !important;
	background: linear-gradient(135deg, #00e5ff 0%, #00d1c1 100%) !important;
	border: none !important;
	box-shadow: 0 6px 22px rgba(0, 229, 255, 0.32) !important;
}

.aith-header-pill--login:hover {
	color: #000000 !important;
	background: linear-gradient(135deg, #00e5ff 0%, #00d1c1 100%) !important;
	border: none !important;
	filter: brightness(1.06);
	box-shadow: 0 8px 26px rgba(0, 229, 255, 0.38) !important;
}

.aith-header-pill--vip {
	background: linear-gradient(180deg, #fcebd0 0%, #f5d6a8 48%, #efcc9a 100%);
	border: 1px solid rgba(196, 154, 98, 0.38);
	color: #2a1a0c;
	box-shadow: 0 4px 16px rgba(245, 214, 168, 0.32);
}

.aith-header-pill--vip:hover {
	background: linear-gradient(180deg, #fff0dc 0%, #f8ddb4 48%, #f0c888 100%);
	border-color: rgba(196, 154, 98, 0.5);
	color: #2a1a0c;
	box-shadow: 0 6px 20px rgba(245, 214, 168, 0.42);
}

.aith-header-pill--vip .aith-header-pill__vip-icon,
.aith-header-pill--vip .aith-header-pill__vip-svg {
	color: #8a5c2e;
}

.aith-header-icon-btn {
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(255, 255, 255, 0.04);
}

.aith-header-icon-btn:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(45, 212, 191, 0.22);
}

/* ── 工作台 token ── */
.model-archive--workspace {
	--ws-void: #0c0c0e;
	--ws-base: #121214;
	--ws-surface: #18181b;
	--ws-elevated: #27272a;
	--ws-border: rgba(255, 255, 255, 0.09);
	--ws-border-lit: rgba(45, 212, 191, 0.32);
	--ws-text: #f4f4f5;
	--ws-muted: #a1a1aa;
	--ws-accent: #2dd4bf;
	--ws-accent-2: #38bdf8;
	--ws-glow: rgba(45, 212, 191, 0.12);
	--ws-radius: 12px;
	--ws-shell-shadow:
		0 24px 64px rgba(0, 0, 0, 0.38),
		0 0 0 1px rgba(255, 255, 255, 0.06);
	--ws-shell-bg:
		radial-gradient(100% 70% at 0% 0%, rgba(45, 212, 191, 0.04), transparent 45%),
		linear-gradient(168deg, var(--ws-surface) 0%, var(--ws-base) 52%, var(--ws-void) 100%);
	--ws-pattern-line: transparent;
	--ws-rail-bg: linear-gradient(180deg, rgba(24, 24, 27, 0.98) 0%, rgba(18, 18, 20, 0.99) 100%);
	--ws-rail-head-bg: linear-gradient(180deg, rgba(45, 212, 191, 0.06) 0%, transparent 72%);
	--ws-sign-mark-grad: linear-gradient(118deg, #14b8a6 0%, #2dd4bf 52%, #5eead4 100%);
	--ws-rail-hover-bg: rgba(255, 255, 255, 0.06);
	--ws-rail-active-bg: linear-gradient(135deg, rgba(45, 212, 191, 0.18), rgba(56, 189, 248, 0.08));
	--ws-rail-active-color: #fafafa;
	--ws-rail-brand-shadow: 0 4px 16px rgba(45, 212, 191, 0.18);
	--ws-modes-bar-bg: linear-gradient(180deg, rgba(24, 24, 27, 0.95) 0%, rgba(18, 18, 20, 0.6) 100%);
	--ws-modes-track-bg: rgba(0, 0, 0, 0.35);
	--ws-square-hover-bg: rgba(255, 255, 255, 0.06);
	--ws-square-active-color: #0c0c0e;
	--ws-square-active-bg: linear-gradient(135deg, #2dd4bf 0%, #14b8a6 55%, #0d9488 100%);
	--ws-square-active-shadow: 0 0 0 1px rgba(45, 212, 191, 0.35), 0 8px 24px rgba(45, 212, 191, 0.16);
	--ws-toolbar-bg: linear-gradient(90deg, rgba(45, 212, 191, 0.04) 0%, transparent 28%);
	--ws-title-grad: linear-gradient(92deg, #fafafa 0%, #5eead4 48%, #38bdf8 100%);
	--ws-ctrl-bg:
		linear-gradient(90deg, rgba(45, 212, 191, 0.04) 0%, transparent 12%),
		linear-gradient(180deg, rgba(24, 24, 27, 0.96) 0%, rgba(18, 18, 20, 0.98) 100%);
	--ws-feed-bg:
		radial-gradient(ellipse 80% 50% at 50% 0%, rgba(45, 212, 191, 0.04), transparent 55%),
		linear-gradient(180deg, #18181b 0%, #121214 100%);
	--ws-studio-unified-bg:
		radial-gradient(110% 80% at 0% 0%, rgba(45, 212, 191, 0.05), transparent 46%),
		linear-gradient(165deg, #1e1e22 0%, #18181b 54%, #121214 100%);
	--ws-studio-unified-ring:
		inset 0 1px 0 rgba(255, 255, 255, 0.06),
		0 0 0 1px rgba(255, 255, 255, 0.08);
	--ws-feed-head-bg: rgba(18, 18, 20, 0.88);
	--ws-feed-foot-bg: #121214;
	--ws-form-bg: linear-gradient(155deg, rgba(30, 30, 34, 0.98) 0%, rgba(18, 18, 20, 0.99) 100%);
	--ws-form-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset, 0 12px 36px rgba(0, 0, 0, 0.32);
	--ws-chip-bg: rgba(45, 212, 191, 0.14);
	--ws-chip-color: #99f6e4;
	--ws-dd-bg: rgba(30, 30, 34, 0.96);
	--ws-dd-list-bg: rgba(24, 24, 27, 0.98);
	--ws-dd-list-shadow: 0 16px 48px rgba(0, 0, 0, 0.42);
	--ws-feed-card-bg: rgba(30, 30, 34, 0.92);
	--ws-feed-card-border: rgba(255, 255, 255, 0.08);
}

.model-archive--workspace .aith-ws-outer {
	padding: 12px clamp(10px, 1.5vw, 20px) 16px;
}

.model-archive--workspace .aith-ws-shell {
	min-height: calc(100dvh - 88px);
	border-radius: var(--ws-radius);
	border: 1px solid rgba(255, 255, 255, 0.07);
	box-shadow: var(--ws-shell-shadow);
	overflow: hidden;
}

.model-archive--workspace .aith-ws-shell::before {
	opacity: 0;
}

.model-archive--workspace .aith-ws-rail {
	border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.model-archive--workspace .aith-ws-rail__item {
	border-radius: 10px;
}

.model-archive--workspace .aith-ws-square {
	border-radius: 10px;
}

/* ── 电商导演 / 首页 Hero ── */
.hero.hero--ecom-director,
.hero.hero--ecom-director-home {
	background: transparent;
}

.hero.hero--ecom-director::before,
.hero.hero--ecom-director-home::before {
	opacity: 0.45;
	background:
		radial-gradient(ellipse 70% 50% at 50% 0%, rgba(45, 212, 191, 0.1), transparent 62%),
		radial-gradient(ellipse 40% 35% at 85% 40%, rgba(56, 189, 248, 0.06), transparent 70%);
}

.aith-ecom-director__stage {
	--ecom-composer-panel-bg: rgba(24, 24, 27, 0.98);
	--ecom-glow: rgba(45, 212, 191, 0.14);
	--ecom-badge-bg: rgba(39, 39, 42, 0.92);
	--ecom-composer-bg: rgba(30, 30, 34, 0.96);
	--ecom-promo-bg: rgba(30, 30, 34, 0.88);
	--ecom-title-grad: linear-gradient(92deg, #fafafa 0%, #2dd4bf 42%, #38bdf8 78%, #a78bfa 100%);
	--ecom-upload-bg: rgba(39, 39, 42, 0.75);
	--ecom-skill-btn-bg: rgba(39, 39, 42, 0.88);
	--ecom-pop-bg: #27272a;
	--ecom-seg-bg: rgba(24, 24, 27, 0.95);
	--ecom-seg-active-bg: rgba(39, 39, 42, 0.98);
	--ecom-free-bg: rgba(24, 24, 27, 0.82);
	--ecom-input-bg: rgba(39, 39, 42, 0.9);
}

.aith-ecom-director__stage::before {
	opacity: 0.55;
	background:
		radial-gradient(ellipse 65% 50% at 50% 35%, var(--ecom-glow), transparent 68%),
		radial-gradient(ellipse 40% 35% at 82% 62%, rgba(167, 139, 250, 0.08), transparent 70%);
}

.aith-ecom-hero__badge {
	border-radius: 999px;
	border: 1px solid rgba(45, 212, 191, 0.28);
	box-shadow: none;
}

.aith-ecom-hero__title-txt {
	filter: none;
}

/* ── 电商 composer / 门户 ── */
.aith-ecom-portal-unified {
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(24, 24, 27, 0.72);
	box-shadow: var(--shadow-soft);
	backdrop-filter: blur(16px);
}

.aith-ecom-composer__compact {
	border-radius: 14px;
	border-color: rgba(255, 255, 255, 0.1);
	background: linear-gradient(180deg, rgba(39, 39, 42, 0.95) 0%, rgba(24, 24, 27, 0.98) 100%);
	box-shadow:
		0 12px 32px rgba(0, 0, 0, 0.28),
		inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.aith-ecom-composer__compact:hover,
.aith-ecom-composer__compact:focus-visible {
	border-color: rgba(45, 212, 191, 0.32);
	box-shadow:
		0 16px 40px rgba(0, 0, 0, 0.32),
		0 0 0 1px rgba(45, 212, 191, 0.12),
		inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.aith-ecom-composer__expanded {
	border-radius: 14px;
	border-color: rgba(255, 255, 255, 0.1);
	box-shadow: 0 20px 48px rgba(0, 0, 0, 0.35);
}

.aith-ecom-composer__send {
	border-radius: 10px;
	background: linear-gradient(135deg, #2dd4bf 0%, #14b8a6 52%, #0d9488 100%);
	box-shadow: 0 6px 20px rgba(45, 212, 191, 0.22);
}

.aith-ecom-composer__send:hover:not(:disabled) {
	box-shadow: 0 10px 28px rgba(45, 212, 191, 0.28);
	filter: brightness(1.04);
}

.aith-ecom-skill-btn,
.aith-ecom-imgedit__skill-btn {
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: var(--ecom-skill-btn-bg, rgba(39, 39, 42, 0.88));
	box-shadow: none;
}

.aith-ecom-skill-btn:hover,
.aith-ecom-imgedit__skill-btn:hover {
	border-color: rgba(45, 212, 191, 0.28);
	background: rgba(45, 212, 191, 0.1);
}

.aith-ecom-skill-btn.is-active,
.aith-ecom-imgedit__skill-btn.is-active,
.aith-ecom-imgedit__skill-btn[aria-pressed="true"] {
	border-color: rgba(45, 212, 191, 0.42);
	background: rgba(45, 212, 191, 0.16);
	box-shadow: inset 0 0 0 1px rgba(45, 212, 191, 0.2);
}

.aith-ecom-seg {
	border-radius: 10px;
}

.aith-ecom-seg__btn {
	border-radius: 8px;
}

.aith-ecom-seg__btn.is-active {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* ── 修图工作台 ── */
.aith-ecom-imgedit-builder {
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(24, 24, 27, 0.92);
	box-shadow: var(--shadow-soft);
}

.aith-ecom-imgedit__aside {
	border-radius: 12px;
	border-color: rgba(255, 255, 255, 0.08);
	background: rgba(39, 39, 42, 0.45);
}

.aith-ecom-imgedit__canvas-wrap {
	border-radius: 12px;
	border-color: rgba(255, 255, 255, 0.1);
	background: rgba(39, 39, 42, 0.55);
}

.aith-ecom-imgedit__upload {
	border-radius: 12px;
	border-color: rgba(255, 255, 255, 0.14);
}

.aith-ecom-imgedit__upload:hover {
	border-color: rgba(45, 212, 191, 0.35);
	background: rgba(45, 212, 191, 0.06);
}

.aith-ecom-imgedit__mode-btn.is-active {
	background: rgba(45, 212, 191, 0.16);
	color: #5eead4;
	box-shadow: inset 0 0 0 1px rgba(45, 212, 191, 0.32);
}

/* ── 卡片 / 面板通用 ── */
.aith-card,
.aith-panel,
.aith-home-link-tile {
	border-radius: var(--radius);
	border-color: rgba(255, 255, 255, 0.08);
	box-shadow: var(--shadow-soft);
}

.aith-home-link-tile:hover {
	border-color: rgba(45, 212, 191, 0.28);
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
}

/* ── 按钮与表单 ── */
button,
.aith-btn,
input[type="submit"],
.aith-ws-btn {
	border-radius: var(--radius-sm);
}

input:not([type="checkbox"]):not([type="radio"]),
textarea,
select,
.aith-input {
	border-radius: var(--radius-sm);
	border-color: rgba(255, 255, 255, 0.1);
	background: rgba(39, 39, 42, 0.72);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	border-color: rgba(45, 212, 191, 0.42);
	box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.12);
}

/* ── 滚动条 ── */
* {
	scrollbar-color: rgba(113, 113, 122, 0.55) transparent;
}