/* ==================== Survey站配色体系 (--sv-*) ==================== */
/* 后续配色切换只需覆盖这些变量 */
:root {
  --sv-bg: #2a3342;
  --sv-bg-light: #323e4f;
  --sv-card-bg: #f0eff3;
  --sv-card-bg-hover: #e8e7ec;
  --sv-text: #2a3342;
  --sv-text-light: #5a6577;
  --sv-text-muted: #8896a7;
  --sv-text-on-dark: #e0e4ea;
  --sv-accent: #3a6ea5;
  --sv-accent-hover: #2d5a88;
  --sv-accent-red: #c4002d;
  --sv-accent-red-hover: #a80028;
  --sv-accent-gold: #d4a843;
  --sv-accent-gold-hover: #c09535;
  --sv-border: #d8dce2;
  --sv-border-light: #e0e0e0;
  --sv-border-on-dark: #3a4d63;
  --sv-success: #2d8f5e;
  --sv-success-light: #e8f5e9;
  --sv-error: #c4002d;
  --sv-error-light: #f5e6e9;
  --sv-warning: #d4a843;
  --sv-warning-light: #fff3e0;
  --sv-header-bg: #1e2836;
  --sv-shadow: rgba(0,0,0,0.1);
  --sv-shadow-light: rgba(0,0,0,0.06);
  --sv-shadow-medium: rgba(0,0,0,0.08);
  --sv-shadow-heavy: rgba(0,0,0,0.15);
  --sv-white: #fff;
  /* 扩展变量 - 用于更多场景 */
  --sv-highlight-bg: #e8f0fe;    /* 高亮背景 */
  --sv-row-alt: #f5f7fa;         /* 表格交替行 */
  --sv-error-bg: #fef2f2;        /* 错误背景 */
  --sv-table-border: #f0f2f5;    /* 表格边框 */
  --sv-disabled: #e0e2e6;        /* 禁用状态 */
}

/**
 * Survey SaaS - 前端样式
 * 移动端优先响应式设计
 *
 * @package Survey_App
 */

/* ==================== 变量定义 ==================== */
:root {
    --primary: var(--sv-bg);
    --primary-dark: var(--sv-header-bg);
    --primary-deeper: var(--sv-header-bg);
    --accent: var(--sv-accent-red);
    --accent-hover: var(--sv-accent-red-hover);
    --accent-blue: var(--sv-accent);
    --accent-blue-hover: var(--sv-accent-hover);
    --accent-gold: var(--sv-accent-gold);
    --accent-gold-hover: var(--sv-accent-gold-hover);
    --button: var(--sv-accent-red);
    --button-hover: var(--sv-accent-red-hover);
    --button-blue: var(--sv-accent);
    --button-blue-hover: var(--sv-accent-hover);
    --bg: var(--sv-bg);
    --bg-light: var(--sv-bg-light);
    --bg-deep: var(--sv-header-bg);
    --card-bg: var(--sv-card-bg);
    --card-bg-hover: var(--sv-card-bg-hover);
    --card-dark-bg: #3a4758;
    --text: var(--sv-bg);
    --text-light: var(--sv-text-light);
    --text-muted: var(--sv-text-muted);
    --text-on-dark: var(--sv-text-on-dark);
    --text-muted-on-dark: var(--sv-text-muted);
    --border: var(--sv-border);
    --border-on-dark: var(--sv-border-on-dark);
    --border-accent: var(--sv-accent-red);
    --success: var(--sv-success);
    --error: var(--sv-accent-red);
    --warning: var(--sv-accent-gold);
    --highlight: var(--sv-accent-red);
    --price-color: var(--sv-accent-red);
    
    /* 间距 */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    
    /* 圆角 */
    --radius-sm: 0.5rem;
    --radius-md: 1rem;
    --radius-lg: 1.5rem;
    
    /* 字体 */
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    
    /* 安全区适配 */
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ==================== 基础重置 ==================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: "微软雅黑", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    min-height: 100vh;
    overflow-x: hidden;
}

body.survey-page {
    background: linear-gradient(180deg, var(--sv-bg) 0%, var(--sv-bg-light) 50%, var(--sv-bg) 100%);
}

/* 禁止双击缩放 */
input, textarea, select, button {
    touch-action: manipulation;
}

/* ==================== 问卷容器 ==================== */
.wpsurvey-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: var(--space-sm);
    padding-bottom: calc(80px + var(--safe-bottom)); /* 底部固定按钮区域 */
    min-height: 100vh;
}

.wpsurvey-card {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 24px var(--sv-shadow-heavy);
    border: 1px solid var(--border);
    padding: var(--space-md);
    margin-bottom: var(--space-sm);
}

/* ==================== 问卷头部 ==================== */
.wpsurvey-header {
    text-align: center;
    margin-bottom: var(--space-lg);
    padding: 2rem 1.5rem 1.5rem;
    background: linear-gradient(135deg, var(--sv-bg) 0%, var(--sv-accent) 50%, var(--sv-bg) 100%);
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
}

.wpsurvey-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    pointer-events: none;
}

.wpsurvey-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%;
    right: 10%;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
    border-radius: 2px;
}

.wpsurvey-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--sv-white);
    margin-bottom: 0.5rem;
    line-height: 1.4;
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.wpsurvey-header .description-wrap {
    position: relative;
    z-index: 1;
    width: 85%;
    margin: 0 auto;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255,255,255,0.2);
}

.wpsurvey-header .description {
    color: rgba(255,255,255,0.9);
    font-size: var(--font-size-sm);
    line-height: 1.8;
    text-align: left;
    text-indent: 2em;
    margin: 0;
}

/* ==================== 进度条 ==================== */
.wpsurvey-progress {
    margin-bottom: var(--space-md);
    background: var(--card-bg);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.wpsurvey-progress-bar {
    height: 6px;
    background: var(--sv-border-light);
    border-radius: 3px;
    overflow: hidden;
}

.wpsurvey-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    border-radius: 3px;
    transition: width 0.3s ease;
}

.wpsurvey-progress-text {
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--text-light);
    margin-top: var(--space-xs);
}

/* ==================== 题目样式 ==================== */
.wpsurvey-questions {
    margin-bottom: var(--space-md);
}

.wpsurvey-question {
    margin-bottom: var(--space-md);
    animation: fadeIn 0.3s ease;
    background: var(--card-bg);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    box-shadow: 0 2px 12px var(--sv-shadow-light);
    border: 1px solid rgba(0,0,0,0.04);
    transition: box-shadow 0.2s;
}

.wpsurvey-question:hover {
    box-shadow: 0 4px 18px var(--sv-shadow-medium);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.wpsurvey-question-header {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-sm);
}

.wpsurvey-question-number {
    color: var(--sv-white);
    background: linear-gradient(135deg, var(--primary), var(--accent));
    font-weight: 700;
    font-size: 0.8rem;
    min-width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    flex-shrink: 0;
    margin-right: 4px;
}

.wpsurvey-required {
    color: var(--error);
    font-weight: bold;
    margin-left: 2px;
}

.wpsurvey-question-text {
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--text);
    line-height: 1.5;
}

/* ==================== 选项样式 - 卡片式大按钮 ==================== */
.wpsurvey-radio,
.wpsurvey-checkbox {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.wpsurvey-option {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--sv-card-bg);
    border: 2px solid var(--sv-card-bg);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
    min-height: 50px;
}

.wpsurvey-option:hover {
    background: var(--sv-card-bg);
    border-color: var(--primary);
    transform: translateX(4px);
}

.wpsurvey-option.selected {
    background: linear-gradient(135deg, var(--sv-card-bg), var(--sv-card-bg));
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
}

/* 隐藏原生radio/checkbox */
.wpsurvey-option input[type="radio"],
.wpsurvey-option input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* 自定义radio/checkbox图标 */
.wpsurvey-option::before {
    content: '';
    width: 24px;
    height: 24px;
    border: 2px solid var(--border);
    border-radius: 50%;
    margin-right: var(--space-sm);
    flex-shrink: 0;
    transition: all 0.2s;
}

.wpsurvey-checkbox .wpsurvey-option::before {
    border-radius: 6px;
}

.wpsurvey-option.selected::before {
    border-color: var(--primary);
    background: var(--primary);
    box-shadow: inset 0 0 0 4px var(--sv-white);
}

.wpsurvey-option span {
    flex: 1;
    font-size: var(--font-size-base);
    line-height: 1.4;
}

/* ==================== 文本输入 ==================== */
.wpsurvey-input,
.wpsurvey-textarea {
    width: 100%;
    padding: var(--space-sm);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base); /* 16px防止iOS缩放 */
    transition: border-color 0.2s;
    background: var(--card-bg);
}

.wpsurvey-input:focus,
.wpsurvey-textarea:focus {
    outline: none;
    border-color: var(--primary);
}

.wpsurvey-textarea {
    min-height: 120px;
    resize: vertical;
}

/* ==================== 下拉选择 ==================== */
.wpsurvey-select {
    width: 100%;
    padding: var(--space-sm);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    background: var(--card-bg);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

.wpsurvey-select:focus {
    outline: none;
    border-color: var(--primary);
}

/* ==================== 评分题 ==================== */
.wpsurvey-rating {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
    justify-content: center;
}

.wpsurvey-rating-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--sv-border-light);
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--font-size-lg);
    font-weight: 600;
    transition: all 0.2s;
}

.wpsurvey-rating-item:hover {
    background: var(--sv-warning-light);
    border-color: var(--warning);
    transform: scale(1.05);
}

.wpsurvey-rating-item.selected {
    background: var(--warning);
    color: var(--sv-white);
    border-color: var(--warning);
    transform: scale(1.1);
}

.wpsurvey-rating-input {
    display: none;
}

/* ==================== 矩阵题 - 手机适配 ==================== */
.wpsurvey-matrix {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 calc(-1 * var(--space-sm));
    padding: 0 var(--space-sm);
}

.wpsurvey-matrix table {
    width: 100%;
    min-width: 500px; /* 确保在小屏上横向滚动 */
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.wpsurvey-matrix th,
.wpsurvey-matrix td {
    padding: 10px 8px;
    text-align: center;
    border: 1px solid var(--border);
    min-width: 60px;
}

.wpsurvey-matrix th {
    background: var(--sv-row-alt);
    font-weight: 600;
    white-space: nowrap;
}

.wpsurvey-matrix td:first-child {
    text-align: left;
    font-weight: 500;
    background: var(--sv-card-bg);
    min-width: 100px;
}

.wpsurvey-matrix input[type="radio"] {
    width: 24px;
    height: 24px;
    accent-color: var(--primary);
    cursor: pointer;
}

/* ==================== 开始区域 ==================== */
.wpsurvey-start-section {
    text-align: center;
    padding: var(--space-lg) 0;
}

.wpsurvey-start-section p {
    color: var(--text-light);
    margin-bottom: var(--space-md);
}

/* ==================== 操作按钮 - 底部固定 ==================== */
.wpsurvey-buttons {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    padding-bottom: calc(var(--space-sm) + var(--safe-bottom));
    background: var(--card-bg);
    border-top: 1px solid var(--border);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

.wpsurvey-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 3rem;
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s;
    border: none;
    text-decoration: none;
    min-height: 48px;
    letter-spacing: 0.5px;
}

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

.wpsurvey-btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: var(--sv-white);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.wpsurvey-btn-primary:hover {
    opacity: 0.92;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
    transform: translateY(-1px);
}

.wpsurvey-btn-secondary {
    background: var(--sv-border-light);
    color: var(--text);
}

.wpsurvey-btn-secondary:hover {
    background: var(--sv-border-light);
}

.wpsurvey-btn-prev:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ==================== 完成页 ==================== */
.wpsurvey-complete {
    text-align: center;
    padding: var(--space-lg) 0;
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}

.wpsurvey-complete-icon {
    font-size: 64px;
    margin-bottom: var(--space-md);
}

.wpsurvey-complete h2 {
    font-size: var(--font-size-xl);
    color: var(--success);
    margin-bottom: var(--space-sm);
}

/* ==================== 桌面端适配 ==================== */
@media (min-width: 768px) {
    .wpsurvey-container {
        padding: var(--space-lg);
        padding-bottom: var(--space-lg);
    }
    
    .wpsurvey-card {
        margin: var(--space-lg) auto;
        padding: var(--space-lg);
    }
    
    .wpsurvey-header h1 {
        font-size: 1.75rem;
    }
    
    .wpsurvey-question-text {
        font-size: var(--font-size-lg);
    }
    
    .wpsurvey-buttons {
        position: static;
        background: transparent;
        border-top: none;
        padding: var(--space-md) 0;
        justify-content: center;
    }
    
    .wpsurvey-header {
        padding: 2.5rem 2rem 2rem;
    }
    
    .wpsurvey-header h1 {
        font-size: 1.75rem;
    }
    
    .wpsurvey-header .description-wrap {
        width: 60%;
    }
    
    .wpsurvey-question {
        padding: 1.5rem;
    }
    
    .wpsurvey-rating {
        justify-content: flex-start;
    }
    
    .wpsurvey-rating-item {
        width: 44px;
        height: 44px;
    }
    
    .wpsurvey-option {
        padding: var(--space-sm) var(--space-md);
    }
}


/* ==================== 大屏桌面端（>=1400px） ==================== */
@media (min-width: 1400px) {
    .wpsurvey-container {
        max-width: 1600px;
        padding: var(--space-lg) 2.5rem;
    }
    
    .wpsurvey-header h1 {
        font-size: 2rem;
    }
    
    .wpsurvey-question-text {
        font-size: 1.125rem;
    }
    
    .wpsurvey-option {
        padding: var(--space-sm) var(--space-lg);
    }
    
    .wpsurvey-matrix table {
        min-width: 600px;
    }
}

/* ==================== 中等屏幕（1024px-1399px） ==================== */
@media (min-width: 1024px) and (max-width: 1399px) {
    .wpsurvey-container {
        max-width: 1600px;
        padding: var(--space-md) 2rem;
    }
}

/* ==================== 小屏桌面/平板竖屏（768px-1023px） ==================== */
@media (min-width: 768px) and (max-width: 1023px) {
    .wpsurvey-container {
        max-width: 1600px;
        padding: var(--space-sm) 1.5rem;
    }
    
    .wpsurvey-matrix table {
        min-width: 450px;
    }
}

/* ==================== 横屏手机适配 ==================== */
@media (max-height: 500px) and (orientation: landscape) {
    .wpsurvey-container {
        padding-bottom: var(--space-sm);
    }
    
    .wpsurvey-buttons {
        padding: var(--space-xs);
        padding-bottom: calc(var(--space-xs) + var(--safe-bottom));
    }
    
    .wpsurvey-btn {
        padding: 10px var(--space-sm);
        min-height: 40px;
    }
    
    .wpsurvey-card {
        padding: var(--space-sm);
    }
    
    .wpsurvey-question-text {
        font-size: var(--font-size-sm);
        margin-bottom: var(--space-xs);
    }
}

/* ==================== 暗色模式支持 ==================== */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: var(--sv-header-bg);
        --card-bg: var(--sv-header-bg);
        --text: var(--sv-border-light);
        --text-light: var(--sv-text-muted);
        --border: var(--sv-bg-light);
    }
    
    .wpsurvey-option {
        background: var(--sv-header-bg);
    }
    
    .wpsurvey-option:hover,
    .wpsurvey-option.selected {
        background: var(--sv-bg-light);
    }
    
    .wpsurvey-input,
    .wpsurvey-textarea,
    .wpsurvey-select {
        background: var(--sv-header-bg);
        color: var(--sv-border-light);
        border-color: var(--sv-bg-light);
    }
    
    .wpsurvey-matrix th {
        background: var(--sv-header-bg);
    }
    
    .wpsurvey-matrix td:first-child {
        background: var(--sv-header-bg);
    }
    
    .wpsurvey-btn-secondary {
        background: var(--sv-bg-light);
        color: var(--sv-border-light);
    }
}

/* ===== 首页样式 ===== */

/* 头部导航 */
.home-header {
    background: var(--primary-deeper);
    padding: 1rem 50px 1rem 1.5rem;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 2px solid var(--accent-gold);
    box-shadow: 0 2px 12px rgba(212, 168, 67, 0.1), 0 4px 8px rgba(0, 0, 0, 0.25);
}
.header-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.logo {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--sv-text-on-dark);
    text-decoration: none;
    text-shadow: 0 0 20px rgba(58, 110, 165, 0.3);
}
.home-nav {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}
.home-nav a {
    color: var(--text-on-dark);
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.2s;
}
.home-nav a:hover { color: var(--accent); }
.home-nav .btn-primary { color: var(--sv-white) !important; background: var(--button); border-color: var(--button); }
.home-nav .btn-outline { color: var(--accent) !important; border-color: var(--accent); }
.home-nav .btn-outline:hover { background: var(--accent); color: var(--sv-white) !important; }
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
}
.mobile-menu {
    display: none;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 0;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
    color: var(--text-on-dark);
    text-decoration: none;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-on-dark);
}

/* Hero区域 */
.hero-section {
    background: linear-gradient(135deg, var(--sv-header-bg) 0%, var(--sv-bg) 30%, var(--sv-accent) 70%, var(--sv-bg) 100%);
    color: var(--sv-white);
    padding: 5rem 1.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.hero-section::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(ellipse at 70% 40%, rgba(58, 110, 165, 0.1) 0%, transparent 50%);
    pointer-events: none;
}
.hero-content {
    max-width: 700px;
    margin: 0 auto;
}
.hero-content h1 {
    font-size: 2.25rem;
    font-weight: 800;
    margin-bottom: 1rem;
    line-height: 1.3;
}
.hero-content h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    opacity: 0.95;
}
.hero-content p {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 2rem;
    line-height: 1.6;
}
.hero-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* 按钮样式 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.5rem;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s;
}
.btn-primary {
    background: var(--button);
    color: var(--sv-white);
    border-color: var(--button);
}
.btn-primary:hover { background: var(--button-hover); border-color: var(--button-hover); }
.btn-outline {
    background: transparent;
    color: var(--sv-white);
    border-color: var(--sv-white);
}
.btn-outline:hover { background: rgba(255,255,255,0.15); }
.btn-lg { padding: 0.8rem 2rem; font-size: 1.05rem; }
.btn-sm { padding: 0.4rem 1rem; font-size: 0.85rem; }
.btn-block { width: 100%; }
.hero-section .btn-outline:hover { background: rgba(255,255,255,0.15); }
.hero-section .btn-primary:hover { background: var(--accent-hover); }
.home-page .btn-outline:not(.hero-section .btn-outline) {
    color: var(--accent);
    border-color: var(--accent);
}
.home-page .btn-outline:not(.hero-section .btn-outline):hover {
    background: var(--accent);
    color: var(--sv-white);
}

/* 功能特性 */
.features-section {
    padding: 3rem 1.5rem;
    max-width: 1600px;
    margin: 0 auto;
}
.section-header {
    text-align: center;
    margin-bottom: 2rem;
}
.section-header h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-on-dark);
    margin-bottom: 0.5rem;
}
.section-header p {
    color: var(--text-muted-on-dark);
    font-size: 1rem;
}
.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}
.feature-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transition: all 0.3s;
}
.feature-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 8px 24px rgba(196, 0, 45, 0.08); }
.feature-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
}
.feature-card h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text);
}
.feature-card p {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* 套餐定价 */
.pricing-section {
    padding: 3rem 1.5rem;
    background: var(--bg-light);
}
.pricing-section .section-header {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    max-width: 1600px;
    margin: 0 auto;
}
.pricing-card {
    min-width: 0;
}
.pricing-card .price span {
    font-size: 0.8em;
}
.pricing-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    position: relative;
    transition: all 0.3s;
}
.pricing-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 8px 24px rgba(196, 0, 45, 0.08); }
.pricing-card.featured {
    border: 2px solid var(--accent);
    box-shadow: 0 4px 20px rgba(196, 0, 45, 0.12);
}
.featured-tag {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-hover));
    color: var(--sv-white);
    padding: 0.2rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}
.pricing-header h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text);
}
.price {
    font-size: 2rem;
    font-weight: 800;
    color: var(--price-color);
    margin: 0.75rem 0;
}
.price span {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--text-light);
}
.pricing-features {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    text-align: left;
}
.pricing-features li {
    padding: 0.5rem 0;
    color: var(--text-light);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* 公开问卷列表 */
.surveys-section {
    padding: 3rem 1.5rem;
    background: var(--bg-light);
}

.surveys-section .section-header {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.surveys-section .section-header h2 {
    position: relative;
    padding-left: 14px;
}

.surveys-section .section-header h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 4px;
    border-radius: 2px;
    background: linear-gradient(to bottom, var(--accent-blue), var(--accent-gold));
}
.surveys-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    max-width: 1600px;
    margin: 0 auto;
}
.survey-preview-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    padding-top: 1.25rem;
    box-shadow: 0 2px 12px var(--sv-shadow-medium);
    transition: all 0.3s;
    text-decoration: none;
    color: inherit;
    display: block;
    position: relative;
    overflow: hidden;
}

.survey-preview-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(to top, rgba(58, 110, 165, 0.03), transparent);
    pointer-events: none;
}

.survey-preview-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-blue), var(--accent-gold));
    opacity: 0.4;
    transition: opacity 0.3s;
}

.survey-preview-card:hover::before {
    opacity: 1;
}
.survey-preview-card:hover { transform: translateY(-4px); border-color: var(--accent-blue); box-shadow: 0 8px 24px rgba(58, 110, 165, 0.15); }
.survey-preview-card h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.survey-description {
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.55em;
}
.survey-meta {
    display: flex;
    gap: 1rem;
    color: var(--text-muted);
    font-size: 0.8rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    margin-top: 0.5rem;
}
.view-more {
    display: inline-block;
    padding: 10px 28px;
    border: 2px solid var(--accent-blue);
    border-radius: 25px;
    color: var(--accent-blue);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s;
    margin-top: 1.5rem;
    text-align: center;
}

.view-more:hover {
    background: var(--accent-blue);
    color: var(--sv-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(58, 110, 165, 0.3);
}

/* 页脚 */
.home-footer {
    background: var(--primary-deeper);
    color: var(--text-on-dark);
    padding: 3.5rem 1.5rem 2rem;
    border-top: 2px solid var(--accent-gold);
    box-shadow: 0 -2px 12px rgba(212, 168, 67, 0.08), 0 -4px 8px var(--sv-shadow-heavy);
}
.footer-container {
    max-width: 1600px;
    margin: 0 auto;
}
.footer-top {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 2rem;
}
.footer-brand .footer-logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--sv-white);
    margin-bottom: 0.75rem;
}
.footer-tagline {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}
.footer-beian {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.5rem;
}
.footer-beian a {
    color: var(--text-muted-on-dark);
    font-size: 0.75rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    transition: color 0.2s;
}
.footer-beian a:hover { color: var(--accent-blue); }
.footer-beian img { width: 14px; height: 14px; }
.footer-links-col .footer-title,
.footer-contact .footer-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--sv-white);
    margin-bottom: 1rem;
}
.footer-nav {
    list-style: none;
    padding: 0;
}
.footer-nav li { margin-bottom: 0.5rem; }
.footer-nav a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
}
.footer-nav a:hover { color: var(--accent); }
.contact-info {
    list-style: none;
    padding: 0;
}
.contact-info li {
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}
.contact-info a {
    color: var(--accent-blue);
    text-decoration: none;
}
.contact-info a:hover { color: var(--accent); }
.footer-bottom {
    border-top: 1px solid var(--border-on-dark);
    padding-top: 1.5rem;
    margin-top: 0.5rem;
    text-align: center;
}
.footer-bottom .copyright {
    color: var(--text-muted-on-dark);
    font-size: 0.8rem;
}

/* 响应式 */
@media (max-width: 768px) {
    .home-nav { display: none; }
    .mobile-menu-btn { display: block; }
    .hero-content h1 { font-size: 1.75rem; }
    .hero-section { padding: 2.5rem 1rem; }
    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .pricing-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
    .hero-actions { flex-direction: column; }
    .hero-actions .btn { width: 100%; }
    .surveys-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-top { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
    .footer-brand { grid-column: 1 / -1; }
    .home-footer { padding: 2.5rem 1rem 1.5rem; }
}

@media (max-width: 480px) {
    .surveys-grid { grid-template-columns: 1fr; }
    .features-grid { grid-template-columns: 1fr; }
    .pricing-grid { grid-template-columns: 1fr; }
    .footer-top { grid-template-columns: 1fr; gap: 1.2rem; }
    .footer-brand { grid-column: auto; }
    .home-footer { padding: 2rem 0.8rem 1.2rem; }
    .hero-section { padding: 3rem 1rem; }
    .hero-content h1 { font-size: 1.5rem; }
    .hero-content h2 { font-size: 1.2rem; }
    .home-header { padding: 0.75rem 0.8rem; }
    .logo { font-size: 1.1rem; }
}

/* 定价卡片按钮 */
.pricing-card .btn-outline.btn-block {
    background: transparent;
    color: var(--accent);
    border: 2px solid var(--accent);
    font-weight: 600;
}
.pricing-card .btn-outline.btn-block:hover {
    background: var(--accent);
    color: var(--sv-white);
}
.pricing-card .btn-primary.btn-block {
    background: var(--button);
    color: var(--sv-white);
    border: 2px solid var(--button);
    font-weight: 600;
}
.pricing-card .btn-primary.btn-block:hover {
    background: var(--button-hover);
    border-color: var(--button-hover);
}

/* 认证页面 */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--sv-bg) 0%, var(--sv-header-bg) 100%);
    padding: 2rem 1rem;
}
.auth-container {
    width: 100%;
    max-width: 420px;
}
.auth-card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 24px rgba(0,0,0,0.15);
    border: 1px solid var(--border);
}
.auth-header {
    text-align: center;
    margin-bottom: 1.5rem;
}
.auth-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.25rem;
}
.auth-header p {
    color: var(--text-light);
    font-size: 0.9rem;
}
.auth-form .form-group {
    margin-bottom: 1rem;
}
.auth-form label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.3rem;
}
.auth-form input {
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.9rem;
    transition: border-color 0.2s;
    box-sizing: border-box;
    background: var(--card-bg);
    color: var(--text);
}
.auth-form input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(196, 0, 45, 0.08);
}
.auth-form .field-error {
    display: block;
    color: var(--error);
    font-size: 0.8rem;
    margin-top: 0.25rem;
}
.auth-form .btn {
    margin-top: 0.5rem;
}
.auth-footer {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.85rem;
    color: var(--text-light);
}
.auth-footer a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}
.auth-footer a:hover {
    text-decoration: underline;
}

/* 前端按钮强制白色文字 */
.auth-page .btn-primary {
    background: var(--button);
    color: var(--sv-white) !important;
    border-color: var(--button);
}
.auth-page .btn-primary:hover {
    background: var(--button-hover);
}
.auth-page .btn-outline {
    background: transparent;
    color: var(--accent) !important;
    border: 2px solid var(--accent);
}
.auth-page .btn-outline:hover {
    background: var(--accent);
    color: var(--sv-white) !important;
}

/* 登录页补充 */
.form-row-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}
.checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--accent);
}
.checkbox-label span {
    line-height: 1;
}
.form-row-between .checkbox-label {
    font-size: 0.85rem;
    color: var(--text-light);
}
.forgot-link {
    color: var(--accent);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
}
.forgot-link:hover {
    text-decoration: underline;
}
.redeem-card {
    margin-top: 1.25rem;
    text-align: center;
}
.redeem-card h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.3rem;
}
.redeem-card p {
    color: var(--text-light);
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}

/* 注册页权益卡片 */
.auth-benefits {
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
    background: var(--sv-card-bg-hover);
    border-radius: 10px;
    border: 1px solid var(--border);
}
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem 1rem;
}
.benefit-item {
    font-size: 10pt;
    color: var(--text-light);
    line-height: 1.6;
}
.upgrade-hint {
    text-align: center;
    font-size: 0.8rem;
    color: var(--accent);
    margin-top: 0.75rem;
}

/* ==================== 验证码相关样式 ==================== */
.code-input-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.code-input-row input {
    flex: 1;
    min-width: 0;
}
.send-code-btn {
    padding: 0 16px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--accent);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    min-width: 100px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.send-code-btn:hover:not(:disabled) {
    background: var(--sv-card-bg-hover);
    border-color: var(--accent);
}
.send-code-btn:disabled {
    color: var(--text-muted);
    cursor: not-allowed;
    background: var(--card-bg);
    border-color: var(--border);
}
.code-input-wrapper {
    flex: 1;
    position: relative;
}

/* 设置页面邮件配置相关样式 */
.settings-row-1 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}
.form-hint {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}
.inline-form {
    display: inline-block;
    width: 100%;
}
.inline-form .form-row {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}
.inline-form .form-group {
    margin-bottom: 0;
}


/* ==================== 验证码样式 ==================== */
.captcha-row {
    margin-bottom: 1rem;
}

.captcha-row label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text);
    font-weight: 500;
    font-size: 0.875rem;
}

.captcha-input-wrapper {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.captcha-input-wrapper input {
    flex: 1;
    padding: 0.875rem 1rem;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-base);
}

.captcha-input-wrapper input:focus {
    border-color: var(--primary);
    outline: none;
}

.captcha-img {
    height: 46px;
    width: 120px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: 2px solid var(--border);
    transition: border-color 0.2s ease;
}

.captcha-img:hover {
    border-color: var(--primary);
}

/* ==================== 用户中心页面 ==================== */
.user-page {
    background: var(--bg);
    min-height: 100vh;
}
.user-header {
    background: var(--primary-deeper);
    border-bottom: 2px solid var(--accent-gold);
    padding: 0.75rem 1.5rem;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 12px rgba(212, 168, 67, 0.08);
}
.user-header .header-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.user-nav {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}
.user-nav a {
    color: var(--text-on-dark);
    text-decoration: none;
    font-size: 0.95rem;
}
.user-nav a:hover { color: var(--accent); }
.user-nav a.active { color: var(--accent-gold); font-weight: 600; }
.user-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}
.user-panel .user-main {
    max-width: none;
    margin: 0;
    margin-left: var(--user-sidebar-width);
    padding: 0;
    min-height: 100vh;
    background: var(--user-bg);
}
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}
.page-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
}
.page-header .btn { white-space: nowrap; }
.btn-icon { margin-right: 0.3rem; }

/* 空状态 */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    border: 1px solid var(--border);
}
.empty-icon { font-size: 3rem; margin-bottom: 1rem; }
.empty-state h2 { font-size: 1.25rem; color: var(--text); margin-bottom: 0.5rem; }
.empty-state p { color: var(--text-light); margin-bottom: 1.5rem; }

/* 问卷列表 */
.survey-list { display: flex; flex-direction: column; gap: 1rem; }
.survey-card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s;
}
.survey-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.15); border-color: var(--accent-blue); }
.survey-info { flex: 1; min-width: 0; }
.survey-title { font-size: 1.05rem; font-weight: 600; margin-bottom: 0.5rem; }
.survey-title a { color: var(--text); text-decoration: none; }
.survey-title a:hover { color: var(--accent); }
.survey-meta { display: flex; gap: 1.25rem; align-items: center; font-size: 0.85rem; color: var(--text-muted); }
.meta-item { display: flex; align-items: center; gap: 0.3rem; }
.meta-icon { font-size: 0.9rem; }
.meta-status { font-size: 0.85rem; font-weight: 500; }
.meta-status.active { color: var(--success); }
.meta-status.closed { color: var(--text-muted); }

/* 问卷操作按钮 */
.survey-actions { display: flex; gap: 0.5rem; }
.action-btn {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: var(--sv-card-bg-hover);
    border: 1px solid var(--border);
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s;
    text-decoration: none;
}
.action-btn:hover { background: var(--sv-border-light); border-color: var(--accent-blue); }

/* 升级提示 */
.upgrade-banner {
    margin-top: 2rem;
    background: linear-gradient(135deg, var(--sv-card-bg-hover), var(--card-bg));
    border: 1px solid var(--accent-blue);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.upgrade-content h3 { font-size: 1rem; color: var(--accent-blue); margin-bottom: 0.25rem; }
.upgrade-content p { color: var(--text-light); font-size: 0.9rem; margin: 0; }


/* ==================== 问卷填写页补充样式 ==================== */
.survey-page {
    background: var(--bg);
    min-height: 100vh;
}

.wpsurvey-form {
    /* form wrapper */
}

.wpsurvey-question.error {
    border-left: 3px solid var(--error);
    padding-left: 12px;
}

.wpsurvey-closed {
    text-align: center;
    padding: var(--space-lg) 0;
}

.wpsurvey-closed .wpsurvey-complete-icon {
    font-size: 64px;
    margin-bottom: var(--space-md);
}

.wpsurvey-closed h2 {
    font-size: var(--font-size-xl);
    color: var(--warning);
    margin-bottom: var(--space-sm);
}

.wpsurvey-closed p {
    color: var(--text-light);
}

/* Select2 style for dropdown */
.wpsurvey-question select.wpsurvey-select {
    width: 100%;
    padding: var(--space-sm);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    background: var(--card-bg);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

.wpsurvey-question select.wpsurvey-select:focus {
    outline: none;
    border-color: var(--primary);
}

/* Submit button area */
.wpsurvey-buttons {
    margin-top: var(--space-md);
}

/* Fix for checkbox hidden input */
.wpsurvey-question input[type="hidden"] {
    display: none;
}

/* ==================== 图片选择题 ==================== */
.wpsurvey-image-choice {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
}

.wpsurvey-image-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem;
    background: var(--sv-card-bg);
    border: 2px solid var(--sv-card-bg);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.wpsurvey-image-option:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.wpsurvey-image-option.selected {
    border-color: var(--primary);
    background: linear-gradient(135deg, var(--sv-card-bg), var(--sv-card-bg));
    box-shadow: 0 2px 10px rgba(102,126,234,0.2);
}

.wpsurvey-image-thumb {
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 0.5rem;
    background: var(--sv-border-light);
}

.wpsurvey-image-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wpsurvey-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--sv-border-light);
    background: var(--sv-border-light);
}

.wpsurvey-image-option span {
    font-size: 0.85rem;
    color: var(--text);
    line-height: 1.4;
}

.wpsurvey-image-option.selected span {
    font-weight: 600;
    color: var(--primary);
}

@media (min-width: 768px) {
    .wpsurvey-image-choice {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
}

/* Toast */
.toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--sv-text);
    color: var(--sv-white);
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-size: 0.9rem;
    opacity: 0;
    transition: all 0.3s;
    pointer-events: none;
    z-index: 1000;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ==================== 创建/编辑问卷页面样式 ==================== */

/* 卡片式表单 */
.card-form {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    max-width: 600px;
}

.card-form .form-group {
    margin-bottom: 1.25rem;
}

.card-form label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.5rem;
}

.card-form .required {
    color: var(--sv-error);
}

.card-form .form-input {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 2px solid var(--sv-border-light);
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.2s;
}

.card-form .form-input:focus {
    outline: none;
    border-color: #667eea;
}

.card-form .form-input.input-error {
    border-color: var(--sv-error);
}

.card-form .form-textarea {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 2px solid var(--sv-border-light);
    border-radius: 8px;
    font-size: 1rem;
    resize: vertical;
    min-height: 100px;
    transition: border-color 0.2s;
}

.card-form .form-textarea:focus {
    outline: none;
    border-color: #667eea;
}

.card-form .field-error {
    display: block;
    color: var(--sv-error);
    font-size: 0.8rem;
    margin-top: 0.4rem;
}

.card-form .form-error {
    background: var(--sv-error-bg);
    color: var(--sv-accent-red);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.card-form .form-actions {
    margin-top: 1.5rem;
}

.card-form .form-actions .btn {
    width: 100%;
}

/* 通用按钮 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid transparent;
}

.btn-primary {
    background: #667eea;
    color: var(--sv-white);
}

.btn-primary:hover {
    background: var(--sv-accent);
}

.btn-outline {
    background: transparent;
    color: #667eea;
    border-color: #667eea;
}

.btn-outline:hover {
    background: #667eea;
    color: var(--sv-white);
}

.btn-lg {
    padding: 1rem 2rem;
    font-size: 1rem;
}

/* 移动端菜单 */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.25rem;
}

.mobile-menu {
    display: none;
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
    z-index: 99;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.mobile-menu.show {
    display: block;
}

.mobile-menu a {
    display: block;
    padding: 1rem 1.5rem;
    color: var(--text-light);
    text-decoration: none;
    border-bottom: 1px solid var(--sv-border-light);
}

.mobile-menu a:hover,
.mobile-menu a.active {
    background: var(--sv-card-bg);
    color: #667eea;
}

@media (max-width: 768px) {
    .mobile-menu-btn {
        display: block;
    }
    
    .user-nav {
        display: none;
    }
    
    .card-form {
        padding: 1.25rem;
    }
    
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .page-header .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==================== 响应式适配 ==================== */
@media (max-width: 480px) {
    .user-main {
        padding: 1rem;
    }
    
    .card-form {
        padding: 1rem;
    }
    
    .form-row {
        flex-direction: column;
        gap: 0;
    }
}

/* ==================== 账户页面 ==================== */
.account-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.account-card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.account-card h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}
.profile-form .form-group,
.password-form .form-group {
    margin-bottom: 1rem;
}
.profile-form label,
.password-form label {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-light);
    margin-bottom: 0.4rem;
}
.profile-form input,
.password-form input {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.95rem;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.profile-form input:focus,
.password-form input:focus {
    border-color: var(--accent-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(26,115,232,0.1);
}

/* 套餐卡片 */
.plan-card { text-align: center; }
.plan-header {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}
.plan-badge {
    display: inline-block;
    padding: 0.3rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    background: var(--sv-highlight-bg);
    color: var(--accent-blue);
}
.plan-desc {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-top: 0.5rem;
}
.plan-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}
.stat-item { text-align: center; }
.stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-blue);
}
.stat-label {
    font-size: 0.8rem;
    color: var(--text-muted);
}
.plan-footer {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

/* 用量统计 */
.stats-card h3 { margin-bottom: 1rem; }
.usage-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}
.usage-item { }
.usage-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
    display: flex;
    justify-content: space-between;
}
.usage-bar {
    height: 8px;
    background: var(--sv-card-bg);
    border-radius: 4px;
    overflow: hidden;
}
.usage-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-blue), var(--sv-accent));
    border-radius: 4px;
    transition: width 0.3s;
}

/* 响应式 */
@media (max-width: 768px) {
    .account-grid { grid-template-columns: 1fr; }
}

/* ==================== 升级页面 ==================== */
.upgrade-page { max-width: 65%; }
.upgrade-hero {
    text-align: center;
    margin-bottom: 2rem;
}
.upgrade-hero h1 { font-size: 1.5rem; color: var(--text); margin-bottom: 0.5rem; }
.upgrade-hero p { color: var(--text-muted); font-size: 0.95rem; }
.upgrade-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}
.upgrade-card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    position: relative;
    transition: transform 0.2s;
}
.upgrade-card:hover { transform: translateY(-2px); }
.upgrade-card.featured {
    border: 2px solid var(--accent-blue);
    box-shadow: 0 4px 20px rgba(26,115,232,0.15);
}
.upgrade-header { text-align: center; margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.upgrade-header h3 { font-size: 1.1rem; color: var(--text); margin-bottom: 0.5rem; }
.upgrade-price { font-size: 2rem; font-weight: 700; color: var(--accent-blue); }
.upgrade-price span { font-size: 0.85rem; font-weight: 400; color: var(--text-muted); }
.upgrade-features { list-style: none; padding: 0; margin: 0; }
.upgrade-features li {
    padding: 0.5rem 0;
    font-size: 0.9rem;
    color: var(--text-light);
    border-bottom: 1px solid var(--sv-border-light);
}
.upgrade-features li:last-child { border-bottom: none; }
.redeem-section {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.redeem-section h3 { font-size: 1.1rem; font-weight: 600; color: var(--text); margin-bottom: 1rem; }
.redeem-form .form-row { display: flex; gap: 0.75rem; }
.redeem-form .form-input { flex: 1; }
.redeem-form .form-input {
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.95rem;
}
.redeem-form .form-input:focus { border-color: var(--accent-blue); outline: none; }
@media (max-width: 600px) {
    .upgrade-grid { grid-template-columns: 1fr; }
    .redeem-form .form-row { flex-direction: column; }
}

/* ==================== 创建问卷页面 ==================== */
.create-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 0 2rem;
    align-items: start;
}
.create-tips {
    grid-row: 1 / 3;
    position: sticky;
    top: 80px;
}
.create-layout .page-header {
    margin-bottom: 1rem;
}
.tip-card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    margin-bottom: 1rem;
}
.tip-icon {
    font-size: 2rem;
    margin-bottom: 0.75rem;
}
.tip-card h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.5rem;
}
.tip-card p {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}
.tip-step {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.25rem;
    align-items: flex-start;
}
.tip-step:last-child { margin-bottom: 0; }
.step-num {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, var(--accent-blue), var(--sv-accent));
    color: var(--sv-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
}
.tip-step strong {
    font-size: 0.95rem;
    color: var(--text);
    display: block;
    margin-bottom: 0.15rem;
}
.tip-step p {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0;
}
.card-form {
    flex: 1;
    background: var(--card-bg);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.form-textarea {
    width: 100%;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.95rem;
    resize: vertical;
    min-height: 100px;
    box-sizing: border-box;
    font-family: inherit;
    line-height: 1.6;
}
.form-textarea:focus {
    border-color: var(--accent-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(26,115,232,0.1);
}
@media (max-width: 768px) {
    .create-layout { grid-template-columns: 1fr; }
    .create-tips { grid-row: auto; position: static; }
    .create-layout .page-header { grid-column: 1; }
}


/* ==================== 用户中心面板样式 ==================== */

/* 用户面板变量 */
:root {
    --user-primary: var(--accent-blue);
    --user-primary-dark: var(--accent-blue-hover);
    --user-primary-light: var(--sv-highlight-bg);
    --user-sidebar-bg: var(--sv-header-bg);
    --user-sidebar-width: 220px;
    --user-text: var(--sv-bg);
    --user-text-light: var(--sv-text-light);
    --user-border: var(--sv-border);
    --user-success: var(--sv-success);
    --user-error: var(--sv-accent-red);
    --user-warning: var(--sv-accent-gold);
    --user-bg: var(--sv-bg);
}

/* ==================== 用户面板侧边栏 ==================== */

/* 移动端顶部导航 */
.user-mobile-header {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: calc(56px + var(--safe-top, 0px));
    padding-top: var(--safe-top, 0px);
    background: var(--primary-deeper);
    color: var(--sv-white);
    z-index: 1001;
    border-bottom: 2px solid var(--accent-gold);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.user-mobile-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 1rem;
}

.user-mobile-header h1 {
    font-size: 1.125rem;
    font-weight: 600;
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu-toggle {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--sv-white);
    font-size: 24px;
    cursor: pointer;
}

.user-menu-toggle::before {
    content: '☰';
}

.user-menu-toggle.active::before {
    content: '✕';
}

/* 侧边栏遮罩 */
.user-sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
}

.user-sidebar-overlay.show {
    display: block;
}

/* 侧边栏 */
.user-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--user-sidebar-width);
    height: 100vh;
    background: var(--user-sidebar-bg);
    color: var(--sv-white);
    overflow-y: auto;
    z-index: 1000;
    display: flex;
    flex-direction: column;
}

.user-sidebar-header {
    padding: 1.5rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    text-align: center;
}

.user-sidebar-header h2 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-sidebar-header p {
    font-size: 0.8rem;
    opacity: 0.6;
}

.user-sidebar-nav {
    flex: 1;
    padding: 0.5rem 0;
}

.user-nav-item,
.user-nav-parent {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    transition: all 0.2s;
    background: transparent;
    border-left: 3px solid transparent;
}

.user-nav-item:hover,
.user-nav-parent:hover {
    background: rgba(255,255,255,0.1);
    color: var(--sv-white);
}

.user-nav-item.active {
    background: rgba(255,255,255,0.1);
    color: var(--sv-white);
    border-left-color: var(--accent-gold);
}

.user-nav-icon {
    margin-right: 0.75rem;
    font-size: 18px;
}

.user-nav-label {
    flex: 1;
    font-size: 0.95rem;
}

.user-nav-arrow {
    font-size: 10px;
    opacity: 0.6;
    transition: transform 0.2s;
}

.user-nav-group.active .user-nav-arrow {
    transform: rotate(180deg);
}

/* 子菜单 */
.user-nav-submenu {
    display: none;
    background: rgba(0,0,0,0.2);
}

.user-nav-group.active .user-nav-submenu,
.user-nav-group.expanded .user-nav-submenu {
    display: block;
}

.user-nav-submenu .user-nav-item {
    padding-left: 2.5rem;
    font-size: 0.9rem;
}

.user-sidebar-footer {
    padding: 1rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 0.85rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.user-sidebar-username {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-logout-link {
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    font-size: 0.85rem;
}

.user-logout-link:hover {
    color: var(--sv-white);
}

/* ==================== 用户面板主内容区 ==================== */



.user-page-header {
    padding: 1.5rem 1.5rem 1rem;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
}

.user-page-header h1 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--user-text);
}

.user-content {
    padding: 1.5rem;
}

/* ==================== 用户面板通用组件 ==================== */

/* 统计卡片网格 */
.user-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.user-stat-card {
    background: var(--card-bg);
    border-radius: 6px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    border: 1px solid var(--border);
}

.user-stat-icon {
    font-size: 32px;
}

.user-stat-info {
    flex: 1;
}

.user-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--user-text);
    line-height: 1.2;
}

.user-stat-label {
    font-size: 0.85rem;
    color: var(--user-text-light);
}

/* 用户卡片 */
.user-card {
    background: var(--card-bg);
    border-radius: 6px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    border: 1px solid var(--border);
}

.user-card h2,
.user-card h3 {
    margin-bottom: 1rem;
    color: var(--user-text);
    font-size: 1rem;
}

.user-card h2 {
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--user-border);
}

/* 用户表单 */
.user-form .form-group {
    margin-bottom: 1rem;
}

.user-form label {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--user-text);
    margin-bottom: 0.4rem;
}

.user-form input,
.user-form textarea,
.user-form select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--user-border);
    border-radius: 0.5rem;
    font-size: 0.95rem;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.user-form input:focus,
.user-form textarea:focus,
.user-form select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(196, 0, 45, 0.08);
}

.user-form input:disabled {
    background: var(--sv-card-bg-hover);
    color: var(--user-text-light);
}

/* 用户按钮 */
.user-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
    min-height: 44px;
}

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

.user-btn-primary {
    background: var(--user-primary);
    color: var(--sv-white);
}

.user-btn-primary:hover {
    background: var(--user-primary-dark);
}

.user-btn-secondary {
    background: var(--sv-table-border);
    color: var(--user-text);
}

.user-btn-secondary:hover {
    background: var(--sv-disabled);
}

.user-btn-block {
    width: 100%;
}

/* 提示消息 */
.user-alert {
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.user-alert-success {
    background: var(--sv-success-light);
    color: var(--sv-success);
}

.user-alert-error {
    background: var(--sv-error-bg);
    color: var(--sv-accent-red);
}

.user-alert-warning {
    background: var(--sv-warning-light);
    color: var(--sv-warning);
}

/* 用户表格 */
.user-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-bg);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    border: 1px solid var(--border);
}

.user-table th,
.user-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--user-border);
}

.user-table th {
    background: var(--sv-card-bg-hover);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--user-text);
}

.user-table tr:last-child td {
    border-bottom: none;
}

.user-table tr:hover td {
    background: var(--sv-card-bg-hover);
}

/* 问卷列表 */
.user-survey-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.user-survey-item {
    background: var(--card-bg);
    border-radius: 1rem;
    padding: 1.25rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: box-shadow 0.2s;
}

.user-survey-item:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.user-survey-info {
    flex: 1;
    min-width: 0;
}

.user-survey-title {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.user-survey-title a {
    color: var(--user-text);
    text-decoration: none;
}

.user-survey-title a:hover {
    color: var(--user-primary);
}

.user-survey-meta {
    display: flex;
    gap: 1.25rem;
    font-size: 0.85rem;
    color: var(--user-text-light);
}

.user-survey-meta span {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.user-survey-status {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    font-weight: 500;
}

.user-survey-status.active {
    color: var(--user-success);
}

.user-survey-status.closed {
    color: var(--user-text-light);
}

/* 问卷操作按钮 */
.user-survey-actions {
    display: flex;
    gap: 0.5rem;
}

.user-action-btn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    background: var(--sv-row-alt);
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    text-decoration: none;
    transition: background 0.2s;
}

.user-action-btn:hover {
    background: var(--sv-highlight-bg);
}

/* 快捷操作区 */
.user-quick-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.user-quick-action {
    background: var(--card-bg);
    border-radius: 1rem;
    padding: 1.5rem;
    text-align: center;
    text-decoration: none;
    color: var(--user-text);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: all 0.2s;
}

.user-quick-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.user-quick-action-icon {
    font-size: 2rem;
    margin-bottom: 0.75rem;
}

.user-quick-action-label {
    font-size: 0.95rem;
    font-weight: 500;
}

/* 套餐卡片 */
.user-plan-card {
    text-align: center;
}

.user-plan-header {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--user-border);
}

.user-plan-badge {
    display: inline-block;
    padding: 0.3rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-hover));
    color: var(--sv-white);
}

.user-plan-desc {
    color: var(--user-text-light);
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

.user-plan-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.user-stat-item {
    text-align: center;
}

.user-stat-item .value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--user-primary);
}

.user-stat-item .label {
    font-size: 0.8rem;
    color: var(--user-text-light);
}

.user-plan-footer {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--user-border);
}

.user-plan-footer p {
    margin-bottom: 0.75rem;
    color: var(--user-text-light);
    font-size: 0.9rem;
}

/* 用量进度条 */
.user-usage-item {
    margin-bottom: 1.25rem;
}

.user-usage-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--user-text-light);
    margin-bottom: 0.4rem;
}

.user-usage-bar {
    height: 8px;
    background: var(--sv-border);
    border-radius: 4px;
    overflow: hidden;
}

.user-usage-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--user-primary), var(--sv-accent));
    border-radius: 4px;
    transition: width 0.3s;
}

/* 升级页面 */
.user-upgrade-page {
    max-width: 65%;
}

.user-upgrade-hero {
    text-align: center;
    margin-bottom: 2rem;
}

.user-upgrade-hero h1 {
    font-size: 1.5rem;
    color: var(--user-text);
    margin-bottom: 0.5rem;
}

/* user-upgrade 6列布局 */
.user-upgrade-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    text-align: left;
}

.user-upgrade-card {
    background: var(--card-bg);
    border-radius: 6px;
    padding: 0.75rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    position: relative;
    transition: transform 0.2s;
}

.user-upgrade-card:hover {
    transform: translateY(-2px);
}

.user-upgrade-card.featured {
    border: 2px solid var(--user-primary);
    box-shadow: 0 4px 20px rgba(26,115,232,0.15);
}

.user-upgrade-header {
    text-align: left;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--user-border);
}

.user-upgrade-header h3 {
    font-size: 0.9rem;
    color: var(--user-text);
    margin-bottom: 0.25rem;
}

.user-upgrade-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--user-primary);
}

.user-upgrade-price span {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--user-muted);
}

.user-upgrade-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.user-upgrade-features li {
    font-size: 0.75rem;
    color: var(--user-text);
    padding: 0.25rem 0;
    line-height: 1.3;
    border-bottom: 1px solid var(--sv-border-light);
}

.user-upgrade-features li:last-child {
    border-bottom: none;
}

.user-upgrade-badge {
    position: absolute;
    top: -1px;
    left: 0.5rem;
    padding: 0.2rem 0.5rem;
    border-radius: 0 0 4px 4px;
    font-size: 0.7rem;
    font-weight: 600;
}

.user-upgrade-badge.current {
    background: #f56565;
    color: #fff;
}

.user-upgrade-badge.recommend {
    background: #48bb78;
    color: #fff;
}



.user-redeem-section {
    background: var(--card-bg);
    border-radius: 6px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.user-redeem-section h3 {
    margin-bottom: 1rem;
}

.user-redeem-form {
    display: flex;
    gap: 0.75rem;
}

.user-redeem-form input {
    flex: 1;
}

/* 工具栏 */
.user-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

/* 空状态 */
.user-empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--user-text-light);
}

.user-empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.user-empty-state h2 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: var(--user-text);
}

.user-empty-state p {
    margin-bottom: 1.5rem;
}


/* ==================== 问卷填写页补充样式 ==================== */
.survey-page {
    background: var(--bg);
    min-height: 100vh;
}

.wpsurvey-form {
    /* form wrapper */
}

.wpsurvey-question.error {
    border-left: 3px solid var(--error);
    padding-left: 12px;
}

.wpsurvey-closed {
    text-align: center;
    padding: var(--space-lg) 0;
}

.wpsurvey-closed .wpsurvey-complete-icon {
    font-size: 64px;
    margin-bottom: var(--space-md);
}

.wpsurvey-closed h2 {
    font-size: var(--font-size-xl);
    color: var(--warning);
    margin-bottom: var(--space-sm);
}

.wpsurvey-closed p {
    color: var(--text-light);
}

/* Select2 style for dropdown */
.wpsurvey-question select.wpsurvey-select {
    width: 100%;
    padding: var(--space-sm);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    background: var(--card-bg);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

.wpsurvey-question select.wpsurvey-select:focus {
    outline: none;
    border-color: var(--primary);
}

/* Submit button area */
.wpsurvey-buttons {
    margin-top: var(--space-md);
}

/* Fix for checkbox hidden input */
.wpsurvey-question input[type="hidden"] {
    display: none;
}

/* ==================== 图片选择题 ==================== */
.wpsurvey-image-choice {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
}

.wpsurvey-image-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem;
    background: var(--sv-card-bg);
    border: 2px solid var(--sv-card-bg);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.wpsurvey-image-option:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.wpsurvey-image-option.selected {
    border-color: var(--primary);
    background: linear-gradient(135deg, var(--sv-card-bg), var(--sv-card-bg));
    box-shadow: 0 2px 10px rgba(102,126,234,0.2);
}

.wpsurvey-image-thumb {
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 0.5rem;
    background: var(--sv-border-light);
}

.wpsurvey-image-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wpsurvey-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--sv-border-light);
    background: var(--sv-border-light);
}

.wpsurvey-image-option span {
    font-size: 0.85rem;
    color: var(--text);
    line-height: 1.4;
}

.wpsurvey-image-option.selected span {
    font-weight: 600;
    color: var(--primary);
}

@media (min-width: 768px) {
    .wpsurvey-image-choice {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
}

/* Toast */
.user-toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--sv-text);
    color: var(--sv-white);
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-size: 0.9rem;
    opacity: 0;
    transition: all 0.3s;
    pointer-events: none;
    z-index: 1000;
}

.user-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ==================== 移动端底部导航 ==================== */
.user-mobile-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--card-bg);
    border-top: 1px solid var(--user-border);
    padding: 0.5rem;
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
    z-index: 1000;
}

.user-mobile-nav-items {
    display: flex;
    justify-content: space-around;
}

.user-mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem;
    color: var(--user-text-light);
    text-decoration: none;
    font-size: 11px;
}

.user-mobile-nav-item span:first-child {
    font-size: 20px;
    margin-bottom: 2px;
}

.user-mobile-nav-item.active {
    color: var(--user-primary);
}

/* ==================== 桌面端适配 ==================== */
@media (min-width: 1024px) {
    .user-mobile-header {
        display: none !important;
    }
    
    .user-sidebar {
        display: flex !important;
    }
    
    .user-mobile-nav {
        display: none !important;
    }
    
    .user-panel .user-main {
        padding-top: 0;
    }
    
    .user-stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ==================== 移动端适配 ==================== */
@media (max-width: 1023px) {
    .user-sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        width: 260px;
    }
    
    .user-sidebar.open {
        transform: translateX(0);
    }
    
    .user-panel .user-main {
        margin-left: 0;
        padding-top: calc(56px + env(safe-area-inset-top, 0px));
        padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    }
    
    .user-mobile-header {
        display: block;
    }
    
    .user-mobile-nav {
        display: block;
    }
    
    .user-stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .user-quick-actions {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .user-upgrade-grid {
        grid-template-columns: 1fr;
    }
    
    /* 表格转为卡片 */
    .user-table {
        display: block;
    }
    
    .user-table thead {
        display: none;
    }
    
    .user-table tbody {
        display: block;
    }
    
    .user-table tr {
        display: block;
        background: var(--card-bg);
        border-radius: 1rem;
        margin-bottom: 1rem;
        padding: 1rem;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }
    
    .user-table td {
        display: flex;
        justify-content: space-between;
        padding: 0.5rem 0;
        border-bottom: 1px solid var(--user-border);
    }
    
    .user-table td:last-child {
        border-bottom: none;
        justify-content: flex-start;
        gap: 0.5rem;
        padding-top: 0.75rem;
    }
    
    .user-table td::before {
        content: attr(data-label);
        font-weight: 500;
        color: var(--user-text-light);
        font-size: 0.85rem;
    }
    
    /* 问卷列表手机适配 */
    .user-survey-item {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .user-survey-info {
        width: 100%;
    }
    
    .user-survey-actions {
        width: 100%;
        justify-content: flex-start;
        margin-top: 0.75rem;
        padding-top: 0.75rem;
        border-top: 1px solid var(--user-border);
    }
    
    .user-redeem-form {
        flex-direction: column;
    }
}

/* ==================== 小屏手机 ==================== */
@media (max-width: 480px) {
    .user-stats-grid {
        grid-template-columns: 1fr;
    }
    
    .user-quick-actions {
        grid-template-columns: 1fr;
    }
    
    .user-content {
        padding: 1rem;
    }
    
    .user-page-header {
        padding: 1rem;
    }
    
    .user-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .user-toolbar .user-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==================== 未读消息气泡样式 ==================== */
.unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--sv-accent-red);
    color: var(--sv-white);
    font-size: 11px;
    font-weight: 600;
    border-radius: 9px;
    margin-left: 6px;
    line-height: 1;
    position: relative;
    top: -1px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    vertical-align: middle;
    animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.unread-badge-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--sv-accent-red);
    color: var(--sv-white);
    font-size: 10px;
    font-weight: 600;
    border-radius: 8px;
    margin-left: 4px;
    line-height: 1;
    vertical-align: middle;
}

.user-welcome-link {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* 侧边栏未读气泡 */
.unread-badge-sidebar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--sv-accent-red);
    color: var(--sv-white);
    font-size: 11px;
    font-weight: 600;
    border-radius: 9px;
    margin-left: 6px;
    line-height: 1;
    text-decoration: none;
    vertical-align: middle;
    animation: pulse-badge 2s infinite;
}

.unread-badge-sidebar:hover {
    background: var(--sv-accent-red);
    color: var(--sv-white);
}

.nav-unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--sv-accent-red);
    color: var(--sv-white);
    font-size: 10px;
    font-weight: 600;
    border-radius: 8px;
    margin-left: 4px;
    line-height: 1;
    vertical-align: middle;
}

.user-nav-item.has-unread {
    position: relative;
}

/* 移动端售前咨询链接 */
.mobile-consult-link {
    position: relative;
}

/* ==================== 侧边栏域名样式 ==================== */
.user-sidebar-domain {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: block;
    text-align: center;
}

/* ============ 卡密兑换页 - 完整重写 ============ */

/* 容器放宽 */
.auth-container {
    width: 100%;
    max-width: 620px;
}

.auth-card {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    box-shadow: 0 8px 40px rgba(102, 126, 234, 0.1);
}

.auth-header {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-header h1 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.35rem;
}

.auth-header p {
    color: var(--text-light);
    font-size: 0.9rem;
}

/* 格式提示 */
.card-format-hint {
    text-align: center;
    margin-bottom: 1rem;
}

.card-format-hint span {
    font-size: 0.8rem;
    color: var(--text-muted);
    background: var(--sv-card-bg-hover);
    padding: 0.3rem 0.8rem;
    border-radius: 4px;
    letter-spacing: 0.02em;
}

/* 卡密输入框 - 放大加粗 */
.redeem-card-full .card-input,
.card-input {
    text-align: center !important;
    font-size: 1.15rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    padding: 0.85rem 1rem !important;
    border: 2px solid var(--sv-border-light) !important;
    border-radius: 10px !important;
    background: var(--sv-card-bg) !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}

.redeem-card-full .card-input:focus,
.card-input:focus {
    border-color: #667eea !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15) !important;
    background: var(--sv-white) !important;
    outline: none !important;
}

/* 兑换按钮 - 适中尺寸 */
.redeem-card-full .btn-primary,
.redeem-form .btn-primary {
    width: auto !important;
    min-width: 120px;
    padding: 0.5rem 1.8rem !important;
    font-size: 0.9rem !important;
    border-radius: 8px !important;
    display: block !important;
    margin: 1.5rem auto 0 !important;
}

/* 登录提示 */
.login-prompt {
    text-align: center;
    margin-top: 1.25rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.login-prompt a {
    color: #667eea;
    text-decoration: none;
    margin-left: 0.3rem;
}

.login-prompt a:hover {
    text-decoration: underline;
}

/* 返回链接 */
.back-link {
    text-align: center;
    margin-top: 2rem;
}

.back-link a {
    color: #667eea;
    text-decoration: none;
    font-size: 0.9rem;
}

.back-link a:hover {
    text-decoration: underline;
}

/* ============ 套餐权益对比 ============ */
.plan-comparison {
    margin-top: 2.5rem;
    padding: 0 0.5rem;
}

.plan-comparison h3 {
    font-size: 1.15rem;
    font-weight: bold;
    color: var(--text);
    margin-bottom: 1.25rem;
    text-align: center;
}

.plan-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.plan-item {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 1.25rem 0.75rem;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 2px solid transparent;
}

.plan-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

.plan-item.highlight {
    border-color: #667eea;
    background: linear-gradient(160deg, var(--sv-highlight-bg) 0%, var(--sv-highlight-bg) 100%);
}

.plan-item:last-child {
    border-color: var(--sv-card-bg);
    background: linear-gradient(160deg, var(--sv-card-bg) 0%, var(--sv-card-bg) 100%);
}

.plan-name {
    font-size: 0.95rem;
    font-weight: bold;
    color: var(--text);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.plan-item.highlight .plan-name {
    color: #667eea;
    border-bottom-color: var(--sv-highlight-bg);
}

.plan-item:last-child .plan-name {
    color: #764ba2;
    border-bottom-color: var(--sv-card-bg);
}

.plan-item ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.plan-item ul li {
    font-size: 0.82rem;
    color: var(--text-light);
    padding: 0.3rem 0;
}

.plan-item.highlight ul li {
    color: var(--text-light);
}

@media (max-width: 600px) {
    .auth-card {
        padding: 2rem 1.25rem;
    }
    .plan-grid {
        grid-template-columns: 1fr;
        max-width: 280px;
        margin: 0 auto;
    }
}


/* ==================== 创建问卷页面 ==================== */
.create-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 0 2rem;
    align-items: start;
}
.create-tips {
    grid-row: 1 / 3;
    position: sticky;
    top: 80px;
}
.create-layout .page-header {
    margin-bottom: 1rem;
}
.tip-card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    margin-bottom: 1rem;
}
.tip-icon {
    font-size: 2rem;
    margin-bottom: 0.75rem;
}
.tip-card h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.5rem;
}
.tip-card p {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}
.tip-step {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.25rem;
    align-items: flex-start;
}
.tip-step:last-child { margin-bottom: 0; }
.step-num {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, var(--accent-blue), var(--sv-accent));
    color: var(--sv-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
}
.tip-step strong {
    font-size: 0.95rem;
    color: var(--text);
    display: block;
    margin-bottom: 0.15rem;
}
.tip-step p {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0;
}
.card-form {
    flex: 1;
    background: var(--card-bg);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.form-textarea {
    width: 100%;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.95rem;
    resize: vertical;
    min-height: 100px;
    box-sizing: border-box;
    font-family: inherit;
    line-height: 1.6;
}
.form-textarea:focus {
    border-color: var(--accent-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(26,115,232,0.1);
}
@media (max-width: 768px) {
    .create-layout { grid-template-columns: 1fr; }
    .create-tips { grid-row: auto; position: static; }
    .create-layout .page-header { grid-column: 1; }
}


/* ==================== 用户中心面板样式 ==================== */

/* 用户面板变量 */
:root {
    --user-primary: var(--accent-blue);
    --user-primary-dark: var(--accent-blue-hover);
    --user-primary-light: var(--sv-highlight-bg);
    --user-sidebar-bg: var(--sv-header-bg);
    --user-sidebar-width: 220px;
    --user-text: var(--sv-bg);
    --user-text-light: var(--sv-text-light);
    --user-border: var(--sv-border);
    --user-success: var(--sv-success);
    --user-error: var(--sv-accent-red);
    --user-warning: var(--sv-accent-gold);
    --user-bg: var(--sv-bg);
}

/* ==================== 用户面板侧边栏 ==================== */

/* 移动端顶部导航 */
.user-mobile-header {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: calc(56px + var(--safe-top, 0px));
    padding-top: var(--safe-top, 0px);
    background: var(--primary-deeper);
    color: var(--sv-white);
    z-index: 1001;
    border-bottom: 2px solid var(--accent-gold);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.user-mobile-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 1rem;
}

.user-mobile-header h1 {
    font-size: 1.125rem;
    font-weight: 600;
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu-toggle {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--sv-white);
    font-size: 24px;
    cursor: pointer;
}

.user-menu-toggle::before {
    content: '☰';
}

.user-menu-toggle.active::before {
    content: '✕';
}

/* 侧边栏遮罩 */
.user-sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
}

.user-sidebar-overlay.show {
    display: block;
}

/* 侧边栏 */
.user-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--user-sidebar-width);
    height: 100vh;
    background: var(--user-sidebar-bg);
    color: var(--sv-white);
    overflow-y: auto;
    z-index: 1000;
    display: flex;
    flex-direction: column;
}

.user-sidebar-header {
    padding: 1.5rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    text-align: center;
}

.user-sidebar-header h2 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-sidebar-header p {
    font-size: 0.8rem;
    opacity: 0.6;
}

.user-sidebar-nav {
    flex: 1;
    padding: 0.5rem 0;
}

.user-nav-item,
.user-nav-parent {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    transition: all 0.2s;
    background: transparent;
    border-left: 3px solid transparent;
}

.user-nav-item:hover,
.user-nav-parent:hover {
    background: rgba(255,255,255,0.1);
    color: var(--sv-white);
}

.user-nav-item.active {
    background: rgba(255,255,255,0.1);
    color: var(--sv-white);
    border-left-color: var(--accent-gold);
}

.user-nav-icon {
    margin-right: 0.75rem;
    font-size: 18px;
}

.user-nav-label {
    flex: 1;
    font-size: 0.95rem;
}

.user-nav-arrow {
    font-size: 10px;
    opacity: 0.6;
    transition: transform 0.2s;
}

.user-nav-group.active .user-nav-arrow {
    transform: rotate(180deg);
}

/* 子菜单 */
.user-nav-submenu {
    display: none;
    background: rgba(0,0,0,0.2);
}

.user-nav-group.active .user-nav-submenu,
.user-nav-group.expanded .user-nav-submenu {
    display: block;
}

.user-nav-submenu .user-nav-item {
    padding-left: 2.5rem;
    font-size: 0.9rem;
}

.user-sidebar-footer {
    padding: 1rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 0.85rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.user-sidebar-username {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-logout-link {
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    font-size: 0.85rem;
}

.user-logout-link:hover {
    color: var(--sv-white);
}

/* ==================== 用户面板主内容区 ==================== */



.user-page-header {
    padding: 1.5rem 1.5rem 1rem;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
}

.user-page-header h1 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--user-text);
}

.user-content {
    padding: 1.5rem;
}

/* ==================== 用户面板通用组件 ==================== */

/* 统计卡片网格 */
.user-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.user-stat-card {
    background: var(--card-bg);
    border-radius: 6px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    border: 1px solid var(--border);
}

.user-stat-icon {
    font-size: 32px;
}

.user-stat-info {
    flex: 1;
}

.user-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--user-text);
    line-height: 1.2;
}

.user-stat-label {
    font-size: 0.85rem;
    color: var(--user-text-light);
}

/* 用户卡片 */
.user-card {
    background: var(--card-bg);
    border-radius: 6px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    border: 1px solid var(--border);
}

.user-card h2,
.user-card h3 {
    margin-bottom: 1rem;
    color: var(--user-text);
    font-size: 1rem;
}

.user-card h2 {
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--user-border);
}

/* 用户表单 */
.user-form .form-group {
    margin-bottom: 1rem;
}

.user-form label {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--user-text);
    margin-bottom: 0.4rem;
}

.user-form input,
.user-form textarea,
.user-form select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--user-border);
    border-radius: 0.5rem;
    font-size: 0.95rem;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.user-form input:focus,
.user-form textarea:focus,
.user-form select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(196, 0, 45, 0.08);
}

.user-form input:disabled {
    background: var(--sv-card-bg-hover);
    color: var(--user-text-light);
}

/* 用户按钮 */
.user-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
    min-height: 44px;
}

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

.user-btn-primary {
    background: var(--user-primary);
    color: var(--sv-white);
}

.user-btn-primary:hover {
    background: var(--user-primary-dark);
}

.user-btn-secondary {
    background: var(--sv-table-border);
    color: var(--user-text);
}

.user-btn-secondary:hover {
    background: var(--sv-disabled);
}

.user-btn-block {
    width: 100%;
}

/* 提示消息 */
.user-alert {
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.user-alert-success {
    background: var(--sv-success-light);
    color: var(--sv-success);
}

.user-alert-error {
    background: var(--sv-error-bg);
    color: var(--sv-accent-red);
}

.user-alert-warning {
    background: var(--sv-warning-light);
    color: var(--sv-warning);
}

/* 用户表格 */
.user-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-bg);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    border: 1px solid var(--border);
}

.user-table th,
.user-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--user-border);
}

.user-table th {
    background: var(--sv-card-bg-hover);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--user-text);
}

.user-table tr:last-child td {
    border-bottom: none;
}

.user-table tr:hover td {
    background: var(--sv-card-bg-hover);
}

/* 问卷列表 */
.user-survey-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.user-survey-item {
    background: var(--card-bg);
    border-radius: 1rem;
    padding: 1.25rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: box-shadow 0.2s;
}

.user-survey-item:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.user-survey-info {
    flex: 1;
    min-width: 0;
}

.user-survey-title {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.user-survey-title a {
    color: var(--user-text);
    text-decoration: none;
}

.user-survey-title a:hover {
    color: var(--user-primary);
}

.user-survey-meta {
    display: flex;
    gap: 1.25rem;
    font-size: 0.85rem;
    color: var(--user-text-light);
}

.user-survey-meta span {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.user-survey-status {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    font-weight: 500;
}

.user-survey-status.active {
    color: var(--user-success);
}

.user-survey-status.closed {
    color: var(--user-text-light);
}

/* 问卷操作按钮 */
.user-survey-actions {
    display: flex;
    gap: 0.5rem;
}

.user-action-btn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    background: var(--sv-row-alt);
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    text-decoration: none;
    transition: background 0.2s;
}

.user-action-btn:hover {
    background: var(--sv-highlight-bg);
}

/* 快捷操作区 */
.user-quick-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.user-quick-action {
    background: var(--card-bg);
    border-radius: 1rem;
    padding: 1.5rem;
    text-align: center;
    text-decoration: none;
    color: var(--user-text);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: all 0.2s;
}

.user-quick-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.user-quick-action-icon {
    font-size: 2rem;
    margin-bottom: 0.75rem;
}

.user-quick-action-label {
    font-size: 0.95rem;
    font-weight: 500;
}

/* 套餐卡片 */
.user-plan-card {
    text-align: center;
}

.user-plan-header {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--user-border);
}

.user-plan-badge {
    display: inline-block;
    padding: 0.3rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-hover));
    color: var(--sv-white);
}

.user-plan-desc {
    color: var(--user-text-light);
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

.user-plan-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.user-stat-item {
    text-align: center;
}

.user-stat-item .value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--user-primary);
}

.user-stat-item .label {
    font-size: 0.8rem;
    color: var(--user-text-light);
}

.user-plan-footer {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--user-border);
}

.user-plan-footer p {
    margin-bottom: 0.75rem;
    color: var(--user-text-light);
    font-size: 0.9rem;
}

/* 用量进度条 */
.user-usage-item {
    margin-bottom: 1.25rem;
}

.user-usage-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--user-text-light);
    margin-bottom: 0.4rem;
}

.user-usage-bar {
    height: 8px;
    background: var(--sv-border);
    border-radius: 4px;
    overflow: hidden;
}

.user-usage-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--user-primary), var(--sv-accent));
    border-radius: 4px;
    transition: width 0.3s;
}

/* 升级页面 */
.user-upgrade-page {
    max-width: 65%;
}

.user-upgrade-hero {
    text-align: center;
    margin-bottom: 2rem;
}

.user-upgrade-hero h1 {
    font-size: 1.5rem;
    color: var(--user-text);
    margin-bottom: 0.5rem;
}

.user-upgrade-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.user-upgrade-card {
    background: var(--card-bg);
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    position: relative;
    transition: transform 0.2s;
}

.user-upgrade-card:hover {
    transform: translateY(-2px);
}

.user-upgrade-card.featured {
    border: 2px solid var(--user-primary);
    box-shadow: 0 4px 20px rgba(26,115,232,0.15);
}

.user-upgrade-header {
    text-align: center;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--user-border);
}

.user-upgrade-header h3 {
    font-size: 1.1rem;
    color: var(--user-text);
    margin-bottom: 0.5rem;
}

.user-upgrade-price {
    font-size: 2rem;
    font-weight: 700;
    color: var(--user-primary);
}

.user-upgrade-price span {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--user-text-light);
}

.user-upgrade-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.user-upgrade-features li {
    padding: 0.6rem 0;
    font-size: 0.9rem;
    color: var(--user-text);
    border-bottom: 1px solid var(--sv-border-light);
}

.user-upgrade-features li:last-child {
    border-bottom: none;
}

.user-redeem-section {
    background: var(--card-bg);
    border-radius: 6px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.user-redeem-section h3 {
    margin-bottom: 1rem;
}

.user-redeem-form {
    display: flex;
    gap: 0.75rem;
}

.user-redeem-form input {
    flex: 1;
}

/* 工具栏 */
.user-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

/* 空状态 */
.user-empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--user-text-light);
}

.user-empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.user-empty-state h2 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: var(--user-text);
}

.user-empty-state p {
    margin-bottom: 1.5rem;
}


/* ==================== 问卷填写页补充样式 ==================== */
.survey-page {
    background: var(--bg);
    min-height: 100vh;
}

.wpsurvey-form {
    /* form wrapper */
}

.wpsurvey-question.error {
    border-left: 3px solid var(--error);
    padding-left: 12px;
}

.wpsurvey-closed {
    text-align: center;
    padding: var(--space-lg) 0;
}

.wpsurvey-closed .wpsurvey-complete-icon {
    font-size: 64px;
    margin-bottom: var(--space-md);
}

.wpsurvey-closed h2 {
    font-size: var(--font-size-xl);
    color: var(--warning);
    margin-bottom: var(--space-sm);
}

.wpsurvey-closed p {
    color: var(--text-light);
}

/* Select2 style for dropdown */
.wpsurvey-question select.wpsurvey-select {
    width: 100%;
    padding: var(--space-sm);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    background: var(--card-bg);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

.wpsurvey-question select.wpsurvey-select:focus {
    outline: none;
    border-color: var(--primary);
}

/* Submit button area */
.wpsurvey-buttons {
    margin-top: var(--space-md);
}

/* Fix for checkbox hidden input */
.wpsurvey-question input[type="hidden"] {
    display: none;
}

/* ==================== 图片选择题 ==================== */
.wpsurvey-image-choice {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
}

.wpsurvey-image-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem;
    background: var(--sv-card-bg);
    border: 2px solid var(--sv-card-bg);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.wpsurvey-image-option:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.wpsurvey-image-option.selected {
    border-color: var(--primary);
    background: linear-gradient(135deg, var(--sv-card-bg), var(--sv-card-bg));
    box-shadow: 0 2px 10px rgba(102,126,234,0.2);
}

.wpsurvey-image-thumb {
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 0.5rem;
    background: var(--sv-border-light);
}

.wpsurvey-image-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wpsurvey-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--sv-border-light);
    background: var(--sv-border-light);
}

.wpsurvey-image-option span {
    font-size: 0.85rem;
    color: var(--text);
    line-height: 1.4;
}

.wpsurvey-image-option.selected span {
    font-weight: 600;
    color: var(--primary);
}

@media (min-width: 768px) {
    .wpsurvey-image-choice {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
}

/* Toast */
.user-toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--sv-text);
    color: var(--sv-white);
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-size: 0.9rem;
    opacity: 0;
    transition: all 0.3s;
    pointer-events: none;
    z-index: 1000;
}

.user-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ==================== 移动端底部导航 ==================== */
.user-mobile-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--card-bg);
    border-top: 1px solid var(--user-border);
    padding: 0.5rem;
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
    z-index: 1000;
}

.user-mobile-nav-items {
    display: flex;
    justify-content: space-around;
}

.user-mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem;
    color: var(--user-text-light);
    text-decoration: none;
    font-size: 11px;
}

.user-mobile-nav-item span:first-child {
    font-size: 20px;
    margin-bottom: 2px;
}

.user-mobile-nav-item.active {
    color: var(--user-primary);
}

/* ==================== 桌面端适配 ==================== */
@media (min-width: 1024px) {
    .user-mobile-header {
        display: none !important;
    }
    
    .user-sidebar {
        display: flex !important;
    }
    
    .user-mobile-nav {
        display: none !important;
    }
    
    .user-panel .user-main {
        padding-top: 0;
    }
    
    .user-stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ==================== 移动端适配 ==================== */
@media (max-width: 1023px) {
    .user-sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        width: 260px;
    }
    
    .user-sidebar.open {
        transform: translateX(0);
    }
    
    .user-panel .user-main {
        margin-left: 0;
        padding-top: calc(56px + env(safe-area-inset-top, 0px));
        padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    }
    
    .user-mobile-header {
        display: block;
    }
    
    .user-mobile-nav {
        display: block;
    }
    
    .user-stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .user-quick-actions {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .user-upgrade-grid {
        grid-template-columns: 1fr;
    }
    
    /* 表格转为卡片 */
    .user-table {
        display: block;
    }
    
    .user-table thead {
        display: none;
    }
    
    .user-table tbody {
        display: block;
    }
    
    .user-table tr {
        display: block;
        background: var(--card-bg);
        border-radius: 1rem;
        margin-bottom: 1rem;
        padding: 1rem;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }
    
    .user-table td {
        display: flex;
        justify-content: space-between;
        padding: 0.5rem 0;
        border-bottom: 1px solid var(--user-border);
    }
    
    .user-table td:last-child {
        border-bottom: none;
        justify-content: flex-start;
        gap: 0.5rem;
        padding-top: 0.75rem;
    }
    
    .user-table td::before {
        content: attr(data-label);
        font-weight: 500;
        color: var(--user-text-light);
        font-size: 0.85rem;
    }
    
    /* 问卷列表手机适配 */
    .user-survey-item {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .user-survey-info {
        width: 100%;
    }
    
    .user-survey-actions {
        width: 100%;
        justify-content: flex-start;
        margin-top: 0.75rem;
        padding-top: 0.75rem;
        border-top: 1px solid var(--user-border);
    }
    
    .user-redeem-form {
        flex-direction: column;
    }
}

/* ==================== 小屏手机 ==================== */
@media (max-width: 480px) {
    .user-stats-grid {
        grid-template-columns: 1fr;
    }
    
    .user-quick-actions {
        grid-template-columns: 1fr;
    }
    
    .user-content {
        padding: 1rem;
    }
    
    .user-page-header {
        padding: 1rem;
    }
    
    .user-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .user-toolbar .user-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==================== 未读消息气泡样式 ==================== */
.unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--sv-accent-red);
    color: var(--sv-white);
    font-size: 11px;
    font-weight: 600;
    border-radius: 9px;
    margin-left: 6px;
    line-height: 1;
    position: relative;
    top: -1px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    vertical-align: middle;
    animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.unread-badge-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--sv-accent-red);
    color: var(--sv-white);
    font-size: 10px;
    font-weight: 600;
    border-radius: 8px;
    margin-left: 4px;
    line-height: 1;
    vertical-align: middle;
}

.user-welcome-link {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* 侧边栏未读气泡 */
.unread-badge-sidebar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--sv-accent-red);
    color: var(--sv-white);
    font-size: 11px;
    font-weight: 600;
    border-radius: 9px;
    margin-left: 6px;
    line-height: 1;
    text-decoration: none;
    vertical-align: middle;
    animation: pulse-badge 2s infinite;
}

.unread-badge-sidebar:hover {
    background: var(--sv-accent-red);
    color: var(--sv-white);
}

.nav-unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--sv-accent-red);
    color: var(--sv-white);
    font-size: 10px;
    font-weight: 600;
    border-radius: 8px;
    margin-left: 4px;
    line-height: 1;
    vertical-align: middle;
}

.user-nav-item.has-unread {
    position: relative;
}

/* 移动端售前咨询链接 */
.mobile-consult-link {
    position: relative;
}

/* ==================== 侧边栏域名样式 ==================== */
.user-sidebar-domain {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: block;
    text-align: center;
}
/* 卡密兑换页 - 套餐对比样式 */
.plan-comparison {
    margin-top: 1.5rem;
    padding: 0 1rem;
}

.plan-comparison h3 {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--text);
    margin-bottom: 1rem;
}

.plan-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.plan-item {
    background: var(--card-bg);
    border-radius: 0.75rem;
    padding: 1.25rem 1rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    text-align: center;
}

.plan-item.highlight {
    border: 2px solid #667eea;
    position: relative;
}

.plan-name {
    font-size: 1rem;
    font-weight: bold;
    color: var(--text);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.plan-item.highlight .plan-name {
    color: #667eea;
}

.plan-item ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.plan-item ul li {
    font-size: 0.875rem;
    color: var(--text-light);
    padding: 0.3rem 0;
}

@media (max-width: 600px) {
    .plan-grid {
        grid-template-columns: 1fr;
    }
}

/* ==================== 卡密兑换弹窗样式 ==================== */
.redeem-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.2s ease;
}

.redeem-modal {
    position: relative;
    background: var(--card-bg);
    border-radius: 12px;
    max-width: 440px;
    width: 90%;
    padding: 2rem;
    box-shadow: 0 10px 40px var(--sv-shadow-heavy);
    animation: scaleIn 0.25s ease;
    font-family: "Microsoft YaHei", "PingFang SC", -apple-system, BlinkMacSystemFont, sans-serif;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.redeem-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: none;
    background: var(--sv-border-light);
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
    color: var(--text-light);
    cursor: pointer;
    transition: all 0.2s;
}

.redeem-modal-close:hover {
    background: var(--accent);
    color: var(--sv-white);
}

.redeem-modal-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.redeem-modal-header h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 0.5rem 0;
}

.redeem-format-hint {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0;
}

.redeem-form-group {
    margin-bottom: 1rem;
}

.redeem-card-input {
    width: 100%;
    padding: 1rem;
    font-size: 1.1rem;
    font-family: "Consolas", "Monaco", monospace;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    border: 2px solid var(--border);
    border-radius: 8px;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
    background: var(--sv-white);
    color: var(--text);
}

.redeem-card-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(196, 0, 45, 0.08);
}

.redeem-error {
    color: var(--error);
    font-size: 0.875rem;
    text-align: center;
    margin-bottom: 1rem;
    padding: 0.5rem;
    background: var(--sv-error-light);
    border-radius: 6px;
}

.redeem-submit-btn {
    width: 100%;
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--sv-white);
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-blue-hover));
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 1rem;
}

.redeem-submit-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--accent-blue-hover), var(--sv-accent-hover));
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(74, 144, 217, 0.3);
}

.redeem-submit-btn:disabled {
    background: var(--sv-border-light);
    cursor: not-allowed;
}

.redeem-login-prompt {
    text-align: center;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.redeem-login-prompt p {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0 0 0.5rem 0;
}

.redeem-login-prompt a {
    color: var(--accent-blue);
    text-decoration: none;
    font-weight: 500;
}

.redeem-login-prompt a:hover {
    text-decoration: underline;
}

.redeem-buy-link {
    text-align: center;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    margin-top: 0.5rem;
}

.redeem-buy-link a {
    color: var(--accent-blue);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
}

.redeem-buy-link a:hover {
    text-decoration: underline;
}

/* 成功状态 */
.redeem-modal-success {
    text-align: center;
    padding: 1rem 0;
}

.redeem-success-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    background: linear-gradient(135deg, var(--success), var(--sv-success));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: var(--sv-white);
}

.redeem-modal-success h3 {
    font-size: 1.25rem;
    color: var(--text);
    margin: 0 0 0.5rem 0;
}

.redeem-modal-success p {
    font-size: 1rem;
    color: var(--text-light);
    margin: 0 0 1.5rem 0;
}

.redeem-success-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.redeem-success-actions .btn {
    flex: 1;
    max-width: 140px;
}

/* 移动端适配 */
@media (max-width: 480px) {
    .redeem-modal {
        padding: 1.5rem;
        width: 95%;
    }
    
    .redeem-modal-header h2 {
        font-size: 1.25rem;
    }
    
    .redeem-card-input {
        font-size: 1rem;
        padding: 0.875rem;
    }
    
    .redeem-success-actions {
        flex-direction: column;
    }
    
    .redeem-success-actions .btn {
        max-width: 100%;
    }
}


/* 用户下拉菜单 - Survey站 */
.user-dropdown {
    position: relative;
    display: inline-block;
}

.user-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    color: var(--sv-white);
    text-decoration: none;
    font-weight: 500;
}

.user-dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 0; border-top: 8px solid transparent;
    min-width: 180px;
    background: var(--card-bg);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    list-style: none;
    padding: 8px 0;
    z-index: 1000;
}

.user-dropdown:hover .user-dropdown-menu {
    display: block;
}

.user-dropdown-menu li a {
    display: block;
    padding: 10px 16px;
    color: var(--text);
    text-decoration: none;
    font-size: 14px;
    transition: background 0.2s;
}

.user-dropdown-menu li a:hover {
    background: var(--sv-card-bg-hover);
    color: var(--sv-accent);
}

.sso-nav-divider {
    height: 1px;
    background: var(--sv-border-light);
    margin: 5px 0;
}

.logout-item {
    color: var(--sv-accent-red) !important;
}