/* ==========================================================================
   ImpactBRG / FSES HK — Component Library
   Uniqlo × TEDx: clean, minimal, high-contrast, purposeful
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. BUTTONS
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s1);
  padding: 12px 24px;
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: var(--font);
  letter-spacing: 0.01em;
  line-height: 1;
  border: 1.5px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--duration) var(--ease),
              border-color var(--duration) var(--ease),
              color var(--duration) var(--ease),
              opacity var(--duration) var(--ease);
  white-space: nowrap;
  user-select: none;
}

.btn:hover { text-decoration: none; }
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary — forest green fill */
.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}
.btn-primary:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: var(--white);
}

/* Accent — TEDx red */
.btn-accent {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}
.btn-accent:hover {
  background: #c42318;
  border-color: #c42318;
  color: var(--white);
}

/* Outline — transparent fill, dark border */
.btn-outline {
  background: transparent;
  border-color: var(--grey-300);
  color: var(--grey-700);
}
.btn-outline:hover {
  border-color: var(--black);
  color: var(--black);
}

/* Outline white — for dark/green/accent sections */
.btn-outline-white {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--white);
}
.btn-outline-white:hover {
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
}

/* Ghost — no border */
.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--primary);
}
.btn-ghost:hover {
  background: var(--primary-light);
  color: var(--primary-dark);
}

/* Sizes */
.btn-xs  { padding: 6px 12px;  font-size: var(--text-xs); }
.btn-sm  { padding: 8px 16px;  font-size: var(--text-xs); }
.btn-lg  { padding: 16px 32px; font-size: var(--text-base); }
.btn-xl  { padding: 20px 40px; font-size: var(--text-lg); }

.btn-full { width: 100%; }
.btn-icon { padding: 10px; border-radius: var(--r-md); }
.btn-icon.btn-sm { padding: 7px; }

/* Loading state */
.btn-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.btn-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }


/* --------------------------------------------------------------------------
   2. CHIPS & TAGS
   -------------------------------------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: var(--text-xs);
  font-weight: 500;
  border-radius: var(--r-full);
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: 1.4;
}

.chip-default {
  background: var(--grey-100);
  color: var(--grey-700);
  border-color: var(--grey-200);
}

.chip-primary {
  background: var(--primary-light);
  color: var(--primary-dark);
  border-color: rgba(26, 122, 74, 0.2);
}

.chip-accent {
  background: var(--accent-light);
  color: var(--accent);
  border-color: rgba(230, 43, 30, 0.2);
}

.chip-dark {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}

/* Status chips */
.chip-status {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--r-full);
}

.chip-active    { background: #DCFCE7; color: #166534; border-color: #BBF7D0; }
.chip-inactive  { background: var(--grey-100); color: var(--grey-600); border-color: var(--grey-200); }
.chip-pending   { background: #FEF9C3; color: #854D0E; border-color: #FDE68A; }
.chip-approved  { background: #DCFCE7; color: #166534; border-color: #BBF7D0; }
.chip-rejected  { background: var(--accent-light); color: var(--accent); border-color: rgba(230,43,30,0.2); }
.chip-draft     { background: var(--grey-100); color: var(--grey-500); border-color: var(--grey-200); }
.chip-open      { background: #DBEAFE; color: #1E40AF; border-color: #BFDBFE; }
.chip-closed    { background: var(--grey-100); color: var(--grey-600); border-color: var(--grey-200); }


/* --------------------------------------------------------------------------
   3. SDG TAGS
   -------------------------------------------------------------------------- */

.sdg-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px 3px 7px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 99px;
  color: var(--white);
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.sdg-tag::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  flex-shrink: 0;
}

/* Soft tinted dot-pill — use with style="--sdg-c:#hex;" */
.sdg-dot-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 99px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  background: color-mix(in srgb, var(--sdg-c) 11%, white);
  color: color-mix(in srgb, var(--sdg-c) 80%, #000);
  border: 1px solid color-mix(in srgb, var(--sdg-c) 24%, transparent);
}
.sdg-dot-tag::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--sdg-c);
  flex-shrink: 0;
}

.sdg-1  { background: var(--sdg-1);  }
.sdg-2  { background: var(--sdg-2);  color: var(--black); }
.sdg-3  { background: var(--sdg-3);  }
.sdg-4  { background: var(--sdg-4);  }
.sdg-5  { background: var(--sdg-5);  }
.sdg-6  { background: var(--sdg-6);  }
.sdg-7  { background: var(--sdg-7);  color: var(--black); }
.sdg-8  { background: var(--sdg-8);  }
.sdg-9  { background: var(--sdg-9);  }
.sdg-10 { background: var(--sdg-10); }
.sdg-11 { background: var(--sdg-11); color: var(--black); }
.sdg-12 { background: var(--sdg-12); }
.sdg-13 { background: var(--sdg-13); }
.sdg-14 { background: var(--sdg-14); }
.sdg-15 { background: var(--sdg-15); }
.sdg-16 { background: var(--sdg-16); }
.sdg-17 { background: var(--sdg-17); }

.sdg-tag-lg {
  padding: 4px 12px;
  font-size: var(--text-xs);
}


/* --------------------------------------------------------------------------
   4. FORMS
   -------------------------------------------------------------------------- */

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--s3);
}

.form-group:last-child { margin-bottom: 0; }

.form-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--grey-700);
}

.form-label .required {
  color: var(--accent);
  margin-left: 2px;
}

.form-control {
  width: 100%;
  padding: 10px 14px;
  font-size: var(--text-sm);
  font-family: var(--font);
  color: var(--black);
  background: var(--white);
  border: 1.5px solid var(--grey-300);
  border-radius: var(--r-md);
  transition: border-color var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease);
  outline: none;
}

.form-control::placeholder {
  color: var(--grey-400);
}

.form-control:hover {
  border-color: var(--grey-500);
}

.form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(26, 122, 74, 0.12);
}

.form-control.is-error {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(230, 43, 30, 0.1);
}

.form-control:disabled {
  background: var(--grey-100);
  color: var(--grey-500);
  cursor: not-allowed;
}

textarea.form-control {
  min-height: 120px;
  resize: vertical;
}

select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
}

.form-hint {
  font-size: var(--text-xs);
  color: var(--grey-500);
}

.form-error {
  font-size: var(--text-xs);
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* SDG multi-select grid (auto-fill for flexible layouts) */
.sdg-select-grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: var(--s1);
  margin-top: var(--s1);
}

.sdg-select-item {
  position: relative;
}

.sdg-select-item input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.sdg-select-item label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--white);
  cursor: pointer;
  border: 2px solid transparent;
  opacity: 0.45;
  transition: opacity var(--duration) var(--ease),
              border-color var(--duration) var(--ease);
  text-align: center;
  user-select: none;
}

.sdg-select-item input[type="checkbox"]:checked + label {
  opacity: 1;
  border-color: rgba(255,255,255,0.7);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.15);
}

/* Search input with icon */
.input-search {
  position: relative;
}

.input-search .search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--grey-400);
  pointer-events: none;
}

.input-search .form-control {
  padding-left: 38px;
}


/* --------------------------------------------------------------------------
   5. CARDS
   -------------------------------------------------------------------------- */

.card {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.card-header {
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--grey-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
}

.card-header h3,
.card-header h4,
.card-header h5 {
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.card-body {
  padding: var(--s4);
}

.card-footer {
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--grey-200);
  background: var(--grey-50);
}

/* Stat card — metric display */
.stat-card {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--r-lg);
  padding: var(--s4);
  box-shadow: var(--shadow-sm);
}

.stat-card-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--grey-500);
  margin-bottom: var(--s1);
}

.stat-card-value {
  font-size: var(--text-4xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--black);
  line-height: 1;
  margin-bottom: 4px;
}

.stat-card-sub {
  font-size: var(--text-xs);
  color: var(--grey-500);
}

.stat-card-delta {
  font-size: var(--text-sm);
  font-weight: 500;
  margin-top: var(--s1);
}

.delta-up   { color: #16A34A; }
.delta-down { color: var(--accent); }

/* SE Card — social enterprise listing card */
.se-card {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow var(--duration) var(--ease),
              transform var(--duration) var(--ease);
  text-decoration: none;
  color: inherit;
}

.se-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
  text-decoration: none;
}

.se-card-header {
  padding: var(--s3) var(--s4);
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  border-bottom: 1px solid var(--grey-100);
}

.se-card-logo {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  background: var(--primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--primary);
  flex-shrink: 0;
  overflow: hidden;
}

.se-card-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.se-card-title {
  flex: 1;
  min-width: 0;
}

.se-card-title h3 {
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

.se-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.se-card-body {
  padding: var(--s3) var(--s4);
  flex: 1;
}

.se-card-desc {
  font-size: var(--text-sm);
  color: var(--grey-600);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: var(--s2);
}

.se-card-sdgs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.se-card-footer {
  padding: var(--s2) var(--s4);
  border-top: 1px solid var(--grey-100);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}


/* --------------------------------------------------------------------------
   6. TABLES
   -------------------------------------------------------------------------- */

.table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--grey-200);
  border-radius: var(--r-lg);
}

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

.table th {
  padding: 8px 14px;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--grey-500);
  background: var(--grey-50);
  border-bottom: 1px solid var(--grey-200);
  white-space: nowrap;
}

.table td {
  padding: 9px 14px;
  font-size: var(--text-sm);
  color: var(--grey-700);
  border-bottom: 1px solid var(--grey-100);
  vertical-align: middle;
  line-height: var(--lh-snug);
}

.table tr:last-child td {
  border-bottom: none;
}

.table tr:hover td {
  background: var(--grey-50);
}

.table-row-link {
  cursor: pointer;
}

.table-cell-name {
  font-weight: 600;
  color: var(--black);
}

.table-cell-muted {
  color: var(--grey-400);
  font-size: var(--text-xs);
}


/* --------------------------------------------------------------------------
   7. ALERTS
   -------------------------------------------------------------------------- */

.alert {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 10px var(--s3);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-size: var(--text-sm);
  line-height: 1.4;
}

.alert-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

.alert-content {
  flex: 1;
}

.alert-title {
  font-weight: 600;
  margin-bottom: 2px;
}

.alert-info {
  background: #EFF6FF;
  border-color: #BFDBFE;
  color: #1E40AF;
}

.alert-success {
  background: #F0FDF4;
  border-color: #BBF7D0;
  color: #166534;
}

.alert-warning {
  background: #FFFBEB;
  border-color: #FDE68A;
  color: #92400E;
}

.alert-error {
  background: var(--accent-light);
  border-color: rgba(230, 43, 30, 0.25);
  color: #B91C1C;
}


/* --------------------------------------------------------------------------
   8. MODALS
   -------------------------------------------------------------------------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration) var(--ease);
}

.modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.modal {
  background: var(--white);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-modal);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  transform: translateY(8px);
  transition: transform var(--duration) var(--ease);
}

.modal-overlay.open .modal {
  transform: translateY(0);
}

.modal-header {
  padding: var(--s4);
  border-bottom: 1px solid var(--grey-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-md);
  color: var(--grey-500);
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color var(--duration) var(--ease),
              color var(--duration) var(--ease);
}

.modal-close:hover {
  background: var(--grey-100);
  color: var(--black);
}

.modal-body {
  padding: var(--s4);
}

.modal-footer {
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--grey-200);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s2);
  background: var(--grey-50);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}


/* --------------------------------------------------------------------------
   9. FILTER BAR
   -------------------------------------------------------------------------- */

.filter-bar {
  background: var(--white);
  border-bottom: 1px solid var(--grey-200);
  padding: var(--s2) var(--s4);
  position: sticky;
  top: var(--topnav-h);
  z-index: 100;
}

.filter-bar-inner {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
}

/* Search input — grows to fill space, always leftmost */
.filter-bar .filter-search {
  position: relative;
  flex: 1 1 200px;
  min-width: 180px;
  max-width: 320px;
}

.filter-bar .filter-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--grey-400);
  pointer-events: none;
  font-size: 14px;
  line-height: 1;
}

.filter-bar .filter-search input {
  width: 100%;
  height: 34px;
  padding: 0 10px 0 32px;
  font-size: var(--text-sm);
  border: 1px solid var(--grey-200);
  border-radius: var(--r-md);
  background: var(--grey-50);
  color: var(--black);
  outline: none;
  transition: border-color var(--duration) var(--ease),
              background var(--duration) var(--ease);
}

.filter-bar .filter-search input:focus {
  border-color: var(--primary);
  background: var(--white);
}

/* Filter group — selects sit side-by-side with a thin divider before them */
.filter-group {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: var(--s2);
  border-left: 1px solid var(--grey-200);
  flex-wrap: wrap;
}

.filter-bar .form-control,
.filter-bar select {
  height: 34px;
  padding: 0 28px 0 10px;
  font-size: var(--text-sm);
  border: 1px solid var(--grey-200);
  border-radius: var(--r-md);
  background: var(--grey-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center;
  appearance: none;
  -webkit-appearance: none;
  color: var(--grey-700);
  outline: none;
  cursor: pointer;
  transition: border-color var(--duration) var(--ease);
  white-space: nowrap;
}

.filter-bar select:focus {
  border-color: var(--primary);
  background-color: var(--white);
}

/* Actions group — clear/apply on the right */
.filter-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.filter-count {
  font-size: var(--text-xs);
  color: var(--grey-400);
  white-space: nowrap;
  padding: 0 var(--s1);
}


/* --------------------------------------------------------------------------
   10. PAGINATION
   -------------------------------------------------------------------------- */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: var(--s6);
}

.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  font-weight: 500;
  border: 1.5px solid var(--grey-200);
  background: var(--white);
  color: var(--grey-700);
  cursor: pointer;
  transition: all var(--duration) var(--ease);
}

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

.page-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
  font-weight: 700;
}

.page-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.page-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--grey-400);
  font-size: var(--text-sm);
}


/* --------------------------------------------------------------------------
   11. SKELETON LOADING
   -------------------------------------------------------------------------- */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--grey-100) 25%,
    var(--grey-200) 50%,
    var(--grey-100) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: var(--r-md);
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-text {
  height: 14px;
  border-radius: var(--r-full);
  margin-bottom: 8px;
}

.skeleton-text.w-full  { width: 100%; }
.skeleton-text.w-3-4   { width: 75%; }
.skeleton-text.w-1-2   { width: 50%; }
.skeleton-text.w-1-3   { width: 33%; }
.skeleton-text.w-1-4   { width: 25%; }

.skeleton-title {
  height: 22px;
  border-radius: var(--r-full);
  margin-bottom: 12px;
}

.skeleton-avatar {
  border-radius: var(--r-md);
  flex-shrink: 0;
}

/* Skeleton SE card */
.se-card-skeleton {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--r-lg);
  padding: var(--s4);
  box-shadow: var(--shadow-sm);
}


/* --------------------------------------------------------------------------
   12. EMPTY STATE
   -------------------------------------------------------------------------- */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--s12) var(--s6);
}

.empty-state-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--grey-100);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s3);
  color: var(--grey-400);
}

.empty-state-title {
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--black);
  margin-bottom: var(--s1);
}

.empty-state-desc {
  font-size: var(--text-sm);
  color: var(--grey-500);
  max-width: 360px;
  margin-bottom: var(--s4);
}


/* --------------------------------------------------------------------------
   13. STAT BAR (hero impact strip)
   -------------------------------------------------------------------------- */

.stat-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin-top: var(--s8);
}

.stat-bar-item {
  padding: var(--s4) var(--s3);
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.stat-bar-item:last-child {
  border-right: none;
}

.stat-bar-value {
  font-size: var(--text-4xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--white);
  line-height: 1;
  margin-bottom: 4px;
}

.stat-bar-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 768px) {
  .stat-bar {
    grid-template-columns: repeat(2, 1fr);
  }
  .stat-bar-item:nth-child(2) {
    border-right: none;
  }
}

@media (max-width: 480px) {
  .stat-bar {
    grid-template-columns: 1fr;
  }
  .stat-bar-item {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  }
}


/* --------------------------------------------------------------------------
   14. PROCESS STEPS
   -------------------------------------------------------------------------- */

.step-number {
  display: block;
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--grey-200);
  line-height: 1;
  margin-bottom: var(--s2);
}

.step-title {
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--s2);
  color: var(--black);
}

.step-desc {
  font-size: var(--text-sm);
  color: var(--grey-600);
  line-height: 1.6;
}


/* --------------------------------------------------------------------------
   15. TIMELINE STEPPER
   -------------------------------------------------------------------------- */

.stepper {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

.stepper-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.stepper-item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 20px;
  left: 50%;
  right: -50%;
  height: 2px;
  background: var(--grey-200);
  z-index: 0;
}

.stepper-item.done:not(:last-child)::after {
  background: var(--primary);
}

.stepper-dot {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--grey-200);
  border: 3px solid var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--grey-500);
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 2px var(--grey-200);
  margin-bottom: var(--s2);
}

.stepper-item.done .stepper-dot {
  background: var(--primary);
  color: var(--white);
  box-shadow: 0 0 0 2px var(--primary-light);
}

.stepper-item.active .stepper-dot {
  background: var(--white);
  color: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(26, 122, 74, 0.2);
}

.stepper-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--grey-700);
  text-align: center;
  margin-bottom: 4px;
}

.stepper-date {
  font-size: 0.75rem;
  color: var(--grey-400);
  text-align: center;
}

@media (max-width: 640px) {
  .stepper {
    flex-direction: column;
    gap: var(--s3);
  }
  .stepper-item:not(:last-child)::after {
    display: none;
  }
  .stepper-item {
    flex-direction: row;
    align-items: center;
    gap: var(--s2);
    width: 100%;
  }
  .stepper-dot {
    flex-shrink: 0;
    margin-bottom: 0;
  }
  .stepper-label,
  .stepper-date {
    text-align: left;
  }
}


/* --------------------------------------------------------------------------
   16. AWARD CATEGORY CARDS
   -------------------------------------------------------------------------- */

.award-card {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--r-lg);
  padding: var(--s5);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration) var(--ease);
}

.award-card:hover {
  box-shadow: var(--shadow-hover);
}

.award-card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: var(--s3);
}

.award-card h3 {
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--s1);
}

.award-card p {
  font-size: var(--text-sm);
  color: var(--grey-600);
  line-height: 1.6;
}


/* --------------------------------------------------------------------------
   17. CRITERIA CARDS
   -------------------------------------------------------------------------- */

.criteria-card {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--r-lg);
  padding: var(--s4);
  box-shadow: var(--shadow-sm);
  border-top: 3px solid var(--primary);
}

.criteria-card h4 {
  font-size: var(--text-base);
  font-weight: 700;
  margin-bottom: var(--s1);
}

.criteria-card p {
  font-size: var(--text-sm);
  color: var(--grey-600);
  line-height: 1.5;
}


/* --------------------------------------------------------------------------
   18. LOGIN SPLIT LAYOUT
   -------------------------------------------------------------------------- */

.login-layout {
  display: flex;
  min-height: 100vh;
}

.login-left {
  width: 50%;
  background: var(--primary-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--s8);
  color: var(--white);
}

.login-right {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s8);
  background: var(--white);
}

.login-form-box {
  width: 100%;
  max-width: 400px;
}

.login-brand {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s8);
}

.login-brand-logo {
  font-size: 2rem;
  color: var(--primary);
}

.login-brand-name {
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.login-role-list {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  width: 100%;
}

.login-role-item {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.login-role-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
  padding-top: 2px;
}

.login-role-content {
  flex: 1;
  min-width: 0;
}

.login-role-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--white);
  margin-bottom: 3px;
  line-height: 1.3;
}

.login-role-desc {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.5;
}

@media (max-width: 768px) {
  .login-layout {
    flex-direction: column;
  }
  .login-left,
  .login-right {
    width: 100%;
    padding: var(--s6) var(--s4);
  }
  .login-left {
    min-height: 280px;
  }
}


/* --------------------------------------------------------------------------
   19. STATUS CHIPS — .status-{status} pattern used by statusChip() JS helper
   -------------------------------------------------------------------------- */

.status-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.5;
  text-transform: capitalize;
}

.status-pending      { background: #FEF3C7; color: #92400E; }
.status-accepted     { background: #D1FAE5; color: #065F46; }
.status-active       { background: var(--primary-light); color: var(--primary-dark); }
.status-declined     { background: #FEE2E2; color: #991B1B; }
.status-rejected     { background: #FEE2E2; color: #991B1B; }
.status-completed    { background: var(--grey-100); color: var(--grey-600); }
.status-submitted    { background: #EDE9FE; color: #5B21B6; }
.status-under_review { background: #FEF3C7; color: #92400E; }
.status-under-review { background: #FEF3C7; color: #92400E; }
.status-awarded      { background: #FFFBEB; color: #78350F; border: 1px solid #FDE68A; }
.status-draft        { background: var(--grey-100); color: var(--grey-500); }
.status-shortlisted  { background: #EDE9FE; color: #5B21B6; }
.status-interviewed  { background: #DBEAFE; color: #1E40AF; }
.status-hired        { background: #D1FAE5; color: #065F46; }
.status-inactive     { background: var(--grey-100); color: var(--grey-400); }
.status-open         { background: #DBEAFE; color: #1E40AF; }
.status-closed       { background: var(--grey-100); color: var(--grey-500); }


/* --------------------------------------------------------------------------
   20. PROGRESS BAR
   -------------------------------------------------------------------------- */

.progress {
  height: 6px;
  background: var(--grey-100);
  border-radius: var(--r-full);
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: var(--primary);
  border-radius: var(--r-full);
  transition: width 600ms var(--ease);
  min-width: 0;
}

.progress-bar.red    { background: var(--accent); }
.progress-bar.yellow { background: #F59E0B; }
.progress-bar.grey   { background: var(--grey-300); }

.progress-lg { height: 10px; }
.progress-sm { height: 4px; }

.progress-labeled {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.progress-labeled .progress { flex: 1; }

.progress-pct {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--grey-600);
  min-width: 32px;
  text-align: right;
}


/* --------------------------------------------------------------------------
   21. SCORE BADGE — AI match score 0–100
   -------------------------------------------------------------------------- */

.score-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-size: 0.8125rem;
  font-weight: 700;
  min-width: 48px;
  letter-spacing: 0.01em;
}

/* ≥75 green */
.score-badge.score-high {
  background: var(--primary-light);
  color: var(--primary-dark);
}

/* 50–74 amber */
.score-badge.score-mid {
  background: #FEF3C7;
  color: #92400E;
}

/* <50 grey */
.score-badge.score-low {
  background: var(--grey-100);
  color: var(--grey-500);
}

/* Circular variant */
.score-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 800;
  flex-shrink: 0;
}

.score-circle.score-high {
  background: var(--primary-light);
  color: var(--primary-dark);
  border: 2px solid var(--primary);
}

.score-circle.score-mid {
  background: #FEF3C7;
  color: #92400E;
  border: 2px solid #F59E0B;
}

.score-circle.score-low {
  background: var(--grey-100);
  color: var(--grey-500);
  border: 2px solid var(--grey-300);
}


/* --------------------------------------------------------------------------
   22. SDG MULTI-SELECT GRID (.sdg-grid) — 6-col goal button grid
   -------------------------------------------------------------------------- */

/* Primary use: 6-col SDG goal button grid (ses/new, ses/detail, corporates/detail) */
.sdg-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

@media (max-width: 640px) { .sdg-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 400px) { .sdg-grid { grid-template-columns: repeat(3, 1fr); } }

/* Alternate 4-col layout for design-system SDG option tiles */
.sdg-select-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

@media (max-width: 640px) { .sdg-select-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 400px) { .sdg-select-grid { grid-template-columns: repeat(2, 1fr); } }

.sdg-option {
  position: relative;
}

.sdg-option input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.sdg-option-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 4px;
  border-radius: var(--r-md);
  background: var(--grey-100);
  border: 2px solid transparent;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--grey-600);
  text-align: center;
  transition:
    background var(--duration) var(--ease),
    border-color var(--duration) var(--ease),
    color var(--duration) var(--ease),
    transform var(--duration) var(--ease);
  min-height: 56px;
  line-height: 1.3;
  user-select: none;
}

.sdg-option-label:hover {
  background: var(--grey-200);
  border-color: var(--grey-300);
}

.sdg-option-num {
  font-size: 0.75rem;
  font-weight: 800;
  display: block;
  margin-bottom: 2px;
}

/* Checked: show each SDG's UN color */
.sdg-option input:checked + .sdg-option-label {
  color: var(--white);
  transform: scale(1.04);
}

.sdg-option[data-sdg="1"]  input:checked + .sdg-option-label { background: var(--sdg-1); }
.sdg-option[data-sdg="2"]  input:checked + .sdg-option-label { background: var(--sdg-2); color: var(--black); }
.sdg-option[data-sdg="3"]  input:checked + .sdg-option-label { background: var(--sdg-3); }
.sdg-option[data-sdg="4"]  input:checked + .sdg-option-label { background: var(--sdg-4); }
.sdg-option[data-sdg="5"]  input:checked + .sdg-option-label { background: var(--sdg-5); }
.sdg-option[data-sdg="6"]  input:checked + .sdg-option-label { background: var(--sdg-6); color: var(--black); }
.sdg-option[data-sdg="7"]  input:checked + .sdg-option-label { background: var(--sdg-7); color: var(--black); }
.sdg-option[data-sdg="8"]  input:checked + .sdg-option-label { background: var(--sdg-8); }
.sdg-option[data-sdg="9"]  input:checked + .sdg-option-label { background: var(--sdg-9); }
.sdg-option[data-sdg="10"] input:checked + .sdg-option-label { background: var(--sdg-10); }
.sdg-option[data-sdg="11"] input:checked + .sdg-option-label { background: var(--sdg-11); color: var(--black); }
.sdg-option[data-sdg="12"] input:checked + .sdg-option-label { background: var(--sdg-12); }
.sdg-option[data-sdg="13"] input:checked + .sdg-option-label { background: var(--sdg-13); }
.sdg-option[data-sdg="14"] input:checked + .sdg-option-label { background: var(--sdg-14); }
.sdg-option[data-sdg="15"] input:checked + .sdg-option-label { background: var(--sdg-15); color: var(--black); }
.sdg-option[data-sdg="16"] input:checked + .sdg-option-label { background: var(--sdg-16); }
.sdg-option[data-sdg="17"] input:checked + .sdg-option-label { background: var(--sdg-17); }


/* --------------------------------------------------------------------------
   23. FORM ALIASES — .form-input / .form-textarea / .form-select
        map to same rules as .form-control
   -------------------------------------------------------------------------- */

.form-input,
.form-textarea,
.form-select {
  display: block;
  width: 100%;
  padding: 10px 14px;
  font-size: var(--text-sm);
  font-family: var(--font);
  color: var(--black);
  background: var(--white);
  border: 1.5px solid var(--grey-300);
  border-radius: var(--r-md);
  transition:
    border-color var(--duration) var(--ease),
    box-shadow   var(--duration) var(--ease);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--grey-400);
}

.form-input:hover,
.form-textarea:hover,
.form-select:hover { border-color: var(--grey-500); }

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(26, 122, 74, 0.12);
}

.form-input.is-error,
.form-textarea.is-error,
.form-select.is-error {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(230, 43, 30, 0.10);
}

.form-input:disabled,
.form-textarea:disabled,
.form-select:disabled {
  background: var(--grey-100);
  color: var(--grey-500);
  cursor: not-allowed;
}

.form-textarea { min-height: 120px; resize: vertical; }

.form-select {
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}


/* --------------------------------------------------------------------------
   24. TABLE ALIAS — .table-wrap maps to same rules as .table-wrapper
   -------------------------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--grey-200);
  border-radius: var(--r-lg);
  background: var(--white);
}

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

.table-wrap th {
  padding: 8px 14px;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--grey-500);
  background: var(--grey-50);
  border-bottom: 1px solid var(--grey-200);
  white-space: nowrap;
}

.table-wrap td {
  padding: 9px 14px;
  font-size: var(--text-sm);
  color: var(--grey-700);
  border-bottom: 1px solid var(--grey-100);
  vertical-align: middle;
  line-height: var(--lh-snug);
}

.table-wrap tr:last-child td { border-bottom: none; }
.table-wrap tr:hover td { background: var(--grey-50); }


/* --------------------------------------------------------------------------
   25. TABS
   -------------------------------------------------------------------------- */

.tabs {
  display: flex;
  border-bottom: 1px solid var(--grey-200);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  gap: 0;
  margin-bottom: var(--s4);
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 20px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--grey-500);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition:
    color var(--duration) var(--ease),
    border-color var(--duration) var(--ease);
  text-decoration: none;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  border-radius: 0;
  margin-bottom: -1px;
}

.tab:hover { color: var(--black); text-decoration: none; }

.tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 600;
}

.tab-count {
  background: var(--grey-200);
  color: var(--grey-600);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--r-full);
}

.tab.active .tab-count {
  background: var(--primary-light);
  color: var(--primary-dark);
}

/* .tab-btn is an alias for .tab used in legacy panel pages */
.tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 20px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--grey-500);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease);
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  border-radius: 0;
  margin-bottom: -1px;
}
.tab-btn:hover { color: var(--black); }
.tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }

.tab-panel         { display: none; }
.tab-panel.active  { display: block; }


/* --------------------------------------------------------------------------
   26. DROPDOWN MENU
   -------------------------------------------------------------------------- */

.dropdown { position: relative; display: inline-block; }

.dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 180px;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-hover);
  z-index: 500;
  padding: 4px;
  animation: dropdown-in var(--duration) var(--ease);
}

.dropdown-menu.open { display: block; }
.dropdown-menu.align-left { right: auto; left: 0; }

@keyframes dropdown-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 12px;
  font-size: var(--text-sm);
  color: var(--grey-700);
  border-radius: var(--r-md);
  cursor: pointer;
  transition:
    background var(--duration) var(--ease),
    color var(--duration) var(--ease);
  border: none;
  background: none;
  text-align: left;
  text-decoration: none;
}

.dropdown-item:hover { background: var(--grey-50); color: var(--black); text-decoration: none; }
.dropdown-item.danger { color: var(--accent); }
.dropdown-item.danger:hover { background: var(--accent-light); }

.dropdown-divider { height: 1px; background: var(--grey-100); margin: 4px 0; }

.dropdown-label {
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--grey-400);
}


/* --------------------------------------------------------------------------
   27. NOTIFICATION TOAST
   -------------------------------------------------------------------------- */

.toast-container {
  position: fixed;
  bottom: var(--s4);
  right: var(--s4);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  background: var(--grey-900);
  color: var(--white);
  border-radius: var(--r-lg);
  font-size: var(--text-sm);
  box-shadow: var(--shadow-modal);
  pointer-events: all;
  max-width: 360px;
  animation: toast-in 0.25s var(--ease);
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.toast.toast-success { background: var(--primary-dark); }
.toast.toast-error   { background: #991B1B; }
.toast.toast-info    { background: #1E40AF; }

.toast-body  { flex: 1; }
.toast-title { font-weight: 700; margin-bottom: 1px; }
.toast-msg   { opacity: 0.8; font-size: 0.8125rem; }

.toast-close {
  opacity: 0.5;
  cursor: pointer;
  font-size: 1.125rem;
  line-height: 1;
  transition: opacity var(--duration) var(--ease);
  flex-shrink: 0;
}

.toast-close:hover { opacity: 1; }


/* --------------------------------------------------------------------------
   28. TOOLTIP
   -------------------------------------------------------------------------- */

[data-tooltip] { position: relative; }

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--grey-900);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: var(--r-md);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration) var(--ease);
  z-index: 9999;
  font-family: var(--font);
}

[data-tooltip]:hover::after { opacity: 1; }


/* --------------------------------------------------------------------------
   29. STATS GRID ROW (dashboard)
   -------------------------------------------------------------------------- */

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s3);
  margin-bottom: var(--s4);
}

@media (max-width: 1024px) { .stats-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .stats-row { grid-template-columns: 1fr; } }


/* --------------------------------------------------------------------------
   DESIGN SYSTEM PAGE (was 19, now 30)
   -------------------------------------------------------------------------- */

/* Colour swatches */
.swatch-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.swatch-block {
  width: 72px;
  height: 72px;
  border-radius: var(--r-md);
  border: 1px solid rgba(0,0,0,0.08);
}

.swatch-label {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--grey-500);
  text-align: center;
}

/* SDG palette tiles */
.sdg-palette {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: var(--s1);
}

.sdg-tile {
  padding: var(--s2);
  border-radius: var(--r-md);
  color: var(--white);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sdg-tile-num {
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1;
}

.sdg-tile-name {
  font-size: 0.625rem;
  line-height: 1.3;
  opacity: 0.85;
}

/* Spacing demo */
.spacing-demo {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.spacing-item {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.spacing-block {
  background: var(--primary-light);
  border: 1px solid var(--primary);
  flex-shrink: 0;
  height: 16px;
}

.spacing-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--grey-600);
  white-space: nowrap;
  font-family: monospace;
}

/* Shadow demo */
.shadow-demo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
}

.shadow-card-demo {
  width: 120px;
  height: 80px;
  background: var(--white);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  color: var(--grey-500);
  font-weight: 500;
}

/* Grid demo */
.grid-demo {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 4px;
}

.grid-demo-col {
  background: var(--primary-light);
  border: 1px solid rgba(26, 122, 74, 0.2);
  border-radius: 2px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--primary);
}

/* Button table */
.btn-demo-table {
  border-collapse: collapse;
  width: 100%;
}

.btn-demo-table th,
.btn-demo-table td {
  padding: var(--s2) var(--s3);
  border: 1px solid var(--grey-200);
  font-size: var(--text-sm);
}

.btn-demo-table th {
  background: var(--grey-50);
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--grey-500);
}

/* Design page section groupings */
.ds-section {
  margin-bottom: var(--s8);
}

.ds-section-title {
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--grey-400);
  margin-bottom: var(--s3);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--grey-200);
}

.ds-example {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--r-lg);
  padding: var(--s4);
  margin-bottom: var(--s3);
}

.ds-example.bg-checker {
  background-image: repeating-conic-gradient(var(--grey-100) 0% 25%, var(--white) 0% 50%);
  background-size: 20px 20px;
}

/* ==========================================================================
   Panel Dashboard Components
   ========================================================================== */

/* Sidebar nav section label (used in fses panel HTML as .nav-section-label) */
.nav-section-label {
  padding: var(--s3) var(--s2) var(--s1);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.35);
  list-style: none;
  margin: 0 var(--s1);
}

/* Stat cards grid */
.stat-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s3);
  margin-bottom: var(--s4);
}
@media (max-width: 1100px) { .stat-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .stat-cards { grid-template-columns: 1fr 1fr; } }

.stat-card.primary {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
}
.stat-card.primary .stat-card-label,
.stat-card.primary .stat-card-sub  { color: rgba(255,255,255,.6); }
.stat-card.primary .stat-card-value { color: var(--white); }

/* Section card (white container with header/body) */
.section-card {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: var(--s4);
}
.section-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--grey-100);
}
.section-card-title {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--grey-600);
}
.section-card-body { padding: var(--s4); }

/* Quick-access cards */
.quick-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: var(--s3);
}
.quick-card {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3);
  border: 1px solid var(--grey-200);
  border-radius: var(--r-md);
  background: var(--grey-50);
  text-decoration: none;
  color: inherit;
  transition: background var(--duration) var(--ease),
              border-color var(--duration) var(--ease);
}
.quick-card:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  text-decoration: none;
}
.quick-card-icon { font-size: 1.25rem; flex-shrink: 0; }
.quick-card-text { display: flex; flex-direction: column; gap: 2px; }
.quick-card-text strong { font-size: var(--text-sm); font-weight: 600; color: var(--black); }
.quick-card-text span   { font-size: var(--text-xs); color: var(--grey-500); }

/* System health mini-stats */
.health-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s3);
}
.health-item {
  text-align: center;
  padding: var(--s3);
  border: 1px solid var(--grey-200);
  border-radius: var(--r-md);
  background: var(--grey-50);
}
.health-item-num {
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--primary);
  margin-bottom: 4px;
  line-height: 1;
}
.health-item-label { font-size: var(--text-xs); color: var(--grey-500); }

/* Panel header user bar (injected by auth.js) */
.panel-user-bar {
  display: flex;
  align-items: center;
  gap: var(--s2);
}
.panel-user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--white);
  font-size: var(--text-xs);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-transform: uppercase;
}
.panel-user-email {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--grey-700);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.panel-settings-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-md);
  color: var(--grey-500);
  text-decoration: none;
  transition: background var(--duration), color var(--duration);
  flex-shrink: 0;
}
.panel-settings-btn:hover {
  background: var(--grey-100);
  color: var(--primary);
  text-decoration: none;
}

/* ==========================================================================
   Data Table
   ========================================================================== */
.data-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--grey-200);
  border-radius: var(--r-lg);
  background: var(--white);
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.data-table th {
  padding: 10px 14px;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--grey-500);
  background: var(--grey-50);
  border-bottom: 1px solid var(--grey-200);
  white-space: nowrap;
}
.data-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--grey-100);
  color: var(--grey-700);
  vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--grey-50); }
.data-table .td-name { font-weight: 600; color: var(--black); }
.data-table .td-actions { white-space: nowrap; }

/* ==========================================================================
   Chip color aliases (used in JS: chip-yellow, chip-green, chip-red, etc.)
   ========================================================================== */
.chip-yellow  { background: #FEF9C3; color: #854D0E; border-color: #FDE68A; }
.chip-green   { background: #DCFCE7; color: #166534; border-color: #BBF7D0; }
.chip-red     { background: #FEE2E2; color: #991B1B; border-color: #FECACA; }
.chip-blue    { background: #DBEAFE; color: #1E40AF; border-color: #BFDBFE; }
.chip-grey    { background: var(--grey-100); color: var(--grey-600); border-color: var(--grey-200); }
.chip-orange  { background: #FED7AA; color: #9A3412; border-color: #FDBA74; }

/* ==========================================================================
   Score bar
   ========================================================================== */
.score-bar-wrap {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-width: 120px;
}
.score-bar {
  flex: 1;
  height: 6px;
  background: var(--grey-200);
  border-radius: var(--r-full);
  overflow: hidden;
}
.score-bar-fill {
  height: 100%;
  border-radius: var(--r-full);
  transition: width 0.4s var(--ease);
}
.score-bar-fill.high   { background: var(--primary); }
.score-bar-fill.medium { background: #F59E0B; }
.score-bar-fill.low    { background: var(--grey-400); }

/* Score badge — short-form class aliases matching JS output */
.score-badge.high   { background: var(--primary-light); color: var(--primary-dark); }
.score-badge.medium { background: #FEF3C7; color: #92400E; }
.score-badge.low    { background: var(--grey-100); color: var(--grey-500); }

/* ==========================================================================
   Loading / empty / error states
   ========================================================================== */
.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s6);
}
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--grey-200);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.error-state {
  padding: var(--s4);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--grey-500);
}

/* ==========================================================================
   31. PAGE-LEVEL PANEL COMPONENTS (extracted from inline styles)
   ========================================================================== */

/* ── Role badges (admin/user management) ── */
.role-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 99px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.role-fses      { background: rgba(17,94,53,.12);  color: #115E35; }
.role-se        { background: rgba(30,158,88,.12); color: #1E9E58; }
.role-corporate { background: rgba(44,92,84,.12);  color: #2C5C54; }

/* ── Filter pill tabs (role filter in admin, status tabs) ── */
.filter-tabs {
  display: flex;
  gap: var(--s1);
  flex-wrap: wrap;
}
.filter-tab {
  padding: 6px 16px;
  border-radius: 99px;
  border: 1.5px solid var(--grey-200);
  background: var(--white);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  color: var(--grey-600);
  transition: all 0.15s;
}
.filter-tab:hover  { border-color: var(--primary); color: var(--primary); }
.filter-tab.active { background: var(--primary); border-color: var(--primary); color: var(--white); }

/* ── Small table action buttons ── */
.action-btn {
  padding: 4px 10px;
  border-radius: var(--r-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: all 0.15s;
}
.action-edit   { background: var(--grey-100); color: var(--grey-700); border-color: var(--grey-200); }
.action-edit:hover { background: var(--grey-200); }
.action-delete { background: rgba(230,43,30,.07); color: var(--accent); border-color: rgba(230,43,30,.2); }
.action-delete:hover { background: rgba(230,43,30,.14); }

/* ── Page-level tab bar (intra-page navigation, e.g. Users / Architecture) ── */
.page-tab {
  padding: 12px 20px;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--grey-500);
  cursor: pointer;
  transition: all 0.15s;
  margin-bottom: -1px;
}
.page-tab:hover      { color: var(--primary); }
.page-tab.active     { color: var(--primary); border-bottom-color: var(--primary); }

/* Tab container strip (white bar + border) */
.page-tabs-bar {
  border-bottom: 1px solid var(--grey-200);
  background: var(--white);
  padding: 0 var(--s5);
  display: flex;
  gap: 0;
}

/* ── Settings page grid ── */
.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s4);
}
@media (max-width: 800px) { .settings-grid { grid-template-columns: 1fr; } }

.settings-card {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--r-lg);
  padding: var(--s5);
  box-shadow: var(--shadow-sm);
}
.settings-card-title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--black);
  margin-bottom: 4px;
}
.settings-card-desc {
  font-size: var(--text-sm);
  color: var(--grey-500);
  margin-bottom: var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--grey-100);
}

/* Profile avatar circle */
.profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--white);
  font-size: var(--text-2xl);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s4);
}

/* ── Overview page ── */
.kpi-table td:first-child { font-weight: 600; color: var(--black); }

/* District bar chart */
.district-bar       { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.district-bar-label { font-size: var(--text-xs); color: var(--grey-600); width: 120px; flex-shrink: 0; }
.district-bar-track { flex: 1; height: 8px; background: var(--grey-200); border-radius: var(--r-full); overflow: hidden; }
.district-bar-fill  { height: 100%; background: var(--primary); border-radius: var(--r-full); }
.district-bar-count { font-size: var(--text-xs); font-weight: 700; color: var(--grey-600); width: 28px; text-align: right; }

/* Category grid (overview page) */
.cat-grid      { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s2); }
.cat-cell      { background: var(--grey-50); border: 1px solid var(--grey-200); border-radius: var(--r-md); padding: var(--s2); text-align: center; }
.cat-cell-num  { font-size: var(--text-2xl); font-weight: 700; color: var(--primary); }
.cat-cell-label{ font-size: var(--text-xs); color: var(--grey-500); margin-top: 2px; }

/* ── Award pages ── */
.cycle-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--gutter); }
@media (max-width: 900px) { .cycle-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px) { .cycle-grid { grid-template-columns: 1fr; } }

.cycle-card {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--r-lg);
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.cycle-card:hover         { border-color: var(--primary); box-shadow: var(--shadow-hover); }
.cycle-card-year          { font-size: var(--text-4xl); font-weight: 700; letter-spacing: -0.03em; color: var(--black); line-height: 1; }
.cycle-card-name          { font-size: var(--text-base); font-weight: 600; color: var(--grey-700); }
.cycle-card-meta          { font-size: var(--text-xs); color: var(--grey-500); }
.cycle-card-apps          { font-size: var(--text-sm); font-weight: 600; color: var(--primary); }
.cycle-card-actions       { display: flex; gap: 8px; margin-top: auto; padding-top: var(--s2); border-top: 1px solid var(--grey-100); }

/* Award report chart container */
.chart-container { position: relative; height: 320px; background: var(--white); border: 1px solid var(--grey-200); border-radius: var(--r-lg); padding: var(--s3); }
.chart-canvas    { width: 100%; height: 100%; }

/* Award report category card */
.cat-card         { background: var(--white); border: 1px solid var(--grey-200); border-radius: var(--r-lg); padding: var(--s4); text-align: center; }
.cat-card-num     { font-size: var(--text-4xl); font-weight: 700; letter-spacing: -0.03em; color: var(--primary); }
.cat-card-label   { font-size: var(--text-sm); font-weight: 600; color: var(--grey-600); margin-top: 4px; }
.cat-card-awarded { font-size: var(--text-xs); color: var(--grey-400); margin-top: 2px; }
.by-year-table td:first-child { font-weight: 700; }

/* Awarded SE row */
.awarded-se-row { display: flex; align-items: center; justify-content: space-between; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--grey-100); }
.awarded-se-row:last-child { border-bottom: none; }

/* Review page layout */
.review-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--s5);
  align-items: start;
}
.review-sidebar {
  position: sticky;
  top: calc(var(--s8) + 40px);
}
@media (max-width: 900px) {
  .review-layout  { grid-template-columns: 1fr; }
  .review-sidebar { position: static; }
}

/* ── Matching engine — step indicator ── */
.step-indicator { display: flex; align-items: center; gap: 0; margin-bottom: var(--s5); }
.step-dot       { display: flex; align-items: center; gap: var(--s1); }
.step-num {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-xs); font-weight: 700;
  background: var(--grey-200); color: var(--grey-500);
  flex-shrink: 0;
}
.step-num.active { background: var(--primary); color: var(--white); }
.step-num.done   { background: var(--primary-dark); color: var(--white); }
.step-label        { font-size: var(--text-sm); font-weight: 600; color: var(--grey-400); }
.step-label.active { color: var(--primary); }
.step-label.done   { color: var(--primary-dark); }
.step-line      { flex: 1; height: 2px; background: var(--grey-200); margin: 0 var(--s2); }
.step-line.done { background: var(--primary); }

/* Corporate summary card (matching engine step 2) */
.corp-summary {
  background: var(--primary-light);
  border: 1px solid rgba(26,122,74,.18);
  border-radius: var(--r-lg);
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s4);
}
.corp-summary-name { font-size: var(--text-lg); font-weight: 700; color: var(--primary-dark); }
.corp-summary-meta { font-size: var(--text-sm); color: var(--grey-600); margin-top: 4px; }

/* SE result row (matching engine) */
.se-result-row {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--r-lg);
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s2);
  display: flex;
  align-items: center;
  gap: var(--s3);
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.se-result-row:hover      { border-color: var(--primary); box-shadow: var(--shadow-hover); }
.se-result-row.initiated  { border-color: var(--primary); background: var(--primary-light); }
.se-result-info           { flex: 1; min-width: 0; }
.se-result-name           { font-weight: 700; font-size: var(--text-base); color: var(--black); }
.se-result-meta           { font-size: var(--text-xs); color: var(--grey-500); margin-top: 2px; }
.se-result-score          { flex-shrink: 0; width: 160px; }
.se-result-action         { flex-shrink: 0; }

/* ── Match / partnership detail (drawer / modal) ── */
.detail-section       { margin-bottom: var(--s3); }
.detail-section-label { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--grey-500); margin-bottom: 4px; }
.detail-section-value { font-size: var(--text-sm); color: var(--grey-700); }
.detail-section-value.strong { font-weight: 700; color: var(--black); font-size: var(--text-base); }

/* Alias used in partnerships.html */
.detail-label { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--grey-500); margin-bottom: 4px; }
.detail-value { font-size: var(--text-sm); color: var(--grey-700); }
.detail-value.strong { font-weight: 700; color: var(--black); font-size: var(--text-base); }

/* Impact accordion (partnerships detail modal) */
.impact-accordion     { border: 1px solid var(--grey-200); border-radius: var(--r-md); overflow: hidden; }
.impact-acc-head      { display: flex; align-items: center; justify-content: space-between; padding: var(--s2) var(--s3); cursor: pointer; background: var(--grey-50); font-weight: 600; font-size: var(--text-sm); }
.impact-acc-head:hover{ background: var(--grey-100); }
.impact-acc-body      { display: none; padding: var(--s3); }
.impact-acc-body.open { display: block; }

/* SDG tags wrapper */
.sdg-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

/* ── SE detail / corporate detail — inline-edit modes ── */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }

.detail-readonly .form-input,
.detail-readonly .form-select,
.detail-readonly .form-textarea {
  background: var(--grey-50);
  border-color: var(--grey-200);
  color: var(--grey-700);
  pointer-events: none;
}
.detail-edit .form-input,
.detail-edit .form-select,
.detail-edit .form-textarea {
  background: var(--white);
  border-color: var(--grey-300);
  color: var(--black);
  pointer-events: auto;
}

/* Impact aggregate strip (SE detail impact tab) */
.impact-agg { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s2); margin-bottom: var(--s3); }

/* ── SDG goal selector grid ── */
.sdg-goal-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 6px; margin-top: 8px; }
/* Also allow using the class name sdg-grid (used in HTML) — already defined as .sdg-grid via sdg-grid component */
.sdg-goal-btn {
  padding: 6px 4px;
  border-radius: 2px;
  border: 2px solid transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  line-height: 1.2;
  transition: opacity 0.15s, transform 0.15s;
  user-select: none;
}
.sdg-goal-btn:hover    { opacity: 0.85; transform: scale(1.04); }
.sdg-goal-btn.selected { border-color: #111; box-shadow: 0 0 0 2px #111; }
.sdg-goal-btn.sdg-7,
.sdg-goal-btn.sdg-11   { color: #111; }

/* ── Form row (modal forms, inline label+input pairs) ── */
.form-row { margin-bottom: var(--s3); }
.form-row label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: 5px;
  color: var(--grey-700);
}
.form-row input,
.form-row select {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--grey-200);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  font-family: var(--font);
  outline: none;
  transition: border-color 0.15s;
}
.form-row input:focus,
.form-row select:focus { border-color: var(--primary); }

/* ── New SE form sections ── */
.form-section {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--r-lg);
  margin-bottom: var(--s4);
  overflow: hidden;
}
.form-section-head {
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--grey-200);
  background: var(--grey-50);
}
.form-section-head h3 {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--black);
  margin: 0;
}
.form-section-body { padding: var(--s4); }

/* ── Proposals page ── */
.gen-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  padding: var(--s6);
  color: var(--grey-500);
}
.ai-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #F3E8FF;
  color: #7E22CE;
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--r-full);
  letter-spacing: 0.04em;
}
.focus-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s1); }

/* ── Admin architecture view ── */
.arch-col      { display: flex; flex-direction: column; gap: 4px; }
.arch-col-head {
  padding: 6px 10px;
  border-radius: var(--r-sm);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 4px;
}
.arch-route {
  padding: 4px 10px;
  font-size: var(--text-xs);
  font-family: var(--font-mono, monospace);
  color: var(--grey-700);
  background: var(--grey-50);
  border-radius: 4px;
  border: 1px solid var(--grey-100);
}
.arch-route.active {
  background: rgba(30,158,88,.1);
  color: var(--primary);
  border-color: rgba(30,158,88,.2);
  font-weight: 700;
}

/* DB schema cards */
.db-table-card  { border: 1.5px solid var(--grey-200); border-radius: var(--r-md); overflow: hidden; }
.db-table-name  { background: var(--primary-dark); color: white; padding: 6px 12px; font-size: var(--text-sm); font-weight: 700; font-family: var(--font-mono, monospace); }
.db-col         { padding: 4px 12px; font-size: var(--text-xs); color: var(--grey-600); border-top: 1px solid var(--grey-100); font-family: var(--font-mono, monospace); }
.db-col.pk      { color: var(--primary); font-weight: 600; }
.db-col.fk      { color: #2C5C54; }
.db-col.hl      { background: rgba(30,158,88,.05); color: var(--grey-800); font-weight: 500; }

/* Tech stack cards */
.tech-card  { padding: var(--s3); border: 1.5px solid var(--grey-200); border-radius: var(--r-md); }
.tech-label { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--grey-500); margin-bottom: 4px; }
.tech-val   { font-size: var(--text-lg); font-weight: 700; color: var(--black); margin-bottom: 2px; }
.tech-sub   { font-size: var(--text-xs); color: var(--grey-500); }

/* Flow nodes (admin architecture) */
.flow-node       { padding: var(--s2) var(--s3); border-radius: var(--r-md); font-weight: 700; font-size: var(--text-sm); text-align: center; line-height: 1.4; }
.flow-node span  { font-weight: 400; font-size: var(--text-xs); opacity: 0.8; }
.flow-node.se    { background: rgba(30,158,88,.12); color: #115E35; }
.flow-node.fses  { background: rgba(17,94,53,.15); color: #0a3d21; }
.flow-node.corp  { background: rgba(44,92,84,.12); color: #2C5C54; }
.flow-arrow      { color: var(--grey-400); font-size: 1.25rem; }

/* Modal backdrop alias (admin page uses .modal-backdrop instead of .modal-overlay) */
.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 200;
  align-items: center;
  justify-content: center;
}
.modal-backdrop.open { display: flex; }

/* Larger modal variant */
.modal-lg { max-width: 720px; }

/* Pagination wrapper */
.pagination-info     { font-size: var(--text-xs); color: var(--grey-500); }
.pagination-controls { display: flex; gap: 4px; flex-wrap: wrap; }

/* Row-clickable table rows */
.row-clickable { cursor: pointer; }
.row-clickable:hover td { background: var(--grey-50); }

/* ==========================================================================
   Right-side Drawer (replaces modal popups in panel pages)
   ========================================================================== */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .38);
  z-index: 900;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.drawer-overlay.open { opacity: 1; pointer-events: all; }

.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 400px;
  max-width: 100vw;
  background: var(--white);
  z-index: 901;
  display: flex;
  flex-direction: column;
  box-shadow: -6px 0 32px rgba(0, 0, 0, .14);
  transform: translateX(100%);
  transition: transform .25s cubic-bezier(.4, 0, .2, 1);
}
.drawer.open { transform: translateX(0); }

.drawer-header {
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--grey-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  background: var(--grey-50);
}
.drawer-title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--black);
}
.drawer-close {
  width: 30px; height: 30px;
  border: none; background: none; cursor: pointer;
  border-radius: var(--r-md);
  color: var(--grey-500);
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
  line-height: 1;
}
.drawer-close:hover { background: var(--grey-200); color: var(--black); }

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--s4);
}

.drawer-footer {
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--grey-200);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s2);
  flex-shrink: 0;
}

/* Inline delete confirm in table rows */
.inline-confirm {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--text-sm);
}
.inline-confirm-label {
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
}


/* ==========================================================================
   Landing page (home) — consolidated from public/index.html inline <style>
   ========================================================================== */
    /* ── Topnav scroll ── */
    .topnav { transition: background 0.3s, box-shadow 0.3s; }
    .topnav.scrolled {
      box-shadow: 0 1px 20px rgba(0,0,0,0.08);
      border-bottom-color: transparent;
    }

    /* ── HERO — light warm-white ── */
    .lp-hero {
      background: linear-gradient(150deg, #F5F0EB 55%, #EAF3EE 100%);
      padding-top: var(--topnav-h);
      position: relative;
      overflow: hidden;
    }
    .lp-hero-ring {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
    }
    .lp-hero-body {
      max-width: var(--content-max);
      margin: 0 auto;
      padding: var(--s4) var(--margin) var(--s8);
      display: grid;
      grid-template-columns: 1fr 460px;
      gap: var(--s8);
      align-items: center;
    }
    @media (max-width: 1000px) {
      .lp-hero-body { grid-template-columns: 1fr; padding-bottom: var(--s6); }
    }

    /* Eyebrow */
    .lp-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: var(--text-base);
      font-weight: var(--weight-bold);
      letter-spacing: 0.02em;
      color: var(--primary);
      margin-bottom: var(--s3);
      background: var(--primary-light);
      padding: 7px 16px;
      border-radius: 99px;
    }
    .lp-eyebrow svg { width: 17px; height: 17px; }
    .lp-eyebrow-dots { display: inline-flex; gap: 3px; }
    .lp-eyebrow-dots span {
      display: block; width: 5px; height: 5px; border-radius: 50%;
    }

    /* Headline */
    .lp-h1 {
      font-family: var(--font-display);
      font-size: clamp(2.2rem, 4.5vw, 4rem);
      font-weight: var(--weight-black);
      letter-spacing: var(--tracking-tighter);
      line-height: 1.05;
      color: var(--black);
      margin-bottom: var(--s3);
    }
    .lp-h1 .hi { color: var(--primary); }

    .lp-desc {
      font-size: var(--text-lg);
      color: var(--grey-600);
      line-height: var(--lh-relaxed);
      max-width: 480px;
      margin-bottom: var(--s5);
    }

    /* SDG tile grid (hero right) */
    .lp-sdg-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 5px;
    }
    @media (max-width: 1000px) { .lp-sdg-grid { display: none; } }

    /* Feature cards (hero right) */
    .lp-feat-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--s3);
    }
    .lp-feat-card {
      background: #fff;
      border: 1px solid var(--grey-200);
      border-radius: var(--r-lg);
      padding: var(--s4) var(--s3);
      box-shadow: 0 10px 30px rgba(0,0,0,0.05);
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .lp-feat-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,0.09); }
    .lp-feat-ic {
      width: 42px; height: 42px; border-radius: 11px;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: var(--s3);
    }
    .lp-feat-t { font-weight: var(--weight-bold); font-size: var(--text-lg); color: var(--black); margin-bottom: 6px; }
    .lp-feat-s { font-size: var(--text-sm); color: var(--grey-500); line-height: var(--lh-relaxed); }
    @media (max-width: 1000px) { .lp-feat-grid { margin-top: var(--s5); } }
    @media (max-width: 480px) { .lp-feat-grid { grid-template-columns: 1fr; } }

    .sdg-t {
      aspect-ratio: 1;
      border-radius: 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 5px 3px;
      cursor: default;
      transition: transform 0.15s;
      position: relative;
      overflow: hidden;
    }
    .sdg-t:hover { transform: scale(1.06); }
    .sdg-t-num {
      font-family: var(--font-display);
      font-size: clamp(0.9rem, 1.6vw, 1.2rem);
      font-weight: var(--weight-black);
      color: white;
      line-height: 1;
      margin-bottom: 2px;
    }
    .sdg-t-name {
      font-size: 0.75rem;
      font-weight: var(--weight-semibold);
      color: rgba(255,255,255,0.88);
      text-align: center;
      line-height: 1.3;
    }
    .sdg-t-17 {
      grid-column: 1 / -1;
      aspect-ratio: auto;
      flex-direction: row;
      gap: var(--s2);
      padding: 10px var(--s2);
      justify-content: flex-start;
    }
    .sdg-t-17 .sdg-t-num { font-size: clamp(0.9rem, 1.6vw, 1.2rem); }
    .sdg-t-17 .sdg-t-name { font-size: 0.75rem; text-align: left; }

    /* Stats — icon cards on light bg (manus ref) */
    .lp-stats2 { background: var(--grey-50); padding: var(--s9) 0; border-top: 1px solid var(--grey-100); }
    .lp-stats2-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--s4);
      text-align: center;
    }
    @media (max-width: 600px) { .lp-stats2-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s6) var(--s3); } }
    .lp-stat2-ic {
      width: 56px; height: 56px; border-radius: 50%;
      background: var(--white);
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto var(--s3);
      box-shadow: 0 4px 14px rgba(0,0,0,0.06);
      color: var(--primary);
    }
    .lp-stat2-ic svg { width: 24px; height: 24px; }
    .lp-stat2-num {
      font-family: var(--font-display);
      font-size: clamp(1.8rem, 3vw, 2.6rem);
      font-weight: var(--weight-black);
      color: var(--black);
      letter-spacing: var(--tracking-tighter);
      line-height: var(--lh-none);
    }
    .lp-stat2-label { font-size: var(--text-sm); color: var(--grey-500); margin-top: 8px; }

    /* 社企故事 carousel */
    .stories { background: var(--warm-white); padding: var(--s10) 0; }
    .stories-head { text-align: center; margin-bottom: var(--s7); }
    .stories-head h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); margin-bottom: var(--s2); }
    .stories-head p { color: var(--grey-500); font-size: var(--text-lg); }
    .story-card {
      display: flex; gap: var(--s5); align-items: center;
      background: #fff; border: 1px solid var(--grey-200); border-radius: var(--r-xl);
      padding: var(--s6); max-width: 880px; margin: 0 auto;
      box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    }
    .story-card-ic {
      width: 160px; height: 160px; flex: none; border-radius: var(--r-lg);
      background: linear-gradient(135deg, var(--teal-light), var(--primary-light));
      display: flex; align-items: center; justify-content: center; color: var(--teal);
    }
    .story-card-ic svg { width: 56px; height: 56px; }
    .story-card-body { flex: 1; min-width: 0; }
    .story-card-title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--black); margin-bottom: var(--s2); line-height: var(--lh-snug); }
    .story-card-text { color: var(--grey-600); line-height: var(--lh-relaxed); margin-bottom: var(--s4); }
    .stories-nav { display: flex; align-items: center; justify-content: center; gap: var(--s3); margin-top: var(--s5); }
    .stories-dots { display: flex; gap: 8px; }
    .stories-dot { width: 8px; height: 8px; border-radius: 99px; background: var(--grey-300); border: none; padding: 0; cursor: pointer; transition: all 0.2s var(--ease); }
    .stories-dot.active { width: 24px; background: var(--primary); }
    .stories-arrow {
      width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--grey-200);
      background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
      color: var(--grey-600); font-size: 20px; line-height: 1; transition: border-color 0.2s, color 0.2s;
    }
    .stories-arrow:hover { border-color: var(--primary); color: var(--primary); }
    @media (max-width: 680px) {
      .story-card { flex-direction: column; text-align: center; padding: var(--s5); }
      .story-card-ic { width: 120px; height: 120px; }
    }

    /* SDG rainbow */
    .sdg-rainbow { display: flex; height: 4px; }
    .sdg-rainbow > div { flex: 1; }

    /* ── HOW IT WORKS — 3 green-family panels ── */
    .how-header {
      background: white;
      padding: var(--s8) 0 var(--s4);
    }
    .how-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      max-width: var(--content-max);
      margin: 0 auto;
      gap: var(--s3);
      padding: 0 var(--margin) var(--s8);
      background: white;
    }
    .how-grid .how-panel { border-radius: var(--r-lg); }
    @media (max-width: 768px) { .how-grid { grid-template-columns: 1fr; } }

    .how-panel {
      padding: var(--s8) var(--s6);
      position: relative;
      overflow: hidden;
    }
    @media (max-width: 1024px) { .how-panel { padding: var(--s7) var(--s4); } }

    .how-bg-num {
      position: absolute;
      bottom: -0.12em; right: -0.04em;
      font-family: var(--font-display);
      font-size: 9rem;
      font-weight: var(--weight-black);
      color: rgba(255,255,255,0.07);
      line-height: 1;
      pointer-events: none;
      user-select: none;
    }
    .how-step-tag {
      font-size: var(--text-xs);
      font-weight: var(--weight-bold);
      letter-spacing: var(--tracking-widest);
      text-transform: uppercase;
      color: rgba(255,255,255,0.5);
      margin-bottom: var(--s2);
    }
    .how-icon {
      width: 44px; height: 44px;
      border-radius: 10px;
      background: rgba(255,255,255,0.15);
      display: flex; align-items: center; justify-content: center;
      margin-bottom: var(--s3);
      color: white;
    }
    .how-panel h3 {
      color: white;
      font-size: var(--text-xl);
      margin-bottom: var(--s2);
    }
    .how-panel p {
      color: rgba(255,255,255,0.72);
      font-size: var(--text-sm);
      line-height: var(--lh-loose);
      margin: 0;
    }

    /* ── SDG MOSAIC — light bg ── */
    .sdg-mosaic {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
      gap: var(--s2);
      margin-top: var(--s7);
    }
    .sdg-pill {
      border-radius: var(--r-md);
      padding: var(--s2);
      display: flex;
      flex-direction: column;
      gap: 4px;
      transition: transform 0.15s, box-shadow 0.15s;
      cursor: default;
      box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    }
    .sdg-pill:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.35); }
    .sdg-pill-num {
      font-family: var(--font-display);
      font-size: 1.6rem;
      font-weight: var(--weight-black);
      color: white;
      line-height: 1;
    }
    .sdg-pill-name {
      font-size: var(--text-2xs);
      font-weight: var(--weight-semibold);
      color: rgba(255,255,255,0.82);
      line-height: 1.35;
    }
    .sdg-17-wide { grid-column: span 2; }

    /* ── SE Cards ── */
    .se-card-v2 {
      background: white;
      border: 1px solid var(--grey-200);
      border-radius: var(--r-lg);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: transform 0.2s, box-shadow 0.2s;
      text-decoration: none;
      color: inherit;
      height: 100%;
    }
    .se-card-v2:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 40px rgba(0,0,0,0.09);
      text-decoration: none;
    }
    .se-card-v2-accent { height: 3px; }
    .se-card-v2-body { padding: var(--s3); flex: 1; }
    .se-card-v2-header { display: flex; gap: var(--s2); align-items: flex-start; margin-bottom: var(--s2); }
    .se-card-v2-logo {
      width: 40px; height: 40px; border-radius: var(--r-md);
      background: var(--primary-light); color: var(--primary-dark);
      display: flex; align-items: center; justify-content: center;
      font-weight: var(--weight-bold); font-size: var(--text-sm);
      flex-shrink: 0; overflow: hidden;
    }
    .se-card-v2-logo img { width: 100%; height: 100%; object-fit: cover; }
    .se-card-v2-name { font-weight: var(--weight-bold); font-size: var(--text-base); line-height: var(--lh-snug); color: var(--black); margin-bottom: 4px; }
    .se-card-v2-desc {
      font-size: var(--text-sm); color: var(--grey-600); line-height: var(--lh-relaxed);
      display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
      margin-bottom: var(--s2);
    }
    .se-card-v2-footer {
      padding: var(--s2) var(--s3);
      border-top: 1px solid var(--grey-100);
      display: flex; align-items: center; justify-content: space-between;
    }

    /* ── Award split — green tones, no black ── */
    .award-split {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }
    @media (max-width: 768px) { .award-split { grid-template-columns: 1fr; } }

    .award-left {
      background: var(--primary-dark);
      display: flex; align-items: center;
    }
    .award-left-inner {
      max-width: 560px;
      margin-left: auto;
      padding: var(--s10) var(--s7) var(--s10) var(--margin);
    }
    @media (max-width: 1100px) {
      .award-left-inner { max-width: none; margin-left: 0; padding: var(--s8) var(--s4); }
    }

    .award-right {
      background: var(--primary);
      position: relative; overflow: hidden;
      display: flex; align-items: center;
    }
    .award-right::before {
      content: '';
      position: absolute; top: -20%; right: -15%; width: 60%; height: 140%;
      background: radial-gradient(ellipse at center, rgba(255,255,255,0.1) 0%, transparent 60%);
      pointer-events: none;
    }
    .award-right-deco {
      position: absolute; bottom: -0.1em; right: -0.02em;
      font-family: var(--font-display); font-size: 12rem; font-weight: var(--weight-black);
      color: rgba(255,255,255,0.06); line-height: 1; pointer-events: none; user-select: none;
    }
    .award-right-inner {
      padding: var(--s10) var(--margin) var(--s10) var(--s7);
      position: relative; z-index: 1;
    }
    @media (max-width: 1100px) {
      .award-right-inner { padding: var(--s8) var(--s4); }
    }
    .award-big {
      font-family: var(--font-display);
      font-size: clamp(2.5rem, 5vw, 4.5rem);
      font-weight: var(--weight-black);
      color: white;
      letter-spacing: var(--tracking-tighter);
      line-height: var(--lh-none);
    }
    .award-lbl {
      font-size: var(--text-xs);
      font-weight: var(--weight-semibold);
      text-transform: uppercase;
      letter-spacing: var(--tracking-wider);
      color: rgba(255,255,255,0.55);
      margin-top: 4px;
    }
    .award-divider { height: 1px; background: rgba(255,255,255,0.18); margin: var(--s4) 0; }

    /* ── SE MARKETPLACE ─────────────────────────────────────────────────── */
    .sdg-filter-strip {
      display: flex; gap: 6px; flex-wrap: wrap;
      margin-bottom: var(--s3);
    }
    .sdg-fb {
      border: none; border-radius: 99px;
      padding: 6px 13px;
      font-size: var(--text-xs); font-weight: var(--weight-semibold);
      cursor: pointer; transition: all 0.18s;
      color: white; opacity: 0.45; white-space: nowrap;
    }
    .sdg-fb-all { background: var(--black); }
    .sdg-fb.active { opacity: 1; box-shadow: 0 3px 14px rgba(0,0,0,0.28); transform: scale(1.06); }
    .sdg-fb:hover:not(.active) { opacity: 0.72; }

    .se-mkt-search { position: relative; }
    .se-mkt-search input {
      padding: 9px 16px 9px 36px;
      border: 1.5px solid var(--grey-200); border-radius: 99px;
      font-size: var(--text-sm); font-family: var(--font);
      outline: none; width: 260px; background: white;
      transition: border-color 0.15s;
    }
    .se-mkt-search input:focus { border-color: var(--primary); }
    .se-mkt-search-icon {
      position: absolute; left: 12px; top: 50%;
      transform: translateY(-50%); color: var(--grey-400); pointer-events: none;
    }

    .se-mkt-card {
      display: flex; flex-direction: column;
      background: white; border: 1.5px solid #EBEBEB;
      border-radius: var(--r-lg); overflow: hidden;
      text-decoration: none; color: inherit; height: 100%;
      transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    }
    .se-mkt-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 20px 48px rgba(0,0,0,0.1);
      border-color: var(--primary); text-decoration: none;
    }

    .se-mkt-sdgs { display: flex; height: 80px; }
    .se-mkt-sdg-tile {
      flex: 1; display: flex; flex-direction: column;
      align-items: center; justify-content: center; padding: 6px 4px;
    }
    .se-mkt-sdg-tile-num {
      font-family: var(--font-display); font-size: 1.55rem;
      font-weight: var(--weight-black); color: white; line-height: 1;
    }
    .se-mkt-sdg-tile-name {
      font-size: 0.75rem; font-weight: var(--weight-semibold);
      color: rgba(255,255,255,0.88); text-align: center; margin-top: 3px;
      line-height: 1.25;
    }
    .se-mkt-sdg-fill { flex: 1; background: #F5F5F5; }

    .se-mkt-body { padding: var(--s3); flex: 1; }
    .se-mkt-header {
      display: flex; gap: var(--s2); align-items: center; margin-bottom: var(--s2);
    }
    .se-mkt-logo {
      width: 40px; height: 40px; border-radius: var(--r-md);
      background: #D4EFE1; color: var(--primary-dark);
      display: flex; align-items: center; justify-content: center;
      font-weight: var(--weight-bold); font-size: var(--text-sm);
      flex-shrink: 0; overflow: hidden;
    }
    .se-mkt-logo img { width: 100%; height: 100%; object-fit: cover; }
    .se-mkt-name {
      font-weight: var(--weight-bold); font-size: var(--text-base);
      color: var(--black); line-height: var(--lh-snug);
    }
    .se-mkt-meta { font-size: var(--text-xs); color: var(--grey-500); margin-top: 2px; }
    .se-mkt-desc {
      font-size: var(--text-sm); color: var(--grey-600);
      line-height: var(--lh-relaxed);
      display: -webkit-box; -webkit-line-clamp: 2;
      -webkit-box-orient: vertical; overflow: hidden; margin: 0;
    }
    .se-mkt-footer {
      padding: var(--s2) var(--s3); border-top: 1px solid #F0F0F0;
      display: flex; justify-content: space-between; align-items: center;
    }
    .se-mkt-cta {
      font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--primary);
    }
    .se-mkt-skel {
      border-radius: var(--r-lg); height: 240px;
      background: linear-gradient(90deg,#f4f4f4 25%,#ebebeb 50%,#f4f4f4 75%);
      background-size: 200% 100%;
      animation: skel-shimmer 1.4s infinite;
    }
    @keyframes skel-shimmer {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }