/* ========================================
   基础样式 - 企业级 SaaS 设计系统
   ======================================== */

:root {
    --primary: #1677ff;
    --primary-hover: #4096ff;
    --primary-bg: #e6f4ff;
    --primary-border: #91caff;
    --success: #52c41a;
    --success-bg: #f6ffed;
    --warning: #faad14;
    --warning-bg: #fffbe6;
    --danger: #ff4d4f;

    --text-1: #141414;
    --text-2: #595959;
    --text-3: #8c8c8c;
    --text-4: #bfbfbf;

    --bg-page: #f5f5f5;
    --bg-card: #ffffff;
    --bg-hover: #fafafa;
    --page-gradient:
        radial-gradient(circle at 15% 20%, rgba(86, 160, 255, .30) 0, rgba(86, 160, 255, 0) 28%),
        radial-gradient(circle at 85% 12%, rgba(0, 221, 255, .18) 0, rgba(0, 221, 255, 0) 20%),
        radial-gradient(circle at 50% 100%, rgba(31, 99, 255, .22) 0, rgba(31, 99, 255, 0) 34%),
        linear-gradient(135deg, #06152d 0%, #0b2f63 42%, #0f63d8 100%);
    --hero-gradient:
        linear-gradient(135deg, rgba(7, 28, 61, .92) 0%, rgba(11, 53, 112, .88) 55%, rgba(30, 116, 255, .82) 100%);
    --glass-bg: rgba(255, 255, 255, .10);
    --glass-border: rgba(255, 255, 255, .18);
    --hero-text: #f6fbff;
    --hero-text-muted: rgba(230, 244, 255, .82);

    --border: #f0f0f0;
    --border-strong: #d9d9d9;

    --shadow-card: 0 1px 2px 0 rgba(0,0,0,.03), 0 1px 6px -1px rgba(0,0,0,.02), 0 2px 4px 0 rgba(0,0,0,.02);
    --shadow-hover: 0 6px 16px 0 rgba(0,0,0,.08), 0 3px 6px -4px rgba(0,0,0,.12);
    --shadow-modal: 0 6px 16px 0 rgba(0,0,0,.08), 0 3px 6px -4px rgba(0,0,0,.12), 0 9px 28px 8px rgba(0,0,0,.05);

    --radius: 8px;
    --radius-lg: 12px;
}

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: var(--page-gradient);
    color: var(--text-1);
    line-height: 1.5715;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    background-attachment: fixed;
}

.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* 加载动画 */
.loading {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin .8s linear infinite;
}

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

/* 提示框 */
.alert {
    padding: 9px 12px;
    border-radius: var(--radius);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    line-height: 1.5715;
}

.alert-success {
    background: var(--success-bg);
    border: 1px solid #b7eb8f;
    color: #135200;
}

.alert-error {
    background: #fff2f0;
    border: 1px solid #ffccc7;
    color: #a8071a;
}

.alert-warning {
    background: var(--warning-bg);
    border: 1px solid #ffe58f;
    color: #874d00;
}

/* 通用按钮 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s;
    line-height: 1.5715;
}

.btn-primary {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.btn-primary:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

.btn-secondary {
    background: var(--bg-card);
    color: var(--text-1);
    border-color: var(--border-strong);
}

.btn-secondary:hover {
    color: var(--primary);
    border-color: var(--primary);
}