/* === pay system base === */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif; background:#f5f7fa; color:#333; font-size:14px; line-height:1.6; }
a { color:#3b82f6; text-decoration:none; }
a:hover { color:#2563eb; }

/* auth pages */
.auth-page { min-height:100vh; display:flex; align-items:center; justify-content:center; background:#f5f7fa; }
.auth-card { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:40px; width:380px; box-shadow:0 2px 12px rgba(0,0,0,0.04); }
.auth-card .logo { text-align:center; margin-bottom:28px; }
.auth-card .logo h1 { font-size:22px; color:#1e293b; font-weight:700; }
.auth-card .logo p { color:#64748b; font-size:13px; margin-top:4px; }
.form-group { margin-bottom:16px; }
.form-group label { display:block; color:#475569; font-size:13px; margin-bottom:6px; font-weight:500; }
.form-group input { width:100%; padding:10px 14px; border:1px solid #d1d5db; border-radius:8px; font-size:14px; outline:none; transition:border-color .2s; background:#fff; }
.form-group input:focus { border-color:#3b82f6; }
.btn { display:inline-block; padding:10px 20px; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; border:none; transition:all .2s; text-align:center; }
.btn-primary { background:#3b82f6; color:#fff; }
.btn-primary:hover { background:#2563eb; }
.btn-block { display:block; width:100%; }
.btn-sm { padding:6px 14px; font-size:13px; }
.btn-outline { background:transparent; border:1px solid #d1d5db; color:#475569; }
.btn-outline:hover { border-color:#3b82f6; color:#3b82f6; }
.btn-danger { background:#ef4444; color:#fff; }
.btn-danger:hover { background:#dc2626; }
.btn-success { background:#22c55e; color:#fff; }
.btn-success:hover { background:#16a34a; }
.auth-footer { text-align:center; margin-top:20px; font-size:13px; color:#64748b; }
.auth-footer a { margin-left:4px; }

/* dashboard layout */
.dashboard { display:flex; min-height:100vh; }
.sidebar { width:220px; background:#fff; border-right:1px solid #e5e7eb; display:flex; flex-direction:column; position:fixed; top:0; left:0; bottom:0; z-index:10; }
.sidebar .brand { padding:20px; border-bottom:1px solid #f1f5f9; }
.sidebar .brand h2 { font-size:18px; color:#1e293b; font-weight:700; }
.sidebar .brand p { font-size:12px; color:#94a3b8; margin-top:2px; }
.sidebar nav { flex:1; padding:12px 0; }
.sidebar nav a { display:flex; align-items:center; gap:10px; padding:10px 20px; color:#64748b; font-size:14px; transition:all .15s; }
.sidebar nav a:hover { background:#f8fafc; color:#334155; }
.sidebar nav a.active { background:#eff6ff; color:#3b82f6; font-weight:600; border-right:3px solid #3b82f6; }
.sidebar nav a svg { width:18px; height:18px; flex-shrink:0; }
.sidebar .user-info { padding:16px 20px; border-top:1px solid #f1f5f9; display:flex; align-items:center; justify-content:space-between; }
.sidebar .user-info .name { font-size:13px; color:#334155; font-weight:500; }
.sidebar .user-info .logout { font-size:13px; color:#94a3b8; cursor:pointer; }
.sidebar .user-info .logout:hover { color:#ef4444; }
.main { flex:1; margin-left:220px; padding:0; }
.main-header { background:#fff; border-bottom:1px solid #e5e7eb; padding:16px 28px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:5; }
.main-header h2 { font-size:18px; color:#1e293b; font-weight:600; }
.main-content { padding:24px 28px; }

/* cards */
.card { background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:20px; margin-bottom:16px; }
.card-title { font-size:15px; font-weight:600; color:#1e293b; margin-bottom:12px; }

/* table */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
th,td { padding:10px 14px; text-align:left; border-bottom:1px solid #f1f5f9; font-size:13px; }
th { background:#f8fafc; color:#64748b; font-weight:600; white-space:nowrap; }
td { color:#334155; }
tr:hover td { background:#fafbfc; }

/* status badges */
.badge { display:inline-block; padding:2px 10px; border-radius:20px; font-size:12px; font-weight:500; }
.badge-open { background:#fef3c7; color:#92400e; }
.badge-replied { background:#dbeafe; color:#1e40af; }
.badge-closed { background:#f1f5f9; color:#64748b; }
.badge-pending { background:#fef3c7; color:#92400e; }
.badge-issued { background:#d1fae5; color:#065f46; }
.badge-downloaded { background:#dbeafe; color:#1e40af; }
.badge-paid { background:#d1fae5; color:#065f46; }
.badge-cancelled { background:#f1f5f9; color:#64748b; }

/* empty state */
.empty { text-align:center; padding:60px 20px; color:#94a3b8; }
.empty svg { width:48px; height:48px; margin-bottom:12px; opacity:.4; }
.empty p { font-size:14px; }

/* modal */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.3); display:flex; align-items:center; justify-content:center; z-index:100; }
.modal { background:#fff; border-radius:12px; padding:28px; width:480px; max-width:90vw; box-shadow:0 8px 30px rgba(0,0,0,.12); }
.modal h3 { font-size:17px; color:#1e293b; margin-bottom:20px; }
.modal .form-group:last-of-type { margin-bottom:20px; }
.modal .actions { display:flex; gap:10px; justify-content:flex-end; }
.modal textarea { width:100%; padding:10px 14px; border:1px solid #d1d5db; border-radius:8px; font-size:14px; resize:vertical; min-height:80px; outline:none; font-family:inherit; }
.modal textarea:focus { border-color:#3b82f6; }

/* responsive */
@media (max-width:768px) {
  .sidebar { width:100%; position:relative; flex-direction:row; flex-wrap:wrap; border-right:none; border-bottom:1px solid #e5e7eb; }
  .sidebar .brand { padding:12px 16px; }
  .sidebar nav { display:flex; overflow-x:auto; padding:0 8px; gap:4px; width:100%; }
  .sidebar nav a { white-space:nowrap; padding:8px 14px; border-right:none; }
  .sidebar nav a.active { border-right:none; border-bottom:3px solid #3b82f6; }
  .sidebar .user-info { width:100%; padding:10px 16px; }
  .main { margin-left:0; }
  .main-header { padding:12px 16px; }
  .main-content { padding:16px; }
  .auth-card { margin:16px; width:auto; }
}