/* ═══════════════════════════════════════════════════
   缺陷跟踪系统 — 样式表
   ═══════════════════════════════════════════════════ */

:root {
  --c-primary: #4F46E5;
  --c-primary-light: #EEF2FF;
  --c-primary-dark: #4338CA;
  --c-success: #059669;
  --c-success-bg: #ECFDF5;
  --c-warning: #D97706;
  --c-warning-bg: #FFFBEB;
  --c-danger: #DC2626;
  --c-danger-bg: #FEF2F2;
  --c-info: #2563EB;
  --c-info-bg: #EFF6FF;
  --c-purple: #7C3AED;
  --c-purple-bg: #F5F3FF;
  --c-teal: #0D9488;
  --c-teal-bg: #F0FDFA;
  --c-gray-50: #F9FAFB;
  --c-gray-100: #F3F4F6;
  --c-gray-200: #E5E7EB;
  --c-gray-300: #D1D5DB;
  --c-gray-400: #9CA3AF;
  --c-gray-500: #6B7280;
  --c-gray-600: #4B5563;
  --c-gray-700: #374151;
  --c-gray-800: #1F2937;
  --c-gray-900: #111827;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 14px rgba(0,0,0,.1);
  --shadow-lg: 0 10px 40px rgba(0,0,0,.15);
  --transition: 0.18s ease;
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
  background: var(--c-gray-50);
  color: var(--c-gray-800);
  line-height: 1.6;
  min-height: 100vh;
}

/* ── Topbar ─────────────────────────────── */
#topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 56px;
  background: #fff;
  border-bottom: 1px solid var(--c-gray-200);
  box-shadow: var(--shadow);
  position: sticky;
  top: 0;
  z-index: 100;
}
.topbar-left { display: flex; align-items: center; gap: 10px; }
.topbar-left .logo { font-size: 24px; }
.topbar-left h1 { font-size: 18px; font-weight: 700; color: var(--c-gray-900); }
.topbar-right { display: flex; align-items: center; gap: 8px; }

.user-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 20px;
  background: var(--c-primary-light); color: var(--c-primary-dark);
  font-size: 14px; font-weight: 600; cursor: default;
}
.user-chip .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--c-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.btn-logout { padding: 6px 12px; border: 1px solid var(--c-gray-200); border-radius: var(--radius-sm); background: #fff; color: var(--c-gray-600); font-size: 13px; cursor: pointer; transition: var(--transition); }
.btn-logout:hover { background: var(--c-danger-bg); color: var(--c-danger); border-color: var(--c-danger); }

/* ── Login ───────────────────────────────── */
.login-screen {
  display: flex; align-items: center; justify-content: center;
  min-height: calc(100vh - 56px); padding: 40px 20px;
}
.login-card {
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 48px 40px; text-align: center; max-width: 440px; width: 100%;
}
.login-icon { font-size: 56px; margin-bottom: 16px; }
.login-card h2 { font-size: 22px; margin-bottom: 8px; color: var(--c-gray-900); }
.login-card p { color: var(--c-gray-500); margin-bottom: 28px; }
.login-form { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.login-hint { display: block; margin-top: 16px; color: var(--c-gray-500); }
.user-list { display: flex; flex-direction: column; gap: 10px; }
.user-list button {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px; width: 100%;
  border: 2px solid var(--c-gray-200); border-radius: var(--radius);
  background: #fff; font-size: 16px; cursor: pointer;
  transition: var(--transition);
}
.user-list button:hover { border-color: var(--c-primary); background: var(--c-primary-light); }
.user-list button .av { width: 36px; height: 36px; border-radius: 50%; background: var(--c-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.user-list button .tag { margin-left: auto; font-size: 11px; padding: 3px 8px; border-radius: 10px; background: var(--c-warning-bg); color: var(--c-warning); font-weight: 600; }

/* ── Main Layout ─────────────────────────── */
#mainView { display: flex; min-height: calc(100vh - 56px); }
#sidebar {
  width: 240px; min-width: 240px;
  background: #fff; border-right: 1px solid var(--c-gray-200);
  padding: 16px; display: flex; flex-direction: column; gap: 16px;
  position: sticky; top: 56px; height: calc(100vh - 56px); overflow-y: auto;
}
#content { flex: 1; padding: 20px 24px; overflow-y: auto; }

/* ── Sidebar ─────────────────────────────── */
.sidebar-section { display: flex; flex-direction: column; gap: 8px; }
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  text-decoration: none; color: var(--c-gray-600);
  font-size: 14px; font-weight: 500; cursor: pointer;
  transition: var(--transition);
}
.nav-item:hover { background: var(--c-gray-100); color: var(--c-gray-900); }
.nav-item.active { background: var(--c-primary-light); color: var(--c-primary-dark); font-weight: 600; }
.nav-icon { font-size: 16px; width: 20px; text-align: center; }
.badge-count {
  margin-left: auto; padding: 2px 8px; border-radius: 10px;
  background: var(--c-danger); color: #fff; font-size: 11px; font-weight: 700; min-width: 20px; text-align: center;
}

.filter-group { display: flex; flex-direction: column; gap: 4px; }
.filter-group label { font-size: 12px; font-weight: 600; color: var(--c-gray-400); text-transform: uppercase; letter-spacing: 0.5px; }

.project-tag { color: var(--c-primary-dark); font-weight: 600; }
.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; }
.admin-grid section { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--c-gray-50); border-radius: var(--radius); }
.admin-grid h3 { font-size: 15px; }
.member-checks { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 8px 0; }
.member-check { font-size: 13px; cursor: pointer; }
.project-admin-card { border-top: 1px solid var(--c-gray-200); padding: 16px 0; }
.project-admin-card p { color: var(--c-gray-500); font-size: 13px; }
.management-form { display: flex; flex-direction: column; gap: 10px; padding: 16px; margin-bottom: 24px; background: var(--c-gray-50); border-radius: var(--radius); }
.section-title { margin: 18px 0 10px; }
.management-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 4px; border-bottom: 1px solid var(--c-gray-200); }
.management-row small { display: block; margin-top: 4px; color: var(--c-gray-500); }
.project-admin-card { display: flex; flex-direction: column; gap: 10px; }
.row-actions { display: flex; gap: 8px; }
.admin-home { text-align: center; padding: 100px 20px; color: var(--c-gray-500); }
#fixerPickerHost .person-picker { width: 100%; }

/* List-style administration */
#sidebar .admin-only, #btnProjects { align-items:center; justify-content:flex-start; box-sizing:border-box; background:transparent; color:var(--c-gray-600); border:0; padding:11px 12px; font-weight:600; text-align:left; width:100%; }
#sidebar .admin-only:hover, #btnProjects:hover { background: var(--c-gray-100); color: var(--c-gray-900); }
#sidebar .admin-only.active, #btnProjects.active { background:transparent; color:var(--c-primary); }
.admin-page { max-width: 1180px; margin: 0 auto; }
.page-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:20px; }
.page-heading h2 { font-size:22px; margin-bottom:5px; }
.page-heading p { color:var(--c-gray-500); font-size:13px; }
.list-toolbar { display:flex; justify-content:flex-end; gap:8px; margin-bottom:14px; }
.list-toolbar .input { max-width:320px; }
.data-table { background:#fff; border:1px solid var(--c-gray-200); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.table-row { display:grid; grid-template-columns:1.1fr 1.5fr 180px; align-items:center; gap:18px; min-height:58px; padding:10px 18px; border-bottom:1px solid var(--c-gray-200); font-size:14px; }
.table-row:last-child { border-bottom:0; }
.table-head { min-height:44px; background:var(--c-gray-50); color:var(--c-gray-500); font-size:12px; font-weight:700; }
.project-table .table-row { grid-template-columns:1.35fr 1.4fr 1fr 180px; }
.project-table .table-row > span { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.table-row small { display:block; color:var(--c-gray-500); margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.person-name { font-weight:600; }
.list-pager { display:flex; align-items:center; justify-content:space-between; margin-top:14px; color:var(--c-gray-500); font-size:13px; }
.list-pager div { display:flex; gap:8px; }
.inline-editor { padding:18px; margin-bottom:18px; background:#fff; border:1px solid var(--c-gray-200); border-radius:var(--radius); box-shadow:var(--shadow); }
.inline-editor h3 { margin-bottom:14px; }
.form-line { display:grid; grid-template-columns:1fr 1.2fr auto auto; gap:10px; }
.picker-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:8px 0 18px; }
.picker-grid>div>label { display:block; margin-bottom:6px; font-weight:600; font-size:14px; }
.editor-actions { display:flex; justify-content:flex-end; gap:10px; }
.person-picker { position:relative; }
.picker-trigger { width:100%; height:40px; display:flex; align-items:center; justify-content:space-between; padding:0 12px; border:1px solid var(--c-gray-300); border-radius:var(--radius-sm); background:#fff; color:var(--c-gray-700); cursor:pointer; }
.picker-panel { display:none; position:absolute; z-index:50; left:0; right:0; top:44px; padding:10px; background:#fff; border:1px solid var(--c-gray-200); border-radius:var(--radius-sm); box-shadow:var(--shadow-lg); }
.person-picker.open .picker-panel { display:block; }
.picker-options { min-height:210px; padding-top:8px; }
.picker-option { display:flex; align-items:center; gap:9px; padding:8px; border-radius:5px; cursor:pointer; }
.picker-option:hover { background:var(--c-primary-light); }
.picker-empty { padding:50px 10px; text-align:center; color:var(--c-gray-400); }
.picker-footer { display:flex; align-items:center; justify-content:space-between; padding-top:8px; border-top:1px solid var(--c-gray-200); font-size:12px; color:var(--c-gray-500); }

/* ── Buttons ─────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 16px; border: 1px solid transparent; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 600; cursor: pointer; transition: var(--transition);
  white-space: nowrap; font-family: inherit;
}
.btn-primary { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.btn-primary:hover { background: var(--c-primary-dark); }
.btn-secondary { background: #fff; color: var(--c-gray-700); border-color: var(--c-gray-300); }
.btn-secondary:hover { background: var(--c-gray-50); }
.btn-success { background: var(--c-success); color: #fff; }
.btn-success:hover { opacity: 0.9; }
.btn-danger { background: var(--c-danger); color: #fff; }
.btn-danger:hover { opacity: 0.9; }
.btn-warning { background: var(--c-warning); color: #fff; }
.btn-warning:hover { opacity: 0.9; }
.btn-outline { background: #fff; color: var(--c-gray-600); border-color: var(--c-gray-300); }
.btn-outline:hover { border-color: var(--c-gray-400); background: var(--c-gray-50); }
.btn-sm { padding: 5px 10px; font-size: 12px; border-radius: 4px; }
.btn-full { width: 100%; }
.btn-icon {
  width: 32px; height: 32px; border: none; border-radius: 50%;
  background: transparent; font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition); color: var(--c-gray-400);
}
.btn-icon:hover { background: var(--c-gray-100); color: var(--c-gray-700); }

/* ── Form ────────────────────────────────── */
.input, .select, .textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--c-gray-300);
  border-radius: var(--radius-sm); font-size: 14px; font-family: inherit;
  transition: var(--transition); background: #fff; color: var(--c-gray-800);
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-light);
}
.textarea { resize: vertical; min-height: 80px; }
.select { cursor: pointer; }
.required { color: var(--c-danger); }

/* ── Screenshot upload ───────────────────── */
.screenshot-area {
  border: 2px dashed var(--c-gray-300); border-radius: var(--radius);
  padding: 24px; text-align: center; cursor: pointer;
  transition: var(--transition); position: relative; outline: none;
}
.screenshot-area:hover, .screenshot-area:focus { border-color: var(--c-primary); background: var(--c-primary-light); }
.screenshot-placeholder { color: var(--c-gray-400); font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.placeholder-icon { font-size: 36px; }
.screenshot-placeholder kbd {
  padding: 2px 6px; border: 1px solid var(--c-gray-300); border-radius: 3px;
  background: var(--c-gray-100); font-size: 11px; font-family: inherit;
}
.screenshot-preview { max-width: 100%; max-height: 300px; border-radius: var(--radius-sm); }
#btnRemoveScreenshot { position: absolute; top: 8px; right: 8px; }

/* ── Fixer list ──────────────────────────── */
.fixer-list { display: flex; flex-wrap: wrap; gap: 8px; }
.fixer-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 14px; border: 2px solid var(--c-gray-200); border-radius: 20px;
  font-size: 13px; font-weight: 500; cursor: pointer; transition: var(--transition);
  user-select: none;
}
.fixer-chip:hover { border-color: var(--c-primary); }
.fixer-chip.selected { background: var(--c-primary-light); border-color: var(--c-primary); color: var(--c-primary-dark); }
.fixer-chip .fc-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--c-gray-300); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}
.fixer-chip.selected .fc-avatar { background: var(--c-primary); }
.fixer-chip .default-tag { font-size: 10px; color: var(--c-warning); font-weight: 600; }

/* ── Defect cards ────────────────────────── */
.defect-table-wrap {
  background: #fff; border: 1px solid var(--c-gray-200); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow-x: auto;
}
.defect-table { width: 100%; min-width: 920px; border-collapse: collapse; table-layout: fixed; }
.defect-table th {
  height: 42px; padding: 0 12px; background: var(--c-gray-50); border-bottom: 1px solid var(--c-gray-200);
  color: var(--c-gray-600); font-size: 13px; font-weight: 600; text-align: left; white-space: nowrap;
}
.defect-table td {
  height: 48px; padding: 0 12px; border-bottom: 1px solid var(--c-gray-100);
  color: var(--c-gray-700); font-size: 13px; vertical-align: middle;
}
.defect-table tbody tr:last-child td { border-bottom: none; }
.defect-row { cursor: pointer; transition: var(--transition); }
.defect-table tbody tr:nth-child(odd) { background: #fff; }
.defect-table tbody tr:nth-child(even) { background: #edf2f7; }
.defect-table tbody tr.defect-row:hover { background: #dbeafe; }
.defect-table .col-time { width: 158px; }
.defect-time { color: var(--c-gray-500); white-space: nowrap; }
.defect-title-cell, .fixer-cell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.defect-title-cell { color: var(--c-gray-900); font-weight: 600; }
.image-mark { margin-left: 6px; font-size: 12px; }
.defect-list { display: flex; flex-direction: column; gap: 12px; }
.defect-card {
  background: #fff; border: 1px solid var(--c-gray-200); border-radius: var(--radius);
  padding: 18px 20px; cursor: pointer; transition: var(--transition);
  box-shadow: var(--shadow);
}
.defect-card:hover { border-color: var(--c-primary); box-shadow: var(--shadow-md); }
.card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.card-title { font-size: 16px; font-weight: 600; color: var(--c-gray-900); flex: 1; word-break: break-word; }
.card-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--c-gray-500); margin-bottom: 8px; }
.card-meta span { display: flex; align-items: center; gap: 4px; }
.card-desc { font-size: 14px; color: var(--c-gray-600); margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-fixers { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fixer-tag {
  padding: 2px 10px; border-radius: 12px; background: var(--c-primary-light);
  color: var(--c-primary-dark); font-size: 12px; font-weight: 500;
}
.card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }

/* ── Status badges ───────────────────────── */
.status-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 700;
  white-space: nowrap; flex-shrink: 0;
}
.status-open { background: #DBEAFE; color: #1E40AF; }
.status-fixed { background: #CFFAFE; color: #155E75; }
.status-closed { background: #D1FAE5; color: #065F46; }
.status-voided { background: #F3F4F6; color: #6B7280; }
.status-rejected { background: #FEE2E2; color: #991B1B; }
.status-delayed { background: #FEF3C7; color: #92400E; }

/* ── Empty state ─────────────────────────── */
.empty-state {
  text-align: center; padding: 60px 20px; color: var(--c-gray-400);
}
.empty-state .empty-icon { font-size: 48px; margin-bottom: 12px; }
.empty-state p { font-size: 15px; }

/* ── Modal ───────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.45); display: flex;
  align-items: center; justify-content: center;
  padding: 20px; animation: fadeIn .15s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg);
  width: 100%; max-height: 85vh; display: flex; flex-direction: column;
  animation: slideUp .2s ease;
}
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal-md { max-width: 480px; }
.modal-lg { max-width: 720px; }
.confirm-overlay { z-index: 1100; }
.modal-confirm { max-width: 400px; }
.confirm-body { padding: 30px 28px 20px; text-align: center; font-size: 16px; color: var(--c-gray-800); }
.confirm-footer { justify-content: center; padding-top: 4px; }
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px; border-bottom: 1px solid var(--c-gray-200);
}
.modal-header h2 { font-size: 18px; font-weight: 700; color: var(--c-gray-900); }
.modal-body { padding: 24px; overflow-y: auto; flex: 1; }
.modal-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 16px 24px; border-top: 1px solid var(--c-gray-200);
}
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 14px; color: var(--c-gray-700); }

/* ── Detail view ─────────────────────────── */
.detail-section { margin-bottom: 20px; }
.detail-section h3 { font-size: 13px; font-weight: 700; color: var(--c-gray-400); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.detail-meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: 14px; color: var(--c-gray-600); }
.detail-desc { font-size: 15px; color: var(--c-gray-700); line-height: 1.7; white-space: pre-wrap; }
.detail-screenshot { max-width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--c-gray-200); cursor: pointer; }
.detail-fixers { display: flex; flex-wrap: wrap; gap: 6px; }

/* ── History timeline ────────────────────── */
.timeline { display: flex; flex-direction: column; gap: 0; }
.timeline-item {
  display: flex; gap: 14px; padding: 12px 0; position: relative;
}
.timeline-item::before {
  content: ''; position: absolute; left: 13px; top: 38px; bottom: 0;
  width: 2px; background: var(--c-gray-200);
}
.timeline-item:last-child::before { display: none; }
.timeline-dot {
  width: 28px; height: 28px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: 12px;
  flex-shrink: 0; z-index: 1;
}
.tl-created { background: #DBEAFE; color: #1E40AF; }
.tl-modified { background: #F3F4F6; color: #6B7280; }
.tl-fixed { background: #CFFAFE; color: #155E75; }
.tl-closed { background: #D1FAE5; color: #065F46; }
.tl-voided { background: #F3F4F6; color: #9CA3AF; }
.tl-rejected { background: #FEE2E2; color: #991B1B; }
.tl-delayed { background: #FEF3C7; color: #92400E; }
.tl-reopened, .tl-resumed { background: #F5F3FF; color: #6D28D9; }
.timeline-content { flex: 1; }
.timeline-action { font-size: 14px; font-weight: 600; color: var(--c-gray-800); }
.timeline-desc { font-size: 13px; color: var(--c-gray-500); margin-top: 2px; }
.timeline-time { font-size: 12px; color: var(--c-gray-400); margin-top: 2px; }

/* ── Pagination ──────────────────────────── */
.pagination {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; min-height: 60px; padding: 10px 0 4px;
}
.defect-filterbar { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; margin-bottom:18px; padding:16px; background:#fff; border:1px solid var(--c-gray-200); border-radius:var(--radius); }
.defect-filterbar label { display:flex; flex-direction:column; gap:6px; min-width:180px; font-size:13px; font-weight:600; color:var(--c-gray-600); }
.pagination button {
  padding: 7px 14px; border: 1px solid var(--c-gray-300); border-radius: var(--radius-sm);
  background: #fff; font-size: 13px; cursor: pointer; transition: var(--transition); color: var(--c-gray-600);
}
.pagination button:hover:not(:disabled) { background: var(--c-primary-light); color: var(--c-primary); border-color: var(--c-primary); }
.pagination button.active { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.pagination button:disabled { opacity: 0.4; cursor: not-allowed; }
.pagination .page-info { font-size: 13px; color: var(--c-gray-500); padding: 0 8px; }

/* ── Toast ───────────────────────────────── */
.toast-container { position: fixed; top: 68px; right: 20px; z-index: 300; display: flex; flex-direction: column; gap: 8px; }
.toast {
  padding: 12px 20px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500;
  box-shadow: var(--shadow-md); animation: slideIn .25s ease;
  max-width: 360px;
}
.toast-success { background: var(--c-success); color: #fff; }
.toast-error { background: var(--c-danger); color: #fff; }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ── Responsive ──────────────────────────── */
@media (max-width: 768px) {
  .admin-grid { grid-template-columns: 1fr; }
  #sidebar { width: 100%; min-width: unset; height: auto; position: static; border-right: none; border-bottom: 1px solid var(--c-gray-200); flex-direction: row; flex-wrap: wrap; gap: 8px; padding: 12px; }
  #mainView { flex-direction: column; }
  #content { padding: 16px; }
  .modal-lg, .modal-md { max-width: 100%; margin: 0 8px; }
  .defect-table { min-width: 820px; }
  .pagination { justify-content: flex-start; overflow-x: auto; }
  .card-header { flex-direction: column; }
  .table-row, .project-table .table-row { grid-template-columns:1fr; gap:6px; padding:14px; }
  .table-head { display:none; }
  .form-line, .picker-grid { grid-template-columns:1fr; }
  .page-heading { align-items:flex-start; }
}