/**
 * iOS 设置界面完整 CSS 样式
 * 整理自 style.css，供美化参考
 *
 * 包含：
 * 1. CSS变量定义（主题色系统）
 * 2. 基础组件（按钮、开关、选择器）
 * 3. 锁屏预览
 * 4. 安全区预览
 * 5. 主题切换按钮
 * 6. iOS设置主界面（.iosm-*）
 * 7. 应用自定义设置
 */

/* ================================================================
   第1部分：CSS 变量定义（来自 style.css 第 5315-5340 行）
   ================================================================ */
:root {
    /* --- ULTIMATE LIQUID PHYSICS ENGINE (Global Variables) --- */

    /* > BASE ATMOSPHERE */
    --iosm-bg: #f4f1ea;
    /* Warm Stone Fallback */
    --liquid-bg-gradient: linear-gradient(135deg, #fdfbf7 0%, #f4f1ea 100%);

    /* > TYPOGRAPHY (Outfit Integration) */
    --font-primary: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    --iosm-label: #1d1d1f;
    /* Graphite Deep */
    --iosm-muted: #86868b;
    /* Apple Muted */

    /* > LIQUID GLASS MATERIALS (High Fidelity) */
    /* The surface itself - highly transparent with blur */
    --glass-surface: rgba(255, 255, 255, 0.65);
    --glass-surface-hover: rgba(255, 255, 255, 0.75);
    /* The background of the card containers */
    --glass-card-bg: rgba(255, 255, 255, 0.60);
    /* The "Cut Glass" border effect */
    --glass-border: rgba(255, 255, 255, 0.4);
    /* The internal light reflection */
    --glass-shine: linear-gradient(120deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 70%);
    /* The Blur Strength */
    --glass-frost: blur(24px) saturate(180%);

    /* > LEGACY MAPPING (Preserving existing class logic) */
    --iosm-card: var(--glass-surface);
    /* --iosm-card-bg is used for groups */
    --iosm-card-bg: var(--glass-card-bg);

    /* > DEPTH & PHYSICS */
    --iosm-radius: 24px;
    /* Soft Squircle */
    --iosm-sep: rgba(0, 0, 0, 0.06);
    /* Soft Separator */

    /* Multi-Layer Ambient Shadows */
    --iosm-shadow-ambient: 0 12px 40px -8px rgba(100, 100, 90, 0.08);
    --iosm-shadow-direct: 0 2px 8px -2px rgba(100, 100, 90, 0.04);
    --iosm-shadow: var(--iosm-shadow-ambient), var(--iosm-shadow-direct);

    /* Animation Physics */
    --ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-fluid: cubic-bezier(0.4, 0.0, 0.2, 1);

    /* > THEME COLORS (DYNAMIC SYSTEM) - PRESERVED */
    --theme-primary: #667eea;
    --theme-secondary: #764ba2;
    --theme-gradient: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-secondary) 100%);

    /* Theme Presets */
    --theme-lock: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --theme-home: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
    --theme-chat: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
    --theme-wallet: linear-gradient(135deg, #ffd700 0%, #ffb347 100%);
    --theme-store: linear-gradient(135deg, #ff7043 0%, #ff5722 100%);
    --theme-backpack: linear-gradient(135deg, #66bb6a 0%, #4caf50 100%);
    --theme-worldbook: linear-gradient(135deg, #5c6bc0 0%, #3f51b5 100%);
    --theme-settings: linear-gradient(135deg, #78909c 0%, #546e7a 100%);
    --theme-ios-settings: linear-gradient(135deg, #007aff 0%, #0051d5 100%);
    --theme-mqtt: linear-gradient(135deg, #26c6da 0%, #00acc1 100%);
}

/* --- DARK MODE OVERRIDES (Obsidian Glass) --- */
[data-theme="night"],
body.night,
body.dark-mode {
    --iosm-bg: #121212;
    --liquid-bg-gradient: linear-gradient(135deg, #1a1a1a 0%, #000000 100%);

    /* Text */
    --iosm-label: #f5f5f7;
    --iosm-muted: #86868b;

    /* Obsidian Glass Materials */
    --glass-surface: rgba(30, 30, 35, 0.65);
    --glass-surface-hover: rgba(40, 40, 45, 0.75);
    --glass-card-bg: rgba(30, 30, 35, 0.60);
    --glass-border: rgba(255, 255, 255, 0.08);
    /* Faint light edge */
    --glass-shine: linear-gradient(120deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0) 70%);

    /* Mappings */
    --iosm-card: var(--glass-surface);
    --iosm-card-bg: var(--glass-card-bg);

    /* Depth */
    --iosm-sep: rgba(255, 255, 255, 0.08);
    --iosm-shadow-ambient: 0 12px 40px -10px rgba(0, 0, 0, 0.6);
    --iosm-shadow-direct: 0 2px 8px -2px rgba(0, 0, 0, 0.3);
    --iosm-shadow: var(--iosm-shadow-ambient), var(--iosm-shadow-direct);
}


/* ================================================================
   第2部分：基础组件（来自 style.css 第 483-610 行）
   ================================================================ */

/* iOS按钮样式 */
.iosm-btn-primary {
    padding: 10px 20px;
    background: #3f6cff;
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    margin-right: 10px;
}

.iosm-btn-primary:hover {
    background: #2c5ce5;
}

.iosm-btn-secondary {
    padding: 10px 20px;
    background: #f2f2f7;
    color: #3f6cff;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
}

.iosm-btn-secondary:hover {
    background: #e5e5ea;
}

.iosm-hint {
    font-size: 12px;
    color: #999;
    padding: 0 15px;
}

/* 界面选择器 */
.iosm-select {
    width: 100%;
    padding: 12px 15px;
    margin: 0 15px;
    width: calc(100% - 30px);
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background: white;
    font-size: 14px;
    cursor: pointer;
}

/* IOSM Switch - Liquid Capsule Style */
.iosm-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 30px;
    margin-left: auto;
    flex-shrink: 0;
}

.iosm-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.iosm-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(120, 120, 128, 0.16);
    /* Translucent Grey */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: .4s cubic-bezier(0.34, 1.56, 0.64, 1);
    border-radius: 30px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    /* Inner depth */
}

.iosm-slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    border-radius: 50%;
    transition: .4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 1px rgba(0, 0, 0, 0.1);
    /* Drop shadow for knob */
}

input:checked+.iosm-slider {
    background-color: #34c759;
    /* Apple Green - Keep solid for clarity */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

input:checked+.iosm-slider:before {
    transform: translateX(20px);
}


/* ================================================================
   第3部分：锁屏预览（来自 style.css 第 518-550 行）
   ================================================================ */

.lockscreen-preview {
    margin: 15px;
    height: 200px;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    background: radial-gradient(120% 100% at 50% 100%, rgba(0, 0, 0, .28), transparent 60%),
        linear-gradient(180deg, #060d22 0%, #0a173f 55%, #0a1a4a 100%);
    transition: background 0.3s;
}

.preview-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
}

.preview-time {
    font-size: 48px;
    font-weight: 600;
    letter-spacing: -0.5px;
}

.preview-date {
    font-size: 14px;
    opacity: 0.8;
    margin-top: 5px;
}


/* ================================================================
   第4部分：安全区预览（来自 style.css 第 613-652 行）
   ================================================================ */

.safe-area-preview {
    margin: 15px;
    height: 250px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.preview-phone {
    width: 100%;
    height: 100%;
    background: #f0f0f0;
    position: relative;
}

.preview-screen {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.preview-content-area {
    flex: 1;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 14px;
}

.preview-safe-area {
    height: 60px;
    background: linear-gradient(180deg, #060d22 0%, #0a173f 55%, #0a1a4a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
}


/* ================================================================
   第5部分：主题切换按钮（来自 style.css 第 1046-1170 行）
   ================================================================ */

.theme-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px !important;
}

.theme-toggle-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.theme-toggle-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary, #1d1d1f);
}

.theme-toggle-desc {
    font-size: 13px;
    color: var(--text-secondary, #8e8e93);
}

/* --- The Main Theme Switcher (Refined Jewel Style) --- */
.theme-toggle-btn {
    appearance: none;
    border: none;
    background: rgba(255, 255, 255, 0.4);
    /* Frosted glass */
    width: 80px;
    height: 44px;
    border-radius: 22px;
    position: relative;
    cursor: pointer;
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.05),
        0 4px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.5s var(--ease-elastic);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    flex-shrink: 0;
    /* Prevent squeezing */
}

/* The Animated Mesh Layer - Subtle & Elegant (Porcelain Version) */
.screen.iosm::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background:
        radial-gradient(circle at 50% 50%, var(--cream-bg-3, #fff) 0%, transparent 60%),
        radial-gradient(circle at 80% 20%, var(--cream-bg-1, #fdfbf7) 0%, transparent 50%),
        linear-gradient(135deg, var(--cream-bg-1, #fdfbf7) 0%, var(--cream-bg-2, #f4f1ea) 100%);
    background-size: 100% 100%;
    animation: mist-move 20s infinite alternate ease-in-out;
    z-index: -1;
    filter: blur(80px);
}

/* Dark Mode Mesh Override */
[data-theme="night"] .screen.iosm::before,
body.night .screen.iosm::before {
    opacity: 0.4;
    /* Dim the mesh effect in dark mode */
    background:
        radial-gradient(circle at 50% 50%, #2d2d2d 0%, transparent 60%),
        radial-gradient(circle at 80% 20%, #1a1a1a 0%, transparent 50%),
        linear-gradient(135deg, #000000 0%, #121212 100%);
}

@keyframes mist-move {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(-2%, -2%);
    }
}

.theme-toggle-btn::before {
    /* The Knob */
    content: "";
    position: absolute;
    left: 4px;
    top: 4px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(145deg, #fff, #f0f0f0);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.5s var(--ease-elastic);
    z-index: 2;
}

/* Icons Container */
.theme-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: opacity 0.3s;
}

.theme-icon.sun {
    left: 4px;
    z-index: 3;
    opacity: 1;
}

.theme-icon.moon {
    right: 4px;
    z-index: 1;
    opacity: 0.3;
}

/* Sun Shape (CSS instead of Font) */
.theme-icon.sun::after {
    content: "";
    width: 16px;
    height: 16px;
    background: var(--iosm-label);
    /* Use text color so it adapts */
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
}

/* Moon Shape (CSS instead of Font) */
.theme-icon.moon::after {
    content: "";
    width: 14px;
    height: 14px;
    background: transparent;
    border-radius: 50%;
    box-shadow: inset -4px 0 0 0 var(--iosm-label);
    /* Use text color */
}

/* Active State (Night) */
.theme-toggle-btn.night {
    background: rgba(40, 40, 50, 0.6);
}

.theme-toggle-btn.night::before {
    transform: translateX(36px);
    background: #3a3a40;
}

.theme-toggle-btn.night .theme-icon.sun {
    opacity: 0.3;
}

.theme-toggle-btn.night .theme-icon.moon {
    opacity: 1;
    z-index: 3;
}

.theme-toggle-btn.night .theme-icon.moon::after {
    box-shadow: inset -4px 0 0 0 #ffd700;
    /* Gold moon in active state */
}

/* Handle the slider element if present in HTML, though pseudo-element handles visual knob */
.theme-toggle-btn .theme-slider {
    display: none;
    /* Hide old slider div if it conflicts with ::before knob */
}


/* ================================================================
   第6部分：iOS设置主界面（来自 style.css 第 5342-5648 行）
   ================================================================ */

/* iOS设置容器 */
.screen.iosm {
    display: none;
    background: var(--iosm-bg);
    background-image: var(--liquid-bg-gradient);
    /* Ultimate Liquid Gradient */
    color: var(--iosm-label);
    flex-direction: column;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    /* Force viewport width */
    max-width: 100%;
    /* Prevent overflow */
    box-sizing: border-box;
    padding: 0;
    /* Full width for scrollbar */
    overflow: hidden;
    /* Critical: Prevent double scrollbars */
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

.iosm-header {
    position: sticky;
    top: 0;
    z-index: 5;
    z-index: 5;
    padding: 14px 20px 2px;
    /* Adapted side padding */
    padding-top: calc(14px + env(safe-area-inset-top, 0px));
    background: var(--iosm-bg);
    display: flex;
    align-items: center;
    gap: 10px;
}

.iosm-back {
    border: none;
    background: #eee;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    font-size: 20px;
    cursor: pointer;
    transition: background 0.2s;
    color: var(--iosm-label) !important;
}

.iosm-back:hover {
    background: #ddd;
}

.iosm-title {
    padding: 0 20px 8px;
    font-size: 34px;
    font-weight: 750;
    letter-spacing: .2px;
    margin: 0;
    width: 100%;
}

.iosm-body {
    padding: 0 0 40px 0;
    /* No side padding - content uses margins */
    flex: 1;
    /* Flexbox filling */
    height: auto;
    /* Remove brittle calc */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    position: relative;
    z-index: 10;
    margin-right: 0;
    padding-right: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.02);
}

/* iOS风格滚动条 */
.iosm-body::-webkit-scrollbar {
    width: 6px;
    background: transparent;
}

.iosm-body::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.02);
    border-radius: 3px;
    margin: 5px 0;
}

.iosm-body::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    transition: background-color 0.3s ease;
    min-height: 30px;
}

.iosm-body::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.35);
}

.iosm-body::-webkit-scrollbar-thumb:active {
    background: rgba(0, 0, 0, 0.5);
}

/* [REMOVED] Legacy forced color override - allows semantic coloring */
/* .screen.iosm * { color: ... !important } removed */

/* 搜索框 */
.iosm-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--iosm-card);
    border-radius: var(--iosm-radius);
    padding: 10px 12px;
    color: var(--iosm-muted);
    box-shadow: var(--iosm-shadow);
    margin-bottom: 12px;
}

.iosm-search input {
    border: none;
    outline: none;
    width: 100%;
    font-size: 16px;
    color: var(--iosm-label);
    background: transparent;
}

.iosm-search .icon {
    opacity: .6;
}

/* 个人资料卡片 */
.iosm-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: var(--iosm-card);
    border-radius: var(--iosm-radius);
    box-shadow: var(--iosm-shadow);
    margin-bottom: 18px;
    border: none;
    width: auto;
    /* Allow margins to work */
    text-align: left;
    cursor: pointer;
    transition: transform 0.2s;
}

.iosm-profile:hover {
    transform: scale(1.02);
}

.iosm-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #e3e4e8;
    object-fit: cover;
}

.iosm-ptext {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    flex: 1;
}

.iosm-pname {
    font-weight: 700;
    font-size: 17px;
}

.iosm-psub {
    color: var(--iosm-muted);
    font-size: 13px;
    margin-top: 2px;
}

/* 设置组和行 */
/* ================================================================
   Refined Glass Components ("Porcelain Style")
   ================================================================ */

.iosm-group,
.iosm-profile,
.iosm-search {
    margin: 0 20px 24px 20px;
    /* Adapted content margins */
    background: var(--glass-card-bg);
    /* Dynamic Liquid Background */
    backdrop-filter: var(--glass-frost);
    -webkit-backdrop-filter: var(--glass-frost);
    border-radius: var(--iosm-radius);
    border: 1px solid var(--glass-border);
    /* Cut Glass Edge */
    box-shadow:
        var(--iosm-shadow),
        inset 0 0 20px rgba(255, 255, 255, 0.2);
    /* Internal Volume Glow */
    overflow: hidden;
    transition: transform 0.3s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth);
}

.iosm-group:active,
.iosm-profile:active {
    transform: scale(0.995);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.iosm-row {
    /* width: 100%; REMOVED to prevent overflow with padding */
    box-sizing: border-box;
    /* Ensure padding doesn't expand width */
    display: flex;
    align-items: center;
    /* Critical for vertical center */
    padding: 12px 16px;
    /* REFINED: Slightly tighter for elegance */
    min-height: 48px;
    /* Reduced min-height */
    /* Ensure sufficient touch target */
    position: relative;
    text-align: left;
    background: transparent;
    border: none;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.2s var(--ease-smooth), box-shadow 0.2s, background-color 0.2s;
    /* Added background-color/transform transition */
}

.iosm-row:active {
    background-color: rgba(0, 0, 0, 0.04);
    /* Tactile grey */
    transform: scale(0.985);
    /* Subtle button press effect */
}

/* Hard separator line */
.iosm-row+.iosm-row::before {
    content: "";
    position: absolute;
    left: 16px;
    /* Align with padding */
    right: 16px;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--iosm-sep) 10%, var(--iosm-sep) 90%, transparent 100%);
    /* Soft separator */
}

.iosm-leading {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e0e0e0 0%, #c2c2c2 100%);
    /* Graphite Gradient */
    color: #5a5f66;
    margin-right: 10px;
    font-size: 16px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    /* Soft shadow */
    flex-shrink: 0;
}

/* ... (rest of simple styles) ... */

/* ================================================================
   Phase 3: Liquid Animations (The Soul)
   ================================================================ */

@keyframes liquid-float-in {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.96);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Staggered Entrance for specific groups */
.iosm-search {
    animation: liquid-float-in 0.6s var(--ease-elastic) 0.05s backwards;
}

.iosm-profile {
    animation: liquid-float-in 0.6s var(--ease-elastic) 0.1s backwards;
}

/* Select all groups general - specificity trick to apply to all .iosm-group instances */
.iosm-group {
    animation: liquid-float-in 0.6s var(--ease-elastic) 0.15s backwards;
}

/* Refined Arrow */
.iosm-collapse-arrow {
    transition: transform 0.3s ease;
}

.iosm-collapse-arrow.expanded {
    transform: rotate(90deg);
}

.iosm-collapse-content {
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.iosm-sub-item {
    padding-left: 52px;
    background: rgba(0, 0, 0, 0.01);
}

.iosm-sub-item:hover {
    background: rgba(0, 0, 0, 0.04);
}

.iosm-sub-leading {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f7;
    color: #5a5f66;
    margin-right: 10px;
    font-size: 14px;
}


/* ================================================================
   第7部分：应用自定义设置（来自 style.css 第 8400-8589 行）
   ================================================================ */

.app-custom-preview {
    flex-shrink: 0;
}

.app-custom-icon {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.48),
        0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    position: relative;
}

.app-custom-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.app-custom-icon svg {
    width: 100%;
    height: 100%;
}

.app-custom-icon .default-icon-placeholder {
    font-size: 28px;
}

.app-custom-controls {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.app-custom-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.app-custom-default-name {
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

.app-custom-buttons {
    display: flex;
    gap: 8px;
}

.btn-change-icon,
.btn-reset-app {
    padding: 8px 16px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-change-icon {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.btn-change-icon:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-reset-app {
    background: rgba(0, 0, 0, 0.05);
    color: #666;
}

.btn-reset-app:hover {
    background: rgba(0, 0, 0, 0.1);
}

.app-custom-label-input {
    display: flex;
    align-items: center;
    gap: 8px;
}

.app-custom-label-input label {
    font-size: 14px;
    color: #666;
    font-weight: 500;
    white-space: nowrap;
}

.app-custom-color-input {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.app-custom-color-input label {
    font-size: 14px;
    color: #666;
    font-weight: 500;
    white-space: nowrap;
}

.color-picker-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.app-color-input {
    width: 42px;
    height: 32px;
    border: none;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.app-color-input::-webkit-color-swatch,
.app-color-input::-webkit-color-swatch-wrapper {
    border-radius: 8px;
    border: none;
    padding: 0;
}

.app-color-input::-moz-color-swatch {
    border-radius: 8px;
    border: none;
}

.color-value {
    font-size: 13px;
    color: #555;
    font-family: "SFMono-Regular", Consolas, "Courier New", monospace;
}

.app-label-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    font-size: 14px;
    background: white;
    transition: all 0.2s ease;
}

.app-label-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* 移动端适配 */
@media (max-width: 768px) {
    .app-custom-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .app-custom-preview {
        align-self: center;
    }

    .app-custom-controls {
        width: 100%;
    }

    .app-custom-buttons {
        width: 100%;
    }

    .btn-change-icon,
    .btn-reset-app {
        flex: 1;
    }
}


/* ================================================================
   第8部分：通用设置页面样式 (General Settings - Macaron Style)
   ================================================================ */

/* 分组标签 */
.iosm-header-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--iosm-muted, #86868b);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 20px 8px;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 标签样式 */
.gs-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

.gs-tag-legacy {
    background: rgba(158, 158, 158, 0.15);
    color: #8e8e93;
}

.gs-tag-experimental {
    background: rgba(204, 139, 101, 0.15);
    color: #CC8B65;
}

/* 副标签（行内描述） */
.gs-sub-label {
    font-size: 12px;
    color: var(--iosm-muted, #86868b);
    margin-top: 2px;
}

/* 输入框样式 */
.gs-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    font-size: 15px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--iosm-label, #1d1d1f);
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.gs-input:focus {
    outline: none;
    border-color: rgba(102, 126, 234, 0.4);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    background: rgba(255, 255, 255, 0.8);
}

.gs-input::placeholder {
    color: var(--iosm-muted, #86868b);
    opacity: 0.7;
}

/* 输入框提示 */
.gs-input-hint {
    font-size: 11px;
    color: var(--iosm-muted, #86868b);
    margin-top: 6px;
    padding-left: 2px;
    transition: all 0.2s ease;
}

.gs-input-hint.saved {
    color: #34c759;
}

/* 提示框 */
.gs-hint-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(90, 122, 184, 0.08);
    color: #5A7AB8;
    font-size: 12px;
    border-bottom: 1px solid var(--iosm-sep, rgba(0, 0, 0, 0.06));
}

.gs-hint-box svg {
    flex-shrink: 0;
}

.gs-hint-warning {
    background: rgba(204, 139, 101, 0.08);
    color: #CC8B65;
}

/* 次要按钮 */
.gs-btn-secondary {
    padding: 6px 14px;
    background: rgba(0, 0, 0, 0.05);
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--iosm-label, #1d1d1f);
    cursor: pointer;
    transition: all 0.2s ease;
}

.gs-btn-secondary:hover {
    background: rgba(0, 0, 0, 0.08);
}

.gs-btn-secondary:active {
    transform: scale(0.96);
}

/* 权限请求按钮 - 更醒目的动作按钮 */
.gs-btn-permission {
    padding: 8px 16px;
    background: linear-gradient(135deg, #FFDAC1 0%, #FFB088 100%);
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #8B5A2B;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(255, 176, 136, 0.3);
}

.gs-btn-permission:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 176, 136, 0.4);
}

.gs-btn-permission:active {
    transform: scale(0.96);
}

/* 权限已开启状态 */
.gs-btn-permission.granted {
    background: linear-gradient(135deg, #B5EAD7 0%, #8FD9C0 100%);
    color: #2D6A4F;
    box-shadow: 0 2px 8px rgba(143, 217, 192, 0.3);
    cursor: default;
}

/* 权限被拒绝状态 */
.gs-btn-permission.denied {
    background: linear-gradient(135deg, #FF9AA2 0%, #E88A92 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(232, 138, 146, 0.3);
}

/* 权限不支持状态 */
.gs-btn-permission.unsupported {
    background: rgba(0, 0, 0, 0.05);
    color: var(--iosm-muted, #86868b);
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.6;
}

/* 禁用状态的开关样式 */
.iosm-switch input:disabled+.iosm-slider {
    opacity: 0.4;
    cursor: not-allowed;
}

/* 禁用行的整体样式 */
.iosm-row.gs-disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* 折叠面板 */
.gs-details {
    width: 100%;
}

.gs-details summary {
    list-style: none;
}

.gs-details summary::-webkit-details-marker {
    display: none;
}

.gs-summary {
    cursor: pointer;
    user-select: none;
}

.gs-chevron {
    color: var(--iosm-muted, #86868b);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
}

.gs-details[open] .gs-chevron {
    transform: rotate(90deg);
}

.gs-details-content {
    padding: 12px 16px 16px;
    border-top: 1px solid var(--iosm-sep, rgba(0, 0, 0, 0.06));
    animation: gs-slide-down 0.3s ease;
}

@keyframes gs-slide-down {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 工具按钮组 */
.gs-btn-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gs-btn-tool {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--iosm-label, #1d1d1f);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.gs-btn-tool:hover {
    background: rgba(0, 0, 0, 0.06);
}

.gs-btn-tool:active {
    transform: scale(0.98);
    background: rgba(0, 0, 0, 0.08);
}

.gs-btn-tool svg {
    color: var(--iosm-muted, #86868b);
    flex-shrink: 0;
}

/* 变量调试面板 */
.gs-var-panel {
    margin-top: 16px;
    padding: 14px;
    background: rgba(0, 0, 0, 0.02);
    border: 1px dashed rgba(0, 0, 0, 0.1);
    border-radius: 12px;
}

.gs-var-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--iosm-label, #1d1d1f);
    margin-bottom: 12px;
}

.gs-var-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--iosm-muted, #86868b);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.gs-var-template {
    margin-bottom: 12px;
}

.gs-var-template code {
    display: block;
    font-size: 12px;
    font-family: 'SF Mono', Monaco, monospace;
    color: #666;
    line-height: 1.5;
    word-break: break-all;
}

.gs-var-result {
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.gs-var-result span {
    font-size: 13px;
    color: var(--iosm-label, #1d1d1f);
}

/* 暗色模式适配 */
[data-theme="night"] .gs-input,
body.night .gs-input,
body.dark-mode .gs-input {
    background: rgba(45, 45, 50, 0.9);
    border-color: rgba(255, 255, 255, 0.12);
    color: #d0d0d5;
}

[data-theme="night"] .gs-input::placeholder,
body.night .gs-input::placeholder,
body.dark-mode .gs-input::placeholder {
    color: #888;
}

[data-theme="night"] .gs-input:focus,
body.night .gs-input:focus,
body.dark-mode .gs-input:focus {
    background: rgba(50, 50, 55, 0.95);
    border-color: rgba(102, 126, 234, 0.5);
}

[data-theme="night"] .gs-hint-box,
body.night .gs-hint-box {
    background: rgba(90, 122, 184, 0.15);
}

[data-theme="night"] .gs-hint-warning,
body.night .gs-hint-warning {
    background: rgba(204, 139, 101, 0.15);
}

[data-theme="night"] .gs-btn-secondary,
body.night .gs-btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #f5f5f7;
}

[data-theme="night"] .gs-btn-tool,
body.night .gs-btn-tool {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
    color: #f5f5f7;
}

[data-theme="night"] .gs-var-panel,
body.night .gs-var-panel {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="night"] .gs-var-template code,
body.night .gs-var-template code {
    color: #aaa;
}


/* ================================================================
   第9部分：API 设置页面样式 (API Settings - Macaron Style)
   ================================================================ */

/* 预设选择器 */
.api-preset-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: transparent;
}

.api-preset-selector select {
    flex: 1;
    padding: 10px 14px;
    border: 1.5px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.8);
    font-size: 15px;
    color: #333;
    font-family: 'Outfit', -apple-system, sans-serif;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.api-preset-selector select:focus {
    outline: none;
    border-color: #C7CEEA;
    box-shadow: 0 0 0 3px rgba(199, 206, 234, 0.3);
}

.api-preset-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    font-size: 20px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.api-preset-btn.add {
    background: linear-gradient(135deg, #B5EAD7 0%, #8FD9C0 100%);
    color: white;
}

.api-preset-btn.delete {
    background: linear-gradient(135deg, #FF9AA2 0%, #E88A92 100%);
    color: white;
}

.api-preset-btn:active {
    transform: scale(0.95);
}

/* API 表单输入框 */
.api-input {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.8);
    font-size: 15px;
    color: #333;
    font-family: 'Outfit', -apple-system, sans-serif;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.api-input:focus {
    outline: none;
    border-color: #C7CEEA;
    box-shadow: 0 0 0 3px rgba(199, 206, 234, 0.3);
}

.api-input::placeholder {
    color: #aaa;
}

.api-input[type="password"] {
    font-family: monospace;
    letter-spacing: 2px;
}

/* API 下拉选择框 */
.api-select {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.8);
    font-size: 15px;
    color: #333;
    font-family: 'Outfit', -apple-system, sans-serif;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
    cursor: pointer;
}

.api-select:focus {
    outline: none;
    border-color: #C7CEEA;
    box-shadow: 0 0 0 3px rgba(199, 206, 234, 0.3);
}

/* API 表单行样式 */
.api-form-row {
    padding: 14px 16px;
}

.api-form-row .iosm-label {
    margin-bottom: 8px;
    display: block;
}

.api-form-hint {
    font-size: 12px;
    color: #8e8e93;
    margin-top: 6px;
    line-height: 1.4;
}

/* 模型选择行 */
.api-model-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.api-model-row .api-input {
    flex: 1;
}

.api-fetch-btn {
    padding: 12px 16px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #C7CEEA 0%, #A8B4E0 100%);
    color: white;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.api-fetch-btn:active {
    transform: scale(0.97);
}

.api-fetch-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* API 测试连接区域 */
.api-test-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
}

.api-test-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #B5EAD7 0%, #8FD9C0 100%);
    color: white;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.api-test-btn:active {
    transform: scale(0.97);
}

.api-test-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* API 状态指示器 - Macaron 可爱风格 */
.api-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    background: rgba(142, 142, 147, 0.12);
    color: #8e8e93;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 成功状态 - 薄荷绿 */
.api-status.success {
    background: linear-gradient(135deg, #B5EAD7 0%, #9DDCC6 100%);
    color: #2D7A5E;
    box-shadow:
        0 2px 8px rgba(181, 234, 215, 0.5),
        0 4px 16px rgba(157, 220, 198, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    animation: statusPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 失败状态 - 樱花粉 */
.api-status.error {
    background: linear-gradient(135deg, #FF9AA2 0%, #FFB4BA 100%);
    color: #8B3D42;
    box-shadow:
        0 2px 8px rgba(255, 154, 162, 0.4),
        0 4px 16px rgba(255, 180, 186, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    animation: statusShake 0.5s ease-out;
}

/* 状态图标 */
.api-status-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: currentColor;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: white;
    font-weight: bold;
}

/* 成功图标 - 对勾 */
.api-status.success .api-status-dot::after {
    content: '✓';
    font-size: 11px;
}

/* 失败图标 - 叉号 */
.api-status.error .api-status-dot::after {
    content: '✕';
    font-size: 10px;
}

/* 成功时的弹出动画 */
@keyframes statusPop {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

    50% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* 失败时的摇晃动画 */
@keyframes statusShake {

    0%,
    100% {
        transform: translateX(0);
    }

    15% {
        transform: translateX(-4px);
    }

    30% {
        transform: translateX(4px);
    }

    45% {
        transform: translateX(-3px);
    }

    60% {
        transform: translateX(3px);
    }

    75% {
        transform: translateX(-1px);
    }
}

/* API 保存按钮 */
.api-save-btn {
    width: calc(100% - 32px);
    margin: 8px 16px 16px;
    padding: 14px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #FFDAC1 0%, #F0C8A8 100%);
    color: #8B5A2B;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.api-save-btn:active {
    transform: scale(0.98);
}

.api-save-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* 数据管理按钮组 */
.api-data-btns {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
}

.api-data-btn {
    flex: 1;
    padding: 12px;
    border: 1.5px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    color: #555;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.api-data-btn:active {
    transform: scale(0.97);
    background: rgba(255, 255, 255, 0.9);
}

.api-data-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

/* API 设置页夜间模式 */
[data-theme="night"] .api-input,
body.night .api-input,
body.dark-mode .api-input,
[data-theme="night"] .api-select,
body.night .api-select,
body.dark-mode .api-select,
[data-theme="night"] .api-preset-selector select,
body.night .api-preset-selector select,
body.dark-mode .api-preset-selector select {
    background: rgba(45, 45, 50, 0.9);
    border-color: rgba(255, 255, 255, 0.12);
    color: #d0d0d5;
}

[data-theme="night"] .api-input::placeholder,
body.night .api-input::placeholder,
body.dark-mode .api-input::placeholder {
    color: #888;
}

[data-theme="night"] .api-input:focus,
body.night .api-input:focus,
body.dark-mode .api-input:focus,
[data-theme="night"] .api-select:focus,
body.night .api-select:focus,
body.dark-mode .api-select:focus {
    background: rgba(50, 50, 55, 0.95);
    border-color: #7B8AC7;
    box-shadow: 0 0 0 3px rgba(123, 138, 199, 0.25);
}

[data-theme="night"] .api-data-btn,
body.night .api-data-btn,
body.dark-mode .api-data-btn {
    background: rgba(45, 45, 50, 0.7);
    border-color: rgba(255, 255, 255, 0.12);
    color: #aaa;
}

[data-theme="night"] .api-form-hint,
body.night .api-form-hint,
body.dark-mode .api-form-hint {
    color: #777;
}

/* API 表单标签夜间模式 */
[data-theme="night"] .api-form-label,
body.night .api-form-label,
body.dark-mode .api-form-label {
    color: #c0c0c5;
}

[data-theme="night"] .api-preset-btn.add,
body.night .api-preset-btn.add,
body.dark-mode .api-preset-btn.add {
    background: linear-gradient(135deg, #6DBF9B 0%, #5AA888 100%);
}

[data-theme="night"] .api-preset-btn.delete,
body.night .api-preset-btn.delete,
body.dark-mode .api-preset-btn.delete {
    background: linear-gradient(135deg, #D87B82 0%, #C66A72 100%);
}

/* API 状态 - 夜间模式 */
[data-theme="night"] .api-status,
body.night .api-status,
body.dark-mode .api-status {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
}

[data-theme="night"] .api-status.success,
body.night .api-status.success,
body.dark-mode .api-status.success {
    background: linear-gradient(135deg, rgba(109, 191, 155, 0.85) 0%, rgba(90, 168, 136, 0.85) 100%);
    color: #E8FFF4;
    box-shadow:
        0 2px 12px rgba(109, 191, 155, 0.4),
        0 4px 20px rgba(90, 168, 136, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

[data-theme="night"] .api-status.error,
body.night .api-status.error,
body.dark-mode .api-status.error {
    background: linear-gradient(135deg, rgba(216, 123, 130, 0.85) 0%, rgba(198, 106, 114, 0.85) 100%);
    color: #FFEEF0;
    box-shadow:
        0 2px 12px rgba(216, 123, 130, 0.35),
        0 4px 20px rgba(198, 106, 114, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

[data-theme="night"] .api-status-dot,
body.night .api-status-dot,
body.dark-mode .api-status-dot {
    color: rgba(255, 255, 255, 0.9);
}

/* ================================================================
   夜间模式补充 - iosm 基础组件 & API 设置
   ================================================================ */

/* iosm 基础组件夜间模式 */
body.dark-mode .iosm-group,
body.night .iosm-group {
    background: rgba(30, 30, 35, 0.65);
    box-shadow: 0 12px 40px -10px rgba(0, 0, 0, 0.6),
        0 2px 8px -2px rgba(0, 0, 0, 0.3);
}

body.dark-mode .iosm-row:hover,
body.night .iosm-row:hover {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .iosm-row+.iosm-row::before,
body.night .iosm-row+.iosm-row::before {
    background: rgba(255, 255, 255, 0.08);
}

body.dark-mode .iosm-leading,
body.night .iosm-leading {
    background: rgba(255, 255, 255, 0.1);
    color: #e0e0e0;
}

body.dark-mode .iosm-header-label,
body.night .iosm-header-label {
    color: #a0a0a0;
}

body.dark-mode .iosm-value,
body.night .iosm-value {
    color: #86868b;
}

body.dark-mode .iosm-chev,
body.night .iosm-chev {
    color: #555;
}

/* API 设置页面 - 按钮夜间模式 */
body.dark-mode .api-fetch-btn,
body.night .api-fetch-btn {
    background: linear-gradient(135deg, rgba(168, 180, 224, 0.85) 0%, rgba(148, 160, 200, 0.85) 100%);
    color: #f5f5f7;
}

body.dark-mode .api-test-btn,
body.night .api-test-btn {
    background: linear-gradient(135deg, rgba(109, 191, 155, 0.85) 0%, rgba(90, 168, 136, 0.85) 100%);
    color: #f5f5f7;
}

body.dark-mode .api-save-btn,
body.night .api-save-btn {
    background: linear-gradient(135deg, rgba(204, 162, 129, 0.85) 0%, rgba(180, 140, 110, 0.85) 100%);
    color: #FFF8F0;
}

body.dark-mode .api-test-row,
body.night .api-test-row {
    background: transparent;
}

body.dark-mode .api-model-row,
body.night .api-model-row {
    background: transparent;
}

body.dark-mode .api-data-btns,
body.night .api-data-btns {
    background: transparent;
}

/* gs-details 折叠组件夜间模式 */
body.dark-mode .gs-details,
body.night .gs-details {
    background: transparent;
}

body.dark-mode .gs-summary,
body.night .gs-summary {
    background: transparent;
}

body.dark-mode .gs-summary:hover,
body.night .gs-summary:hover {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .gs-sub-label,
body.night .gs-sub-label {
    color: #86868b;
}

body.dark-mode .gs-chevron,
body.night .gs-chevron {
    color: #555;
}

body.dark-mode .gs-details-content,
body.night .gs-details-content {
    background: rgba(0, 0, 0, 0.2);
}

/* ========================================
   感官描述设置样式
   ======================================== */

/* 开关行 */
.sensory-toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
}

.sensory-toggle-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.sensory-toggle-label {
    font-size: 15px;
    font-weight: 500;
    color: #1d1d1f;
    display: flex;
    align-items: center;
}

.sensory-toggle-hint {
    font-size: 12px;
    color: #86868b;
    line-height: 1.4;
}

/* iOS 风格开关 */
.ios-switch {
    position: relative;
    width: 51px;
    height: 31px;
    flex-shrink: 0;
    margin-left: 12px;
}

.ios-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.ios-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e9e9eb;
    transition: 0.3s;
    border-radius: 31px;
}

.ios-switch .slider:before {
    position: absolute;
    content: "";
    height: 27px;
    width: 27px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.ios-switch input:checked+.slider {
    background-color: #34c759;
}

.ios-switch input:checked+.slider:before {
    transform: translateX(20px);
}

/* 感官描述说明区域 */
.sensory-description {
    padding: 12px 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.sensory-description p {
    font-size: 12px;
    color: #86868b;
    line-height: 1.6;
    margin: 0 0 8px 0;
}

.sensory-description blockquote {
    font-size: 12px;
    color: #666;
    font-style: italic;
    background: rgba(199, 206, 234, 0.15);
    padding: 10px 12px;
    border-radius: 8px;
    margin: 8px 0;
    border-left: 3px solid #C7CEEA;
}

/* API 配置区域（可折叠） */
.sensory-api-config {
    transition: max-height 0.3s ease, opacity 0.3s ease, overflow 0s 0.3s;
    overflow: hidden;
}

.sensory-api-config.hidden {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

.sensory-api-config.visible {
    max-height: none;
    /* 移除高度限制，让内容自然展开 */
    opacity: 1;
    overflow: visible;
    /* 展开后允许内容正常显示 */
    transition: max-height 0.3s ease, opacity 0.3s ease, overflow 0s 0s;
}

/* 暗色模式适配 */
body.dark-mode .sensory-toggle-label,
body.night .sensory-toggle-label {
    color: #f5f5f7;
}

body.dark-mode .sensory-toggle-hint,
body.night .sensory-toggle-hint {
    color: #86868b;
}

body.dark-mode .sensory-description p,
body.night .sensory-description p {
    color: #86868b;
}

body.dark-mode .sensory-description blockquote,
body.night .sensory-description blockquote {
    background: rgba(199, 206, 234, 0.1);
    color: #999;
}

body.dark-mode .ios-switch .slider,
body.night .ios-switch .slider {
    background-color: #39393d;
}

body.dark-mode .ios-switch input:checked+.slider,
body.night .ios-switch input:checked+.slider {
    background-color: #34c759;
}

body.dark-mode .sensory-toggle-row,
body.night .sensory-toggle-row {
    border-color: rgba(255, 255, 255, 0.08);
}


/* ================================================================
   第10部分：画图应用样式 (Image Generator App - Macaron Style)
   ================================================================ */

/* 画图按钮样式 */
.image-generate-btn {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
    color: white !important;
}

.image-generate-btn:disabled {
    opacity: 0.6;
}

/* 提示词输入框 */
.image-prompt-container {
    padding: 0 16px;
}

.image-prompt-input {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.85);
    font-size: 15px;
    color: #333;
    font-family: 'Outfit', -apple-system, sans-serif;
    box-sizing: border-box;
    resize: none;
    line-height: 1.5;
    transition: all 0.2s ease;
}

.image-prompt-input:focus {
    outline: none;
    border-color: #f093fb;
    box-shadow: 0 0 0 3px rgba(240, 147, 251, 0.2);
}

.image-prompt-input::placeholder {
    color: #aaa;
}

/* 结果展示区 */
.image-result-area {
    padding: 16px;
}

.image-result-card {
    background: var(--iosm-card-bg, rgba(255, 255, 255, 0.7));
    border-radius: 20px;
    padding: 16px;
    box-shadow: var(--iosm-shadow);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.image-result-card .result-image {
    width: 100%;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.image-result-card .result-image:active {
    transform: scale(0.98);
}

.image-result-card .result-prompt {
    margin-top: 12px;
    font-size: 13px;
    color: #666;
    line-height: 1.5;
    word-break: break-all;
}

.image-result-card .result-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.image-result-card .result-btn {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #C7CEEA 0%, #A8B4E0 100%);
    color: white;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.image-result-card .result-btn:active {
    transform: scale(0.97);
}

/* 进度卡片 */
.image-progress-card {
    background: var(--iosm-card-bg, rgba(255, 255, 255, 0.7));
    border-radius: 20px;
    padding: 40px 20px;
    text-align: center;
    box-shadow: var(--iosm-shadow);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.progress-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(240, 147, 251, 0.2);
    border-top-color: #f093fb;
    border-radius: 50%;
    margin: 0 auto 16px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.progress-text {
    font-size: 15px;
    color: #666;
}

/* 历史记录区 */
.image-history-area {
    padding: 0 16px;
    margin-top: 24px;
}

.history-empty {
    text-align: center;
    padding: 20px;
    color: #999;
    font-size: 14px;
}

.history-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 12px;
}

.history-item {
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.history-item:active {
    transform: scale(0.95);
}

.history-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 画图应用夜间模式 */
body.dark-mode .image-prompt-input,
body.night .image-prompt-input {
    background: rgba(45, 45, 50, 0.9);
    border-color: rgba(255, 255, 255, 0.12);
    color: #d0d0d5;
}

body.dark-mode .image-prompt-input:focus,
body.night .image-prompt-input:focus {
    border-color: #f093fb;
    box-shadow: 0 0 0 3px rgba(240, 147, 251, 0.15);
}

body.dark-mode .image-prompt-input::placeholder,
body.night .image-prompt-input::placeholder {
    color: #888;
}

body.dark-mode .image-result-card,
body.night .image-result-card,
body.dark-mode .image-progress-card,
body.night .image-progress-card {
    background: rgba(30, 30, 35, 0.65);
}

body.dark-mode .image-result-card .result-prompt,
body.night .image-result-card .result-prompt {
    color: #999;
}

body.dark-mode .progress-text,
body.night .progress-text {
    color: #999;
}

body.dark-mode .history-empty,
body.night .history-empty {
    color: #666;
}

body.dark-mode .image-generate-btn,
body.night .image-generate-btn {
    background: linear-gradient(135deg, rgba(200, 100, 210, 0.85) 0%, rgba(180, 80, 100, 0.85) 100%) !important;
}

/* ================================================================
   垫图上传区样式
   ================================================================ */

.ref-image-area {
    padding: 12px 16px;
}

.ref-image-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 16px;
    border: 2px dashed rgba(240, 147, 251, 0.4);
    border-radius: 16px;
    background: rgba(240, 147, 251, 0.05);
    cursor: pointer;
    transition: all 0.2s ease;
    color: #999;
}

.ref-image-upload:hover {
    border-color: rgba(240, 147, 251, 0.6);
    background: rgba(240, 147, 251, 0.1);
}

.ref-image-upload svg {
    opacity: 0.6;
}

.ref-image-upload span {
    font-size: 14px;
}

.ref-image-preview {
    position: relative;
    display: inline-block;
}

.ref-image-preview img {
    max-width: 100%;
    max-height: 150px;
    border-radius: 12px;
    object-fit: contain;
}

.ref-image-remove {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF9AA2 0%, #E88A92 100%);
    color: white;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.ref-image-remove:active {
    transform: scale(0.9);
}

/* ================================================================
   参数标签样式
   ================================================================ */

.param-section {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.param-section:last-child {
    border-bottom: none;
}

.param-label {
    font-size: 13px;
    color: #666;
    margin-bottom: 10px;
}

.param-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.param-chip {
    padding: 8px 14px;
    border: 1.5px solid rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    color: #555;
    cursor: pointer;
    transition: all 0.2s ease;
}

.param-chip:hover {
    border-color: rgba(240, 147, 251, 0.5);
    background: rgba(240, 147, 251, 0.1);
}

.param-chip.active {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    border-color: transparent;
    color: white;
    box-shadow: 0 2px 8px rgba(240, 147, 251, 0.4);
}

/* 已选参数预览 */
.selected-params-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    margin: 0 16px 8px;
    background: rgba(240, 147, 251, 0.1);
    border-radius: 12px;
    font-size: 13px;
}

.preview-label {
    color: #888;
    flex-shrink: 0;
}

.preview-params {
    flex: 1;
    color: #f5576c;
    font-family: 'SF Mono', Monaco, monospace;
    word-break: break-all;
}

.clear-params-btn {
    padding: 4px 10px;
    border: none;
    border-radius: 8px;
    background: rgba(255, 100, 100, 0.2);
    color: #d55;
    font-size: 12px;
    cursor: pointer;
}

.clear-params-btn:active {
    transform: scale(0.95);
}

/* 夜间模式 */
body.dark-mode .ref-image-upload,
body.night .ref-image-upload {
    border-color: rgba(240, 147, 251, 0.3);
    background: rgba(240, 147, 251, 0.05);
    color: #888;
}

body.dark-mode .param-section,
body.night .param-section {
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .param-label,
body.night .param-label {
    color: #888;
}

body.dark-mode .param-chip,
body.night .param-chip {
    background: rgba(45, 45, 50, 0.9);
    border-color: rgba(255, 255, 255, 0.12);
    color: #ccc;
}

body.dark-mode .param-chip:hover,
body.night .param-chip:hover {
    border-color: rgba(240, 147, 251, 0.4);
    background: rgba(240, 147, 251, 0.1);
}

body.dark-mode .param-chip.active,
body.night .param-chip.active {
    background: linear-gradient(135deg, rgba(200, 100, 210, 0.85) 0%, rgba(180, 80, 100, 0.85) 100%);
    color: white;
}

body.dark-mode .selected-params-preview,
body.night .selected-params-preview {
    background: rgba(240, 147, 251, 0.08);
}

body.dark-mode .preview-params,
body.night .preview-params {
    color: #f093fb;
}