/* 体检结果整理工具 - 全局样式 */
/* 继承原工具的视觉风格 */

:root {
    --bg: #f0f4f8;
    --card-bg: #ffffff;
    --primary: #3b6ff5;
    --primary-hover: #2858d9;
    --primary-light: #eef2ff;
    --text: #1a202c;
    --text-secondary: #5a6677;
    --text-muted: #9ca3af;
    --border: #e2e8f0;
    --border-focus: #3b6ff5;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --shadow: 0 4px 16px rgba(0,0,0,0.06),0 1px 4px rgba(0,0,0,0.04);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.08),0 4px 12px rgba(0,0,0,0.04);
    --radius: 14px;
    --radius-sm: 8px;
    --radius-xs: 6px;
    --transition: 0.2s cubic-bezier(0.4,0,0.2,1);
    --danger: #ef4444;
    --success: #22c55e;
    --warning: #f59e0b;
}

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

body {
    font-family: -apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
    background: linear-gradient(135deg, #e8edf5 0%, #f0f4f8 30%, #eef1f6 60%, #f5f3f0 100%);
    background-attachment: fixed;
    min-height:100vh;
    color:var(--text);
    -webkit-font-smoothing:antialiased;
}

/* ── 顶级导航栏 ── */
.top-nav {
    display:flex; align-items:center; gap:12px;
    background:var(--card-bg); border-bottom:1px solid var(--border);
    padding:10px 24px; box-shadow:var(--shadow-sm); flex-shrink:0;
    position:sticky; top:0; z-index:100;
}
.top-nav .nav-brand {
    font-weight:800; font-size:1rem; color:var(--primary);
    letter-spacing:-0.02em; display:flex; align-items:center; gap:6px;
}
.top-nav .nav-brand svg { width:20px; height:20px; }
.top-nav .nav-spacer { flex:1; }
.top-nav .nav-user {
    display:flex; align-items:center; gap:8px;
    font-size:0.82rem; color:var(--text-secondary);
}
.top-nav .nav-credits {
    display:inline-flex; align-items:center; gap:4px;
    background:var(--primary-light); color:var(--primary);
    padding:4px 10px; border-radius:20px; font-weight:700; font-size:0.78rem;
}
.top-nav .nav-btn {
    padding:7px 16px; border-radius:20px; border:2px solid var(--border);
    background:#fff; font-weight:600; font-size:0.8rem;
    cursor:pointer; color:var(--text-secondary); transition:var(--transition);
    text-decoration:none; display:inline-flex; align-items:center; gap:4px;
}
.top-nav .nav-btn:hover { border-color:var(--primary); color:var(--primary); }
.top-nav .nav-btn.primary {
    background:var(--primary); color:#fff; border-color:var(--primary);
}
.top-nav .nav-btn.primary:hover { background:var(--primary-hover); }

/* ── 卡片容器 ── */
.auth-container {
    display:flex; align-items:center; justify-content:center;
    min-height:100vh; padding:20px;
}
.auth-card {
    background:var(--card-bg); border-radius:20px;
    box-shadow:var(--shadow-lg); width:100%; max-width:420px;
    padding:40px 36px;
}
.auth-card h1 {
    font-size:1.5rem; font-weight:800; letter-spacing:-0.02em;
    margin-bottom:4px; display:flex; align-items:center; gap:8px;
}
.auth-card .subtitle {
    font-size:0.85rem; color:var(--text-secondary); margin-bottom:28px;
}

/* ── 表单 ── */
.form-group {
    margin-bottom:16px; display:flex; flex-direction:column; gap:4px;
}
.form-group label {
    font-size:0.8rem; font-weight:700; color:var(--text-secondary);
}
.form-group input {
    width:100%; border:2px solid var(--border); border-radius:var(--radius-xs);
    padding:10px 14px; font-size:0.88rem; outline:none;
    transition:var(--transition); background:#fafbfc; color:var(--text);
}
.form-group input:focus {
    border-color:var(--border-focus); box-shadow:0 0 0 3px rgba(59,111,245,0.06);
    background:#fff;
}
.form-hint {
    font-size:0.72rem;
    color:var(--text-muted);
    margin-top:2px;
}
.form-divider {
    height:1px;
    background:var(--border);
    margin:12px 0;
}
.required {
    color:var(--danger);
}
.optional {
    color:var(--text-muted);
    font-weight:400;
}

/* ── 按钮 ── */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    padding:11px 22px; border-radius:22px; font-weight:700; font-size:0.88rem;
    cursor:pointer; transition:var(--transition); border:none;
    text-decoration:none;
}
.btn-primary {
    background:var(--primary); color:#fff;
    box-shadow:0 2px 10px rgba(59,111,245,0.3);
}
.btn-primary:hover { background:var(--primary-hover); box-shadow:0 4px 16px rgba(59,111,245,0.4); }
.btn-block { width:100%; }
.btn-secondary {
    background:#fff; color:var(--text-secondary); border:2px solid var(--border);
}
.btn-secondary:hover { border-color:var(--primary); color:var(--primary); }
.btn-danger {
    background:var(--danger); color:#fff;
}
.btn-warning {
    background:var(--warning); color:#fff;
}
.btn-warning:hover { background:#d97706; }
.btn-info {
    background:#0ea5e9; color:#fff;
}
.btn-info:hover { background:#0284c7; }
.btn-sm { padding:6px 14px; font-size:0.78rem; border-radius:16px; }

.form-footer {
    text-align:center; margin-top:18px; font-size:0.82rem; color:var(--text-secondary);
}
.form-footer a { color:var(--primary); text-decoration:none; font-weight:600; }
.form-footer a:hover { text-decoration:underline; }

/* ── 提示信息 ── */
.toast {
    position:fixed; bottom:30px; left:50%; transform:translateX(-50%) translateY(20px);
    background:#1a202c; color:#fff; padding:10px 22px; border-radius:22px;
    font-size:0.85rem; font-weight:600; z-index:2000;
    opacity:0; pointer-events:none; transition:all 0.3s ease;
    box-shadow:0 8px 20px rgba(0,0,0,0.2);
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.toast.error { background:#dc2626; }
.toast.success { background:#16a34a; }
.toast.warning { background:var(--warning); }

.alert {
    padding:10px 14px; border-radius:var(--radius-xs);
    font-size:0.82rem; font-weight:600; margin-bottom:12px;
    display:none;
}
.alert.show { display:block; }
.alert-error { background:#fef2f2; color:#dc2626; border:1px solid #fecaca; }
.alert-success { background:#f0fdf4; color:#16a34a; border:1px solid #bbf7d0; }

/* ── 加载状态 ── */
.spinner {
    display:inline-block; width:16px; height:16px;
    border:2.5px solid rgba(255,255,255,0.3);
    border-top-color:#fff; border-radius:50%; animation:spin 0.7s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ── 页面包装器 ── */
.page-wrapper {
    display:flex; flex-direction:column; min-height:100vh;
}
.page-content {
    flex:1; padding:16px 24px; max-width:1440px; width:100%; margin:0 auto;
}

/* ── 响应式 ── */
@media (max-width:800px) {
    .top-nav { padding:8px 12px; flex-wrap:wrap; }
    .page-content { padding:12px; }
    .auth-card { padding:28px 20px; }
}