/* ============================================================
   ZHISHENG Design System — Unified
   Merges app.css + admin-v2.css into one canonical source.
   ============================================================ */

/* ── Design Tokens ── */
:root{
  --bg:#f5f7fa;
  --panel:#fff;
  --panel-soft:#f8fafc;
  --line:#e4e9f0;
  --line-strong:#cbd5e1;
  --text:#1c2735;
  --muted:#738094;
  --primary:#245d97;
  --primary-dark:#173f6b;
  --primary-soft:#edf5fc;
  --nav:#1c2635;
  --nav-2:#202b3a;
  --success:#16845b;
  --success-soft:#e8f7f0;
  --danger:#c94444;
  --danger-soft:#fff0f0;
  --warning:#bc7a17;
  --warning-soft:#fff6e6;
  --shadow:0 4px 16px rgba(28,39,53,.055);
  --radius:12px;

  --zs-bg:var(--bg);
  --zs-surface:var(--panel);
  --zs-surface-soft:var(--panel-soft);
  --zs-sidebar:#1c2635;
  --zs-sidebar-soft:#202b3a;
  --zs-primary:var(--primary);
  --zs-primary-dark:var(--primary-dark);
  --zs-primary-soft:var(--primary-soft);
  --zs-text:var(--text);
  --zs-muted:var(--muted);
  --zs-line:var(--line);
  --zs-success:var(--success);
  --zs-danger:var(--danger);
  --zs-warning:var(--warning);
  --zs-radius:var(--radius);
  --zs-shadow:var(--shadow);
}

/* ── Reset & Base ── */
*{box-sizing:border-box}

html{background:var(--bg)}

body{
  margin:0;
  min-height:100%;
  font-family:Inter,"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  color:var(--text);
  background:var(--bg);
  font-size:14px;
}

a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
input,select,textarea{color:var(--text)}


/* ============================================================
   LAYOUT SHELL
   ============================================================ */

.zs-app-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:252px minmax(0,1fr);
}

.zs-main{
  min-width:0;
  min-height:100vh;
}


/* ============================================================
   SIDEBAR — Comfort V2
   ============================================================ */

.zs-sidebar{
  position:sticky;
  top:0;
  height:100vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:linear-gradient(180deg,#1c2635 0%,#202b3a 48%,#1b2533 100%);
  color:#d8e0ea;
  padding:18px 13px 15px;
  z-index:50;
  border-right:1px solid rgba(255,255,255,.055);
  box-shadow:8px 0 28px rgba(15,23,42,.055);
}


/* Brand */
.zs-brand{
  display:flex;
  align-items:center;
  gap:11px;
  text-decoration:none;
  color:#fff;
  padding:2px 7px 14px;
}

.zs-brand-mark{
  width:41px;
  height:41px;
  flex:0 0 41px;
  border-radius:11px;
  display:grid;
  place-items:center;
  font-size:13px;
  font-weight:900;
  letter-spacing:.05em;
  background:#eef3f8;
  color:#26364a;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 5px 16px rgba(0,0,0,.10);
}

.zs-brand-copy{min-width:0}

.zs-brand-copy strong{
  display:block;
  font-size:15px;
  letter-spacing:.01em;
  white-space:nowrap;
  color:#f0f4f8;
}

.zs-brand-copy span{
  display:block;
  margin-top:2px;
  color:#9eabba;
  font-size:10.5px;
  letter-spacing:.08em;
}

.zs-platform-tag{
  margin:0 8px 16px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,.08);
  color:#7f8d9e;
  font-size:9px;
  letter-spacing:.08em;
  white-space:nowrap;
}


/* Navigation tree */
.zs-nav-tree-root{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:14px 12px 22px;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:thin;
  flex:1 1 auto;
  min-height:0;
}

.zs-nav-tree-root::-webkit-scrollbar{width:4px}
.zs-nav-tree-root::-webkit-scrollbar-thumb{background:rgba(255,255,255,.13);border-radius:999px}

.zs-nav-tree-section{
  position:relative;
  margin:0 0 11px;
  padding:0;
}

.zs-nav-parent{
  display:flex;
  align-items:center;
  gap:11px;
  min-height:48px;
  padding:8px 9px;
  border-radius:11px;
}

.zs-nav-parent-icon{
  flex:0 0 31px;
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.07);
  border-radius:8px;
  background:rgba(255,255,255,.045);
  color:#a9b5c4;
  font-size:11px;
  font-weight:800;
  line-height:1;
}

.zs-nav-parent-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
}

.zs-nav-parent-copy strong{
  color:#e3e9f0;
  font-size:14px;
  font-weight:750;
  line-height:1.35;
}

.zs-nav-parent-copy small{
  margin-top:3px;
  color:#8593a4;
  font-size:10.5px;
  line-height:1.35;
}

.zs-nav-tree-section.section-active .zs-nav-parent{
  background:rgba(124,164,211,.075);
}

.zs-nav-tree-section.section-active .zs-nav-parent-icon{
  border-color:rgba(132,177,229,.20);
  background:rgba(91,135,188,.16);
  color:#b5d1f0;
}

.zs-nav-tree-section.section-active .zs-nav-parent-copy strong{
  color:#f2f5f8;
}


/* Tree children */
.zs-nav-children{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:3px;
  margin-left:24px;
  padding-left:16px;
}

.zs-nav-children::before{
  content:"";
  position:absolute;
  top:2px;
  bottom:2px;
  left:0;
  width:1px;
  background:rgba(181,194,208,.14);
}

.zs-nav-item.zs-nav-child{
  position:relative;
  min-height:40px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 10px 9px 14px;
  margin:0;
  border-radius:9px;
  color:#b7c2cf;
  text-decoration:none;
  font-size:13.5px;
  font-weight:520;
  line-height:1.45;
  letter-spacing:.005em;
  transition:background .15s ease,color .15s ease,transform .15s ease;
  box-shadow:none;
}

.zs-nav-item.zs-nav-child::before{display:none}

.zs-tree-dot{
  position:absolute;
  left:-19px;
  top:50%;
  width:7px;
  height:7px;
  border:1px solid rgba(176,190,207,.32);
  border-radius:999px;
  background:#202b3a;
  transform:translateY(-50%);
}

.zs-nav-item.zs-nav-child:hover{
  background:rgba(255,255,255,.055);
  color:#e9eef4;
}

.zs-nav-item.zs-nav-child.active{
  background:linear-gradient(90deg,rgba(105,145,191,.22),rgba(105,145,191,.11));
  color:#f3f6f9;
  font-weight:680;
  box-shadow:inset 0 0 0 1px rgba(145,181,221,.09);
}

.zs-nav-item.zs-nav-child.active .zs-tree-dot{
  width:8px;
  height:8px;
  border-color:#8eb4dc;
  background:#8eb4dc;
  box-shadow:0 0 0 3px rgba(142,180,220,.11);
}


/* Nav tags */
.zs-nav-tag{
  flex:0 0 auto;
  margin-left:auto;
  padding:3px 6px;
  border-radius:6px;
  background:rgba(255,255,255,.055);
  color:#99a7b7;
  font-size:9px;
  font-weight:700;
}

.zs-nav-tag-ai{
  background:rgba(100,145,194,.14);
  color:#b6d0ec;
}

.zs-nav-item.zs-nav-child.active .zs-nav-tag{
  background:rgba(255,255,255,.085);
  color:#d6e4f3;
}


/* Sidebar footer */
.zs-sidebar-footer{
  margin-top:auto;
  padding:12px 7px 2px;
  border-top:1px solid rgba(255,255,255,.065);
  background:rgba(0,0,0,.035);
}

.zs-user-card{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:9px;
}

.zs-user-avatar{
  width:33px;
  height:33px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#263c57;
  color:#dbe9f7;
  font-size:12px;
  font-weight:800;
}

.zs-user-copy{min-width:0}
.zs-user-copy strong{display:block;color:#e7edf3;font-size:13px}
.zs-user-copy span{display:block;margin-top:1px;color:#909eae;font-size:10.5px}

.zs-logout{
  width:100%;
  border:0;
  padding:7px 9px;
  border-radius:7px;
  background:transparent;
  color:#a9b5c3;
  font-size:11px;
  text-align:left;
  cursor:pointer;
}

.zs-logout:hover{
  background:rgba(255,255,255,.05);
  color:#eef3f8;
}


/* ============================================================
   TOPBAR
   ============================================================ */

.zs-topbar{
  position:sticky;
  top:0;
  z-index:35;
  min-height:68px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:10px 26px;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}

.zs-topbar-left,
.zs-topbar-right{
  display:flex;
  align-items:center;
  gap:14px;
}

.zs-breadcrumb{
  margin-bottom:2px;
  color:#98a2b0;
  font-size:10px;
  letter-spacing:.03em;
}

.zs-breadcrumb span{padding:0 5px}

.zs-current-page{
  display:block;
  font-size:14px;
  font-weight:700;
  color:#263546;
}

.zs-date{color:#8a96a6;font-size:11px}

.zs-quick-create{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:35px;
  padding:0 13px;
  border-radius:8px;
  text-decoration:none;
  color:#fff;
  background:var(--primary);
  font-size:12px;
  font-weight:700;
  box-shadow:0 3px 8px rgba(36,93,151,.16);
}

.zs-quick-create:hover{background:var(--primary-dark)}

.zs-mobile-menu{
  display:none;
  width:36px;
  height:36px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  color:#334155;
  cursor:pointer;
}


/* Context tabs */
.zs-context-tabs{
  position:sticky;
  top:68px;
  z-index:30;
  display:flex;
  align-items:center;
  gap:4px;
  min-height:48px;
  padding:6px 26px;
  overflow-x:auto;
  background:#fff;
  border-bottom:1px solid var(--line);
}

.zs-context-tabs a{
  flex:0 0 auto;
  padding:8px 12px;
  border-radius:7px;
  color:#677588;
  text-decoration:none;
  font-size:12px;
  font-weight:600;
}

.zs-context-tabs a:hover{color:#245d97;background:#f3f7fb}
.zs-context-tabs a.active{color:#1e5488;background:#ebf3fa}


/* Content area */
.zs-content{padding:24px 26px 48px}

.zs-footer{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:20px 26px 28px;
  color:#a1aab7;
  font-size:9px;
  letter-spacing:.06em;
}


/* ============================================================
   PAGE HEAD
   ============================================================ */

.page-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
  margin-bottom:17px;
}

.page-head h1{
  font-size:24px;
  line-height:1.25;
  letter-spacing:-.02em;
  color:#1d2a39;
  margin:2px 0 5px;
}

.eyebrow{
  font-size:9px;
  letter-spacing:.14em;
  color:#55799d;
  font-weight:800;
}

.muted{color:var(--muted)}
.page-head .muted{font-size:13px}
.page-head .actions{justify-content:flex-end}


/* ============================================================
   PANELS & TOOLBAR
   ============================================================ */

.panel,
.toolbar,
.metric-card,
.kpi{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.panel{padding:16px}
.toolbar{
  padding:12px 14px;
  display:flex;
  gap:10px;
  align-items:end;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.toolbar.compact{padding:10px 12px}


/* ============================================================
   FORMS
   ============================================================ */

.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:11px;color:#64748b;font-weight:700}

.input,
.select,
.textarea{
  border:1px solid #dce2e9;
  border-radius:8px;
  padding:8px 10px;
  background:#fff;
  min-height:36px;
  transition:.12s;
}

.input:hover,
.select:hover,
.textarea:hover{border-color:#aab7c6}

.input:focus,
.select:focus,
.textarea:focus{
  outline:none;
  border-color:#7ea7cc;
  box-shadow:0 0 0 3px rgba(70,124,174,.09);
}

.textarea{resize:vertical}


/* ============================================================
   BUTTONS
   ============================================================ */

.btn{
  border:1px solid #c7d0da;
  background:#fff;
  color:#294057;
  border-radius:8px;
  padding:8px 13px;
  min-height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-weight:600;
  white-space:nowrap;
  box-shadow:none;
  transition:.12s;
}

.btn:hover{background:#f5f8fb;border-color:#aebac6}

.btn-primary{
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
  box-shadow:0 4px 10px rgba(36,95,158,.14);
}

.btn-primary:hover{
  background:var(--primary-dark);
  border-color:var(--primary-dark);
}

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

.btn-success{background:var(--success);color:#fff;border-color:var(--success)}

.btn-sm{padding:5px 9px;min-height:30px;font-size:12px}
.btn-lg{min-height:42px;padding:10px 17px}

.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.form-actions{display:flex;justify-content:flex-end;margin-top:18px}


/* ============================================================
   ALERTS
   ============================================================ */

.alert{
  padding:12px 15px;
  border-radius:9px;
  margin:0 0 14px;
  border:1px solid;
  display:flex;
  align-items:flex-start;
  gap:10px;
  box-shadow:none;
}

.alert b{white-space:nowrap}
.alert-success{background:var(--success-soft);border-color:#bce0d0;color:#146448}
.alert-warning{background:var(--warning-soft);border-color:#eed3a1;color:#80520e}
.alert-error{background:var(--danger-soft);border-color:#efbcbc;color:#9d3232}
.alert ul{margin:0;padding-left:18px}

.floating-errors{
  position:fixed;
  top:18px;
  left:50%;
  transform:translateX(-50%);
  z-index:20;
  max-width:560px;
  width:calc(100% - 40px);
}


/* ============================================================
   TABLES
   ============================================================ */

.table-wrap{
  overflow:auto;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:none;
}

.data-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:900px;
  font-size:12px;
}

.data-table th{
  position:sticky;
  top:0;
  background:#f7f9fb;
  color:#667487;
  font-size:10px;
  text-align:left;
  padding:10px 10px;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
  z-index:2;
  font-weight:700;
  letter-spacing:.02em;
}

.data-table td{
  padding:8px 10px;
  border-bottom:1px solid #edf0f4;
  vertical-align:middle;
  background:#fff;
}

.data-table tbody tr:last-child td{border-bottom:0}
.data-table tbody tr:hover{background:#fafcfe}

.data-table .input,
.data-table .select{
  width:100%;
  min-height:32px;
  padding:5px 7px;
  border-color:#d6dde5;
  background:#fff;
}


/* Product table column widths */
.product-table th:nth-child(1){width:40px}
.product-table th:nth-child(2){width:86px}
.product-table th:nth-child(3){width:150px}
.product-table th:nth-child(4){min-width:190px}
.product-table th:nth-child(5){width:120px}
.product-table th:nth-child(6){width:105px}
.product-table th:nth-child(7){width:150px}
.product-table th:nth-child(8){width:100px}
.product-table th:nth-child(9){width:98px}
.product-table td{height:82px}
.product-code-input{font-weight:800;color:#183d65}
.highlight-row td{background:#fff9e8}


/* ============================================================
   IMAGE / THUMBNAIL
   ============================================================ */

.thumb{
  width:68px;
  height:68px;
  object-fit:contain;
  background:#f7f8fa;
  border:1px solid #e4e8ed;
  border-radius:7px;
}

.image-button{border:0;padding:0;background:none;border-radius:8px}
.image-button:hover .thumb{border-color:#9db9d7;box-shadow:0 0 0 3px #eaf2fb}

.image-preview-box{
  width:170px;
  height:170px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#f8fafc;
  display:grid;
  place-items:center;
  padding:8px;
}

.image-preview-box img{max-width:100%;max-height:100%;object-fit:contain}


/* Image performance: fixed aspect containers to prevent CLS */
.img-cover{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.img-contain{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.img-aspect{
  aspect-ratio:1/1;
  object-fit:contain;
  background:#f7f8fa;
}

.img-thumb-wrap{
  position:relative;
  overflow:hidden;
  border-radius:7px;
  background:#f7f8fa;
  border:1px solid #e4e8ed;
}

.img-thumb-wrap img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  transition:opacity .2s ease;
}

.img-thumb-wrap[data-loading] img{opacity:0}

.img-thumb-wrap[data-loading]::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
  animation:img-shimmer 1.2s infinite;
}

@keyframes img-shimmer{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(100%)}
}

.img-error{
  display:grid;
  place-items:center;
  color:#b0bac6;
  font-size:10px;
  font-weight:700;
  letter-spacing:.04em;
  background:#f7f8fa;
}


/* ============================================================
   STATUS BADGES
   ============================================================ */

.status{
  display:inline-flex;
  align-items:center;
  padding:4px 9px;
  border-radius:99px;
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
}

.status-active,.status-saved{background:var(--success-soft);color:#14704f}
.status-disabled,.status-void{background:#faeaea;color:#a32e2e}
.status-draft{background:#fff3d7;color:#8b5a00}
.status-new{background:#eaf2fb;color:#1f5c99}


/* ============================================================
   METRICS & KPI
   ============================================================ */

.metrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-bottom:14px;
}

.metric-card{
  padding:15px 17px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:110px;
}

.metric-card span{font-size:12px;color:var(--muted)}
.metric-card strong{font-size:25px;line-height:1}
.metric-card small{font-size:11px;color:#95a2b2}

.metric-icon{
  width:36px;
  height:36px;
  border-radius:9px;
  background:var(--primary-soft);
  display:grid;
  place-items:center;
  color:var(--primary);
  font-weight:800;
}

.kpi-row{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin:14px 0;
}

.kpi{padding:16px 17px}
.kpi b{font-size:25px;display:block;letter-spacing:-.02em}
.kpi span{color:var(--muted);font-size:12px}


/* ============================================================
   PAGINATION (legacy)
   ============================================================ */

.pagination{
  display:flex;
  gap:5px;
  margin-top:14px;
  align-items:center;
  flex-wrap:wrap;
}

.pagination a,
.pagination span{
  padding:7px 10px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:6px;
}

.pagination .active{background:var(--primary);color:#fff}


/* ============================================================
   EMPTY STATE
   ============================================================ */

.empty{
  padding:48px;
  text-align:center;
  color:var(--muted);
}


/* ============================================================
   MODAL
   ============================================================ */

.modal{
  border:0;
  border-radius:13px;
  padding:0;
  box-shadow:0 22px 70px rgba(0,0,0,.28);
  max-width:min(920px,92vw);
}

.modal::backdrop{background:rgba(15,25,35,.58)}
.modal-body{padding:22px}

.image-modal-body{
  position:relative;
  padding:14px;
  background:#0f1720;
}

.image-modal-body img{
  max-width:82vw;
  max-height:82vh;
  object-fit:contain;
  display:block;
}

.modal-close{
  position:absolute;
  top:8px;
  right:8px;
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.9);
  font-size:22px;
  line-height:1;
  color:#233;
}


/* ============================================================
   FORM GRID & LAYOUTS
   ============================================================ */

.form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:15px;
}

.form-grid .wide{grid-column:1/-1}

.form-section-title{
  grid-column:1/-1;
  font-size:12px;
  color:var(--primary);
  font-weight:800;
  border-bottom:1px solid var(--line);
  padding-bottom:8px;
  margin-top:2px;
}

.split{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(360px,.7fr);
  gap:16px;
}

.section-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:0 0 10px;
}

.section-title h2{font-size:17px;margin:0}

.bar-track{height:7px;background:#edf2f6;border-radius:99px;overflow:hidden;min-width:100px}
.bar-fill{height:100%;background:var(--primary);border-radius:99px}


/* ============================================================
   WORKFLOW STEPS
   ============================================================ */

.workflow-steps{
  display:flex;
  align-items:center;
  justify-content:center;
  margin:4px 0 16px;
}

.workflow-step{
  display:flex;
  align-items:center;
  gap:7px;
  color:#91a0af;
  font-size:12px;
  font-weight:700;
}

.workflow-step b{
  width:25px;
  height:25px;
  border-radius:50%;
  border:1px solid #cbd4de;
  display:grid;
  place-items:center;
  background:#fff;
}

.workflow-step.active{color:var(--primary)}
.workflow-step.active b{background:var(--primary);color:#fff;border-color:var(--primary)}
.workflow-step.done{color:var(--success)}
.workflow-step.done b{background:var(--success-soft);border-color:#a7d7c3}

.workflow-line{width:72px;height:1px;background:#d8dfe7;margin:0 10px}
.workflow-line.done{background:#9ecdb9}


/* ============================================================
   UPLOAD PANEL
   ============================================================ */

.upload-panel{max-width:980px;margin:0 auto}

.drop-zone{
  min-height:240px;
  border:2px dashed #b9c8d8;
  border-radius:14px;
  background:#f8fbfe;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:8px;
  color:#56697d;
  transition:.15s;
}

.drop-zone:hover,
.drop-zone.dragging{border-color:var(--primary);background:#f0f6fc}
.drop-zone.has-files{border-style:solid;border-color:#8fb2d6}
.drop-zone strong{font-size:18px;color:#243a51}
.drop-zone small{color:#93a1af}

.drop-icon{
  width:48px;
  height:48px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#e8f1fa;
  color:var(--primary);
  font-size:28px;
  line-height:1;
}

.upload-summary{text-align:center;margin:12px 0 2px;font-weight:700;color:#46627e}

.info-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:16px;
}

.info-grid>div{
  border:1px solid var(--line);
  background:#fbfcfe;
  border-radius:9px;
  padding:12px;
}

.info-grid b,.info-grid span{display:block}
.info-grid b{font-size:12px;margin-bottom:4px}
.info-grid span{font-size:11px;color:var(--muted);line-height:1.6}

.batch-review-table th:nth-child(1){width:48px}
.batch-review-table th:nth-child(2){min-width:190px}
.batch-review-table th:nth-child(3){width:170px}
.batch-review-table th:nth-child(4){min-width:190px}
.batch-review-table th:nth-child(5){width:110px}
.batch-review-table th:nth-child(6){width:210px}
.batch-review-table .row-new td{background:#fbfdff}
.batch-review-table .row-conflict td{background:#fff8f8}
.code-cell{font-weight:800;color:#1c4d7e}


/* ============================================================
   LOGIN
   ============================================================ */

.login-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  background:#eef3f8;
}

.login-brand-panel{
  background:linear-gradient(145deg,#10233a,#1d4c77);
  color:#fff;
  padding:70px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:100vh;
}

.login-brand-panel h1{font-size:38px;margin:0;line-height:1.25}
.login-brand-panel p{font-size:15px;line-height:1.9;color:#bdd0e3;max-width:520px}

.login-points{display:grid;gap:13px}
.login-points div{display:flex;gap:10px;color:#dbe8f4}
.login-points b{color:#7fc0ff}

.login-form-panel{display:grid;place-items:center;padding:40px}

.login-card{
  width:min(430px,100%);
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:34px;
  box-shadow:var(--shadow);
}

.login-card h2{font-size:26px;margin:0 0 6px}
.login-card .field{margin:18px 0}
.login-card .btn{width:100%;height:44px}
.login-kicker{font-size:11px;color:var(--primary);font-weight:800;letter-spacing:.15em;margin-bottom:8px}


/* ============================================================
   V2 COMPONENTS — Stat Grid
   ============================================================ */

.zs-stat-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-bottom:14px;
}

.zs-stat-card{
  min-width:0;
  min-height:104px;
  padding:15px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}

.zs-stat-card span{display:block;color:#778596;font-size:10px;margin-bottom:5px}
.zs-stat-card strong{display:block;color:#263e53;font-size:27px;line-height:1;letter-spacing:-.03em}
.zs-stat-card small{display:block;margin-top:8px;color:#a0a9b2;font-size:9px;line-height:1.5}


/* ============================================================
   V2 COMPONENTS — Data Rule
   ============================================================ */

.zs-data-rule{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-bottom:14px;
  padding:14px 16px;
  border:1px solid #dce8f2;
  border-radius:11px;
  background:#f5f9fc;
}

.zs-data-rule-icon{
  width:32px;
  height:32px;
  flex:0 0 32px;
  display:grid;
  place-items:center;
  border-radius:8px;
  color:#2d689d;
  background:#e4f0fa;
  font-size:11px;
  font-weight:800;
}

.zs-data-rule strong{font-size:12px}
.zs-data-rule p{margin:4px 0 0;color:#6f7e90;font-size:11px;line-height:1.65}


/* ============================================================
   V2 COMPONENTS — Module Grid
   ============================================================ */

.zs-module-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-bottom:14px;
}

.zs-module-card{
  min-width:0;
  display:grid;
  grid-template-columns:38px 1fr auto;
  gap:11px;
  align-items:center;
  padding:16px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#fff;
  color:inherit;
  text-decoration:none;
  transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease;
}

.zs-module-card:hover{
  transform:translateY(-1px);
  border-color:#bed2e4;
  box-shadow:0 6px 20px rgba(40,70,100,.06);
}

.zs-module-code{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:#f0f5fa;
  color:#48749d;
  font-size:11px;
  font-weight:800;
}

.zs-module-card h3{margin:0 0 4px;color:#27394c;font-size:13px}
.zs-module-card p{margin:0;color:#8390a0;font-size:10px;line-height:1.55}
.zs-module-arrow{color:#96a5b5;font-size:18px}


/* ============================================================
   V2 COMPONENTS — Two Column & Panel Head
   ============================================================ */

.zs-two-column{
  display:grid;
  grid-template-columns:1.35fr .65fr;
  gap:14px;
}

.zs-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:9px;
  padding-bottom:10px;
  border-bottom:1px solid #edf1f4;
}

.zs-panel-head strong{font-size:14px;color:#24394c}
.zs-panel-head span{display:block;margin-top:3px;color:#99a3ae;font-size:9px}

.zs-health-list{display:grid;gap:2px}

.zs-health-list > div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px 2px;
  border-bottom:1px solid #edf0f4;
}

.zs-health-list span{color:#738094;font-size:11px}
.zs-health-list strong{color:#263b50;font-size:13px}


/* ============================================================
   V2 COMPONENTS — Dashboard KPIs
   ============================================================ */

.zs-dashboard-kpis{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-bottom:20px;
}

.zs-dashboard-kpi{
  position:relative;
  min-height:126px;
  display:flex;
  flex-direction:column;
  padding:17px 18px;
  overflow:hidden;
  border:1px solid #e2e8ef;
  border-radius:14px;
  background:linear-gradient(145deg,#ffffff 0%,#fbfcfe 100%);
  box-shadow:0 2px 7px rgba(31,47,65,.035);
  text-decoration:none;
  color:#263646;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}

.zs-dashboard-kpi:hover{
  transform:translateY(-2px);
  border-color:#b7cddd;
  box-shadow:0 9px 25px rgba(31,64,94,.08);
}

.zs-dashboard-kpi:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  border-radius:14px 0 0 14px;
  background:#7892aa;
}

.zs-dashboard-kpi-danger:before{background:#c55555}
.zs-dashboard-kpi-primary:before{background:#3978ae}
.zs-dashboard-kpi-success:before{background:#3a8a6a}
.zs-dashboard-kpi-warning:before{background:#c38a34}
.zs-dashboard-kpi-neutral:before{background:#74879b}

.zs-dashboard-kpi-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:#667689;
  font-size:12px;
  font-weight:650;
}

.zs-dashboard-kpi-arrow{
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
  flex:0 0 27px;
  border-radius:8px;
  background:#f3f6f9;
  color:#8595a6;
  font-size:14px;
}

.zs-dashboard-kpi:hover .zs-dashboard-kpi-arrow{
  background:#eaf2f8;
  color:#326894;
}

.zs-dashboard-kpi > strong{
  display:block;
  margin:13px 0 0;
  color:#1d3448;
  font-size:34px;
  font-weight:760;
  line-height:1;
  letter-spacing:-.045em;
}

.zs-dashboard-kpi > small{
  display:block;
  margin-top:auto;
  padding-top:9px;
  color:#9aa5b1;
  font-size:10px;
  line-height:1.35;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.zs-dashboard-kpi-danger > strong{color:#9e4141}
.zs-dashboard-kpi-warning > strong{color:#9a6a24}
.zs-dashboard-kpi-success > strong{color:#34785f}
.zs-dashboard-kpi-primary > strong{color:#2f6799}


/* Dashboard rows */
.zs-dashboard-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:12px;
  min-height:48px;
  padding:9px 1px;
  border-bottom:1px solid #edf0f4;
  color:#455669;
  font-size:11px;
}

.zs-dashboard-row:last-child{border-bottom:0}
.zs-dashboard-row > div:first-child > strong{color:#243a4e}


/* Dashboard help */
.zs-dashboard-help{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:15px;
  padding:9px 12px;
  border:1px solid #e0e9f1;
  border-radius:9px;
  background:#f7fafc;
  font-size:10px;
}

.zs-dashboard-help strong{color:#38688f}
.zs-dashboard-help span{color:#7c8998}


/* Detail summary */
.zs-detail-summary{
  display:flex;
  align-items:center;
  gap:15px;
  margin-bottom:12px;
  padding:15px 17px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#fff;
}

.zs-detail-summary > div:first-child{min-width:120px}
.zs-detail-summary span{display:block;color:#7c8998;font-size:10px}
.zs-detail-summary strong{display:block;margin-top:4px;color:#244765;font-size:28px}

.zs-detail-summary-copy{
  padding-left:15px;
  border-left:1px solid #e6ebf0;
  color:#7c8998;
  font-size:11px;
}

.zs-detail-filter{
  display:flex;
  align-items:flex-end;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:14px;
}

.zs-detail-filter .field{min-width:220px}

.zs-mini-tag{
  display:inline-block;
  margin:2px;
  padding:3px 6px;
  border:1px solid #dee6ed;
  border-radius:99px;
  background:#fafcfd;
  color:#66798c;
  font-size:9px;
  white-space:nowrap;
}

.zs-similarity-note{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-bottom:12px;
  padding:10px 12px;
  border:1px solid #e1e8ef;
  border-radius:9px;
  background:#f8fafc;
  font-size:10px;
}

.zs-similarity-note strong{flex:0 0 auto;color:#385f80}
.zs-similarity-note span{color:#778597}

.zs-score-danger{color:#b74646}
.zs-score-warning{color:#b27723}


/* ============================================================
   V2 COMPONENTS — Image Viewer
   ============================================================ */

.zs-image-viewer{
  position:fixed;
  inset:0;
  z-index:999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:35px;
  background:rgba(8,15,25,.80);
}

.zs-image-viewer.show{display:flex}

.zs-image-viewer img{
  max-width:min(1050px,92vw);
  max-height:90vh;
  border-radius:10px;
  background:#fff;
  box-shadow:0 24px 70px rgba(0,0,0,.35);
}

.zs-image-viewer button{
  position:absolute;
  top:20px;
  right:25px;
  width:40px;
  height:40px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:24px;
  cursor:pointer;
}


/* ============================================================
   V2 COMPONENTS — Pagination
   ============================================================ */

.zs-pagination{
  width:100%;
  min-height:50px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:14px;
  padding:8px 2px;
  background:transparent;
}

.zs-pagination-summary{
  display:flex;
  align-items:center;
  gap:10px;
  color:#8b97a5;
  font-size:10px;
  white-space:nowrap;
}

.zs-pagination-summary strong{color:#39546d;font-size:11px}
.zs-pagination-total{padding-left:10px;border-left:1px solid #e2e7ec}

.zs-pagination-pages{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:5px;
  min-width:0;
}

.zs-page-btn{
  width:34px;
  height:34px;
  min-width:34px;
  max-width:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0;
  padding:0;
  overflow:hidden;
  border:1px solid #dfe5eb;
  border-radius:8px;
  background:#fff;
  color:#536579;
  font-size:11px;
  font-weight:600;
  line-height:1;
  text-decoration:none;
  box-shadow:none;
  transition:border-color .15s ease,background .15s ease,color .15s ease;
}

a.zs-page-btn:hover{
  border-color:#9fbcd5;
  background:#f3f8fc;
  color:#245d97;
}

.zs-page-btn.active{
  border-color:#285f96;
  background:#285f96;
  color:#fff;
  font-weight:700;
}

.zs-page-btn.disabled{
  border-color:#ebeff3;
  background:#f8fafb;
  color:#c1c8d0;
  cursor:not-allowed;
}

.zs-page-arrow{
  font-family:Arial,sans-serif;
  font-size:21px;
  font-weight:400;
  line-height:1;
}

.zs-page-ellipsis{
  width:22px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#9ba6b2;
  font-size:13px;
}

.zs-pagination-simple{justify-content:flex-end}

.zs-page-text{
  min-height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 12px;
  border:1px solid #dfe5eb;
  border-radius:8px;
  background:#fff;
  color:#536579;
  font-size:11px;
  font-weight:600;
  text-decoration:none;
}

a.zs-page-text:hover{border-color:#9fbcd5;background:#f3f8fc;color:#245d97}
.zs-page-text.disabled{background:#f8fafb;color:#bcc5ce;cursor:not-allowed}

nav[role="navigation"] svg{
  width:16px;
  height:16px;
  max-width:16px;
  max-height:16px;
}

.zs-mobile-mask{display:none}


/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Desktop large → medium */
@media(max-width:1350px){
  .zs-dashboard-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:1280px){
  .zs-stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:1250px){
  .zs-dashboard-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:1100px){
  .split{grid-template-columns:1fr}
  .info-grid{grid-template-columns:1fr}
  .metrics{grid-template-columns:repeat(3,1fr)}
}

@media(min-width:801px) and (max-width:1100px){
  .zs-nav-parent-copy small{display:none}
  .zs-nav-item.zs-nav-child{font-size:13px}
  .zs-nav-parent-copy strong{font-size:13px}
}

/* Tablet */
@media(max-width:980px){
  .zs-app-shell{display:block}

  .zs-sidebar{
    position:fixed;
    left:0;
    top:0;
    width:260px;
    transform:translateX(-105%);
    transition:transform .2s ease;
    box-shadow:14px 0 35px rgba(0,0,0,.22);
  }

  .zs-sidebar.open{transform:translateX(0)}
  .zs-mobile-mask{position:fixed;inset:0;z-index:45;background:rgba(8,15,24,.40)}
  .zs-mobile-mask.show{display:block}
  .zs-mobile-menu{display:grid;place-items:center}

  .zs-content{padding:18px 16px 40px}
  .zs-topbar{min-height:62px;padding:9px 16px}
  .zs-context-tabs{top:62px;padding:5px 16px}
  .zs-two-column{grid-template-columns:1fr}
  .zs-module-grid{grid-template-columns:1fr}
}

@media(max-width:900px){
  .zs-pagination{align-items:flex-start;flex-direction:column}
  .zs-pagination-pages{width:100%;justify-content:flex-start;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin}
}

/* Mobile */
@media(max-width:800px){
  .metrics,.kpi-row{grid-template-columns:1fr 1fr}
  .form-grid{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}

  .login-shell{grid-template-columns:1fr}
  .login-brand-panel{display:none}
  .login-form-panel{min-height:100vh;padding:20px}

  .workflow-line{width:25px;margin:0 5px}
  .toolbar{align-items:stretch}
  .toolbar .field{flex:1 1 140px}

  .zs-nav-tree-root{padding:13px 12px 22px}
  .zs-nav-parent{min-height:47px}
  .zs-nav-parent-copy strong{font-size:14px}
  .zs-nav-parent-copy small{font-size:10.5px}
  .zs-nav-item.zs-nav-child{min-height:43px;font-size:14px;padding-top:10px;padding-bottom:10px}
}

@media(max-width:760px){
  .zs-dashboard-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .zs-dashboard-row{grid-template-columns:minmax(0,1fr) auto}
  .zs-dashboard-row > :nth-child(2){display:none}
  .zs-stat-grid{grid-template-columns:1fr}
}

@media(max-width:680px){
  .zs-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .zs-topbar-right .zs-date{display:none}
  .zs-quick-create{display:none}
  .zs-footer{display:block;padding:16px 16px 24px}
  .zs-footer span{display:block;margin-top:3px}
  .page-head{display:block}
  .page-head > .actions{margin-top:12px}
  .toolbar{align-items:stretch}
  .toolbar .field{flex:1 1 140px;min-width:0}
  .zs-detail-filter .field{min-width:0;flex:1 1 140px}
}

@media(max-width:650px){
  .zs-dashboard-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .zs-dashboard-kpi{min-height:112px;padding:13px}
  .zs-dashboard-kpi-head{font-size:10px}
  .zs-dashboard-kpi > strong{font-size:27px}
  .zs-dashboard-kpi > small{font-size:8px}
}

@media(max-width:600px){
  .zs-pagination{gap:8px;margin-top:10px;padding:6px 0}
  .zs-pagination-summary{width:100%;justify-content:space-between}
  .zs-page-btn{width:32px;height:32px;min-width:32px;max-width:32px}
  .zs-page-arrow{font-size:19px}
  .zs-pagination-pages{gap:4px}
}

@media(max-width:520px){
  .metrics,.kpi-row{grid-template-columns:1fr}
}

/* ===== Business overview stat cards (products index) ===== */

.biz-overview-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:10px;
    margin-bottom:16px;
}

.biz-overview-card{
    border:1px solid;
    border-radius:10px;
    padding:12px 16px;
}

.biz-overview-card-label{
    font-size:12px;
    font-weight:600;
}

.biz-overview-card-value{
    font-size:22px;
    font-weight:700;
    margin-top:2px;
}

.biz-overview-card-hint{
    font-size:11px;
    margin-top:2px;
}

.biz-overview-card.is-hot{background:#f0fdf4;border-color:#bbf7d0}
.biz-overview-card.is-hot .biz-overview-card-label{color:#166534}
.biz-overview-card.is-hot .biz-overview-card-value{color:#15803d}
.biz-overview-card.is-hot .biz-overview-card-hint{color:#4ade80}

.biz-overview-card.is-cold{background:#fef2f2;border-color:#fecaca}
.biz-overview-card.is-cold .biz-overview-card-label{color:#991b1b}
.biz-overview-card.is-cold .biz-overview-card-value{color:#dc2626}
.biz-overview-card.is-cold .biz-overview-card-hint{color:#f87171}

.biz-overview-card.is-new{background:#eff6ff;border-color:#bfdbfe}
.biz-overview-card.is-new .biz-overview-card-label{color:#1e40af}
.biz-overview-card.is-new .biz-overview-card-value{color:#2563eb}
.biz-overview-card.is-new .biz-overview-card-hint{color:#60a5fa}

.biz-overview-card.is-up{background:#fefce8;border-color:#fef08a}
.biz-overview-card.is-up .biz-overview-card-label{color:#854d0e}
.biz-overview-card.is-up .biz-overview-card-value{color:#ca8a04}
.biz-overview-card.is-up .biz-overview-card-hint{color:#facc15}

.biz-overview-card.is-down{background:#faf5ff;border-color:#e9d5ff}
.biz-overview-card.is-down .biz-overview-card-label{color:#6b21a8}
.biz-overview-card.is-down .biz-overview-card-value{color:#9333ea}
.biz-overview-card.is-down .biz-overview-card-hint{color:#c084fc}

/* ===== Product table inline helpers ===== */

.product-metric-hint{
    font-size:11px;
    color:#888;
    margin-top:2px;
}

.product-metric-hint.is-empty{
    color:#bbb;
}

.btn-ai-reviewed{
    background:#f0f5ff;
    color:#1d4e7f;
    border-color:#c5d9f0;
}

.btn-ai-pending{
    color:#999;
}

/* ===== Promo banner cards (customer insights, etc.) ===== */

.promo-banner{
    margin-bottom:16px;
    padding:15px 17px;
    border-radius:15px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}

.promo-banner.is-gradient{
    background:linear-gradient(135deg,#f8fafc,#eef6ff);
    border:1px solid #dce7f3;
}

.promo-banner.is-flat{
    background:#f8fafc;
    border:1px solid #e2e8f0;
}

.promo-banner-title{
    display:block;
    color:#0f172a;
    font-size:14px;
}

.promo-banner-sub{
    display:block;
    margin-top:4px;
    color:#64748b;
    font-size:11px;
}

.promo-banner-cta{
    text-decoration:none;
    color:#fff;
    background:#0f172a;
    padding:9px 12px;
    border-radius:10px;
    font-size:11px;
    font-weight:800;
    white-space:nowrap;
}

/* ===== Insight stat grid ===== */

.insight-stat-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
    gap:10px;
    margin-bottom:18px;
}

.insight-stat-grid .panel{
    padding:14px;
}

.insight-stat-grid .panel > strong{
    font-size:26px;
}

/* ===== Category / tag pill badges ===== */

.pill-badge{
    display:inline-block;
    padding:3px 6px;
    border:1px solid #e2e7ed;
    border-radius:99px;
    margin:2px;
    font-size:11px;
}

/* ===== Status text column ===== */

.status-text-col{
    min-width:165px;
}

.status-text-col > div{
    font-size:11px;
    line-height:1.8;
    color:#475569;
}

/* ===== Page container ===== */

.page-container{
    max-width:1500px;
    margin:0 auto;
    padding:24px;
}

.page-container--narrow{
    max-width:1450px;
}

.page-header-row{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:16px;
    flex-wrap:wrap;
    margin-bottom:22px;
}

.page-header-row h1{
    margin:0;
    font-size:28px;
}

.page-header-eyebrow{
    color:#64748b;
    font-size:13px;
    margin-bottom:5px;
}

.page-header-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

/* ===== Stat card grid ===== */

.stat-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:12px;
    margin-bottom:24px;
}

.stat-grid--sm{
    grid-template-columns:repeat(auto-fit,minmax(145px,1fr));
}

.stat-grid--md{
    grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}

.stat-grid--wide{
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}

.stat-card{
    background:#fff;
    border:1px solid #e2e8f0;
    border-radius:14px;
    padding:17px;
}

.stat-card-label{
    color:#64748b;
    font-size:12px;
}

.stat-card-value{
    font-size:28px;
    font-weight:800;
    margin-top:5px;
}

.stat-card--green{background:#ecfdf5}
.stat-card--green .stat-card-label,.stat-card--green .stat-card-value{color:#166534}

.stat-card--red{background:#fef2f2}
.stat-card--red .stat-card-label,.stat-card--red .stat-card-value{color:#991b1b}

.stat-card--blue{background:#eff6ff}
.stat-card--blue .stat-card-label,.stat-card--blue .stat-card-value{color:#1e40af}

.stat-card--purple{background:#f5f3ff}
.stat-card--purple .stat-card-label,.stat-card--purple .stat-card-value{color:#6d28d9}

.stat-card--orange{background:#fff7ed}
.stat-card--orange .stat-card-label,.stat-card--orange .stat-card-value{color:#9a3412}

.stat-card--neutral{background:#f8fafc}

/* ===== Buttons ===== */

.btn-dark{
    border:0;
    border-radius:9px;
    padding:10px 14px;
    background:#111827;
    color:#fff;
    cursor:pointer;
    font-weight:700;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
}

.btn-outline{
    border:1px solid #cbd5e1;
    border-radius:9px;
    padding:10px 13px;
    color:#334155;
    background:#fff;
    text-decoration:none;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
}

/* ===== Data card (table section) ===== */

.data-card{
    background:#fff;
    border:1px solid #e2e8f0;
    border-radius:15px;
    overflow:hidden;
    margin-bottom:24px;
}

.data-card-header{
    padding:17px 19px;
    border-bottom:1px solid #e2e8f0;
    font-size:18px;
    font-weight:800;
}

.data-card-header--flex{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    flex-wrap:wrap;
}

.data-card-header-sub{
    font-size:13px;
    color:#64748b;
    margin-top:5px;
    font-weight:400;
    line-height:1.7;
}

.data-card-scroll{
    overflow:auto;
}

.data-table-clean{
    width:100%;
    border-collapse:collapse;
}

.data-table-clean th{
    padding:11px;
    text-align:left;
}

.data-table-clean th:not(:first-child){
    text-align:center;
}

.data-table-clean thead tr{
    background:#f8fafc;
}

.data-table-clean tbody tr{
    border-top:1px solid #f1f5f9;
}

.data-table-clean td{
    padding:12px;
}

.data-table-clean td:not(:first-child){
    text-align:center;
}

.table-empty{
    padding:25px;
    text-align:center;
    color:#94a3b8;
}

/* ===== Info callout ===== */

.callout{
    padding:15px 17px;
    border-radius:13px;
    border:1px solid;
    margin-bottom:20px;
    line-height:1.75;
}

.callout-warning{
    background:#fffbeb;
    border-color:#fde68a;
    color:#92400e;
}

.callout-info{
    background:#eff6ff;
    border-color:#bfdbfe;
    color:#1e40af;
}

.callout-success{
    background:#ecfdf5;
    border-color:#a7f3d0;
    color:#065f46;
}

.callout-error{
    background:#fef2f2;
    border-color:#fecaca;
    color:#991b1b;
}

/* ===== Alert info variant ===== */

.alert-info{
    background:#eff6ff;
    border-color:#bfdbfe;
    color:#1e40af;
}

/* ===== Colored text helpers ===== */

.text-green{color:#166534;font-weight:700}
.text-red{color:#991b1b;font-weight:700}
.text-muted-sm{color:#64748b;font-size:13px}