/* ─── 字体与全局手感优化 ──────────────────────── */
body {
    font-family:'Quicksand', system-ui, -apple-system, sans-serif;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    overscroll-behavior-y: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* 允许文本框输入区正常选中与操作 */
textarea, input[type="text"], input[type="url"], .font-mono, select {
    font-family: 'JetBrains Mono', Consolas, Monaco, monospace;
    text-shadow: none;
    -webkit-user-select: text;
    user-select: text;
}

/* ─── iOS 安全区沉浸式适配 ───────────────────────────── */
#topNav {
    padding-top: calc(env(safe-area-inset-top, 0px) + 0.75rem) !important;
}
#mainContent {
    padding-top: calc(env(safe-area-inset-top, 0px) + 5rem) !important;
}
#mobTabs {
    top: calc(env(safe-area-inset-top, 0px) + 4rem) !important;
}
#bottomBar {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 1.5rem) !important;
}
.safe-pb {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 2rem) !important;
}

/* ─── 水晶面板 (核心修复区) ───────────────────────────── */
.glass-panel {
    background: rgba(20, 20, 25, 0.05);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    
    /* 核心修复：解决浏览器毛玻璃重叠导致的背景错位、撕裂和竖线 Bug */
    transform: translateZ(0); 
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform, backdrop-filter;
    
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    border-left: none !important;
    border-right: none !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border-radius: 24px;
}

/* 嵌套面板：移除多余的模糊，防止二次叠加导致的渲染白边 */
.glass-panel--dark {
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none;
    will-change: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 14px;
    box-shadow: none !important;
}

/* 清理内部容器可能导致错乱的阴影轮廓 */
#settingsCard *, .settings-scroll * {
    outline: none !important;
}

/* ─── Tab 激活状态 ───────────────────────────────────── */
.tab-active {
    background: rgba(255, 105, 180, 0.15);
    border: 1px solid rgba(255, 105, 180, 0.4);
    box-shadow: 0 0 15px rgba(255, 105, 180, 0.1);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

/* ─── 代码输入区─────────────────────────────────────── */
.input-area {
    background: rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.input-area:focus-within {
    background: rgba(0, 0, 0, 0.25);
    border-color: rgba(255, 105, 180, 0.4);
    box-shadow: 0 0 20px rgba(255, 105, 180, 0.1), inset 0 0 10px rgba(0, 0, 0, 0.4);
}
#sourceInput {
    color: #f8fafc;
    caret-color: #f472b6;
}

/* ─── 渐变主按钮 ─────────────────────────────────────── */
.btn-primary {
    background: linear-gradient(135deg, rgba(255,126,179,0.85) 0%, rgba(255,117,140,0.85) 100%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-bottom: 2px solid rgba(0, 0, 0, 0.2);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ─── 自定义滚动条 ───────────────────────────────────── */
.custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; border-radius: 8px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(255, 105, 180, 0.3); border-radius: 8px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(255, 105, 180, 0.6); }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ─── Select箭头 ────────────────────────────────────── */
select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23f472b6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px !important;
}

/* ─── 自动填充修复 ───────────────────────────────────── */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px rgba(30, 30, 35, 0.9) inset !important;
    -webkit-text-fill-color: white !important;
    transition: background-color 5000s ease-in-out 0s;
    caret-color: #f472b6;
}

/* ─── 动画 ───────────────────────────────────────────── */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── 细节边缘修复 ───────────────────────────────────── */
#mainContent .glass-panel > .flex.border-b {
    border-bottom-color: rgba(255, 255, 255, 0.04);
}
#mobTabs {
    border-bottom: none !important;
}