/* ============================================================
   image_editor.html 苹果风浅色主题（加载于 image-editor-premium.css 之后覆盖）
   设计语言与 douyin-apple.css 保持一致：浅色渐变底 + 毛玻璃面板 + 苹果蓝
   ============================================================ */

:root {
    --ie-bg-1: #f2f6f9;
    --ie-bg-2: #e4ebf1;
    --ie-panel: rgba(255, 255, 255, .56);
    --ie-panel-strong: rgba(255, 255, 255, .78);
    --ie-line: rgba(255, 255, 255, .64);
    --ie-line-dark: rgba(102, 126, 148, .16);
    --ie-text: #1d1d1f;
    --ie-muted: #6e6e73;
    --ie-blue: #0a84ff;
    --ie-blue-deep: #3d75e6;
    --ie-violet: #715bd8;
    --ie-red: #dc5261;
    --ie-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), 0 14px 38px rgba(38, 58, 78, .09);
}

/* ---------- 页面底色：浅灰蓝渐变 + 柔光晕（覆盖旅行风背景图） ---------- */

html {
    background: var(--ie-bg-2);
}

body {
    color: var(--ie-text);
    background:
        radial-gradient(circle at 12% -4%, rgba(80, 154, 237, .18), transparent 34%),
        radial-gradient(circle at 92% 2%, rgba(88, 188, 156, .12), transparent 30%),
        linear-gradient(145deg, var(--ie-bg-1) 0%, var(--ie-bg-2) 100%) !important;
}

body::before {
    background:
        radial-gradient(circle at 20% 8%, rgba(113, 91, 216, .08), transparent 36%),
        linear-gradient(115deg, rgba(255, 255, 255, .22), transparent 42%, rgba(255, 255, 255, .12)) !important;
}

/* ---------- 顶部导航：浅色毛玻璃 ---------- */

.header {
    color: var(--ie-text);
    border-bottom: 1px solid var(--ie-line);
    background: rgba(255, 255, 255, .5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82), 0 10px 30px rgba(31, 45, 61, .06);
    -webkit-backdrop-filter: blur(28px) saturate(1.16);
    backdrop-filter: blur(28px) saturate(1.16);
}

.header::after {
    background: linear-gradient(90deg, transparent, rgba(61, 117, 230, .22), transparent);
}

.logo {
    color: var(--ie-text);
}

.logo-icon {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .74);
    border-radius: 12px;
    background: linear-gradient(145deg, #7669dc, #477fe3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 8px 22px rgba(72, 101, 190, .2);
}

.logo-copy {
    color: var(--ie-text);
}

.logo-copy small {
    color: var(--ie-muted);
}

.history-toggle-btn {
    color: #33526e;
    border: 1px solid var(--ie-line);
    border-radius: 11px;
    background: rgba(255, 255, 255, .5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82), 0 7px 18px rgba(31, 45, 61, .07);
    transition: .18s ease;
}

.history-toggle-btn:hover {
    color: var(--ie-blue-deep);
    border-color: rgba(61, 117, 230, .3);
    background: rgba(255, 255, 255, .82);
}

/* ---------- 页首 Hero：浅色 ---------- */

.page-header {
    border: 1px solid var(--ie-line);
    background:
        radial-gradient(circle at 88% 12%, rgba(113, 91, 216, .09), transparent 42%),
        radial-gradient(circle at 6% 90%, rgba(61, 117, 230, .08), transparent 38%),
        linear-gradient(145deg, rgba(255, 255, 255, .68), rgba(255, 255, 255, .46));
    box-shadow: var(--ie-shadow);
    -webkit-backdrop-filter: blur(18px) saturate(1.18);
    backdrop-filter: blur(18px) saturate(1.18);
}

.page-header::before {
    border-color: rgba(61, 117, 230, .16);
    box-shadow: 0 0 0 50px rgba(61, 117, 230, .025), 0 0 0 100px rgba(113, 91, 216, .02);
}

.page-header::after {
    background: rgba(61, 117, 230, .07);
}

.page-eyebrow {
    color: var(--ie-blue-deep);
}

.page-title {
    color: var(--ie-text);
}

.page-description {
    color: var(--ie-muted);
}

.feature-pill {
    color: #33526e;
    border-color: rgba(61, 117, 230, .16);
    background: rgba(61, 117, 230, .07);
}

.hero-layer {
    border-color: rgba(255, 255, 255, .7);
    background: linear-gradient(145deg, rgba(255, 255, 255, .66), rgba(199, 216, 236, .4));
    box-shadow: 0 18px 34px rgba(38, 58, 78, .12);
}

.hero-layer::before {
    background: linear-gradient(145deg, rgba(118, 105, 220, .5), rgba(71, 127, 227, .44));
}

.hero-ai {
    background: linear-gradient(135deg, #7669dc, #477fe3);
    box-shadow: 0 15px 34px rgba(72, 101, 190, .3);
}

/* ---------- 模式切换：苹果分段控件 ---------- */

.mode-tabs {
    border-color: var(--ie-line);
    background: rgba(255, 255, 255, .44);
    box-shadow: var(--ie-shadow);
    -webkit-backdrop-filter: blur(18px) saturate(1.18);
    backdrop-filter: blur(18px) saturate(1.18);
}

.mode-tab {
    color: var(--ie-muted);
}

.mode-tab:hover {
    color: var(--ie-text);
    background: rgba(255, 255, 255, .6);
}

.mode-tab.active {
    color: var(--ie-blue-deep);
    background: rgba(255, 255, 255, .92);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 6px 16px rgba(31, 45, 61, .1);
}

.mode-number {
    opacity: .72;
}

/* ---------- 卡片：毛玻璃面板 ---------- */

.unified-card {
    border: 1px solid var(--ie-line);
    border-radius: 20px;
    background: var(--ie-panel);
    box-shadow: var(--ie-shadow);
    -webkit-backdrop-filter: blur(18px) saturate(1.18);
    backdrop-filter: blur(18px) saturate(1.18);
}

.unified-card:hover {
    border-color: var(--ie-line);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78), 0 18px 46px rgba(38, 58, 78, .11);
}

.card-kicker {
    color: var(--ie-blue-deep);
}

.card-title {
    color: var(--ie-text);
}

.card-meta {
    color: var(--ie-muted);
}

/* ---------- 上传区 ---------- */

.upload-box,
.upload-area {
    border-color: rgba(102, 126, 148, .24);
    border-radius: 16px;
    background: rgba(255, 255, 255, .42);
    transition: .18s ease;
}

.upload-box:hover,
.upload-area:hover {
    border-color: rgba(61, 117, 230, .45);
    background: rgba(255, 255, 255, .62);
}

.upload-icon {
    color: #2f6fed;
    border: 1px solid rgba(47, 111, 237, .18);
    background: rgba(255, 255, 255, .94);
    box-shadow:
        0 6px 14px rgba(38, 72, 118, .10),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

.upload-icon-reference,
.upload-icon-visual {
    color: #2f6fed;
    border-color: rgba(47, 111, 237, .18);
    background: rgba(255, 255, 255, .94);
}

.upload-area:hover .upload-icon,
.upload-area:focus-visible .upload-icon {
    color: #176bff;
    border-color: rgba(23, 107, 255, .34);
    background: #fff;
    box-shadow:
        0 8px 18px rgba(38, 72, 118, .13),
        inset 0 1px 0 #fff;
}

.upload-label {
    color: var(--ie-text);
}

.upload-text,
.upload-hint {
    color: var(--ie-muted);
}

.add-more-btn {
    color: var(--ie-blue-deep);
    border-color: rgba(61, 117, 230, .24);
    border-radius: 12px;
    background: rgba(61, 117, 230, .06);
}

.add-more-btn:hover {
    background: rgba(61, 117, 230, .12);
}

.remove-btn,
.delete-btn {
    color: var(--ie-red);
    border-color: rgba(220, 82, 97, .28);
    background: rgba(220, 82, 97, .07);
}

.remove-btn:hover,
.delete-btn:hover {
    background: rgba(220, 82, 97, .14);
}

/* ---------- 表单控件（premium 用了 !important，这里同级覆盖） ---------- */

.prompt-textarea,
#genModelSelect {
    color: var(--ie-text) !important;
    border: 1px solid rgba(102, 126, 148, .22) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, .6) !important;
}

.prompt-textarea:focus,
#genModelSelect:focus {
    border-color: rgba(61, 117, 230, .55) !important;
    background: rgba(255, 255, 255, .9) !important;
    box-shadow: 0 0 0 4px rgba(61, 117, 230, .12) !important;
}

/* ---------- 按钮 ---------- */

.btn-primary {
    color: #fff;
    border: 0;
    border-radius: 13px;
    background: linear-gradient(145deg, #4a8bf5, #2f6fe0);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 24px rgba(47, 111, 224, .28);
}

.btn-primary:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 14px 30px rgba(47, 111, 224, .34);
}

.btn-secondary {
    color: #33526e;
    border: 1px solid var(--ie-line);
    border-radius: 13px;
    background: rgba(255, 255, 255, .5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82);
}

.btn-secondary:hover {
    color: var(--ie-blue-deep);
    border-color: rgba(61, 117, 230, .3);
    background: rgba(255, 255, 255, .82);
}

.btn-small {
    border-radius: 10px;
}

.btn-view {
    color: var(--ie-blue-deep);
    border-color: rgba(61, 117, 230, .26);
    background: rgba(61, 117, 230, .07);
}

.btn-download {
    color: #1f7a52;
    border-color: rgba(35, 166, 110, .28);
    background: rgba(35, 166, 110, .08);
}

/* ---------- 结果区 ---------- */

.empty-result {
    color: var(--ie-muted);
    border: 1px dashed rgba(102, 126, 148, .3);
    border-radius: 18px;
    background: rgba(255, 255, 255, .4);
}

.empty-icon {
    color: #9aa8b7;
}

.result-item {
    border: 1px solid var(--ie-line);
    border-radius: 16px;
    background: rgba(255, 255, 255, .5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .66), 0 8px 20px rgba(31, 45, 61, .06);
}

.result-item:hover {
    border-color: rgba(61, 117, 230, .32);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .76), 0 14px 32px rgba(38, 58, 78, .1);
}

.result-image,
.preview-image,
.multi-preview-item img {
    border-radius: 12px;
}

.multi-preview-item {
    border: 1px solid var(--ie-line);
    border-radius: 14px;
    background: rgba(255, 255, 255, .5);
}

/* ---------- 加载层 / 遮罩：浅色毛玻璃 ---------- */

.loading-overlay,
.history-overlay {
    background: rgba(231, 238, 244, .6);
    -webkit-backdrop-filter: blur(16px) saturate(1.1);
    backdrop-filter: blur(16px) saturate(1.1);
}

.spinner {
    border-color: rgba(61, 117, 230, .16);
    border-top-color: var(--ie-blue-deep);
    box-shadow: none;
}

.loading-text {
    color: #33526e;
}

/* ---------- 生成历史侧栏 ---------- */

.history-sidebar {
    border-left: 1px solid var(--ie-line);
    background: rgba(246, 249, 252, .92);
    box-shadow: -24px 0 70px rgba(38, 58, 78, .12);
    -webkit-backdrop-filter: blur(26px) saturate(1.16);
    backdrop-filter: blur(26px) saturate(1.16);
}

.history-header {
    color: var(--ie-text);
    border-bottom: 1px solid var(--ie-line-dark);
    background: linear-gradient(145deg, rgba(255, 255, 255, .82), rgba(246, 249, 252, .6));
}

.history-header h3 {
    color: var(--ie-text);
}

.history-close-btn {
    color: var(--ie-muted);
    border-color: var(--ie-line);
    background: rgba(255, 255, 255, .55);
}

.history-close-btn:hover {
    color: var(--ie-text);
    background: rgba(255, 255, 255, .85);
}

.history-item {
    border: 1px solid var(--ie-line);
    border-radius: 15px;
    background: rgba(255, 255, 255, .66);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 6px 16px rgba(31, 45, 61, .05);
}

.history-item:hover {
    border-color: rgba(61, 117, 230, .3);
    background: rgba(255, 255, 255, .82);
}

.history-item-label,
.history-item-time {
    color: var(--ie-muted);
}

.history-item-prompt {
    color: var(--ie-text);
}

.history-pagination button,
.history-pagination {
    color: #33526e;
}

/* ---------- 图片预览弹窗 ---------- */

.image-modal {
    background: rgba(24, 35, 50, .55);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.modal-close {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .4);
    background: rgba(255, 255, 255, .18);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.modal-close:hover {
    background: rgba(255, 255, 255, .32);
}

/* ---------- 滚动条苹果风 ---------- */

::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: rgba(102, 126, 148, .3);
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(102, 126, 148, .46);
    background-clip: content-box;
}

::-webkit-scrollbar-track {
    background: transparent;
}