/* === CSS Reset & Base === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@property --gradient-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

:root {
    font-size: 16px;
    /* 最终确定使用得意黑字体，更萌更圆 */
    --font-primary: 'Smiley Sans', 'Noto Sans SC', sans-serif; 
    --border-radius: 20px;
    --timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* === THEME SYSTEM (最终·粉彩梦幻版) === */
[data-theme="mint"] {
    --bg-gradient: conic-gradient(from var(--gradient-angle), #b2f2d9, #e0f9da, #ffe8cc, #ffcfcf, #b2f2d9); /* 更柔和的渐变 */
    --primary: #ff9999; /* 柔和的粉红 */
    --secondary: #87e6fa; /* 天空蓝 */
    --text: #3d5a80; /* 深海军蓝，确保可读性 */
    --text-muted: #98c1d9; /* 柔和的浅蓝 */
    --bg-container: rgba(255, 255, 255, 0.65); /* 稍微增加透明度，更轻盈 */
    --border: rgba(180, 200, 220, 0.4);
    --shadow: rgba(0, 0, 0, 0.07);
    --svg-fill: rgba(255, 255, 255, 0.6);
}

[data-theme="lemon"] {
    --bg-gradient: conic-gradient(from var(--gradient-angle), #fbfdc2, #b8ed9a, #eeffd2, #fbfdc2); /* 清新柠檬绿 */
    --primary: #77c44e; /* 鲜亮绿色 */
    --secondary: #ffdc7c; /* 温和橙黄 */
    --text: #4a6735; /* 深绿色，对比度优化 */
    --text-muted: #829a6b; /* 柔和灰绿 */
    --bg-container: rgba(255, 255, 255, 0.85); /* 确保高对比度 */
    --border: rgba(119, 196, 78, 0.35);
    --shadow: rgba(0, 0, 0, 0.08); 
    --svg-fill: rgba(255, 255, 255, 0.8);
}

[data-theme="starry"] {
    --bg-gradient: #15293d; /* 深邃星空蓝 */
    --primary: #9ce0ff; /* 明亮星光蓝 */
    --secondary: #ffc977; /* 暖黄星尘 */
    --text: #e8f0fe; /* 接近白色 */
    --text-muted: #bbd3e6; /* 浅灰蓝 */
    --bg-container: rgba(29, 41, 57, 0.5);
    --border: rgba(156, 224, 255, 0.15);
    --shadow: rgba(0, 0, 0, 0.35);
    --svg-fill: rgba(255, 255, 255, 0.15);
}

[data-theme="klein-blue"] {
    --bg-gradient: #001a70; /* 更深邃的克莱因蓝 */
    --primary: #ffecb3; /* 柔和奶油黄 */
    --secondary: #e0e0e0;
    --text: #f0f8ff; /* 纯净白色 */
    --text-muted: #c8d8f0; /* 浅蓝灰 */
    --bg-container: rgba(0, 26, 112, 0.45);
    --border: rgba(255, 255, 255, 0.15);
    --shadow: rgba(0, 0, 0, 0.4);
    --svg-fill: rgba(255, 255, 255, 0.05);
}

/* === General Body & Layout === */
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-primary); /* 使用得意黑 */
    background: var(--bg-gradient);
    color: var(--text);
    min-height: 100vh;
    padding: 24px;
    animation: gradient-rotation 25s linear infinite;
    background-size: 100% 100%;
    transition: background 0.8s var(--timing-function);
    overflow-x: hidden;
    position: relative;
}

.hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

[data-theme="mint"] body, [data-theme="lemon"] body { background-size: 200% 200%; }

@keyframes gradient-rotation {
  from { --gradient-angle: 0deg; }
  to { --gradient-angle: 360deg; }
}

/* === SVG Background Decorations === */
.background-shapes {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    overflow: hidden;
    z-index: -1;
    pointer-events: none;
}
.background-shapes svg {
    position: absolute;
    opacity: 0;
    animation: shape-float 20s infinite ease-in-out alternate;
    fill: var(--svg-fill);
    transition: fill 0.8s var(--timing-function);
}
.background-shapes svg:nth-child(1) { top: 10%; left: 15%; width: 100px; animation-duration: 25s; }
.background-shapes svg:nth-child(2) { top: 70%; left: 5%; width: 50px; animation-duration: 30s; animation-delay: 5s; }
.background-shapes svg:nth-child(3) { top: 20%; right: 10%; width: 80px; animation-duration: 22s; animation-delay: 2s; }
.background-shapes svg:nth-child(4) { bottom: 10%; right: 20%; width: 120px; animation-duration: 28s; animation-delay: 8s; }
.background-shapes svg:nth-child(5) { top: 50%; left: 45%; width: 60px; animation-duration: 35s; animation-delay: 1s; }
[data-theme="starry"] .background-shapes, [data-theme="klein-blue"] .background-shapes { display: none; }
@keyframes shape-float {
    from { opacity: 0; transform: translateY(20px) rotate(0deg) scale(0.9); }
    50% { opacity: 1; }
    to { opacity: 0; transform: translateY(-20px) rotate(180deg) scale(1.1); }
}
#star-field {
    position: fixed;
    top: 0; left: 0;
    width: 200%; height: 200%;
    background-image: radial-gradient(2px 2px at 20px 30px, #eee, rgba(0,0,0,0)), radial-gradient(2px 2px at 40px 70px, #fff, rgba(0,0,0,0)), radial-gradient(2px 2px at 50px 160px, #ddd, rgba(0,0,0,0)), radial-gradient(2px 2px at 90px 40px, #fff, rgba(0,0,0,0)), radial-gradient(3px 3px at 130px 80px, #fff, rgba(0,0,0,0)), radial-gradient(2px 2px at 160px 120px, #ddd, rgba(0,0,0,0));
    background-repeat: repeat;
    background-size: 200px 200px;
    animation: star-pan 60s linear infinite;
    z-index: -2;
    opacity: 0;
    transition: opacity 0.8s var(--timing-function);
}
[data-theme="starry"] #star-field { opacity: 1; }
@keyframes star-pan {
    from { transform: translate(0, 0); }
    to { transform: translate(-200px, 0); }
}

/* === Container & Sections === */
.container {
    max-width: 700px;
    margin: 40px auto;
    background-color: var(--bg-container);
    border-radius: var(--border-radius);
    box-shadow: 0 16px 50px -20px var(--shadow);
    padding: clamp(24px, 5vw, 40px);
    border: 1px solid var(--border);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    transition: all 0.5s var(--timing-function);
    animation: container-fade-in 1s var(--timing-function);
}
section, header { margin-bottom: 32px; }
section:last-of-type { margin-bottom: 0; }
@keyframes container-fade-in {
    from { opacity: 0; transform: translateY(30px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* === Theme Switcher === */
.theme-switcher { position: fixed; top: 20px; right: 20px; z-index: 1000; }
.theme-options { display: flex; gap: 8px; background: var(--bg-container); padding: 8px; border-radius: 50px; box-shadow: 0 4px 12px var(--shadow); border: 1px solid var(--border); backdrop-filter: blur(10px); }
.theme-btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: none;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.3s var(--timing-function);
    display: flex; align-items: center; justify-content: center;
}
.theme-btn:hover { transform: scale(1.2) rotate(15deg); }
.theme-btn[aria-checked="true"] {
    border-color: var(--primary);
    transform: scale(1.1);
    background-color: color-mix(in srgb, var(--primary) 20%, transparent);
}

/* === Header, Disclaimer, Close Btn === */
header { text-align: center; }
h1 { font-size: clamp(2rem, 6vw, 2.8rem); font-weight: 900; color: var(--text); margin-bottom: 8px; letter-spacing: -1.5px; text-shadow: 0 1px 3px var(--shadow); }
.subtitle { color: var(--text-muted); font-size: clamp(0.9rem, 2.5vw, 1.1rem); font-weight: 500; }
.disclaimer { background-color: color-mix(in srgb, var(--primary) 10%, transparent); border-left: 4px solid var(--primary); padding: 16px; border-radius: 12px; position: relative; font-size: 0.9rem; line-height: 1.6; }
.close-btn {
    position: absolute; top: 8px; right: 8px;
    background: none; border: none;
    color: var(--text-muted);
    font-size: 1.5rem; cursor: pointer;
    transition: all 0.3s var(--timing-function);
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
}
.close-btn:hover { background-color: color-mix(in srgb, var(--text) 10%, transparent); color: var(--primary); transform: rotate(180deg) scale(1.2); }

/* === AI Personality Selector (New Styles) === */
.ai-personality-selector {
    margin-bottom: 32px;
    text-align: center;
}

.ai-personality-label {
    display: block;
    margin-bottom: 16px;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text);
}

.select-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 300px; /* 控制下拉框最大宽度 */
}

#ai-personality-select {
    width: 100%;
    padding: 12px 20px;
    border: 2px solid var(--border);
    border-radius: 12px; /* 稍微圆润的边角 */
    background-color: var(--bg-container);
    color: var(--text);
    font-family: var(--font-primary);
    font-size: 1rem;
    appearance: none; /* 移除原生下拉箭头 */
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    transition: all 0.3s var(--timing-function);
    box-shadow: 0 4px 10px -5px var(--shadow);
}

#ai-personality-select:hover {
    border-color: var(--secondary);
    box-shadow: 0 6px 15px -5px var(--shadow);
}

#ai-personality-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 30%, transparent); /* 聚焦光晕 */
}

.select-arrow {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--text-muted);
    pointer-events: none; /* 确保点击箭头也能触发select */
    transition: border-top-color 0.3s var(--timing-function);
}

#ai-personality-select:focus + .select-arrow {
    border-top-color: var(--primary);
}


/* === Upload Area, Preview & Result === */
.upload-area { border: 3px dashed var(--border); border-radius: var(--border-radius); padding: 40px; text-align: center; transition: all 0.3s var(--timing-function); cursor: pointer; position: relative; overflow: hidden; }
.upload-area:hover { border-color: var(--primary); transform: scale(1.02); box-shadow: 0 0 30px -10px var(--primary); }
.upload-inner { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.upload-icon { width: 64px; height: 64px; color: var(--secondary); transition: all 0.3s var(--timing-function); }
.upload-area:hover .upload-icon { transform: scale(1.1) rotate(-5deg); color: var(--primary); }
.upload-btn { color: var(--primary); font-weight: bold; text-decoration: none; border-bottom: 2px solid; }
.paste-hint { font-size: 0.8rem; color: var(--text-muted); }
.image-preview-container, .result-image-thumbnail { max-height: 350px; border-radius: var(--border-radius); margin: 0 auto 24px; display: flex; justify-content: center; align-items: center; background-color: color-mix(in srgb, var(--text) 5%, transparent); box-shadow: inset 0 0 10px rgba(0,0,0,0.1); }
#preview-image, #result-image-thumbnail { max-width: 100%; max-height: 350px; object-fit: contain; border-radius: 12px; }
#result { padding: 24px; border-radius: var(--border-radius); border: 2px solid; text-align: center; animation: fadeIn 0.5s ease-out; }
#result.smash { background-color: color-mix(in srgb, #f44336 15%, transparent); border-color: #f44336; }
#result.pass { background-color: color-mix(in srgb, #4caf50 15%, transparent); border-color: #4caf50; }
.verdict-container { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 16px; }
#verdict { font-size: clamp(1.5rem, 4vw, 2.2rem); font-weight: 900; }
#verdict-icon { font-size: clamp(2rem, 6vw, 3rem); animation: icon-pop 0.5s var(--timing-function); }
@keyframes icon-pop { from { transform: scale(0) rotate(-180deg); } to { transform: scale(1) rotate(0deg); } }
#explanation { font-size: 1.1rem; line-height: 1.7; margin-bottom: 24px; color: var(--text); white-space: pre-wrap; }

/* === Buttons === */
.btn { background-color: var(--primary); color: color-mix(in srgb, var(--primary) 85%, black); border: none; padding: 14px 28px; border-radius: 50px; font-size: 1rem; font-weight: 700; cursor: pointer; transition: all 0.3s var(--timing-function); box-shadow: 0 4px 15px -5px color-mix(in srgb, var(--primary) 50%, transparent), inset 0 -2px 5px rgba(0,0,0,0.1); display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-shadow: 0 1px 1px rgba(0,0,0,0.1); }
.btn:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 10px 25px -8px var(--primary), inset 0 -1px 2px rgba(0,0,0,0.05); }
.btn:active { transform: translateY(-1px) scale(1); }
.btn:disabled { background-color: var(--text-muted); color: color-mix(in srgb, var(--text-muted) 85%, white); cursor: not-allowed; transform: none; box-shadow: none; }
.btn-secondary { background-color: var(--secondary); color: color-mix(in srgb, var(--secondary) 85%, black); box-shadow: 0 4px 15px -5px color-mix(in srgb, var(--secondary) 50%, transparent), inset 0 -2px 5px rgba(0,0,0,0.1); }
.btn-secondary:hover { box-shadow: 0 10px 25px -8px var(--secondary), inset 0 -1px 2px rgba(0,0,0,0.05); }
.btn-tertiary { /* 新增：第三种按钮风格，用于About弹窗的永久隐藏按钮 */
    background-color: transparent;
    border: 2px solid var(--text-muted);
    color: var(--text-muted);
    box-shadow: none;
}
.btn-tertiary:hover {
    background-color: color-mix(in srgb, var(--text-muted) 10%, transparent);
    color: var(--text);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px -5px var(--shadow);
}
.view-saved-btn { display: block; margin: 32px auto 0; background-color: var(--text); color: var(--bg-container); }

/* === Loading & Progress Bar === */
#loading { display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 32px 0; }
.spinner { width: 50px; height: 50px; border-radius: 50%; background: conic-gradient(from 0deg at 50% 50%, var(--primary), transparent); -webkit-mask: radial-gradient(farthest-side, transparent 90%, #fff 91%); mask: radial-gradient(farthest-side, transparent 90%, #fff 91%); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.progress-bar-container { width: 80%; height: 8px; background-color: var(--border); border-radius: 4px; overflow: hidden; position: relative; }
.progress-bar { width: 0%; height: 100%; background: var(--primary); transition: width 0.5s ease; border-radius: 4px; position: relative; overflow: hidden; }
.progress-bar::after { /* 进度条辉光效果 */
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: radial-gradient(circle at 100% 50%, var(--primary) 0%, transparent 70%);
    opacity: 0.7;
    transform: scale(0);
    animation: progress-glow 2s infinite ease-out;
}
@keyframes progress-glow {
    0% { transform: scale(0); opacity: 0.7; }
    50% { transform: scale(1); opacity: 0.2; }
    100% { transform: scale(0); opacity: 0.7; }
}


/* === Saved Results & Popup Panel === */
#saved-results-overlay, #popup-overlay, #about-overlay, #settings-overlay { /* 统一弹窗样式 */
    position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.4); backdrop-filter: blur(8px) saturate(100%); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; visibility: hidden; transition: opacity 0.4s, visibility 0s 0.4s;
}
#saved-results-overlay:not(.hidden), #popup-overlay:not(.hidden), #about-overlay:not(.hidden), #settings-overlay:not(.hidden) { opacity: 1; visibility: visible; transition: opacity 0.4s; }
.saved-results-panel, .popup-card, .about-card, .settings-card { /* 统一卡片样式 */
    width: 100%; max-width: 900px; height: 90%; max-height: 80vh; background: var(--bg-container); border-radius: var(--border-radius); box-shadow: 0 20px 60px -10px var(--shadow); padding: 24px; display: flex; flex-direction: column; position: relative; transform: scale(0.95); transition: transform 0.4s var(--timing-function);
}
#saved-results-overlay:not(.hidden) .saved-results-panel, 
#popup-overlay:not(.hidden) .popup-card,
#about-overlay:not(.hidden) .about-card,
#settings-overlay:not(.hidden) .settings-card { transform: scale(1); }

.popup-card { max-width: 550px; height: auto; max-height: 90vh; text-align: center; }
.saved-results-panel h2, .about-card h2, .settings-card h2 { text-align: center; margin-bottom: 24px; }
.saved-controls { display: flex; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
#search-saved, #filter-saved, input { flex-grow: 1; min-width: 150px; padding: 12px; border: 2px solid var(--border); border-radius: 8px; background: color-mix(in srgb, var(--text) 5%, transparent); color: var(--text); font-size: 1rem; transition: border-color 0.3s, box-shadow 0.3s; }
#search-saved:focus, #filter-saved:focus, input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 10px -2px var(--primary); }
#saved-results-grid { flex-grow: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; padding: 4px; }
#saved-results-grid::-webkit-scrollbar { width: 8px; }
#saved-results-grid::-webkit-scrollbar-track { background: transparent; }
#saved-results-grid::-webkit-scrollbar-thumb { background-color: var(--border); border-radius: 4px; }
#saved-results-grid::-webkit-scrollbar-thumb:hover { background-color: var(--secondary); }
.saved-result-card { background: transparent; border: 1px solid var(--border); border-radius: var(--border-radius); overflow: hidden; cursor: pointer; transition: transform 0.3s var(--timing-function), box-shadow 0.3s var(--timing-function); position: relative; }
.saved-result-card:hover { transform: translateY(-8px) scale(1.03); box-shadow: 0 12px 30px -8px var(--shadow); border-color: var(--secondary); }
.saved-result-card img { width: 100%; height: 150px; object-fit: cover; }
.saved-result-info { padding: 16px; }
.saved-result-info .verdict { font-weight: 700; color: var(--text); }
.saved-result-info .date { font-size: 0.8em; color: var(--text-muted); margin-top: 8px; }
.saved-result-actions { display: flex; gap: 8px; margin-top: 16px; }
.delete-btn { background: #e53935; color: white; border: none; padding: 8px; border-radius: 8px; cursor: pointer; flex-grow: 1; transition: background-color 0.2s, transform 0.2s; }
.delete-btn:hover { background: #c62828; transform: scale(1.05); }
.popup-card img { width: 100%; max-height: 50vh; object-fit: contain; border-radius: 12px; margin-bottom: 24px; }
.popup-card h3 { font-size: 1.8rem; color: var(--primary); }
.popup-card p { font-size: 1.1em; line-height: 1.6; margin-top: 16px; }

/* About Card Specifics */
.about-card {
    max-width: 650px;
    height: auto;
    max-height: 90vh;
    padding: 32px;
    text-align: center;
}
.about-content {
    margin-bottom: 24px;
}
.about-content p {
    margin: 10px 0;
    font-size: 1.1em;
    line-height: 1.7;
    color: var(--text);
}
.about-content p.en {
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.95em;
    margin-top: -5px; /* Subtle adjustment for paired lines */
    margin-bottom: 15px;
}
.about-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}
.show-about-btn { /* 左上角关于按钮样式 */
    position: fixed;
    top: 20px;
    left: 20px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--bg-container);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s var(--timing-function);
    box-shadow: 0 2px 8px var(--shadow);
}
.show-about-btn:hover {
    transform: scale(1.1) rotate(15deg);
    color: var(--primary);
    box-shadow: 0 4px 15px var(--shadow);
}
.show-settings-btn { /* 左上角设置按钮样式 */
    position: fixed;
    top: 20px;
    left: 80px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--bg-container);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s var(--timing-function);
    box-shadow: 0 2px 8px var(--shadow);
}
.show-settings-btn:hover {
    transform: scale(1.1) rotate(15deg);
    color: var(--primary);
    box-shadow: 0 4px 15px var(--shadow);
}

.show-about-btn:hover {
    transform: scale(1.1) rotate(15deg);
    color: var(--primary);
    box-shadow: 0 4px 15px var(--shadow);
}

/* === Responsive === */
@media (max-width: 768px) {
    body { padding: 16px; }
    .container { margin: 20px auto; }
    .theme-switcher { top: auto; bottom: 16px; left: 50%; transform: translateX(-50%); }
    .show-about-btn { top: 16px; left: 16px; }
    .ai-personality-selector .select-wrapper { max-width: 100%; } /* 移动端全宽 */
}
@media (max-width: 600px) {
    .container { padding: 24px 16px; }
    .preview-actions, .result-actions { flex-direction: column; gap: 16px; }
    .saved-controls { flex-direction: column; }
    .about-actions button { width: 100%; }
}