/* ========== 全局 ========== */
:root {
    --primary: #667eea;
    --primary-dark: #5a67d8;
    --secondary: #764ba2;
    --success: #48bb78;
    --error: #f56565;
    --warning: #ed8936;
    --bg: #f0f2f5;
    --card: #ffffff;
    --text: #2d3748;
    --text2: #718096;
    --border: #e2e8f0;
    --sidebar-w: 220px;
    --header-h: 60px;
    --shadow: 0 2px 8px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
    --radius: 12px;
    --radius-sm: 8px;
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Crect width='40' height='40' fill='%23f5f5f5'/%3E%3Crect x='40' y='40' width='40' height='40' fill='%23f5f5f5'/%3E%3Crect x='40' y='0' width='40' height='40' fill='%23ffffff'/%3E%3Crect x='0' y='40' width='40' height='40' fill='%23ffffff'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 80px 80px;
    color: var(--text);
    line-height: 1.6;
    overflow: hidden;
    height: 100vh;
}

/* ========== 认证弹窗 ========== */
.modal {
    position: fixed; inset:0;
    background: rgba(0,0,0,0.5);
    display: flex; align-items:center; justify-content:center;
    z-index: 2000;
    backdrop-filter: blur(5px);
}
.modal-content {
    background: var(--card);
    border-radius: var(--radius);
    padding: 36px 32px;
    width: 100%; max-width: 420px;
    box-shadow: var(--shadow-lg);
    animation: slideUp 0.3s ease;
}
@keyframes slideUp {
    from { opacity:0; transform: translateY(30px); }
    to   { opacity:1; transform: translateY(0); }
}

/* Tab 切换 */
.auth-tabs { display:flex; gap:10px; margin-bottom:24px; border-bottom:2px solid var(--border); }
.tab-btn {
    flex:1; padding:10px; border:none; background:none;
    font-size:15px; font-weight:600; color:var(--text2);
    cursor:pointer; position:relative; transition:color 0.3s;
}
.tab-btn.active { color:var(--primary); }
.tab-btn.active::after {
    content:''; position:absolute; bottom:-2px; left:0;
    width:100%; height:2px; background:var(--primary);
}
.auth-form h2 { text-align:center; margin-bottom:20px; }
.form-group { margin-bottom:16px; }
.form-group label { display:block; margin-bottom:6px; font-weight:500; font-size:14px; }
.form-group input {
    width:100%; padding:11px 14px;
    border:2px solid var(--border); border-radius:var(--radius-sm);
    font-size:15px; transition:border-color 0.3s;
}
.form-group input:focus { outline:none; border-color:var(--primary); }
.form-hint { text-align:center; margin-top:16px; font-size:13px; color:var(--text2); }
.code-input-group { display:flex; gap:10px; }
.code-input-group input { flex:1; }
.code-input-group button { white-space:nowrap; padding:11px 14px; font-size:13px; }

/* ========== 主布局 ========== */
.app-layout {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* ========== 左侧导航栏 ========== */
.sidebar {
    width: var(--sidebar-w);
    min-width: var(--sidebar-w);
    height: 100vh;
    background:
        repeating-conic-gradient(
            #ebebeb 0% 25%,
            transparent 0% 50%
        ) 50% / 20px 20px,
        transparent;
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0; top: 0;
    z-index: 100;
    transition: transform 0.3s ease;
    overflow-y: auto;
}

.sidebar-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 12px 10px;
    color: #333;
}
.sidebar-logo img { height:36px; width:auto; border-radius:6px; }
.sidebar-title { font-size:15px; font-weight:700; white-space:nowrap; }

.sidebar-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px 12px;
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 8px;
    border-radius: var(--radius-sm);
    color: rgba(0,0,0,0.6);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
    white-space: nowrap;
}
.nav-item:hover { background:rgba(0,0,0,0.06); color:#333; }
.nav-item.active { background:rgba(0,0,0,0.12); color:#111; font-weight:600; box-shadow: none; }
.nav-icon { font-size:20px; text-align:center; flex-shrink:0; line-height:1; }

/* 导航栏下方链接区 */
.sidebar-bottom-links {
    padding: 8px 12px;
    border-top: 1px solid rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sidebar-bottom-link {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    color: rgba(0,0,0,0.5);
    text-decoration: none;
    font-size: 13px;
    transition: all 0.2s;
    border-radius: var(--radius-sm);
}
.sidebar-bottom-link:hover { background:rgba(0,0,0,0.06); color:#333; }
.sidebar-bottom-link.active { background:rgba(0,0,0,0.1); color:#111; font-weight:600; }

.sidebar-footer {
    padding: 14px 12px;
    border-top: 1px solid rgba(0,0,0,0.08);
}
.sidebar-user-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sidebar-user-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.sidebar-username { 
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 
    max-width:110px; font-size:14px; font-weight:600; color:#333; 
}
.sidebar-points {
    font-size:12px; color:var(--primary); font-weight:600;
    background: rgba(102,126,234,0.1);
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}
.btn-logout-mini {
    padding: 4px 10px;
    background: rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 6px;
    color: rgba(0,0,0,0.5);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-logout-mini:hover { background:rgba(0,0,0,0.12); color:#333; }

/* ========== 右侧主区域 ========== */
.main-area {
    flex: 1;
    margin-left: var(--sidebar-w);
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    transition: margin-left 0.3s ease;
}

/* 顶部栏 */
.top-header {
    height: var(--header-h);
    min-height: var(--header-h);
    background: var(--card);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    box-shadow: var(--shadow);
    z-index: 10;
}
.header-left { display:flex; align-items:center; gap:16px; }
.menu-toggle {
    display: none;
    background:none; border:none; font-size:22px;
    cursor:pointer; color:var(--text); padding:4px;
}
.page-title { font-size:18px; font-weight:700; }
.header-right { display:flex; align-items:center; gap:12px; }
.header-username { font-size:14px; color:var(--text2); font-weight:500; }

/* 页面内容区 */
.page-body {
    flex: 1;
    overflow-y: auto;
    padding: 28px;
}

/* ========== 内容卡片 ========== */
.content-card {
    background: var(--card);
    border-radius: var(--radius);
    padding: 28px;
    box-shadow: var(--shadow);
    margin-bottom: 24px;
}
.content-card h2 { font-size:20px; margin-bottom:6px; }
.subtitle { color:var(--text2); font-size:14px; margin-bottom:18px; }

/* ========== 生成区域 ========== */
.prompt-area textarea {
    width:100%; padding:14px;
    border:2px solid var(--border); border-radius:var(--radius-sm);
    font-size:15px; font-family:inherit;
    resize:vertical; min-height:110px;
    transition:border-color 0.3s;
}
.prompt-area textarea:focus { outline:none; border-color:var(--primary); }
.prompt-actions { display:flex; justify-content:space-between; align-items:center; margin-top:14px; }
.char-count { font-size:13px; color:var(--text2); }

/* 结果 */
.result-area { max-width:720px; margin:0 auto; animation: fadeIn 0.4s ease; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.image-preview {
    position:relative;
    border-radius:var(--radius-sm);
    overflow:hidden;
    background: repeating-conic-gradient(#f0f0f0 0% 25%,#fff 0% 50%) 50%/20px 20px;
    margin-bottom:18px;
    min-height:200px;
    display:flex; align-items:center; justify-content:center;
}
.image-preview img { max-width:100%;  }
.image-overlay {
    position:absolute; inset:0;
    background:rgba(0,0,0,0.45);
    display:flex; align-items:center; justify-content:center;
    opacity:0; transition:opacity 0.3s;
}
.image-preview:hover .image-overlay { opacity:1; }
.image-info { padding:14px; background:#f7fafc; border-radius:var(--radius-sm); font-size:14px; color:var(--text2); }
.image-info strong { color:var(--text); }

/* 历史记录 */
.history-card { margin-bottom:0; }
.history-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.history-header h2 { font-size:18px; }
.history-list {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
    gap:16px;
}
.history-item {
    border-radius:var(--radius-sm); overflow:hidden;
    border:1px solid var(--border);
    transition:transform 0.2s, box-shadow 0.2s;
    cursor:pointer;
}
.history-item:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.history-item .thumbnail { width:100%; height:140px; object-fit:cover; }
.history-item .info { padding:10px; }
.history-item .prompt { font-size:12px; color:var(--text); margin-bottom:4px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.history-item .date { font-size:11px; color:var(--text2); }
.empty-state { grid-column:1/-1; text-align:center; padding:40px 20px; color:var(--text2); }

/* 加载动画 */
.loading-overlay {
    position:absolute; inset:0;
    background:rgba(255,255,255,0.95);
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    z-index:10; border-radius:var(--radius-sm);
}
.loading-spinner-large { position:relative; width:64px; height:64px; margin-bottom:16px; }
.spinner-ring {
    position:absolute; width:100%; height:100%;
    border:3px solid transparent; border-top-color:var(--primary);
    border-radius:50%; animation:spin 1.2s ease-in-out infinite;
}
.spinner-ring:nth-child(2) { width:70%; height:70%; top:15%; left:15%; border-top-color:var(--secondary); animation-delay:0.15s; }
.spinner-ring:nth-child(3) { width:40%; height:40%; top:30%; left:30%; border-top-color:var(--warning); animation-delay:0.3s; }
@keyframes spin { to { transform:rotate(360deg); } }
.loading-text { font-size:15px; font-weight:600; color:var(--text); }
.loading-hint { font-size:13px; color:var(--text2); margin-top:6px; }

/* 放大 */
.upscale-section { margin-top:20px; padding:18px; background:#f5f7fa; border-radius:var(--radius-sm); }
.upscale-title { font-weight:600; font-size:15px; margin-bottom:12px; }
.upscale-hint { font-size:12px; color:var(--text2); margin-top:8px; }

/* Toast */
.toast {
    position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(80px);
    padding:12px 24px; border-radius:var(--radius-sm); color:white;
    font-weight:500; font-size:14px; z-index:3000;
    opacity:0; transition:all 0.3s ease; pointer-events:none;
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.toast.success { background:var(--success); }
.toast.error   { background:var(--error); }
.toast.warning { background:var(--warning); }

/* 图片预览弹窗 */
.image-preview-modal {
    position:fixed; inset:0; background:rgba(0,0,0,0.92);
    display:none; align-items:center; justify-content:center;
    z-index:3000; cursor:pointer;
}
.image-preview-modal.show { display:flex; }
.image-preview-content { position:relative; max-width:90%; max-height:90%; }
.image-preview-content img { max-width:100%; max-height:85vh; border-radius:var(--radius); }
.close-preview {
    position:absolute; top:-36px; right:0;
    width:32px; height:32px; border-radius:50%;
    background:rgba(255,255,255,0.15); border:none;
    color:white; font-size:18px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
}
.preview-upscale-bar {
    display:flex; align-items:center; gap:12px;
    margin-top:12px; padding:10px 16px;
    background:rgba(0,0,0,0.6); border-radius:var(--radius-sm);
}
.preview-upscale-title { color:white; font-size:13px; font-weight:600; white-space:nowrap; }

/* ========== 个人中心 ========== */
.profile-section { margin:20px 0; }
.profile-row {
    display:flex; justify-content:space-between;
    padding:14px 0; border-bottom:1px solid var(--border);
    font-size:15px;
}
.profile-label { color:var(--text2); }
.profile-value { font-weight:600; color:var(--text); }
.profile-actions { display:flex; gap:12px; margin-top:24px; }

/* ========== 平台协议 ========== */
.agreement-section { margin-bottom:28px; }
.agreement-section h3 { font-size:16px; margin-bottom:10px; color:var(--text); }
.agreement-section p { font-size:14px; color:var(--text2); line-height:1.8; }
.agreement-note { font-size:12px; color:var(--warning); margin-top:6px; }

/* ========== 按钮 ========== */
.btn {
    padding:10px 20px; border:none; border-radius:var(--radius-sm);
    font-size:14px; font-weight:600; cursor:pointer;
    transition:all 0.2s; display:inline-flex; align-items:center; justify-content:center; gap:6px;
}
.btn-primary { background:linear-gradient(135deg,var(--primary),var(--secondary)); color:white; }
.btn-primary:hover { transform:translateY(-1px); box-shadow:var(--shadow-lg); }
.btn-secondary { background:rgba(102,126,234,0.1); color:var(--primary); border:1px solid rgba(102,126,234,0.3); }
.btn-secondary:hover { background:rgba(102,126,234,0.18); }
.btn-block { width:100%; padding:13px; font-size:15px; }
.btn-sm { padding:6px 14px; font-size:13px; }
.btn-outline { background:transparent; border:1px solid var(--border); color:var(--text2); }
.btn-outline:hover { border-color:var(--primary); color:var(--primary); }
.btn-text { background:transparent; color:var(--text2); padding:6px 10px; }
.btn-text:hover { color:var(--primary); }
.btn-preview-upscale {
    padding:6px 14px; background:rgba(255,255,255,0.15);
    border:1px solid rgba(255,255,255,0.3); border-radius:6px;
    color:white; font-size:12px; font-weight:600; cursor:pointer; transition:all 0.2s;
}
.btn-preview-upscale:hover { background:rgba(255,255,255,0.25); }

.spinner {
    display:inline-block; width:14px; height:14px;
    border:2px solid rgba(255,255,255,0.3); border-top-color:white;
    border-radius:50%; animation:spin 0.8s linear infinite;
}

/* ========== 响应式 ========== */
@media (max-width:768px) {
    .sidebar { transform:translateX(-100%); }
    .sidebar.open { transform:translateX(0); }
    .main-area { margin-left:0; }
    .menu-toggle { display:block; }
    .page-body { padding:16px; }
    .content-card { padding:18px; }
    .history-list { grid-template-columns:repeat(2,1fr); gap:10px; }
    .profile-actions { flex-direction:column; }
}
@media (max-width:480px) {
    .history-list { grid-template-columns:1fr; }
}