/* ================================================================
   UI_SPEC v1.0 — 规范附加层
   来源：/root/case-manager/UI_SPEC.md（2026-04-17）
   说明：以下类名均为新增，不覆盖 .card / .filter-bar / .kpi-card / .modal-* 等已有类
         Phase 2 页面迁移时再就地重写已有类为新规范
   ================================================================ */

:root {
  --color-primary: #0d6560;
  --color-primary-hover: #094a46;
  --color-primary-light: #d1faf5;

  --color-danger: #dc2626;
  --color-danger-hover: #b91c1c;
  --color-danger-bg: #fee2e2;

  --color-warn: #d97706;
  --color-warn-bg: #fef3c7;

  --color-info: #0284c7;
  --color-success: #059669;
  --color-success-bg: #d1fae5;

  --color-bg: #f8fafc;
  --color-surface: #ffffff;
  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;
  --color-text: #0f172a;
  --color-text-2: #475569;
  --color-text-3: #94a3b8;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-pill: 999px;
  --tap-min: 44px;

  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, .08);
}

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  padding: 10px 20px;
  min-height: var(--tap-min);
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  border: 1px solid transparent;
  user-select: none;
  white-space: nowrap;
  font-family: inherit;
}
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-hover); }

.btn-secondary {
  background: #fff; color: var(--color-text);
  border-color: var(--color-border-strong);
}
.btn-secondary:hover { background: #f1f5f9; border-color: var(--color-text-3); }

.btn-tertiary {
  background: transparent; color: var(--color-text-2);
  border: none; padding: 8px 12px;
}
.btn-tertiary:hover { background: #f1f5f9; color: var(--color-text); }

.btn-danger { background: var(--color-danger); color: #fff; }
.btn-danger:hover { background: var(--color-danger-hover); }

.btn-ghost-danger {
  background: transparent; color: var(--color-danger);
  border: 1px solid var(--color-danger);
}
.btn-ghost-danger:hover { background: var(--color-danger-bg); }

.btn-sm { padding: 6px 12px; min-height: 36px; font-size: var(--fs-sm); }

.btn-icon {
  width: var(--tap-min); height: var(--tap-min);
  padding: 0; min-height: var(--tap-min);
  border-radius: var(--radius-sm);
  background: transparent; border: none;
  color: var(--color-text-2);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.btn-icon:hover { background: #f1f5f9; color: var(--color-text); }
.btn-icon.danger:hover { background: var(--color-danger-bg); color: var(--color-danger); }
.btn-icon svg { width: 20px; height: 20px; }

.btn[disabled], .btn[disabled]:hover { opacity: .5; cursor: not-allowed; }

.menu-btn {
  width: var(--tap-min); height: var(--tap-min);
  background: transparent; border: none; color: var(--color-text-2);
  cursor: pointer; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; letter-spacing: 2px;
  font-family: inherit;
}
.menu-btn:hover { background: #f1f5f9; }

/* --- Badges --- */
.badge {
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: 4px;
  font-size: var(--fs-xs); font-weight: 500;
  height: 24px; line-height: 1;
}
.badge-success { background: var(--color-success-bg); color: var(--color-success); }
.badge-warn    { background: var(--color-warn-bg);    color: var(--color-warn); }
.badge-danger  { background: var(--color-danger-bg);  color: var(--color-danger); }
.badge-muted   { background: #f1f5f9; color: #64748b; }

/* --- Chips --- */
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center;
  padding: 6px 14px;
  background: #fff; color: var(--color-text-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm); height: 32px; line-height: 1;
  cursor: pointer; user-select: none;
  transition: all .15s;
  white-space: nowrap;
}
.chip:hover { border-color: var(--color-text-3); }
.chip.active {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
  font-weight: 500;
}

/* --- Topbar --- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  gap: var(--sp-3);
}
.topbar-left { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.topbar-title {
  font-size: var(--fs-lg); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-actions {
  display: flex; align-items: center; gap: var(--sp-3);
  flex-wrap: nowrap; justify-content: flex-end;
}
.icon-btn-box {
  width: var(--tap-min); height: var(--tap-min);
  border-radius: var(--radius-sm); background: #f1f5f9;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-text-2); cursor: pointer;
}
.icon-btn-box svg { width: 22px; height: 22px; }

/* --- List Card --- */
.list-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 6px;
}
.list-card + .list-card { margin-top: var(--sp-3); }
.list-card-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--sp-3);
}
.list-card-title {
  font-weight: 600; font-size: var(--fs-md); color: var(--color-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0; flex: 1;
}
.list-card-meta {
  font-size: var(--fs-sm); color: var(--color-text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.list-card-actions {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: var(--sp-2); padding-top: var(--sp-2);
  border-top: 1px solid var(--color-border);
}
.list-card-actions-left { display: flex; gap: var(--sp-2); }
.list-card-actions-right { display: flex; gap: var(--sp-2); }

/* --- Filter Bar v1 (namespace .filter-v1 to avoid breaking existing .filter-bar) --- */
.filter-v1 {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  overflow: hidden;
}
.filter-v1-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.filter-v1-row + .filter-v1-row { margin-top: var(--sp-2); }
.filter-v1-row-chip { flex-wrap: nowrap; align-items: center; }
.filter-v1-select {
  flex: 1 1 140px; min-width: 0;
  height: var(--tap-min);
  padding: 0 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  font-size: var(--fs-base);
  color: var(--color-text);
}
.filter-v1-search { position: relative; flex: 2 1 240px; min-width: 0; }
.filter-v1-search input {
  width: 100%; height: var(--tap-min);
  padding: 0 12px 0 40px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
}
.filter-v1-search svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--color-text-3); width: 20px; height: 20px;
}
.filter-v1-chip-scroll {
  display: flex; gap: 6px;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  flex: 1 1 auto; min-width: 0;
  padding: 2px 0;
}
.filter-v1-chip-scroll::-webkit-scrollbar { display: none; }
.filter-v1-chip-scroll .chip { flex-shrink: 0; }
.filter-v1-toggle {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); color: var(--color-text-2);
  white-space: nowrap; flex-shrink: 0; padding: 0 var(--sp-2);
}

/* ================================================================
   UI_SPEC v1 END
   ================================================================ */
/* ========== Case Manager v1.0 ========== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f8fafc;--surface:#fff;--border:#e2e8f0;--text:#1e293b;--text2:#64748b;
  --primary:#0f766e;--primary-bg:#f0fdfa;--primary-border:#99f6e4;
  --danger:#dc2626;--danger-bg:#fef2f2;
  --warn:#f59e0b;--warn-bg:#fffbeb;
  --radius:8px;--shadow:0 1px 3px rgba(0,0,0,.08);
}
html{font-size:14px}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.5}
a{color:var(--primary);text-decoration:none}
button{cursor:pointer;font:inherit}
input,select,textarea{font:inherit;border:1px solid var(--border);border-radius:var(--radius);padding:8px 12px;width:100%;background:#fff}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px rgba(15,118,110,.15)}
textarea{min-height:80px;resize:vertical}

/* Layout */
.app-shell{display:flex;min-height:100vh}
.sidebar{width:220px;background:#0f172a;color:#e2e8f0;display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0;z-index:100;transition:transform .25s}
.brand{padding:16px 16px 12px;border-bottom:1px solid rgba(255,255,255,.08)}
.brand h1{font-size:15px;color:#fff;font-weight:600;white-space:nowrap}
.side-nav{flex:1;overflow-y:auto;padding:8px 0}
.side-link{display:flex;align-items:center;gap:8px;padding:9px 16px;color:#94a3b8;font-size:13px;transition:all .15s;border-left:3px solid transparent;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none}
.side-link:hover{color:#fff;background:rgba(255,255,255,.05)}
.side-link.active{color:#fff;background:rgba(15,118,110,.3);border-left-color:#14b8a6}
.sidebar-foot{padding:12px 16px;border-top:1px solid rgba(255,255,255,.08);font-size:12px;color:#94a3b8}
.sidebar-foot span{display:block;margin-bottom:4px;color:#e2e8f0}
.main-panel{flex:1;margin-left:220px;min-height:100vh;display:flex;flex-direction:column;min-width:0;overflow-x:hidden}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50;gap:12px}
.topbar h2{font-size:18px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.topbar-copy{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
.topbar-actions{display:flex;gap:8px;align-items:center;flex-shrink:0}
.content{padding:20px 24px;flex:1;min-width:0;overflow-x:hidden}

/* Buttons */
.solid-btn{background:var(--primary);color:#fff;border:none;padding:8px 16px;border-radius:var(--radius);font-size:13px;font-weight:500;transition:opacity .15s}
.solid-btn:hover{opacity:.9}
.solid-btn.danger{background:var(--danger)}
.ghost-btn{background:transparent;color:var(--primary);border:1px solid var(--border);padding:7px 14px;border-radius:var(--radius);font-size:13px;transition:all .15s;box-sizing:border-box;text-decoration:none;display:inline-flex;align-items:center;line-height:1.2}
.ghost-btn:hover{border-color:var(--primary);background:var(--primary-bg)}
.section-head .ghost-btn,.section-head .solid-btn{font-size:11px;padding:3px 10px;min-height:unset}
.mini-action{background:transparent;border:none;color:var(--primary);font-size:12px;padding:4px 8px;border-radius:4px;transition:background .15s}
.mini-action:hover{background:var(--primary-bg)}
.mini-action.danger{color:var(--danger)}
.mini-action.danger:hover{background:var(--danger-bg)}
.icon-btn{background:none;border:none;color:var(--text2);padding:6px;border-radius:var(--radius)}
.icon-btn:hover{color:var(--primary);background:var(--primary-bg)}
.compact-btn{padding:6px 12px;font-size:12px}

/* Breadcrumb & Project Header */
.breadcrumb{margin-bottom:16px}
.breadcrumb a{color:var(--primary);font-size:13px;text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.project-header{display:flex;align-items:center;gap:12px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.project-header h3{font-size:20px;font-weight:600}

/* Sidebar project context */
.back-link{color:#14b8a6!important;font-size:12px!important;border-left-color:transparent!important;margin-bottom:4px}
.back-link:hover{color:#fff!important;background:rgba(20,184,166,.15)!important}
.side-project-label{padding:6px 16px 12px;font-size:13px;color:#fff;font-weight:600;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Navigation Cards (project detail page) */
.nav-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin:20px 0}
.nav-card{display:flex;align-items:center;gap:14px;padding:16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);text-decoration:none;color:var(--text);box-shadow:var(--shadow);transition:all .2s}
.nav-card:hover{border-color:var(--primary);box-shadow:0 4px 12px rgba(15,118,110,.1);transform:translateY(-1px)}
.nav-card-icon{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.nav-card h4{font-size:14px;font-weight:600;margin-bottom:2px;white-space:nowrap}
.nav-card p{font-size:11px;color:var(--text2);margin:0;white-space:nowrap}
.nav-card>div{min-width:0;overflow:hidden}
.nav-arrow{margin-left:auto;font-size:20px;color:#cbd5e1;font-weight:300}

/* Section head with action button */
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.section-head h3{font-size:16px;font-weight:600}

/* KPI Cards */
.kpi-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-bottom:20px}
.kpi-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow);overflow:hidden}
.kpi-card .eyebrow{font-size:11px;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.kpi-card .kpi-value,.kpi-card h3{font-size:20px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kpi-card .kpi-sub{font-size:12px;color:var(--text2);margin-top:2px}
.kpi-card.warn{border-left:3px solid var(--warn)}
.kpi-card.danger{border-left:3px solid var(--danger)}
.kpi-link{cursor:pointer;transition:all .15s}
.kpi-link:hover{border-color:var(--primary);box-shadow:0 4px 12px rgba(15,118,110,.1)}
.kpi-warn{border-left:3px solid var(--warn)}
.kpi-alert{border-left:3px solid #f59e0b}

/* Tables */
.table-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.table-scroller{overflow-x:auto;max-width:100%}
.data-table,.viz-table{width:100%;border-collapse:collapse;table-layout:auto}
.data-table th,.viz-table th{background:#f1f5f9;padding:10px 12px;text-align:left;font-size:12px;font-weight:600;color:var(--text2);border-bottom:1px solid var(--border);white-space:nowrap}
.data-table td,.viz-table td{padding:10px 12px;border-bottom:1px solid #f1f5f9;font-size:13px;vertical-align:top;max-width:260px;overflow:hidden;text-overflow:ellipsis}
.data-table tr:hover td,.viz-table tr:hover td{background:#f8fafc}
.data-table .amount{text-align:right;font-variant-numeric:tabular-nums}

/* Badges */
.badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:500;white-space:nowrap}
.badge-teal{background:#ccfbf1;color:#0f766e}
.badge-blue{background:#dbeafe;color:#1d4ed8}
.badge-yellow{background:#fef3c7;color:#92400e}
.badge-orange{background:#ffedd5;color:#c2410c}
.badge-red{background:#fee2e2;color:#dc2626}
.badge-gray{background:#f1f5f9;color:#475569}
.badge-green{background:#dcfce7;color:#166534}
.badge-purple{background:#f3e8ff;color:#7e22ce}
.badge-info{background:#dbeafe;color:#1d4ed8}
.badge-active{background:#dcfce7;color:#166534}
.badge-muted{background:#f1f5f9;color:#475569}
.badge-warn{background:#fef3c7;color:#92400e}
.link-text{color:var(--primary);cursor:pointer}
.link-text:hover{text-decoration:underline}
.row-danger{background:#fef2f2!important}
.text-success{color:#16a34a}
.text-danger{color:var(--danger)}

/* Cards */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.card-header h3{font-size:15px;font-weight:600}
.card-section{margin-bottom:16px}
.card-section h4{font-size:13px;font-weight:600;color:var(--text2);margin-bottom:8px}

/* Detail Grid */
.detail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.detail-item{padding:8px 0}
.detail-item label{font-size:11px;color:var(--text2);display:block;margin-bottom:2px}
.detail-item .value{font-size:14px;color:var(--text)}
.detail-empty{padding:40px 20px;text-align:center;color:var(--text2);font-size:13px}
.detail-section{margin-top:16px;padding-top:12px;border-top:1px solid var(--border)}
.detail-section h4{font-size:14px;font-weight:600;margin-bottom:8px}
.detail-card{padding:4px 0;overflow:hidden}
.detail-card label{font-size:11px;color:var(--text2);display:block;margin-bottom:2px}
.detail-card p{font-size:14px;color:var(--text);margin:0;overflow:hidden;text-overflow:ellipsis;word-break:break-all}
.detail-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;padding-top:12px;border-top:1px solid var(--border)}

/* Forms */
.form-group{margin-bottom:14px}
.form-group label{display:block;font-size:12px;font-weight:500;color:var(--text2);margin-bottom:4px}
.form-group .hint{font-size:11px;color:var(--text2);margin-top:2px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.form-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}

/* Modal — JS uses: modal-card, modal-head, modal-foot, .open */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;visibility:hidden;transition:all .2s}
.modal-overlay.open,.modal-overlay.show{opacity:1;visibility:visible}
.modal-card,.modal-box{background:var(--surface);border-radius:12px;width:90%;max-width:640px;max-height:85vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.2)}
.modal-wide{max-width:900px;width:95%}
.modal-head,.modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border)}
.modal-head h3,.modal-header h3{font-size:16px;font-weight:600}
.modal-close{background:none;border:none;font-size:20px;color:var(--text2);padding:4px 8px;border-radius:var(--radius);width:auto}
.modal-close:hover{background:#f1f5f9}
.modal-body{padding:20px;overflow-y:auto;flex:1;min-width:0;word-break:break-word}
.modal-foot,.modal-footer{padding:12px 20px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end}

/* Tabs */
.tabs{display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:16px}
.tab,.ana-tab{padding:10px 18px;font-size:13px;font-weight:500;color:var(--text2);border:none;background:none;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .15s;cursor:pointer}
.tab:hover,.ana-tab:hover{color:var(--text)}
.tab.active,.ana-tab.active{color:var(--primary);border-bottom-color:var(--primary)}
.tab-panel,.ana-panel{display:none}
.tab-panel.active,.ana-panel.active{display:block}
.ana-tabs{display:flex;gap:0;border-bottom:2px solid var(--border);padding:0 24px;background:var(--surface)}

/* Filter Bar */
.filter-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px;padding:12px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.filter-bar input,.filter-bar select{width:auto;min-width:140px;padding:6px 10px;font-size:13px}
.filter-bar .search-input{min-width:200px}
.filter-select,.filter-input{padding:6px 10px;font-size:13px}

/* Toast — JS uses: toast-success/error/warning + .show */
.toast{position:fixed;top:20px;right:20px;z-index:2000;padding:12px 20px;border-radius:var(--radius);color:#fff;font-size:13px;box-shadow:0 4px 12px rgba(0,0,0,.15);opacity:0;transform:translateY(-10px);transition:all .3s ease;pointer-events:none}
.toast.show{opacity:1;transform:translateY(0);pointer-events:auto}
.toast-success{background:#059669}
.toast-error{background:#dc2626}
.toast-warning{background:#d97706}

/* Empty State */
.empty-state{padding:60px 20px;text-align:center}
.empty-state h3{font-size:16px;color:var(--text);margin-bottom:8px}
.empty-state p{color:var(--text2);font-size:13px;margin-bottom:16px}

/* Timeline */
.timeline{position:relative;padding-left:24px}
.timeline::before{content:'';position:absolute;left:8px;top:4px;bottom:4px;width:2px;background:var(--border)}
.timeline-item{position:relative;padding-bottom:16px}
.timeline-item::before{content:'';position:absolute;left:-20px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--primary);border:2px solid var(--surface)}
.timeline-item .time{font-size:11px;color:var(--text2)}
.timeline-item .event{font-size:13px;margin-top:2px}

/* Notification Bell */
.notif-bell{position:relative;font-size:18px;padding:6px}
.notif-badge{position:absolute;top:0;right:0;background:var(--danger);color:#fff;font-size:10px;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:600}

/* Sub-record list */
.sub-list{margin-top:12px}
.sub-item{display:flex;justify-content:space-between;align-items:flex-start;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius);margin-bottom:8px;background:var(--surface);transition:border-color .15s}
.sub-item:hover{border-color:var(--primary)}
.sub-item .sub-main{flex:1}
.sub-item .sub-title{font-weight:500;font-size:13px}
.sub-item .sub-meta{font-size:12px;color:var(--text2);margin-top:2px}
.sub-item .sub-actions{display:flex;gap:4px;flex-shrink:0;margin-left:8px}

/* Project cards */
.project-grid,.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.project-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);cursor:pointer;transition:all .15s;overflow:hidden}
.project-card:hover{border-color:var(--primary);box-shadow:0 4px 12px rgba(15,118,110,.1)}
.project-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:6px}
.project-card-head h3{font-size:15px;font-weight:600;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.project-card h3{font-size:15px;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.project-client{font-size:12px;color:var(--text2);margin-bottom:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.project-stats{display:flex;gap:16px;margin-top:10px;padding-top:10px;border-top:1px solid var(--border);flex-wrap:wrap;font-size:13px;color:var(--text2)}
.project-stats strong{color:var(--text);font-weight:600}
.project-card .client{font-size:12px;color:var(--text2)}
.project-card .stats{display:flex;gap:16px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border);flex-wrap:wrap}
.project-card .stat{text-align:center}
.project-card .stat .num{font-size:18px;font-weight:700;color:var(--primary)}
.project-card .stat .label{font-size:11px;color:var(--text2)}

/* Seizure alert strip */
.alert-strip{padding:10px 16px;border-radius:var(--radius);margin-bottom:12px;display:flex;align-items:center;gap:8px;font-size:13px}
.alert-strip.danger{background:var(--danger-bg);border:1px solid #fecaca;color:var(--danger)}
.alert-strip.warn{background:var(--warn-bg);border:1px solid #fde68a;color:#92400e}
.alert-bar{padding:10px 16px;border-radius:var(--radius);margin-bottom:8px;font-size:13px}
.alert-danger{background:var(--danger-bg);border:1px solid #fecaca;color:var(--danger)}
.alert-warn{background:var(--warn-bg);border:1px solid #fde68a;color:#92400e}
.alert-info{background:#eff6ff;border:1px solid #bfdbfe;color:#1d4ed8}
.alert-item{padding:6px 16px;font-size:13px;color:var(--text)}
.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.section-head .eyebrow{font-size:11px;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}

/* Global Search */
.global-search-wrap{display:flex;align-items:center;gap:4px;margin-right:8px}
.global-search-input{width:220px;padding:6px 10px;border:1px solid var(--border);border-radius:var(--radius);font-size:13px;background:#fff}
.global-search-input:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 2px rgba(15,118,110,.12)}
.search-summary{padding:8px 0 12px;font-size:14px;color:var(--text2);border-bottom:1px solid var(--border);margin-bottom:12px}
.search-group{margin-bottom:16px}
.search-group h4{margin:0 0 8px;font-size:14px;color:var(--primary)}

/* Work Record Items */
.work-record-item{padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius);margin-bottom:8px;background:var(--surface)}
.work-record-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.work-record-content{font-size:13px;color:var(--text);line-height:1.6;max-height:120px;overflow-y:auto}
.work-record-strategy{font-size:12px;color:var(--text2);margin-top:6px;padding-top:6px;border-top:1px solid var(--border)}

/* Wide modal for detail views */
.modal-wide{max-width:900px;width:95%}

/* Graph */
.graph-container{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:16px;overflow:hidden}
.graph-legend-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:10px 0;font-size:12px}
.legend-title{font-weight:600;color:var(--text)}
.legend-item{display:flex;align-items:center;gap:4px;color:var(--text2)}
.legend-dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.legend-line{width:20px;height:2px;display:inline-block}
.legend-line.solid{background:var(--primary)}
.legend-line.dashed{background:repeating-linear-gradient(90deg,#94a3b8 0,#94a3b8 4px,transparent 4px,transparent 8px)}

/* Comments */
.comment-input-wrap{display:flex;gap:8px;align-items:flex-start;margin-bottom:12px}
.comment-input-wrap textarea{flex:1;border:1px solid var(--border);border-radius:var(--radius);padding:8px 10px;font-size:13px;resize:vertical}
.comment-list{max-height:300px;overflow-y:auto}
.comment-item{padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius);margin-bottom:6px;background:var(--surface)}
.comment-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.comment-time{font-size:11px;color:var(--text2)}
.comment-body{font-size:13px;line-height:1.5;margin:0}

/* Activity Timeline */
.activity-timeline{max-height:500px;overflow-y:auto}
.activity-item{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}
.activity-item:last-child{border-bottom:none}
.activity-icon{font-size:18px;flex-shrink:0;width:28px;text-align:center}
.activity-body{flex:1;min-width:0}
.activity-head{font-size:13px;margin-bottom:4px}
.activity-body p{font-size:13px;color:var(--text2);margin:0;overflow:hidden;text-overflow:ellipsis}

/* Responsive */
.mobile-nav{display:none}
.menu-toggle{display:none;background:none;border:none;font-size:24px;color:var(--text);padding:4px 8px}
.sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:99;opacity:0;transition:opacity .25s;pointer-events:none}
.sidebar-overlay.show{opacity:1;pointer-events:auto}
.mobile-dock{display:none;position:fixed;bottom:0;left:0;right:0;background:#0f172a;z-index:100;padding:6px 0;overflow-x:auto;white-space:nowrap}
.dock-link{display:inline-block;padding:8px 14px;color:#94a3b8;font-size:12px;text-align:center;text-decoration:none}
.dock-link.active{color:#14b8a6;font-weight:600}

@media(max-width:860px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .main-panel{margin-left:0}
  .menu-toggle{display:block}
  .kpi-row{grid-template-columns:repeat(2,1fr)}
  .detail-grid{grid-template-columns:repeat(2,1fr);gap:6px}
  .form-row,.form-row-3{grid-template-columns:1fr}
  .project-grid{grid-template-columns:1fr}
  .content{padding:16px}
  .topbar{padding:10px 16px}
  .filter-bar{flex-direction:column}
  .filter-bar input,.filter-bar select{width:100%}
  .data-table,.viz-table{font-size:12px}
  .data-table th,.data-table td,.viz-table th,.viz-table td{padding:8px 6px}
  .modal-card,.modal-box{width:95%;max-height:90vh}
  .mobile-dock{display:flex}
  .detail-actions{flex-direction:column}
  .detail-actions .ghost-btn{width:100%;text-align:center}
}

@media(max-width:480px){
  .kpi-row{grid-template-columns:repeat(2,1fr);gap:8px}
  .kpi-card{padding:8px 10px}
  .kpi-card .eyebrow{font-size:10px;margin-bottom:1px}
  .kpi-card h3,.kpi-card .kpi-value{font-size:15px}
  .topbar h2{font-size:15px}
}

/* 移动端适配 */
@media (max-width: 480px) {
  #ve-panel {
    width: 100vw;
    right: -100vw;
  }
  .ve-batch-actions {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════
   Visual Editor — FAB + Slide-out Panel
   ═══════════════════════════════════════════ */

/* 侧滑面板 */
#ve-panel {
  position: fixed;
  top: 0;
  right: -380px;
  width: 360px;
  height: 100vh;
  background: #fff;
  border-left: 1px solid var(--border, #e2e8f0);
  box-shadow: -4px 0 20px rgba(0,0,0,.12);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  transition: right .3s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}
#ve-panel.ve-open {
  right: 0;
}

#ve-panel.ve-minimized {
  right: 0;
  width: 68px;
}

#ve-panel.ve-minimized .ve-tabs,
#ve-panel.ve-minimized .ve-body {
  display: none !important;
}

/* 面板头部 */
.ve-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border, #e2e8f0);
  background: #f8fafc;
  flex-shrink: 0;
}
.ve-header-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text, #1e293b);
}
.ve-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ve-header-btn {
  border: 1px solid var(--border, #cbd5e1);
  background: #fff;
  color: var(--text, #1e293b);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.ve-header-btn:hover {
  background: #f1f5f9;
}
.ve-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text, #1e293b);
}
.ve-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--muted, #64748b);
  padding: 0 4px;
  line-height: 1;
}
.ve-close:hover { color: var(--text, #1e293b); }

#ve-panel.ve-minimized .ve-header {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 12px 8px;
  height: 100%;
}

#ve-panel.ve-minimized .ve-header-title {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: 2px;
}

#ve-panel.ve-minimized .ve-header-actions {
  flex-direction: column;
}

/* Tab栏 */
.ve-tabs {
  display: flex;
  border-bottom: 1px solid var(--border, #e2e8f0);
  flex-shrink: 0;
  background: #f8fafc;
}
.ve-tab {
  flex: 1;
  padding: 10px 0;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted, #64748b);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.ve-tab:hover { color: var(--text, #1e293b); }
.ve-tab-active {
  color: var(--teal, #0f766e);
  border-bottom-color: var(--teal, #0f766e);
}

/* 面板内容区 滚动 */
.ve-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

/* 样式组 */
.ve-group {
  margin-bottom: 20px;
}
.ve-group-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted, #64748b);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 10px;
}
.ve-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 8px;
}
.ve-row label {
  font-size: 13px;
  color: var(--text, #1e293b);
  white-space: nowrap;
  min-width: 70px;
}

/* 颜色选择器 */
.ve-color-input {
  width: 36px;
  height: 30px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px;
  padding: 2px;
  cursor: pointer;
  background: #fff;
}

/* 范围滑块 */
.ve-range-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.ve-range-input {
  flex: 1;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: #e2e8f0;
  border-radius: 3px;
  outline: none;
}
.ve-range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--teal, #0f766e);
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.ve-range-val {
  font-size: 12px;
  color: var(--muted, #64748b);
  min-width: 36px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ve-pick-btn {
  width: 100%;
  margin-bottom: 12px;
}

.ve-canvas-btn {
  width: 100%;
  margin-bottom: 12px;
}

.ve-field-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.ve-field-block > span {
  font-size: 12px;
  font-weight: 600;
  color: var(--text, #1e293b);
}

.ve-input {
  width: 100%;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  background: #fff;
  color: var(--text, #1e293b);
  font-size: 13px;
  padding: 9px 10px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

.ve-input:focus {
  border-color: var(--teal, #0f766e);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}

.ve-input:disabled {
  background: #f8fafc;
  color: var(--muted, #64748b);
  cursor: not-allowed;
}

.ve-textarea {
  min-height: 82px;
  resize: vertical;
  font-family: inherit;
}

.ve-selected-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px dashed var(--border, #cbd5e1);
  border-radius: 8px;
}

.ve-selected-meta strong {
  font-size: 13px;
  color: var(--text, #1e293b);
}

.ve-selected-meta span {
  font-size: 11px;
  color: var(--muted, #64748b);
  line-height: 1.45;
  word-break: break-all;
}

.ve-batch-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0 0 10px;
}

.ve-mini-btn {
  border: 1px solid var(--border, #cbd5e1);
  background: #fff;
  color: var(--text, #1e293b);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.ve-mini-btn:hover {
  background: #f8fafc;
  border-color: var(--teal, #0f766e);
}

.ve-clipboard-state {
  font-size: 11px;
  color: var(--muted, #64748b);
  background: #f8fafc;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 10px;
}

.ve-tree {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 280px;
  overflow: auto;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  background: #fff;
  padding: 8px;
}

.ve-tree-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 8px 8px calc(8px + var(--ve-indent, 0px));
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s, box-shadow .15s;
}

.ve-tree-row:hover {
  background: #f8fafc;
}

.ve-tree-row.is-active {
  background: #eef2ff;
  box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.3);
}

.ve-tree-row.is-checked {
  background: #ecfeff;
}

.ve-tree-check {
  margin-top: 3px;
  flex-shrink: 0;
}

.ve-tree-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ve-tree-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text, #1e293b);
  line-height: 1.35;
}

.ve-tree-key {
  font-size: 10px;
  color: var(--muted, #64748b);
  line-height: 1.35;
  word-break: break-all;
}

/* 布局列表 */
.ve-layout-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ve-layout-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  cursor: grab;
  transition: background .15s, box-shadow .15s;
  user-select: none;
}
.ve-layout-item:hover {
  background: #f0fdfa;
  border-color: var(--teal, #0f766e);
}
.ve-layout-item.ve-dragging {
  opacity: .4;
  box-shadow: 0 2px 12px rgba(0,0,0,.15);
}
.ve-drag-handle {
  font-size: 16px;
  color: var(--muted, #64748b);
  cursor: grab;
  line-height: 1;
}
.ve-layout-label {
  flex: 1;
  font-size: 13px;
  color: var(--text, #1e293b);
  font-weight: 500;
}

/* 尺寸标签 */
.ve-size-badge {
  font-size: 11px;
  color: var(--muted, #64748b);
  background: #f1f5f9;
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: auto;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ve-hint {
  font-size: 12px;
  color: var(--muted, #64748b);
  margin: 0 0 12px;
  line-height: 1.5;
}

/* ── 画布编辑模式 ── */
.ve-canvas-mode > *:not(.topbar) {
  position: relative;
}
.ve-editable {
  outline: 2px dashed #94a3b8;
  outline-offset: -2px;
  transition: outline-color .15s;
  position: relative !important;
}
.ve-editable:hover {
  outline-color: var(--teal, #0f766e);
}

body.ve-pick-mode,
body.ve-pick-mode [data-ve-node] {
  cursor: crosshair !important;
}

.ve-node-hover {
  outline: 2px solid rgba(20, 184, 166, 0.86) !important;
  outline-offset: 3px;
}

.ve-node-selected {
  outline: 2px solid rgba(99, 102, 241, 0.92) !important;
  outline-offset: 3px;
}

body.ve-element-canvas-mode {
  cursor: default;
}

body.ve-element-moving,
body.ve-element-moving * {
  user-select: none !important;
}

#ve-element-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10020;
}

#ve-element-overlay.ve-overlay-active {
  pointer-events: none;
}

.ve-element-box {
  position: fixed;
  box-sizing: border-box;
  border: 2px solid rgba(99, 102, 241, 0.95);
  background: rgba(99, 102, 241, 0.08);
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.6) inset, 0 10px 30px rgba(15, 23, 42, 0.14);
  pointer-events: auto;
}

.ve-element-toolbar {
  position: absolute;
  left: -2px;
  top: -32px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: min(320px, calc(100vw - 24px));
  padding: 6px 10px;
  border-radius: 8px 8px 8px 2px;
  background: rgba(30, 41, 59, 0.96);
  color: #fff;
  font-size: 11px;
  line-height: 1;
  cursor: move;
  white-space: nowrap;
}

.ve-element-toolbar-label {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ve-element-toolbar-size {
  color: rgba(255,255,255,0.72);
  font-variant-numeric: tabular-nums;
}

.ve-element-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #6366f1;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.2);
  padding: 0;
  pointer-events: auto;
}

.ve-element-handle-n,
.ve-element-handle-s {
  left: 50%;
  transform: translateX(-50%);
}

.ve-element-handle-e,
.ve-element-handle-w {
  top: 50%;
  transform: translateY(-50%);
}

.ve-element-handle-n { top: -7px; cursor: ns-resize; }
.ve-element-handle-s { bottom: -7px; cursor: ns-resize; }
.ve-element-handle-e { right: -7px; cursor: ew-resize; }
.ve-element-handle-w { left: -7px; cursor: ew-resize; }
.ve-element-handle-ne { top: -7px; right: -7px; cursor: nesw-resize; }
.ve-element-handle-nw { top: -7px; left: -7px; cursor: nwse-resize; }
.ve-element-handle-se { bottom: -7px; right: -7px; cursor: nwse-resize; }
.ve-element-handle-sw { bottom: -7px; left: -7px; cursor: nesw-resize; }

/* 编辑标签 */
.ve-edit-badge {
  position: absolute;
  top: 4px;
  left: 8px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: rgba(99,102,241,0.85);
  padding: 2px 10px;
  border-radius: 4px;
  z-index: 10;
  pointer-events: none;
  white-space: nowrap;
}

/* 拖拽手柄 */
.ve-handle {
  position: absolute;
  z-index: 11;
  background: var(--teal, #0f766e);
  border-radius: 2px;
  opacity: 0;
  transition: opacity .15s;
}
.ve-editable:hover .ve-handle { opacity: 1; }

.ve-handle-r {
  top: 50%;
  right: -4px;
  width: 8px;
  height: 40px;
  transform: translateY(-50%);
  cursor: ew-resize;
  border-radius: 4px;
}
.ve-handle-b {
  bottom: -4px;
  left: 50%;
  width: 40px;
  height: 8px;
  transform: translateX(-50%);
  cursor: ns-resize;
  border-radius: 4px;
}
.ve-handle-c {
  bottom: -5px;
  right: -5px;
  width: 12px;
  height: 12px;
  cursor: nwse-resize;
  border-radius: 3px;
  background: #6366f1;
}

/* 磁吸参考线 */
#ve-guides {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 10001;
}

/* 危险按钮 */
.ve-btn-danger {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #fff !important;
}
.ve-btn-danger:hover { background: #dc2626 !important; }

/* ── 变更日志 ── */
.ve-log-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ve-log-entry {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid #f1f5f9;
  font-size: 12px;
  align-items: baseline;
}
.ve-log-time {
  color: var(--muted, #64748b);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ve-log-user {
  color: var(--teal, #0f766e);
  font-weight: 600;
  white-space: nowrap;
}
.ve-log-action {
  color: var(--text, #1e293b);
}

/* 显隐切换按钮 */
.ve-vis-toggle {
  background: none;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px;
  width: 32px;
  height: 28px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s;
}
.ve-vis-toggle.on {
  background: #d1fae5;
  border-color: #6ee7b7;
}

/* 操作按钮 */
.ve-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 16px 0 0;
  border-top: 1px solid var(--border, #e2e8f0);
  margin-top: 16px;
}
.ve-btn {
  flex: 1;
  min-width: 120px;
  padding: 9px 0;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid var(--border, #e2e8f0);
  background: #fff;
  color: var(--text, #1e293b);
  cursor: pointer;
  transition: background .15s;
}
.ve-btn:hover { background: #f1f5f9; }
.ve-btn-primary {
  background: var(--teal, #0f766e);
  color: #fff;
  border-color: var(--teal, #0f766e);
}
.ve-btn-primary:hover { background: #0d6560; }

/* 布局grid在移动端回退单列 */
@media (max-width: 768px) {
  .main-panel[style*="grid"] {
    grid-template-columns: 1fr !important;
  }
  .main-panel[style*="grid"] > * {
    grid-column: 1 / -1 !important;
  }
}

/* 拖拽手柄触屏增大 */
@media (pointer: coarse) {
  .ve-handle-r { width: 14px; height: 50px; right: -7px; }
  .ve-handle-b { height: 14px; width: 50px; bottom: -7px; }
  .ve-handle-c { width: 20px; height: 20px; bottom: -8px; right: -8px; }
  .ve-editable .ve-handle { opacity: 0.7; }
}

/* 移动端适配 */
@media (max-width: 480px) {
  #ve-panel {
    width: 100vw;
    right: -100vw;
  }
  .ve-batch-actions {
    grid-template-columns: 1fr;
  }
}

/* ========== Enhanced Mobile v2 ========== */

/* Touch targets — min 44px for all interactive elements */
@media (max-width: 860px) {
  .solid-btn, .ghost-btn {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .compact-btn {
    min-height: 38px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .menu-toggle {
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
  }
  .icon-btn, .modal-close {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* dock link touch targets */
  .dock-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 16px;
  }
  /* Main content bottom padding — clears the mobile dock */
  .main-panel {
    padding-bottom: 58px;
  }
  /* Mobile dock — safe area inset for iPhone home bar */
  .mobile-dock {
    padding-bottom: env(safe-area-inset-bottom, 4px);
  }
  /* Filter bar — remove forced min-width that overflows */
  .filter-bar input, .filter-bar select {
    min-width: unset !important;
  }
  /* Section head — wrap when buttons overflow */
  .section-head {
    flex-wrap: wrap;
    gap: 8px;
  }
  /* Nav cards — 2 column grid on tablet */
  .nav-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  /* table cells — allow word break */
  .data-table td, .viz-table td {
    max-width: 160px;
    word-break: break-word;
    overflow-wrap: break-word;
    overflow: visible;
    text-overflow: unset;
  }
  /* tab bar scrollable */
  .tabs, .ana-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .tab, .ana-tab {
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* Small phones (≤ 480px) */
@media (max-width: 480px) {
  /* Bottom-sheet modals */
  .modal-overlay {
    align-items: flex-end !important;
  }
  .modal-card, .modal-box {
    border-radius: 16px 16px 0 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 88vh;
    margin-bottom: 0;
  }
  /* Tighter padding */
  .content {
    padding: 12px;
  }
  .topbar {
    padding: 8px 12px;
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .topbar-copy {
    flex: 1 1 auto;
  }
  .topbar-actions {
    width: auto;
    flex: 1 1 auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    justify-content: flex-end;
  }
  /* Sub-items — stack actions below content */
  .sub-item {
    flex-wrap: wrap;
    gap: 6px;
  }
  .sub-item .sub-actions {
    margin-left: 0;
    width: 100%;
    justify-content: flex-end;
  }
  /* Detail actions full-width */
  .detail-actions button, .detail-actions a {
    flex: 1;
    text-align: center;
    justify-content: center;
  }
  /* project stats wrap */
  .project-stats {
    gap: 8px;
  }
  /* breadcrumb */
  .breadcrumb {
    font-size: 12px;
  }
  /* Topbar search — hide on very small screens */
  .global-search-wrap {
    display: none;
  }
}

/* ==================== Mobile Table → Card View ==================== */
@media (max-width: 680px) {
  /* Kill table layout, switch to block */
  .table-scroller { overflow-x: unset; }
  .viz-table, .data-table { display: block; border: none; box-shadow: none; background: transparent; }
  .viz-table thead, .data-table thead { display: none; }
  .viz-table tbody, .data-table tbody { display: block; }

  /* Each row = card */
  .viz-table tbody tr, .data-table tbody tr {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 10px;
    padding: 10px 12px;
    box-shadow: var(--shadow);
  }
  .viz-table tbody tr:hover td,
  .data-table tbody tr:hover td { background: transparent; }
  .row-danger.viz-table tbody tr,
  .viz-table tbody tr.row-danger { border-left: 3px solid var(--danger); }

  /* Each cell = label:value row */
  .viz-table td, .data-table td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    padding: 5px 0;
    border: none;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13px;
    max-width: unset;
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
  }
  .viz-table td:last-child, .data-table td:last-child { border-bottom: none; }

  /* Label from data-label attribute */
  .viz-table td[data-label]::before,
  .data-table td[data-label]::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 600;
    color: var(--text2);
    white-space: nowrap;
    min-width: 60px;
    flex-shrink: 0;
    padding-top: 2px;
  }
  /* Operations column — right-align, no label */
  .viz-table td[data-label="操作"]::before,
  .data-table td[data-label="操作"]::before { display: none; }
  .viz-table td[data-label="操作"],
  .data-table td[data-label="操作"] { justify-content: flex-end; padding-top: 8px; }

  /* Amount column — right-align value */
  .viz-table td.amount, .data-table td.amount { justify-content: space-between; }
}

/* ==================== Calendar Styles ==================== */
.cal-wrap { max-width: 900px; }

.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.cal-title { font-size: 18px; font-weight: 700; color: var(--text); }
.cal-header .icon-btn { font-size: 22px; width: 40px; height: 40px; }

.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
}
.cal-weekday {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text2);
  padding: 6px 0;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 24px;
}
.cal-day {
  min-height: 80px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
  overflow: hidden;
  position: relative;
}
.cal-day:hover { border-color: var(--primary); box-shadow: 0 2px 8px rgba(15,118,110,.1); }
.cal-day-empty { background: transparent; border-color: transparent; cursor: default; }
.cal-day-empty:hover { border-color: transparent; box-shadow: none; }
.cal-day-today { border-color: var(--primary); border-width: 2px; }
.cal-day-today .cal-day-num { color: var(--primary); font-weight: 700; }
.cal-day-has-events { background: #f0fdfa; }

.cal-day-num {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  display: block;
  margin-bottom: 4px;
}
.cal-event-dot {
  font-size: 10px;
  line-height: 1.3;
  border-radius: 3px;
  padding: 1px 4px;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-ev-high { background: #fee2e2; color: #dc2626; }
.cal-ev-med  { background: #dbeafe; color: #1d4ed8; }
.cal-ev-low  { background: #f1f5f9; color: #475569; }
.cal-ev-seizure-expire { background: #fee2e2; color: #dc2626; font-weight: 600; }
.cal-ev-seizure-warn30 { background: #ffedd5; color: #c2410c; }
.cal-ev-seizure-warn60 { background: #fef9c3; color: #a16207; }
.cal-event-more { font-size: 10px; color: var(--text2); }

.cal-upcoming { margin-top: 8px; }
.cal-upcoming-item { cursor: pointer; }
.cal-upcoming-item:hover { border-color: var(--primary); }

/* Calendar mobile responsive */
@media (max-width: 680px) {
  .cal-day { min-height: 52px; padding: 4px; }
  .cal-day-num { font-size: 12px; margin-bottom: 2px; }
  .cal-event-dot { display: none; }
  .cal-day-has-events .cal-day-num::after {
    content: '·';
    color: var(--primary);
    font-size: 18px;
    line-height: 0;
    vertical-align: middle;
    margin-left: 2px;
  }
  .cal-weekday { font-size: 10px; padding: 4px 0; }
  .cal-grid { gap: 1px; }
  .cal-title { font-size: 16px; }
}

/* ==================== Bottom-Sheet Modal Animation ==================== */
@media (max-width: 480px) {
  .modal-overlay { align-items: flex-end !important; }
  .modal-card, .modal-box {
    border-radius: 20px 20px 0 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 88vh;
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.32,0,.15,1) !important;
  }
  .modal-overlay.open .modal-card,
  .modal-overlay.open .modal-box {
    transform: translateY(0) !important;
  }
  /* Drag handle */
  .modal-card::before, .modal-box::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: #d1d5db;
    border-radius: 2px;
    margin: 10px auto -4px;
  }
}

/* ==================== Issue Fixes ==================== */

/* Compact KPI cards on mobile */
@media (max-width: 860px) {
  .kpi-row { margin-bottom: 12px; }
  .kpi-card { padding: 10px 12px; }
  .kpi-card .eyebrow { font-size: 10px; margin-bottom: 2px; }
  .kpi-card .kpi-value, .kpi-card h3 { font-size: 18px; }
  .kpi-card .kpi-sub { font-size: 11px; }
  /* No margin between dashboard sections */
  #dashAlerts, #dashStages, #dashRecent { margin-top: 0; }
  /* Ensure dashAlerts only shows if has content */
  #dashAlerts:empty { display: none; }
  #dashRecent:empty { display: none; }
}
@media (max-width: 480px) {
  .kpi-card { padding: 8px 10px; }
  .kpi-card h3, .kpi-card .kpi-value { font-size: 16px; }
  .kpi-row { gap: 8px; }
}

/* Nav cards 2x2 on mobile (fix truncation) */
.nav-cards-2col {
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (max-width: 860px) {
  .nav-cards-2col { grid-template-columns: repeat(2, 1fr); }
  .nav-card { padding: 12px 10px; gap: 8px; }
  .nav-card h4 { font-size: 13px; white-space: normal; }
  .nav-card p { display: none; }
  .nav-card-icon { width: 34px; height: 34px; font-size: 16px; }
  .nav-arrow { font-size: 16px; }
}

/* Calendar legend */
.cal-legend {
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.cal-leg-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text2);
}
.cal-leg-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}

/* Calendar past days */
.cal-day-past:not(.cal-day-today) {
  opacity: 0.55;
}
.cal-day-past .cal-day-num {
  color: var(--text2);
}

/* Consistent filter bar spacing */
@media (max-width: 860px) {
  .filter-bar { gap: 6px; }
  .filter-bar select, .filter-bar input { padding: 8px 10px; }
}

/* Dashboard alerts spacing */
#dashAlerts .alert-bar { margin-bottom: 0; }
#dashAlerts .alert-bar + .alert-bar { margin-top: 6px; }
#dashAlerts { margin-bottom: 0; }
.content #dashAlerts:not(:empty) { margin-bottom: 12px; }

/* ==================== Mobile KPI Compact + VE Button ==================== */

/* Hide visual editor button on mobile */
@media (max-width: 860px) {
  #ve-topbar-btn { display: none !important; }
  #ve-panel { display: none !important; }
}

/* KPI row: compact 2-column grid on mobile */
@media (max-width: 860px) {
  .kpi-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
    margin-bottom: 12px;
  }
  .kpi-card {
    padding: 8px 10px;
    min-height: unset;
  }
  .kpi-card .eyebrow {
    font-size: 10px;
    margin-bottom: 1px;
    letter-spacing: 0;
  }
  .kpi-card h3,
  .kpi-card .kpi-value {
    font-size: 17px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .kpi-card .kpi-sub { font-size: 10px; margin-top: 1px; }
}

@media (max-width: 480px) {
  .kpi-row { gap: 6px; }
  .kpi-card { padding: 7px 9px; }
  .kpi-card h3, .kpi-card .kpi-value { font-size: 15px; }
  .kpi-card .eyebrow { font-size: 10px; }
}

/* Dashboard content: no gap between sections */
.content #dashKPI + #dashAlerts,
.content #dashAlerts + #dashCaseOverview,
.content #dashCaseOverview + #dashSeizureOverview,
.content #dashSeizureOverview + #dashStages,
.content #dashAlerts + #dashStages,
.content #dashStages + #dashRecent { margin-top: 0; }
#dashCaseOverview, #dashSeizureOverview { margin-bottom: 8px; }

/* ===== Sidebar project list ===== */
.side-divider { height: 1px; background: rgba(255,255,255,0.08); margin: 8px 0; }
.side-section-title { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: #64748b; text-transform: uppercase; padding: 8px 16px 4px; }
.side-project-list { max-height: none; overflow-y: visible; margin-bottom: 4px; }
.side-project-item { display: block; padding: 6px 14px 6px 16px; font-size: 12.5px; color: #94a3b8; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 3px solid transparent; transition: all .12s; }
.side-project-item:hover { color: #e2e8f0; background: rgba(255,255,255,.05); }
.side-project-item.active { color: #fff; border-left-color: #14b8a6; background: rgba(15,118,110,.25); font-weight: 600; }
.side-proj-loading { font-size: 12px; color: #64748b; padding: 6px 16px; }

/* ===== Seizure cards ===== */
.seizure-cards { display: flex; flex-direction: column; gap: 10px; }
.seizure-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); border-left: 4px solid #22c55e; padding: 12px 14px; }
.seizure-card-expired { border-left-color: #ef4444; }
.seizure-card-expiring { border-left-color: #f59e0b; }
.seizure-card-released { border-left-color: #94a3b8; opacity: 0.75; }
.seizure-card-valid { border-left-color: #22c55e; }
.seizure-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.seizure-card-info { flex: 1; min-width: 0; }
.seizure-owner { font-size: 15px; font-weight: 700; color: var(--text1); margin-bottom: 2px; }
.seizure-case-name { font-size: 12px; color: var(--text2); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seizure-expiry { font-size: 13px; color: var(--text1); }
.seizure-card-status { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; flex-shrink: 0; }
.seizure-card-details { font-size: 11.5px; color: var(--text2); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); line-height: 1.6; }
.seizure-card-actions { display: flex; gap: 6px; margin-top: 8px; }


/* ===== Seizure view toggle tabs ===== */
.sz-view-tabs { display: flex; gap: 0; margin-bottom: 14px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); align-self: flex-start; }
.sz-view-tab { padding: 6px 18px; font-size: 13px; font-weight: 500; background: var(--surface); color: var(--text2); border: none; cursor: pointer; transition: background .15s, color .15s; }
.sz-view-tab:not(:last-child) { border-right: 1px solid var(--border); }
.sz-view-tab-active { background: var(--accent, #14b8a6); color: #fff !important; }
.sz-view-tab:hover:not(.sz-view-tab-active) { background: var(--surface2, #f1f5f9); color: var(--text1); }

/* ===== Property view sub-cards ===== */
.sz-prop-cases-list { display: flex; flex-direction: column; gap: 8px; padding: 8px 0 4px; }
.sz-prop-case-card { background: var(--bg, #f8fafc); border-radius: 6px; padding: 10px 12px; border: 1px solid var(--border); }
.sz-prop-case-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.sz-prop-case-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--text2); margin-top: 6px; }
.sz-prop-case-meta span { display: flex; align-items: center; gap: 3px; }
.sz-prop-case-actions { display: flex; gap: 6px; margin-top: 8px; }

/* Fix filter-bar labels from wrapping */
.filter-bar label { white-space: nowrap; flex-shrink: 0; }

/* ==================== Mobile Polish v3 ==================== */

/* 1. Bottom dock: clear active state indicator */
.dock-link {
  position: relative;
  transition: color .15s, background .15s;
}
.dock-link.active {
  color: #14b8a6 !important;
  font-weight: 700;
  background: rgba(20, 184, 166, 0.12);
}
.dock-link.active::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 3px;
  background: #14b8a6;
  border-radius: 0 0 3px 3px;
}

/* 2. Bottom-sheet animation also handles .show class */
@media (max-width: 480px) {
  .modal-overlay.show .modal-card,
  .modal-overlay.show .modal-box {
    transform: translateY(0) !important;
  }
}

/* 3. Nav cards: always 2x2 grid on mobile, no truncation */
@media (max-width: 860px) {
  .nav-cards {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
  }
  .nav-card {
    padding: 12px 10px;
    gap: 8px;
    align-items: flex-start;
    min-height: 60px;
  }
  .nav-card-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    font-size: 16px;
    margin-top: 2px;
  }
  .nav-card h4 {
    font-size: 13px;
    white-space: normal;
    line-height: 1.35;
    overflow: visible;
  }
  .nav-card p {
    display: none;
  }
  .nav-card > div:not(.nav-card-icon) {
    min-width: 0;
    flex: 1;
  }
  .nav-arrow {
    display: none;
  }
}

/* 4. Visual consistency: unified mobile padding + radius */
@media (max-width: 860px) {
  .card, .table-wrap, .filter-bar, .nav-card, .project-card {
    border-radius: 10px;
  }
  .filter-bar {
    padding: 10px 12px;
    gap: 8px;
  }
  .section-head {
    margin-bottom: 10px;
  }
  .topbar h2 {
    font-size: 16px;
  }
  /* Tighter margin between page sections */
  .kpi-row + .section-head,
  .kpi-row + .card,
  .kpi-row + .table-wrap {
    margin-top: 0;
  }
}

/* 5. Select dropdown: ensure arrow & font on iOS */
@media (max-width: 860px) {
  select {
    font-size: 16px; /* prevent iOS auto-zoom */
  }
  input[type="text"],
  input[type="number"],
  input[type="date"],
  input[type="search"],
  textarea {
    font-size: 16px; /* prevent iOS auto-zoom on focus */
  }
}

/* ===== Calendar Sync Panel ===== */
.cal-sync-bar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; padding:10px 14px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:14px; font-size:12.5px; }
.cal-sync-info { display:flex; align-items:center; gap:10px; color:var(--text2); }
.cal-sync-badge { background:#f59e0b; color:#fff; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:700; }
.cal-sync-actions { display:flex; gap:6px; }

/* Sync pending modal */
.sync-pending-list { display:flex; flex-direction:column; gap:12px; }
.sync-item { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); padding:12px; }
.sync-item-header { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.sync-item-date { font-size:12px; font-weight:700; color:var(--accent); white-space:nowrap; }
.sync-item-title { font-size:13px; font-weight:600; flex:1; }
.sync-badge { font-size:10px; font-weight:700; color:#fff; padding:2px 8px; border-radius:10px; white-space:nowrap; }
.sync-item-fields { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:8px; }
.sync-item-actions { display:flex; gap:6px; }
@media (max-width:600px) { .sync-item-fields { grid-template-columns:1fr; } }

/* ==================== v3 additions ==================== */

/* Seizure card note line */
.seizure-card-note {
  font-size: 12px;
  color: var(--text2);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  font-style: italic;
}

/* Filter bar toggle label */
.filter-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text2);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  padding: 4px 0;
}
.filter-toggle-label input[type="checkbox"] {
  width: auto;
  margin: 0;
  cursor: pointer;
  accent-color: var(--primary);
}

/* ===== Expand row + Trial stages ===== */
.expand-icon{font-size:14px;color:var(--text2);font-weight:bold;display:inline-block;width:18px;height:18px;line-height:18px;text-align:center;border-radius:4px;background:var(--surface2,#f1f5f9)}
.case-expand-row td{background:var(--surface2,#f8fafc)!important}
.trial-stages-list{display:flex;flex-direction:column;gap:8px}
.trial-stage-card{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:10px 14px;font-size:13px}
.trial-stage-header{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.trial-stage-actions{margin-left:auto;display:flex;gap:4px}
.trial-stage-body{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--text2)}
.trial-stage-body span{white-space:nowrap}

.text-warn{color:#f59e0b}

/* ===== Compact KPI for dashboard ===== */
.kpi-row-compact .kpi-card {
  padding: 10px 14px;
}
.kpi-row-compact .kpi-card .eyebrow {
  margin-bottom: 2px;
}
@media (max-width: 860px) {
  .kpi-row-compact {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
  }
  .kpi-row-compact .kpi-card {
    padding: 8px 10px;
  }
  .kpi-row-compact .kpi-card h3,
  .kpi-row-compact .kpi-card .kpi-value {
    font-size: 16px;
  }
}
@media (max-width: 480px) {
  .kpi-row-compact {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px;
  }
  .kpi-row-compact .kpi-card {
    padding: 6px 8px;
  }
  .kpi-row-compact .kpi-card .eyebrow {
    font-size: 9px;
  }
  .kpi-row-compact .kpi-card h3,
  .kpi-row-compact .kpi-card .kpi-value {
    font-size: 14px;
  }
}

/* ===== Mobile search button & overlay ===== */
.mobile-search-btn {
  display: none !important;
}
@media (max-width: 480px) {
  .mobile-search-btn {
    display: inline-flex !important;
    min-height: 44px;
    min-width: 44px;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: none;
    border: none;
  }
}
.mobile-search-overlay {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 2000;
  background: var(--surface);
  padding: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.mobile-search-bar {
  display: flex;
  gap: 8px;
  align-items: center;
}
.mobile-search-bar input {
  flex: 1;
  padding: 10px 12px;
  font-size: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.mobile-search-bar .solid-btn,
.mobile-search-bar .ghost-btn {
  min-height: 42px;
  padding: 0 12px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ===== Search result items (mobile) ===== */
.search-result-item {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 6px;
  cursor: pointer;
  background: var(--surface);
}
.search-result-item:active {
  background: var(--primary-bg);
}

/* ===== Detail grid responsive fix ===== */
@media (max-width: 480px) {
  .detail-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 4px;
  }
}

/* ===== Project detail: nav cards tighter on mobile ===== */
@media (max-width: 480px) {
  .nav-card {
    padding: 10px 12px;
  }
  .nav-card h4 {
    font-size: 13px;
  }
  .nav-card p {
    font-size: 11px;
  }
  .nav-card-icon {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }
}


/* ===== UI Patch v2: Seizure Card Expand ===== */
.sz-clickable { cursor: pointer; }
.sz-expand-icon { font-size: 10px; color: var(--text2); transition: transform 0.2s; margin-top: 4px; }
.sz-card-open .sz-expand-icon { transform: rotate(180deg); }
.sz-expand-body {
  padding: 10px 0 4px;
  margin-top: 8px;
  border-top: 1px dashed var(--border);
  animation: szExpandIn 0.25s ease-out;
}
.sz-expand-row {
  font-size: 12.5px;
  color: var(--text);
  padding: 3px 0;
  line-height: 1.6;
}
@keyframes szExpandIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.sz-highlight {
  box-shadow: 0 0 0 3px var(--primary), 0 4px 16px rgba(15,118,110,.2) !important;
  transition: box-shadow 0.5s;
}

/* ===== UI Patch v2: Project top actions ===== */
.proj-top-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 12px;
}
@media (max-width: 860px) {
  .proj-top-actions {
    justify-content: stretch;
  }
  .proj-top-actions .ghost-btn,
  .proj-top-actions .solid-btn {
    flex: 1;
    text-align: center;
  }
}

/* ===== UI Patch v2: Compact case rows ===== */
.sz-compact-case:hover {
  border-color: var(--primary) !important;
  background: var(--primary-bg) !important;
}


/* ===== Seizure Card Redesign: Sub-kanban + Countdown ===== */
.seizure-card-terminated { border-left-color: #94a3b8; opacity: 0.7; }

/* Countdown tags */
.sz-countdown { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 10px; margin-left: 6px; vertical-align: middle; }
.sz-countdown-red { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.sz-countdown-orange { background: #fffbeb; color: #d97706; border: 1px solid #fde68a; }
.sz-countdown-green { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }

/* Must-complete-by date */
.sz-must-complete { font-size: 12px; margin-top: 4px; padding: 3px 8px; background: #fffbeb; color: #92400e; border-radius: 4px; border-left: 3px solid #f59e0b; }
.sz-must-overdue { background: #fef2f2; color: #991b1b; border-left-color: #ef4444; }

/* Sub-kanban container */
.sz-sub-kanban { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }

/* Renewal card */
.sz-renewal-card { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; margin-left: 12px; border-left: 3px solid #22c55e; position: relative; }
.sz-renewal-card::before { content: ''; position: absolute; left: -12px; top: 50%; width: 9px; height: 1px; background: var(--border); }
.sz-renewal-active { border-left-color: #22c55e; }
.sz-renewal-terminated { border-left-color: #94a3b8; opacity: 0.65; }
.sz-renewal-pending { border-left-color: #f59e0b; }
.sz-renewal-latest { border-left-width: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.sz-renewal-original { border-left-color: #6366f1; border-left-style: dashed; }

.sz-renewal-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.sz-renewal-label { font-size: 13px; font-weight: 700; color: var(--text1); }
.sz-renewal-actions { margin-left: auto; display: flex; gap: 4px; }
.sz-renewal-body { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--text2); line-height: 1.7; }
.sz-renewal-body span { white-space: nowrap; }
.sz-renewal-empty { font-size: 12px; color: var(--text2); padding: 8px 0; font-style: italic; }

/* Mini action small variant */
.mini-action-sm { font-size: 11px !important; padding: 2px 8px !important; }
.mini-action-danger { color: #dc2626 !important; border-color: #fecaca !important; }
.mini-action-danger:hover { background: #fef2f2 !important; }

/* Mobile adjustments for sub-kanban */
@media (max-width: 480px) {
  .sz-renewal-card { margin-left: 6px; padding: 8px 10px; }
  .sz-renewal-body { gap: 2px 10px; font-size: 11px; }
  .sz-must-complete { font-size: 11px; }
  .sz-countdown { font-size: 11px; padding: 1px 6px; }
}

/* === Seizure card — property name as primary display (Tasks 1 & 3) === */
.seizure-property-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  word-wrap: break-word;
  word-break: break-all;
  white-space: normal;
  line-height: 1.4;
  margin-bottom: 2px;
}

/* === Topbar search — inline button visually attached to input (Task 2) === */
.global-search-wrap .global-search-input {
  border-radius: var(--radius) 0 0 var(--radius) !important;
}
.search-inline-btn {
  background: var(--primary);
  color: #fff;
  border: 1px solid var(--primary);
  border-left: none;
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 6px 10px;
  font-size: 14px;
  cursor: pointer;
  transition: opacity .15s;
  flex-shrink: 0;
}
.search-inline-btn:hover { opacity: .85; }

/* === Seizure property-view group styles === */
.sz-property-groups { display: flex; flex-direction: column; gap: 12px; }
.sz-prop-group { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface); }
.sz-prop-group-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; cursor: pointer; user-select: none; background: var(--surface2, #f8fafc); gap: 8px; }
.sz-prop-group-header:hover { background: var(--surface3, #f1f5f9); }
.sz-prop-group-info { flex: 1; min-width: 0; }
.sz-prop-group-owner { font-size: 15px; font-weight: 700; color: var(--text1); margin-bottom: 2px; }
.sz-prop-group-meta { font-size: 12px; color: var(--text2); }
.sz-prop-group-body { padding: 8px 12px 12px; }
.sz-prop-group-expired .sz-prop-group-header { border-left: 4px solid #ef4444; }
.sz-prop-group-expiring .sz-prop-group-header { border-left: 4px solid #f97316; }
.sz-prop-group-valid .sz-prop-group-header { border-left: 4px solid #22c55e; }

/* FIX3: Hide empty alerts globally */
#dashAlerts:empty { display: none !important; }

/* ===== Unified card styles ===== */
.detail-card.card-style {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: var(--shadow);
}
.detail-card.card-style label {
  font-size: 11px;
  color: var(--text2);
  margin-bottom: 3px;
}
.detail-card.card-style p {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

/* Standardize grid gaps */
.proj-info-grid {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

/* Ensure all card types have consistent border-radius */
.kpi-card, .nav-card, .project-card, .detail-card.card-style, .seizure-card {
  border-radius: var(--radius);
}

/* Consistent padding for similar-sized elements */
.kpi-card, .detail-card.card-style {
  padding: 12px 14px;
}
.nav-card, .project-card {
  padding: 14px 16px;
}

/* Standardize section heads */
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.section-head h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}

/* Mobile adjustments for unified cards */
@media (max-width: 480px) {
  .detail-card.card-style {
    padding: 8px 10px;
  }
  .detail-card.card-style p {
    font-size: 14px;
  }
  .proj-info-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
}

/* Seizure search input */
.filter-search-input {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  min-width: 180px;
  outline: none;
  background: var(--surface);
  color: var(--text);
}
.filter-search-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(15,118,110,0.1);
}
@media (max-width: 768px) {
  .filter-search-input { min-width: 120px; width: 100%; }
}