/* ===== 兼职猫 专业版 ===== */
:root {
  --blue: #1764ff;
  --blue-dark: #1250cc;
  --blue-light: #e8f0fe;
  --red: #fe4c5c;
  --green: #00b578;
  --orange: #ff8c00;
  --bg: #f5f6f7;
  --white: #fff;
  --text: #222;
  --text2: #666;
  --text3: #999;
  --border: #e8e8e8;
  --radius: 4px;
  --shadow: 0 1px 3px rgba(0,0,0,.08);
  --shadow-lg: 0 4px 20px rgba(0,0,0,.1);
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif; background:var(--bg); color:var(--text); font-size:14px; line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:var(--blue); cursor:pointer; text-decoration:none; }
a:hover { color:var(--blue-dark); }
button { cursor:pointer; border:none; outline:none; font-family:inherit; }
input,select,textarea { font-family:inherit; font-size:14px; outline:none; }
i { font-style:normal; color:var(--red); }

/* ===== 顶部导航 ===== */
.topbar { background:var(--white); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:100; }
.topbar-inner { max-width:1200px; margin:0 auto; display:flex; align-items:center; height:56px; padding:0 24px; gap:32px; }
.brand { font-size:20px; font-weight:700; color:var(--blue); cursor:pointer; letter-spacing:1px; }
.topnav { display:flex; gap:4px; }
.topnav a { padding:8px 16px; color:var(--text2); font-size:14px; border-radius:var(--radius); transition:.15s; }
.topnav a:hover,.topnav a.on { color:var(--blue); background:var(--blue-light); }
.topright { margin-left:auto; display:flex; align-items:center; gap:12px; }
.avatar { width:32px; height:32px; border-radius:50%; background:var(--blue); color:var(--white); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:600; }
.avatar-sm { width:28px; height:28px; border-radius:50%; background:#e0e0e0; color:#666; display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; margin-right:6px; vertical-align:middle; }
.avatar-lg { width:44px; height:44px; border-radius:50%; background:var(--blue); color:var(--white); display:inline-flex; align-items:center; justify-content:center; font-size:18px; font-weight:600; flex-shrink:0; }
.uname { font-size:14px; color:var(--text); }
.verif { font-size:11px; color:var(--green); background:#e6f9f2; padding:1px 6px; border-radius:2px; }
.wallet-tag { font-size:13px; color:var(--orange); }
.btn-text { padding:6px 12px; color:var(--blue); font-size:14px; cursor:pointer; border-radius:var(--radius); }
.btn-text:hover { background:var(--blue-light); }
.btn-fill { padding:6px 18px; background:var(--blue); color:var(--white); font-size:14px; border-radius:var(--radius); transition:.15s; border:none; font-weight:500; }
.btn-fill:hover { background:var(--blue-dark); }
.btn-fill:disabled { opacity:.5; cursor:not-allowed; }
.btn-fill.block { display:block; width:100%; padding:10px; }
.btn-fill.btn-lg { padding:10px 32px; font-size:15px; }
.btn-outline { padding:6px 18px; background:var(--white); color:var(--blue); border:1px solid var(--blue); border-radius:var(--radius); font-size:14px; font-weight:500; transition:.15s; }
.btn-outline:hover { background:var(--blue-light); }
.btn-outline.btn-lg { padding:10px 32px; font-size:15px; }

/* ===== 弹窗 ===== */
.overlay { position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; z-index:200; }
.dialog { background:var(--white); border-radius:8px; padding:32px 28px; width:380px; max-width:90vw; display:flex; flex-direction:column; gap:14px; }
.dialog-title { font-size:18px; font-weight:600; text-align:center; color:var(--text); }
.input { width:100%; padding:8px 12px; border:1px solid var(--border); border-radius:var(--radius); transition:border .15s; background:var(--white); color:var(--text); }
.input:focus { border-color:var(--blue); box-shadow:0 0 0 2px rgba(23,100,255,.1); }
textarea.input { resize:vertical; }
.input-sm { padding:4px 8px; font-size:13px; border:1px solid var(--border); border-radius:var(--radius); width:auto; }
.switch { text-align:center; font-size:13px; color:var(--text3); margin-top:4px; }
.tip-err { color:var(--red); font-size:13px; }

/* ===== 搜索横幅 ===== */
.search-banner { background:linear-gradient(135deg, #1a3a6b 0%, #2563eb 100%); padding:36px 24px; text-align:center; }
.search-wrap { max-width:680px; margin:0 auto; display:flex; }
.search-input { flex:1; padding:12px 16px; border:none; border-radius:var(--radius) 0 0 var(--radius); font-size:15px; }
.search-btn { padding:12px 32px; background:var(--blue); color:var(--white); font-size:15px; border-radius:0 var(--radius) var(--radius) 0; font-weight:500; }
.search-btn:hover { background:var(--blue-dark); }
.hot-tags { margin-top:14px; display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.hot-tags span { color:rgba(255,255,255,.8); font-size:13px; cursor:pointer; padding:4px 12px; background:rgba(255,255,255,.1); border-radius:20px; transition:.15s; }
.hot-tags span:hover { background:rgba(255,255,255,.2); color:#fff; }

/* ===== 主布局 ===== */
.main-layout { max-width:1200px; margin:20px auto; padding:0 24px; display:flex; gap:20px; }
.sidebar { width:220px; flex-shrink:0; }
.side-block { background:var(--white); border-radius:8px; padding:16px; margin-bottom:12px; box-shadow:var(--shadow); }
.side-title { font-size:14px; font-weight:600; margin-bottom:10px; color:var(--text); }
.side-list { display:flex; flex-direction:column; gap:2px; }
.side-list div { padding:6px 10px; font-size:13px; color:var(--text2); cursor:pointer; border-radius:var(--radius); transition:.1s; }
.side-list div:hover { color:var(--blue); background:var(--blue-light); }
.side-list div.active { color:var(--blue); background:var(--blue-light); font-weight:500; }
.content { flex:1; min-width:0; }
.list-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.count { font-size:14px; color:var(--text2); }
.count b { color:var(--text); }
.sort-tabs { display:flex; gap:4px; }
.sort-tabs span { padding:4px 12px; font-size:13px; color:var(--text2); cursor:pointer; border-radius:var(--radius); }
.sort-tabs span.active,.sort-tabs span:hover { color:var(--blue); background:var(--blue-light); }

/* ===== 职位卡片 ===== */
.job-list { display:flex; flex-direction:column; gap:10px; }
.job-card { background:var(--white); border-radius:8px; padding:20px; cursor:pointer; border:1px solid var(--border); transition:.2s; box-shadow:var(--shadow); }
.job-card:hover { border-color:var(--blue); box-shadow:var(--shadow-lg); }
.card-top { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:10px; }
.card-title { font-size:16px; font-weight:600; color:var(--text); flex:1; }
.card-salary { font-size:16px; font-weight:700; color:var(--red); white-space:nowrap; }
.card-salary em { font-size:12px; font-weight:400; color:var(--text3); }
.card-tags { display:flex; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.card-tags span { font-size:12px; color:var(--text2); background:#f0f0f0; padding:2px 8px; border-radius:2px; }
.tag-online { background:#e8f5e9 !important; color:#2e7d32 !important; }
.tag-offline { background:#fff3e0 !important; color:#e65100 !important; }
.tag-verified { background:#e3f2fd !important; color:#1565c0 !important; }
.card-company { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--text3); }
.v-check { color:var(--green); font-weight:700; font-size:12px; }
.card-time { margin-left:auto; }

/* ===== 分页 ===== */
.pagination { display:flex; justify-content:center; align-items:center; gap:16px; margin-top:24px; padding:16px; }
.pagination button { padding:8px 20px; background:var(--white); border:1px solid var(--border); border-radius:var(--radius); font-size:14px; color:var(--text2); }
.pagination button:disabled { opacity:.4; cursor:not-allowed; }
.pagination button:not(:disabled):hover { border-color:var(--blue); color:var(--blue); }
.page-num { font-size:14px; color:var(--text2); }

/* ===== 职位详情 ===== */
.page-detail { max-width:860px; margin:24px auto; padding:0 24px; }
.detail-card { background:var(--white); border-radius:8px; padding:32px; box-shadow:var(--shadow); }
.back-link { font-size:14px; color:var(--text2); display:inline-block; margin-bottom:20px; }
.back-link:hover { color:var(--blue); }
.det-head { display:flex; gap:24px; margin-bottom:28px; }
.det-head-left { flex:1; }
.det-head-left h2 { font-size:22px; font-weight:700; margin-bottom:12px; }
.det-head-right { width:240px; }
.det-tags { display:flex; gap:8px; flex-wrap:wrap; }
.det-tags span { font-size:12px; padding:3px 10px; background:#f0f0f0; border-radius:2px; color:var(--text2); }
.tag-salary { background:#fff0f0 !important; color:var(--red) !important; font-weight:600 !important; font-size:14px !important; }
.employer-info { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.employer-name { font-size:15px; font-weight:500; }
.employer-meta { font-size:12px; color:var(--text3); }
.det-stats { font-size:13px; color:var(--text3); display:flex; gap:12px; }
.det-section { margin-top:24px; border-top:1px solid var(--border); padding-top:20px; }
.det-section h3 { font-size:16px; font-weight:600; margin-bottom:10px; }
.det-body { font-size:14px; line-height:1.8; color:var(--text); white-space:pre-wrap; }
.contact-box { background:#f8f9fa; padding:12px; border-radius:var(--radius); font-size:14px; }
.login-prompt { background:#fff8e1; padding:14px; border-radius:var(--radius); font-size:14px; color:#8d6e00; text-align:center; }
.login-prompt a { font-weight:500; margin-left:8px; }
.det-actions { margin-top:28px; display:flex; gap:12px; }

/* ===== 表单页 ===== */
.page-form { max-width:760px; margin:24px auto; padding:0 24px; }
.form-card { background:var(--white); border-radius:8px; padding:32px; box-shadow:var(--shadow); }
.form-card h2 { font-size:20px; font-weight:600; margin-bottom:24px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.fg { margin-bottom:16px; }
.fg label { display:block; font-size:13px; font-weight:500; color:var(--text); margin-bottom:6px; }

/* ===== 个人中心 ===== */
.page-dash { max-width:980px; margin:24px auto; padding:0 24px; }
.dash-layout { display:flex; gap:20px; }
.dash-menu { width:180px; flex-shrink:0; background:var(--white); border-radius:8px; overflow:hidden; box-shadow:var(--shadow); }
.dash-menu a { display:block; padding:12px 16px; font-size:14px; color:var(--text2); border-left:3px solid transparent; cursor:pointer; transition:.1s; }
.dash-menu a:hover,.dash-menu a.active { color:var(--blue); background:var(--blue-light); border-left-color:var(--blue); }
.dash-content { flex:1; background:var(--white); border-radius:8px; padding:24px; min-height:400px; box-shadow:var(--shadow); }
.dash-content h3 { font-size:16px; font-weight:600; margin-bottom:16px; }
.data-item { padding:14px 0; border-bottom:1px solid #f0f0f0; }
.data-item:last-child { border-bottom:none; }
.data-title { font-size:14px; font-weight:500; color:var(--text); margin-bottom:4px; }
.data-meta { display:flex; gap:12px; font-size:13px; color:var(--text3); align-items:center; flex-wrap:wrap; }
.status-tag { font-size:12px; padding:1px 8px; border-radius:2px; font-weight:500; }
.status-tag.pending { background:#fff3e0; color:#e65100; }
.status-tag.accepted { background:#e8f5e9; color:#2e7d32; }
.status-tag.rejected { background:#ffebee; color:#c62828; }
.link-sm { font-size:13px; cursor:pointer; color:var(--blue); }
.link-sm.danger { color:var(--red); }
.balance-card { background:linear-gradient(135deg, #1764ff 0%, #4f8cff 100%); border-radius:8px; padding:24px; text-align:center; color:#fff; margin-bottom:20px; }
.balance-num { font-size:36px; font-weight:700; }
.balance-unit { font-size:13px; opacity:.8; margin-top:4px; }
.recharge-box { background:#f8f9fa; padding:16px; border-radius:8px; }
.recharge-box h4,.pay-card h4 { font-size:14px; font-weight:600; margin-bottom:8px; }
.pay-card { background:#f0fdf4; border:1px solid #bbf7d0; border-radius:8px; padding:16px; margin-top:16px; }
.pay-card code { font-size:12px; word-break:break-all; background:#fff; padding:4px 8px; border-radius:2px; display:block; margin:6px 0; }
.grey { color:var(--text3); font-size:13px; }

/* ===== 管理后台 ===== */
.page-admin { max-width:1100px; margin:24px auto; padding:0 24px; }
.admin-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.admin-top h2 { font-size:20px; font-weight:600; }
.stat-cards { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-bottom:20px; }
.stat-card { background:var(--white); border-radius:8px; padding:20px; text-align:center; box-shadow:var(--shadow); }
.s-num { font-size:28px; font-weight:700; color:var(--blue); }
.s-label { font-size:13px; color:var(--text3); margin-top:4px; }
.admin-tabs { display:flex; gap:4px; margin-bottom:16px; }
.admin-tabs a { padding:8px 20px; background:var(--white); border-radius:var(--radius); font-size:14px; color:var(--text2); cursor:pointer; transition:.1s; }
.admin-tabs a.active,.admin-tabs a:hover { background:var(--blue); color:var(--white); }
.table-box { background:var(--white); border-radius:8px; overflow-x:auto; box-shadow:var(--shadow); }
table { width:100%; border-collapse:collapse; font-size:13px; }
th,td { padding:10px 14px; text-align:left; border-bottom:1px solid #f0f0f0; }
th { font-weight:600; color:var(--text2); font-size:12px; background:#fafafa; }
tr:hover td { background:#fafafa; }

/* ===== 空状态 ===== */
.empty-state { text-align:center; color:var(--text3); padding:40px 0; font-size:14px; }

/* ===== 页脚 ===== */
.site-footer { border-top:1px solid var(--border); background:var(--white); margin-top:40px; }
.footer-inner { max-width:1200px; margin:0 auto; padding:24px; text-align:center; }
.footer-links { display:flex; justify-content:center; gap:24px; margin-bottom:12px; }
.footer-links a { font-size:13px; color:var(--text2); cursor:pointer; }
.footer-links a:hover { color:var(--blue); }
.footer-copy { font-size:12px; color:var(--text3); }

/* ===== 响应式 ===== */
@media (max-width:768px) {
  .topbar-inner { gap:12px; }
  .topnav { overflow-x:auto; }
  .main-layout { flex-direction:column; }
  .sidebar { width:100%; display:flex; gap:10px; }
  .side-block { flex:1; }
  .form-grid { grid-template-columns:1fr; }
  .dash-layout { flex-direction:column; }
  .dash-menu { width:100%; display:flex; overflow-x:auto; }
  .dash-menu a { white-space:nowrap; border-left:none; border-bottom:3px solid transparent; }
  .dash-menu a.active { border-left:none; border-bottom-color:var(--blue); }
  .stat-cards { grid-template-columns:1fr 1fr; }
  .det-head { flex-direction:column; }
  .det-head-right { width:100%; }
  .card-top { flex-direction:column; gap:8px; }
}