/* Design Tokens Import */
@import url("design-tokens.css");

/* ===== 中城语料 — 科技蓝 UI 体系 v3 ===== */
:root{--primary:#2563EB;--primary-hover:#1D4ED8;--primary-light:rgba(37,99,235,0.08);--primary-mid:rgba(37,99,235,0.15);--primary-dark:#1E3A5F;--bg:#F0F4F8;--bg-card:#FFFFFF;--bg-surface:#E2E8F0;--text:#1E293B;--text-secondary:#64748B;--text-tertiary:#94A3B8;--text-white:rgba(255,255,255,0.95);--border:#CBD5E1;--border-light:rgba(203,213,225,0.5);--success:#10B981;--danger:#EF4444;--danger-light:#FEF2F2;--warning:#F59E0B;--radius-xs:4px;--radius-sm:8px;--radius-md:14px;--radius-lg:20px;--radius-xl:28px;--radius-full:9999px;--shadow-xs:0 1px 2px rgba(0,0,0,0.04);--shadow-sm:0 2px 8px rgba(0,0,0,0.06);--shadow-md:0 4px 16px rgba(0,0,0,0.08);--shadow-lg:0 8px 28px rgba(0,0,0,0.10);--shadow-xl:0 16px 48px rgba(0,0,0,0.12);--shadow-blue:0 4px 16px rgba(37,99,235,0.25);--font-display:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,sans-serif;--font-body:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,sans-serif;--curve-spring:cubic-bezier(0.32,0.72,0,1);--curve-smooth:cubic-bezier(0.22,1,0.36,1)}

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

html,body{font-family:var(--font-body);font-size:15px;line-height:1.6;color:var(--text);background:linear-gradient(180deg,#E8EEF6 0%,#F0F4F8 30%,#F0F4F8 100%);-webkit-font-smoothing:antialiased;min-height:100dvh}

.page-container{max-width:480px;margin:0 auto;min-height:100dvh;background:var(--bg);padding-bottom:80px;position:relative}

/* ===== 导航栏 - 科技蓝 ===== */
.navbar{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:linear-gradient(135deg,#1E3A5F 0%,#2563EB 100%);color:#fff;box-shadow:0 2px 16px rgba(37,99,235,0.25)}.navbar-title{font-family:var(--font-display);font-size:17px;font-weight:600;color:#fff}.navbar a,.navbar button{color:#fff}.navbar .btn-outline{color:#fff;border-color:rgba(255,255,255,0.3)}.navbar .btn-outline:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.5)}

/* ===== 页面头部 ===== */
.page-header{padding:28px 20px 16px;border-bottom:1px solid var(--border-light)}.page-title{font-family:var(--font-display);font-size:26px;font-weight:700;letter-spacing:-0.02em;line-height:1.2;color:var(--text)}.page-subtitle{font-size:14px;color:var(--text-secondary);margin-top:6px}

/* ===== 按钮 ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 28px;background:var(--primary);color:#fff;border:none;border-radius:var(--radius-sm);font-family:var(--font-display);font-size:15px;font-weight:500;cursor:pointer;transition:all 0.5s var(--curve-spring);text-decoration:none}.btn:hover{background:var(--primary-hover);transform:translateY(-2px);box-shadow:var(--shadow-blue)}.btn:active{transform:scale(0.97);box-shadow:none}.btn:disabled{opacity:0.4;cursor:not-allowed;transform:none!important;box-shadow:none!important;background:var(--text-tertiary)}
.btn-success{background:var(--success)}.btn-success:hover{box-shadow:0 4px 16px rgba(16,185,129,0.25)}
.btn-danger{background:var(--danger)}.btn-danger:hover{box-shadow:0 4px 16px rgba(239,68,68,0.25)}
.btn-outline{background:transparent;color:var(--primary);border:2px solid var(--primary)}.btn-outline:hover{background:var(--primary);color:#fff}
.btn-outline2{background:var(--bg-card);color:var(--text);border:1.5px solid var(--border)}.btn-outline2:hover{background:var(--primary-light);border-color:var(--primary)}

/* ===== 输入框 ===== */
input,textarea,select{width:100%;padding:13px 16px;border:2px solid var(--border);border-radius:var(--radius-sm);font-family:var(--font-body);font-size:15px;color:var(--text);background:var(--bg-card);outline:none;transition:all 0.3s var(--curve-smooth)}input:hover{border-color:var(--primary-mid)}input:focus,textarea:focus,select:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(37,99,235,0.12)}

/* ===== 卡片 ===== */
.card{background:var(--bg-card);border-radius:var(--radius-md);border:1px solid var(--border-light);box-shadow:var(--shadow-sm);padding:20px;transition:all 0.4s var(--curve-spring)}.card:hover{box-shadow:var(--shadow-md)}.card-accent{border-left:4px solid var(--primary)}
.card-header{font-family:var(--font-display);font-size:16px;font-weight:600;margin-bottom:8px;color:var(--text)}
.card-body{font-size:14px;color:var(--text-secondary);line-height:1.6}

/* ===== 项目卡片 ===== */
.project-card-outer{padding:2px;background:linear-gradient(135deg,rgba(37,99,235,0.15),rgba(37,99,235,0.04));border-radius:calc(var(--radius-md)+3px);margin:10px 20px;transition:all 0.5s var(--curve-spring);cursor:pointer}.project-card-outer:hover{background:linear-gradient(135deg,var(--primary),var(--primary-hover));box-shadow:var(--shadow-blue)}.project-card{padding:20px 22px;background:var(--bg-card);border-radius:var(--radius-md);transition:all 0.5s var(--curve-spring)}.project-card-outer:hover .project-card{transform:translateY(-2px)}.project-card-name{font-family:var(--font-display);font-size:16px;font-weight:600;margin-bottom:6px}.project-card-desc{font-size:13px;color:var(--text-secondary);line-height:1.5}

/* ===== 标签 ===== */
.tag{display:inline-flex;padding:4px 12px;border-radius:var(--radius-full);font-size:12px;font-weight:500}.tag-primary{background:rgba(37,99,235,0.10);color:var(--primary)}.tag-success{background:rgba(16,185,129,0.10);color:#059669}.tag-danger{background:var(--danger-light);color:var(--danger)}.tag-warning{background:rgba(245,158,11,0.10);color:#D97706}

/* ===== 状态指示 ===== */
.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block}.status-dot-active{background:var(--success);box-shadow:0 0 8px rgba(16,185,129,0.5)}.status-dot-pending{background:var(--warning);box-shadow:0 0 8px rgba(245,158,11,0.5)}.status-dot-offline{background:var(--text-tertiary)}

/* ===== Toast ===== */
.toast{position:fixed;top:20px;left:50%;z-index:9999;padding:12px 24px;background:var(--text);color:#fff;border-radius:var(--radius-full);font-size:14px;font-family:var(--font-display);box-shadow:var(--shadow-lg);animation:toastIn 0.5s var(--curve-spring);transform:translateX(-50%)}@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(-16px) scale(0.96)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}


.toast-msg{position:fixed;top:20px;left:50%;z-index:9999;padding:12px 24px;background:#1e293b;color:#fff;border-radius:100px;font-size:14px;box-shadow:0 4px 20px rgba(0,0,0,0.2);transform:translateX(-50%);opacity:0;transition:opacity 0.3s ease,transform 0.3s ease;pointer-events:none;max-width:90%;text-align:center;white-space:nowrap}
.toast-msg.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ===== Spinner ===== */
.loading-spinner{width:24px;height:24px;border:2.5px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin 0.75s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}

/* ===== 空状态 ===== */
.empty-state{text-align:center;padding:64px 24px;color:var(--text-secondary)}.empty-state-icon{font-size:48px;margin-bottom:16px;opacity:0.3}

/* ===== 底部 ===== */
.app-footer{position:fixed;bottom:0;left:0;right:0;padding:12px 20px;text-align:center;font-size:11px;color:var(--text-tertiary);background:var(--bg);z-index:50;border-top:1px solid var(--border-light)}

/* ===== 链接 ===== */
a{color:var(--primary);text-decoration:none;transition:color 0.2s}a:hover{color:var(--primary-hover)}

/* ===== Eyebrow 标签 ===== */
.eyebrow{display:inline-flex;padding:4px 14px;border-radius:var(--radius-full);font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:0.10em;text-transform:uppercase;background:rgba(37,99,235,0.10);color:var(--primary);margin-bottom:12px}

/* ===== 分割线 ===== */
.divider{height:1px;background:var(--border-light);margin:20px 0}.divider-accent{height:2px;background:linear-gradient(90deg,var(--primary),transparent);margin:16px 0}

/* ===== 选中/活跃状态 ===== */
.active-item{background:rgba(37,99,235,0.06);border-color:var(--primary)!important}

/* ===== 响应式 ===== */
@media(max-width:480px){.page-title{font-size:22px}.page-header{padding:24px 16px 12px}.btn{padding:12px 22px}}