/* SQ Portal Design System — EMI-SOL-001
   Generated from 38 HTML prototype screens
   1987 unique classes | Dark mode: html.dark
*/

/* === CSS VARIABLES === */
:root {
  /* Brand */
  --sqp-navy:           #1E4480;
  --sqp-blue:           #2A6AB0;
  --sqp-primary:        #005EFF;
  --sqp-primary-light:  #E6EFFF;
  --sqp-primary-dark:   #0045CC;

  /* Semantic */
  --sqp-success:        #3EB645;
  --sqp-success-light:  #E8F7E9;
  --sqp-success-text:   #166534;
  --sqp-warning:        #F59E0B;
  --sqp-warning-light:  #FEF3C7;
  --sqp-warning-text:   #B45309;
  --sqp-critical:       #E90229;
  --sqp-critical-light: #FEE2E2;
  --sqp-critical-text:  #B91C1C;
  --sqp-info:           #3B82F6;
  --sqp-info-light:     #EFF6FF;
  --sqp-info-text:      #1D4ED8;
  --sqp-purple:         #7C3AED;
  --sqp-purple-light:   #EDE9FE;
  --sqp-purple-text:    #5B21B6;

  /* Neutrals */
  --sqp-text:           #2D2E31;
  --sqp-text-secondary: #6B7280;
  --sqp-text-disabled:  #9CA3AF;
  --sqp-bg-page:        #F8F8F9;
  --sqp-bg-card:        #FFFFFF;
  --sqp-border:         #ECEDEF;
  --sqp-border-focus:   #005EFF;

  /* Layout */
  --sidebar-collapsed:  76px;
  --sidebar-expanded:   248px;
  --topbar-height:      60px;
  --page-padding:       24px;

  /* Elevation */
  --shadow-card:    0 1px 4px rgba(0,0,0,0.06);
  --shadow-hover:   0 4px 12px rgba(0,0,0,0.10);
  --shadow-active:  0 6px 14px rgba(0,94,255,0.24);
  --shadow-modal:   0 20px 60px rgba(0,0,0,0.18);

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Transition */
  --t-fast:   0.15s ease;
  --t-normal: 0.25s ease;
  --t-slow:   0.35s ease;
}

/* === DARK MODE === */
html.dark {
  /* Backgrounds */
  --sqp-bg-page:        #0D1117;
  --sqp-bg-card:        #161B22;
  --sqp-bg-card-hover:  #1C2230;

  /* Borders */
  --sqp-border:         rgba(255,255,255,.1);
  --sqp-border-focus:   #60A5FA;

  /* Text */
  --sqp-text:           #E6EDF3;
  --sqp-text-secondary: #8B949E;
  --sqp-text-disabled:  #4B5563;

  /* Brand – stay same, adjust for contrast */
  --sqp-navy:           #60A5FA;
  --sqp-primary:        #60A5FA;
  --sqp-primary-light:  rgba(96,165,250,.15);
  --sqp-primary-dark:   #93C5FD;

  /* Semantic lights – more transparent on dark bg */
  --sqp-success-light:  rgba(62,182,69,.18);
  --sqp-success-text:   #4ADE80;
  --sqp-warning-light:  rgba(245,158,11,.18);
  --sqp-warning-text:   #FCD34D;
  --sqp-critical-light: rgba(233,2,41,.2);
  --sqp-critical-text:  #FCA5A5;
  --sqp-info-light:     rgba(59,130,246,.15);
  --sqp-info-text:      #93C5FD;
  --sqp-purple-light:   rgba(124,58,237,.18);
  --sqp-purple-text:    #C4B5FD;

  /* Elevation – stronger on dark */
  --shadow-card:    0 1px 4px rgba(0,0,0,.5);
  --shadow-hover:   0 4px 16px rgba(0,0,0,.6);
  --shadow-active:  0 6px 20px rgba(96,165,250,.2);
  --shadow-modal:   0 24px 60px rgba(0,0,0,.7);
}

/* === BASE STYLES === */
html { height: 100%; }
body { background: var(--sqp-bg-page); }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  color: var(--sqp-text);
  background: var(--sqp-bg-page);
  height: 100%;
  overflow: hidden;
}
body { padding: 20px; }
body { padding: 20px; overflow-y: auto; flex: 1; }
body  { padding:9px 13px 7px; color:var(--sqp-text-secondary); line-height:1.55; }
body { flex:1; overflow-y:auto; padding:0; }
body      { color: rgba(255,255,255,.55); }
.app-shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
  position: relative;
}
#app-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100vh;
}

#main-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--sqp-bg-page);
  padding: var(--page-padding, 24px);
}
#app-content { margin-left: 0; }
#sidebar { background: #111827; border-right-color: rgba(255,255,255,.08); }
#sidebar { transition: width var(--t-normal) !important; }
#sidebar {
  width: var(--sidebar-collapsed);
  min-width: var(--sidebar-collapsed);
  height: 100vh;
  background: var(--sqp-bg-card);
  border-right: 1px solid var(--sqp-border);
  display: flex;
  flex-direction: column;
  transition: width var(--t-normal);
  overflow: visible;             /* allow expand btn to hang outside */
  position: relative;
  z-index: 50;
  flex-shrink: 0;
}
*, *::before, *::after {
  transition-property: background-color, border-color, color, box-shadow;
  transition-duration: 0.2s;
  transition-timing-function: ease;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* === KEYFRAMES === */
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes lp{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.4)}}
@keyframes shake{0%,90%,100%{transform:rotate(0)}92%,96%{transform:rotate(-8deg)}94%,98%{transform:rotate(8deg)}}
@keyframes cip{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
@keyframes dfade{from{opacity:0}to{opacity:1}}
@keyframes spin { to{transform:rotate(360deg)} }
@keyframes mfade { from{opacity:0;transform:translateY(-16px)} to{opacity:1;transform:translateY(0)} }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes siPulse { 0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,.4)} 50%{box-shadow:0 0 0 5px rgba(245,158,11,0)} }
@keyframes awPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }
@keyframes dpulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes dp{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes mf{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:translateY(0)}}
@keyframes cm{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes checkPop{from{transform:scale(0)}to{transform:scale(1)}}

/* === COMPONENT CLASSES === */
/* .dark
   ═══════════════════════════════════════════════════════════ */
html.dark {
  /* Backgrounds */
  --sqp-bg-page:        #0D1117;
  --sqp-bg-card:        #161B22;
  --sqp-bg-card-hover:  #1C2230;

  /* Borders */
  --sqp-border:         rgba(255,255,255,.1);
  --sqp-border-focus:   #60A5FA;

  /* Text */
  --sqp-text:           #E6EDF3;
  --sqp-text-secondary: #8B949E;
  --sqp-text-disabled:  #4B5563;

  /* Brand – stay same, adjust for contrast */
  --sqp-navy:           #60A5FA;
  --sqp-primary:        #60A5FA;
  --sqp-primary-light:  rgba(96,165,250,.15);
  --sqp-primary-dark:   #93C5FD;

  /* Semantic lights – more transparent on dark bg */
  --sqp-success-light:  rgba(62,182,69,.18);
  --sqp-success-text:   #4ADE80;
  --sqp-warning-light:  rgba(245,158,11,.18);
  --sqp-warning-text:   #FCD34D;
  --sqp-critical-light: rgba(233,2,41,.2);
  --sqp-critical-text:  #FCA5A5;
  --sqp-info-light:     rgba(59,130,246,.15);
  --sqp-info-text:      #93C5FD;
  --sqp-purple-light:   rgba(124,58,237,.18);
  --sqp-purple-text:    #C4B5FD;

  /* Elevation – stronger on dark */
  --shadow-card:    0 1px 4px rgba(0,0,0,.5);
  --shadow-hover:   0 4px 16px rgba(0,0,0,.6);
  --shadow-active:  0 6px 20px rgba(96,165,250,.2);
  --shadow-modal:   0 24px 60px rgba(0,0,0,.7);
}
.theme-toggle {
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  border: 1px solid var(--sqp-border);
  background: transparent;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: var(--sqp-text-secondary);
  transition: background var(--t-fast), color var(--t-fast),
              border-color var(--t-fast), transform var(--t-fast);
  flex-shrink: 0;
}
.nav-p2-badge { transition: all var(--t-fast); }
.app-shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
  position: relative;
}
.sidebar-nav {
  overflow-x: clip;
}
#sidebar.expanded {
  width: var(--sidebar-expanded);
  box-shadow: 2px 0 16px rgba(0,0,0,0.08);
}

#sidebar.expanded .sidebar-brand {
  opacity: 1;
  max-width: 200px;
  margin-left: 12px;
}

#sidebar.expanded .sidebar-header {
  justify-content: space-between;
}

#sidebar.expanded .btn-expand {
  opacity: 0;
  pointer-events: none;
}

#sidebar.expanded .btn-collapse {
  opacity: 1;
  pointer-events: auto;
}

#sidebar.expanded .nav-group-label {
  opacity: 1;
  max-height: 40px;
  margin: 12px 16px 4px;
}

#sidebar.expanded .nav-item {
  justify-content: flex-start;
  gap: 10px;
  padding: 10px 10px;
}

#sidebar.expanded .nav-label {
  opacity: 1;
  max-width: 200px;
  margin-left: 12px;
}

#sidebar.expanded .nav-p2-badge {
  opacity: 1;
  max-width: 40px;
  margin-left: auto;
}

#sidebar.expanded .nav-sub {
  max-height: 44px;
  opacity: 1;
  pointer-events: auto;
  padding: 9px 10px 9px 32px;
}

#sidebar.expanded .user-info {
  opacity: 1;
  max-width: 160px;
}

#sidebar.expanded .sidebar-footer .user-chip-sidebar {
  justify-content: flex-start;
}
.sidebar-header {
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  justify-content: center;          /* logo selalu tengah */
  padding: 0;
  border-bottom: 1px solid var(--sqp-border);
  flex-shrink: 0;
  position: relative;               /* anchor untuk absolute buttons */
  overflow: visible;                 /* jangan clip tombol */
}
.sidebar-logo {
  width: 34px;
  height: 34px;
  min-width: 34px;
  background: var(--sqp-navy);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.5px;
  cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
  position: relative;
  z-index: 1;
}
.sidebar-brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  transition: opacity var(--t-normal), max-width var(--t-normal);
  white-space: nowrap;
  flex: 1;
}
.sidebar-brand .brand-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--sqp-navy);
  line-height: 1;
}

.sidebar-brand .brand-client {
  font-size: 10px;
  font-weight: 500;
  color: var(--sqp-text-secondary);
  letter-spacing: 0.3px;
}
.sidebar-toggle {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid var(--sqp-border);
  background: #fff;
  color: var(--sqp-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  transition: background var(--t-fast), color var(--t-fast),
              border-color var(--t-fast), opacity var(--t-fast),
              transform var(--t-fast);
  z-index: 60;
}
.btn-expand {
  right: -11px;                /* half of 22px hangs outside sidebar right edge */
  top: 50%;
  transform: translateY(-50%);
  opacity: 1;
  pointer-events: auto;
  transition: opacity var(--t-normal), transform var(--t-fast);
}
.btn-collapse {
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
}
.nav-group-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--sqp-text-disabled);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 8px 8px 4px;
  white-space: nowrap;
  overflow: hidden;
  opacity: 0;
  max-height: 0;
  transition: opacity var(--t-normal), max-height var(--t-normal);
}
.nav-divider {
  height: 1px;
  background: var(--sqp-border);
  margin: 5px 4px;
  flex-shrink: 0;
}
.nav-item {
  display: flex;
  align-items: center;
  justify-content: center;   /* center icon when collapsed */
  gap: 0;
  padding: 10px 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), gap var(--t-normal), padding var(--t-normal), justify-content var(--t-normal);
  white-space: nowrap;
  overflow: hidden;
  color: var(--sqp-text-secondary);
  font-size: 14px;
  font-weight: 500;
  position: relative;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.nav-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: font-size var(--t-fast);
}
.nav-label {
  font-size: 14px;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  max-width: 0;
  transition: opacity var(--t-normal), max-width var(--t-normal);
}
.nav-sub {
  gap: 8px;
  max-height: 0;
  overflow: hidden;
  padding: 0;
  opacity: 0;
  transition: max-height var(--t-normal), opacity var(--t-normal), padding var(--t-normal);
  pointer-events: none;
}
.visible { opacity: 1; }
.sidebar-footer {
  padding: 8px 6px;
  border-top: 1px solid var(--sqp-border);
  flex-shrink: 0;
}
.user-chip-sidebar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 8px 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--t-fast), gap var(--t-normal), padding var(--t-normal);
  overflow: hidden;
  white-space: nowrap;
}
.avatar-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--sqp-navy);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.user-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  opacity: 0;
  max-width: 0;
  transition: opacity var(--t-normal), max-width var(--t-normal);
}
.user-name { font-size: 13px; font-weight: 600; color: var(--sqp-text); white-space: nowrap; }
.user-role {
  font-size: 11px;
  font-weight: 500;
  padding: 1px 7px;
  border-radius: 3px;
  display: inline-block;
  width: fit-content;
  white-space: nowrap;
  color: var(--sqp-text-secondary);
}
.role-iq { background: var(--sqp-primary-light); color: var(--sqp-primary); }
.role-supplier { background: var(--sqp-success-light); color: var(--sqp-success-text); }
.role-admin { background: var(--sqp-purple-light); color: var(--sqp-purple-text); }
.role-customer { background: var(--sqp-warning-light); color: var(--sqp-warning-text); }
.topbar-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}
.page-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--sqp-navy);
  line-height: 1.2;
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--sqp-text-secondary);
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.notif-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  border: 1px solid var(--sqp-border);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: var(--sqp-text-secondary);
  font-size: 15px;
  transition: background var(--t-fast), color var(--t-fast);
}
.notif-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--sqp-critical);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}
.user-chip-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--sqp-border);
  border-radius: 20px;
  cursor: pointer;
  transition: background var(--t-fast);
}
.user-chip-topbar .user-details {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.user-chip-topbar .user-fullname {
  font-size: 12px;
  font-weight: 600;
  color: var(--sqp-text);
  line-height: 1;
}
.user-chip-topbar .user-role-label {
  font-size: 10px;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 3px;
  display: inline-block;
}
html.dark .user-chip-topbar .user-fullname {
  color: #E6EDF3;
}
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 16px;
}
.page-header-left h1 {
  font-size: 22px;
  font-weight: 700;
  color: var(--sqp-navy);
  margin-bottom: 4px;
}
.page-header-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  padding: 9px 18px;
  border: none;
  transition: background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}
.btn-primary { background: var(--sqp-primary); color: #fff; }
.btn-secondary { background: transparent; border: 1px solid var(--sqp-primary); color: var(--sqp-primary); }
.btn-ghost { background: transparent; color: var(--sqp-primary); border: none; padding: 9px 12px; }
.btn-danger { background: var(--sqp-critical); color: #fff; }
.btn-outline { background: transparent; border: 1px solid var(--sqp-border); color: var(--sqp-text-secondary); }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-lg { padding: 11px 24px; font-size: 15px; }
.card {
  background: var(--sqp-bg-card);
  border: 1px solid var(--sqp-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: visible;
}
.card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--sqp-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.card-title { font-size: 15px; font-weight: 600; color: var(--sqp-navy); }
.card-subtitle { font-size: 12px; color: var(--sqp-text-secondary); margin-top: 2px; }
.card-body { padding: 20px; }
.card-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--sqp-border);
  background: var(--sqp-bg-page);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.kpi-card {
  background: var(--sqp-bg-card);
  border: 1px solid var(--sqp-border);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--t-fast);
  position: relative;
  overflow: hidden;
}
.kpi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.kpi-icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.kpi-value { font-size: 30px; font-weight: 700; color: var(--sqp-navy); line-height: 1; }
.kpi-label { font-size: 13px; font-weight: 500; color: var(--sqp-text-secondary); margin-top: 4px; }
.kpi-trend {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 600; padding: 2px 7px;
  border-radius: 4px;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.badge-open { background: var(--sqp-info-light);     color: var(--sqp-info-text);     }
.badge-progress { background: var(--sqp-warning-light);  color: var(--sqp-warning-text);  }
.badge-review { background: var(--sqp-purple-light);   color: var(--sqp-purple-text);   }
.badge-overdue { background: var(--sqp-critical-light); color: var(--sqp-critical-text); }
.badge-closed { background: var(--sqp-success-light);  color: var(--sqp-success-text);  }
.badge-approved { background: var(--sqp-success-light);  color: var(--sqp-success-text);  }
.badge-rejected { background: var(--sqp-critical-light); color: var(--sqp-critical-text); }
.badge-pending { background: var(--sqp-warning-light);  color: var(--sqp-warning-text);  }
.badge-scheduled { background: var(--sqp-info-light);     color: var(--sqp-info-text);     }
.badge-critical-sev { background: var(--sqp-critical-light); color: var(--sqp-critical-text); outline: 1px solid var(--sqp-critical); }
.badge-major-sev { background: var(--sqp-warning-light);  color: var(--sqp-warning-text); }
.badge-minor-sev { background: #F3F4F6; color: var(--sqp-text-secondary); }
.badge-p2 {
  background: transparent;
  border: 1px solid var(--sqp-primary);
  color: var(--sqp-primary);
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  letter-spacing: 0.4px;
}
.data-table-wrap {
  background: var(--sqp-bg-card);
  border: 1px solid var(--sqp-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--sqp-border);
  gap: 12px;
  flex-wrap: wrap;
}
.table-title { font-size: 15px; font-weight: 600; color: var(--sqp-navy); }
.table-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.filter-select {
  height: 32px;
  border: 1px solid var(--sqp-border);
  border-radius: var(--radius-md);
  padding: 0 10px;
  font-size: 12px;
  color: var(--sqp-text);
  background: var(--sqp-bg-page);
  cursor: pointer;
  outline: none;
}
.filter-search {
  height: 32px;
  border: 1px solid var(--sqp-border);
  border-radius: var(--radius-md);
  padding: 0 10px 0 32px;
  font-size: 12px;
  color: var(--sqp-text);
  background: var(--sqp-bg-page);
  outline: none;
  width: 180px;
}
.filter-wrap { position: relative; }
.sqp-table { width: 100%; border-collapse: collapse; }
.td-meta { font-size: 12px; color: var(--sqp-text-secondary); margin-top: 2px; }
.table-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--sqp-border);
  background: var(--sqp-bg-page);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--sqp-text-secondary);
}
.pagination { display: flex; gap: 4px; }
.page-btn {
  width: 28px; height: 28px;
  border: 1px solid var(--sqp-border);
  border-radius: var(--radius-sm);
  background: #fff;
  font-size: 12px;
  color: var(--sqp-text-secondary);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--t-fast);
}
.sla-timer {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
}
.sla-ok { background: var(--sqp-success-light); color: var(--sqp-success-text); }
.sla-warning { background: var(--sqp-warning-light); color: var(--sqp-warning-text); }
.sla-overdue { background: var(--sqp-critical-light); color: var(--sqp-critical-text); }
.alert-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border-left: 4px solid;
  margin-bottom: 16px;
}
.alert-critical { background: #FEF2F2; border-color: var(--sqp-critical); }
.alert-warning { background: #FFFBEB; border-color: var(--sqp-warning); }
.alert-info { background: var(--sqp-info-light); border-color: var(--sqp-info); }
.alert-success { background: var(--sqp-success-light); border-color: var(--sqp-success); }
.alert-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.alert-title { font-size: 14px; font-weight: 600; margin-bottom: 3px; }
.alert-desc { font-size: 13px; color: var(--sqp-text-secondary); line-height: 1.5; }
.form-group { margin-bottom: 18px; }
.form-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--sqp-text);
  margin-bottom: 6px;
}
.form-control {
  width: 100%;
  height: 38px;
  border: 1px solid var(--sqp-border);
  border-radius: var(--radius-md);
  padding: 0 12px;
  font-size: 14px;
  color: var(--sqp-text);
  background: #fff;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  outline: none;
}
.form-hint { font-size: 12px; color: var(--sqp-text-secondary); margin-top: 5px; }
.form-error { font-size: 12px; color: var(--sqp-critical); margin-top: 5px; }
.tooltip-wrap { position: relative; display: inline-flex; }
.tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1F2937;
  color: #fff;
  font-size: 11px;
  padding: 5px 9px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-fast);
  z-index: 9999;
}
.skeleton {
  background: linear-gradient(90deg, #F0F0F0 25%, #E0E0E0 50%, #F0F0F0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--radius-sm);
}
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  gap: 12px;
}
.empty-icon { font-size: 40px; color: var(--sqp-border); }
.empty-title { font-size: 16px; font-weight: 600; color: var(--sqp-text-secondary); }
.empty-desc { font-size: 13px; color: var(--sqp-text-disabled); max-width: 280px; line-height: 1.5; }
.divider { height: 1px; background: var(--sqp-border); margin: 16px 0; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.grid-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.fade-in { animation: fadeIn 0.3s ease; }
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
  display: none;
}
.modal {
  background: #fff;
  border-radius: var(--radius-lg);
  width: 520px;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-modal);
  animation: fadeIn 0.2s ease;
}
.modal-header {
  padding: 18px 20px;
  border-bottom: 1px solid var(--sqp-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-title { font-size: 16px; font-weight: 600; color: var(--sqp-navy); }
.modal-close {
  width: 28px; height: 28px; border-radius: 6px;
  border: none; background: transparent;
  color: var(--sqp-text-secondary); font-size: 14px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.modal-body { padding: 20px; overflow-y: auto; flex: 1; }
.modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--sqp-border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.dash-wrap { padding:16px 20px 40px; }
.dash-tb {
  height:52px; background:#fff;
  border-bottom:1px solid var(--sqp-border);
  padding:0 20px; display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:40; box-shadow:0 1px 3px rgba(0,0,0,.05);
}
.dtb-l { display:flex; align-items:center; gap:12px; }
.dtb-title { font-size:14.5px; font-weight:700; color:var(--sqp-navy); }
.live-pill { display:flex; align-items:center; gap:5px; font-size:11px; color:var(--sqp-text-secondary); padding:3px 9px; border:1px solid var(--sqp-border); border-radius:20px; }
.live-dot { width:6px; height:6px; border-radius:50%; background:var(--sqp-success); flex-shrink:0; animation:lp 2s infinite; }
.dtb-r { display:flex; align-items:center; gap:7px; }
.chip { font-size:11px; font-weight:600; padding:3px 10px; border-radius:20px; display:flex; align-items:center; gap:5px; white-space:nowrap; }
.chip-iq { background:var(--sqp-primary-light); color:var(--sqp-primary); }
.chip-date { background:#F3F4F6; color:var(--sqp-text-secondary); }
.alert-s {
  background:#FEF2F2; border-bottom:1px solid #FECACA;
  padding:9px 20px; display:flex; align-items:center; gap:12px; font-size:13px;
}
.as-ic { color:var(--sqp-critical); font-size:16px; flex-shrink:0; animation:shake 4s infinite; }
.as-tx { color:#991B1B; font-weight:500; flex:1; }
.as-btn { padding:5px 14px; border-radius:6px; font-size:12px; font-weight:600; background:var(--sqp-critical); color:#fff; border:none; cursor:pointer; font-family:inherit; white-space:nowrap; transition:background .15s; }
.filter-bar {
  background:#fff; border-bottom:1px solid var(--sqp-border);
  padding:10px 20px;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  position:sticky; top:52px; z-index:35;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.fb-label { font-size:11px; font-weight:600; color:var(--sqp-text-secondary); white-space:nowrap; }
.fb-select {
  height:32px; border:1px solid var(--sqp-border); border-radius:7px;
  padding:0 10px; font-size:12px; color:var(--sqp-text); font-family:inherit;
  background:var(--sqp-bg-page); cursor:pointer; outline:none; transition:border-color .15s;
}
.fb-sep { width:1px; height:20px; background:var(--sqp-border); margin:0 4px; }
.fb-chip {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px; border-radius:20px;
  font-size:11px; font-weight:600;
  background:var(--sqp-primary-light); color:var(--sqp-primary);
  border:1px solid rgba(0,94,255,.2);
}
.fb-reset { font-size:12px; color:var(--sqp-critical); font-weight:600; cursor:pointer; background:none; border:none; font-family:inherit; display:flex; align-items:center; gap:4px; }
.fb-summary {
  margin-left:auto; font-size:11px; color:var(--sqp-text-secondary);
  background:var(--sqp-bg-page); padding:3px 10px; border-radius:6px;
  border:1px solid var(--sqp-border); white-space:nowrap;
}
.s-hdr { display:flex; align-items:center; justify-content:space-between; margin:16px 0 8px; }
.s-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:var(--sqp-text-secondary); display:flex; align-items:center; gap:6px; }
.s-link { font-size:12px; font-weight:600; color:var(--sqp-primary); background:none; border:none; cursor:pointer; font-family:inherit; display:flex; align-items:center; gap:4px; }
.kpi-row { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-bottom:12px; }
.kc {
  background:#fff; border:1px solid var(--sqp-border); border-radius:10px;
  padding:12px 13px 9px; cursor:pointer; position:relative; overflow:hidden;
  transition:box-shadow .2s, transform .2s;
}
.kc-bl::after {background:var(--sqp-primary);}
.kc-rd::after {background:var(--sqp-critical);}
.kc-am::after {background:var(--sqp-warning);}
.kc-gn::after {background:var(--sqp-success);}
.kc-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.kc-ic { font-size:13px; }
.ic-bl {color:var(--sqp-primary);}
.ic-rd {color:var(--sqp-critical);}
.ic-am {color:var(--sqp-warning);}
.ic-gn {color:var(--sqp-success);}
.kc-delta { font-size:9.5px; font-weight:700; padding:1px 6px; border-radius:3px; display:flex; align-items:center; gap:2px; }
.d-bad {background:#FEE2E2;color:#B91C1C;}
.d-ok {background:#D1FAE5;color:#065F46;}
.d-flat {background:#F3F4F6;color:#6B7280;}
.kc-val { font-size:25px; font-weight:900; line-height:1; margin-bottom:1px; }
.kv-bl {color:var(--sqp-navy);}
.kv-rd {color:var(--sqp-critical);}
.kv-am {color:#B45309;}
.kv-gn {color:var(--sqp-success-text);}
.kc-lbl { font-size:10.5px; color:var(--sqp-text-secondary); font-weight:500; margin-bottom:5px; }
.kc-zone { display:inline-flex; align-items:center; gap:3px; font-size:9px; font-weight:700; padding:1px 6px; border-radius:3px; margin-bottom:5px; }
.zone-crit { background:#FEE2E2; color:#B91C1C; }
.zone-poor { background:#FFEDD5; color:#C2410C; }
.zone-watch { background:var(--sqp-warning-light); color:var(--sqp-warning-text); }
.zone-good { background:var(--sqp-success-light); color:var(--sqp-success-text); }
.zone-excel { background:#DBEAFE; color:var(--sqp-navy); }
.kc-spark { height:26px; }
.ci-wrap { position:relative; flex-shrink:0; }
.ci-btn { width:24px; height:24px; border-radius:5px; border:1px solid var(--sqp-border); background:var(--sqp-bg-page); color:var(--sqp-text-secondary); cursor:pointer; font-size:11px; display:flex; align-items:center; justify-content:center; transition:all .15s; }
.ci-popup { display:none; position:absolute; right:0; top:30px; z-index:200; width:296px; background:#fff; border:1px solid var(--sqp-border); border-radius:10px; box-shadow:0 8px 28px rgba(0,0,0,.14); font-size:12px; overflow:hidden; }
.ci-ph { display:flex; align-items:center; gap:7px; padding:10px 13px; border-bottom:1px solid var(--sqp-border); background:var(--sqp-bg-page); }
.ci-ph-ic { font-size:14px; }
.ci-ph-t { font-size:12px; font-weight:700; color:var(--sqp-navy); }
.ci-body { padding:9px 13px 7px; color:var(--sqp-text-secondary); line-height:1.55; }
.ci-bl { padding:0 13px 9px; }
.ci-bl-lbl { font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--sqp-text-disabled); margin-bottom:4px; display:flex; align-items:center; gap:4px; }
.ci-formula { display:block; font-family:'DM Mono',monospace; font-size:10.5px; background:#F8F9FA; border:1px solid var(--sqp-border); border-radius:6px; padding:7px 9px; color:var(--sqp-navy); word-break:break-all; line-height:1.5; }
.ci-interp { font-size:11px; color:var(--sqp-text-secondary); line-height:1.6; background:#FFFBEB; border-left:3px solid var(--sqp-warning); padding:6px 9px; border-radius:0 5px 5px 0; }
.ci-src { padding:7px 13px; border-top:1px solid var(--sqp-border); font-size:10px; color:var(--sqp-text-disabled); background:var(--sqp-bg-page); display:flex; align-items:center; gap:5px; }
.cp {
  background:#fff; border:1px solid var(--sqp-border); border-radius:10px;
  box-shadow:0 1px 3px rgba(0,0,0,.04); overflow:visible;
}
.cp-hdr { display:flex; align-items:flex-start; justify-content:space-between; padding:13px 15px 0; gap:8px; }
.cp-hl { flex:1; min-width:0; }
.cp-nm { font-size:13px; font-weight:700; color:var(--sqp-navy); margin-bottom:1px; }
.cp-sb { font-size:11px; color:var(--sqp-text-secondary); display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.cp-tag { font-size:9px; font-weight:700; padding:1px 6px; border-radius:3px; }
.ct-c {background:var(--sqp-critical-light);color:var(--sqp-critical-text);}
.ct-w {background:var(--sqp-warning-light);color:var(--sqp-warning-text);}
.ct-g {background:var(--sqp-success-light);color:var(--sqp-success-text);}
.ct-i {background:var(--sqp-primary-light);color:var(--sqp-primary);}
.cp-bd { padding:8px 15px 14px; }
.gauge-wrap { display:flex; flex-direction:column; }
.gw-sec { padding:12px 15px 6px; }
.gw-nm { font-size:12.5px; font-weight:700; color:var(--sqp-navy); margin-bottom:1px; }
.gw-sb { font-size:11px; color:var(--sqp-text-secondary); margin-bottom:4px; }
.gw-ec { height:150px; }
.gw-foot { display:flex; align-items:center; justify-content:space-between; padding:0 15px 10px; }
.gw-zones { display:flex; gap:5px; flex-wrap:wrap; }
.gz { font-size:9px; font-weight:700; padding:2px 7px; border-radius:3px; }
.gz-c {background:#FEE2E2;color:#B91C1C;}
.gz-p {background:#FFEDD5;color:#C2410C;}
.gz-w {background:var(--sqp-warning-light);color:var(--sqp-warning-text);}
.gz-g {background:var(--sqp-success-light);color:var(--sqp-success-text);}
.gz-e {background:#DBEAFE;color:var(--sqp-navy);}
.gw-gap { font-size:11px; font-weight:700; display:flex; align-items:center; gap:4px; }
.gg-neg { color:var(--sqp-critical); }
.gg-pos { color:var(--sqp-success-text); }
.grid-main { display:grid; grid-template-columns:300px 1fr 1fr; gap:12px; margin-bottom:12px; }
.col-stack { display:flex; flex-direction:column; gap:12px; }
.priority-scroll {
  display:flex; gap:12px; overflow-x:auto; padding-bottom:4px;
  scrollbar-width:thin; scrollbar-color:var(--sqp-border) transparent;
}
.pcard {
  flex-shrink:0; width:280px;
  background:#fff; border:1px solid var(--sqp-border); border-radius:10px;
  overflow:hidden; cursor:pointer; transition:box-shadow .2s, transform .2s;
  box-shadow:0 1px 3px rgba(0,0,0,.05);
}
.pc-top {
  padding:11px 13px 9px;
  display:flex; align-items:flex-start; justify-content:space-between; gap:6px;
}
.pc-id-row { display:flex; align-items:center; gap:6px; margin-bottom:5px; flex-wrap:wrap; }
.pc-id { font-size:11.5px; font-weight:700; color:var(--sqp-primary); font-family:'DM Mono',monospace; }
.pc-days { display:flex; align-items:center; gap:3px; font-size:11px; font-weight:700; padding:2px 8px; border-radius:5px; white-space:nowrap; }
.pcd-c { background:#FEE2E2; color:var(--sqp-critical); }
.pcd-m { background:var(--sqp-warning-light); color:var(--sqp-warning-text); }
.pc-sup { font-size:13px; font-weight:600; color:var(--sqp-text); margin-bottom:2px; }
.pc-part { font-size:11px; font-family:'DM Mono',monospace; color:var(--sqp-text-secondary); margin-bottom:6px; }
.pc-step { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:500; padding:3px 9px; border-radius:5px; background:var(--sqp-critical-light); color:var(--sqp-critical-text); }
.pc-bot {
  padding:8px 13px 10px;
  border-top:1px solid var(--sqp-border);
  background:var(--sqp-bg-page);
  display:flex; align-items:center; justify-content:space-between; gap:6px;
}
.pc-pic { display:flex; align-items:center; gap:6px; }
.pc-avatar { width:24px; height:24px; border-radius:50%; background:var(--sqp-navy); color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.pc-pic-name { font-size:11px; font-weight:500; color:var(--sqp-text-secondary); }
.pc-actions { display:flex; gap:5px; }
.pca-btn { width:28px; height:28px; border-radius:6px; border:1px solid var(--sqp-border); background:#fff; cursor:pointer; font-size:12px; display:flex; align-items:center; justify-content:center; transition:all .15s; color:var(--sqp-text-secondary); }
.pca-view { background:var(--sqp-primary); color:#fff; border-color:var(--sqp-primary); width:auto; padding:0 10px; font-size:11px; font-weight:600; gap:4px; }
.pc-counter { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--sqp-text-secondary); }
.pcc-num { font-size:11px; font-weight:700; padding:2px 9px; border-radius:10px; background:var(--sqp-critical-light); color:var(--sqp-critical-text); }
.drawer-overlay { position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:500; display:none; backdrop-filter:blur(2px); }
.drawer {
  position:fixed; right:0; top:0; bottom:0; width:500px; max-width:95vw;
  background:#fff; z-index:501; display:flex; flex-direction:column;
  box-shadow:-8px 0 40px rgba(0,0,0,.15);
  transform:translateX(100%); transition:transform .25s ease;
}
.drw-hdr {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid var(--sqp-border);
  flex-shrink:0;
}
.drw-title { font-size:15px; font-weight:700; color:var(--sqp-navy); }
.drw-close { width:30px; height:30px; border-radius:7px; border:1px solid var(--sqp-border); background:var(--sqp-bg-page); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--sqp-text-secondary); transition:all .15s; }
.drw-body { flex:1; overflow-y:auto; padding:18px 20px; }
.drw-field { margin-bottom:14px; }
.drw-fl { font-size:11px; font-weight:600; color:var(--sqp-text-secondary); text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px; }
.drw-fv { font-size:13px; color:var(--sqp-text); font-weight:500; }
.drw-divider { height:1px; background:var(--sqp-border); margin:14px 0; }
.drw-step-row { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:7px; margin-bottom:6px; background:var(--sqp-bg-page); }
.drw-step-num { width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; flex-shrink:0; }
.dsn-done { background:var(--sqp-success); color:#fff; }
.dsn-curr { background:var(--sqp-warning); color:#fff; }
.dsn-todo { background:var(--sqp-border); color:var(--sqp-text-disabled); }
.drw-step-name { font-size:12px; font-weight:500; flex:1; }
.drw-step-date { font-size:11px; color:var(--sqp-text-secondary); }
.drw-foot {
  padding:14px 20px; border-top:1px solid var(--sqp-border);
  display:flex; gap:8px; flex-shrink:0;
}
.rank-panel { background:#fff; border:1px solid var(--sqp-border); border-radius:10px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.rp-hdr { padding:11px 15px; border-bottom:1px solid var(--sqp-border); display:flex; align-items:center; justify-content:space-between; }
.rp-tt { font-size:13px; font-weight:700; color:var(--sqp-navy); display:flex; align-items:center; gap:6px; }
.rr { display:flex; align-items:center; gap:9px; padding:9px 15px; border-bottom:1px solid #F9FAFB; cursor:pointer; transition:background .15s; }
.rr-pos { width:18px; font-size:11px; font-weight:700; text-align:center; flex-shrink:0; color:var(--sqp-text-disabled); }
.rr-nm { flex:1; font-size:12px; font-weight:500; color:var(--sqp-text); }
.rr-sp { font-size:10px; color:var(--sqp-text-disabled); }
.rr-sc { display:flex; align-items:center; gap:7px; flex-shrink:0; }
.rr-bar { width:60px; height:5px; background:var(--sqp-border); border-radius:3px; overflow:hidden; }
.rr-fl { height:100%; border-radius:3px; }
.rf-gn {background:var(--sqp-success);}
.rf-am {background:var(--sqp-warning);}
.rf-rd {background:var(--sqp-critical);}
.rr-num { font-size:13px; font-weight:800; min-width:26px; text-align:right; }
.rn-gn {color:var(--sqp-success-text);}
.rn-am {color:var(--sqp-warning-text);}
.rn-rd {color:var(--sqp-critical-text);}
.risk-tag { font-size:9px; font-weight:700; padding:1px 5px; border-radius:3px; background:#FEE2E2; color:#B91C1C; flex-shrink:0; }
.good-tag { font-size:9px; font-weight:700; padding:1px 5px; border-radius:3px; background:#D1FAE5; color:#065F46; flex-shrink:0; }
.hl-leg { display:flex; align-items:center; gap:6px; margin-top:4px; font-size:10px; color:var(--sqp-text-secondary); padding:0 15px 12px; }
.hl-bar { flex:1; height:5px; border-radius:3px; background:linear-gradient(90deg,#EFF6FF,#005EFF); }
html.dark .sidebar-header { border-bottom-color: rgba(255,255,255,.08); }
html.dark .sidebar-logo { background: #1E4480; }
html.dark .sidebar-brand .brand-name { color: #E6EDF3; }
html.dark .nav-item { color: rgba(255,255,255,.5); }
html.dark .nav-group-label { color: rgba(255,255,255,.25); }
html.dark .nav-divider { background: rgba(255,255,255,.08); }
html.dark .sidebar-footer { border-top-color: rgba(255,255,255,.08); }
html.dark .user-chip-sidebar:hover { background: rgba(255,255,255,.06); }
html.dark .user-name { color: #E6EDF3; }
html.dark .sidebar-toggle { background: #1C2230; border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.5); }
html.dark .page-title { color: #E6EDF3; }
html.dark .breadcrumb { color: rgba(255,255,255,.4); }
html.dark .notif-btn { border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.5); }
html.dark .user-chip-topbar { border-color: rgba(255,255,255,.12); }
html.dark .user-fullname { color: #E6EDF3; }
html.dark .card { background: #161B22; border-color: rgba(255,255,255,.09); }
html.dark .card-header { border-bottom-color: rgba(255,255,255,.08); }
html.dark .card-title { color: #93C5FD; }
html.dark .card-footer { background: #0D1117; border-top-color: rgba(255,255,255,.08); }
html.dark .kpi-card { background: #161B22; border-color: rgba(255,255,255,.09); }
html.dark .kpi-value { color: #E6EDF3; }
html.dark .kpi-label { color: #8B949E; }
html.dark .badge-open     { background: rgba(59,130,246,.18); color:#93C5FD; }
html.dark .badge-progress { background: rgba(245,158,11,.18); color:#FCD34D; }
html.dark .badge-review   { background: rgba(124,58,237,.18); color:#C4B5FD; }
html.dark .badge-overdue  { background: rgba(233,2,41,.2);  color:#FCA5A5; }
html.dark .badge-closed   { background: rgba(62,182,69,.18); color:#4ADE80; }
html.dark .badge-approved { background: rgba(62,182,69,.18); color:#4ADE80; }
html.dark .badge-rejected { background: rgba(233,2,41,.2);  color:#FCA5A5; }
html.dark .badge-pending  { background: rgba(245,158,11,.18);color:#FCD34D; }
html.dark .badge-critical-sev { background: rgba(233,2,41,.2); color:#FCA5A5; outline-color: rgba(233,2,41,.4); }
html.dark .badge-major-sev    { background: rgba(245,158,11,.18); color:#FCD34D; }
html.dark .badge-minor-sev    { background: rgba(255,255,255,.08); color:rgba(255,255,255,.5); }
html.dark .data-table-wrap { background: #161B22; border-color: rgba(255,255,255,.09); }
html.dark .td-meta { color: rgba(255,255,255,.35); }
html.dark .table-toolbar { border-bottom-color: rgba(255,255,255,.08); }
html.dark .table-title { color: #93C5FD; }
html.dark .filter-select { background: #0D1117; border-color: rgba(255,255,255,.12); color: #E6EDF3; }
html.dark .filter-search { background: #0D1117; border-color: rgba(255,255,255,.12); color: #E6EDF3; }
html.dark .table-footer { background: #0D1117; border-top-color: rgba(255,255,255,.08); color: rgba(255,255,255,.4); }
html.dark .page-btn { background: #161B22; border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.5); }
html.dark .form-control { background: #0D1117; border-color: rgba(255,255,255,.12); color: #E6EDF3; }
html.dark .form-label { color: #E6EDF3; }
html.dark .form-hint { color: rgba(255,255,255,.4); }
html.dark .btn-secondary { border-color: #60A5FA; color: #60A5FA; }
html.dark .btn-outline { border-color: rgba(255,255,255,.15); color: rgba(255,255,255,.6); }
html.dark .sla-ok      { background: rgba(62,182,69,.18);  color: #4ADE80; }
html.dark .sla-warning { background: rgba(245,158,11,.18); color: #FCD34D; }
html.dark .sla-overdue { background: rgba(233,2,41,.2);   color: #FCA5A5; }
html.dark .modal { background: #161B22; }
html.dark .modal-header { border-bottom-color: rgba(255,255,255,.08); }
html.dark .modal-title { color: #93C5FD; }
html.dark .modal-close { color: rgba(255,255,255,.5); }
html.dark .modal-footer { border-top-color: rgba(255,255,255,.08); }
html.dark .empty-title { color: rgba(255,255,255,.4); }
html.dark .empty-desc  { color: rgba(255,255,255,.25); }
html.dark .skeleton { background: linear-gradient(90deg, #1C2230 25%, #243040 50%, #1C2230 75%); }
html.dark .alert-critical { background: rgba(233,2,41,.12);  border-color: rgba(233,2,41,.4); }
html.dark .alert-warning  { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.3); }
html.dark .alert-info     { background: rgba(59,130,246,.1); border-color: rgba(59,130,246,.3); }
html.dark .alert-success  { background: rgba(62,182,69,.1);  border-color: rgba(62,182,69,.3); }
html.dark .theme-toggle { border-color: rgba(255,255,255,.15); }
html.dark .dash-tb      { background: #111827; border-bottom-color: rgba(255,255,255,.08); }
html.dark .dtb-title    { color: #E6EDF3; }
html.dark .live-pill    { border-color: rgba(255,255,255,.1); color: rgba(255,255,255,.45); }
html.dark .chip-iq      { background: rgba(96,165,250,.15); color: #93C5FD; }
html.dark .chip-date    { background: rgba(255,255,255,.07); color: rgba(255,255,255,.5); }
html.dark .alert-s      { background: rgba(233,2,41,.12); border-bottom-color: rgba(233,2,41,.25); }
html.dark .as-tx        { color: #FCA5A5; }
html.dark .filter-bar   { background: #111827; border-bottom-color: rgba(255,255,255,.08); }
html.dark .fb-label     { color: rgba(255,255,255,.4); }
html.dark .fb-select    { background: #0D1117; border-color: rgba(255,255,255,.12); color: #E6EDF3; }
html.dark .fb-summary   { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); color: rgba(255,255,255,.5); }
html.dark .fb-reset     { color: #FCA5A5; }
html.dark .fb-sep       { background: rgba(255,255,255,.1); }
html.dark .s-title      { color: rgba(255,255,255,.4); }
html.dark .s-link       { color: #60A5FA; }
html.dark .kc           { background: #161B22; border-color: rgba(255,255,255,.09); }
html.dark .kv-bl        { color: #93C5FD; }
html.dark .kv-rd        { color: #FCA5A5; }
html.dark .kv-am        { color: #FCD34D; }
html.dark .kv-gn        { color: #4ADE80; }
html.dark .kc-lbl       { color: rgba(255,255,255,.5); }
html.dark .d-bad        { background: rgba(233,2,41,.2);  color: #FCA5A5; }
html.dark .d-ok         { background: rgba(62,182,69,.2); color: #4ADE80; }
html.dark .d-flat       { background: rgba(255,255,255,.08); color: rgba(255,255,255,.4); }
html.dark .cp           { background: #161B22; border-color: rgba(255,255,255,.09); }
html.dark .cp-nm        { color: #93C5FD; }
html.dark .cp-sb        { color: rgba(255,255,255,.45); }
html.dark .ci-btn       { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.5); }
html.dark .ci-popup     { background: #1C2230; border-color: rgba(255,255,255,.12); box-shadow: 0 8px 32px rgba(0,0,0,.6); }
html.dark .ci-ph        { background: #111827; border-bottom-color: rgba(255,255,255,.08); }
html.dark .ci-ph-t      { color: #93C5FD; }
html.dark .ci-body      { color: rgba(255,255,255,.55); }
html.dark .ci-bl-lbl    { color: rgba(255,255,255,.3); }
html.dark .ci-formula   { background: #0D1117; border-color: rgba(255,255,255,.1); color: #93C5FD; }
html.dark .ci-interp    { background: rgba(245,158,11,.08); color: rgba(255,255,255,.55); border-left-color: rgba(245,158,11,.35); }
html.dark .ci-src       { background: #111827; border-top-color: rgba(255,255,255,.08); color: rgba(255,255,255,.3); }
html.dark .gw-sec + .gw-sec { border-top-color: rgba(255,255,255,.08); }
html.dark .gw-nm        { color: #93C5FD; }
html.dark .gw-sb        { color: rgba(255,255,255,.45); }
html.dark .gz-c         { background: rgba(239,68,68,.2);  color: #FCA5A5; }
html.dark .gz-p         { background: rgba(249,115,22,.18); color: #FBB740; }
html.dark .gz-w         { background: rgba(245,158,11,.18); color: #FCD34D; }
html.dark .gz-g         { background: rgba(134,239,172,.15); color: #86EFAC; }
html.dark .gz-e         { background: rgba(96,165,250,.15); color: #93C5FD; }
html.dark .gw-foot      { }
html.dark .gw-gap.gg-neg { color: #FCA5A5; }
html.dark .pcard        { background: #161B22; border-color: rgba(255,255,255,.09); }
html.dark .pc-sup       { color: #E6EDF3; }
html.dark .pc-part      { color: rgba(255,255,255,.4); }
html.dark .pc-bot       { background: #111827; border-top-color: rgba(255,255,255,.08); }
html.dark .pc-pic-name  { color: rgba(255,255,255,.5); }
html.dark .pca-btn      { border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: rgba(255,255,255,.5); }
html.dark .pcc-num      { background: rgba(233,2,41,.2); color: #FCA5A5; }
html.dark .drawer       { background: #161B22; box-shadow: -8px 0 40px rgba(0,0,0,.6); }
html.dark .drw-hdr      { border-bottom-color: rgba(255,255,255,.08); }
html.dark .drw-title    { color: #93C5FD; }
html.dark .drw-close    { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.5); }
html.dark .drw-fl       { color: rgba(255,255,255,.35); }
html.dark .drw-fv       { color: #E6EDF3; }
html.dark .drw-divider  { background: rgba(255,255,255,.08); }
html.dark .drw-step-row { background: rgba(255,255,255,.04); }
html.dark .drw-step-name { color: #E6EDF3; }
html.dark .drw-step-date { color: rgba(255,255,255,.4); }
html.dark .dsn-todo     { background: rgba(255,255,255,.1); }
html.dark .drw-foot     { border-top-color: rgba(255,255,255,.08); }
html.dark .rank-panel   { background: #161B22; border-color: rgba(255,255,255,.09); }
html.dark .rp-hdr       { border-bottom-color: rgba(255,255,255,.08); }
html.dark .rp-tt        { color: #93C5FD; }
html.dark .rr           { border-bottom-color: rgba(255,255,255,.05); }
html.dark .rr-nm        { color: #E6EDF3; }
html.dark .rr-sp        { color: rgba(255,255,255,.3); }
html.dark .rr-bar       { background: rgba(255,255,255,.1); }
html.dark .rn-gn        { color: #4ADE80; }
html.dark .rn-am        { color: #FCD34D; }
html.dark .rn-rd        { color: #FCA5A5; }
html.dark .risk-tag     { background: rgba(233,2,41,.2); color: #FCA5A5; }
html.dark .good-tag     { background: rgba(62,182,69,.18); color: #4ADE80; }
html.dark .hl-leg       { color: rgba(255,255,255,.4); }
html.dark .alert-desc { color: rgba(255,255,255,.6); }
.pg-topbar {
  height: 52px; background: var(--sqp-bg-card);
  border-bottom: 1px solid var(--sqp-border);
  padding: 0 20px; display: flex; align-items: center;
  justify-content: space-between; position: sticky; top: 0; z-index: 40;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.pt-left { display: flex; align-items: center; gap: 10px; }
.pt-title { font-size: 14.5px; font-weight: 700; color: var(--sqp-navy); }
.pt-right { display: flex; align-items: center; gap: 8px; }
.form-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 16px;
  padding: 18px 20px 40px;
  align-items: start;
}
.form-col { display: flex; flex-direction: column; gap: 14px; }
.aside-col { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 68px; }
.form-card {
  background: var(--sqp-bg-card); border: 1px solid var(--sqp-border);
  border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.fc-hdr {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 18px; border-bottom: 1px solid var(--sqp-border);
}
.fc-step {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--sqp-navy); color: #fff;
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.fc-hdr-text h3 { font-size: 13px; font-weight: 700; color: var(--sqp-navy); }
.fc-body { padding: 18px; }
.fc-grid { display: grid; gap: 14px; }
.fc-grid-2 { grid-template-columns: 1fr 1fr; }
.fc-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.fg { display: flex; flex-direction: column; gap: 5px; }
.fl {
  font-size: 12px; font-weight: 600; color: var(--sqp-text);
  display: flex; align-items: center; gap: 4px;
}
.fi {
  height: 38px; border: 1px solid var(--sqp-border); border-radius: 8px;
  padding: 0 12px; font-size: 13px; color: var(--sqp-text);
  background: var(--sqp-bg-page); font-family: inherit; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.fe { font-size: 11px; color: var(--sqp-critical); display: flex; align-items: center; gap: 4px; opacity: 0; max-height: 0; transition: opacity .2s, max-height .2s; }
.fh { font-size: 11px; color: var(--sqp-text-secondary); }
.fi-wrap { position: relative; }
.ac-wrap { position: relative; }
.ac-list {
  display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 100;
  background: var(--sqp-bg-card); border: 1px solid var(--sqp-border);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12); margin-top: 3px;
  max-height: 200px; overflow-y: auto;
}
.ac-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; cursor: pointer; transition: background .12s;
}
.ac-item-name { font-size: 13px; font-weight: 500; color: var(--sqp-text); }
.ac-item-code { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--sqp-text-secondary); }
.ac-item-badge { font-size: 10px; padding: 1px 6px; border-radius: 4px; }
.sev-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.sev-card {
  border: 2px solid var(--sqp-border); border-radius: 10px;
  padding: 14px 14px 12px; cursor: pointer; transition: all .15s;
  position: relative; background: var(--sqp-bg-card); text-align: center;
}
.sev-radio { display: none; }
.sev-ic { font-size: 22px; margin-bottom: 8px; }
.sev-name { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.sev-desc { font-size: 11px; color: var(--sqp-text-secondary); line-height: 1.5; }
.sev-sla { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 20px; margin-top: 8px; display: inline-block; }
.sev-minor    .sev-name { color: #6B7280; }
.sev-major    .sev-name { color: #B45309; }
.sev-critical .sev-name { color: var(--sqp-critical); }
.sev-check { position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; border-radius: 50%; display: none; align-items: center; justify-content: center; font-size: 9px; color: #fff; }
.selected-minor .sev-check { display: flex; background: #9CA3AF; }
.selected-major .sev-check { display: flex; background: var(--sqp-warning); }
.selected-critical .sev-check { display: flex; background: var(--sqp-critical); }
.critical-alert {
  display: none; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: 8px; margin-top: 12px;
  background: #FEF2F2; border-left: 3px solid var(--sqp-critical); border: 1px solid #FECACA;
}
.critical-alert-text { font-size: 12px; color: #B91C1C; line-height: 1.6; }
.detect-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.detect-card {
  border: 1.5px solid var(--sqp-border); border-radius: 8px; padding: 10px 8px;
  cursor: pointer; text-align: center; transition: all .15s; background: var(--sqp-bg-card);
}
.dropzone {
  border: 2px dashed var(--sqp-border); border-radius: 10px;
  padding: 28px 20px; text-align: center; cursor: pointer;
  transition: all .2s; background: var(--sqp-bg-page);
}
.dz-icon { font-size: 28px; color: var(--sqp-text-disabled); margin-bottom: 8px; }
.dz-text { font-size: 13px; font-weight: 500; color: var(--sqp-text-secondary); margin-bottom: 4px; }
.dz-sub { font-size: 11px; color: var(--sqp-text-disabled); }
.dz-types { display: flex; gap: 6px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.dz-type { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 4px; background: var(--sqp-bg-card); border: 1px solid var(--sqp-border); color: var(--sqp-text-secondary); }
.file-list { margin-top: 12px; display: flex; flex-direction: column; gap: 7px; }
.file-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--sqp-bg-card); border: 1px solid var(--sqp-border); border-radius: 8px; }
.fi-icon2 { font-size: 16px; color: var(--sqp-primary); flex-shrink: 0; }
.fi-name { flex: 1; font-size: 12px; font-weight: 500; color: var(--sqp-text); }
.fi-size { font-size: 11px; color: var(--sqp-text-disabled); }
.fi-rm { width: 24px; height: 24px; border-radius: 5px; border: none; background: none; cursor: pointer; color: var(--sqp-text-disabled); display: flex; align-items: center; justify-content: center; font-size: 12px; transition: all .15s; }
.notif-info {
  background: #F0F7FF; border: 1px solid #BFDBFE; border-radius: 8px;
  padding: 13px 15px;
}
.ni-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ni-ic { width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.ni-text { font-size: 12px; color: #1E40AF; }
.aside-card {
  background: var(--sqp-bg-card); border: 1px solid var(--sqp-border);
  border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.ac2-hdr { padding: 12px 15px; border-bottom: 1px solid var(--sqp-border); }
.ac2-body { padding: 14px 15px; }
.sup-preview {
  background: var(--sqp-bg-page); border: 1px solid var(--sqp-border);
  border-radius: 8px; padding: 12px 13px; margin-bottom: 12px;
}
.sp-empty { text-align: center; padding: 10px; }
.sp-empty-ic { font-size: 24px; color: var(--sqp-border); margin-bottom: 6px; }
.sp-empty-t { font-size: 11px; color: var(--sqp-text-disabled); }
.sp-name { font-size: 14px; font-weight: 700; color: var(--sqp-text); margin-bottom: 8px; }
.sp-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.sp-lbl { font-size: 11px; color: var(--sqp-text-secondary); }
.sp-val { font-size: 12px; font-weight: 600; color: var(--sqp-text); }
.sp-score-bar { height: 5px; background: var(--sqp-border); border-radius: 3px; overflow: hidden; margin-top: 8px; }
.sp-score-fill { height: 100%; border-radius: 3px; transition: width .5s; }
.sp-contact { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--sqp-border); font-size: 11px; color: var(--sqp-text-secondary); display: flex; flex-direction: column; gap: 3px; }
.form-checklist { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.fc-item { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.fc-chk { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--sqp-border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .15s; }
.fc-lbl { color: var(--sqp-text-secondary); }
.btn-submit-lg {
  width: 100%; height: 44px; background: var(--sqp-primary); color: #fff;
  border: none; border-radius: 9px; font-size: 14px; font-weight: 700;
  font-family: inherit; cursor: pointer; display: flex; align-items: center;
  justify-content: center; gap: 8px; transition: background .15s, box-shadow .15s, transform .1s;
}
.btn-draft { width: 100%; height: 38px; background: none; border: 1.5px solid var(--sqp-border); border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--sqp-text-secondary); font-family: inherit; cursor: pointer; margin-top: 8px; transition: all .15s; display: flex; align-items: center; justify-content: center; gap: 6px; }
.sla-preview { padding: 10px 12px; border-radius: 8px; border: 1px solid var(--sqp-border); font-size: 12px; margin-bottom: 12px; display: none; }
.sla-p-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--sqp-text-disabled); margin-bottom: 4px; }
.sla-p-days { font-size: 18px; font-weight: 800; }
.sla-minor { background: #F9FAFB; border-color: var(--sqp-border); }
.sla-major { background: #FFFBEB; border-color: #FDE68A; }
.sla-critical { background: #FEF2F2; border-color: #FECACA; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 600; display: none; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
.success-modal { background: var(--sqp-bg-card); border-radius: 16px; padding: 32px; max-width: 400px; width: 90%; text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,.2); animation: mfade .25s ease; }
.sm-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--sqp-success-light); color: var(--sqp-success); font-size: 28px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.sm-title { font-size: 20px; font-weight: 800; color: var(--sqp-navy); margin-bottom: 6px; }
.sm-id { font-family: 'DM Mono', monospace; font-size: 16px; font-weight: 700; color: var(--sqp-primary); background: var(--sqp-primary-light); padding: 6px 16px; border-radius: 8px; display: inline-block; margin: 8px 0 12px; }
.sm-desc { font-size: 13px; color: var(--sqp-text-secondary); line-height: 1.6; margin-bottom: 20px; }
.sm-notif { display: flex; flex-direction: column; gap: 7px; margin-bottom: 24px; text-align: left; background: var(--sqp-bg-page); border-radius: 8px; padding: 12px 14px; }
.sm-notif-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--sqp-text-secondary); }
.sm-actions { display: flex; flex-direction: column; gap: 8px; }
html.dark .brand-name   { color: #E6EDF3; }
html.dark .brand-client { color: rgba(255,255,255,.45); }
html.dark .nav-icon     { color: rgba(255,255,255,.45); }
html.dark .bc-current { color: rgba(255,255,255,.7); }
html.dark .bc-sep     { color: rgba(255,255,255,.2); }
html.dark .coming-soon { color: rgba(255,255,255,.2) !important; }
html.dark .nav-p2-badge { background: rgba(96,165,250,.18); color: #93C5FD; }
html.dark .avatar-circle { background: #1E3A5F; color: #93C5FD; }
html.dark .role-iq       { background: rgba(96,165,250,.18); color: #93C5FD; }
html.dark .role-supplier { background: rgba(62,182,69,.18);  color: #4ADE80; }
html.dark .role-admin    { background: rgba(124,58,237,.18); color: #C4B5FD; }
html.dark .role-customer { background: rgba(245,158,11,.18); color: #FCD34D; }
html.dark .role-management { background: rgba(59,130,246,.18); color: #93C5FD; }
html.dark .notif-badge { background: var(--sqp-critical); color: #fff; }
html.dark .btn-primary { background: #2563EB; box-shadow: none; }
html.dark .btn-danger  { background: #DC2626; }
html.dark .btn-ghost   { color: #93C5FD; }
html.dark .card-subtitle { color: rgba(255,255,255,.45); }
html.dark .ic-blue   { background: rgba(96,165,250,.18); color: #93C5FD; }
html.dark .ic-green  { background: rgba(62,182,69,.18);  color: #4ADE80; }
html.dark .ic-amber  { background: rgba(245,158,11,.18); color: #FCD34D; }
html.dark .ic-red    { background: rgba(233,2,41,.18);   color: #FCA5A5; }
html.dark .ic-purple { background: rgba(124,58,237,.18); color: #C4B5FD; }
html.dark .ic-navy   { background: rgba(96,165,250,.15); color: #93C5FD; }
html.dark .kpi-trend.up   { background: rgba(62,182,69,.18); color: #4ADE80; }
html.dark .badge-scheduled { background: rgba(59,130,246,.18); color: #93C5FD; }
html.dark .badge-p2        { border-color: rgba(96,165,250,.35); color: #93C5FD; }
html.dark .alert-icon  { }
html.dark .alert-desc  { color: rgba(255,255,255,.6); }
html.dark .alert-title { }
html.dark .form-error      { color: #FCA5A5; }
html.dark .tooltip {
  background: #1C2230;
  border: 1px solid rgba(255,255,255,.12);
  color: #E6EDF3;
  box-shadow: 0 4px 12px rgba(0,0,0,.5);
}
html.dark .empty-icon  { color: rgba(255,255,255,.12); }
html.dark .modal-overlay { background: rgba(0,0,0,.65); }
html.dark .sla-icon    { }
html.dark .badge {
  /* Base reset — specifics below */
}
html.dark .pg-topbar { background: #111827; border-bottom-color: rgba(255,255,255,.08); }
html.dark .pt-title  { color: #E6EDF3; }
html.dark .form-card  { background: #161B22; border-color: rgba(255,255,255,.09); }
html.dark .fc-hdr     { border-bottom-color: rgba(255,255,255,.08); }
html.dark .fc-hdr-text h3 { color: #93C5FD; }
html.dark .fi { background: #0D1117; border-color: rgba(255,255,255,.12); color: #E6EDF3; }
html.dark .fl { color: #E6EDF3; }
html.dark .fh { color: rgba(255,255,255,.4); }
html.dark .fe { color: #FCA5A5; }
html.dark .ac-list { background: #1C2230; border-color: rgba(255,255,255,.12); box-shadow: 0 8px 24px rgba(0,0,0,.5); }
html.dark .ac-item:hover { background: rgba(96,165,250,.12); }
html.dark .ac-item-name { color: #E6EDF3; }
html.dark .ac-item-code { color: rgba(255,255,255,.4); }
html.dark .sev-card { background: #1C2230; border-color: rgba(255,255,255,.1); }
html.dark .sev-minor .sev-name { color: rgba(255,255,255,.6); }
html.dark .sev-major .sev-name { color: #FCD34D; }
html.dark .sev-critical .sev-name { color: #FCA5A5; }
html.dark .sev-desc { color: rgba(255,255,255,.4); }
html.dark .critical-alert { background: rgba(233,2,41,.1); border-color: rgba(233,2,41,.3); border-left-color: var(--sqp-critical); }
html.dark .critical-alert-text { color: #FCA5A5; }
html.dark .detect-card { background: #1C2230; border-color: rgba(255,255,255,.1); }
html.dark .dropzone { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.12); }
html.dark .dz-type { background: #1C2230; border-color: rgba(255,255,255,.1); color: rgba(255,255,255,.4); }
html.dark .file-item { background: #1C2230; border-color: rgba(255,255,255,.1); }
html.dark .fi-name { color: #E6EDF3; }
html.dark .fi-size { color: rgba(255,255,255,.35); }
html.dark .fi-rm:hover { background: rgba(233,2,41,.2); color: #FCA5A5; }
html.dark .notif-info { background: rgba(59,130,246,.08); border-color: rgba(59,130,246,.2); }
html.dark .ni-text { color: #93C5FD; }
html.dark .aside-card { background: #161B22; border-color: rgba(255,255,255,.09); }
html.dark .ac2-hdr { border-bottom-color: rgba(255,255,255,.08); }
html.dark .sup-preview { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
html.dark .sp-name { color: #E6EDF3; }
html.dark .sp-lbl { color: rgba(255,255,255,.4); }
html.dark .sp-val { color: #E6EDF3; }
html.dark .sp-score-bar { background: rgba(255,255,255,.1); }
html.dark .sp-contact { border-top-color: rgba(255,255,255,.08); color: rgba(255,255,255,.4); }
html.dark .fc-chk { border-color: rgba(255,255,255,.15); }
html.dark .fc-lbl { color: rgba(255,255,255,.4); }
html.dark .btn-draft { border-color: rgba(255,255,255,.15); color: rgba(255,255,255,.5); }
html.dark .sla-preview { border-color: rgba(255,255,255,.1); }
html.dark .sla-minor    { background: rgba(255,255,255,.04); }
html.dark .sla-major    { background: rgba(245,158,11,.08); border-color: rgba(245,158,11,.25); }
html.dark .sla-critical { background: rgba(233,2,41,.08); border-color: rgba(233,2,41,.25); }
html.dark .success-modal { background: #161B22; }
html.dark .sm-title { color: #93C5FD; }
html.dark .sm-icon { background: rgba(62,182,69,.15); }
html.dark .sm-id { background: rgba(96,165,250,.15); }
html.dark .sm-desc { color: rgba(255,255,255,.55); }
html.dark .sm-notif { background: rgba(255,255,255,.04); }
html.dark .sm-notif-row { color: rgba(255,255,255,.55); }
.fbar {
  background: var(--sqp-bg-card); border-bottom: 1px solid var(--sqp-border);
  padding: 10px 20px; position: sticky; top: 52px; z-index: 35;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.fbar-row1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.fbar-row2 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fb-lbl { font-size: 11px; font-weight: 600; color: var(--sqp-text-secondary); white-space: nowrap; }
.fb-sel {
  height: 32px; border: 1px solid var(--sqp-border); border-radius: 7px;
  padding: 0 10px; font-size: 12px; color: var(--sqp-text); font-family: inherit;
  background: var(--sqp-bg-page); cursor: pointer; outline: none;
  transition: border-color .15s, background .15s;
}
.fb-date { height: 32px; border: 1px solid var(--sqp-border); border-radius: 7px; padding: 0 10px; font-size: 12px; color: var(--sqp-text); font-family: inherit; background: var(--sqp-bg-page); outline: none; transition: border-color .15s; }
.toggle-wrap { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.toggle-track {
  width: 36px; height: 20px; border-radius: 10px; background: var(--sqp-border);
  position: relative; transition: background .2s; flex-shrink: 0;
}
.toggle-knob {
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
  position: absolute; top: 2px; left: 2px;
  transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.toggle-label { font-size: 12px; font-weight: 600; color: var(--sqp-text-secondary); }
.fc { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; background: var(--sqp-primary-light); color: var(--sqp-primary); border: 1px solid rgba(0,94,255,.2); }
.fb-clear { font-size: 12px; font-weight: 600; color: var(--sqp-critical); background: none; border: none; cursor: pointer; font-family: inherit; display: flex; align-items: center; gap: 4px; }
.pg-wrap { padding: 18px 20px 40px; }
.mini-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.mk {
  background: var(--sqp-bg-card); border: 1px solid var(--sqp-border);
  border-radius: 10px; padding: 12px 14px; cursor: pointer;
  transition: box-shadow .2s, transform .2s; position: relative; overflow: hidden;
}
.mk-all::after { background: var(--sqp-navy); }
.mk-open::after { background: var(--sqp-primary); }
.mk-ov::after { background: var(--sqp-critical); }
.mk-cls::after { background: var(--sqp-success); }
.mk-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; }
.mk-num { font-size: 28px; font-weight: 900; line-height: 1; }
.mn-all { color: var(--sqp-navy); }
.mn-open { color: var(--sqp-primary); }
.mn-ov { color: var(--sqp-critical); }
.mn-cls { color: var(--sqp-success-text); }
.mk-lbl { font-size: 11px; color: var(--sqp-text-secondary); font-weight: 500; margin-bottom: 3px; }
.mk-ic { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.mk-sub { font-size: 10px; color: var(--sqp-text-disabled); }
.mk-delta { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px; }
.md-up { background: #FEE2E2; color: #B91C1C; }
.md-dn { background: #D1FAE5; color: #065F46; }
.md-flat { background: #F3F4F6; color: #6B7280; }
.list-card {
  background: var(--sqp-bg-card); border: 1px solid var(--sqp-border);
  border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.lc-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px; border-bottom: 1px solid var(--sqp-border);
  gap: 10px; flex-wrap: wrap;
}
.lc-t-left { display: flex; align-items: center; gap: 10px; }
.lc-title { font-size: 13px; font-weight: 700; color: var(--sqp-navy); display: flex; align-items: center; gap: 7px; }
.lc-count { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 10px; background: var(--sqp-primary-light); color: var(--sqp-primary); }
.lc-t-right { display: flex; align-items: center; gap: 7px; }
.tb-search { position: relative; }
.tb-search-ic { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--sqp-text-disabled); font-size: 12px; pointer-events: none; }
.sort-label { font-size: 11px; color: var(--sqp-text-secondary); display: flex; align-items: center; gap: 4px; }
.sppr-table-wrap { overflow-x: auto; }
.sppr-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.th-arrow { font-size: 9px; margin-left: 4px; opacity: .5; }
.tr-overdue td:first-child { border-left: 3px solid var(--sqp-critical); padding-left: 11px; }
.tr-closed { opacity: .75; }
.tr-selected td { background: rgba(0,94,255,.04) !important; }
.cb-col { width: 42px; min-width: 42px; }
.row-cb { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--sqp-border); cursor: pointer; accent-color: var(--sqp-primary); }
.sppr-id-cell { display: flex; flex-direction: column; gap: 2px; }
.sppr-id { font-family: 'DM Mono', monospace; font-size: 12px; font-weight: 700; color: var(--sqp-primary); }
.sppr-date { font-size: 10px; color: var(--sqp-text-disabled); }
.sup-cell { display: flex; flex-direction: column; gap: 2px; }
.sup-name { font-weight: 600; font-size: 12.5px; color: var(--sqp-text); }
.sup-code { font-family: 'DM Mono', monospace; font-size: 10.5px; color: var(--sqp-text-secondary); background: var(--sqp-bg-page); padding: 1px 6px; border-radius: 4px; border: 1px solid var(--sqp-border); display: inline-block; }
.sev-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.sev-crit { background: #FEE2E2; color: #B91C1C; }
.st-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 6px; white-space: nowrap; }
.st-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.st-open { background: #EFF6FF; color: #1D4ED8; }
.st-inprog { background: #FEF3C7; color: #B45309; }
.st-pending { background: #EDE9FE; color: #5B21B6; }
.st-closed { background: #E8F7E9; color: #166534; }
.st-overdue { background: #FEE2E2; color: #B91C1C; }
.step-badge { font-size: 10.5px; color: var(--sqp-text-secondary); background: var(--sqp-bg-page); padding: 3px 8px; border-radius: 5px; border: 1px solid var(--sqp-border); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.no-step { color: var(--sqp-text-disabled); font-size: 11px; }
.days-cell { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.days-num { font-size: 13px; font-weight: 700; }
.d-warn { color: #B45309; }
.d-over { color: var(--sqp-critical); }
.sla-pip { display: flex; align-items: center; gap: 4px; font-size: 10px; }
.sla-dot { width: 5px; height: 5px; border-radius: 50%; }
.sla-warn { color: #B45309; }
.sla-over { color: var(--sqp-critical); font-weight: 700; }
.pic-cell { display: flex; align-items: center; gap: 7px; }
.pic-av { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #fff; flex-shrink: 0; }
.av-blue { background: var(--sqp-primary); }
.av-green { background: var(--sqp-success-text); }
.av-purple { background: var(--sqp-purple); }
.av-navy { background: var(--sqp-navy); }
.pic-name { font-size: 12px; font-weight: 500; color: var(--sqp-text); }
.pic-role { font-size: 10px; color: var(--sqp-text-disabled); }
.action-cell { display: flex; align-items: center; gap: 5px; justify-content: flex-end; }
.act-btn { width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--sqp-border); background: var(--sqp-bg-card); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--sqp-text-secondary); transition: all .15s; }
.act-view { background: var(--sqp-primary); color: #fff; border-color: var(--sqp-primary); width: auto; padding: 0 10px; font-size: 11px; font-weight: 600; gap: 4px; }
.bulk-bar {
  display: none; align-items: center; gap: 12px; padding: 8px 16px;
  background: var(--sqp-primary-light); border-bottom: 1px solid rgba(0,94,255,.15);
  font-size: 12px; font-weight: 500; color: var(--sqp-primary);
}
.bb-count { font-weight: 700; }
.bb-action { padding: 4px 12px; border-radius: 6px; font-size: 11px; font-weight: 600; border: 1px solid rgba(0,94,255,.3); background: #fff; color: var(--sqp-primary); cursor: pointer; font-family: inherit; transition: all .15s; }
.bb-dismiss { margin-left: auto; cursor: pointer; color: var(--sqp-primary); opacity: .6; background: none; border: none; font-size: 14px; }
.pag-left { display: flex; align-items: center; gap: 8px; }
.pag-right { display: flex; align-items: center; gap: 4px; }
.pag-btn {
  width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--sqp-border);
  background: var(--sqp-bg-card); cursor: pointer; display: flex; align-items: center;
  justify-content: center; font-size: 11px; font-weight: 600; color: var(--sqp-text-secondary);
  transition: all .15s;
}
.pag-size { height: 30px; border: 1px solid var(--sqp-border); border-radius: 6px; padding: 0 8px; font-size: 11px; font-family: inherit; background: var(--sqp-bg-card); color: var(--sqp-text); outline: none; }
.es-icon { font-size: 40px; color: var(--sqp-border); margin-bottom: 14px; }
.es-title { font-size: 15px; font-weight: 600; color: var(--sqp-text-secondary); margin-bottom: 6px; }
.es-desc { font-size: 13px; color: var(--sqp-text-disabled); max-width: 380px; line-height: 1.6; }
.drw-hdr-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.drw-sppr-id { font-family: 'DM Mono', monospace; font-size: 14px; font-weight: 700; color: var(--sqp-primary); }
.drw-scroll { flex: 1; overflow-y: auto; padding: 16px 18px; }
.drw-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.drw-ml { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--sqp-text-disabled); margin-bottom: 3px; }
.drw-mv { font-size: 13px; font-weight: 500; color: var(--sqp-text); }
.drw-sec-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--sqp-text-secondary); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.step-timeline { display: flex; flex-direction: column; gap: 6px; }
.step-item { display: flex; align-items: flex-start; gap: 10px; }
.step-connector { display: flex; flex-direction: column; align-items: center; gap: 0; flex-shrink: 0; }
.step-circ { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0; }
.sc-done { background: var(--sqp-success); color: #fff; }
.sc-curr { background: var(--sqp-warning); color: #fff; }
.sc-todo { background: var(--sqp-border); color: var(--sqp-text-disabled); }
.sc-overdue { background: var(--sqp-critical); color: #fff; }
.step-line { width: 2px; flex: 1; min-height: 16px; background: var(--sqp-border); margin: 3px 0; }
.step-body { flex: 1; padding-bottom: 8px; }
.step-name { font-size: 12px; font-weight: 600; color: var(--sqp-text); }
.step-meta { font-size: 11px; color: var(--sqp-text-secondary); margin-top: 2px; }
.prob-box { background: var(--sqp-bg-page); border: 1px solid var(--sqp-border); border-radius: 8px; padding: 12px 14px; font-size: 12.5px; color: var(--sqp-text); line-height: 1.6; }
.prob-expand { font-size: 11px; color: var(--sqp-primary); cursor: pointer; margin-top: 6px; background: none; border: none; font-family: inherit; font-weight: 600; }
.sla-box { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; }
.sla-ok-box { background: #E8F7E9; border: 1px solid #A7F3D0; }
.sla-warn-box { background: #FEF3C7; border: 1px solid #FDE68A; }
.sla-over-box { background: #FEE2E2; border: 1px solid #FECACA; }
.sla-box-ic { font-size: 18px; flex-shrink: 0; }
.sla-box-text h4 { font-size: 12.5px; font-weight: 700; margin-bottom: 2px; }
html.dark .fbar { background: #111827; border-bottom-color: rgba(255,255,255,.08); }
html.dark .fb-sel { background: #0D1117; border-color: rgba(255,255,255,.12); color: #E6EDF3; }
html.dark .fb-date { background: #0D1117; border-color: rgba(255,255,255,.12); color: #E6EDF3; }
html.dark .toggle-track { background: rgba(255,255,255,.1); }
html.dark .toggle-label { color: rgba(255,255,255,.5); }
html.dark .fb-lbl { color: rgba(255,255,255,.4); }
html.dark .fc { background: rgba(96,165,250,.15); color: #93C5FD; border-color: rgba(96,165,250,.25); }
html.dark .fb-clear { color: #FCA5A5; }
html.dark .mk { background: #161B22; border-color: rgba(255,255,255,.09); }
html.dark .mn-all { color: #93C5FD; }
html.dark .mn-open { color: #93C5FD; }
html.dark .mn-ov { color: #FCA5A5; }
html.dark .mn-cls { color: #4ADE80; }
html.dark .mk-lbl { color: rgba(255,255,255,.5); }
html.dark .mk-sub { color: rgba(255,255,255,.3); }
html.dark .md-up { background: rgba(233,2,41,.2); color: #FCA5A5; }
html.dark .md-dn { background: rgba(62,182,69,.18); color: #4ADE80; }
html.dark .md-flat { background: rgba(255,255,255,.08); color: rgba(255,255,255,.4); }
html.dark .list-card { background: #161B22; border-color: rgba(255,255,255,.09); }
html.dark .lc-toolbar { border-bottom-color: rgba(255,255,255,.08); }
html.dark .lc-title { color: #93C5FD; }
html.dark .lc-count { background: rgba(96,165,250,.15); color: #93C5FD; }
html.dark .tb-search input { background: #0D1117; border-color: rgba(255,255,255,.12); color: #E6EDF3; }
html.dark .sev-crit  { background: rgba(233,2,41,.2);   color: #FCA5A5; }
html.dark .st-open    { background: rgba(59,130,246,.15); color: #93C5FD; }
html.dark .st-inprog  { background: rgba(245,158,11,.15); color: #FCD34D; }
html.dark .st-pending { background: rgba(124,58,237,.15); color: #C4B5FD; }
html.dark .st-closed  { background: rgba(62,182,69,.15);  color: #4ADE80; }
html.dark .st-overdue { background: rgba(233,2,41,.18);   color: #FCA5A5; }
html.dark .step-badge { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); color: rgba(255,255,255,.55); }
html.dark .d-warn { color: #FCD34D; }
html.dark .d-over { color: #FCA5A5; }
html.dark .sla-warn { color: #FCD34D; }
html.dark .sla-over { color: #FCA5A5; }
html.dark .act-btn { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.5); }
html.dark .bulk-bar { background: rgba(96,165,250,.12); border-bottom-color: rgba(96,165,250,.2); color: #93C5FD; }
html.dark .bb-action { background: rgba(255,255,255,.08); border-color: rgba(96,165,250,.3); color: #93C5FD; }
html.dark .pagination { border-top-color: rgba(255,255,255,.08); }
html.dark .pag-btn { background: #161B22; border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.5); }
html.dark .pag-size { background: #161B22; border-color: rgba(255,255,255,.12); color: #E6EDF3; }
html.dark .sla-ok-box   { background: rgba(62,182,69,.12);  border-color: rgba(62,182,69,.25); }
html.dark .sla-warn-box { background: rgba(245,158,11,.1);  border-color: rgba(245,158,11,.25); }
html.dark .sla-over-box { background: rgba(233,2,41,.12);   border-color: rgba(233,2,41,.25); }
html.dark .drw-sppr-id { color: #93C5FD; }
html.dark .drw-ml { color: rgba(255,255,255,.3); }
html.dark .drw-mv { color: #E6EDF3; }
html.dark .drw-sec-title { color: rgba(255,255,255,.4); }
html.dark .prob-box { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); color: #E6EDF3; }
html.dark .step-circ.sc-todo { background: rgba(255,255,255,.1); }
html.dark .step-line { background: rgba(255,255,255,.1); }
html.dark .step-name { color: #E6EDF3; }
html.dark .step-meta { color: rgba(255,255,255,.45); }
html.dark .sup-code { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); color: rgba(255,255,255,.5); }
html.dark .sup-name { color: #E6EDF3; }
html.dark .sppr-id { color: #93C5FD; }
html.dark .sppr-date { color: rgba(255,255,255,.3); }
html.dark .pic-name { color: #E6EDF3; }
html.dark .pic-role { color: rgba(255,255,255,.3); }
html.dark .no-step { color: rgba(255,255,255,.25); }
html.dark .sppr-table thead tr { background: #0D1117; }
.sppr-hdr-strip {
  background: var(--sqp-bg-card); border-bottom: 1px solid var(--sqp-border);
  padding: 14px 20px; position: sticky; top: 52px; z-index: 39;
}
.shs-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.shs-left { display: flex; flex-direction: column; gap: 6px; }
.shs-id { font-family: 'DM Mono', monospace; font-size: 18px; font-weight: 800; color: var(--sqp-primary); }
.shs-badges { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.shs-right { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.shs-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.shs-meta-item { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--sqp-text-secondary); }
.sla-inline {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px;
}
.step-bar-wrap {
  background: var(--sqp-bg-card); border-bottom: 1px solid var(--sqp-border);
  padding: 0 20px; position: sticky; top: calc(52px + 84px); z-index: 38;
  overflow-x: auto; scrollbar-width: none;
}
.step-bar { display: flex; align-items: stretch; min-width: max-content; }
.step-item2 {
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 14px; cursor: pointer; position: relative;
  min-width: 110px; transition: background .15s; flex: 1;
  border-bottom: 2px solid transparent;
}
.si-top { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.si-num {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; flex-shrink: 0;
}
.si-done  .si-num { background: var(--sqp-success); color: #fff; }
.si-curr  .si-num { background: var(--sqp-warning); color: #fff; animation: siPulse 2s infinite; }
.si-locked .si-num { background: var(--sqp-border); color: var(--sqp-text-disabled); }
.si-name { font-size: 11px; font-weight: 600; color: var(--sqp-text); white-space: nowrap; }
.si-sub { font-size: 9.5px; color: var(--sqp-text-disabled); white-space: nowrap; }
.step-sep {
  width: 24px; height: 2px; border-radius: 1px; margin-top: 11px;
  flex-shrink: 0; self-align: flex-start; margin: auto 0;
}
.detail-layout {
  display: grid; grid-template-columns: 1fr 300px;
  gap: 16px; padding: 18px 20px 40px; align-items: start;
}
.detail-main { display: flex; flex-direction: column; gap: 12px; }
.detail-aside { display: flex; flex-direction: column; gap: 12px;
  position: sticky; top: calc(52px + 84px + 56px + 18px); }
.prob-card {
  background: var(--sqp-bg-card); border: 1px solid var(--sqp-border);
  border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.pc-hdr { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--sqp-border); }
.pc-hdr-title { font-size: 13px; font-weight: 700; color: var(--sqp-navy); display: flex; align-items: center; gap: 7px; }
.pc-body { padding: 14px 16px; }
.prob-text { font-size: 13px; color: var(--sqp-text); line-height: 1.7; margin-bottom: 12px; }
.evidence-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ev-thumb {
  width: 72px; height: 56px; border-radius: 7px; border: 1px solid var(--sqp-border);
  background: var(--sqp-bg-page); display: flex; flex-direction: column;
  align-items: center; justify-content: center; font-size: 18px; cursor: pointer;
  transition: border-color .15s, box-shadow .15s; position: relative; overflow: hidden;
}
.ev-add { border: 2px dashed var(--sqp-border); cursor: pointer; font-size: 14px; color: var(--sqp-text-disabled); }
.step-sec {
  background: var(--sqp-bg-card); border: 1px solid var(--sqp-border);
  border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.04);
  transition: border-color .15s;
}
.ss-hdr {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; cursor: pointer; user-select: none;
  transition: background .15s;
}
.ss-locked .ss-hdr { cursor: default; }
.ss-num2 { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.ss-done   .ss-num2 { background: var(--sqp-success); color: #fff; }
.ss-curr   .ss-num2 { background: var(--sqp-warning); color: #fff; }
.ss-overdue .ss-num2 { background: var(--sqp-critical); color: #fff; }
.ss-info { flex: 1; }
.ss-name { font-size: 13px; font-weight: 700; color: var(--sqp-text); margin-bottom: 2px; }
.ss-meta2 { font-size: 11px; color: var(--sqp-text-secondary); }
.ss-actions { display: flex; align-items: center; gap: 6px; }
.ss-body { padding: 0 16px 16px; border-top: 1px solid var(--sqp-border); }
.appr-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; }
.ac-approved { background: var(--sqp-success-light); color: var(--sqp-success-text); }
.ac-pending { background: var(--sqp-warning-light);  color: var(--sqp-warning-text); }
.ac-revision { background: var(--sqp-critical-light); color: var(--sqp-critical-text); }
.ac-locked { background: var(--sqp-bg-page); color: var(--sqp-text-disabled); }
.step-content { padding-top: 14px; }
.sc-field { margin-bottom: 12px; }
.sc-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--sqp-text-disabled); margin-bottom: 4px; }
.sc-value { font-size: 13px; color: var(--sqp-text); line-height: 1.6; }
.four-m-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.m-card { background: var(--sqp-bg-page); border: 1px solid var(--sqp-border); border-radius: 8px; padding: 11px 13px; }
.m-card-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 5px; display: flex; align-items: center; gap: 5px; }
.m-man     .m-card-label { color: #7C3AED; }
.m-machine .m-card-label { color: var(--sqp-info-text); }
.m-method  .m-card-label { color: #B45309; }
.m-card-val { font-size: 12px; color: var(--sqp-text); line-height: 1.55; }
.awaiting-box {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 32px 20px; text-align: center;
}
.aw-anim { width: 56px; height: 56px; border-radius: 50%; background: var(--sqp-warning-light); display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--sqp-warning); margin: 0 auto 14px; animation: awPulse 2s infinite; }
.aw-title { font-size: 15px; font-weight: 700; color: var(--sqp-text); margin-bottom: 6px; }
.aw-desc { font-size: 13px; color: var(--sqp-text-secondary); line-height: 1.6; max-width: 360px; }
.aw-since { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 4px 12px; border-radius: 20px; background: var(--sqp-warning-light); color: var(--sqp-warning-text); margin-top: 12px; }
.iq-actions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 14px; background: var(--sqp-bg-page); border-top: 1px solid var(--sqp-border);
  border-radius: 0 0 7px 7px; margin: 14px -16px -16px;
}
.iq-actions-label { font-size: 11px; font-weight: 600; color: var(--sqp-text-secondary); flex: 1; display: flex; align-items: center; gap: 5px; }
.aside-card2 {
  background: var(--sqp-bg-card); border: 1px solid var(--sqp-border);
  border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.meta-list { display: flex; flex-direction: column; gap: 9px; }
.ml-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ml-label { font-size: 11px; color: var(--sqp-text-secondary); flex-shrink: 0; }
.ml-val { font-size: 12px; font-weight: 600; color: var(--sqp-text); text-align: right; }
.progress-ring-wrap { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--sqp-bg-page); border-radius: 8px; margin-bottom: 10px; }
.progress-ring { width: 44px; height: 44px; position: relative; flex-shrink: 0; }
.pr-track { fill: none; stroke: var(--sqp-border); stroke-width: 4; }
.pr-fill { fill: none; stroke: var(--sqp-warning); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 113; stroke-dashoffset: 70; transition: stroke-dashoffset .6s ease; }
.pr-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: var(--sqp-text); }
.pr-info .pr-title { font-size: 12px; font-weight: 700; color: var(--sqp-text); }
.aside-actions { display: flex; flex-direction: column; gap: 8px; }
.btn-validate-all {
  width: 100%; height: 40px; background: var(--sqp-purple); color: #fff;
  border: none; border-radius: 8px; font-size: 13px; font-weight: 700;
  font-family: inherit; cursor: pointer; display: flex; align-items: center;
  justify-content: center; gap: 7px; transition: all .15s;
}
.btn-escalate {
  width: 100%; height: 38px; border: 1.5px solid var(--sqp-critical); color: var(--sqp-critical);
  background: none; border-radius: 8px; font-size: 13px; font-weight: 600;
  font-family: inherit; cursor: pointer; display: flex; align-items: center;
  justify-content: center; gap: 7px; transition: all .15s;
}
.notif-history { display: flex; flex-direction: column; gap: 8px; }
.nh-item { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; background: var(--sqp-bg-page); border-radius: 7px; }
.nh-ic { width: 26px; height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.nh-wa { background: #E8F7E9; color: #25D366; }
.nh-email { background: #EFF6FF; color: var(--sqp-info); }
.nh-teams { background: #EDE9FE; color: var(--sqp-purple); }
.nh-sys { background: var(--sqp-bg-page); color: var(--sqp-text-disabled); border: 1px solid var(--sqp-border); }
.nh-text { font-size: 11px; color: var(--sqp-text-secondary); line-height: 1.5; }
.nh-time { font-size: 10px; color: var(--sqp-text-disabled); margin-top: 2px; }
.audit-trail { display: flex; flex-direction: column; }
.at-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; position: relative; }
.at-dot { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; position: relative; z-index: 1; }
.at-create { background: var(--sqp-primary-light); color: var(--sqp-primary); }
.at-notif { background: #E8F7E9; color: #25D366; }
.at-sup { background: var(--sqp-success-light); color: var(--sqp-success-text); }
.at-iq { background: #EDE9FE; color: var(--sqp-purple); }
.at-sys { background: var(--sqp-bg-page); color: var(--sqp-text-disabled); border: 1px solid var(--sqp-border); }
.at-body { flex: 1; }
.at-title { font-size: 13px; font-weight: 600; color: var(--sqp-text); margin-bottom: 2px; }
.at-detail { font-size: 12px; color: var(--sqp-text-secondary); }
.at-time { font-size: 11px; color: var(--sqp-text-disabled); margin-top: 2px; display: flex; align-items: center; gap: 4px; }
.at-badge { font-size: 9.5px; font-weight: 700; padding: 1px 7px; border-radius: 10px; }
.ab-iq { background: var(--sqp-primary-light); color: var(--sqp-primary); }
.ab-sup { background: var(--sqp-success-light); color: var(--sqp-success-text); }
.ab-sys { background: #F3F4F6; color: #6B7280; }
.revision-box {
  background: #FEF2F2; border: 1px solid #FECACA; border-radius: 8px;
  padding: 12px 14px; margin-top: 10px; display: none;
}
html.dark .sppr-hdr-strip { background: #111827; border-bottom-color: rgba(255,255,255,.08); }
html.dark .shs-id   { color: #93C5FD; }
html.dark .shs-meta-item { color: rgba(255,255,255,.5); }
html.dark .step-bar-wrap { background: #111827; border-bottom-color: rgba(255,255,255,.08); }
html.dark .step-item2:hover { background: rgba(255,255,255,.04); }
html.dark .si-done .si-name  { color: #4ADE80; }
html.dark .si-curr .si-name  { color: #FCD34D; }
html.dark .si-locked .si-name{ color: rgba(255,255,255,.25); }
html.dark .prob-card { background: #161B22; border-color: rgba(255,255,255,.09); }
html.dark .pc-hdr { border-bottom-color: rgba(255,255,255,.08); }
html.dark .pc-hdr-title { color: #93C5FD; }
html.dark .prob-text { color: #E6EDF3; }
html.dark .ev-thumb { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
html.dark .ev-add { border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.3); }
html.dark .step-sec { background: #161B22; border-color: rgba(255,255,255,.09); }
html.dark .ss-hdr:hover { background: rgba(255,255,255,.04); }
html.dark .ss-name { color: #E6EDF3; }
html.dark .ss-meta2 { color: rgba(255,255,255,.45); }
html.dark .ss-done .ss-meta2    { color: #4ADE80; }
html.dark .ss-curr .ss-meta2    { color: #FCD34D; }
html.dark .ss-locked .ss-meta2  { color: rgba(255,255,255,.25); }
html.dark .ss-overdue .ss-meta2 { color: #FCA5A5; }
html.dark .ss-body { border-top-color: rgba(255,255,255,.08); }
html.dark .ac-approved { background: rgba(62,182,69,.18); color: #4ADE80; }
html.dark .ac-pending  { background: rgba(245,158,11,.18); color: #FCD34D; }
html.dark .ac-revision { background: rgba(233,2,41,.2);   color: #FCA5A5; }
html.dark .ac-locked   { background: rgba(255,255,255,.06); color: rgba(255,255,255,.3); }
html.dark .sc-label { color: rgba(255,255,255,.3); }
html.dark .sc-value { color: #E6EDF3; }
html.dark .m-card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
html.dark .m-card-val { color: #E6EDF3; }
html.dark .aw-anim  { background: rgba(245,158,11,.15); }
html.dark .aw-title { color: #E6EDF3; }
html.dark .aw-desc  { color: rgba(255,255,255,.5); }
html.dark .aw-since { background: rgba(245,158,11,.15); color: #FCD34D; }
html.dark .iq-actions { background: rgba(255,255,255,.04); border-top-color: rgba(255,255,255,.08); }
html.dark .iq-actions-label { color: rgba(255,255,255,.4); }
html.dark .aside-card2 { background: #161B22; border-color: rgba(255,255,255,.09); }
html.dark .ml-label { color: rgba(255,255,255,.4); }
html.dark .ml-val   { color: #E6EDF3; }
html.dark .progress-ring-wrap { background: rgba(255,255,255,.04); }
html.dark .pr-track { stroke: rgba(255,255,255,.1); }
html.dark .pr-label { color: #E6EDF3; }
html.dark .pr-info .pr-title { color: #E6EDF3; }
html.dark .btn-validate-all { background: rgba(124,58,237,.8); }
html.dark .btn-escalate { border-color: rgba(233,2,41,.6); color: #FCA5A5; }
html.dark .nh-item { background: rgba(255,255,255,.04); }
html.dark .nh-text { color: rgba(255,255,255,.5); }
html.dark .nh-time { color: rgba(255,255,255,.3); }
html.dark .nh-wa    { background: rgba(37,211,102,.12); }
html.dark .nh-email { background: rgba(59,130,246,.12); }
html.dark .nh-teams { background: rgba(124,58,237,.12); }
html.dark .at-item::after { background: rgba(255,255,255,.08); }
html.dark .at-create { background: rgba(96,165,250,.15); color: #93C5FD; }
html.dark .at-notif  { background: rgba(37,211,102,.12); }
html.dark .at-sup    { background: rgba(62,182,69,.15); color: #4ADE80; }
html.dark .at-iq     { background: rgba(124,58,237,.15); color: #C4B5FD; }
html.dark .at-sys    { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); }
html.dark .at-title  { color: #E6EDF3; }
html.dark .at-detail { color: rgba(255,255,255,.5); }
html.dark .at-time   { color: rgba(255,255,255,.3); }
html.dark .ab-iq  { background: rgba(96,165,250,.15); color: #93C5FD; }
html.dark .ab-sup { background: rgba(62,182,69,.15); color: #4ADE80; }
html.dark .ab-sys { background: rgba(255,255,255,.08); color: rgba(255,255,255,.4); }
html.dark .revision-box { background: rgba(233,2,41,.08); border-color: rgba(233,2,41,.25); }
.ctx-banner {
  background: linear-gradient(135deg, var(--sqp-navy) 0%, #1A5FA0 100%);
  padding: 14px 20px; position: sticky; top: 52px; z-index: 39;
}
.cb-inner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cb-icon { width: 38px; height: 38px; border-radius: 9px; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-size: 16px; color: #fff; flex-shrink: 0; }
.cb-text { flex: 1; min-width: 0; }
.cb-label { font-size: 11px; font-weight: 600; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 3px; }
.cb-sppr { font-family: 'DM Mono', monospace; font-size: 15px; font-weight: 800; color: #fff; }
.cb-from { font-size: 12px; color: rgba(255,255,255,.7); margin-top: 2px; }
.cb-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.cb-sla { display: flex; align-items: center; gap: 5px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: 20px; padding: 4px 12px; font-size: 12px; color: #fff; font-weight: 600; }
.wiz-bar {
  background: var(--sqp-bg-card); border-bottom: 1px solid var(--sqp-border);
  padding: 0 20px; position: sticky; top: calc(52px + 66px); z-index: 38;
  overflow-x: auto; scrollbar-width: none;
}
.wiz-steps { display: flex; align-items: stretch; min-width: max-content; }
.ws-item {
  display: flex; flex-direction: column; align-items: center;
  padding: 9px 12px; cursor: pointer; position: relative;
  min-width: 100px; transition: background .15s;
  border-bottom: 2px solid transparent;
}
.ws-done { border-bottom-color: var(--sqp-success); }
.ws-curr { border-bottom-color: var(--sqp-primary); background: #EFF6FF; }
.ws-locked { cursor: default; opacity: .45; }
.ws-top { display: flex; align-items: center; gap: 5px; margin-bottom: 3px; }
.ws-num {
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 800; flex-shrink: 0;
}
.ws-name { font-size: 11px; font-weight: 600; white-space: nowrap; }
.ws-sub { font-size: 9.5px; color: var(--sqp-text-disabled); white-space: nowrap; }
.wiz-sep { width: 20px; height: 2px; background: var(--sqp-border); border-radius: 1px; align-self: center; flex-shrink: 0; }
.wiz-layout {
  display: grid; grid-template-columns: 1fr 300px;
  gap: 16px; padding: 18px 20px 40px; align-items: start;
}
.wiz-main { display: flex; flex-direction: column; gap: 14px; }
.wiz-aside { display: flex; flex-direction: column; gap: 12px;
  position: sticky; top: calc(52px + 66px + 52px + 18px); }
.step-hdr-card {
  background: var(--sqp-bg-card); border: 1px solid var(--sqp-border);
  border-left: 4px solid var(--sqp-primary); border-radius: 10px;
  padding: 16px 18px; box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.shc-step { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--sqp-primary); margin-bottom: 5px; display: flex; align-items: center; gap: 6px; }
.shc-title { font-size: 18px; font-weight: 800; color: var(--sqp-navy); margin-bottom: 6px; }
.shc-desc { font-size: 13px; color: var(--sqp-text-secondary); line-height: 1.65; }
.shc-tip { display: flex; align-items: flex-start; gap: 8px; background: #EFF6FF; border: 1px solid #BFDBFE; border-radius: 8px; padding: 10px 13px; margin-top: 12px; font-size: 12px; color: #1D4ED8; line-height: 1.6; }
.fc-sect-hdr {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 18px; border-bottom: 1px solid var(--sqp-border);
  background: var(--sqp-bg-page);
}
.fc-sect-ic { width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.char-count { font-size: 11px; color: var(--sqp-text-disabled); text-align: right; }
.status-sel { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.status-opt {
  border: 2px solid var(--sqp-border); border-radius: 9px;
  padding: 12px 14px; cursor: pointer; transition: all .15s;
  background: var(--sqp-bg-card); text-align: center;
}
.so-icon { font-size: 20px; margin-bottom: 6px; }
.so-label { font-size: 12px; font-weight: 700; }
.so-desc { font-size: 11px; color: var(--sqp-text-secondary); margin-top: 3px; line-height: 1.4; }
.so-check { display: none; width: 18px; height: 18px; border-radius: 50%; align-items: center; justify-content: center; font-size: 9px; color: #fff; margin: 0 auto 6px; }
.sel-open   .so-check { display: flex; background: var(--sqp-warning); }
.sel-closed .so-check { display: flex; background: var(--sqp-success); }
.pic-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.pic-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 20px; background: var(--sqp-primary-light); border: 1.5px solid rgba(0,94,255,.2); color: var(--sqp-primary); font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s; }
.dz-title { font-size: 14px; font-weight: 700; color: var(--sqp-text); margin-bottom: 4px; }
.dz-required { position: absolute; top: 8px; right: 10px; font-size: 10px; font-weight: 700; color: var(--sqp-critical); background: var(--sqp-critical-light); padding: 2px 7px; border-radius: 4px; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; margin-top: 12px; }
.photo-item {
  aspect-ratio: 1; border-radius: 8px; border: 1px solid var(--sqp-border);
  background: var(--sqp-bg-page); display: flex; flex-direction: column;
  align-items: center; justify-content: center; font-size: 22px; cursor: pointer;
  transition: all .15s; position: relative; overflow: hidden;
}
.photo-add { border: 2px dashed var(--sqp-border); color: var(--sqp-text-disabled); cursor: pointer; }
.ev-req-note { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--sqp-critical); font-weight: 600; margin-top: 8px; }
.draft-bar {
  background: var(--sqp-bg-card); border: 1px solid var(--sqp-border);
  border-radius: 10px; padding: 14px 18px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.draft-status { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--sqp-text-secondary); flex: 1; }
.draft-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sqp-success); animation: dpulse 3s infinite; }
.submit-card {
  background: var(--sqp-bg-card); border: 1px solid var(--sqp-border);
  border-radius: 10px; padding: 18px; box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.btn-submit-main {
  width: 100%; height: 46px; background: var(--sqp-success); color: #fff;
  border: none; border-radius: 9px; font-size: 14px; font-weight: 800;
  font-family: inherit; cursor: pointer; display: flex; align-items: center;
  justify-content: center; gap: 8px; transition: all .15s;
}
.submit-warning { font-size: 11px; color: var(--sqp-text-secondary); text-align: center; margin-top: 8px; line-height: 1.5; }
.ac-hdr { display: flex; align-items: center; gap: 7px; padding: 11px 14px; border-bottom: 1px solid var(--sqp-border); font-size: 12.5px; font-weight: 700; color: var(--sqp-navy); }
.ac-body { padding: 12px 14px; font-size: 12px; }
.prob-ref { background: var(--sqp-bg-page); border: 1px solid var(--sqp-border); border-radius: 8px; padding: 12px 13px; }
.pr-text { font-size: 12px; color: var(--sqp-text); line-height: 1.65; }
.pr-photos { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.pr-photo { width: 52px; height: 42px; border-radius: 6px; background: var(--sqp-bg-card); border: 1px solid var(--sqp-border); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; }
.mr { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.ml { font-size: 11px; color: var(--sqp-text-secondary); }
.mv { font-size: 12px; font-weight: 600; color: var(--sqp-text); }
.wiz-prog-list { display: flex; flex-direction: column; gap: 6px; }
.wpl-item { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.wpl-ic { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; flex-shrink: 0; }
.wpl-done   .wpl-ic { background: var(--sqp-success); color: #fff; }
.wpl-curr   .wpl-ic { background: var(--sqp-primary); color: #fff; }
.wpl-locked .wpl-ic { background: var(--sqp-border); color: var(--sqp-text-disabled); }
.wpl-name { font-weight: 500; }
.modal-bd { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 600; display: none; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
.suc-modal { background: var(--sqp-bg-card); border-radius: 16px; padding: 30px; max-width: 400px; width: 90%; text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,.2); animation: mfade .25s; }
.sm-ic { width: 60px; height: 60px; border-radius: 50%; background: var(--sqp-success-light); color: var(--sqp-success); font-size: 26px; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.sm-t { font-size: 18px; font-weight: 800; color: var(--sqp-navy); margin-bottom: 6px; }
.sm-s { font-size: 13px; color: var(--sqp-text-secondary); line-height: 1.6; margin-bottom: 18px; }
.sm-nxt { background: #F0F7FF; border: 1px solid #BFDBFE; border-radius: 9px; padding: 12px 14px; margin-bottom: 18px; text-align: left; }
.sm-nxt-l { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--sqp-primary); margin-bottom: 6px; }
.sm-nxt-t { font-size: 13px; font-weight: 700; color: var(--sqp-navy); margin-bottom: 3px; }
.sm-nxt-d { font-size: 12px; color: var(--sqp-text-secondary); }
html.dark .ctx-banner { background: linear-gradient(135deg, #0D1B35 0%, #0E3260 100%); }
html.dark .wiz-bar { background: #111827; border-bottom-color: rgba(255,255,255,.08); }
html.dark .ws-curr { background: rgba(96,165,250,.08); border-bottom-color: #60A5FA; }
html.dark .ws-done .ws-name { color: #4ADE80; }
html.dark .step-hdr-card { background: #161B22; border-color: rgba(255,255,255,.09); border-left-color: #60A5FA; }
html.dark .shc-step  { color: #93C5FD; }
html.dark .shc-title { color: #E6EDF3; }
html.dark .shc-desc  { color: rgba(255,255,255,.5); }
html.dark .shc-tip   { background: rgba(59,130,246,.1); border-color: rgba(59,130,246,.25); color: #93C5FD; }
html.dark .fc-sect-hdr { background: rgba(255,255,255,.03); border-bottom-color: rgba(255,255,255,.08); }
html.dark .char-count { color: rgba(255,255,255,.3); }
html.dark .status-opt { background: #1C2230; border-color: rgba(255,255,255,.1); }
html.dark .so-desc { color: rgba(255,255,255,.4); }
html.dark .pic-tag { background: rgba(96,165,250,.12); border-color: rgba(96,165,250,.25); color: #93C5FD; }
html.dark .dz-title { color: #E6EDF3; }
html.dark .dz-sub   { color: rgba(255,255,255,.5); }
html.dark .dz-required { background: rgba(233,2,41,.18); color: #FCA5A5; }
html.dark .photo-item { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
html.dark .photo-add  { border-color: rgba(255,255,255,.12); }
html.dark .draft-bar { background: #161B22; border-color: rgba(255,255,255,.09); }
html.dark .draft-status { color: rgba(255,255,255,.4); }
html.dark .submit-card { background: #161B22; border-color: rgba(255,255,255,.09); }
html.dark .btn-submit-main:disabled { background: rgba(255,255,255,.15); }
html.dark .submit-warning { color: rgba(255,255,255,.4); }
html.dark .ac-hdr { border-bottom-color: rgba(255,255,255,.08); color: #93C5FD; }
html.dark .prob-ref { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
html.dark .pr-text  { color: #E6EDF3; }
html.dark .pr-photo { background: #1C2230; border-color: rgba(255,255,255,.1); }
html.dark .ml { color: rgba(255,255,255,.4); }
html.dark .mv { color: #E6EDF3; }
html.dark .wpl-done .wpl-name   { color: #4ADE80; }
html.dark .wpl-curr .wpl-name   { color: #93C5FD; }
html.dark .wpl-locked .wpl-name { color: rgba(255,255,255,.25); }
html.dark .suc-modal { background: #161B22; }
html.dark .sm-t { color: #93C5FD; }
html.dark .sm-s { color: rgba(255,255,255,.5); }
html.dark .sm-nxt { background: rgba(59,130,246,.08); border-color: rgba(59,130,246,.2); }
html.dark .sm-nxt-l { color: #93C5FD; }
html.dark .sm-nxt-t { color: #E6EDF3; }
html.dark .sm-nxt-d { color: rgba(255,255,255,.45); }
.track-card { background:var(--sqp-bg-card); border:1px solid var(--sqp-border); border-radius:10px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.track-hdr { padding:14px 18px; border-bottom:1px solid var(--sqp-border); }
.track-hdr-inner { display:flex; align-items:center; gap:12px; }
.track-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.ti-blue { background:#EFF6FF; color:#2563EB; }
.ti-orange { background:#FFF7ED; color:#D97706; }
.track-label { flex:1; }
.tl-blue   h3 { color:var(--sqp-navy); }
.tl-orange h3 { color:#92400E; }
.track-tag { font-size:10px; font-weight:700; padding:3px 10px; border-radius:20px; white-space:nowrap; }
.tt-blue { background:#DBEAFE; color:#1D4ED8; }
.tt-orange { background:#FED7AA; color:#92400E; }
.track-progress { margin-top:10px; }
.tp-label { display:flex; align-items:center; justify-content:space-between; font-size:11px; color:var(--sqp-text-secondary); margin-bottom:5px; }
.tp-bar { height:4px; background:var(--sqp-border); border-radius:2px; overflow:hidden; }
.tp-fill { height:100%; border-radius:2px; transition:width .4s ease; }
.tf-blue { background:var(--sqp-primary); }
.tf-orange { background:var(--sqp-warning); }
.track-body { padding:18px; }
.why-row { display:flex; gap:12px; }
.why-num-col { display:flex; flex-direction:column; align-items:center; flex-shrink:0; width:32px; }
.why-badge { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; flex-shrink:0; }
.wb-blue { background:var(--sqp-primary); color:#fff; }
.wb-orange { background:var(--sqp-warning); color:#fff; }
.why-line { flex:1; width:2px; border-radius:1px; min-height:20px; margin:4px 0; }
.wl-blue { background:rgba(0,94,255,.2); }
.wl-orange { background:rgba(245,158,11,.25); }
.wl-filled { background:var(--sqp-success); opacity:.5; }
.why-content { flex:1; padding-bottom:18px; }
.why-q { margin-bottom:8px; }
.wq-label { display:inline-block; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; padding:2px 8px; border-radius:4px; margin-right:6px; margin-bottom:4px; }
.wq-label-blue { background:#DBEAFE; color:#1D4ED8; }
.wq-label-orange { background:#FED7AA; color:#92400E; }
.wq-text { font-size:13px; font-weight:500; color:var(--sqp-text); line-height:1.55; }
.why-ta { resize:vertical; min-height:72px; line-height:1.6; }
.why-hint { display:flex; align-items:flex-start; gap:5px; font-size:11px; color:var(--sqp-text-secondary); margin-top:5px; }
.why-arrow { text-align:center; font-size:14px; margin:4px 0 2px; }
.wa-blue { color:rgba(0,94,255,.35); }
.wa-orange { color:rgba(245,158,11,.4); }
.wa-filled { color:var(--sqp-success) !important; }
.rc-box { border-radius:10px; padding:16px 18px; margin-top:6px; border:2px solid; }
.rc-box-blue { background:linear-gradient(135deg,#EFF6FF,#DBEAFE); border-color:#93C5FD; }
.rc-box-orange { background:linear-gradient(135deg,#FFF7ED,#FED7AA); border-color:#FBB740; }
.rc-label { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.6px; margin-bottom:8px; display:flex; align-items:center; gap:6px; }
.rcl-blue { color:#1D4ED8; }
.rcl-orange { color:#92400E; }
.rc-title { font-size:13px; font-weight:700; margin-bottom:6px; }
.rct-blue { color:var(--sqp-navy); }
.rct-orange { color:#92400E; }
.rc-ta { background:rgba(255,255,255,.7); border-color:rgba(0,0,0,.1); }
.rc-empty { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--sqp-text-disabled); padding:10px 0; }
.summary-card { background:var(--sqp-bg-card); border:1px solid var(--sqp-border); border-radius:10px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.sc-hdr { display:flex; align-items:center; gap:9px; padding:13px 18px; border-bottom:1px solid var(--sqp-border); background:var(--sqp-bg-page); }
.sc-body { padding:18px; display:flex; flex-direction:column; gap:14px; }
.sc-item-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; margin-bottom:5px; display:flex; align-items:center; gap:5px; }
.sil-blue { color:#1D4ED8; }
.sil-orange { color:#92400E; }
.sc-item-val { font-size:13px; color:var(--sqp-text); font-style:italic; background:var(--sqp-bg-page); padding:10px 12px; border-radius:7px; border-left:3px solid; line-height:1.6; }
.siv-blue { border-left-color:var(--sqp-primary); }
.siv-orange { border-left-color:var(--sqp-warning); }
.submit-note { font-size:11px; color:var(--sqp-text-secondary); text-align:center; margin-top:8px; line-height:1.5; }
.track-mini { display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.tm-row { display:flex; align-items:center; gap:8px; }
.tm-label { font-size:11px; font-weight:600; flex-shrink:0; width:60px; }
.tm-prog { flex:1; height:5px; background:var(--sqp-border); border-radius:3px; overflow:hidden; }
.tm-fill { height:100%; border-radius:3px; transition:width .4s; }
.tm-num { font-size:11px; font-weight:700; flex-shrink:0; width:30px; text-align:right; }
.sm-rc-box { background:linear-gradient(135deg,#ECFDF5,#D1FAE5); border:1px solid #6EE7B7; border-radius:9px; padding:12px 14px; margin-bottom:16px; text-align:left; }
.sm-rc-l { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#065F46; margin-bottom:5px; }
.sm-rc-t { font-size:13px; font-weight:700; color:#065F46; margin-bottom:3px; }
.sm-rc-d { font-size:12px; color:#047857; }
html.dark .track-card  { background:#161B22; border-color:rgba(255,255,255,.09); }
html.dark .track-hdr   { border-bottom-color:rgba(255,255,255,.08); }
html.dark .tl-blue h3  { color:#93C5FD; }
html.dark .tl-orange h3{ color:#FCD34D; }
html.dark .track-label p { color:rgba(255,255,255,.45); }
html.dark .ti-blue   { background:rgba(37,99,235,.15); }
html.dark .ti-orange { background:rgba(217,119,6,.15); }
html.dark .tt-blue   { background:rgba(37,99,235,.18); color:#93C5FD; }
html.dark .tt-orange { background:rgba(217,119,6,.18); color:#FCD34D; }
html.dark .tp-bar    { background:rgba(255,255,255,.1); }
html.dark .why-badge { }
html.dark .wl-blue   { background:rgba(96,165,250,.2); }
html.dark .wl-orange { background:rgba(245,158,11,.2); }
html.dark .wq-text  { color:#E6EDF3; }
html.dark .wq-label-blue   { background:rgba(37,99,235,.2); color:#93C5FD; }
html.dark .wq-label-orange { background:rgba(217,119,6,.2); color:#FCD34D; }
html.dark .why-hint { color:rgba(255,255,255,.4); }
html.dark .wa-blue   { color:rgba(96,165,250,.3); }
html.dark .wa-orange { color:rgba(245,158,11,.3); }
html.dark .rc-box-blue   { background:rgba(37,99,235,.1); border-color:rgba(96,165,250,.3); }
html.dark .rc-box-orange { background:rgba(217,119,6,.1);  border-color:rgba(251,183,64,.3); }
html.dark .rcl-blue   { color:#93C5FD; }
html.dark .rcl-orange { color:#FCD34D; }
html.dark .rct-blue   { color:#93C5FD; }
html.dark .rct-orange { color:#FCD34D; }
html.dark .rc-ta { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.15); color:#E6EDF3; }
html.dark .summary-card { background:#161B22; border-color:rgba(255,255,255,.09); }
html.dark .sc-hdr { background:rgba(255,255,255,.03); border-bottom-color:rgba(255,255,255,.08); }
html.dark .sc-item-val { background:rgba(255,255,255,.04); color:#E6EDF3; }
html.dark .sil-blue   { color:#93C5FD; }
html.dark .sil-orange { color:#FCD34D; }
html.dark .submit-note { color:rgba(255,255,255,.4); }
html.dark .tm-prog { background:rgba(255,255,255,.1); }
html.dark .sm-rc-box { background:rgba(62,182,69,.1); border-color:rgba(62,182,69,.3); }
html.dark .sm-rc-l  { color:#4ADE80; }
html.dark .sm-rc-t  { color:#4ADE80; }
html.dark .sm-rc-d  { color:rgba(62,182,69,.7); }
.fc-hdr-ic { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.flow-builder { display: flex; flex-direction: column; gap: 8px; }
.flow-step-row {
  display: flex; align-items: flex-start; gap: 10px; position: relative;
}
.fs-num {
  width: 28px; height: 28px; border-radius: 50%; background: var(--sqp-primary-light);
  color: var(--sqp-primary); font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  margin-top: 5px; border: 2px solid rgba(0,94,255,.2);
}
.fs-content { flex: 1; }
.fs-input { width: 100%; border: 1px solid var(--sqp-border); border-radius: 8px; padding: 8px 12px; font-size: 13px; color: var(--sqp-text); background: var(--sqp-bg-page); font-family: inherit; outline: none; transition: border-color .15s; }
.fs-sub { display: flex; gap: 8px; margin-top: 6px; }
.fs-crit { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; }
.fs-rm { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--sqp-border); background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--sqp-text-disabled); transition: all .15s; margin-top: 5px; flex-shrink: 0; }
.flow-connector { display: flex; align-items: center; justify-content: flex-start; padding-left: 14px; gap: 6px; margin: 0; }
.fc-arrow { display: flex; flex-direction: column; align-items: center; }
.fc-line { width: 2px; height: 16px; background: var(--sqp-border); border-radius: 1px; }
.fc-arrowhead { font-size: 10px; color: var(--sqp-text-disabled); }
.add-step-btn { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 2px dashed var(--sqp-border); border-radius: 9px; background: none; cursor: pointer; color: var(--sqp-primary); font-size: 13px; font-weight: 600; font-family: inherit; width: 100%; justify-content: center; transition: all .15s; }
.crit-badge { font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 4px; background: #FEE2E2; color: #B91C1C; }
.m-hdr {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  cursor: pointer; transition: background .15s; user-select: none;
}
.m-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; flex-shrink: 0;
}
.mc-man  .m-icon { background: #EDE9FE; color: #7C3AED; }
.mc-mach .m-icon { background: #EFF6FF; color: #2563EB; }
.mc-mat  .m-icon { background: #ECFDF5; color: #059669; }
.mc-meth .m-icon { background: #FFF7ED; color: #D97706; }
.m-title { flex: 1; }
.m-toggle-wrap { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.yn-group { display: flex; gap: 6px; }
.yn-btn {
  padding: 4px 13px; border-radius: 20px; border: 1.5px solid var(--sqp-border);
  font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit;
  background: var(--sqp-bg-card); color: var(--sqp-text-secondary);
  transition: all .15s;
}
.changed-tag { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; }
.ct-yes { background: #FEE2E2; color: #B91C1C; }
.ct-no { background: #D1FAE5; color: #065F46; }
.ct-empty { background: #F3F4F6; color: #6B7280; }
.m-body { border-top: 1px solid var(--sqp-border); padding: 16px; display: none; }
.no-change-box { display: none; background: #ECFDF5; border: 1px solid #A7F3D0; border-radius: 8px; padding: 10px 14px; font-size: 12px; color: #065F46; align-items: center; gap: 8px; }
.change-detail { display: none; }
.fi-row { display: flex; align-items: center; gap: 9px; padding: 8px 11px; background: var(--sqp-bg-card); border: 1px solid var(--sqp-border); border-radius: 7px; font-size: 12px; }
.fi-row-ic { font-size: 14px; color: var(--sqp-primary); flex-shrink: 0; }
.fi-row-nm { flex: 1; font-weight: 500; color: var(--sqp-text); }
.fi-row-sz { font-size: 11px; color: var(--sqp-text-disabled); }
.fi-row-rm { width: 22px; height: 22px; border-radius: 5px; border: none; background: none; cursor: pointer; color: var(--sqp-text-disabled); display: flex; align-items: center; justify-content: center; font-size: 11px; transition: all .15s; }
.m-summary-row { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 14px; background: var(--sqp-bg-page); border-top: 1px solid var(--sqp-border); }
.ms-chip { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; border: 1px solid var(--sqp-border); }
html.dark .fs-num   { background: rgba(96,165,250,.12); color: #93C5FD; border-color: rgba(96,165,250,.2); }
html.dark .fs-input { background: #0D1117; border-color: rgba(255,255,255,.12); color: #E6EDF3; }
html.dark .fs-sub select { background: #0D1117; border-color: rgba(255,255,255,.1); color: #E6EDF3; }
html.dark .fc-line  { background: rgba(255,255,255,.1); }
html.dark .add-step-btn { border-color: rgba(255,255,255,.12); color: #93C5FD; }
html.dark .mc-man .m-icon  { background: rgba(124,58,237,.15); }
html.dark .mc-mach .m-icon { background: rgba(37,99,235,.15); }
html.dark .mc-mat .m-icon  { background: rgba(5,150,105,.15); }
html.dark .mc-meth .m-icon { background: rgba(217,119,6,.15); }
html.dark .m-title h4 { color: #E6EDF3; }
html.dark .m-body    { border-top-color: rgba(255,255,255,.08); }
html.dark .m-hdr:hover { background: rgba(255,255,255,.04); }
html.dark .yn-btn { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.5); }
html.dark .no-change-box { background: rgba(62,182,69,.08); border-color: rgba(62,182,69,.25); color: #4ADE80; }
html.dark .fi-row     { background: #1C2230; border-color: rgba(255,255,255,.1); }
html.dark .fi-row-nm  { color: #E6EDF3; }
html.dark .m-summary-row { background: rgba(255,255,255,.03); border-top-color: rgba(255,255,255,.08); }
html.dark .ms-chip.changed   { background: rgba(233,2,41,.15); border-color: rgba(233,2,41,.3); color: #FCA5A5; }
.ws-multi { border-bottom-color:var(--sqp-warning); background:#FFFBEB; }
.parallel-banner {
  background:#FFFBEB; border:1px solid #FDE68A;
  border-radius:10px; padding:12px 15px;
  display:flex; align-items:center; gap:10px; font-size:12.5px;
}
.pb-icon { font-size:18px; color:var(--sqp-warning); flex-shrink:0; }
.pb-text strong { color:#B45309; }
.step-tabs {
  display:flex; gap:0; background:var(--sqp-bg-card);
  border:1px solid var(--sqp-border); border-radius:10px; overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.st-tab {
  flex:1; padding:14px 16px; cursor:pointer; border:none; background:none;
  font-family:inherit; transition:background .15s; border-right:1px solid var(--sqp-border);
  display:flex; flex-direction:column; gap:6px; text-align:left;
}
.tab-progress { display:flex; align-items:center; gap:6px; }
.tab-prog-bar { flex:1; height:3px; background:var(--sqp-border); border-radius:2px; overflow:hidden; }
.tab-prog-fill { height:100%; border-radius:2px; transition:width .3s; background:var(--sqp-primary); }
.tab-prog-pct { font-size:10px; font-weight:700; color:var(--sqp-text-disabled); }
.tab-status { display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:700; padding:2px 7px; border-radius:10px; }
.ts-done { background:var(--sqp-success-light); color:var(--sqp-success-text); }
.ts-prog { background:var(--sqp-primary-light); color:var(--sqp-primary); }
.ts-empty { background:#F3F4F6; color:var(--sqp-text-disabled); }
.tab-panel { display:none; flex-direction:column; gap:12px; }
.status-row { display:flex; gap:8px; flex-wrap:wrap; }
.status-chip {
  display:inline-flex; align-items:center; gap:6px; padding:6px 14px;
  border-radius:8px; border:1.5px solid var(--sqp-border);
  font-size:12px; font-weight:600; cursor:pointer; font-family:inherit;
  background:var(--sqp-bg-card); color:var(--sqp-text-secondary);
  transition:all .15s;
}
.cost-wrap { position:relative; }
.cost-prefix { position:absolute; left:12px; top:50%; transform:translateY(-50%); font-size:12px; font-weight:600; color:var(--sqp-text-secondary); pointer-events:none; }
.dropzone-sm {
  border:2px dashed var(--sqp-border); border-radius:8px; padding:16px;
  text-align:center; cursor:pointer; transition:all .2s; background:var(--sqp-bg-page);
  display:flex; align-items:center; gap:12px;
}
.dz-sm-text { text-align:left; }
.dz-sm-title { font-size:12.5px; font-weight:600; color:var(--sqp-text); margin-bottom:2px; }
.dz-sm-sub { font-size:11px; color:var(--sqp-text-secondary); }
.file-pills { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.file-pill { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:6px; background:var(--sqp-bg-card); border:1px solid var(--sqp-border); font-size:11px; color:var(--sqp-text-secondary); }
.fp-rm { background:none; border:none; cursor:pointer; color:var(--sqp-text-disabled); font-size:10px; display:flex; align-items:center; }
.ctx-box { background:var(--sqp-bg-page); border:1px solid var(--sqp-border); border-left:3px solid; border-radius:8px; padding:11px 13px; margin-bottom:14px; }
.ctx-box-blue { border-left-color:var(--sqp-primary); }
.ctx-box-green { border-left-color:var(--sqp-success); }
.ctx-box-purple { border-left-color:var(--sqp-purple); }
.ctxb-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px; }
.cbl-blue { color:var(--sqp-primary); }
.cbl-green { color:var(--sqp-success-text); }
.cbl-purple { color:var(--sqp-purple-text); }
.ctxb-text { font-size:12px; color:var(--sqp-text-secondary); line-height:1.6; }
.submit-section { background:var(--sqp-bg-card); border:1px solid var(--sqp-border); border-radius:10px; padding:16px; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.all-steps-status { display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.ass-chip { display:flex; align-items:center; gap:5px; font-size:11px; font-weight:600; padding:3px 10px; border-radius:6px; }
.asc-done { background:var(--sqp-success-light); color:var(--sqp-success-text); }
.asc-prog { background:var(--sqp-primary-light); color:var(--sqp-primary); }
.asc-empty { background:#F3F4F6; color:var(--sqp-text-disabled); }
.btn-submit-all { width:100%; height:46px; background:var(--sqp-success); color:#fff; border:none; border-radius:9px; font-size:14px; font-weight:800; font-family:inherit; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; transition:all .15s; }
.step-ov { display:flex; flex-direction:column; gap:8px; }
.sov-item { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:7px; background:var(--sqp-bg-page); border:1px solid var(--sqp-border); cursor:pointer; transition:background .15s; }
.sov-num { width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; flex-shrink:0; }
.sov-info { flex:1; }
.sov-name { font-size:12px; font-weight:600; color:var(--sqp-text); }
.sov-pct { font-size:10px; color:var(--sqp-text-secondary); }
.sov-badge { font-size:9.5px; font-weight:700; padding:2px 7px; border-radius:10px; flex-shrink:0; }
.wpl-multi .wpl-ic { background:var(--sqp-warning); color:#fff; }
.sm-steps { display:flex; flex-direction:column; gap:6px; background:var(--sqp-bg-page); border-radius:9px; padding:12px 14px; margin-bottom:14px; }
.sm-step-row { display:flex; align-items:center; gap:8px; font-size:12px; }
html.dark .ws-multi { background:rgba(245,158,11,.06); border-bottom-color:rgba(245,158,11,.5); }
html.dark .parallel-banner { background:rgba(245,158,11,.08); border-color:rgba(245,158,11,.25); }
html.dark .pb-text { color:#FCD34D; }
html.dark .step-tabs { background:#161B22; border-color:rgba(255,255,255,.09); }
html.dark .st-tab { border-right-color:rgba(255,255,255,.08); }
html.dark .tab-prog-bar { background:rgba(255,255,255,.1); }
html.dark .tab-prog-pct { color:rgba(255,255,255,.35); }
html.dark .ts-done { background:rgba(62,182,69,.18); color:#4ADE80; }
html.dark .ts-prog { background:rgba(96,165,250,.18); color:#93C5FD; }
html.dark .ts-empty{ background:rgba(255,255,255,.06); color:rgba(255,255,255,.35); }
html.dark .status-chip { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); color:rgba(255,255,255,.5); }
html.dark .dropzone-sm { background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.12); }
html.dark .dz-sm-title { color:#E6EDF3; }
html.dark .dz-sm-sub   { color:rgba(255,255,255,.4); }
html.dark .file-pill { background:#1C2230; border-color:rgba(255,255,255,.1); color:rgba(255,255,255,.55); }
html.dark .ctx-box  { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.08); }
html.dark .ctxb-text { color:rgba(255,255,255,.5); }
html.dark .submit-section { background:#161B22; border-color:rgba(255,255,255,.09); }
html.dark .asc-done { background:rgba(62,182,69,.18); color:#4ADE80; }
html.dark .asc-prog { background:rgba(96,165,250,.18); color:#93C5FD; }
html.dark .asc-empty{ background:rgba(255,255,255,.06); color:rgba(255,255,255,.35); }
html.dark .sov-item { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.08); }
html.dark .sov-name { color:#E6EDF3; }
html.dark .sov-pct  { color:rgba(255,255,255,.4); }
html.dark .wpl-multi .wpl-name  { color:#FCD34D; }
html.dark .sm-steps { background:rgba(255,255,255,.04); }
html.dark .sm-step-row { color:rgba(255,255,255,.65); }
.sppr-hdr {
  background:var(--sqp-bg-card); border-bottom:1px solid var(--sqp-border);
  padding:14px 20px; position:sticky; top:52px; z-index:39;
}
.sh-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px; }
.sh-id { font-family:'DM Mono',monospace; font-size:18px; font-weight:800; color:var(--sqp-primary); }
.sh-badges { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:5px; }
.sh-right { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.sh-meta { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.sh-meta-item { display:flex; align-items:center; gap:5px; font-size:12px; color:var(--sqp-text-secondary); }
.sb-item { display:flex; flex-direction:column; align-items:center; padding:9px 10px; min-width:88px; border-bottom:2px solid transparent; }
.sb-done { border-bottom-color:var(--sqp-success); }
.sb-pend { border-bottom-color:var(--sqp-warning); }
.sb-locked { opacity:.4; }
.sb-top { display:flex; align-items:center; gap:4px; margin-bottom:3px; }
.sb-num { width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:800; flex-shrink:0; }
.sb-name { font-size:10px; font-weight:600; white-space:nowrap; }
.sb-sub { font-size:9px; color:var(--sqp-text-disabled); white-space:nowrap; }
.sb-sep { width:14px; height:2px; border-radius:1px; background:var(--sqp-border); align-self:center; flex-shrink:0; }
.iq-banner {
  background:linear-gradient(135deg,var(--sqp-primary-light) 0%,#EEF5FF 100%);
  border:1px solid rgba(0,94,255,.2); border-radius:10px;
  padding:14px 16px; display:flex; align-items:flex-start; gap:12px;
}
.iqb-icon { width:38px; height:38px; border-radius:9px; background:var(--sqp-primary); display:flex; align-items:center; justify-content:center; font-size:16px; color:#fff; flex-shrink:0; }
.iqb-text h3 { font-size:14px; font-weight:700; color:var(--sqp-navy); margin-bottom:4px; }
.val-progress { background:var(--sqp-bg-card); border:1px solid var(--sqp-border); border-radius:10px; padding:14px 16px; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.vp-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.vp-title { font-size:13px; font-weight:700; color:var(--sqp-navy); }
.vp-count { font-family:'DM Mono',monospace; font-size:12px; color:var(--sqp-text-secondary); }
.vp-bar { height:8px; background:var(--sqp-border); border-radius:4px; overflow:hidden; margin-bottom:8px; }
.vp-fill { height:100%; background:linear-gradient(90deg,var(--sqp-success),#4ADE80); border-radius:4px; transition:width .5s ease; }
.vp-legend { display:flex; gap:12px; flex-wrap:wrap; }
.vpl-item { display:flex; align-items:center; gap:5px; font-size:11px; color:var(--sqp-text-secondary); }
.vpl-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.sec-card { background:var(--sqp-bg-card); border:1px solid var(--sqp-border); border-radius:10px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.sec-card-hdr { display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--sqp-border); background:var(--sqp-bg-page); }
.sch-ic { width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
.sec-card-body { padding:16px; }
.val-cards { display:flex; flex-direction:column; gap:10px; }
.val-card { background:var(--sqp-bg-card); border:1px solid var(--sqp-border); border-radius:9px; overflow:hidden; transition:box-shadow .15s; }
.vc-hdr { display:flex; align-items:center; gap:10px; padding:12px 15px; cursor:pointer; user-select:none; }
.vc-num { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.vc-info { flex:1; }
.vc-name { font-size:13px; font-weight:600; color:var(--sqp-text); }
.vc-meta { font-size:11px; color:var(--sqp-text-secondary); margin-top:1px; }
.vc-right { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.vc-body { display:none; border-top:1px solid var(--sqp-border); padding:14px 15px; }
.vc-summary { font-size:12.5px; color:var(--sqp-text-secondary); line-height:1.65; margin-bottom:12px; background:var(--sqp-bg-page); border-radius:7px; padding:10px 12px; }
.approved-note { display:flex; align-items:center; gap:7px; font-size:12px; color:var(--sqp-success-text); font-weight:600; }
.vc-note { width:100%; border:1px solid var(--sqp-border); border-radius:7px; padding:8px 11px; font-size:12px; font-family:inherit; color:var(--sqp-text); background:var(--sqp-bg-page); resize:none; outline:none; transition:border-color .15s; }
.step8-content { display:flex; flex-direction:column; gap:12px; }
.team-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.team-member { display:flex; align-items:center; gap:10px; padding:11px 13px; background:var(--sqp-bg-page); border:1px solid var(--sqp-border); border-radius:8px; }
.tm-av { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:#fff; flex-shrink:0; }
.tm-info h4 { font-size:12.5px; font-weight:600; color:var(--sqp-text); }
.seg-result { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.sr-card { text-align:center; padding:12px; background:var(--sqp-bg-page); border:1px solid var(--sqp-border); border-radius:8px; }
.sr-num { font-size:22px; font-weight:800; }
.sr-lbl { font-size:11px; color:var(--sqp-text-secondary); margin-top:3px; }
.closure-ready-banner {
  background:linear-gradient(135deg,#ECFDF5,#D1FAE5); border:1.5px solid #6EE7B7;
  border-radius:10px; padding:16px; display:flex; gap:14px; align-items:flex-start;
  margin-bottom:16px;
}
.crb-icon { width:44px; height:44px; border-radius:10px; background:var(--sqp-success); display:flex; align-items:center; justify-content:center; font-size:20px; color:#fff; flex-shrink:0; }
.crb-text h3 { font-size:15px; font-weight:800; color:var(--sqp-success-text); margin-bottom:5px; }
.closure-pending-banner {
  background:#FFFBEB; border:1.5px solid #FDE68A;
  border-radius:10px; padding:14px; display:flex; gap:12px; align-items:center;
  margin-bottom:16px;
}
.cpb-icon { font-size:20px; color:var(--sqp-warning); flex-shrink:0; }
.cpb-text { font-size:13px; color:#B45309; }
.btn-close-sppr {
  width:100%; height:52px; background:linear-gradient(135deg,var(--sqp-success),#22C55E);
  color:#fff; border:none; border-radius:10px; font-size:16px; font-weight:800;
  font-family:inherit; cursor:pointer; display:flex; align-items:center;
  justify-content:center; gap:10px; transition:all .2s;
  box-shadow:0 4px 16px rgba(62,182,69,.35);
}
.score-card { background:linear-gradient(135deg,#EFF6FF,#DBEAFE); border:1px solid #BFDBFE; border-radius:10px; padding:14px; overflow:hidden; }
.sc-from-to { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.sc-score-box { text-align:center; }
.sc-arrow { font-size:18px; color:var(--sqp-text-disabled); }
.sc-change { display:flex; align-items:center; gap:5px; font-size:13px; font-weight:700; padding:4px 12px; border-radius:20px; background:rgba(255,255,255,.7); }
.score-factors { display:flex; flex-direction:column; gap:5px; }
.sf-row { display:flex; align-items:center; justify-content:space-between; font-size:11px; }
.sf-lbl { color:var(--sqp-text-secondary); }
.sf-val { font-weight:600; }
.sf-neg { color:var(--sqp-critical); }
.sf-pos { color:var(--sqp-success-text); }
.wpl-pend .wpl-ic { background:var(--sqp-warning); color:#fff; }
.notif-list { display:flex; flex-direction:column; gap:6px; }
.ni { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:7px; background:var(--sqp-bg-page); font-size:12px; }
.ni-wa { background:#E8F7E9; color:#25D366; }
.ni-email { background:#EFF6FF; color:var(--sqp-primary); }
.ni-teams { background:#EDE9FE; color:var(--sqp-purple); }
.closure-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:600; display:none; align-items:center; justify-content:center; backdrop-filter:blur(4px); }
.closure-modal { background:var(--sqp-bg-card); border-radius:20px; padding:36px; max-width:480px; width:90%; text-align:center; box-shadow:0 24px 60px rgba(0,0,0,.25); animation:cm .3s ease; }
.cm-confetti { font-size:40px; margin-bottom:14px; animation:bounce 1s ease 3; }
.cm-check { width:72px; height:72px; border-radius:50%; background:var(--sqp-success); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; animation:checkPop .5s .2s both; }
.cm-title { font-size:22px; font-weight:900; color:var(--sqp-navy); margin-bottom:6px; }
.cm-sppr { font-family:'DM Mono',monospace; font-size:16px; font-weight:700; color:var(--sqp-primary); background:var(--sqp-primary-light); padding:6px 16px; border-radius:8px; display:inline-block; margin:8px 0 12px; }
.cm-desc { font-size:13px; color:var(--sqp-text-secondary); line-height:1.7; margin-bottom:18px; }
.cm-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:20px; }
.cms-item { background:var(--sqp-bg-page); border-radius:8px; padding:10px 8px; text-align:center; }
.cms-num { font-size:18px; font-weight:800; color:var(--sqp-navy); }
.cms-lbl { font-size:10px; color:var(--sqp-text-secondary); margin-top:2px; }
.cm-actions { display:flex; flex-direction:column; gap:8px; }
html.dark .sppr-hdr   { background:#111827; border-bottom-color:rgba(255,255,255,.08); }
html.dark .sh-id      { color:#93C5FD; }
html.dark .sh-meta-item { color:rgba(255,255,255,.5); }
html.dark .sb-done .sb-name { color:#4ADE80; }
html.dark .sb-pend .sb-name { color:#FCD34D; }
html.dark .iq-banner { background:rgba(96,165,250,.08); border-color:rgba(96,165,250,.25); }
html.dark .iqb-text h3 { color:#93C5FD; }
html.dark .val-progress { background:#161B22; border-color:rgba(255,255,255,.09); }
html.dark .vp-title { color:#93C5FD; }
html.dark .vp-bar   { background:rgba(255,255,255,.1); }
html.dark .sec-card     { background:#161B22; border-color:rgba(255,255,255,.09); }
html.dark .sec-card-hdr { background:rgba(255,255,255,.03); border-bottom-color:rgba(255,255,255,.08); }
html.dark .val-card    { background:#161B22; border-color:rgba(255,255,255,.09); }
html.dark .vc-hdr:hover { background:rgba(255,255,255,.04); }
html.dark .vc-name  { color:#E6EDF3; }
html.dark .vc-meta  { color:rgba(255,255,255,.4); }
html.dark .vc-body  { border-top-color:rgba(255,255,255,.08); }
html.dark .vc-summary { background:rgba(255,255,255,.04); color:rgba(255,255,255,.55); }
html.dark .approved-note { color:#4ADE80; }
html.dark .vc-note { background:#0D1117; border-color:rgba(255,255,255,.12); color:#E6EDF3; }
html.dark .team-member { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.09); }
html.dark .tm-info h4  { color:#E6EDF3; }
html.dark .sr-card { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.09); }
html.dark .sr-lbl  { color:rgba(255,255,255,.4); }
html.dark .closure-ready-banner { background:rgba(62,182,69,.1); border-color:rgba(62,182,69,.3); }
html.dark .crb-text h3 { color:#4ADE80; }
html.dark .closure-pending-banner { background:rgba(245,158,11,.08); border-color:rgba(245,158,11,.3); }
html.dark .cpb-text { color:#FCD34D; }
html.dark .score-card { background:rgba(37,99,235,.1); border-color:rgba(37,99,235,.25); }
html.dark .sc-change { background:rgba(255,255,255,.08); }
html.dark .sf-lbl { color:rgba(255,255,255,.45); }
html.dark .wpl-pend .wpl-name { color:#FCD34D; }
html.dark .ni { background:rgba(255,255,255,.04); }
html.dark .ni-wa    { background:rgba(37,211,102,.12); }
html.dark .ni-email { background:rgba(59,130,246,.12); }
html.dark .ni-teams { background:rgba(124,58,237,.12); }
html.dark .closure-modal { background:#161B22; }
html.dark .cm-title { color:#93C5FD; }
html.dark .cm-desc  { color:rgba(255,255,255,.5); }
html.dark .cms-item { background:rgba(255,255,255,.04); }
html.dark .cms-num  { color:#E6EDF3; }
html.dark .cms-lbl  { color:rgba(255,255,255,.35); }
.fbar-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.mk-sched::after { background:var(--sqp-primary); }
.mk-prog::after { background:var(--sqp-warning); }
.mk-done::after { background:var(--sqp-success); }
.mk-over::after { background:var(--sqp-critical); }
.mn-sched { color:var(--sqp-primary); }
.mn-prog { color:#B45309; }
.mn-done { color:var(--sqp-success-text); }
.mn-over { color:var(--sqp-critical); }
.lc-left { display:flex; align-items:center; gap:10px; }
.lc-right { display:flex; align-items:center; gap:7px; }
.audit-table-wrap { overflow-x:auto; }
.audit-table { width:100%; border-collapse:collapse; font-size:12.5px; }
.audit-id { font-family:'DM Mono',monospace; font-size:12px; font-weight:700; color:var(--sqp-primary); }
.audit-date { font-size:10.5px; color:var(--sqp-text-disabled); margin-top:1px; }
.sup-tier { font-size:10px; padding:1px 6px; border-radius:4px; margin-top:2px; display:inline-block; }
.tier-1 { background:#EDE9FE; color:#5B21B6; }
.tier-2 { background:#EFF6FF; color:#1D4ED8; }
.tier-3 { background:#F3F4F6; color:#6B7280; }
.type-badge { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; padding:3px 9px; border-radius:6px; white-space:nowrap; }
.tb-system { background:#EDE9FE; color:#5B21B6; }
.tb-process { background:#EFF6FF; color:#1D4ED8; }
.tb-product { background:#ECFDF5; color:#065F46; }
.tb-special { background:#FFF7ED; color:#92400E; }
.st-sched { background:#EFF6FF; color:#1D4ED8; }
.st-done { background:#E8F7E9; color:#166534; }
.st-over { background:#FEE2E2; color:#B91C1C; }
.st-cancel { background:#F3F4F6; color:#6B7280; }
.score-cell { display:flex; align-items:center; gap:8px; }
.sc-num { font-size:15px; font-weight:800; }
.sc-bar { flex:1; height:5px; background:var(--sqp-border); border-radius:3px; overflow:hidden; min-width:40px; max-width:60px; }
.sc-fill { height:100%; border-radius:3px; }
.sc-na { font-size:12px; color:var(--sqp-text-disabled); font-style:italic; }
.aud-cell { display:flex; align-items:center; gap:6px; }
.aud-av { width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:8px; font-weight:700; color:#fff; flex-shrink:0; }
.aud-name { font-size:12px; font-weight:500; }
.act-open { background:var(--sqp-primary); color:#fff; border-color:var(--sqp-primary); padding:0 10px; font-size:11px; font-weight:600; gap:4px; width:auto; }
.drw-id { font-family:'DM Mono',monospace; font-size:14px; font-weight:700; color:var(--sqp-primary); }
.finding-list { display:flex; flex-direction:column; gap:7px; }
.finding-item { display:flex; align-items:flex-start; gap:8px; padding:9px 11px; border-radius:7px; }
.fi-major { background:#FEF3C7; border:1px solid #FDE68A; }
.fi-minor { background:#F3F4F6; border:1px solid #E5E7EB; }
.fi-obs { background:#EFF6FF; border:1px solid #BFDBFE; }
.fi-ok { background:#ECFDF5; border:1px solid #A7F3D0; }
.finding-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:3px; }
.fd-major { background:var(--sqp-warning); }
.fd-minor { background:#9CA3AF; }
.fd-obs { background:var(--sqp-primary); }
.fd-ok { background:var(--sqp-success); }
.finding-text { font-size:12px; line-height:1.55; }
.view-toggle { display:flex; gap:0; border:1px solid var(--sqp-border); border-radius:7px; overflow:hidden; }
.vt-btn { padding:5px 12px; border:none; background:var(--sqp-bg-page); cursor:pointer; font-size:12px; color:var(--sqp-text-secondary); font-family:inherit; transition:all .15s; }
html.dark .mn-sched { color:#93C5FD; }
html.dark .mn-prog  { color:#FCD34D; }
html.dark .mn-done  { color:#4ADE80; }
html.dark .mn-over  { color:#FCA5A5; }
html.dark .tier-1 { background:rgba(124,58,237,.18); color:#C4B5FD; }
html.dark .tier-2 { background:rgba(29,78,216,.18); color:#93C5FD; }
html.dark .tier-3 { background:rgba(255,255,255,.08); color:rgba(255,255,255,.5); }
html.dark .tb-system  { background:rgba(124,58,237,.18); color:#C4B5FD; }
html.dark .tb-process { background:rgba(29,78,216,.18);  color:#93C5FD; }
html.dark .tb-product { background:rgba(5,150,105,.18);  color:#4ADE80; }
html.dark .tb-special { background:rgba(217,119,6,.18);  color:#FCD34D; }
html.dark .st-sched { background:rgba(29,78,216,.15); color:#93C5FD; }
html.dark .st-done  { background:rgba(62,182,69,.15);  color:#4ADE80; }
html.dark .st-over  { background:rgba(233,2,41,.18);   color:#FCA5A5; }
html.dark .st-cancel{ background:rgba(255,255,255,.08); color:rgba(255,255,255,.45); }
html.dark .sc-bar { background:rgba(255,255,255,.1); }
html.dark .aud-name { color:#E6EDF3; }
html.dark .drw-id   { color:#93C5FD; }
html.dark .fi-major { background:rgba(245,158,11,.1); border-color:rgba(245,158,11,.25); }
html.dark .fi-minor { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.1); }
html.dark .fi-obs   { background:rgba(29,78,216,.1); border-color:rgba(29,78,216,.25); }
html.dark .fi-ok    { background:rgba(62,182,69,.1); border-color:rgba(62,182,69,.25); }
html.dark .finding-text { color:#E6EDF3; }
html.dark .view-toggle { border-color:rgba(255,255,255,.12); }
html.dark .vt-btn { background:rgba(255,255,255,.05); color:rgba(255,255,255,.55); }
html.dark .audit-table thead tr { background:#0D1117; }
html.dark .audit-id { color:#93C5FD; }
html.dark .audit-date { color:rgba(255,255,255,.3); }
html.dark .sc-na { color:rgba(255,255,255,.25); }
.aud-hdr {background:var(--sqp-bg-card);border-bottom:1px solid var(--sqp-border);padding:14px 20px;position:sticky;top:52px;z-index:39}
.ah-top {display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.ah-id {font-family:'DM Mono',monospace;font-size:18px;font-weight:800;color:var(--sqp-primary)}
.ah-badges {display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:5px}
.ah-meta {display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ahm {display:flex;align-items:center;gap:5px;font-size:12px;color:var(--sqp-text-secondary)}
.score-live-bar {background:var(--sqp-bg-card);border-bottom:1px solid var(--sqp-border);padding:10px 20px;position:sticky;top:calc(52px + 84px);z-index:38;display:flex;align-items:center;gap:16px}
.slb-score {display:flex;flex-direction:column;align-items:center;flex-shrink:0}
.slb-num {font-size:22px;font-weight:900;line-height:1}
.slb-lbl {font-size:10px;color:var(--sqp-text-secondary)}
.slb-bar-wrap {flex:1}
.slb-bar-track {height:10px;background:var(--sqp-border);border-radius:5px;overflow:hidden}
.slb-bar-fill {height:100%;border-radius:5px;transition:width .5s ease,background .5s}
.slb-legend {display:flex;gap:12px;margin-top:5px;flex-wrap:wrap}
.slb-leg {display:flex;align-items:center;gap:4px;font-size:10.5px;color:var(--sqp-text-secondary)}
.slb-dot {width:7px;height:7px;border-radius:50%}
.slb-counts {display:flex;gap:10px;flex-shrink:0}
.slb-count {text-align:center}
.slb-count-num {font-size:14px;font-weight:800;line-height:1}
.slb-count-lbl {font-size:9.5px;color:var(--sqp-text-disabled)}
.sc-hdr-ic {width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.chk-group {margin-bottom:14px;border:1px solid var(--sqp-border);border-radius:9px;overflow:hidden}
.cg-hdr {display:flex;align-items:center;gap:8px;padding:10px 13px;background:var(--sqp-bg-page);border-bottom:1px solid var(--sqp-border)}
.cg-title {flex:1;font-size:12.5px;font-weight:700;color:var(--sqp-text)}
.cg-score {font-size:11px;font-weight:700;padding:2px 9px;border-radius:10px;background:var(--sqp-border);color:var(--sqp-text-secondary)}
.chk-row {padding:10px 13px;border-bottom:1px solid var(--sqp-border);transition:background .1s}
.chk-code {font-family:'DM Mono',monospace;font-size:10px;color:var(--sqp-text-disabled);margin-bottom:3px}
.chk-desc {font-size:12.5px;color:var(--sqp-text);margin-bottom:8px;line-height:1.5}
.chk-opts {display:flex;gap:6px;flex-wrap:wrap}
.co-btn {padding:4px 12px;border-radius:6px;border:1.5px solid var(--sqp-border);background:var(--sqp-bg-card);cursor:pointer;font-size:11px;font-weight:600;font-family:inherit;transition:all .15s;display:inline-flex;align-items:center;gap:4px;color:var(--sqp-text-secondary)}
.co-ok.sel {background:#ECFDF5;border-color:#3EB645;color:#166534}
.co-min.sel {background:#FEF3C7;border-color:#F59E0B;color:#B45309}
.co-maj.sel {background:#FEE2E2;border-color:#E90229;color:#B91C1C}
.co-na.sel {background:#F3F4F6;border-color:#9CA3AF;color:#6B7280}
.chk-detail {margin-top:9px;display:flex;flex-direction:column;gap:7px}
.chk-note {width:100%;border:1px solid var(--sqp-warning);border-radius:7px;padding:7px 11px;font-size:12.5px;font-family:inherit;color:var(--sqp-text);background:var(--sqp-bg-page);resize:none;outline:none;transition:border-color .15s}
.item-upload-wrap {display:flex;flex-direction:column;gap:5px}
.item-upload-zone {display:flex;align-items:center;gap:9px;padding:7px 11px;border:1.5px dashed var(--sqp-border);border-radius:7px;cursor:pointer;background:var(--sqp-bg-page);transition:all .15s}
.item-files {display:flex;gap:5px;flex-wrap:wrap}
.item-pill {display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:5px;background:var(--sqp-bg-card);border:1px solid var(--sqp-border);font-size:10.5px;color:var(--sqp-text-secondary)}
.fi-item {display:flex;align-items:flex-start;gap:9px;padding:10px 12px;border-radius:8px;border:1px solid}
.fi-ic {font-size:14px;flex-shrink:0;margin-top:1px}
.fi-body {flex:1}
.fi-code {font-size:10px;font-family:'DM Mono',monospace;font-weight:700;margin-bottom:2px}
.fi-text {font-size:12px;color:var(--sqp-text);line-height:1.5}
.fp {display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:5px;background:var(--sqp-bg-card);border:1px solid var(--sqp-border);font-size:11px;color:var(--sqp-text-secondary)}
.btn-submit-audit {width:100%;height:46px;background:var(--sqp-primary);color:#fff;border:none;border-radius:9px;font-size:14px;font-weight:800;font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .15s}
.pm-row {display:flex;align-items:center;gap:7px;font-size:11px;margin-bottom:6px}
.pm-lbl {color:var(--sqp-text-secondary);width:60px}
.pm-track {flex:1;height:5px;background:var(--sqp-border);border-radius:3px;overflow:hidden}
.pm-fill {height:100%;border-radius:3px;transition:width .4s}
.pm-val {font-size:10px;font-weight:700;min-width:28px;text-align:right}
html.dark .aud-hdr{background:#111827;border-bottom-color:rgba(255,255,255,.08)}
html.dark .ah-id{color:#93C5FD}
html.dark .ahm{color:rgba(255,255,255,.5)}
html.dark .score-live-bar{background:#111827;border-bottom-color:rgba(255,255,255,.08)}
html.dark .slb-bar-track{background:rgba(255,255,255,.1)}
html.dark .slb-lbl{color:rgba(255,255,255,.4)}
html.dark .slb-leg{color:rgba(255,255,255,.45)}
html.dark .slb-count-lbl{color:rgba(255,255,255,.3)}
html.dark .chk-group{border-color:rgba(255,255,255,.09)}
html.dark .cg-hdr{background:rgba(255,255,255,.03);border-bottom-color:rgba(255,255,255,.08)}
html.dark .cg-title{color:#E6EDF3}
html.dark .chk-row:hover{background:rgba(255,255,255,.04)}
html.dark .chk-code{color:rgba(255,255,255,.3)}
html.dark .chk-desc{color:#E6EDF3}
html.dark .co-btn{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.5)}
html.dark .co-ok.sel{background:rgba(62,182,69,.12);border-color:rgba(62,182,69,.4);color:#4ADE80}
html.dark .co-min.sel{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.4);color:#FCD34D}
html.dark .co-maj.sel{background:rgba(233,2,41,.12);border-color:rgba(233,2,41,.4);color:#FCA5A5}
html.dark .co-na.sel{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.5)}
html.dark .chk-note{background:#0D1117;border-color:rgba(245,158,11,.4);color:#E6EDF3}
html.dark .item-upload-zone{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.12)}
html.dark .item-pill{background:#1C2230;border-color:rgba(255,255,255,.1);color:rgba(255,255,255,.5)}
html.dark .fi-text{color:#E6EDF3}
html.dark .fp{background:#1C2230;border-color:rgba(255,255,255,.1);color:rgba(255,255,255,.55)}
html.dark .pm-track{background:rgba(255,255,255,.1)}
html.dark .pm-lbl{color:rgba(255,255,255,.4)}
.prog-strip {background:var(--sqp-bg-card);border-bottom:1px solid var(--sqp-border);padding:12px 20px;position:sticky;top:calc(52px + 88px);z-index:38;display:flex;align-items:center;gap:16px}
.ps-title {font-size:12px;font-weight:600;color:var(--sqp-navy);flex-shrink:0}
.ps-bar-wrap {flex:1}
.ps-track {height:8px;background:var(--sqp-border);border-radius:4px;overflow:hidden;display:flex}
.ps-seg {height:100%;transition:width .5s}
.ps-verified {background:var(--sqp-success)}
.ps-submitted {background:var(--sqp-primary)}
.ps-open {background:var(--sqp-border)}
.ps-overdue {background:var(--sqp-critical)}
.ps-counts {display:flex;gap:12px;flex-shrink:0}
.psc {text-align:center}
.psc-num {font-size:14px;font-weight:800;line-height:1}
.psc-lbl {font-size:9.5px;color:var(--sqp-text-disabled)}
.finding-card {border:1px solid var(--sqp-border);border-left:3px solid;border-radius:9px;margin-bottom:10px;overflow:hidden;background:var(--sqp-bg-card)}
.fc-num {font-family:'DM Mono',monospace;font-size:11px;font-weight:800;color:var(--sqp-primary);flex-shrink:0;margin-top:2px}
.fc-info {flex:1;min-width:200px}
.fc-code {font-size:10.5px;font-weight:700;color:var(--sqp-text-secondary);margin-bottom:3px}
.fc-desc {font-size:12.5px;color:var(--sqp-text);line-height:1.6}
.fc-right {display:flex;align-items:center;gap:7px;flex-wrap:wrap;flex-shrink:0}
.resp-box {margin:0 14px 0;padding:10px 12px;background:var(--sqp-bg-page);border:1px solid var(--sqp-border);border-radius:8px;border-left:3px solid var(--sqp-primary)}
.rb-label {font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--sqp-primary);margin-bottom:4px}
.rb-text {font-size:12px;color:var(--sqp-text);line-height:1.6}
.verif-box {margin:8px 14px 0;padding:10px 12px;background:#ECFDF5;border:1px solid #A7F3D0;border-radius:8px;display:flex;align-items:flex-start;gap:8px}
.vb-text {font-size:12px;color:var(--sqp-success-text);line-height:1.5}
.fu-actions {display:flex;align-items:center;gap:8px;padding:10px 14px 12px;flex-wrap:wrap}
.filter-tabs {display:flex;gap:0;border:1px solid var(--sqp-border);border-radius:8px;overflow:hidden;margin-bottom:14px}
.ft-btn {flex:1;padding:7px 10px;border:none;background:var(--sqp-bg-card);cursor:pointer;font-size:11.5px;font-weight:600;color:var(--sqp-text-secondary);font-family:inherit;transition:all .15s;white-space:nowrap}
.stl-item {display:flex;align-items:flex-start;gap:8px;margin-bottom:8px}
.stl-ic {width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;flex-shrink:0}
.stl-done {background:var(--sqp-success);color:#fff}
.stl-prog {background:var(--sqp-primary);color:#fff}
.stl-todo {background:var(--sqp-border);color:var(--sqp-text-disabled)}
.stl-name {font-size:12px;font-weight:500;color:var(--sqp-text)}
.stl-sub {font-size:10px;color:var(--sqp-text-disabled)}
.sup-response-form { margin:0 14px 12px; padding:12px 14px; background:var(--sqp-bg-page); border:1.5px solid var(--sqp-warning); border-radius:9px; }
.srf-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#B45309; margin-bottom:8px; display:flex; align-items:center; gap:6px; }
.srf-ta { width:100%; border:1px solid var(--sqp-border); border-radius:7px; padding:9px 11px; font-size:12.5px; font-family:inherit; color:var(--sqp-text); background:var(--sqp-bg-card); resize:vertical; min-height:80px; outline:none; transition:border-color .15s; line-height:1.6; }
.srf-upload { display:flex; align-items:center; gap:9px; margin-top:8px; padding:8px 11px; border:1.5px dashed var(--sqp-border); border-radius:7px; cursor:pointer; background:var(--sqp-bg-page); transition:all .15s; }
.srf-upload-text { font-size:11.5px; color:var(--sqp-text-secondary); }
.srf-files { display:flex; gap:5px; flex-wrap:wrap; margin-top:6px; }
.srf-pill { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:5px; background:var(--sqp-bg-card); border:1px solid var(--sqp-border); font-size:10.5px; color:var(--sqp-text-secondary); }
.srf-pill-rm { background:none; border:none; cursor:pointer; color:var(--sqp-text-disabled); font-size:10px; }
.srf-footer { display:flex; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap; }
.srf-char { font-size:11px; color:var(--sqp-text-disabled); flex:1; }
.srf-hint { font-size:11px; color:var(--sqp-text-secondary); margin-top:6px; font-style:italic; }
html.dark .prog-strip{background:#111827;border-bottom-color:rgba(255,255,255,.08)}
html.dark .ps-title{color:#93C5FD}
html.dark .ps-track{background:rgba(255,255,255,.1)}
html.dark .psc-lbl{color:rgba(255,255,255,.3)}
html.dark .finding-card{background:#161B22;border-color:rgba(255,255,255,.09)}
html.dark .fc-code{color:rgba(255,255,255,.4)}
html.dark .fc-desc{color:#E6EDF3}
html.dark .resp-box{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);border-left-color:#60A5FA}
html.dark .rb-label{color:#93C5FD}
html.dark .rb-text{color:#E6EDF3}
html.dark .verif-box{background:rgba(62,182,69,.1);border-color:rgba(62,182,69,.25)}
html.dark .vb-text{color:#4ADE80}
html.dark .filter-tabs{border-color:rgba(255,255,255,.12)}
html.dark .ft-btn{background:rgba(255,255,255,.05);color:rgba(255,255,255,.55)}
html.dark .stl-todo{background:rgba(255,255,255,.1)}
html.dark .stl-name{color:#E6EDF3}
html.dark .stl-sub{color:rgba(255,255,255,.3)}
html.dark .sup-response-form { background:rgba(245,158,11,.06); border-color:rgba(245,158,11,.35); }
html.dark .srf-label { color:#FCD34D; }
html.dark .srf-ta { background:#0D1117; border-color:rgba(255,255,255,.12); color:#E6EDF3; }
html.dark .srf-upload { background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.12); }
html.dark .srf-upload-text { color:rgba(255,255,255,.4); }
html.dark .srf-pill { background:#1C2230; border-color:rgba(255,255,255,.1); }
html.dark .srf-char { color:rgba(255,255,255,.3); }
html.dark .srf-hint { color:rgba(255,255,255,.4); }
.fhdr {background:var(--sqp-bg-card);border-bottom:1px solid var(--sqp-border);padding:14px 20px;position:sticky;top:52px;z-index:39}
.fhdr-top {display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.fhdr-id {font-family:'DM Mono',monospace;font-size:20px;font-weight:900;color:var(--sqp-critical)}
.fhdr-badges {display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:5px}
.fhdr-meta {display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.fhm {display:flex;align-items:center;gap:5px;font-size:12px;color:var(--sqp-text-secondary)}
.overdue-alert {background:linear-gradient(135deg,#FEF2F2,#FEE2E2);border-bottom:2px solid var(--sqp-critical);padding:10px 20px;display:flex;align-items:center;gap:12px}
.oa-ic {font-size:20px;color:var(--sqp-critical);flex-shrink:0;animation:pulse 2s infinite}
.oa-text h4 {font-size:13px;font-weight:800;color:var(--sqp-critical);margin-bottom:2px}
.oa-right {margin-left:auto;flex-shrink:0}
.ap-layout {display:grid;grid-template-columns:1fr 300px;gap:16px;align-items:start}
.ap-main {display:flex;flex-direction:column;gap:14px}
.ap-aside {display:flex;flex-direction:column;gap:12px;position:sticky;top:calc(52px+84px+46px+16px)}
.card-hdr {display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--sqp-border);background:var(--sqp-bg-page)}
.card-hdr-ic {width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.finding-desc-box {background:var(--sqp-bg-page);border:1px solid var(--sqp-border);border-left:4px solid var(--sqp-critical);border-radius:8px;padding:14px 16px}
.fdb-label {font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--sqp-critical);margin-bottom:6px;display:flex;align-items:center;gap:5px}
.fdb-text {font-size:13px;color:var(--sqp-text);line-height:1.75}
.fdb-detail-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.fdg-item {background:var(--sqp-bg-card);border:1px solid var(--sqp-border);border-radius:7px;padding:9px 11px}
.fdg-label {font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--sqp-text-disabled);margin-bottom:3px}
.fdg-val {font-size:12.5px;font-weight:600;color:var(--sqp-text)}
.ap-form {display:flex;flex-direction:column;gap:14px}
.char-ctr {font-size:10.5px;color:var(--sqp-text-disabled);text-align:right;margin-top:2px}
.rc-link-box {background:var(--sqp-bg-page);border:1px solid var(--sqp-border);border-radius:8px;padding:11px 13px;display:flex;align-items:center;gap:10px}
.rclb-ic {width:32px;height:32px;border-radius:7px;background:var(--sqp-primary-light);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--sqp-primary);flex-shrink:0}
.rclb-info {flex:1}
.rclb-label {font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--sqp-text-secondary);margin-bottom:2px}
.rclb-id {font-family:'DM Mono',monospace;font-size:13px;font-weight:700;color:var(--sqp-primary)}
.rclb-desc {font-size:11px;color:var(--sqp-text-secondary);margin-top:1px}
.dz-ic {font-size:28px;color:var(--sqp-text-disabled);margin-bottom:8px}
.dz-t {font-size:13px;font-weight:600;color:var(--sqp-text);margin-bottom:3px}
.dz-s {font-size:11.5px;color:var(--sqp-text-secondary)}
.ev-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin-top:10px}
.ev-card {background:var(--sqp-bg-page);border:1px solid var(--sqp-border);border-radius:8px;padding:10px;text-align:center;position:relative}
.timeline {display:flex;flex-direction:column;gap:0}
.tl-item {display:flex;gap:12px}
.tl-left {display:flex;flex-direction:column;align-items:center;flex-shrink:0}
.tl-dot {width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}
.tl-line {flex:1;width:2px;background:var(--sqp-border);margin:3px 0}
.tl-content {padding:0 0 18px 0;flex:1}
.tl-time {font-size:10.5px;color:var(--sqp-text-disabled);margin-bottom:4px}
.tl-card {background:var(--sqp-bg-page);border:1px solid var(--sqp-border);border-radius:8px;padding:11px 13px}
.tl-dot-create {background:var(--sqp-border);color:var(--sqp-text-secondary)}
.tl-dot-notif {background:var(--sqp-warning);color:#fff}
.tl-dot-reminder {background:#7C3AED;color:#fff}
.tl-dot-overdue {background:var(--sqp-critical);color:#fff}
.tl-dot-submit {background:var(--sqp-primary);color:#fff}
.tl-dot-verify {background:var(--sqp-success);color:#fff}
.verif-panel {background:var(--sqp-bg-page);border:1.5px solid var(--sqp-border);border-radius:9px;padding:16px}
.vp-header {display:flex;align-items:center;gap:8px;margin-bottom:12px}
.vp-ic {width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.vp-waiting .vp-ic {background:#FEF3C7;color:#D97706}
.vp-sub {font-size:11px;color:var(--sqp-text-secondary);margin-top:1px}
.verif-note-box {background:var(--sqp-bg-card);border:1px solid var(--sqp-border);border-radius:7px;padding:10px 12px;font-size:12.5px;color:var(--sqp-text);line-height:1.6;margin-bottom:12px;min-height:70px;outline:none;width:100%;resize:vertical;font-family:inherit;transition:border-color .15s}
.verif-actions {display:flex;gap:8px}
.comm-list {display:flex;flex-direction:column;gap:6px}
.comm-item {display:flex;align-items:flex-start;gap:9px;padding:9px 11px;border-radius:7px;background:var(--sqp-bg-page);border:1px solid var(--sqp-border)}
.ci-ic {width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
.ci-wa {background:#E8F7E9;color:#25D366}
.ci-sys {background:#EFF6FF;color:var(--sqp-primary)}
.ci-email {background:#EDE9FE;color:#7C3AED}
.ci-title {font-size:12px;font-weight:600;color:var(--sqp-text)}
.ci-sub {font-size:10.5px;color:var(--sqp-text-secondary);margin-top:1px}
.ci-time {font-size:10px;color:var(--sqp-text-disabled);flex-shrink:0;margin-top:1px}
.related-item {display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:7px;background:var(--sqp-bg-page);border:1px solid var(--sqp-border);cursor:pointer;transition:background .15s;margin-bottom:6px}
.ri-id {font-family:'DM Mono',monospace;font-size:10.5px;font-weight:700;color:var(--sqp-primary);flex-shrink:0}
.ri-desc {font-size:11px;color:var(--sqp-text-secondary);flex:1;line-height:1.3}
.ri-badge {font-size:9px;padding:2px 6px;border-radius:10px;flex-shrink:0}
.rb-done {background:#ECFDF5;color:#166534}
.rb-open {background:#EFF6FF;color:#1D4ED8}
.rb-over {background:#FEE2E2;color:#B91C1C}
.btn-save-ap {width:100%;height:46px;background:var(--sqp-primary);color:#fff;border:none;border-radius:9px;font-size:14px;font-weight:800;font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .15s}
.sla-countdown {background:linear-gradient(135deg,#FEF2F2,#FEE2E2);border:1.5px solid var(--sqp-critical);border-radius:10px;padding:14px 16px;display:flex;align-items:center;gap:12px}
.sla-ic {width:40px;height:40px;border-radius:9px;background:var(--sqp-critical);display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;flex-shrink:0;animation:pulse 2s infinite}
.sla-text h4 {font-size:15px;font-weight:900;color:var(--sqp-critical);margin-bottom:3px}
.sla-badge {margin-left:auto;flex-shrink:0;background:var(--sqp-critical);color:#fff;font-size:11px;font-weight:800;padding:4px 12px;border-radius:20px}
.impl-chip {padding:5px 13px;border-radius:7px;border:1.5px solid var(--sqp-border);background:var(--sqp-bg-card);cursor:pointer;font-size:12px;font-weight:600;font-family:inherit;transition:all .15s;display:inline-flex;align-items:center;gap:5px;color:var(--sqp-text-secondary)}
.sel-planned {border-color:var(--sqp-primary);background:var(--sqp-primary-light);color:var(--sqp-primary)}
.sel-inprog {border-color:var(--sqp-warning);background:#FFFBEB;color:#B45309}
.sel-done {border-color:var(--sqp-success);background:#ECFDF5;color:var(--sqp-success-text)}
html.dark .fhdr{background:#111827;border-bottom-color:rgba(255,255,255,.08)}
html.dark .fhdr-id{color:#FCA5A5}
html.dark .fhm{color:rgba(255,255,255,.5)}
html.dark .overdue-alert{background:linear-gradient(135deg,rgba(233,2,41,.08),rgba(233,2,41,.12));border-bottom-color:rgba(233,2,41,.5)}
html.dark .oa-text h4{color:#FCA5A5}
html.dark .card-hdr{background:rgba(255,255,255,.03);border-bottom-color:rgba(255,255,255,.08)}
html.dark .finding-desc-box{background:rgba(233,2,41,.05);border-color:rgba(255,255,255,.08);border-left-color:rgba(233,2,41,.5)}
html.dark .fdb-label{color:#FCA5A5}
html.dark .fdb-text{color:#E6EDF3}
html.dark .fdg-item{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.09)}
html.dark .fdg-label{color:rgba(255,255,255,.3)}
html.dark .fdg-val{color:#E6EDF3}
html.dark .char-ctr{color:rgba(255,255,255,.3)}
html.dark .rc-link-box{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.09)}
html.dark .rclb-ic{background:rgba(96,165,250,.15);color:#93C5FD}
html.dark .rclb-label{color:rgba(255,255,255,.4)}
html.dark .rclb-id{color:#93C5FD}
html.dark .rclb-desc{color:rgba(255,255,255,.4)}
html.dark .dz-t{color:#E6EDF3}
html.dark .ev-card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.09)}
html.dark .ev-name{color:rgba(255,255,255,.5)}
html.dark .tl-line{background:rgba(255,255,255,.1)}
html.dark .tl-card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.09)}
html.dark .tl-dot-create{background:rgba(255,255,255,.15);color:rgba(255,255,255,.5)}
html.dark .verif-panel{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
html.dark .vp-sub{color:rgba(255,255,255,.4)}
html.dark .verif-note-box{background:#0D1117;border-color:rgba(255,255,255,.12);color:#E6EDF3}
html.dark .comm-item{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.09)}
html.dark .ci-title{color:#E6EDF3}
html.dark .ci-sub{color:rgba(255,255,255,.4)}
html.dark .ci-wa{background:rgba(37,211,102,.15);color:#4ADE80}
html.dark .ci-sys{background:rgba(29,78,216,.15);color:#93C5FD}
html.dark .ci-email{background:rgba(124,58,237,.15);color:#C4B5FD}
html.dark .related-item{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.09)}
html.dark .ri-id{color:#93C5FD}
html.dark .ri-desc{color:rgba(255,255,255,.4)}
html.dark .sla-countdown{background:linear-gradient(135deg,rgba(233,2,41,.08),rgba(233,2,41,.12));border-color:rgba(233,2,41,.4)}
html.dark .sla-text h4{color:#FCA5A5}
html.dark .impl-chip{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.5)}
html.dark .sel-planned{border-color:rgba(96,165,250,.4);background:rgba(96,165,250,.12);color:#93C5FD}
html.dark .sel-inprog{border-color:rgba(245,158,11,.4);background:rgba(245,158,11,.08);color:#FCD34D}
html.dark .sel-done{border-color:rgba(62,182,69,.4);background:rgba(62,182,69,.08);color:#4ADE80}
.kpi-strip {display:grid;grid-template-columns:repeat(5,1fr);gap:10px;padding:14px 20px;background:var(--sqp-bg-card);border-bottom:1px solid var(--sqp-border)}
.ks-item {text-align:center;padding:8px;border-radius:8px;cursor:pointer;transition:background .15s;border:1.5px solid transparent}
.ks-num {font-size:22px;font-weight:900;line-height:1}
.ks-lbl {font-size:10px;color:var(--sqp-text-secondary);margin-top:3px}
.lc-tb {display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--sqp-border);gap:10px;flex-wrap:wrap}
.ap-table {width:100%;border-collapse:collapse;font-size:12.5px}
.drw-overlay {position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:500;display:none;backdrop-filter:blur(2px)}
.drw-top {display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--sqp-border);flex-shrink:0}
.drw-mono-id {font-family:"DM Mono",monospace;font-size:14px;font-weight:800;color:var(--sqp-primary)}
.drw-meta-grid {display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.dmg-item {background:var(--sqp-bg-page);border:1px solid var(--sqp-border);border-radius:7px;padding:9px 11px}
.dmg-lbl {font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--sqp-text-disabled);margin-bottom:3px}
.dmg-val {font-size:12.5px;font-weight:600;color:var(--sqp-text)}
.drw-sec {margin-bottom:16px}
.drw-sec-label {font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--sqp-text-secondary);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.action-form-box {background:var(--sqp-bg-page);border:1.5px solid var(--sqp-warning);border-radius:9px;padding:12px 14px}
.af-ta {width:100%;border:1px solid var(--sqp-border);border-radius:7px;padding:9px 11px;font-size:12.5px;font-family:inherit;color:var(--sqp-text);background:var(--sqp-bg-card);resize:vertical;min-height:90px;outline:none;transition:border-color .15s;line-height:1.65}
.af-row {display:flex;gap:8px;margin-top:9px}
.af-fi {height:34px;border:1px solid var(--sqp-border);border-radius:7px;padding:0 10px;font-size:12px;color:var(--sqp-text);font-family:inherit;background:var(--sqp-bg-page);outline:none;transition:border-color .15s;flex:1}
.af-upload {display:flex;align-items:center;gap:8px;margin-top:8px;padding:7px 10px;border:1.5px dashed var(--sqp-border);border-radius:7px;cursor:pointer;background:var(--sqp-bg-page);transition:all .15s;font-size:12px;color:var(--sqp-text-secondary)}
.af-pills {display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
.af-pill {display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:5px;background:var(--sqp-bg-card);border:1px solid var(--sqp-border);font-size:10.5px;color:var(--sqp-text-secondary)}
.verified-box {background:#ECFDF5;border:1px solid #A7F3D0;border-radius:8px;padding:11px 14px;display:flex;align-items:flex-start;gap:9px}
.verified-text h4 {font-size:12.5px;font-weight:700;color:var(--sqp-success-text);margin-bottom:3px}
html.dark .kpi-strip{background:#111827;border-bottom-color:rgba(255,255,255,.08)}
html.dark .ks-lbl{color:rgba(255,255,255,.4)}
html.dark .ks-item:hover{background:rgba(255,255,255,.06)}
html.dark .lc-tb{border-bottom-color:rgba(255,255,255,.08)}
html.dark .ap-table thead tr{background:#0D1117}
html.dark .drw-top{border-bottom-color:rgba(255,255,255,.08)}
html.dark .drw-mono-id{color:#93C5FD}
html.dark .dmg-item{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.09)}
html.dark .dmg-lbl{color:rgba(255,255,255,.3)}
html.dark .dmg-val{color:#E6EDF3}
html.dark .action-form-box{background:rgba(245,158,11,.05);border-color:rgba(245,158,11,.3)}
html.dark .af-ta{background:#0D1117;border-color:rgba(255,255,255,.12);color:#E6EDF3}
html.dark .af-fi{background:#0D1117;border-color:rgba(255,255,255,.12);color:#E6EDF3}
html.dark .af-upload{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.12)}
html.dark .af-pill{background:#1C2230;border-color:rgba(255,255,255,.1);color:rgba(255,255,255,.5)}
html.dark .verified-box{background:rgba(62,182,69,.1);border-color:rgba(62,182,69,.25)}
html.dark .verified-text h4{color:#4ADE80}
.report-layout {display:grid;grid-template-columns:1fr 280px;gap:14px;align-items:start}
.report-main {display:flex;flex-direction:column;gap:14px}
.report-aside {display:flex;flex-direction:column;gap:10px;position:sticky;top:70px}
.rpt-hdr-card {background:var(--sqp-bg-card);border:1px solid var(--sqp-border);border-radius:10px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.rpt-hdr-top {background:linear-gradient(135deg,var(--sqp-navy) 0%,#1A5FA0 100%);padding:20px 22px}
.rht-row {display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.rht-id {font-family:'DM Mono',monospace;font-size:20px;font-weight:800;color:#fff}
.rht-type {font-size:12px;color:rgba(255,255,255,.7);margin-top:4px}
.rht-score-box {text-align:center}
.rht-score-num {font-size:44px;font-weight:900;color:#fff;line-height:1}
.rht-score-lbl {font-size:11px;color:rgba(255,255,255,.6)}
.rht-score-zone {font-size:12px;font-weight:700;padding:3px 12px;border-radius:20px;background:rgba(255,255,255,.2);color:#fff;margin-top:6px;display:inline-block}
.rht-meta {display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:12px}
.rhtm {display:flex;align-items:center;gap:5px;font-size:11.5px;color:rgba(255,255,255,.75)}
.rpt-hdr-stats {display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--sqp-border)}
.rhs-item {padding:12px 14px;text-align:center;border-right:1px solid var(--sqp-border)}
.rhs-num {font-size:22px;font-weight:800;line-height:1}
.rhs-lbl {font-size:10.5px;color:var(--sqp-text-secondary);margin-top:3px}
.score-breakdown {display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:14px}
.sbd-item {background:var(--sqp-bg-page);border:1px solid var(--sqp-border);border-radius:8px;padding:10px;text-align:center}
.sbd-num {font-size:18px;font-weight:800;line-height:1}
.sbd-lbl {font-size:10px;color:var(--sqp-text-secondary);margin-top:3px}
.sbd-score {font-size:11px;font-weight:700;margin-top:4px;padding:2px 8px;border-radius:10px;display:inline-block}
.findings-table {width:100%;border-collapse:collapse;font-size:12.5px}
.sev-maj {background:#FEF3C7;color:#B45309}
.sev-min {background:#F3F4F6;color:#6B7280}
.reco-list {display:flex;flex-direction:column;gap:8px}
.reco-item {display:flex;align-items:flex-start;gap:10px;padding:10px 13px;border-radius:8px;border:1px solid}
.reco-urgent {background:#FEF3C7;border-color:#FDE68A}
.reco-normal {background:#EFF6FF;border-color:#BFDBFE}
.reco-ic {font-size:16px;flex-shrink:0;margin-top:1px}
.reco-body h4 {font-size:12.5px;font-weight:700;color:var(--sqp-text);margin-bottom:3px}
html.dark .rpt-hdr-card{background:#161B22;border-color:rgba(255,255,255,.09)}
html.dark .rpt-hdr-stats{border-top-color:rgba(255,255,255,.08)}
html.dark .rhs-item{border-right-color:rgba(255,255,255,.08)}
html.dark .rhs-lbl{color:rgba(255,255,255,.45)}
html.dark .sbd-item{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.09)}
html.dark .sbd-lbl{color:rgba(255,255,255,.4)}
html.dark .findings-table th{background:#0D1117;border-bottom-color:rgba(255,255,255,.08);color:rgba(255,255,255,.4)}
html.dark .sev-maj{background:rgba(245,158,11,.15);color:#FCD34D}
html.dark .sev-min{background:rgba(255,255,255,.08);color:rgba(255,255,255,.5)}
html.dark .reco-urgent{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.25)}
html.dark .reco-normal{background:rgba(29,78,216,.1);border-color:rgba(29,78,216,.25)}
html.dark .reco-body h4{color:#E6EDF3}
.tb-srch {position:relative}
.tb-srch-ic {position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--sqp-text-disabled);font-size:12px;pointer-events:none}
.fb-sum {margin-left:auto;font-size:11px;color:var(--sqp-text-secondary);background:var(--sqp-bg-page);padding:3px 10px;border-radius:6px;border:1px solid var(--sqp-border);white-space:nowrap}
.sup-table {width:100%;border-collapse:collapse;font-size:12.5px}
.sup-row:hover td {background:rgba(0,94,255,.025)}
html.dark .tb-srch input{background:#0D1117;border-color:rgba(255,255,255,.12);color:#E6EDF3}
html.dark .fb-sum{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1);color:rgba(255,255,255,.5)}
html.dark .sup-table thead tr{background:#0D1117}
html.dark .sup-row:hover td{background:rgba(255,255,255,.04)}
html.dark .pg-wrap{background:#0D1117}
html.dark .ks-num{color:inherit}
.sup-hdr {background:var(--sqp-bg-card);border-bottom:1px solid var(--sqp-border);
  padding:14px 20px;position:sticky;top:52px;z-index:39}
.sh-avatar {width:48px;height:48px;border-radius:10px;background:var(--sqp-primary-light);
  display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:900;
  color:var(--sqp-primary);flex-shrink:0;border:1.5px solid rgba(0,94,255,.2)}
.sh-name {font-size:18px;font-weight:800;color:var(--sqp-navy);line-height:1.1}
.sh-sub {font-size:12px;color:var(--sqp-text-secondary);margin-top:3px}
.shm {display:flex;align-items:center;gap:5px;font-size:12px;color:var(--sqp-text-secondary)}
.tab-bar {background:var(--sqp-bg-card);border-bottom:1px solid var(--sqp-border);
  padding:0 20px;position:sticky;top:calc(52px + 88px);z-index:38;
  display:flex;gap:0;overflow-x:auto}
.tab-btn {padding:12px 18px;font-size:13px;font-weight:600;color:var(--sqp-text-secondary);
  background:none;border:none;cursor:pointer;border-bottom:2.5px solid transparent;
  font-family:inherit;white-space:nowrap;transition:all .15s;display:flex;align-items:center;gap:6px}
.pic-dual-grid {display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pic-box {border-radius:8px;padding:12px 14px;border:1px solid var(--sqp-border)}
.pic-box-sup {background:var(--sqp-bg-page);border-left:3px solid var(--pic-sup-txt)}
.pic-box-alva {background:var(--sqp-bg-page);border-left:3px solid var(--pic-alva-txt)}
.pic-box-label {font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.pic-contact {font-size:11px;color:var(--sqp-text-secondary);margin-top:6px;
  display:flex;align-items:center;gap:5px}
.pic-badge {display:inline-flex;align-items:center;gap:4px;font-size:9px;font-weight:700;
  padding:2px 7px;border-radius:4px;margin-bottom:6px}
.pic-badge-sup {background:var(--pic-sup-bg);color:var(--pic-sup-txt)}
.pic-badge-alva {background:var(--pic-alva-bg);color:var(--pic-alva-txt)}
.info-grid {display:grid;grid-template-columns:1fr 1fr;gap:10px}
.info-item {background:var(--sqp-bg-page);border:1px solid var(--sqp-border);
  border-radius:7px;padding:10px 12px}
.ii-label {font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  color:var(--sqp-text-disabled);margin-bottom:4px}
.ii-val {font-size:13px;font-weight:600;color:var(--sqp-text)}
.ii-sub {font-size:11px;color:var(--sqp-text-secondary);margin-top:2px}
.sc-bar-track {height:8px;background:var(--sqp-border);border-radius:4px;overflow:hidden;margin:6px 0}
.sc-bar-fill {height:100%;border-radius:4px;background:var(--score-warn);width:74%}
.sc-trend {font-size:12px;font-weight:600;color:var(--score-bad)}
.sc-threshold {font-size:10.5px;color:var(--sqp-text-disabled);margin-top:4px}
.qm-card {border:1.5px dashed var(--sqp-border);border-radius:9px;padding:16px;
  text-align:center;cursor:pointer;transition:all .2s;background:var(--sqp-bg-page)}
.qm-uploaded {background:var(--sqp-bg-page);border:1px solid var(--sqp-border);
  border-radius:8px;padding:11px 13px;display:flex;align-items:center;gap:10px}
.qmu-ic {width:32px;height:32px;border-radius:7px;background:#FEE2E2;
  display:flex;align-items:center;justify-content:center;font-size:14px;color:#B91C1C;flex-shrink:0}
.mini-table {width:100%;border-collapse:collapse;font-size:12px}
.perf-bars {display:flex;flex-direction:column;gap:7px}
.pb-row {display:flex;align-items:center;gap:8px}
.pb-label {font-size:11px;color:var(--sqp-text-secondary);width:60px;flex-shrink:0}
.pb-track {flex:1;height:6px;background:var(--sqp-border);border-radius:3px;overflow:hidden}
.pb-fill {height:100%;border-radius:3px}
.pb-val {font-size:11px;font-weight:700;min-width:30px;text-align:right}
.risk-badge {display:inline-flex;align-items:center;gap:5px;font-size:11px;
  font-weight:700;padding:4px 12px;border-radius:20px}
.rb-high {background:var(--score-bad-bg);color:var(--score-bad);border:1px solid var(--score-bad-bd)}
.rb-med {background:var(--score-warn-bg);color:var(--score-warn);border:1px solid var(--score-warn-bd)}
.rb-low {background:var(--score-good-bg);color:var(--score-good);border:1px solid var(--score-good-bd)}
html.dark .sup-hdr{background:#111827;border-bottom-color:rgba(255,255,255,.08)}
html.dark .sh-name{color:#E6EDF3}
html.dark .sh-avatar{background:rgba(96,165,250,.15);color:#93C5FD;border-color:rgba(96,165,250,.25)}
html.dark .shm{color:rgba(255,255,255,.45)}
html.dark .tab-bar{background:#111827;border-bottom-color:rgba(255,255,255,.08)}
html.dark .tab-btn{color:rgba(255,255,255,.45)}
html.dark .pic-box{border-color:rgba(255,255,255,.1)}
html.dark .pic-box-sup{background:rgba(5,150,105,.05)}
html.dark .pic-box-alva{background:rgba(96,165,250,.05)}
html.dark .pic-contact{color:rgba(255,255,255,.4)}
html.dark .info-item{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.09)}
html.dark .ii-label{color:rgba(255,255,255,.3)}
html.dark .ii-val{color:#E6EDF3}
html.dark .ii-sub{color:rgba(255,255,255,.4)}
html.dark .sc-bar-track{background:rgba(255,255,255,.1)}
html.dark .sc-threshold{color:rgba(255,255,255,.3)}
html.dark .qm-card{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.12)}
html.dark .qm-uploaded{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.09)}
html.dark .qmu-ic{background:rgba(233,2,41,.15);color:#FCA5A5}
html.dark .mini-table thead tr{background:#0D1117}
html.dark .pb-track{background:rgba(255,255,255,.1)}
html.dark .pb-label{color:rgba(255,255,255,.4)}
.sc-hdr-l {display:flex;align-items:center;gap:10px}
.tbl {width:100%;border-collapse:collapse;font-size:12.5px}
.st-approved {background:var(--score-good-bg);color:var(--score-good)}
.st-rejected {background:var(--score-bad-bg);color:var(--score-bad)}
.prog-bar {height:8px;background:var(--sqp-border);border-radius:4px;overflow:hidden;margin-top:4px}
.prog-fill {height:100%;border-radius:4px;transition:width .3s}
.ppap-card {background:var(--sqp-bg-card);border:1px solid var(--sqp-border);border-radius:9px;padding:14px 16px;margin-bottom:8px;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:14px}
.ppap-avatar {width:40px;height:40px;border-radius:9px;background:var(--sqp-primary-light);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;color:var(--sqp-primary);flex-shrink:0}
.ppap-pct {font-size:20px;font-weight:900;line-height:1}
html.dark .tbl thead tr{background:#0D1117}
html.dark .prog-bar{background:rgba(255,255,255,.1)}
html.dark .ppap-card{background:#161B22;border-color:rgba(255,255,255,.09)}
.track-elem {background:var(--sqp-bg-page);border:1px solid var(--sqp-border);border-radius:8px;padding:10px 12px;display:flex;align-items:center;gap:10px;margin-bottom:6px}
.te-num {width:22px;height:22px;border-radius:50%;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.te-approved {background:var(--score-good-bg);color:var(--score-good)}
.te-pending {background:var(--pic-alva-bg);color:var(--pic-alva-txt)}
.te-missing {background:var(--score-bad-bg);color:var(--score-bad)}
.te-review {background:var(--score-warn-bg);color:var(--score-warn)}
html.dark .track-elem{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.09)}
.psw-field {background:var(--sqp-bg-page);border:1px solid var(--sqp-border);border-radius:8px;padding:12px 14px;margin-bottom:10px}
.pf-label {font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--sqp-text-disabled);margin-bottom:6px}
.pf-val {font-size:13px;font-weight:700;color:var(--sqp-text)}
.pf-sub {font-size:11px;color:var(--sqp-text-secondary);margin-top:2px}
.fi-full {width:100%;border:1px solid var(--sqp-border);border-radius:7px;padding:8px 11px;font-size:13px;color:var(--sqp-text);font-family:inherit;background:var(--sqp-bg-page);outline:none}
html.dark .psw-field{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.09)}
html.dark .pf-label{color:rgba(255,255,255,.3)}
html.dark .pf-val{color:#E6EDF3}
html.dark .pf-sub{color:rgba(255,255,255,.4)}
html.dark .fi-full{background:#0D1117;border-color:rgba(255,255,255,.12);color:#E6EDF3}
.claim-card {background:var(--sqp-bg-card);border:1px solid var(--sqp-border);border-radius:9px;padding:13px 15px;margin-bottom:8px;cursor:pointer;transition:all .15s;display:flex;align-items:flex-start;gap:12px}
.claim-icon {width:38px;height:38px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
html.dark .claim-card{background:#161B22;border-color:rgba(255,255,255,.09)}

/* === ADDITIONAL CLASSES (used in Next.js pages) === */

/* Wizard strip (step progress bar) */
.wiz-strip {
  display: flex; align-items: center; justify-content: center;
  padding: 12px 24px; gap: 0;
  background: var(--sqp-bg-card); border-bottom: 1px solid var(--sqp-border);
  overflow-x: auto;
}
.ws-step {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; min-width: 72px; padding: 6px 4px;
  cursor: pointer; position: relative;
}
.ws-num {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  border: 2px solid var(--sqp-border);
  background: var(--sqp-bg-page);
  color: var(--sqp-text-secondary);
}
.ws-name { font-size: 11px; color: var(--sqp-text-secondary); text-align: center; white-space: nowrap }
.ws-done .ws-num { background: var(--sqp-success); border-color: var(--sqp-success); color: #fff }
.ws-done .ws-name { color: var(--sqp-success-text) }
.ws-active .ws-num { background: var(--sqp-primary); border-color: var(--sqp-primary); color: #fff }
.ws-active .ws-name { color: var(--sqp-primary); font-weight: 600 }
.ws-locked .ws-num { background: var(--sqp-bg-page); color: var(--sqp-text-disabled, #9CA3AF) }

/* Wizard layout */
.wiz-layout { display: grid; grid-template-columns: 1fr 300px; gap: 24px; padding: 24px; max-width: 1200px }
.wiz-main { display: flex; flex-direction: column; gap: 16px }
.wiz-aside { display: flex; flex-direction: column; gap: 16px }

/* SPPR form banner */
.sppr-form-banner {
  background: var(--sqp-primary-light); border-bottom: 1px solid var(--sqp-primary);
  padding: 10px 24px; display: flex; align-items: center; gap: 8px;
  font-size: 12px; flex-wrap: wrap;
}
.sfb-code { font-weight: 700; font-family: monospace; color: var(--sqp-navy) }
.sfb-dot { color: var(--sqp-text-disabled, #9CA3AF) }

/* Severity selector */
.sev-selector { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px }
.sev-card {
  padding: 14px 12px; border-radius: 8px; border: 2px solid var(--sqp-border);
  cursor: pointer; text-align: center; transition: all var(--t-fast, .15s);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.sev-card i { font-size: 20px }
.sev-card-label { font-size: 11px; font-weight: 700; letter-spacing: .05em }
.sev-card-critical { border-color: var(--sqp-critical-light); color: var(--sqp-critical) }
.sev-card-major    { border-color: var(--sqp-warning-light);  color: var(--sqp-warning-text) }
.sev-card-minor    { border-color: var(--sqp-info-light, #EFF6FF); color: var(--sqp-info-text, #1D4ED8) }
.sev-selected.sev-card-critical { background: var(--sqp-critical-light); border-color: var(--sqp-critical) }
.sev-selected.sev-card-major    { background: var(--sqp-warning-light); border-color: var(--sqp-warning) }
.sev-selected.sev-card-minor    { background: var(--sqp-info-light, #EFF6FF); border-color: var(--sqp-info, #3B82F6) }

/* Detection point grid */
.detect-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.detect-card {
  padding: 12px; border-radius: 8px; border: 2px solid var(--sqp-border);
  cursor: pointer; display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 500; color: var(--sqp-text-secondary);
  transition: all var(--t-fast, .15s);
}
.detect-card i { font-size: 16px; color: var(--sqp-text-secondary) }
.detect-card.sel { border-color: var(--sqp-primary); background: var(--sqp-primary-light); color: var(--sqp-primary) }
.detect-card.sel i { color: var(--sqp-primary) }
.detect-card:hover:not(.sel) { border-color: var(--sqp-border-focus, #60A5FA); background: var(--sqp-bg-page) }

/* Upload area */
.upload-area {
  border: 2px dashed var(--sqp-border); border-radius: 8px;
  padding: 32px; text-align: center; cursor: pointer;
  transition: all var(--t-fast, .15s);
}
.upload-area:hover { border-color: var(--sqp-primary); background: var(--sqp-primary-light) }
.upload-icon { font-size: 32px; color: var(--sqp-text-disabled, #9CA3AF); display: block; margin-bottom: 8px }
.upload-text { font-size: 13px; font-weight: 500; color: var(--sqp-text) }
.upload-sub { font-size: 11px; color: var(--sqp-text-secondary); margin-top: 4px }

/* Detail grid layout */
.detail-wrap { padding: 24px; max-width: 1200px }
.detail-grid { display: grid; grid-template-columns: 1fr 320px; gap: 20px; margin-top: 20px }
.detail-main { display: flex; flex-direction: column; gap: 16px }
.detail-aside { display: flex; flex-direction: column; gap: 16px }
.d-card { background: var(--sqp-bg-card); border: 1px solid var(--sqp-border); border-radius: 10px; overflow: hidden }
.d-card-hdr {
  padding: 10px 16px; font-size: 12px; font-weight: 600;
  color: var(--sqp-text-secondary); border-bottom: 1px solid var(--sqp-border);
  display: flex; align-items: center; gap: 6px;
}
.d-card-body { padding: 14px 16px }
.d-row { display: flex; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--sqp-border); font-size: 12px }
.d-row:last-child { border-bottom: none }
.d-label { min-width: 110px; color: var(--sqp-text-secondary); font-size: 11px; padding-top: 1px }
.d-val { color: var(--sqp-text); flex: 1; font-weight: 500 }

/* Form layout */
.form-layout { display: grid; grid-template-columns: 1fr 300px; gap: 24px; padding: 24px; max-width: 1200px }
.form-col { display: flex; flex-direction: column; gap: 16px }
.form-sidebar { display: flex; flex-direction: column; gap: 16px }
.form-card { background: var(--sqp-bg-card); border: 1px solid var(--sqp-border); border-radius: 10px; overflow: hidden }
.fc-hdr { padding: 14px 20px; display: flex; align-items: flex-start; gap: 12px; border-bottom: 1px solid var(--sqp-border) }
.fc-step {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  background: var(--sqp-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.fc-step-a { background: var(--sqp-success) }
.fc-step-b { background: var(--sqp-warning-text) }
.fc-step-c { background: var(--sqp-info, #3B82F6) }
.fc-step-d { background: var(--sqp-purple) }
.fc-step-e { background: var(--sqp-text-secondary) }
.fc-hdr-text h3 { font-size: 14px; font-weight: 700; color: var(--sqp-text); margin: 0 0 2px 0 }
.fc-hdr-text p  { font-size: 11px; color: var(--sqp-text-secondary); margin: 0 }
.fc-body { padding: 18px 20px }
.fc-grid { display: flex; flex-direction: column; gap: 12px }
.fc-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }

/* SPPR header strip */
.sppr-hdr-strip {
  background: var(--sqp-bg-card); border-bottom: 1px solid var(--sqp-border); padding: 14px 24px;
}
.shs-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10px }
.shs-left { display: flex; align-items: center; flex-wrap: wrap; gap: 8px }
.shs-id { font-size: 20px; font-weight: 800; color: var(--sqp-navy); font-family: monospace }
.shs-badges { display: flex; gap: 6px; flex-wrap: wrap }
.shs-meta { display: flex; gap: 16px; flex-wrap: wrap }
.shs-meta-item { font-size: 12px; color: var(--sqp-text-secondary); display: flex; align-items: center; gap: 5px }
.sla-inline { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 4px; display: inline-flex; align-items: center; gap: 4px }
.sla-warn { background: var(--sqp-warning-light); color: var(--sqp-warning-text) }
.sla-crit { background: var(--sqp-critical-light); color: var(--sqp-critical-text) }

/* Step wizard (detail page) */
.step-wizard { display: flex; align-items: flex-start; padding: 16px 24px; gap: 0; overflow-x: auto; background: var(--sqp-bg-card); border-bottom: 1px solid var(--sqp-border) }
.step-item2 { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 80px; padding: 4px; cursor: pointer }
.si-top { display: flex; flex-direction: column; align-items: center; gap: 3px }
.si-num { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; border: 2px solid var(--sqp-border); background: var(--sqp-bg-page) }
.si-name { font-size: 10px; text-align: center; white-space: nowrap; color: var(--sqp-text-secondary) }
.si-sub { font-size: 9px; color: var(--sqp-text-disabled, #9CA3AF); text-align: center }
.si-done .si-num { background: var(--sqp-success); border-color: var(--sqp-success); color: #fff }
.si-done .si-name { color: var(--sqp-success-text) }
.si-curr .si-num { background: var(--sqp-primary); border-color: var(--sqp-primary); color: #fff }
.si-curr .si-name { color: var(--sqp-primary); font-weight: 600 }
.si-locked .si-num { opacity: .5 }
.step-sep { flex: 1; height: 2px; background: var(--sqp-border); margin-top: 13px; min-width: 16px }
.step-sep.done { background: var(--sqp-success) }

/* =====================================================================
   Sidebar accordion groups (SPPR Management / Supplier Audit /
   Supplier Management / Administration) — added for the demo prototype,
   not present in the original reference. Follows the same max-height +
   opacity transition pattern already used by .nav-sub / .nav-group-label
   elsewhere in this file, so it feels native to the design system.
   ===================================================================== */
.nav-chevron {
  margin-left: auto;
  font-size: 11px;
  color: var(--sqp-text-secondary);
  transition: transform var(--t-normal);
  flex-shrink: 0;
}
#sidebar:not(.expanded) .nav-chevron { display: none; }
.nav-item.nav-group-toggle.group-collapsed .nav-chevron { transform: rotate(-90deg); }

.nav-subgroup {
  overflow: hidden;
  max-height: 1000px;
  opacity: 1;
  transition: max-height var(--t-normal), opacity var(--t-normal);
}
.nav-subgroup.collapsed { max-height: 0; opacity: 0; }