/* ═══════════════════════════════════════════════════════════════
   LEXRO.CSS  ·  Global Design System  ·  v1.0.0
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Variables ──────────────────────────────────────────────── */
:root {
  /* Blues */
  --blue-900: #1F1D1B;
  --blue-800: #2B2926;
  --blue-700: #3D3936;
  --blue-600: #4A4541;
  --blue-500: #D88E72;
  --blue-400: #E2AA94;
  --blue-300: #E8B9A7;
  --blue-100: #FBF2EC;
  --blue-50: #FDF8F5;

  /* Neutrals */
  --white: #ffffff;
  --gray-50: #FDFCFB;
  --gray-100: #F8F6F3;
  --gray-200: #EEEAE5;
  --gray-300: #D4D0CB;
  --gray-400: #A39E99;
  --gray-500: #706B66;
  --gray-600: #5C5752;
  --gray-700: #3D3936;
  --gray-900: #1A1816;

  /* Status colours */
  --red-500: #ef4444;
  --red-50: #fef2f2;
  --red-200: #fecaca;
  --green-600: #16a34a;
  --green-500: #22c55e;
  --green-50: #f0fdf4;
  --green-200: #bbf7d0;
  --yellow-500: #eab308;
  --yellow-50: #fefce8;
  --yellow-200: #fef08a;
  --orange-500: #f97316;
  --orange-50: #fff7ed;
  --orange-200: #fed7aa;
  --purple-500: #A87D9A;
  --purple-50: #F8F3F6;
  --purple-200: #E8D8E2;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .08), 0 2px 6px rgba(0, 0, 0, .04);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, .10), 0 4px 12px rgba(0, 0, 0, .06);
  --shadow-xl: 0 20px 60px rgba(29, 78, 216, .12), 0 8px 24px rgba(0, 0, 0, .06);

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Fonts */
  --font-main: 'Sora', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Transition */
  --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --sidebar-width: 240px;
  --header-height: 64px;
}

/* ── 2. Reset & Base ───────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font-main);
  color: var(--gray-900);
  background: var(--gray-50);
  line-height: 1.6;
}

a {
  color: var(--blue-500);
  text-decoration: none;
  transition: color 0.15s;
}

a:hover {
  color: #C97A5D;
}

/* ══════════════════════════════════════════════════════════════════
   AUTH LAYOUT
   ══════════════════════════════════════════════════════════════════ */

body.auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-50);
}

.auth-shell {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  width: 100%;
}

/* Left panel — brand */
.brand-panel {
  background: linear-gradient(145deg, #2B2926 0%, #3D3936 60%, #D88E72 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 56px 64px;
  position: relative;
  overflow: hidden;
}

.brand-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 600px 400px at 20% 110%, rgba(59, 130, 246, .25) 0%, transparent 60%),
    radial-gradient(ellipse 400px 300px at 80% -20%, rgba(96, 165, 250, .15) 0%, transparent 60%);
  pointer-events: none;
}

.brand-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

.brand-top {
  position: relative;
  z-index: 1;
}

.brand-features {
  position: relative;
  z-index: 1;
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 72px;
}

.logo-mark {
  width: 42px;
  height: 42px;
  background: #FFFFFF;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
}

.logo-mark svg {
  width: 24px;
  height: 24px;
}

.logo-text {
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.5px;
}

.brand-headline {
  font-size: 42px;
  font-weight: 700;
  color: var(--white);
  line-height: 1.15;
  letter-spacing: -1px;
  margin-bottom: 20px;
}

.brand-headline span {
  color: var(--blue-300);
}

.brand-sub {
  font-size: 16px;
  color: rgba(255, 255, 255, .6);
  line-height: 1.7;
  max-width: 400px;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.feature-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.feature-icon svg {
  width: 16px;
  height: 16px;
  stroke: var(--blue-300);
  fill: none;
  stroke-width: 1.8;
}

.feature-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 3px;
}

.feature-desc {
  font-size: 13px;
  color: rgba(255, 255, 255, .5);
  line-height: 1.5;
}

/* Right panel — form */
.form-panel {
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  overflow-y: auto;
}

.form-container {
  width: 100%;
  max-width: 420px;
}

/* ── Auth pages ──────────────────────────────────────────────── */
.page {
  display: none;
  animation: fadeUp 0.3s ease;
}

.page.active {
  display: block;
}

.form-header {
  margin-bottom: 32px;
}

.form-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.5px;
  margin-bottom: 6px;
}

.form-subtitle {
  font-size: 14px;
  color: var(--gray-500);
  line-height: 1.6;
}

/* Verify states */
.verify-icon-wrap {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--blue-50);
  border: 2px solid var(--blue-100);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
}

.verify-icon-wrap svg {
  width: 28px;
  height: 28px;
  stroke: var(--blue-500);
  fill: none;
  stroke-width: 1.8;
}

.verify-icon-wrap.success {
  background: var(--green-50);
  border-color: var(--green-200);
}

.verify-icon-wrap.success svg {
  stroke: var(--green-500);
}

.verify-icon-wrap.error-state {
  background: var(--red-50);
  border-color: var(--red-200);
}

.verify-icon-wrap.error-state svg {
  stroke: var(--red-500);
}

.verify-center {
  text-align: center;
}

/* ══════════════════════════════════════════════════════════════════
   APP LAYOUT  (sidebar + header + main content)
   ══════════════════════════════════════════════════════════════════ */

body.app {
  background: var(--gray-50);
  min-height: 100vh;
  display: flex;
}

/* ── Sidebar ─────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-width);
  background: linear-gradient(180deg, #2B2926 0%, #1F1D1B 100%);
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  z-index: 100;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  scrollbar-width: none;
}

.sidebar::-webkit-scrollbar {
  display: none;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 16px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  flex-shrink: 0;
}

.sidebar-brand .logo-mark {
  width: 34px;
  height: 34px;
  background: #FFFFFF;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}

.sidebar-brand .logo-mark svg {
  width: 18px;
  height: 18px;
}

.sidebar-brand .logo-text {
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.3px;
}

.sidebar-nav {
  flex: 1;
  padding: 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-section-label {
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, .35);
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 12px 10px 4px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  color: rgba(255, 255, 255, .65);
  border-radius: var(--radius-md);
  font-size: 13.5px;
  font-weight: 500;
  transition: var(--transition);
  text-decoration: none;
  cursor: pointer;
}

.nav-item svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  flex-shrink: 0;
}

.nav-item:hover {
  background: rgba(255, 255, 255, .08);
  color: var(--white);
}

.nav-item.active {
  background: rgba(255, 255, 255, .14);
  color: var(--white);
}

.nav-item.active svg {
  stroke: var(--blue-300);
}

.sidebar-footer {
  padding: 12px 8px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  flex-shrink: 0;
}

.user-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: var(--radius-md);
  margin-bottom: 4px;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--blue-500);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--white);
  line-height: 1.3;
}

.user-email {
  font-size: 11px;
  color: rgba(255, 255, 255, .4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

.sidebar-logout {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  color: rgba(255, 255, 255, .45);
  font-size: 13px;
  font-weight: 500;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: var(--transition);
  font-family: var(--font-main);
}

.sidebar-logout:hover {
  color: var(--white);
  background: rgba(239, 68, 68, .15);
}

.sidebar-logout svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}

/* Sidebar overlay (mobile) */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 99;
  backdrop-filter: blur(2px);
}

.sidebar-overlay.open {
  display: block;
}

/* ── Main wrapper ────────────────────────────────────────────── */
.main-wrapper {
  flex: 1;
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Top header ──────────────────────────────────────────────── */
.top-header {
  height: var(--header-height);
  background: #FFFFFF;
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: var(--shadow-sm);
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  color: var(--gray-600);
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

.menu-toggle:hover {
  background: var(--gray-100);
  color: var(--gray-900);
}

.menu-toggle svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.page-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.3px;
  flex: 1;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--green-50);
  color: var(--green-600);
  border: 1px solid var(--green-200);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.header-badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green-500);
  animation: pulse 2s infinite;
}

/* ── Page content ─────────────────────────────────────────────── */
.page-content {
  padding: 28px 24px;
  flex: 1;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 16px;
  flex-wrap: wrap;
}

.section-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-900);
}

/* ══════════════════════════════════════════════════════════════════
   COMPONENTS
   ══════════════════════════════════════════════════════════════════ */

/* ── Cards ───────────────────────────────────────────────────── */
.card {
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
  padding: 24px;
  transition: box-shadow 0.2s;
}

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

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--gray-900);
}

.card-sub {
  font-size: 13px;
  color: var(--gray-500);
  margin-top: 2px;
}

/* ── Stat cards ──────────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}


/* ── Tables ──────────────────────────────────────────────────── */
.table-wrap {
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.table-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--gray-100);
  flex-wrap: wrap;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

thead tr {
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}

th {
  padding: 12px 16px;
  text-align: left;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--gray-500);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
}

td {
  padding: 14px 16px;
  color: var(--gray-700);
  border-bottom: 1px solid var(--gray-100);
  vertical-align: middle;
}

tbody tr {
  transition: background 0.1s;
}

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

tbody tr:hover {
  background: var(--gray-50);
}

.table-link {
  color: var(--blue-500);
  font-weight: 600;
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--font-main);
  font-size: inherit;
  padding: 0;
  transition: color 0.15s;
}

.table-link:hover {
  color: #C97A5D;
  text-decoration: underline;
}

/* ── Forms ───────────────────────────────────────────────────── */
.form-group {
  margin-bottom: 20px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 7px;
  letter-spacing: 0.1px;
}

.input-wrap {
  position: relative;
}

.input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.input-icon svg {
  width: 16px;
  height: 16px;
  stroke: var(--gray-400);
  fill: none;
  stroke-width: 1.8;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="number"],
select,
textarea {
  width: 100%;
  padding: 0 14px;
  height: 44px;
  font-family: var(--font-main);
  font-size: 14px;
  color: var(--gray-900);
  background: var(--gray-50);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-md);
  outline: none;
  transition: var(--transition);
  appearance: none;
}

textarea {
  height: auto;
  padding: 12px 14px;
  resize: vertical;
  min-height: 100px;
  line-height: 1.6;
}

.has-icon input,
.has-icon select {
  padding-left: 42px;
}

input::placeholder,
textarea::placeholder {
  color: var(--gray-400);
}

input:focus,
select:focus,
textarea:focus {
  background: #FFFFFF;
  border-color: var(--blue-400);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .12);
}

input.error {
  border-color: var(--red-500);
  background: var(--red-50);
}

input.error:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .1);
}

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

.field-error {
  font-size: 12px;
  color: var(--red-500);
  margin-top: 5px;
  display: none;
}

.field-error.visible {
  display: block;
}

/* Password toggle */
.pw-toggle {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--gray-400);
  display: flex;
  align-items: center;
  transition: color 0.15s;
}

.pw-toggle:hover {
  color: var(--gray-600);
}

.pw-toggle svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}

/* Password strength */
.pw-strength {
  margin-top: 8px;
}

.pw-strength-bar {
  display: flex;
  gap: 4px;
  margin-bottom: 5px;
}

.pw-strength-bar span {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--gray-200);
  transition: background 0.3s;
}

.pw-strength-bar span.filled-weak {
  background: var(--red-500);
}

.pw-strength-bar span.filled-fair {
  background: var(--orange-500);
}

.pw-strength-bar span.filled-good {
  background: var(--yellow-500);
}

.pw-strength-bar span.filled-strong {
  background: var(--green-500);
}

.pw-strength-label {
  font-size: 11.5px;
  color: var(--gray-400);
  font-weight: 500;
}

/* Checkbox */
.checkbox-group {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 24px;
}

.checkbox-group input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--blue-500);
  cursor: pointer;
  flex-shrink: 0;
}

.checkbox-group label {
  font-size: 13px;
  color: var(--gray-500);
  font-weight: 400;
  margin: 0;
  line-height: 1.5;
}

.checkbox-group label a {
  color: var(--blue-500);
  font-weight: 600;
}

/* Toggle switch */
.toggle-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--gray-100);
}

.toggle-wrap:last-child {
  border-bottom: none;
}

.toggle-info .toggle-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-800);
}

.toggle-info .toggle-desc {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 2px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--gray-300);
  border-radius: 24px;
  transition: 0.3s;
}

.slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #FFFFFF;
  left: 3px;
  bottom: 3px;
  transition: 0.3s;
  box-shadow: var(--shadow-sm);
}

.switch input:checked+.slider {
  background: var(--blue-500);
}

.switch input:checked+.slider::before {
  transform: translateX(20px);
}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  font-family: var(--font-main);
  font-size: 13.5px;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition);
  letter-spacing: 0.1px;
  white-space: nowrap;
  text-decoration: none;
}

.btn svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
}

.btn-sm {
  height: 34px;
  padding: 0 14px;
  font-size: 12.5px;
}

.btn-lg {
  height: 46px;
  padding: 0 24px;
  font-size: 14.5px;
}

.btn-full {
  width: 100%;
}

.btn-primary {
  background: var(--blue-500);
  color: var(--white);
  box-shadow: 0 1px 3px rgba(29, 78, 216, .25), 0 4px 12px rgba(29, 78, 216, .15);
}

.btn-primary:hover {
  background: #C97A5D;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(29, 78, 216, .3), 0 6px 20px rgba(29, 78, 216, .2);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-secondary {
  background: #FFFFFF;
  color: var(--gray-700);
  border: 1.5px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
}

.btn-secondary:hover {
  background: var(--gray-50);
  border-color: var(--gray-300);
  color: var(--gray-900);
}

.btn-danger {
  background: var(--red-50);
  color: var(--red-500);
  border: 1.5px solid var(--red-200);
}

.btn-danger:hover {
  background: var(--red-500);
  color: var(--white);
  border-color: var(--red-500);
}

.btn-ghost {
  background: transparent;
  color: var(--gray-600);
  border: none;
}

.btn-ghost:hover {
  background: var(--gray-100);
  color: var(--gray-900);
}

.btn-success {
  background: var(--green-500);
  color: var(--white);
}

.btn-success:hover {
  background: var(--green-600);
  transform: translateY(-1px);
}

/* Spinner */
.btn-spinner {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, .3);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: none;
}

.btn.loading .btn-spinner {
  display: block;
}

.btn.loading .btn-label {
  opacity: 0.6;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

/* ── Badges & Status chips ────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.4;
}

.badge-open {
  background: var(--orange-50);
  color: var(--orange-500);
  border: 1px solid var(--orange-200);
}

.badge-analyzing {
  background: var(--purple-50);
  color: var(--purple-500);
  border: 1px solid var(--purple-200);
}

.badge-analyzed {
  background: var(--blue-50);
  color: var(--blue-600);
  border: 1px solid var(--blue-100);
}

.badge-resolved {
  background: var(--green-50);
  color: var(--green-600);
  border: 1px solid var(--green-200);
}

.badge-closed {
  background: var(--gray-100);
  color: var(--gray-500);
  border: 1px solid var(--gray-200);
}

.badge-connected {
  background: var(--green-50);
  color: var(--green-600);
  border: 1px solid var(--green-200);
}

.badge-error {
  background: var(--red-50);
  color: var(--red-500);
  border: 1px solid var(--red-200);
}

.sev-low {
  background: var(--green-50);
  color: var(--green-600);
  border: 1px solid var(--green-200);
}

.sev-medium {
  background: var(--yellow-50);
  color: #a16207;
  border: 1px solid var(--yellow-200);
}

.sev-high {
  background: var(--orange-50);
  color: var(--orange-500);
  border: 1px solid var(--orange-200);
}

.sev-critical {
  background: var(--red-50);
  color: var(--red-500);
  border: 1px solid var(--red-200);
  font-weight: 700;
}

/* ── Alerts / banners ────────────────────────────────────────── */
.alert {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 13.5px;
  line-height: 1.5;
  margin-bottom: 20px;
  display: none;
  border: 1px solid;
}

.alert.visible {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.alert-error {
  background: var(--red-50);
  color: #b91c1c;
  border-color: var(--red-200);
}

.alert-success {
  background: var(--green-50);
  color: #15803d;
  border-color: var(--green-200);
}

.alert-info {
  background: var(--blue-50);
  color: var(--blue-600);
  border-color: var(--blue-100);
}

.alert-warning {
  background: var(--yellow-50);
  color: #92400e;
  border-color: var(--yellow-200);
}

/* Auth inline alert (no flex) */
.alert-inline {
  display: none;
}

.alert-inline.visible {
  display: block;
}

/* ── Divider ─────────────────────────────────────────────────── */
.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0;
  color: var(--gray-300);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gray-200);
}

/* ── Auth links ──────────────────────────────────────────────── */
.auth-link {
  text-align: center;
  margin-top: 24px;
  font-size: 13.5px;
  color: var(--gray-500);
}

.auth-link a,
.link-btn {
  color: var(--blue-500);
  font-weight: 600;
  text-decoration: none;
  background: none;
  border: none;
  font-family: var(--font-main);
  font-size: inherit;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s;
}

.auth-link a:hover,
.link-btn:hover {
  color: #C97A5D;
  text-decoration: underline;
}

.forgot-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 7px;
}

/* ── Modals ──────────────────────────────────────────────────── */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, .4);
  backdrop-filter: blur(4px);
  padding: 20px;
}

.modal.open {
  display: flex;
}

.modal-box {
  background: #FFFFFF;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 480px;
  animation: scaleIn 0.25s ease;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-box-lg {
  max-width: 640px;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 0;
}

.modal-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--gray-900);
}

.modal-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  color: var(--gray-400);
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

.modal-close:hover {
  background: var(--gray-100);
  color: var(--gray-700);
}

.modal-close svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.modal-body {
  padding: 20px 24px;
}

.modal-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding: 0 24px 24px;
}

/* ── Toasts ──────────────────────────────────────────────────── */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: #FFFFFF;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  border-left: 3px solid var(--gray-300);
  max-width: 360px;
  min-width: 260px;
  opacity: 0;
  transform: translateX(20px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: all;
}

.toast.toast-show {
  opacity: 1;
  transform: translateX(0);
}

.toast-success {
  border-left-color: var(--green-500);
}

.toast-error {
  border-left-color: var(--red-500);
}

.toast-info {
  border-left-color: var(--blue-400);
}

.toast-warning {
  border-left-color: var(--yellow-500);
}

.toast-icon {
  flex-shrink: 0;
  margin-top: 1px;
}

.toast-icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.toast-success .toast-icon {
  color: var(--green-500);
}

.toast-error .toast-icon {
  color: var(--red-500);
}

.toast-info .toast-icon {
  color: var(--blue-400);
}

.toast-warning .toast-icon {
  color: var(--yellow-500);
}

.toast-msg {
  flex: 1;
  font-size: 13.5px;
  color: var(--gray-700);
  line-height: 1.5;
}

.toast-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  color: var(--gray-400);
  transition: color 0.15s;
  flex-shrink: 0;
}

.toast-close:hover {
  color: var(--gray-700);
}

.toast-close svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

/* ── Skeleton loader ─────────────────────────────────────────── */
.skeleton-line {
  height: 14px;
  background: var(--gray-200);
  border-radius: var(--radius-sm);
  animation: shimmer 1.5s infinite linear;
  background-size: 200% 100%;
  background-image: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 50%, var(--gray-200) 75%);
}

/* ── Empty state ─────────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 24px;
  text-align: center;
}

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

.empty-icon svg {
  width: 28px;
  height: 28px;
  stroke: var(--gray-400);
  fill: none;
  stroke-width: 1.5;
}

.empty-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-700);
  margin-bottom: 8px;
}

.empty-desc {
  font-size: 14px;
  color: var(--gray-500);
  margin-bottom: 24px;
  max-width: 320px;
  line-height: 1.6;
}

/* ── Filter tabs ─────────────────────────────────────────────── */
.filter-tabs {
  display: flex;
  gap: 4px;
  background: var(--gray-100);
  padding: 4px;
  border-radius: var(--radius-md);
}

.filter-tab {
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-500);
  cursor: pointer;
  border: none;
  background: none;
  transition: var(--transition);
  font-family: var(--font-main);
}

.filter-tab:hover {
  color: var(--gray-900);
  background: #FFFFFF;
}

.filter-tab.active {
  background: #FFFFFF;
  color: var(--gray-900);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

/* ── Search input ────────────────────────────────────────────── */
.search-wrap {
  position: relative;
  flex: 1;
  min-width: 200px;
  max-width: 320px;
}

.search-wrap svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  stroke: var(--gray-400);
  fill: none;
  stroke-width: 2;
  pointer-events: none;
}

.search-wrap input {
  height: 38px;
  padding-left: 36px;
  font-size: 13.5px;
  background: var(--gray-50);
  border-color: var(--gray-200);
}

.search-wrap input:focus {
  background: #FFFFFF;
}

/* ── Integration cards ───────────────────────────────────────── */
.integration-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.integration-card {
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--gray-200);
  padding: 20px;
  transition: var(--transition);
}

.integration-card:hover {
  border-color: var(--blue-300);
  box-shadow: var(--shadow-md);
}

.integration-card.connected {
  border-color: var(--green-200);
  background: var(--green-50);
}

.integration-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.integration-logo {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
}

.integration-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--gray-900);
}

.integration-desc {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 2px;
}

.integration-status {
  font-size: 12px;
  color: var(--gray-400);
  margin-bottom: 14px;
}

.integration-status.ok {
  color: var(--green-600);
  font-weight: 600;
}

/* ── Plan cards ──────────────────────────────────────────────── */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}

.plan-card {
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  border: 2px solid var(--gray-200);
  padding: 28px 24px;
  text-align: center;
  transition: var(--transition);
  position: relative;
}

.plan-card:hover {
  border-color: var(--blue-400);
  box-shadow: var(--shadow-md);
}

.plan-card.popular {
  border-color: var(--blue-500);
}

.plan-badge-popular {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--blue-500);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 20px;
  letter-spacing: 0.5px;
}

.plan-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 8px;
}

.plan-price {
  font-size: 36px;
  font-weight: 800;
  color: var(--gray-900);
  margin-bottom: 4px;
  line-height: 1;
}

.plan-price span {
  font-size: 16px;
  font-weight: 500;
  color: var(--gray-500);
}

.plan-cycle {
  font-size: 12px;
  color: var(--gray-400);
  margin-bottom: 20px;
}

.plan-features {
  list-style: none;
  text-align: left;
  margin-bottom: 24px;
}

.plan-features li {
  padding: 6px 0;
  font-size: 13.5px;
  color: var(--gray-600);
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--gray-100);
}

.plan-features li:last-child {
  border-bottom: none;
}

.plan-features li svg {
  width: 15px;
  height: 15px;
  stroke: var(--green-500);
  fill: none;
  stroke-width: 2.5;
  flex-shrink: 0;
}

/* ── Usage bar ───────────────────────────────────────────────── */
.usage-bar-wrap {
  margin-bottom: 8px;
}

.usage-bar-labels {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}

.usage-bar-label {
  font-size: 13px;
  color: var(--gray-600);
  font-weight: 500;
}

.usage-bar-value {
  font-size: 13px;
  color: var(--gray-700);
  font-weight: 700;
}

.usage-bar-track {
  height: 8px;
  background: var(--gray-200);
  border-radius: 4px;
  overflow: hidden;
}

.usage-bar-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--blue-500), var(--blue-400));
  transition: width 0.6s ease;
}

.usage-bar-fill.warn {
  background: linear-gradient(90deg, var(--orange-500), var(--yellow-500));
}

.usage-bar-fill.danger {
  background: linear-gradient(90deg, var(--red-500), var(--orange-500));
}

/* ── Onboarding wizard ───────────────────────────────────────── */
.onboarding-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-50);
  padding: 24px;
}

/* ── Search overlay backdrop ── */
.search-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9998;
  animation: srch-fade-in 0.15s ease;
}

.search-overlay.open {
  display: block;
}

@keyframes srch-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* ── Search modal ── */
.search-modal {
  position: fixed;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  width: min(640px, calc(100vw - 32px));
  background: var(--white, #fff);
  border: 1.5px solid rgba(29, 78, 216, 0.15);
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18), 0 4px 16px rgba(29, 78, 216, 0.08);
  z-index: 9999;
  overflow: hidden;
  animation: srch-slide-in 0.18s cubic-bezier(.34, 1.2, .64, 1);
}

@keyframes srch-slide-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-12px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

/* ── Input row ── */
.search-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1.5px solid var(--gray-100, #F8F6F3);
}

.search-input-row svg.srch-icon {
  width: 18px;
  height: 18px;
  stroke: #A39E99;
  flex-shrink: 0;
  transition: stroke .15s;
}

.search-input-row:focus-within svg.srch-icon {
  stroke: #D88E72;
}

#srch-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 15px;
  font-weight: 500;
  color: #1A1816;
  background: transparent;
  font-family: 'Sora', sans-serif;
  caret-color: #D88E72;
}

#srch-input::placeholder {
  color: #D4D0CB;
}

.srch-kbd {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  color: #A39E99;
  background: #FDFCFB;
  border: 1px solid #EEEAE5;
  border-radius: 5px;
  padding: 2px 6px;
  font-family: 'JetBrains Mono', monospace;
  flex-shrink: 0;
}

/* ── Results area ── */
.search-results {
  max-height: 420px;
  overflow-y: auto;
  padding: 6px 0 8px;
}

.search-results:empty {
  display: none;
}

/* custom scrollbar */
.search-results::-webkit-scrollbar {
  width: 4px;
}

.search-results::-webkit-scrollbar-track {
  background: transparent;
}

.search-results::-webkit-scrollbar-thumb {
  background: #EEEAE5;
  border-radius: 4px;
}

/* ── Section label ── */
.srch-section-label {
  padding: 6px 18px 2px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #A39E99;
}

/* ── Individual result row ── */
.srch-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 18px;
  cursor: pointer;
  transition: background .1s;
  text-decoration: none;
  color: inherit;
}

.srch-result-item:hover,
.srch-result-item.active {
  background: rgba(29, 78, 216, 0.05);
}

.srch-result-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.srch-result-body {
  flex: 1;
  min-width: 0;
}

.srch-result-title {
  font-size: 13px;
  font-weight: 600;
  color: #1A1816;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.srch-result-sub {
  font-size: 11.5px;
  color: #A39E99;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.srch-result-meta {
  font-size: 10.5px;
  font-weight: 600;
  color: #D4D0CB;
  font-family: 'JetBrains Mono', monospace;
  flex-shrink: 0;
}

/* ── AI Answer block ── */
.srch-ai-block {
  margin: 8px 14px 10px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(99, 102, 241, .06), rgba(139, 92, 246, .06));
  border: 1.5px solid rgba(99, 102, 241, .2);
  border-radius: 13px;
}

.srch-ai-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #9B6B8E;
  margin-bottom: 7px;
}

.srch-ai-text {
  font-size: 13px;
  line-height: 1.65;
  color: #3D3936;
}

/* ── Empty / loading states ── */
.srch-empty {
  padding: 28px 18px;
  text-align: center;
  color: #A39E99;
  font-size: 13px;
}

.srch-loader {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px;
  font-size: 13px;
  color: #A39E99;
}

.srch-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid #EEEAE5;
  border-top-color: #D88E72;
  border-radius: 50%;
  animation: spin .6s linear infinite;
  flex-shrink: 0;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── Footer hint ── */
.srch-footer {
  display: flex;
  gap: 16px;
  padding: 8px 18px;
  border-top: 1px solid #F8F6F3;
  font-size: 11px;
  color: #D4D0CB;
}

.srch-footer span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.srch-footer kbd {
  background: #FDFCFB;
  border: 1px solid #EEEAE5;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  color: #A39E99;
}

/* ── Trigger button in header ── */
#srch-trigger-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1.5px solid var(--gray-200, #EEEAE5);
  border-radius: 10px;
  background: var(--white, #fff);
  font-size: 13px;
  font-weight: 500;
  color: #A39E99;
  cursor: pointer;
  transition: all .15s;
  font-family: 'Sora', sans-serif;
  min-width: 180px;
}

#srch-trigger-btn:hover {
  border-color: #D88E72;
  color: #D88E72;
}

#srch-trigger-btn svg {
  width: 14px;
  height: 14px;
}

#srch-trigger-btn .srch-kbd {
  margin-left: auto;
}

@media (max-width: 600px) {
  #srch-trigger-btn span.srch-label {
    display: none;
  }

  #srch-trigger-btn {
    min-width: unset;
    padding: 8px 10px;
  }

  #srch-trigger-btn .srch-kbd {
    display: none;
  }

  .search-modal {
    top: 60px;
  }
}

.onboarding-card {
  background: #FFFFFF;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 600px;
  padding: 40px;
  animation: fadeUp 0.4s ease;
}

.ob-steps {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 36px;
  position: relative;
}

.ob-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  position: relative;
  z-index: 1;
}

.ob-steps::before {
  content: '';
  position: absolute;
  top: 16px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: var(--gray-200);
  z-index: 0;
}

.ob-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gray-200);
  color: var(--gray-500);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  transition: var(--transition);
  z-index: 1;
  border: 2px solid var(--gray-200);
}

.ob-step.active .ob-dot {
  background: var(--blue-500);
  color: var(--white);
  border-color: var(--blue-500);
}

.ob-step.done .ob-dot {
  background: var(--green-500);
  color: var(--white);
  border-color: var(--green-500);
}

.ob-step-label {
  font-size: 11px;
  color: var(--gray-400);
  font-weight: 500;
  text-align: center;
}

.ob-step.active .ob-step-label {
  color: var(--blue-500);
  font-weight: 700;
}

.ob-step.done .ob-step-label {
  color: var(--green-600);
}

.ob-page {
  display: none;
  animation: fadeUp 0.3s ease;
}

.ob-page.active {
  display: block;
}

.ob-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 20px;
  background: var(--blue-50);
}

.ob-icon svg {
  width: 28px;
  height: 28px;
  stroke: var(--blue-500);
  fill: none;
  stroke-width: 1.8;
}

.ob-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 8px;
}

.ob-desc {
  font-size: 14px;
  color: var(--gray-500);
  line-height: 1.7;
  margin-bottom: 28px;
}

.ob-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--gray-100);
}

/* Platform selector (onboarding) */
.platform-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}

.platform-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--gray-200);
  cursor: pointer;
  transition: var(--transition);
  background: #FFFFFF;
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-700);
}

.platform-option:hover {
  border-color: var(--blue-400);
  background: var(--blue-50);
}

.platform-option.selected {
  border-color: var(--blue-500);
  background: var(--blue-50);
  color: var(--blue-600);
}

.platform-option .plat-emoji {
  font-size: 20px;
}

/* ── RCA Report ──────────────────────────────────────────────── */
.rca-card {
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  overflow: hidden;
}

.rca-header {
  background: linear-gradient(135deg, var(--blue-900), var(--blue-700));
  padding: 20px 24px;
}

.rca-header-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--white);
}

.rca-header-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, .6);
  margin-top: 4px;
}

.rca-body {
  padding: 24px;
}

.rca-section {
  margin-bottom: 24px;
}

.rca-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-500);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.rca-content {
  font-size: 14px;
  color: var(--gray-700);
  line-height: 1.8;
}

.code-block {
  background: var(--gray-900);
  color: #EEEAE5;
  border-radius: var(--radius-md);
  padding: 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  overflow-x: auto;
  line-height: 1.7;
  margin: 12px 0;
}

/* ── Log level badges ────────────────────────────────────────── */
.log-error {
  color: var(--red-500);
  font-weight: 700;
  font-size: 11px;
  font-family: var(--font-mono);
}

.log-warn {
  color: var(--yellow-500);
  font-weight: 700;
  font-size: 11px;
  font-family: var(--font-mono);
}

.log-info {
  color: var(--blue-400);
  font-weight: 700;
  font-size: 11px;
  font-family: var(--font-mono);
}

.log-debug {
  color: var(--gray-400);
  font-weight: 700;
  font-size: 11px;
  font-family: var(--font-mono);
}

.log-msg {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--gray-700);
}

/* ── Public pages (privacy, terms, contact) ──────────────────── */
body.public {
  background: #FFFFFF;
}

.public-nav {
  border-bottom: 1px solid var(--gray-200);
  padding: 0 40px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FFFFFF;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: var(--shadow-sm);
}

.public-nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.public-nav-brand .logo-text {
  font-size: 18px;
  font-weight: 700;
  color: var(--gray-900);
}

.public-nav-links {
  display: flex;
  gap: 24px;
  align-items: center;
}

.public-nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-600);
  transition: color 0.15s;
}

.public-nav-links a:hover {
  color: var(--gray-900);
}

.public-content {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 24px 80px;
}

.public-content h1 {
  font-size: 36px;
  font-weight: 800;
  color: var(--gray-900);
  margin-bottom: 8px;
  letter-spacing: -1px;
}

.public-content .doc-date {
  font-size: 14px;
  color: var(--gray-500);
  margin-bottom: 40px;
}

.public-content h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--gray-900);
  margin: 32px 0 12px;
}

.public-content h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-800);
  margin: 20px 0 8px;
}

.public-content p {
  font-size: 15px;
  color: var(--gray-600);
  line-height: 1.8;
  margin-bottom: 16px;
}

.public-content ul {
  padding-left: 20px;
  margin-bottom: 16px;
}

.public-content ul li {
  font-size: 15px;
  color: var(--gray-600);
  line-height: 1.8;
  margin-bottom: 6px;
}

.public-content a {
  color: var(--blue-500);
}

.public-footer {
  background: var(--gray-900);
  color: rgba(255, 255, 255, .5);
  padding: 28px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  flex-wrap: wrap;
  gap: 16px;
}

.public-footer a {
  color: rgba(255, 255, 255, .5);
  margin-left: 20px;
}

.public-footer a:hover {
  color: var(--white);
}

/* ── Incident detail ─────────────────────────────────────────── */
.incident-hero {
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
  padding: 24px;
  margin-bottom: 20px;
}

.incident-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.incident-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--gray-900);
  letter-spacing: -0.5px;
}

.incident-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 12px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--gray-500);
}

.meta-item svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.meta-item strong {
  color: var(--gray-700);
}

/* ── Animations ──────────────────────────────────────────────── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}


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

  to {
    background-position: -200% 0;
  }
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.7;
    transform: scale(1.2);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════ */

/* ── Tablet / small desktop ──────────────────────────────────── */
@media (max-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .plan-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Auth */
  .brand-panel {
    display: none;
  }

  .auth-shell {
    grid-template-columns: 1fr;
  }

  .form-panel {
    padding: 32px 24px;
    min-height: 100vh;
  }

  /* App sidebar becomes off-canvas */
  .sidebar {
    transform: translateX(-100%);
  }

  .sidebar.open {
    transform: translateX(0);
    box-shadow: var(--shadow-xl);
  }

  .main-wrapper {
    margin-left: 0;
  }

  .menu-toggle {
    display: flex;
  }

  /* Content */
  .page-content {
    padding: 16px;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .plan-grid {
    grid-template-columns: 1fr;
  }

  .integration-grid {
    grid-template-columns: 1fr;
  }

  /* Tables scroll on mobile */
  .table-wrap {
    overflow-x: auto;
  }

  /* Header */
  .top-header {
    padding: 0 16px;
  }

  .page-title {
    font-size: 16px;
  }

  /* Onboarding */
  .onboarding-card {
    padding: 24px;
  }

  .platform-selector {
    grid-template-columns: 1fr;
  }

  /* Modal */
  .modal-box {
    max-width: 100%;
    margin: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  .modal {
    align-items: flex-end;
  }

  /* Toolbar */
  .table-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .search-wrap {
    max-width: 100%;
  }

  /* Footer */
  .public-footer {
    flex-direction: column;
    text-align: center;
  }

  .public-nav {
    padding: 0 16px;
  }

  /* Form row */
  .form-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  .form-row {
    grid-template-columns: 1fr;
  }

  .ob-step-label {
    display: none;
  }

  .filter-tabs {
    overflow-x: auto;
  }
}

/* ═══════════════════════════════════════════════════════════════
   DESIGN ENHANCEMENTS  v2.0
   New tokens, improved components, home-page styles
   ═══════════════════════════════════════════════════════════════ */

html {
  scroll-behavior: smooth;
}

/* ── Additional design tokens ──────────────────────────────────── */

/* ── Skeleton alias (used across app pages) ────────────────────── */
.skeleton {
  background: var(--gray-200);
  border-radius: var(--radius-md);
  animation: shimmer 1.5s infinite linear;
  background-size: 200% 100%;
  background-image: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 50%, var(--gray-200) 75%);
}

/* ── Improved primary button ───────────────────────────────────── */
.btn-primary {
  background: linear-gradient(135deg, #D88E72 0%, #D88E72 100%);
  box-shadow: 0 1px 3px rgba(29, 78, 216, .25), 0 4px 12px rgba(29, 78, 216, .15);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #C97A5D 0%, #D88E72 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(29, 78, 216, .3), 0 6px 20px rgba(29, 78, 216, .2);
  color: var(--white);
}

/* ── Better card hover ─────────────────────────────────────────── */
.card {
  transition: box-shadow 0.2s, transform 0.2s;
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* ── Better stat card ──────────────────────────────────────────── */
.stat-card {
  transition: box-shadow 0.2s, transform 0.2s;
}

.stat-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.stat-value {
  font-size: 32px;
}

/* ── Gradient text utility ─────────────────────────────────────── */
.gradient-text {
  background: linear-gradient(135deg, #E8B9A7, #818cf8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Glass utility ─────────────────────────────────────────────── */
.glass {
  background: rgba(255, 255, 255, .07);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .1);
}

/* ── Tag chip ──────────────────────────────────────────────────── */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  background: var(--blue-50);
  color: var(--blue-600);
  border: 1px solid var(--blue-100);
}

/* ── Better focus rings ────────────────────────────────────────── */
*:focus-visible {
  outline: 2px solid var(--blue-400);
  outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════════
   HOME / LANDING PAGE
   ══════════════════════════════════════════════════════════════════ */

body.home {
  background: #FFFFFF;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
}

.container-sm {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 28px;
}

/* ── Home Nav ──────────────────────────────────────────────────── */
.home-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(6, 15, 32, .92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  height: 64px;
}

.home-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 40px;
}

.home-nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}

.home-nav-brand .logo-mark {
  width: 34px;
  height: 34px;
  background: #FFFFFF;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

.home-nav-brand .logo-mark svg {
  width: 18px;
  height: 18px;
}

.home-nav-brand .logo-text {
  font-size: 18px;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.4px;
}

.home-nav-links {
  flex: 1;
  display: flex;
  gap: 2px;
}

.home-nav-links a {
  padding: 7px 13px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, .6);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

.home-nav-links a:hover {
  color: var(--white);
  background: rgba(255, 255, 255, .07);
}

.home-nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.btn-nav-ghost {
  padding: 8px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, .7);
  background: none;
  border: 1.5px solid rgba(255, 255, 255, .15);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: var(--transition);
  white-space: nowrap;
}

.btn-nav-ghost:hover {
  color: var(--white);
  border-color: rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .07);
}

.btn-nav-cta {
  padding: 8px 18px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--white);
  background: linear-gradient(135deg, #D88E72, #D88E72);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: var(--transition);
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(29, 78, 216, .35);
}

.btn-nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(29, 78, 216, .5);
  color: var(--white);
}

/* ── Hero Section ──────────────────────────────────────────────── */
.hero-section {
  background: var(--gradient-hero);
  position: relative;
  overflow: hidden;
  padding: 100px 28px 88px;
}

.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 900px 600px at 10% 110%, rgba(59, 130, 246, .2) 0%, transparent 60%),
    radial-gradient(ellipse 600px 500px at 88% -10%, rgba(99, 102, 241, .14) 0%, transparent 60%),
    radial-gradient(ellipse 700px 400px at 50% 60%, rgba(29, 78, 216, .07) 0%, transparent 60%);
  pointer-events: none;
}

.hero-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .02) 1px, transparent 1px);
  background-size: 52px 52px;
  pointer-events: none;
}

.hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(59, 130, 246, .12);
  border: 1px solid rgba(59, 130, 246, .28);
  color: var(--blue-300);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 24px;
  animation: fadeUp 0.5s ease;
}

.hero-badge .bdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue-400);
  animation: pulse 2s infinite;
}

.hero-title {
  font-size: clamp(38px, 4.5vw, 58px);
  font-weight: 800;
  color: var(--white);
  line-height: 1.07;
  letter-spacing: -2px;
  margin-bottom: 22px;
  animation: fadeUp 0.5s 0.08s ease both;
}

.hero-title .hl {
  background: linear-gradient(135deg, #E8B9A7 0%, #C4A3B8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-sub {
  font-size: 17px;
  color: rgba(255, 255, 255, .62);
  line-height: 1.75;
  max-width: 500px;
  margin-bottom: 38px;
  animation: fadeUp 0.5s 0.15s ease both;
}

.hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 40px;
  animation: fadeUp 0.5s 0.22s ease both;
}

.btn-hero-p {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 30px;
  background: linear-gradient(135deg, #D88E72, #E2AA94);
  color: var(--white);
  font-size: 15px;
  font-weight: 700;
  border-radius: var(--radius-md);
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-main);
  letter-spacing: -0.2px;
  box-shadow: 0 4px 20px rgba(29, 78, 216, .45);
  transition: var(--transition);
}

.btn-hero-p:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(29, 78, 216, .6);
  color: var(--white);
}

.btn-hero-p svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
}

.btn-hero-o {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  background: rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .82);
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--radius-md);
  text-decoration: none;
  border: 1.5px solid rgba(255, 255, 255, .16);
  transition: var(--transition);
}

.btn-hero-o:hover {
  background: rgba(255, 255, 255, .12);
  color: var(--white);
  border-color: rgba(255, 255, 255, .28);
}

.hero-trust {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: rgba(255, 255, 255, .4);
  animation: fadeUp 0.5s 0.3s ease both;
}

.hero-avatars {
  display: flex;
}

.hero-avatars span {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-500), var(--blue-400));
  border: 2px solid rgba(6, 15, 32, .8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--white);
  margin-left: -9px;
}

.hero-avatars span:first-child {
  margin-left: 0;
}

.hero-trust-stars {
  color: #E5A83B;
  letter-spacing: 2px;
}

/* ── Product Mockup ────────────────────────────────────────────── */
.hero-visual {
  animation: fadeUp 0.6s 0.1s ease both;
}

.product-mockup {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .04), var(--glow-blue);
}

.mockup-titlebar {
  background: rgba(255, 255, 255, .05);
  padding: 11px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.mdot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.mdot.r {
  background: #ef4444;
}

.mdot.y {
  background: #eab308;
}

.mdot.g {
  background: #22c55e;
}

.murl {
  flex: 1;
  text-align: center;
  background: rgba(255, 255, 255, .06);
  border-radius: 6px;
  padding: 3px 12px;
  font-size: 11px;
  color: rgba(255, 255, 255, .3);
  font-family: var(--font-mono);
}

.mockup-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mockup-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.mkpi {
  background: rgba(255, 255, 255, .05);
  border-radius: 10px;
  padding: 12px 10px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, .07);
}

.mkpi-n {
  font-size: 20px;
  font-weight: 800;
  color: var(--white);
  line-height: 1;
  margin-bottom: 3px;
}

.mkpi-l {
  font-size: 9px;
  color: rgba(255, 255, 255, .4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.mockup-incident {
  background: rgba(255, 255, 255, .04);
  border-radius: 10px;
  padding: 13px 14px;
  border-left: 3px solid #ef4444;
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-right: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.mi-badges {
  display: flex;
  gap: 6px;
  margin-bottom: 7px;
}

.mi-bdg {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.mi-bdg.crit {
  background: rgba(239, 68, 68, .2);
  color: #fca5a5;
}

.mi-bdg.analyzg {
  background: rgba(139, 92, 246, .2);
  color: #c4b5fd;
}

.mi-title {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, .82);
  margin-bottom: 4px;
}

.mi-meta {
  font-size: 10px;
  color: rgba(255, 255, 255, .3);
}

.mockup-rca {
  background: rgba(29, 78, 216, .1);
  border-radius: 10px;
  padding: 13px 14px;
  border: 1px solid rgba(59, 130, 246, .2);
}

.mrca-header {
  font-size: 10px;
  font-weight: 700;
  color: var(--blue-300);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mrca-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue-400);
  animation: pulse 1.5s infinite;
}

.mline {
  height: 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .1);
  margin-bottom: 7px;
}

.mline:last-child {
  margin-bottom: 0;
}

.mockup-footer-row {
  display: flex;
  gap: 8px;
}

.mf-chip {
  flex: 1;
  background: rgba(255, 255, 255, .04);
  border-radius: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, .07);
  font-size: 10px;
  color: rgba(255, 255, 255, .45);
  display: flex;
  align-items: center;
  gap: 6px;
}

.mf-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green-500);
  flex-shrink: 0;
}

.mf-dot.w {
  background: var(--orange-500);
}

/* ── Logos Strip ───────────────────────────────────────────────── */
.logos-section {
  padding: 48px 28px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}

.logos-label {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 28px;
}

.logos-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  flex-wrap: wrap;
  max-width: 960px;
  margin: 0 auto;
}

.lpill {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--gray-400);
  white-space: nowrap;
  transition: color 0.2s;
  user-select: none;
}

.lpill:hover {
  color: var(--gray-700);
}

.lpill .lem {
  font-size: 20px;
}

.lsep {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gray-300);
}

/* ── Section base ──────────────────────────────────────────────── */
.home-section {
  padding: 96px 28px;
}

.home-section.bg-white {
  background: #FFFFFF;
}

.home-section.bg-gray {
  background: var(--gray-50);
}

.home-section.bg-dark {
  background: #060f20;
}

.section-eyebrow {
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--blue-500);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 10px;
}

.section-heading {
  text-align: center;
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 800;
  color: var(--gray-900);
  letter-spacing: -1.5px;
  line-height: 1.1;
  margin-bottom: 16px;
}

.section-heading.light {
  color: var(--white);
}

.section-sub {
  text-align: center;
  font-size: 16.5px;
  color: var(--gray-500);
  line-height: 1.75;
  max-width: 560px;
  margin: 0 auto 56px;
}

.section-sub.light {
  color: rgba(255, 255, 255, .55);
}

/* ── Feature Cards ─────────────────────────────────────────────── */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1100px;
  margin: 0 auto;
}

.feat-card {
  background: #FFFFFF;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: var(--transition);
}

.feat-card:hover {
  border-color: var(--blue-200);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.feat-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.feat-icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}

.feat-icon.blue {
  background: var(--blue-50);
  color: var(--blue-500);
}

.feat-icon.purple {
  background: var(--purple-50);
  color: var(--purple-500);
}

.feat-icon.green {
  background: var(--green-50);
  color: var(--green-600);
}

.feat-icon.orange {
  background: var(--orange-50);
  color: var(--orange-500);
}

.feat-icon.red {
  background: var(--red-50);
  color: var(--red-500);
}

.feat-icon.indigo {
  background: var(--indigo-50);
  color: var(--indigo-500);
}

.feat-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 8px;
}

.feat-desc {
  font-size: 14px;
  color: var(--gray-500);
  line-height: 1.7;
}

/* ── How it works ──────────────────────────────────────────────── */
.how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  max-width: 960px;
  margin: 0 auto;
  position: relative;
}

.how-grid::before {
  content: '';
  position: absolute;
  top: 27px;
  left: 20%;
  right: 20%;
  height: 2px;
  background: linear-gradient(90deg, var(--blue-200) 0%, var(--blue-400) 50%, var(--blue-200) 100%);
  z-index: 0;
}

.how-step {
  text-align: center;
  padding: 0 32px;
  position: relative;
}

.how-num {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #D88E72, #E2AA94);
  color: var(--white);
  font-size: 20px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 16px rgba(29, 78, 216, .35);
}

.how-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--blue-50);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}

.how-icon-wrap svg {
  width: 22px;
  height: 22px;
  stroke: var(--blue-500);
  fill: none;
  stroke-width: 1.8;
}

.how-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 10px;
}

.how-desc {
  font-size: 14px;
  color: var(--gray-500);
  line-height: 1.7;
}

/* ── Stats Strip ───────────────────────────────────────────────── */
.stats-strip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1000px;
  margin: 0 auto;
}

.sstat {
  text-align: center;
  padding: 40px 24px;
  border-right: 1px solid rgba(255, 255, 255, .08);
}

.sstat:last-child {
  border-right: none;
}

.sstat-num {
  font-size: 48px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 10px;
  background: linear-gradient(135deg, #E8B9A7, #C4A3B8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.sstat-label {
  font-size: 15px;
  color: rgba(255, 255, 255, .5);
  font-weight: 500;
  line-height: 1.4;
}

/* ── Integrations ──────────────────────────────────────────────── */
.int-grid-home {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 16px;
  max-width: 1000px;
  margin: 0 auto;
}

.int-card-home {
  background: #FFFFFF;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  transition: var(--transition);
}

.int-card-home:hover {
  border-color: var(--blue-200);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.int-logo-home {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}

.int-name-home {
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-900);
}

.int-type-home {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10.5px;
  font-weight: 600;
  background: var(--blue-50);
  color: var(--blue-600);
}

/* ── Pricing Cards ─────────────────────────────────────────────── */
.pricing-grid-home {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 980px;
  margin: 0 auto;
  align-items: start;
}

.pcard {
  background: #FFFFFF;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: 32px 28px;
  transition: var(--transition);
  position: relative;
}

.pcard:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.pcard.pop {
  border-color: var(--blue-500);
  box-shadow: var(--shadow-xl);
  transform: translateY(-10px);
}

.pcard.pop:hover {
  transform: translateY(-13px);
}

.pcard-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #D88E72, #E2AA94);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 16px;
  border-radius: 20px;
  white-space: nowrap;
  letter-spacing: 0.3px;
}

.pcard-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 18px;
}

.pcard-price-row {
  margin-bottom: 6px;
}

.pcard-price-row .cur {
  font-size: 20px;
  font-weight: 600;
  color: var(--gray-500);
  vertical-align: top;
  margin-top: 6px;
  display: inline-block;
}

.pcard-price-row .amt {
  font-size: 48px;
  font-weight: 800;
  color: var(--gray-900);
  letter-spacing: -2px;
  line-height: 1;
}

.pcard-price-row .per {
  font-size: 14px;
  color: var(--gray-400);
  font-weight: 500;
}

.pcard-desc {
  font-size: 13.5px;
  color: var(--gray-500);
  margin-bottom: 24px;
  line-height: 1.6;
}

.pcard-hr {
  height: 1px;
  background: var(--gray-100);
  margin: 0 -4px 20px;
}

.pcard-features {
  list-style: none;
  margin-bottom: 28px;
}

.pcard-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 0;
  font-size: 13.5px;
  color: var(--gray-600);
  border-bottom: 1px solid var(--gray-50);
}

.pcard-features li:last-child {
  border-bottom: none;
}

.pcard-features li svg {
  width: 15px;
  height: 15px;
  stroke: var(--green-500);
  fill: none;
  stroke-width: 2.5;
  flex-shrink: 0;
  margin-top: 2px;
}

.pcard-features li.no svg {
  stroke: var(--gray-300);
}

.pcard-features li.no {
  color: var(--gray-400);
}

.btn-pcard {
  display: block;
  width: 100%;
  padding: 12px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: var(--transition);
  border: 2px solid;
  font-family: var(--font-main);
  cursor: pointer;
}

.btn-pcard.outline {
  background: none;
  color: var(--blue-500);
  border-color: var(--blue-200);
}

.btn-pcard.outline:hover {
  background: var(--blue-50);
}

.btn-pcard.filled {
  background: linear-gradient(135deg, #D88E72, #D88E72);
  color: var(--white);
  border-color: transparent;
  box-shadow: 0 4px 16px rgba(29, 78, 216, .3);
}

.btn-pcard.filled:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(29, 78, 216, .4);
  color: var(--white);
}

.pcard-note {
  text-align: center;
  font-size: 12px;
  color: var(--gray-400);
  margin-top: 12px;
}

/* ── FAQ ───────────────────────────────────────────────────────── */
.faq-list {
  max-width: 740px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-item {
  background: #FFFFFF;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.15s;
}

.faq-item.open {
  border-color: var(--blue-300);
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-900);
  user-select: none;
  gap: 16px;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: var(--font-main);
}

.faq-q:hover {
  color: var(--blue-600);
}

.faq-chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke: var(--gray-400);
  fill: none;
  stroke-width: 2;
  transition: transform 0.25s;
}

.faq-item.open .faq-chevron {
  transform: rotate(180deg);
  stroke: var(--blue-500);
}

.faq-body {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
}

.faq-body-inner {
  padding: 0 22px 18px;
  font-size: 14.5px;
  color: var(--gray-500);
  line-height: 1.78;
}

.faq-body-inner strong {
  color: var(--gray-700);
}

.faq-body-inner a {
  color: var(--blue-500);
}

/* ── CTA Section ───────────────────────────────────────────────── */
.cta-section {
  background: var(--gradient-hero);
  padding: 104px 28px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 700px 500px at 25% 110%, rgba(59, 130, 246, .2) 0%, transparent 60%),
    radial-gradient(ellipse 500px 400px at 75% -10%, rgba(99, 102, 241, .15) 0%, transparent 60%);
  pointer-events: none;
}

.cta-section>* {
  position: relative;
  z-index: 1;
}

.cta-title {
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 800;
  color: var(--white);
  letter-spacing: -1.5px;
  margin-bottom: 16px;
  line-height: 1.1;
}

.cta-sub {
  font-size: 17px;
  color: rgba(255, 255, 255, .6);
  margin-bottom: 40px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.65;
}

.cta-note {
  font-size: 13px;
  color: rgba(255, 255, 255, .3);
  margin-top: 18px;
}

/* ── Home Footer ───────────────────────────────────────────────── */
.home-footer {
  background: #060f20;
  padding: 72px 28px 32px;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}

.footer-brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-bottom: 14px;
}

.footer-brand-row .logo-mark {
  width: 32px;
  height: 32px;
  background: #FFFFFF;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-brand-row .logo-mark svg {
  width: 16px;
  height: 16px;
}

.footer-brand-row .logo-text {
  font-size: 18px;
  font-weight: 800;
  color: var(--white);
}

.footer-brand-desc {
  font-size: 13.5px;
  color: rgba(255, 255, 255, .38);
  line-height: 1.7;
  max-width: 240px;
  margin-bottom: 22px;
}

.footer-social {
  display: flex;
  gap: 10px;
}

.footer-social a {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .45);
  text-decoration: none;
  transition: var(--transition);
}

.footer-social a:hover {
  background: rgba(255, 255, 255, .12);
  color: var(--white);
}

.footer-social a svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.footer-col-title {
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, .45);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 18px;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.footer-links a {
  font-size: 13.5px;
  color: rgba(255, 255, 255, .4);
  text-decoration: none;
  transition: color 0.15s;
}

.footer-links a:hover {
  color: rgba(255, 255, 255, .85);
}

.footer-hr {
  height: 1px;
  background: rgba(255, 255, 255, .06);
  margin-bottom: 24px;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .25);
  flex-wrap: wrap;
  gap: 12px;
}

.footer-bottom-links {
  display: flex;
  gap: 20px;
}

.footer-bottom-links a {
  color: rgba(255, 255, 255, .25);
  text-decoration: none;
  transition: color 0.15s;
}

.footer-bottom-links a:hover {
  color: rgba(255, 255, 255, .6);
}

/* ── Home Responsive ───────────────────────────────────────────── */
@media (max-width: 1100px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .hero-visual {
    max-width: 560px;
    margin: 0 auto;
  }

  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats-strip-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pricing-grid-home {
    grid-template-columns: 1fr;
    max-width: 420px;
  }

  .pcard.pop {
    transform: none;
  }

  .pcard.pop:hover {
    transform: translateY(-4px);
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

@media (max-width: 820px) {
  .home-nav-links {
    display: none;
  }

  .home-section {
    padding: 72px 20px;
  }

  .hero-section {
    padding: 80px 20px 64px;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .how-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .how-grid::before {
    display: none;
  }

  .int-grid-home {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-visual {
    display: none;
  }

  .sstat {
    padding: 32px 16px;
  }

  .sstat-num {
    font-size: 36px;
  }
}

@media (max-width: 540px) {
  .stats-strip-grid {
    grid-template-columns: 1fr 1fr;
  }

  .hero-ctas {
    flex-direction: column;
  }

  .footer-top {
    grid-template-columns: 1fr;
  }

  .logos-row {
    gap: 20px;
  }

  .int-grid-home {
    grid-template-columns: 1fr 1fr;
  }
}


/* ═══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE FIXES  ·  All Pages
   ═══════════════════════════════════════════════════════════════ */

/* ── Dashboard ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px;
  }

  .stat-value {
    font-size: 24px !important;
  }

  .stat-card {
    padding: 14px !important;
  }

  /* Dashboard 2-col grids */
  .dashboard-cols,
  .dashboard-cols2 {
    grid-template-columns: 1fr !important;
  }

  /* Activity timeline */
  #activity-feed>div {
    flex-wrap: nowrap;
  }

  /* Recent incidents table — hide less important cols */
  table th:nth-child(2),
  table td:nth-child(2) {
    display: none;
  }

  /* Service */

  /* Header badge hide on mobile */
  .header-badge {
    display: none;
  }
}

@media (max-width: 420px) {
  .stats-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Incidents page ────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Table toolbar wrap */
  .table-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .filter-tabs {
    overflow-x: auto;
    white-space: nowrap;
  }

  .search-wrap {
    max-width: 100% !important;
  }

  /* Hide extra table columns */
  .incidents-table th:nth-child(3),
  .incidents-table td:nth-child(3),
  .incidents-table th:nth-child(5),
  .incidents-table td:nth-child(5) {
    display: none;
  }

  /* Incident detail hero */
  .incident-hero-top {
    flex-direction: column;
  }

  .incident-title {
    font-size: 18px !important;
  }

  .incident-meta {
    gap: 10px;
  }

  /* Buttons in hero */
  .incident-hero-top>div:last-child {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* ── Jira page ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .jira-hero {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 14px !important;
  }

  .jira-hero-actions {
    margin-left: 0 !important;
    width: 100%;
  }

  .jira-hero-actions button {
    width: 100%;
    justify-content: center;
  }

  .config-grid {
    grid-template-columns: 1fr !important;
  }

  /* Tickets table — hide cols */
  .tickets-table th:nth-child(4),
  .tickets-table td:nth-child(4),
  .tickets-table th:nth-child(5),
  .tickets-table td:nth-child(5) {
    display: none;
  }

  /* OAuth steps */
  .oauth-steps {
    gap: 16px !important;
  }

  .oauth-step-label {
    max-width: 80px !important;
    font-size: 11px !important;
  }
}

/* ── Integrations page ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .integration-grid {
    grid-template-columns: 1fr !important;
  }

  .integration-card {
    padding: 16px !important;
  }
}

/* ── Alerts page ───────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Alert recipients table */
  .alerts-table th:nth-child(3),
  .alerts-table td:nth-child(3) {
    display: none;
  }

  /* Severity filter toggles */
  .toggle-row {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* ── Billing page ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .plan-grid {
    grid-template-columns: 1fr !important;
  }

  .plan-card.popular {
    transform: none !important;
  }

  /* Usage card */
  #usage-card {
    padding: 16px !important;
  }
}

/* ── Logs page ─────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Log table hide extra cols */
  .logs-table th:nth-child(4),
  .logs-table td:nth-child(4),
  .logs-table th:nth-child(5),
  .logs-table td:nth-child(5) {
    display: none;
  }

  /* Log message truncate */
  .log-msg {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ── Modals on mobile ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .modal {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .modal-box {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    max-width: 100% !important;
    max-height: 90vh;
    overflow-y: auto;
  }

  .modal-footer {
    flex-direction: column-reverse;
  }

  .modal-footer .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── Cards on mobile ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .card {
    padding: 16px !important;
    border-radius: 12px !important;
  }

  .card-header {
    margin-bottom: 14px !important;
  }

  .page-content {
    padding: 14px !important;
  }
}

/* ── Buttons on mobile ─────────────────────────────────────────── */
@media (max-width: 480px) {

  /* Full width primary actions */
  .section-header .btn {
    font-size: 12px !important;
    padding: 0 10px !important;
  }

  /* Incident detail action buttons */
  .incident-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }

  .incident-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── Top header on mobile ──────────────────────────────────────── */
@media (max-width: 768px) {
  .top-header {
    padding: 0 12px !important;
    gap: 10px !important;
  }

  .page-title {
    font-size: 16px !important;
  }
}

/* ── Auth page mobile ──────────────────────────────────────────── */
@media (max-width: 480px) {
  .form-panel {
    padding: 24px 16px !important;
  }

  .form-title {
    font-size: 22px !important;
  }

  .form-container {
    max-width: 100% !important;
  }

  .btn-lg {
    height: 44px !important;
    font-size: 14px !important;
  }
}

/* ── Sidebar on mobile ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .sidebar {
    width: 260px !important;
  }

  .user-email {
    max-width: 170px !important;
  }
}

/* ── RCA Report mobile ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .rca-card {
    border-radius: 12px !important;
  }

  .rca-body {
    padding: 16px !important;
  }

  .code-block {
    font-size: 11px !important;
    padding: 12px !important;
  }
}

/* ── Section headers on mobile ─────────────────────────────────── */
@media (max-width: 480px) {
  .section-header {
    flex-direction: row;
    align-items: center;
  }

  .section-title {
    font-size: 14px !important;
  }
}

/* ── Fix table horizontal scroll ───────────────────────────────── */
@media (max-width: 768px) {
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table {
    min-width: 500px;
  }
}

/* ── Onboarding mobile ─────────────────────────────────────────── */
@media (max-width: 480px) {
  .onboarding-card {
    padding: 20px 16px !important;
  }

  .ob-title {
    font-size: 18px !important;
  }

  .ob-steps::before {
    display: none;
  }

  .ob-step-label {
    display: none;
  }
}

/* ── Toasts on mobile ──────────────────────────────────────────── */
@media (max-width: 480px) {
  .toast-container {
    bottom: 0 !important;
    right: 0 !important;
    left: 0 !important;
    padding: 0 12px 12px !important;
  }

  .toast {
    max-width: 100% !important;
    min-width: unset !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   LEXRO — Mobile Friendly Hero / Dashboard Preview CSS
   Sirf ye styles apne existing CSS mein add karo
   ═══════════════════════════════════════════════════════════ */

/* ── Outer wrapper (light blue background section) ────────── */
.hero-section {
  padding: 60px 24px;
  background: #FDF8F5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

/* ── Trust bar (avatars + stars + text) ───────────────────── */
.trust-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.trust-bar .avatars {
  display: flex;
  gap: -6px;
}

.trust-bar .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-left: -6px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.trust-bar .avatar:first-child {
  margin-left: 0;
}

.trust-bar .stars {
  color: #f59e0b;
  font-size: 18px;
  letter-spacing: 2px;
}

.trust-bar .trust-text {
  font-size: 15px;
  color: #4A4541;
}

.trust-bar .trust-text strong {
  font-weight: 700;
}

/* ── Dashboard mockup card ────────────────────────────────── */
.dashboard-mockup {
  width: 100%;
  max-width: 500px;
  background: #FCFBF9;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

/* Browser chrome bar */
.mockup-bar {
  background: #1a1a2e;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.mockup-bar .dots {
  display: flex;
  gap: 6px;
}

.mockup-bar .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.mockup-bar .dot.red {
  background: #ff5f57;
}

.mockup-bar .dot.yellow {
  background: #febc2e;
}

.mockup-bar .dot.green {
  background: #28c840;
}

.mockup-bar .url {
  flex: 1;
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  font-family: monospace;
}

/* Dashboard body */
.mockup-body {
  padding: 16px;
}

/* ── Stats grid (2x2) ─────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.stat-card {
  background: #FCFBF9;
  border: 1px solid #F8F6F3;
  border-radius: 12px;
  padding: 14px 16px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.stat-card .stat-number {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 4px;
}

.stat-card .stat-label {
  font-size: 10px;
  font-weight: 700;
  color: #A39E99;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.stat-card.total .stat-number {
  color: #2B2926;
}

.stat-card.open .stat-number {
  color: #f97316;
}

.stat-card.analyzing .stat-number {
  color: #A87D9A;
}

.stat-card.resolved .stat-number {
  color: #22c55e;
}

/* ── Incident list ────────────────────────────────────────── */
.incident-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.incident-item {
  background: #FCFBF9;
  border: 1px solid #F8F6F3;
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-left: 3px solid transparent;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.incident-item.critical {
  border-left-color: #ef4444;
}

.incident-item.open {
  border-left-color: #f97316;
}

.incident-item.resolved {
  border-left-color: #22c55e;
}

.incident-info {
  flex: 1;
  min-width: 0;
  /* text truncate fix */
}

.incident-title {
  font-size: 13px;
  font-weight: 600;
  color: #2B2926;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.incident-meta {
  font-size: 11px;
  color: #A39E99;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.incident-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

.incident-badge.critical {
  color: #ef4444;
  background: #fef2f2;
}

.incident-badge.open {
  color: #f97316;
  background: #fff7ed;
}

.incident-badge.resolved {
  color: #22c55e;
  background: #f0fdf4;
}

/* ── AI RCA footer card ───────────────────────────────────── */
.rca-card {
  background: #FDFCFB;
  border: 1px solid #EEEAE5;
  border-radius: 12px;
  padding: 14px 16px;
}

.rca-card .rca-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  color: #2B2926;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.rca-card .rca-title .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #E2AA94;
}

.rca-card .rca-line {
  font-size: 12px;
  color: #706B66;
  font-family: monospace;
}

.rca-card .rca-cursor {
  display: inline-block;
  width: 2px;
  height: 13px;
  background: #E2AA94;
  margin-left: 2px;
  vertical-align: middle;
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ═══════════════════════════════════════════════════════════ */

/* ── Small phones (≤ 380px) ───────────────────────────────── */
@media (max-width: 380px) {
  .hero-section {
    padding: 40px 16px;
  }

  .stat-card .stat-number {
    font-size: 22px;
  }

  .incident-title {
    font-size: 12px;
  }

  .mockup-bar .url {
    font-size: 10px;
  }
}

/* ── Tablet (641px – 1024px) ──────────────────────────────── */
@media (min-width: 641px) {
  .hero-section {
    padding: 80px 40px;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 48px;
  }

  .trust-bar {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    max-width: 260px;
    padding-top: 40px;
  }

  .dashboard-mockup {
    max-width: 420px;
  }
}

/* ── Desktop (≥ 1025px) ───────────────────────────────────── */
@media (min-width: 1025px) {
  .hero-section {
    padding: 100px 60px;
    gap: 72px;
  }

  .trust-bar {
    max-width: 300px;
    padding-top: 60px;
  }

  .trust-bar .stars {
    font-size: 22px;
  }

  .trust-bar .trust-text {
    font-size: 17px;
  }

  .dashboard-mockup {
    max-width: 480px;
  }

  .stat-card .stat-number {
    font-size: 32px;
  }

  .incident-title {
    font-size: 14px;
  }
}

.integration-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.integration-card {
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  background: #FCFBF9;
  transition: box-shadow .2s, border-color .2s;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.integration-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
}

.integration-card.connected {
  border-color: var(--green-500, #22c55e);
  background: #f0fdf4;
}

.int-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.int-logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
}

.int-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--gray-900);
}

.int-desc {
  font-size: 12px;
  color: var(--gray-500);
  line-height: 1.5;
}

.int-status {
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
}

.int-status .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gray-300);
}

.int-status.ok .dot {
  background: #22c55e;
}

.int-actions {
  display: flex;
  gap: 8px;
}

.section-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 4px;
}

.section-sub {
  font-size: 13px;
  color: var(--gray-500);
  margin-bottom: 16px;
}

.repo-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

.repo-row:hover {
  background: var(--gray-50);
}

.repo-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.repo-info {
  flex: 1;
  min-width: 0;
}

.repo-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-900);
}

.repo-meta {
  font-size: 11px;
  color: var(--gray-400);
  margin-top: 2px;
}

/* ── Add Repo Modal — Git flow styles ── */
.git-provider-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.git-tab {
  flex: 1;
  padding: 9px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: #FCFBF9;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-600);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: all .15s;
}

.git-tab:hover {
  border-color: var(--blue-300, #EABFA6);
  color: var(--blue-600, #D88E72);
}

.git-tab.active {
  border-color: var(--blue-500, #E2AA94);
  background: var(--blue-50, #FDF8F5);
  color: var(--blue-700, #D88E72);
  font-weight: 600;
}

.oauth-connect-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 13px;
  border-radius: 10px;
  margin-bottom: 14px;
}

.oauth-connect-bar.not-connected {
  background: var(--gray-50);
  border: 1.5px dashed var(--gray-300);
}

.oauth-connect-bar.is-connected {
  background: var(--green-50, #f0fdf4);
  border: 1px solid var(--green-200, #bbf7d0);
}

.repo-picker {
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  max-height: 220px;
  overflow-y: auto;
  background: white;
  margin-bottom: 12px;
}

.repo-picker-item {
  padding: 9px 11px;
  border-radius: 8px;
  cursor: pointer;
  margin: 3px;
  border: 1.5px solid transparent;
  transition: all .1s;
}

.repo-picker-item:hover {
  background: var(--gray-50);
}

.repo-picker-item.selected {
  border-color: var(--blue-400, #E8B9A7);
  background: var(--blue-50, #FDF8F5);
}

.repo-picker-item .rp-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-800);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.repo-picker-item .rp-meta {
  font-size: 11px;
  color: var(--gray-400);
  margin-top: 2px;
}

.privacy-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 500;
  flex-shrink: 0;
}

/* ── Mobile fixes ── */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

.main-wrapper {
  overflow-x: hidden;
  min-width: 0;
}

@media (max-width: 768px) {
  .page-content {
    padding: 12px !important;
  }

  .integration-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
  }

  .main-wrapper main>div[style*="justify-content:space-between"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .main-wrapper main>div[style*="justify-content:space-between"]>div {
    width: 100%;
    display: flex !important;
    gap: 8px !important;
  }

  .main-wrapper main>div[style*="justify-content:space-between"]>div .btn {
    flex: 1;
    justify-content: center;
    font-size: 12px !important;
    padding: 0 10px !important;
  }

  .repo-row {
    padding: 10px 12px !important;
    gap: 8px !important;
  }

  .repo-meta {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
  }

  .modal {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .modal-box {
    border-radius: 16px 16px 0 0 !important;
    max-width: 100% !important;
    max-height: 90vh;
    overflow-y: auto;
  }

  .modal-footer {
    flex-direction: column-reverse;
    gap: 8px;
  }

  .modal-footer .btn {
    width: 100%;
    justify-content: center;
  }
}

.help-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: #FCFBF9;
  color: var(--gray-500);
  cursor: pointer;
  transition: all .15s;
  font-family: 'Sora', sans-serif;
}

.help-trigger:hover {
  color: var(--gray-800);
  background: var(--gray-50);
}

.help-trigger svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.int-actions {
  flex-wrap: nowrap;
  align-items: center;
}

/* Help modal */
.help-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 18, 40, .45);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.help-panel {
  background: #FCFBF9;
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: 760px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 -8px 48px rgba(15, 23, 42, .12);
}

@media(min-width:640px) {
  .help-overlay {
    align-items: center;
    padding: 24px
  }

  .help-panel {
    border-radius: 20px;
    max-height: 88vh
  }
}

.help-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid #e4e9f2;
  flex-shrink: 0
}

.help-header-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #F8F6F3;
  border: 1px solid #e4e9f2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0
}

.help-header-title {
  font-size: 15px;
  font-weight: 700;
  color: #1A1816
}

.help-header-sub {
  font-size: 12px;
  color: #A39E99;
  margin-top: 1px
}

.help-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #F8F6F3;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #706B66;
  flex-shrink: 0
}

.help-close:hover {
  background: #EEEAE5
}

.help-close svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5
}

.connector-tabs {
  display: flex;
  gap: 0;
  padding: 0 22px;
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid #e4e9f2
}

.connector-tabs::-webkit-scrollbar {
  display: none
}

.ctab {
  padding: 10px 14px 11px;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: #A39E99;
  white-space: nowrap;
  transition: all .15s;
  flex-shrink: 0;
  font-family: 'Sora', sans-serif;
  margin-bottom: -1px
}

.ctab:hover {
  color: #3D3936
}

.ctab.active {
  color: #D88E72;
  border-bottom-color: #D88E72
}

.help-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 22px 28px
}

.help-footer {
  border-top: 1px solid #e4e9f2;
  padding: 14px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-shrink: 0;
  background: #FDFCFB;
  flex-wrap: wrap
}

.help-footer-text {
  font-size: 12.5px;
  color: #706B66;
  flex: 1;
  min-width: 160px
}

.btn-got-it {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  background: #1A1816;
  color: #fff;
  border: none;
  cursor: pointer;
  font-family: 'Sora', sans-serif;
  white-space: nowrap
}

.btn-got-it:hover {
  background: #3D3936
}

.btn-got-it svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.5
}

.conn-intro {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e4e9f2
}

.conn-intro-name {
  font-size: 16px;
  font-weight: 800;
  color: #1A1816;
  margin-bottom: 4px
}

.conn-intro-desc {
  font-size: 13px;
  color: #706B66;
  line-height: 1.6
}

.conn-intro-tags {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap
}

.conn-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 5px;
  background: #F8F6F3;
  color: #5C5752;
  border: 1px solid #e4e9f2
}

.sec-hd {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #A39E99;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px
}

.sec-hd::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e4e9f2
}

.steps-wrap {
  margin-bottom: 22px
}

.step-item {
  display: flex;
  gap: 13px;
  margin-bottom: 12px;
  position: relative
}

.step-item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 28px;
  width: 2px;
  height: calc(100% - 2px);
  background: #e4e9f2
}

.step-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  background: #2B2926;
  color: #fff;
  flex-shrink: 0;
  position: relative;
  z-index: 1
}

.step-content {
  flex: 1;
  min-width: 0;
  padding-top: 2px
}

.step-label {
  font-size: 13px;
  font-weight: 700;
  color: #2B2926;
  margin-bottom: 3px
}

.step-desc {
  font-size: 12.5px;
  color: #706B66;
  line-height: 1.6
}

.step-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #D88E72;
  text-decoration: none;
  margin-top: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid #e4e9f2;
  background: #FDFCFB
}

.step-link:hover {
  background: #F8F6F3
}

.step-link svg {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5
}

.code-block {
  background: #1A1816;
  border-radius: 8px;
  padding: 11px 14px;
  margin-top: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: #EEEAE5;
  line-height: 1.7;
  overflow-x: auto
}

.code-block .comment {
  color: #5C5752
}

.code-block .val {
  color: #86efac
}

.code-block .url {
  color: #fcd34d
}

.fields-wrap {
  margin-bottom: 22px
}

.field-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid #e4e9f2;
  border-radius: 9px;
  background: #FCFBF9;
  margin-bottom: 7px
}

.field-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 5px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 1px
}

.field-req {
  background: #1A1816;
  color: #fff
}

.field-opt {
  background: #F8F6F3;
  color: #706B66;
  border: 1px solid #e4e9f2
}

.field-info {
  flex: 1;
  min-width: 0
}

.field-name {
  font-size: 12.5px;
  font-weight: 700;
  color: #2B2926
}

.field-desc {
  font-size: 12px;
  color: #706B66;
  margin-top: 2px;
  line-height: 1.5
}

.field-example {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #A39E99;
  margin-top: 3px
}

.perms-wrap {
  margin-bottom: 22px
}

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

.perms-table th {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #A39E99;
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid #e4e9f2;
  background: #FDFCFB
}

.perms-table td {
  font-size: 12px;
  color: #5C5752;
  padding: 9px 12px;
  border-bottom: 1px solid #F8F6F3
}

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

.perm-scope {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  background: #F8F6F3;
  color: #3D3936;
  padding: 2px 8px;
  border-radius: 5px;
  border: 1px solid #e4e9f2
}

.tip-box {
  display: flex;
  gap: 10px;
  padding: 11px 13px;
  border-radius: 9px;
  border: 1px solid #e4e9f2;
  background: #FDFCFB;
  margin-bottom: 8px
}

.tip-box svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 2px;
  fill: none;
  stroke: #706B66;
  stroke-width: 2
}

.tip-title {
  font-size: 12px;
  font-weight: 700;
  color: #3D3936;
  margin-bottom: 2px
}

.tip-text {
  font-size: 12px;
  color: #706B66;
  line-height: 1.55
}

/* ── Mobile Card Layout ── */
@media (max-width: 640px) {
  .incidents-table-wrap {
    display: none !important;
  }

  .incidents-card-list {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
  }

  .inc-card {
    background: #FCFBF9;
    border: 1.5px solid #EEEAE5;
    border-radius: 14px;
    padding: 14px 16px;
    border-left: 4px solid #EEEAE5;
    transition: box-shadow .15s;
    cursor: pointer;
  }

  .inc-card[data-sev="CRITICAL"] {
    border-left-color: #ef4444;
  }

  .inc-card[data-sev="HIGH"] {
    border-left-color: #f97316;
  }

  .inc-card[data-sev="MEDIUM"] {
    border-left-color: #f59e0b;
  }

  .inc-card[data-sev="LOW"] {
    border-left-color: #22c55e;
  }

  .inc-card-title-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 10px;
  }

  .inc-card-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #2B2926;
    line-height: 1.4;
    flex: 1;
  }

  .inc-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 11.5px;
    color: #A39E99;
    font-family: 'JetBrains Mono', monospace;
    margin-bottom: 10px;
  }

  .inc-card-meta-sep {
    color: #D4D0CB;
  }

  .inc-card-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
  }

  .inc-card-actions {
    display: flex;
    gap: 8px;
    border-top: 1px solid #F5F2EE;
    padding-top: 10px;
  }

  .inc-card-actions .card-btn {
    flex: 1;
    height: 34px;
    border-radius: 9px;
    border: 1.5px solid #EEEAE5;
    background: #FCFBF9;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: #706B66;
    cursor: pointer;
    font-family: 'Sora', sans-serif;
    transition: all .15s;
  }

  .inc-card-actions .card-btn:hover {
    border-color: #D88E72;
    color: #D88E72;
  }

  .inc-card-actions .card-btn svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
  }
}

@media (min-width: 641px) {
  .incidents-card-list {
    display: none !important;
  }

  .incidents-table-wrap {
    display: block !important;
  }
}

/* ── RESET & BASE ── */
/* ── OVERFLOW FIX ── */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

/* main-wrapper handled by global base */

/* resets handled by global base above */

/* ── TOKENS (logs) ── */

/* ── KEYFRAMES ── */
@keyframes pulse-green {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(22, 163, 74, .4)
  }

  50% {
    box-shadow: 0 0 0 5px rgba(22, 163, 74, 0)
  }
}


@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

@keyframes new-row {
  from {
    background: rgba(29, 78, 216, .06)
  }

  to {
    background: transparent
  }
}


/* ── PAGE LAYOUT (logs) ── */
/* page-content default is block layout from lexro.css base */

/* ── MONITOR BANNER ── */
.monitor-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  background: linear-gradient(135deg, rgba(22, 163, 74, .06), rgba(29, 78, 216, .06));
  border: 1.5px solid rgba(22, 163, 74, .2);
  border-radius: 12px;
  padding: 12px 18px;
}

.mon-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap
}

.mon-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
  animation: pulse-green 2.5s infinite;
}

.mon-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--green)
}

.mon-sub {
  font-size: 12px;
  color: var(--text2)
}

.mon-right {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap
}

.mon-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text2)
}

.mon-stat strong {
  color: var(--text);
  font-weight: 600
}

.mon-stat svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2
}

/* ── STATS BAR ── */
.stats-bar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.stat-card {
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: box-shadow .2s, transform .2s, border-color .2s;
}

.stat-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--border2)
}

.stat-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-icon svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2
}

.stat-icon.total {
  background: rgba(99, 102, 241, .1);
  color: var(--purple)
}

.stat-icon.error {
  background: rgba(220, 38, 38, .1);
  color: var(--red)
}

.stat-icon.warn {
  background: rgba(217, 119, 6, .1);
  color: var(--yellow)
}

.stat-icon.info {
  background: rgba(29, 78, 216, .1);
  color: var(--blue)
}

.stat-icon.debug {
  background: rgba(107, 114, 128, .1);
  color: #706B66
}

.stat-num {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  color: var(--text);
  font-family: var(--font-mono)
}

.stat-lbl {
  font-size: 10px;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-top: 3px;
  font-weight: 600
}

/* ── SECTION HEADER ── */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px
}

.section-toggle {
  display: flex;
      margin-top: 10px;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  background: none;
  border: none;
  cursor: pointer;
  transition: color .15s;
  padding: 0;
}

.section-toggle svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  transition: transform .22s
}

.section-toggle.collapsed svg {
  transform: rotate(-90deg)
}

.section-toggle:hover {
  color: var(--blue)
}

/* ── PATTERNS ── */
.patterns-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.pattern-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 11px;
  padding: 13px 14px;
  cursor: pointer;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}

.pattern-card:hover {
  border-color: var(--blue-border);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md)
}

.pat-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  font-family: var(--font-mono);
  white-space: normal;
  word-break: break-word;
  overflow: visible;
  text-overflow: unset;
  margin-bottom: 8px;
  line-height: 1.4;
}

.pat-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px
}

.pat-count {
  font-size: 11px;
  color: var(--text3)
}

.pat-lvl {
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  font-family: var(--font-mono);
  text-transform: uppercase
}

.pat-lvl.ERROR {
  background: rgba(220, 38, 38, .1);
  color: var(--red)
}

.pat-lvl.FATAL {
  background: rgba(220, 38, 38, .15);
  color: #b91c1c
}

.pat-lvl.WARN {
  background: rgba(217, 119, 6, .1);
  color: var(--yellow)
}

.pat-lvl.INFO {
  background: rgba(29, 78, 216, .08);
  color: var(--blue)
}

.pat-bar {
  height: 3px;
  background: #F5F2EE;
  border-radius: 99px;
  overflow: hidden
}

.pat-bar-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--blue), var(--purple));
  transition: width .5s ease
}

/* ── SKELETON ── */
.skeleton,
.skeleton-line {
  background: linear-gradient(90deg, #F5F2EE 25%, #e9eaec 50%, #F5F2EE 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 8px;
}

/* ── LOG PANEL ── */
.logs-panel {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 520px;
  box-shadow: var(--shadow);
}

/* Title bar (macOS window chrome) */
.logs-titlebar {
  padding: 10px 16px;
  background: #FDFCFB;
  border-bottom: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}

.tb-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%
}

.tb-dot.r {
  background: #ff5f57
}

.tb-dot.y {
  background: #febc2e
}

.tb-dot.g {
  background: #28c840
}

.tb-label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text3);
  margin-left: 8px;
  flex: 1
}

.tb-count {
  font-family: var(--font-mono);
  font-size: 11px;
  background: rgba(99, 102, 241, .08);
  color: var(--purple);
  padding: 2px 10px;
  border-radius: 5px;
  font-weight: 600;
}

/* Toolbar */
.logs-toolbar {
  padding: 9px 12px;
  background: var(--surface2);
  border-bottom: 1.5px solid var(--border);
  display: flex;
  gap: 7px;
  align-items: center;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.search-wrap {
  flex: 1;
  min-width: 160px;
  position: relative;
  display: flex;
  align-items: center
}

.search-ico {
  position: absolute;
  left: 9px;
  pointer-events: none;
  color: var(--text3)
}

.search-ico svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2
}

.light-input {
  width: 100%;
  background: #FCFBF9;
  color: var(--text);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 7px 10px 7px 32px;
  font-size: 12px;
  font-family: var(--font-mono);
  height: 34px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

.light-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, .08)
}

.light-input::placeholder {
  color: var(--text4)
}

.light-sel {
  background: #FCFBF9;
  color: var(--text2);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 0 10px;
  font-size: 12px;
  height: 34px;
  outline: none;
  transition: border-color .15s;
  cursor: pointer;
  font-family: 'Sora', sans-serif;
}

.light-sel:focus {
  border-color: var(--blue)
}

.sep {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 2px;
  flex-shrink: 0
}

.tb-btn {
  height: 34px;
  padding: 0 11px;
  background: #FCFBF9;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  color: var(--text2);
  font-size: 12px;
  font-family: 'Sora', sans-serif;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all .15s;
  white-space: nowrap;
}

.tb-btn svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2
}

.tb-btn:hover {
  background: var(--blue-light);
  color: var(--blue);
  border-color: var(--blue-border)
}

.tb-btn.on {
  background: var(--blue-light);
  border-color: var(--blue-border);
  color: var(--blue)
}

/* Column header */
.col-head {
  display: flex;
  gap: 10px;
  padding: 7px 16px;
  background: #FDFCFB;
  border-bottom: 1.5px solid var(--border);
  flex-shrink: 0;
  grid-template-columns: 148px 66px 150px 1fr;
}

.col-head span {
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text3);
  font-weight: 600;
}

.c-ts {
  flex-shrink: 0;
  width: 148px
}

.c-lvl {
  flex-shrink: 0;
  width: 66px
}

.c-src {
  flex-shrink: 0;
  width: 150px
}

.c-msg {
  flex: 1
}

/* Log body */
.logs-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden
}

.logs-body::-webkit-scrollbar {
  width: 5px
}

.logs-body::-webkit-scrollbar-track {
  background: transparent
}

.logs-body::-webkit-scrollbar-thumb {
  background: #EEEAE5;
  border-radius: 99px
}

.logs-body::-webkit-scrollbar-thumb:hover {
  background: #D4D0CB
}

/* Log row */
.log-row {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 6px 16px;
  border-bottom: 1px solid #F5F2EE;
  display: flex;
  gap: 10px;
  align-items: baseline;
  transition: background .1s;
  cursor: default;
   grid-template-columns: 148px 66px 150px 1fr;
}

.log-row:hover {
  background: #f8f9ff
}

.log-row.new {
  animation: new-row .8s ease
}

.log-row.row-error {
  background: rgba(220, 38, 38, .02)
}

.log-row.row-error:hover {
  background: rgba(220, 38, 38, .04)
}

.log-row.row-fatal {
  background: rgba(220, 38, 38, .04)
}

.log-row.row-warn {
  background: rgba(217, 119, 6, .02)
}

.log-row.row-warn:hover {
  background: rgba(217, 119, 6, .04)
}

.log-row .c-ts {
  color: var(--text3);
  font-size: 11px;
  flex-shrink: 0;
  width: 148px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.log-row .c-src {
  color: #E2AA94;
  flex-shrink: 0;
  width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px
}

.log-row .c-msg {
  color: #4A4541;
  word-break: break-word;
  line-height: 1.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1
}

.log-row .c-msg.wrap {
  white-space: pre-wrap;
  overflow: unset;
  text-overflow: unset
}

.log-row .c-msg.m-error {
  color: #dc2626
}

.log-row .c-msg.m-fatal {
  color: #b91c1c;
  font-weight: 600
}

.log-row .c-msg.m-warn {
  color: #b45309
}

.log-row .c-msg.m-debug {
  color: #A39E99
}

/* Level pill */
.lvl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 1px 0;
  border-radius: 5px;
  width: 66px;
  flex-shrink: 0;
  font-family: var(--font-mono);
  text-transform: uppercase;
}

.lvl.ERROR {
  background: rgba(220, 38, 38, .1);
  color: #dc2626;
  border: 1px solid rgba(220, 38, 38, .2)
}

.lvl.FATAL {
  background: rgba(185, 28, 28, .15);
  color: #b91c1c;
  border: 1px solid rgba(185, 28, 28, .25)
}

.lvl.WARN {
  background: rgba(217, 119, 6, .1);
  color: #d97706;
  border: 1px solid rgba(217, 119, 6, .2)
}

.lvl.INFO {
  background: rgba(29, 78, 216, .08);
  color: #D88E72;
  border: 1px solid rgba(29, 78, 216, .15)
}

.lvl.DEBUG {
  background: #F5F2EE;
  color: #A39E99;
  border: 1px solid #EEEAE5
}

/* Truncated bar */
.trunc-bar {
  padding: 9px 16px;
  background: rgba(99, 102, 241, .04);
  border-top: 1.5px solid rgba(99, 102, 241, .1);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--purple);
  text-align: center;
  flex-shrink: 0;
}

/* Empty state */
.log-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 60px 20px;
  text-align: center;
}

.log-empty-icon {
  width: 52px;
  height: 52px;
  background: #F5F2EE;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}

.log-empty-icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--text3);
  fill: none;
  stroke-width: 1.5
}

.log-empty-title {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text2);
  margin-bottom: 5px;
  font-weight: 600
}

.log-empty-sub {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text3)
}

.log-empty-sub span {
  color: var(--blue)
}

/* Live badge */
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--green);
  background: rgba(22, 163, 74, .08);
  border: 1.5px solid rgba(22, 163, 74, .2);
  padding: 4px 10px;
  border-radius: 7px;
}

.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse-green 2s infinite
}

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 6px;
}

/* Btn */
.btn-light {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  border: 1.5px solid var(--border);
  background: #FCFBF9;
  color: var(--text2);
  transition: all .15s;
  cursor: pointer;
  font-family: 'Sora', sans-serif;
}

.btn-light svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2
}

.btn-light:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-light)
}

/* API error toast */
.api-toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
  background: #FCFBF9;
  border: 1.5px solid rgba(220, 38, 38, .25);
  border-left: 4px solid var(--red);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 12px;
  color: var(--red);
  font-family: var(--font-mono);
  max-width: 360px;
  box-shadow: var(--shadow-md);
  animation: fadeIn .3s ease;
  display: none;
}

.api-toast.show {
  display: block
}

/* ── TOP HEADER OVERRIDE ── */
.top-header {
  background: #fff !important
}

/* ── RESPONSIVE ── */
@media(max-width:900px) {
  .stats-bar {
    grid-template-columns: repeat(3, 1fr)
  }

  .mon-right {
    display: none
  }
}

@media(max-width:640px) {
  .page-content {
    padding: 10px;
    gap: 10px
  }

  /* Stats */
  .stats-bar {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px
  }

  .stat-card {
    padding: 12px 13px;
    gap: 9px
  }

  .stat-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px
  }

  .stat-icon svg {
    width: 14px;
    height: 14px
  }

  .stat-num {
    font-size: 20px
  }

  .stat-lbl {
  font-size: 10px;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-top: 3px;
  font-weight: 600
}

  /* Monitor banner */
  .monitor-banner {
    padding: 10px 13px
  }

  .mon-right {
    display: none
  }

  /* Patterns */
  .patterns-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px
  }

  .pattern-card {
    padding: 10px 11px
  }

  /* Log panel — fix overflow */
  .logs-panel {
    min-height: 400px;
    border-radius: 12px
  }

  .logs-titlebar {
    padding: 8px 12px
  }

  .tb-label {
    display: none
  }

  /* Toolbar */
  .logs-toolbar {
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 10px
  }

  .search-wrap {
    width: 100%;
    flex: unset;
    order: 1
  }

  .light-sel {
    flex: 1;
    min-width: 80px;
    font-size: 12px
  }

  .sep {
    display: none
  }

  .tb-btn {
    flex: 1;
    justify-content: center;
    font-size: 11px;
    padding: 0 6px
  }

  /* Col head + rows */
  .col-head {
    padding: 5px 10px
  }

  .c-src,
  .col-head .c-src {
    display: none
  }

  .log-row {
    padding: 5px 10px;
    gap: 7px
  }

  .log-row .c-ts {
    width: 110px;
    font-size: 10.5px
  }

  .lvl {
    width: 52px;
    font-size: 9px
  }

  .log-row .c-msg {
    font-size: 11.5px
  }

  /* Fix right overflow */
  .logs-panel,
  .logs-body,
  .log-row {
    max-width: 100%;
    overflow-x: hidden
  }

  .c-ts {
    width: 110px !important
  }

  .c-lvl,
  .lvl {
    width: 52px !important
  }
}

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

  .c-ts,
  .col-head .c-ts {
    display: none
  }

  .light-sel {
    display: none
  }

  .patterns-grid {
    grid-template-columns: 1fr
  }

  /* Only show Wrap + Latest */
  .log-row .c-msg {
    font-size: 11px;
  }

  .tb-btn:last-child {
    display: none
  }
}

@media(max-width:640px) {

  /* Log rows mobile — message full width wrap */
  .log-row {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    padding: 8px 10px !important;
    gap: 4px 7px !important;
  }

  .log-row .c-ts {
    flex: 1 !important;
    font-size: 10px;
    color: var(--text3);
    width: auto !important;
  }

  .log-row .lvl {
    align-self: flex-start;
  }

  .log-row .c-msg {
    width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    font-size: 11.5px;
    line-height: 1.5;
    word-break: break-word;
    flex: unset !important;
  }
}

@media(min-width:641px) {

  /* Toolbar reset */
  .logs-toolbar {
    flex-wrap: nowrap;
  }

  .search-wrap {
    flex: 1;
    width: auto;
    order: unset;
  }

  .light-sel {
    flex: unset;
    width: auto;
    display: block;
  }

  .sep {
    display: block;
  }

  .tb-btn {
    flex: unset;
  }

  /* Log row reset */
  .log-row {
    flex-wrap: nowrap;
    align-items: baseline;
  }

  .log-row .c-msg {
    width: auto !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 !important;
  }
}
.toggle {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
}

.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #EEEAE5;
  border-radius: 999px;
  transition: all 0.25s ease;
}

.toggle-slider::before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  top: 3px;
  background-color: white;
  border-radius: 50%;
  transition: all 0.25s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* ✅ ON state */
.toggle input:checked + .toggle-slider {
  background-color: #D88E72;
}

.toggle input:checked + .toggle-slider::before {
  transform: translateX(18px);
}
.sev-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  cursor: pointer;
  transition: opacity .15s;
}

.sev-pill.active {
  opacity: 1;
}

.sev-pill.inactive {
  opacity: .35;
}

.sev-low {
  background: #FBF2EC;
  color: #D88E72;
}

.sev-medium {
  background: #fef3c7;
  color: #d97706;
}

.sev-high {
  background: #fee2e2;
  color: #dc2626;
}

.sev-critical {
  background: #fce7f3;
  color: #9d174d;
}

/* ── Mobile fixes ── */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

.main-wrapper {
  overflow-x: hidden;
  min-width: 0;
}

@media (max-width: 768px) {
  .page-content {
    padding: 12px !important;
  }

  /* Info card */
  .card {
    padding: 12px 14px !important;
  }

  /* Toolbar stack */
  .table-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 12px !important;
  }

  .search-wrap {
    max-width: 100% !important;
  }

  #sev-filter-select {
    width: 100% !important;
  }

  /* Hide less important columns */
  table th:nth-child(4),
  table td:nth-child(4),
  /* On Incident */
  table th:nth-child(5),
  table td:nth-child(5)

  /* On RCA */
    {
    display: none;
  }

  table {
    font-size: 12px;
  }

  td,
  th {
    padding: 10px 8px !important;
  }

  /* Email truncate */
  table td:nth-child(2) {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Action buttons — icon only */
  table td:last-child .btn:first-child {
    font-size: 11px !important;
    padding: 0 8px !important;
  }

  /* Modal from bottom */
  .modal {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .modal-box {
    border-radius: 16px 16px 0 0 !important;
    max-width: 100% !important;
    max-height: 90vh;
    overflow-y: auto;
  }

  .modal-footer {
    flex-direction: column-reverse;
    gap: 8px;
  }

  .modal-footer .btn {
    width: 100%;
    justify-content: center;
  }

  /* Form row stack */
  .form-row {
    grid-template-columns: 1fr !important;
  }

  /* Checkbox row stack */
  .modal-body>div[style*="display:flex;gap:24px"] {
    flex-direction: column !important;
    gap: 12px !important;
  }
}

/* ── Alerts Page — Mobile Fixes ──────────────────────────────── 
   Existing <style> tag mein add karo ya end mein paste karo
   ─────────────────────────────────────────────────────────────── */

/* Empty state text cut fix */
.empty-state,
.empty-desc {
  word-break: break-word;
  overflow-wrap: break-word;
  padding-left: 8px;
  padding-right: 8px;
}

/* Table wrap overflow */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {

  /* Toolbar — already stacked, but select full width fix */
  .table-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 12px !important;
  }

  #sev-filter-select {
    width: 100% !important;
    box-sizing: border-box;
  }

  .search-wrap {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Show Email col, hide less important ones */
  table th:nth-child(4),
  table td:nth-child(4),
  /* On Incident */
  table th:nth-child(5),
  table td:nth-child(5) {
    /* On RCA */
    display: none;
  }

  /* Email col — truncate long emails */
  table th:nth-child(2),
  table td:nth-child(2) {
    display: table-cell !important;
    /* force show */
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  table {
    font-size: 12px;
  }

  td,
  th {
    padding: 10px 8px !important;
  }

  /* Action buttons compact */
  .btn.btn-secondary.btn-sm {
    font-size: 11px !important;
    padding: 4px 8px !important;
  }

  /* Empty state center fix */
  .empty-state {
    padding: 30px 16px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
  }

  .empty-desc {
    max-width: 100%;
    padding: 0 8px;
  }

  /* Modal bottom sheet */
  .modal {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .modal-box {
    border-radius: 16px 16px 0 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    max-height: 90vh;
    overflow-y: auto;
  }

  .modal-footer {
    flex-direction: column-reverse;
    gap: 8px;
  }

  .modal-footer .btn {
    width: 100%;
    justify-content: center;
  }

  /* Form row stack */
  .form-row {
    grid-template-columns: 1fr !important;
  }

  /* Checkbox row stack */
  .modal-body>div[style*="display:flex;gap:24px"] {
    flex-direction: column !important;
    gap: 12px !important;
  }
}

@media (max-width: 400px) {

  /* Very small — hide Actions text, show only icons */
  table th:last-child {
    display: none;
  }

  table td:last-child {
    padding: 6px 4px !important;
  }

  table td:last-child .btn span {
    display: none;
  }
}

/* Paste this in the existing <style> tag in alerts.html */

/* Empty state td — allow full width */
#recipients-tbody td[colspan] {
  padding: 0 !important;
}

.empty-state {
  padding: 32px 20px;
  text-align: center;
  box-sizing: border-box;
  width: 100%;
}

.empty-title {
  font-size: 15px;
  font-weight: 700;
  color: #2B2926;
  margin-bottom: 6px;
}

.empty-desc {
  font-size: 13px;
  color: #A39E99;
  line-height: 1.6;
  margin: 0 auto 16px;
  max-width: 260px;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  /* ← key fix */
}

.empty-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #F8F6F3;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}

.empty-icon svg {
  width: 22px;
  height: 22px;
  stroke: #A39E99;
  fill: none;
  stroke-width: 1.5;
}

.usage-card {
  background: linear-gradient(135deg, #1e3a5f 0%, #D88E72 100%);
  border-radius: 16px;
  padding: 28px;
  color: #fff;
  margin-bottom: 24px;
}

.usage-title {
  font-size: 13px;
  opacity: .7;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  margin-bottom: 4px;
}

.usage-value {
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 16px;
}

.usage-bar {
  background: rgba(255, 255, 255, .2);
  border-radius: 99px;
  height: 8px;
  overflow: hidden;
  margin-bottom: 8px;
}

.usage-bar-fill {
  height: 100%;
  border-radius: 99px;
  background: #E8B9A7;
  transition: width .6s ease;
}

.usage-meta {
  font-size: 12px;
  opacity: .75;
  display: flex;
  justify-content: space-between;
}

.usage-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.usage-stat {
  background: rgba(255, 255, 255, .1);
  border-radius: 10px;
  padding: 12px;
}

.usage-stat-val {
  font-size: 20px;
  font-weight: 800;
}

.usage-stat-lbl {
  font-size: 11px;
  opacity: .7;
  margin-top: 2px;
}

.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.plan-card {
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  background: #FCFBF9;
  transition: box-shadow .2s, border-color .2s;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.plan-card:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, .1);
}

.plan-card.current {
  border-color: var(--blue-500);
  background: #f0f6ff;
}

.plan-card.popular {
  border-color: var(--blue-400);
  position: relative;
}

.plan-popular-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--blue-600);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 12px;
  border-radius: 99px;
  white-space: nowrap;
}

.plan-name {
  font-size: 17px;
  font-weight: 800;
  color: var(--gray-900);
}

.plan-price {
  font-size: 28px;
  font-weight: 800;
  color: var(--gray-900);
}

.plan-price span {
  font-size: 14px;
  font-weight: 400;
  color: var(--gray-500);
}

.plan-desc {
  font-size: 12px;
  color: var(--gray-500);
  line-height: 1.5;
}

.plan-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--gray-700);
}

.plan-features li svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  stroke: var(--green-600, #16a34a);
  margin-top: 1px;
}

.plan-features li.dimmed {
  opacity: .45;
}

.plan-features li.dimmed svg {
  stroke: var(--gray-400);
}

.section-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 16px;
}

.invoice-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

.invoice-row:hover {
  background: var(--gray-50);
}

/* ── Success Modal ─────────────────────────────────── */
.success-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(4px);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

.success-modal-overlay.visible {
  display: flex;
}

.success-modal {
  background: #FCFBF9;
  border-radius: 20px;
  padding: 40px 36px;
  max-width: 420px;
  width: calc(100% - 32px);
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .18);
  animation: modalPop .3s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes modalPop {
  from {
    opacity: 0;
    transform: scale(.88);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.success-icon {
  width: 68px;
  height: 68px;
  background: #f0fdf4;
  border: 2.5px solid #bbf7d0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.success-icon svg {
  width: 30px;
  height: 30px;
  stroke: #16a34a;
  stroke-width: 2.5;
}

.success-modal h2 {
  font-size: 20px;
  font-weight: 800;
  color: var(--gray-900);
  margin-bottom: 8px;
}

.success-modal p {
  font-size: 13.5px;
  color: var(--gray-500);
  line-height: 1.6;
  margin-bottom: 6px;
}

.success-plan-badge {
  display: inline-block;
  background: #FDF8F5;
  color: #D88E72;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 99px;
  border: 1px solid #F6E4DA;
  margin: 10px 0 20px;
}

.success-modal-close {
  width: 100%;
  padding: 12px;
  background: var(--blue-600, #D88E72);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s;
}

.success-modal-close:hover {
  background: #C97A5D;
}
/* ── Dark sidebar ── */
    .logo-text { color: #F8F6F3 !important; }
   

    /* ── Base ── */
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    html,body{overflow-x:hidden;max-width:100%}
    .main-wrapper{overflow-x:hidden;min-width:0}

    /* ── Jira Hero ── */
    .jira-hero {
      background: linear-gradient(135deg, #0052cc 0%, #1868db 40%, #2684ff 100%);
      border-radius: 16px; padding: 28px 30px; color: #fff;
      display: flex; align-items: center; gap: 20px; margin-bottom: 22px;
      position: relative; overflow: hidden;
    }
    .jira-hero::before {
      content: '';
      position: absolute; inset: 0;
      background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='20'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
      pointer-events: none;
    }
    .jira-logo-wrap {
      width: 58px; height: 58px;
      background: rgba(255,255,255,.18);
      backdrop-filter: blur(10px);
      border-radius: 14px;
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
      border: 1px solid rgba(255,255,255,.2);
      position: relative;
    }
    .jira-logo-wrap svg { width: 30px; height: 30px; }
    .jira-hero-info { flex: 1; min-width: 0; position: relative; }
    .jira-hero-title { font-size: 19px; font-weight: 800; letter-spacing: -.3px; }
    .jira-hero-sub { font-size: 13px; opacity: .8; margin-top: 4px; line-height: 1.55; }
    .jira-hero-badges { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
    .hero-badge-pill {
      display: flex; align-items: center; gap: 6px;
      background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.2);
      border-radius: 20px; padding: 5px 12px; font-size: 12px; font-weight: 600;
    }
    .hero-badge-pill svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 2.5; }
    .jira-hero-actions { position: relative; display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }

    /* ── Not connected card ── */
    .connect-card {
      background: #FCFBF9; border: 1.5px solid #EEEAE5; border-radius: 18px;
      overflow: hidden;
    }
    .connect-card-top {
      display: flex; flex-direction: column; align-items: center;
      padding: 56px 40px 40px; text-align: center;
    }
    .jira-bigicon {
      width: 80px; height: 80px;
      background: linear-gradient(135deg, #0052cc, #2684ff);
      border-radius: 22px; display: flex; align-items: center; justify-content: center;
      margin-bottom: 22px;
      box-shadow: 0 12px 40px rgba(0,82,204,.3), 0 4px 12px rgba(0,82,204,.2);
    }
    .jira-bigicon svg { width: 38px; height: 38px; fill: none; stroke: #fff; stroke-width: 1.5; }
    .connect-title { font-size: 22px; font-weight: 800; color: #111827; letter-spacing: -.4px; margin-bottom: 10px; }
    .connect-desc { font-size: 14px; color: #706B66; max-width: 440px; line-height: 1.7; margin-bottom: 36px; }

    /* Steps */
    .steps-row { display: flex; align-items: flex-start; gap: 0; margin-bottom: 36px; width: 100%; max-width: 500px; }
    .step-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; position: relative; }
    .step-item:not(:last-child)::after {
      content: ''; position: absolute; top: 18px; left: calc(50% + 18px);
      right: calc(-50% + 18px); height: 2px;
      background: linear-gradient(90deg, #FBF2EC, #EEEAE5);
    }
    .step-num {
      width: 36px; height: 36px; border-radius: 50%;
      background: linear-gradient(135deg, #D88E72, #9B6B8E);
      color: #fff; font-size: 13px; font-weight: 800;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 4px 12px rgba(29,78,216,.3); position: relative; z-index: 1;
    }
    .step-label { font-size: 12px; color: #706B66; text-align: center; max-width: 110px; line-height: 1.5; font-weight: 500; }

    .btn-jira-connect {
      display: inline-flex; align-items: center; gap: 10px;
      background: linear-gradient(135deg, #0052cc, #1868db);
      color: #fff; border: none; font-size: 15px; font-weight: 700;
      padding: 13px 28px; border-radius: 12px; cursor: pointer;
      transition: all .2s; letter-spacing: -.1px;
      box-shadow: 0 4px 16px rgba(0,82,204,.35);
    }
    .btn-jira-connect:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,82,204,.45); }
    .btn-jira-connect:disabled { opacity: .6; cursor: not-allowed; transform: none; }
    .btn-jira-connect svg { width: 18px; height: 18px; flex-shrink: 0; }

    .connect-footer-note { font-size: 12px; color: #A39E99; margin-top: 16px; display: flex; align-items: center; gap: 6px; }
    .connect-footer-note svg { width: 13px; height: 13px; fill: none; stroke: #A39E99; stroke-width: 2; flex-shrink: 0; }

    /* Feature chips */
    .features-strip {
      display: flex; border-top: 1.5px solid #F8F6F3;
      background: #FDFCFB;
    }
    .feature-item {
      flex: 1; display: flex; align-items: center; gap: 12px;
      padding: 20px 22px; border-right: 1.5px solid #F8F6F3;
    }
    .feature-item:last-child { border-right: none; }
    .feature-ico {
      width: 40px; height: 40px; border-radius: 12px;
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .feature-ico svg { width: 18px; height: 18px; fill: none; stroke-width: 2; }
    .feature-name { font-size: 13px; font-weight: 700; color: #2B2926; }
    .feature-desc { font-size: 11.5px; color: #A39E99; margin-top: 2px; line-height: 1.45; }

    /* ── Connected layout ── */
    .connected-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; }

    /* ── Card ── */
    .card { background: #FCFBF9; border: 1.5px solid #EEEAE5; border-radius: 16px; padding: 20px 22px; }
    .card-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; gap: 10px; }
    .card-title { font-size: 13px; font-weight: 700; color: #111827; }

    /* ── Toggle ── */
    .toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid #F5F2EE; }
    .toggle-row:last-child { border-bottom: none; }
    .toggle-lbl { font-size: 13px; font-weight: 600; color: #4A4541; }
    .toggle-sub { font-size: 11.5px; color: #A39E99; margin-top: 2px; line-height: 1.4; }
    .toggle { position: relative; width: 42px; height: 24px; flex-shrink: 0; }
    .toggle input { opacity: 0; width: 0; height: 0; }
    .tog-slider { position: absolute; cursor: pointer; inset: 0; background: #D4D0CB; border-radius: 99px; transition: background .22s; }
    .tog-slider::after { content:''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; background: #FCFBF9; border-radius: 50%; transition: transform .22s; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
    .toggle input:checked + .tog-slider { background: #D88E72; }
    .toggle input:checked + .tog-slider::after { transform: translateX(18px); }

    /* ── Connection info ── */
    .conn-field { margin-bottom: 14px; }
    .conn-field-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #A39E99; margin-bottom: 4px; }
    .conn-field-value { font-size: 13.5px; font-weight: 600; color: #2B2926; }

    /* ── Status badge inline ── */
    .status-dot-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
    .live-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.2); animation: lpulse 2s infinite; }
    @keyframes lpulse { 0%,100%{box-shadow:0 0 0 3px rgba(34,197,94,.18)}50%{box-shadow:0 0 0 7px rgba(34,197,94,.05)} }

    /* ── Tickets table ── */
    .tickets-card { background: #FCFBF9; border: 1.5px solid #EEEAE5; border-radius: 16px; overflow: hidden; }
    table { width: 100%; border-collapse: collapse; font-size: 13px; }
    thead th { padding: 11px 16px; text-align: left; font-size: 10.5px; font-weight: 700; color: #A39E99; background: #FDFCFB; letter-spacing: .5px; text-transform: uppercase; border-bottom: 1px solid #EEEAE5; }
    tbody td { padding: 13px 16px; border-bottom: 1px solid #F5F2EE; color: #4A4541; vertical-align: middle; }
    tbody tr:last-child td { border-bottom: none; }
    tbody tr:hover td { background: #FDFCFB; }
    .jira-key { color: #0052cc; font-weight: 700; font-size: 13px; font-family: 'JetBrains Mono', monospace; text-decoration: none; }
    .jira-key:hover { text-decoration: underline; }

    /* ── Buttons ── */
    .btn-outline { font-size: 12.5px; font-weight: 600; padding: 7px 14px; border: 1.5px solid #EEEAE5; border-radius: 8px; background: #FCFBF9; color: #4A4541; cursor: pointer; transition: all .15s; display: inline-flex; align-items: center; gap: 6px; }
    .btn-outline:hover { border-color: #D88E72; color: #D88E72; }
    .btn-outline svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
    .btn-red { font-size: 12.5px; font-weight: 600; padding: 7px 14px; border: 1.5px solid #fecaca; border-radius: 8px; background: #fff5f5; color: #ef4444; cursor: pointer; transition: all .15s; display: inline-flex; align-items: center; gap: 6px; }
    .btn-red:hover { background: #fef2f2; border-color: #ef4444; }
    .btn-red svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
    .btn-save { font-size: 12.5px; font-weight: 700; padding: 7px 18px; border: none; border-radius: 8px; background: #D88E72; color: #fff; cursor: pointer; transition: background .15s; display: inline-flex; align-items: center; gap: 7px; }
    .btn-save:hover { background: #C97A5D; }

    /* ── Skel ── */
    .skel { background: linear-gradient(90deg,#F5F2EE 25%,#eaebee 50%,#F5F2EE 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 8px; }

    /* ── Empty ── */
    .empty { padding: 40px 24px; text-align: center; }
    .empty-ico { width: 48px; height: 48px; margin: 0 auto 12px; background: #F5F2EE; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
    .empty-ico svg { width: 22px; height: 22px; stroke: #A39E99; fill: none; stroke-width: 1.8; }
    .empty-title { font-size: 14px; font-weight: 700; color: #4A4541; margin-bottom: 6px; }
    .empty-desc { font-size: 12.5px; color: #A39E99; max-width: 340px; margin: 0 auto; line-height: 1.65; }

    /* ── Mobile ── */
    @media(max-width:768px) {
      .page-content { padding: 12px !important; }
      .jira-hero { flex-direction: column; gap: 16px; padding: 20px; }
      .jira-hero-actions { width: 100%; }
      .btn-jira-connect { width: 100%; justify-content: center; }
      .connect-card-top { padding: 36px 20px 28px; }
      .steps-row { flex-direction: column; align-items: center; gap: 16px; }
      .step-item::after { display: none; }
      .features-strip { flex-direction: column; }
      .feature-item { border-right: none; border-bottom: 1.5px solid #F8F6F3; }
      .feature-item:last-child { border-bottom: none; }
      .connected-grid { grid-template-columns: 1fr; }
      table th:nth-child(3),table td:nth-child(3),
      table th:nth-child(4),table td:nth-child(4),
      table th:nth-child(5),table td:nth-child(5) { display: none; }
      table { font-size: 12px; }
      td, th { padding: 10px 10px !important; }
    }


    body {
      font-family: 'Sora', sans-serif;
      background: #FDFCFB;
      color: var(--gray-700);
      min-height: 100vh;
    }

    /* ── TOP BAR ── */
    .top-bar {
      background: #FCFBF9;
      border-bottom: 1px solid var(--border);
      padding: 0 24px;
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: sticky;
      top: 0;
      z-index: 50;
    }
    .logo {
      display: flex;
      align-items: center;
      gap: 8px;
      text-decoration: none;
    }
    .logo-text {
      font-size: 18px;
      font-weight: 800;
      color: var(--gray-900);
      letter-spacing: -0.5px;
    }
    .shared-badge {
      background: #FDF8F5;
      color: #D88E72;
      border: 1px solid #F6E4DA;
      font-size: 11px;
      font-weight: 700;
      padding: 2px 9px;
      border-radius: 20px;
      letter-spacing: 0.04em;
    }
    .expiry-chip {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: var(--gray-500);
      background: var(--gray-100);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 5px 12px;
    }
    .expiry-chip.warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
    .expiry-chip.expired { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

    /* ── MAIN LAYOUT ── */
    .page { max-width: 900px; margin: 0 auto; padding: 28px 20px 60px; }

    /* ── STATES ── */
    .state-screen {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 60vh;
      gap: 16px;
      text-align: center;
    }
    .state-icon {
      width: 64px;
      height: 64px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .state-icon.error { background: #fef2f2; }
    .state-icon.loading { background: #FDF8F5; }
    .state-title { font-size: 20px; font-weight: 800; color: var(--gray-900); }
    .state-desc  { font-size: 14px; color: var(--gray-500); max-width: 380px; line-height: 1.6; }

    /* Spinner */
    .spinner {
      width: 32px; height: 32px;
      border: 3px solid #F6E4DA;
      border-top-color: #D88E72;
      border-radius: 50%;
      animation: spin .7s linear infinite;
    }

    /* ── INCIDENT HEADER ── */
    .inc-card {
      background: #FCFBF9;
      border: 1.5px solid var(--border);
      border-radius: 16px;
      padding: 24px 28px;
      margin-bottom: 20px;
    }
    .inc-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
    .chip {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 11px;
      border-radius: 20px;
      font-size: 11.5px;
      font-weight: 600;
      border: 1.5px solid;
    }
    .chip-low      { background: #f0fdf4; color: #16a34a; border-color: #bbf7d0; }
    .chip-medium   { background: #fffbeb; color: #d97706; border-color: #fde68a; }
    .chip-high     { background: #fff7ed; color: #ea580c; border-color: #fed7aa; }
    .chip-critical { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
    .chip-analyzed { background: #FDF8F5; color: #D88E72; border-color: #F6E4DA; }
    .chip-open     { background: #FDFCFB; color: #706B66; border-color: #EEEAE5; }
    .chip-env      { background: #FDFCFB; color: #706B66; border-color: #EEEAE5; }

    .inc-title { font-size: 22px; font-weight: 800; color: var(--gray-900); line-height: 1.3; margin-bottom: 6px; }
    .inc-subtitle { font-size: 13px; color: var(--gray-500); margin-bottom: 18px; }

    .meta-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      border-top: 1px solid var(--border);
      padding-top: 16px;
    }
    .meta-item { padding: 0 20px 0 0; }
    .meta-item:not(:last-child) { border-right: 1px solid var(--border); margin-right: 20px; }
    .meta-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--gray-400); margin-bottom: 4px; }
    .meta-value { font-size: 13px; font-weight: 600; color: var(--gray-900); }
    .meta-value.mono { font-family: var(--font-mono); font-size: 12px; color: #D88E72; }

    /* ── RCA CARD ── */
    .section-card {
      background: #FCFBF9;
      border: 1.5px solid var(--border);
      border-radius: 14px;
      padding: 20px 24px;
      margin-bottom: 16px;
    }
    .section-hd {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 16px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--border);
    }
    .section-title { font-size: 13px; font-weight: 700; color: var(--gray-900); }

    .root-cause-callout {
      background: linear-gradient(135deg, #FDF8F5, #F8F3F6);
      border: 1px solid #F6E4DA;
      border-left: 4px solid #D88E72;
      border-radius: 8px;
      padding: 14px 16px;
      margin-bottom: 18px;
    }
    .root-cause-text { font-size: 14px; font-weight: 600; color: #7A3F2B; line-height: 1.7; }

    .steps-list { list-style: none; display: flex; flex-direction: column; gap: 8px; counter-reset: step; }
    .steps-list li {
      position: relative;
      padding: 10px 12px 10px 42px;
      font-size: 13px;
      color: var(--gray-700);
      line-height: 1.65;
      background: #fafafa;
      border: 1px solid #F5F2EE;
      border-radius: 8px;
    }
    .steps-list li::before {
      content: counter(step);
      counter-increment: step;
      position: absolute;
      left: 10px; top: 10px;
      width: 20px; height: 20px;
      background: #D88E72; color: #fff;
      border-radius: 50%;
      font-size: 10px; font-weight: 800;
      display: flex; align-items: center; justify-content: center;
    }

    .fix-block {
      background: #FDFCFB;
      border: 1px solid #EEEAE5;
      border-left: 3px solid #D88E72;
      border-radius: 8px;
      padding: 12px 14px;
      font-family: var(--font-mono);
      font-size: 12.5px;
      color: var(--gray-700);
      line-height: 1.7;
      white-space: pre-wrap;
      word-break: break-word;
    }

    .file-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
    .file-pill {
      display: inline-flex; align-items: center; gap: 4px;
      background: #FDF8F5; color: #8B4C35;
      border: 1px solid #F6E4DA; border-radius: 6px;
      padding: 2px 10px;
      font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
    }

    /* Confidence ring */
    .conf-row { display: flex; align-items: center; gap: 16px; }
    .conf-ring-wrap { position: relative; width: 70px; height: 70px; flex-shrink: 0; }
    .conf-ring-wrap svg { position: absolute; top: 0; left: 0; transform: rotate(-90deg); }
    .conf-ring-pct {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 15px; font-weight: 800; color: var(--gray-900);
      font-family: var(--font-mono);
    }
    .conf-badge {
      display: inline-flex; align-items: center; gap: 5px;
      border-radius: 20px; padding: 4px 11px;
      font-size: 12px; font-weight: 700; margin-bottom: 6px;
    }
    .conf-badge.hi  { background: #f0fdf4; color: #16a34a; border: 1.5px solid #bbf7d0; }
    .conf-badge.mid { background: #fffbeb; color: #d97706; border: 1.5px solid #fde68a; }
    .conf-badge.lo  { background: #fef2f2; color: #dc2626; border: 1.5px solid #fecaca; }
    .conf-desc { font-size: 12.5px; color: #5C5752; line-height: 1.55; }

    /* Blame card */
    .blame-box {
      background: #fff5f5; border: 1px solid #fecaca; border-radius: 10px; padding: 12px 14px;
    }
    .blame-author { font-size: 14px; font-weight: 700; color: #dc2626; }
    .blame-lines-badge {
      font-size: 11.5px; font-family: var(--font-mono); color: #706B66;
      background: #F5F2EE; border: 1px solid #EEEAE5; padding: 2px 8px; border-radius: 4px;
    }

    /* Commit card */
    .commit-card {
      background: #FCFBF9; border: 1.5px solid var(--border); border-radius: 12px; overflow: hidden;
    }
    .commit-hd {
      display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
      padding: 12px 16px; background: #FDFCFB; border-bottom: 1px solid var(--border);
    }
    .commit-hash {
      font-family: var(--font-mono); font-size: 12px;
      background: #FDF8F5; color: #D88E72; padding: 2px 9px;
      border-radius: 5px; border: 1px solid #F6E4DA; font-weight: 600;
    }
    .commit-badge-primary {
      font-size: 10.5px; font-weight: 700; padding: 2px 9px; border-radius: 4px;
      background: #fff1f2; color: #e11d48; border: 1px solid #fecdd3;
    }
    .commit-body { padding: 14px 16px; }
    .commit-msg { font-size: 13px; font-weight: 600; color: #2B2926; margin-bottom: 8px; }
    .commit-author-row { font-size: 12px; color: var(--gray-500); display: flex; align-items: center; gap: 5px; }

    /* Lexro promo footer */
    .lexro-promo {
      margin-top: 32px;
      text-align: center;
      padding: 20px;
      background: #FCFBF9;
      border: 1.5px solid var(--border);
      border-radius: 14px;
    }
    .lexro-promo-title { font-size: 15px; font-weight: 700; color: var(--gray-900); margin-bottom: 6px; }
    .lexro-promo-desc  { font-size: 13px; color: var(--gray-500); margin-bottom: 14px; line-height: 1.6; }
    .lexro-promo-btn {
      display: inline-flex; align-items: center; gap: 6px;
      background: #D88E72; color: #fff; text-decoration: none;
      font-size: 13px; font-weight: 700; padding: 10px 22px;
      border-radius: 10px; transition: background .15s;
    }
    .lexro-promo-btn:hover { background: #D88E72; }

    @media(max-width: 640px) {
      .meta-row { grid-template-columns: 1fr 1fr; gap: 14px; }
      .meta-item:not(:last-child) { border-right: none; margin-right: 0; }
      .inc-title { font-size: 18px; }
      .page { padding: 16px 12px 40px; }
    }

    .nav-brand { background: none !important; border: none !important; box-shadow: none !important; padding: 0 !important; }
  .nav-logo  { background: none !important; border: none !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; width: auto !important; height: auto !important; }
  .nav-brand-text { display: none !important; }

  /* ================================================
   LEXRO — Mobile Responsive Fix
   Apply these styles to your existing CSS file
   ================================================ */

/* ── Global overflow fix ── */


/* ── Nav fixes ── */
@media (max-width: 768px) {
  .nav-inner {
    padding: 0 16px;
  }

  .nav-links,
  .nav-actions {
    display: none;
  }

  .nav-mobile-btn {
    display: flex;
  }
}

/* ── Hero section ── */
@media (max-width: 768px) {
  .hero-inner {
    grid-template-columns: 1fr;
    padding: 24px 16px 40px;
    gap: 32px;
  }

  .hero-h1 {
    font-size: clamp(32px, 8vw, 52px);
    line-height: 1.1;
  }

  .hero-sub {
    font-size: 15px;
  }

  .hero-btns {
    flex-direction: column;
    gap: 10px;
  }

  .hero-btns button {
    width: 100%;
    justify-content: center;
  }

  .product-showcase {
    width: 100%;
    overflow: hidden;
  }

  .pw-frame {
    width: 100%;
    overflow: hidden;
  }
}

/* ── Recent Deployments Card — THE MAIN FIX ── */
@media (max-width: 768px) {

  /* Deployment row — stack vertically on small screens */
  .deployment-row,
  [class*="deployment"] {
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Badge fix — "PRODUCTION" was getting clipped */
  .deployment-badge,
  .badge-production,
  [class*="badge"] {
    white-space: nowrap;
    overflow: visible;
    flex-shrink: 0;
    font-size: 10px;
    padding: 2px 8px;
  }

  /* Card container — prevent overflow */
  .recent-deployments,
  [class*="deployments"] {
    width: 100%;
    overflow: hidden;
  }

  /* Each deployment item */
  .deployment-item,
  [class*="deploy-item"] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 12px;
    border-radius: 10px;
  }

  /* Repo name + commit hash row */
  .deploy-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    width: 100%;
  }

  /* Commit hash pill */
  .commit-hash {
    font-size: 11px;
    flex-shrink: 0;
  }

  /* Meta info (production · time ago) */
  .deploy-meta {
    font-size: 11px;
    color: #A39E99;
  }

  /* Badge pushed to right on same line as title */
  .deploy-badge-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    flex-wrap: nowrap;
  }
}

/* ── Product showcase tabs ── */
@media (max-width: 768px) {
  .pw-tabs {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }

  .pw-tabs::-webkit-scrollbar {
    display: none;
  }

  .pw-tab {
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 11px;
    padding: 6px 10px;
  }

  /* Dashboard panels — prevent overflow */
  .pw-panel {
    overflow: hidden;
  }

  /* KPI grid — 2 col on mobile */
  .pw-panel [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* 4-col metrics — 2x2 on mobile */
  .pw-panel [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* 5-col stats — 3+2 on mobile */
  .pw-panel [style*="grid-template-columns:repeat(5,1fr)"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* RCA 2-col — stack on mobile */
  .pw-panel [style*="grid-template-columns:1.1fr .9fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── Automation pipeline ── */
@media (max-width: 768px) {
  .auto-pipe-wrap {
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 0 16px;
  }

  .pipe-conn {
    width: 2px;
    height: 32px;
    min-width: unset;
    flex-direction: column;
    align-items: center;
    padding: 0;
    padding-right: 0;
    padding-bottom: 0;
  }

  .pipe-conn-line {
    width: 2px;
    height: 32px;
    flex: none;
  }

  .pipe-conn-line::after {
    width: 4px;
    height: 80%;
    top: -80%;
    left: -1px;
    background: linear-gradient(180deg, transparent, #E2AA94 35%, #818cf8 65%, transparent);
    animation: lx-pipe-v 2.4s ease-in-out infinite;
  }

  @keyframes lx-pipe-v {
    0% { top: -80%; }
    100% { top: 100%; }
  }

  .pipe-conn-arrow {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid #D4D0CB;
    border-bottom: none;
    width: 0;
    height: 0;
  }

  .pipe-step {
    max-width: 100%;
    width: 100%;
    flex-direction: row;
    text-align: left;
    gap: 14px;
    padding: 14px 16px;
    background: var(--bg, #fff);
    border: 1px solid #EEEAE5;
    border-radius: 14px;
  }

  .pipe-icon-ring {
    flex-shrink: 0;
  }

  .pipe-step-desc {
    display: block;
    max-width: 100%;
    text-align: left;
  }
}

/* ── Before/After grid ── */
@media (max-width: 768px) {
  .vs-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .vs-card {
    padding: 20px;
  }
}

/* ── Pricing grid ── */
@media (max-width: 768px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .pcard.pop {
    order: -1;
  }
}

/* ── Stats section ── */
@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .stat-num {
    font-size: clamp(28px, 7vw, 48px);
  }
}

/* ── Features grid ── */
@media (max-width: 768px) {
  .features-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* ── Integrations grid ── */
@media (max-width: 768px) {
  .int-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
}

/* ── Testimonials ── */
@media (max-width: 768px) {
  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ── Sim layout ── */
@media (max-width: 768px) {
  .sim-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .sim-card {
    padding: 16px;
  }
}

/* ── Footer ── */
@media (max-width: 768px) {
  .footer-top {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }
}

/* ── Section padding ── */
@media (max-width: 768px) {
  .section {
    padding: 48px 16px;
  }

  .container,
  .container-sm {
    padding: 0 16px;
  }

  .section-heading {
    font-size: clamp(24px, 6vw, 36px);
  }

  .section-sub {
    font-size: 14px;
  }
}

/* ── How-it-works grid ── */
@media (max-width: 768px) {
  .how-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ── Mobile sticky CTA ── */
.mobile-sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border-top: 1px solid #EEEAE5;
  z-index: 999;
}

.mobile-sticky-cta button {
  width: 100%;
  justify-content: center;
}

.btn-google {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 16px;
  border: 1.5px solid var(--gray-200);
  border-radius: 10px;
  background: #FCFBF9;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-700);
  cursor: pointer;
  margin-bottom: 16px;
  transition: all 0.15s;
  font-family: 'Sora', sans-serif;
}
.btn-google:hover {
  background: var(--gray-50);
  border-color: var(--gray-300);
}


/* ═══════════════════════════════════════════════════════════════
   Lexro — Dashboard CSS  (light theme)
   Usage: <link rel="stylesheet" href="assets/css/lexro-dashboard.css">
   ═══════════════════════════════════════════════════════════════ */

/* ── Dashboard section (reset handled by global) ── */

/* ── Stats Grid (dashboard 6-col) ─────────────────────────────── */
#stats-grid {
  display: grid;
 grid-template-columns: repeat(6, minmax(0, 1fr)); 
  gap: 12px;
  margin-bottom: 22px;
}

.stat-card {
  border: 1.5px solid #EEEAE5;
  border-radius: 16px;
  padding: 18px 16px;
  position: relative;
  overflow: hidden;
  transition: box-shadow .2s, transform .18s;
  cursor: default;
}
.stat-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent, #D88E72);
  border-radius: 0 0 4px 4px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.stat-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,.08); transform: translateY(-2px); }
.stat-card:hover::after { transform: scaleX(1); }

.stat-icon-wrap {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.stat-icon-wrap svg { width: 17px; height: 17px; fill: none; stroke-width: 2; }

.stat-num   { font-size: 26px; font-weight: 800; letter-spacing: -1px; color: #1A1816; font-family: 'JetBrains Mono', monospace; line-height: 1; }
.stat-label { font-size: 11px; color: #706B66; margin-top: 5px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }

/* ── Layout Grids ────────────────────────────────────────────── */
.dash-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.dash-grid-3 { display: grid; grid-template-columns: 1fr 2fr; gap: 16px; margin-bottom: 16px; }

/* ── Card ────────────────────────────────────────────────────── */
.card {
  background: #ffffff;
  border: 1.5px solid #EEEAE5;
  border-radius: 16px;
  padding: 20px;
}
.card-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 10px; }
.card-title { font-size: 13px; font-weight: 700; color: #1A1816; letter-spacing: .1px; }
.card-badge { font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 20px; letter-spacing: .3px; white-space: nowrap; }

/* ── Severity Bars ───────────────────────────────────────────── */
.sev-list { display: flex; flex-direction: column; gap: 11px; }
.sev-row  { display: flex; align-items: center; gap: 10px; }
.sev-label { font-size: 10.5px; font-weight: 700; width: 64px; flex-shrink: 0; text-transform: uppercase; letter-spacing: .3px; }
.sev-track { flex: 1; height: 7px; background: #F5F2EE; border-radius: 99px; overflow: hidden; }
.sev-fill  { height: 100%; border-radius: 99px; transition: width .8s cubic-bezier(.34,1.56,.64,1); }
.sev-count { font-size: 12px; font-weight: 800; width: 22px; text-align: right; font-family: 'JetBrains Mono', monospace; }

/* ── System Status ───────────────────────────────────────────── */
.status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.status-item {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 12px; border-radius: 12px;
  border: 1.5px solid #EEEAE5;
  text-decoration: none; transition: all .18s; cursor: pointer;
}
.status-item.ok   { border-color: #bbf7d0; background: #f0fdf4; }
.status-item.warn { border-color: #fed7aa; background: #fff7ed; }
.status-item:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.07); }

.status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.status-dot.green  { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.2); animation: statusPulse 2.5s infinite; }
.status-dot.orange { background: #f97316; box-shadow: 0 0 0 3px rgba(249,115,22,.2); }
@keyframes statusPulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(34,197,94,.2); }
  50%     { box-shadow: 0 0 0 6px rgba(34,197,94,.08); }
}
.status-name { font-size: 12px; font-weight: 600; color: #2B2926; }
.status-sub  { font-size: 10.5px; color: #A39E99; margin-top: 1px; }

/* ── Activity Timeline ───────────────────────────────────────── */
.timeline { padding: 4px 0; }
.tl-item  { display: flex; gap: 0; position: relative; }
.tl-spine { display: flex; flex-direction: column; align-items: center; width: 48px; flex-shrink: 0; }
.tl-dot-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 48px;
  flex-shrink: 0;
}

.tl-dot-inner {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  margin-top: 12px;
}

.tl-dot-inner svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: block;
}

/* Spine line */
.tl-spine {
  width: 48px !important;
  min-width: 48px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  overflow: visible !important;
}

.tl-dot {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  flex-shrink: 0 !important;
  margin-top: 12px !important;
}

.tl-dot svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
}
@keyframes tlPop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.tl-line   { width: 2px; flex: 1; min-height: 6px; background: linear-gradient(to bottom, #EEEAE5, transparent); margin-top: 3px; }
.tl-body   { flex: 1; padding: 12px 16px 14px 0; border-bottom: 1px solid #F8F6F3; }
.tl-item:last-child .tl-body { border-bottom: none; }
.tl-hd     { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.tl-label  { font-size: 14px; font-weight: 700; color: #1A1816; }
.tl-time   { font-size: 11px; color: #A39E99; margin-left: auto; font-family: 'JetBrains Mono', monospace; white-space: nowrap; }
.tl-detail { font-size: 12px; color: #706B66; line-height: 1.55; }
.tl-detail a       { color: #D88E72; text-decoration: none; font-weight: 600; }
.tl-detail a:hover { text-decoration: underline; }
.tl-empty  { padding: 40px 20px; text-align: center; color: #A39E99; font-size: 13px; }

/* ── Timeline chips ──────────────────────────────────────────── */
.tl-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.tl-chip {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 6px;
  background: #F8F6F3; color: #5C5752;
  border: 1px solid #EEEAE5; white-space: nowrap;
}
.tl-chip-mono     { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .3px; }
.tl-chip-link     { background: transparent; color: #D88E72; border-color: transparent; text-decoration: none; font-weight: 700; }
.tl-chip-link:hover { text-decoration: underline; }
.tl-chip-auto     { background: rgba(16,185,129,.1);  color: #059669; border-color: rgba(16,185,129,.25); }
.tl-chip-resolved { background: rgba(22,163,74,.1);   color: #16a34a; border-color: rgba(22,163,74,.25); }
.tl-chip-err      { background: rgba(220,38,38,.08);  color: #dc2626; border-color: rgba(220,38,38,.2);  }
.tl-chip-ver      { background: rgba(37,99,235,.1);   color: #D88E72; border-color: rgba(37,99,235,.2);  }
.tl-chip-conf-hi  { background: rgba(22,163,74,.08);  color: #16a34a; border-color: rgba(22,163,74,.2);  font-weight: 700; }
.tl-chip-conf-mid { background: rgba(217,119,6,.08);  color: #d97706; border-color: rgba(217,119,6,.2);  font-weight: 700; }
.tl-chip-conf-lo  { background: rgba(220,38,38,.08);  color: #dc2626; border-color: rgba(220,38,38,.2);  font-weight: 700; }
.tl-chip-sev[data-sev="CRITICAL"],.tl-chip-sev[data-sev="HIGH"]   { background: rgba(220,38,38,.08);  color: #dc2626; border-color: rgba(220,38,38,.2);  }
.tl-chip-sev[data-sev="MEDIUM"]  { background: rgba(245,158,11,.1);  color: #d97706; border-color: rgba(245,158,11,.2); }
.tl-chip-sev[data-sev="LOW"]     { background: rgba(34,197,94,.08);  color: #16a34a; border-color: rgba(34,197,94,.2);  }

/* ── Deployments ─────────────────────────────────────────────── */
.deploy-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 13px; border-radius: 11px;
  background: #FDFCFB; border: 1.5px solid #F5F2EE;
  margin-bottom: 8px; transition: all .15s;
}
.deploy-item:last-child { margin-bottom: 0; }
.deploy-item:hover { background: #FDF8F5; border-color: #D8C8D2; }
.deploy-ico { width: 34px; height: 34px; border-radius: 9px; background: rgba(99,102,241,.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.deploy-ico svg  { width: 14px; height: 14px; stroke: #9B6B8E; fill: none; stroke-width: 2; }
.deploy-name { font-size: 13px; font-weight: 600; color: #2B2926; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deploy-meta { font-size: 11px; color: #A39E99; margin-top: 1px; font-family: 'JetBrains Mono', monospace; }
.deploy-env  { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 5px; background: rgba(99,102,241,.1); color: #9B6B8E; flex-shrink: 0; }

/* ── Plan Usage ──────────────────────────────────────────────── */
.usage-plan   { font-size: 22px; font-weight: 800; color: #1A1816; font-family: 'JetBrains Mono', monospace; }
.usage-sub    { font-size: 12px; color: #A39E99; margin-top: 2px; margin-bottom: 16px; }
.usage-labels { display: flex; justify-content: space-between; font-size: 12px; color: #706B66; margin-bottom: 5px; }
.usage-track  { background: #F5F2EE; border-radius: 99px; height: 8px; overflow: hidden; }
.usage-fill   { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #D88E72, #9B6B8E); transition: width .9s cubic-bezier(.34,1.56,.64,1); }

/* ── Table ───────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 16px; border: 1.5px solid #EEEAE5; margin-bottom: 20px; }
table       { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th    { padding: 11px 16px; text-align: left; font-size: 10.5px; font-weight: 700; color: #A39E99; background: #FDFCFB; letter-spacing: .5px; text-transform: uppercase; border-bottom: 1px solid #EEEAE5; }
tbody td    { padding: 12px 16px; border-bottom: 1px solid #F8F6F3; color: #5C5752; vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr    { transition: background .12s; }
tbody tr:hover td { background: #FDFCFB; }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn-ghost {
  font-size: 11.5px; font-weight: 600; padding: 4px 10px;
  border: 1.5px solid #EEEAE5; border-radius: 7px;
  background: #FCFBF9; color: #5C5752;
  cursor: pointer; transition: all .15s;
  text-decoration: none; display: inline-block;
}
.btn-ghost:hover { border-color: #D88E72; color: #D88E72; }

.btn-primary {
  font-size: 12.5px; font-weight: 700; padding: 9px 18px;
  border: none; border-radius: 9px;
  background: #D88E72; color: #fff;
  cursor: pointer; transition: background .15s;
  text-decoration: none; display: inline-block;
}
.btn-primary:hover { background: #C97A5D; }

.btn-secondary {
  font-size: 11.5px; font-weight: 600; padding: 6px 14px;
  border: 1.5px solid #EEEAE5; border-radius: 8px;
  background: #FCFBF9; color: #5C5752;
  cursor: pointer; transition: all .15s;
  text-decoration: none; display: inline-block;
}
.btn-secondary:hover { border-color: #D88E72; color: #D88E72; }

.table-link { background: none; border: none; cursor: pointer; color: #2B2926; font-weight: 600; font-size: 13px; text-align: left; padding: 0; transition: color .15s; }
.table-link:hover { color: #D88E72; }

/* ── Badges ──────────────────────────────────────────────────── */
.badge { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 6px; letter-spacing: .2px; }

/* ── Skeleton Loader ─────────────────────────────────────────── */
.skel { background: linear-gradient(90deg, #F5F2EE 25%, #EEEAE5 50%, #F5F2EE 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 8px; height: 14px; }

/* ── Empty State ─────────────────────────────────────────────── */
.empty        { padding: 40px 24px; text-align: center; }
.empty-ico    { width: 48px; height: 48px; margin: 0 auto 14px; background: #F5F2EE; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.empty-ico svg { width: 22px; height: 22px; stroke: #A39E99; fill: none; stroke-width: 2; }
.empty-title  { font-size: 14px; font-weight: 700; color: #5C5752; margin-bottom: 6px; }
.empty-desc   { font-size: 12.5px; color: #A39E99; max-width: 340px; margin: 0 auto 16px; line-height: 1.65; }

/* ── Section Header ──────────────────────────────────────────── */
.section-hd    { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.section-title { font-size: 14px; font-weight: 700; color: #1A1816; }

/* ── Header Badge ────────────────────────────────────────────── */
.header-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  padding: 5px 12px; border-radius: 99px;
  background: #f0fdf4; color: #15803d;
  border: 1.5px solid #bbf7d0;
}
.header-badge .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #16a34a; flex-shrink: 0;
  animation: pulseDot 2s infinite;
}
@keyframes pulseDot {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: .5; transform: scale(.8); }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

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

@media (max-width: 768px) {
  .page-content { padding: 12px !important; }
  .card         { padding: 14px !important; }
  .stats-grid, #stats-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 14px !important;
}
  .dash-grid, .dash-grid-3 { grid-template-columns: 1fr !important; }
  .status-grid             { grid-template-columns: 1fr 1fr; }
  .stat-num                { font-size: 22px; }
  .header-badge            { display: none; }
  table th:nth-child(2), table td:nth-child(2),
  table th:nth-child(5), table td:nth-child(5) { display: none; }
}

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

/* ── Recent Incidents Mobile Cards ── */
@media (max-width: 640px) {
  .dash-recent-table   { display: none !important; }
  .recent-card-list    { display: flex !important; flex-direction: column; gap: 10px; margin-bottom: 20px; }

  .ri-card {
    background: #FCFBF9; border: 1.5px solid #EEEAE5;
    border-radius: 14px; padding: 14px 16px;
    border-left: 4px solid #EEEAE5; cursor: pointer;
    transition: box-shadow .15s;
  }
  .ri-card[data-sev="CRITICAL"] { border-left-color: #ef4444; }
  .ri-card[data-sev="HIGH"]     { border-left-color: #f97316; }
  .ri-card[data-sev="MEDIUM"]   { border-left-color: #f59e0b; }
  .ri-card[data-sev="LOW"]      { border-left-color: #22c55e; }

  .ri-card-title-row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
  .ri-card-title { font-size: 13.5px; font-weight: 700; color: #2B2926; line-height: 1.4; flex: 1; }

  .ri-card-meta {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    font-size: 11.5px; color: #A39E99;
    font-family: 'JetBrains Mono', monospace; margin-bottom: 10px;
  }
  .ri-card-meta-sep { color: #D4D0CB; }

  .ri-card-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 10px; border-top: 1px solid #F5F2EE;
  }
  .ri-card-badges { display: flex; gap: 6px; flex-wrap: wrap; }
}

@media (min-width: 641px) {
  .recent-card-list { display: none !important; }
}

/* ── Timeline Overflow Fix ───────────────────────────────────── */
.tl-body {
  min-width: 0;
  overflow: hidden;
}

.tl-hd {
  flex-wrap: wrap;
}

.tl-detail {
  word-break: break-word;
  overflow-wrap: break-word;
}

.tl-chips {
  flex-wrap: wrap;
}

@media (max-width: 480px) {
  .tl-time {
    margin-left: 0 !important;
    width: 100%;
  }
  .tl-spine { width: 38px; }
  .tl-dot   { width: 28px; height: 28px; }
  .tl-dot svg { width: 12px; height: 12px; }
  .tl-body  { padding: 10px 10px 12px 0; }
  .tl-label { font-size: 13px; }
  .tl-detail { font-size: 11.5px; }
}

.tl-body {
  padding: 14px 16px 16px 0;
}

.tl-label {
  font-size: 13.5px;
  font-weight: 700;
  color: #1A1816;
}


.tl-detail {
  font-size: 12.5px;
  color: #706B66;
  line-height: 1.6;
  margin-top: 4px;
  margin-bottom: 8px;
}

.tl-chips {
  gap: 5px;
  margin-top: 6px;
}

.tl-chip {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 6px;
}

/* ── Attention Banner ── */
.attention-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff7ed;
  border: 1.5px solid #fed7aa;
  border-left: 4px solid #f97316;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
}

.attention-banner-icon {
  width: 32px; height: 32px;
  background: rgba(249,115,22,.12);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.attention-banner-text { flex: 1; font-size: 13px; color: #92400e; font-weight: 500; }
.attention-banner-text strong { font-weight: 700; color: #7c2d12; }
.attention-banner-link {
  font-size: 12px; font-weight: 700; color: #ea580c;
  text-decoration: none; white-space: nowrap;
  padding: 5px 12px; border: 1.5px solid #fed7aa;
  border-radius: 7px; background: #FCFBF9;
  transition: all .15s;
}
.attention-banner-link:hover { background: #fff7ed; }

/* ── Insight Strip ── */
.insight-strip {
  display: flex;
  align-items: center;
  background: #FCFBF9;
  border: 1.5px solid #EEEAE5;
  border-radius: 12px;
  padding: 12px 20px;
  margin-bottom: 16px;
  gap: 0;
  flex-wrap: wrap;
}

.insight-item {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 180px;
  padding: 4px 0;
}

.insight-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.insight-text {
  font-size: 12.5px;
  color: #4A4541;
  line-height: 1.5;
  font-weight: 500;
}

.insight-text strong { color: #1A1816; font-weight: 700; }

.insight-divider {
  width: 1px;
  height: 32px;
  background: #EEEAE5;
  margin: 0 20px;
  flex-shrink: 0;
}

/* ── Top Services ── */
.svc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.svc-row:last-child { margin-bottom: 0; }

.svc-rank {
  font-size: 10px;
  font-weight: 800;
  color: #A39E99;
  width: 16px;
  flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace;
}

.svc-name {
  font-size: 12.5px;
  font-weight: 600;
  color: #2B2926;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.svc-track {
  width: 80px;
  height: 6px;
  background: #F8F6F3;
  border-radius: 99px;
  overflow: hidden;
  flex-shrink: 0;
}

.svc-fill {
  height: 100%;
  border-radius: 99px;
  background: #D88E72;
  transition: width .8s cubic-bezier(.34,1.56,.64,1);
}

.svc-count {
  font-size: 12px;
  font-weight: 700;
  color: #4A4541;
  font-family: 'JetBrains Mono', monospace;
  width: 20px;
  text-align: right;
  flex-shrink: 0;
}

.svc-badge-sev {
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}

/* ── AI Coverage ── */
.ai-cov-ring-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}

.ai-cov-ring {
  position: relative;
  width: 72px; height: 72px;
  flex-shrink: 0;
}

.ai-cov-ring svg {
  position: absolute; top: 0; left: 0;
  transform: rotate(-90deg);
}

.ai-cov-pct {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800;
  color: #1A1816;
  font-family: 'JetBrains Mono', monospace;
}

.ai-cov-stats { flex: 1; display: flex; flex-direction: column; gap: 6px; }

.ai-cov-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.ai-cov-stat-label { color: #706B66; }
.ai-cov-stat-val { font-weight: 700; color: #1A1816; font-family: 'JetBrains Mono', monospace; }

@media (max-width: 768px) {
  .stats-grid {
    display: none !important;
  }
}


   /* ═══════════════════════════════════════
      LEXRO — COLLAPSIBLE SIDEBAR
   ═══════════════════════════════════════ */
   /* shell */
   .sidebar {
     position: fixed !important; top:0; left:0; bottom:0;
     width: var(--sb-w) !important;
     background: var(--sb-bg) !important;
     border-right: 1px solid var(--sb-border) !important;
     display: flex !important; flex-direction: column !important;
     z-index: 100 !important; overflow: hidden !important;
     transition: width var(--sb-tr) !important;
   }
   
   .logo-text {
     color: #F8F6F3 !important; font-size: 16px !important; font-weight: 800 !important;
     white-space: nowrap !important; letter-spacing: -.3px !important;
     transition: opacity var(--sb-tr), transform var(--sb-tr) !important;
   }
   
   .user-card {
     display: flex !important; align-items: center !important; gap: 10px !important;
     padding: 8px !important; border-radius: 10px !important; margin-bottom: 6px !important;
     transition: background .15s !important; cursor: default !important; overflow: hidden !important;
   }
   .user-card:hover { background: rgba(255,255,255,.04) !important; }
   .user-avatar { flex-shrink: 0 !important; }
   .user-name  { color: #dde4f0 !important; font-size: 13px !important; font-weight: 600 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
   .user-email { color: #445570 !important; font-size: 11px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
   /* layout shift */
   .main-wrapper { margin-left: var(--sb-w) !important; transition: margin-left var(--sb-tr) !important; }
   .top-header   { left: var(--sb-w) !important;   transition: left var(--sb-tr) !important; }
   body.sb-collapsed .main-wrapper { margin-left: var(--sb-w-col) !important; }
   body.sb-collapsed .top-header   { left: var(--sb-w-col) !important; }

   /* mobile */
   @media(max-width:768px) {
     .sidebar { transform: translateX(-100%) !important; width: var(--sb-w) !important; transition: transform var(--sb-tr) !important; }
     .sidebar.mobile-open { transform: translateX(0) !important; }
     .sidebar.sb-col { width: var(--sb-w) !important; }
     .sidebar.mobile-open .logo-text, .sidebar.mobile-open .nav-label,
     .sidebar.mobile-open .sb-user-info, .sidebar.mobile-open .sb-lo-txt { opacity:1 !important; transform:none !important; }
     .main-wrapper, .top-header { margin-left:0 !important; left:0 !important; }
     body.sb-collapsed .main-wrapper, body.sb-collapsed .top-header { margin-left:0 !important; left:0 !important; }
     .sb-tog { display: none !important; }
   }

   /* ── Sidebar redesign ── */
   .top-header { border-bottom: 1px solid #EEEAE5; }
   .menu-toggle svg { stroke: #706B66; }

   /* ── Base ── */
   .main-wrapper { overflow-x: hidden; min-width: 0; }

   /* ── Page header strip ── */
   .inc-header-bar {
     display: flex; align-items: center; gap: 12px;
     background: linear-gradient(135deg, #D88E72 0%, #9B6B8E 100%);
     border-radius: 14px; padding: 18px 22px; margin-bottom: 18px;
     color: #fff;
   }
   .inc-header-icon {
     width: 44px; height: 44px; background: rgba(255,255,255,.15);
     border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
   }
   .inc-header-icon svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.8; }
   .inc-header-title { font-size: 17px; font-weight: 700; }
   .inc-header-sub { font-size: 12.5px; opacity: .75; margin-top: 2px; }
   .inc-header-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

   /* ── Auto-monitor banner ── */
   .monitor-banner {
     display: flex; align-items: center; gap: 10px;
     background: rgba(16,185,129,.06); border: 1px solid rgba(16,185,129,.18);
     border-radius: 10px; padding: 10px 16px; margin-bottom: 16px;
   }
   .monitor-pulse { width: 8px; height: 8px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.2); flex-shrink: 0; animation: mpulse 2s infinite; }
   @keyframes mpulse { 0%,100%{box-shadow:0 0 0 3px rgba(16,185,129,.18)}50%{box-shadow:0 0 0 7px rgba(16,185,129,.05)} }
   .auto-badge { background: rgba(16,185,129,.12); color: #059669; padding: 1px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; }

   /* ── Table card ── */
   .table-card {
     background: #FCFBF9; border: 1.5px solid #EEEAE5;
     border-radius: 16px; overflow: hidden; margin-bottom: 4px;
   }

   /* ── Toolbar ── */
   .toolbar {
     display: flex; align-items: center; gap: 10px;
     padding: 14px 16px; border-bottom: 1px solid #F8F6F3;
     flex-wrap: wrap;
   }
   .filter-tabs {
     display: flex; gap: 4px;
     background: #FDFCFB; border-radius: 10px; padding: 3px;
     overflow-x: auto; scrollbar-width: none; flex-shrink: 0;
   }
   .filter-tabs::-webkit-scrollbar { display: none; }
   .ftab {
     padding: 6px 13px; font-size: 12.5px; font-weight: 600;
     border-radius: 7px; border: none; background: transparent;
     color: #706B66; cursor: pointer; white-space: nowrap;
     transition: all .18s;
   }
   .ftab:hover { color: #4A4541; background: rgba(0,0,0,.04); }
   .ftab.active { background: #FCFBF9; color: #D88E72; box-shadow: 0 1px 4px rgba(0,0,0,.1); }
   .toolbar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
   .search-box {
     display: flex; align-items: center; gap: 8px;
     background: #FDFCFB; border: 1.5px solid #EEEAE5;
     border-radius: 9px; padding: 7px 12px;
     transition: border-color .18s;
   }
   .search-box:focus-within { border-color: #D88E72; background: #FCFBF9; }
   .search-box svg { width: 14px; height: 14px; stroke: #A39E99; fill: none; stroke-width: 2; flex-shrink: 0; }
   .search-box input { border: none; background: transparent; font-size: 13px; color: #4A4541; outline: none; width: 200px; font-family: 'Sora', sans-serif; }
   .search-box input::placeholder { color: #A39E99; }
   .sev-select {
     height: 36px; border: 1.5px solid #EEEAE5; border-radius: 9px;
     font-size: 12.5px; font-weight: 600; color: #4A4541;
     background: #FDFCFB; padding: 0 10px; outline: none; cursor: pointer;
     font-family: 'Sora', sans-serif; transition: border-color .18s;
   }
   .sev-select:focus { border-color: #D88E72; }

   /* ── Table ── */
   table { width: 100%; border-collapse: collapse; font-size: 13px; }
   thead th {
     padding: 11px 16px; text-align: left;
     font-size: 10.5px; font-weight: 700; color: #A39E99;
     background: #FDFCFB; letter-spacing: .5px; text-transform: uppercase;
     border-bottom: 1px solid #EEEAE5;
   }
   tbody td { padding: 13px 16px; border-bottom: 1px solid #F5F2EE; color: #4A4541; vertical-align: middle; }
   tbody tr:last-child td { border-bottom: none; }
   tbody tr { transition: background .1s; }
   tbody tr:hover td { background: #FDFCFB; }
   .table-link { background: none; border: none; cursor: pointer; color: #2B2926; font-weight: 600; font-size: 13px; text-align: left; padding: 0; font-family: 'Sora', sans-serif; transition: color .15s; }
   .table-link:hover { color: #D88E72; }
   .auto-chip { background: rgba(16,185,129,.12); color: #059669; padding: 1px 7px; border-radius: 4px; font-size: 10px; font-weight: 700; margin-left: 6px; }

   /* ── Pagination ── */
   .pagination {
     display: flex; align-items: center; justify-content: space-between;
     padding: 14px 18px; border-top: 1px solid #F8F6F3;
     gap: 12px; flex-wrap: wrap;
   }
   .page-info { font-size: 12.5px; color: #706B66; font-weight: 500; }
   .page-info strong { color: #4A4541; }
   .page-btns { display: flex; gap: 4px; align-items: center; }
   .page-btn {
     min-width: 32px; height: 32px; padding: 0 10px;
     border: 1.5px solid #EEEAE5; border-radius: 8px;
     background: #FCFBF9; color: #4A4541; font-size: 12.5px; font-weight: 600;
     cursor: pointer; transition: all .15s; display: flex; align-items: center; justify-content: center;
     font-family: 'Sora', sans-serif;
   }
   .page-btn:hover:not(:disabled) { border-color: #D88E72; color: #D88E72; }
   .page-btn.active { background: #D88E72; border-color: #D88E72; color: #fff; }
   .page-btn:disabled { opacity: .35; cursor: not-allowed; }
   .page-btn svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.5; }
   .page-dots { color: #A39E99; font-size: 13px; padding: 0 4px; }
   .per-page-wrap { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #706B66; }
   .per-page-sel { border: 1.5px solid #EEEAE5; border-radius: 7px; padding: 4px 8px; font-size: 12px; color: #4A4541; background: #FCFBF9; cursor: pointer; outline: none; font-family: 'Sora', sans-serif; }

   /* ── Buttons ── */
   .btn-primary { font-size: 12.5px; font-weight: 700; padding: 9px 18px; border: none; border-radius: 9px; background: #D88E72; color: #fff; cursor: pointer; transition: background .15s; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
   .btn-primary:hover { background: #C97A5D; }
   .btn-primary svg { width: 14px; height: 14px; stroke: #fff; fill: none; stroke-width: 2.5; }
   .btn-secondary { font-size: 12px; font-weight: 600; padding: 7px 14px; border: 1.5px solid #EEEAE5; border-radius: 8px; background: #FCFBF9; color: #4A4541; cursor: pointer; transition: all .15s; display: inline-flex; align-items: center; gap: 6px; }
   .btn-secondary:hover { border-color: #D88E72; color: #D88E72; }
   .btn-icon { width: 32px; height: 32px; border: 1.5px solid #EEEAE5; border-radius: 8px; background: #FCFBF9; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; }
   .btn-icon svg { width: 14px; height: 14px; fill: none; stroke: #706B66; stroke-width: 2; }
   .btn-icon:hover { border-color: #D88E72; }
   .btn-icon:hover svg { stroke: #D88E72; }
   .btn-danger { font-size: 12px; font-weight: 600; padding: 6px 12px; border: 1.5px solid #fecaca; border-radius: 8px; background: #fff5f5; color: #ef4444; cursor: pointer; transition: all .15s; display: inline-flex; align-items: center; gap: 5px; }
   .btn-danger:hover { background: #fef2f2; border-color: #ef4444; }

   /* ── Empty state ── */
   .empty { padding: 48px 24px; text-align: center; }
   .empty-ico { width: 52px; height: 52px; margin: 0 auto 14px; background: #F5F2EE; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
   .empty-ico svg { width: 24px; height: 24px; stroke: #A39E99; fill: none; stroke-width: 1.8; }
   .empty-title { font-size: 15px; font-weight: 700; color: #4A4541; margin-bottom: 7px; }
   .empty-desc { font-size: 13px; color: #A39E99; max-width: 360px; margin: 0 auto 18px; line-height: 1.65; }

   /* ── Skeleton ── */
   .skel { background: linear-gradient(90deg,#F5F2EE 25%,#eaebee 50%,#F5F2EE 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 7px; }

   /* ── Modal ── */
   .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
   
   /* ── Mobile ── */
   @media(max-width:768px) {
     .page-content { padding: 12px !important; }
     .inc-header-bar { flex-wrap: wrap; padding: 14px 16px; }
     .inc-header-right { width: 100%; }
     .inc-header-right .btn-primary { width: 100%; justify-content: center; }
     .toolbar { flex-direction: column; align-items: stretch; padding: 12px; }
     .toolbar-right { margin-left: 0; }
     .search-box input { width: 100%; }
     .search-box { flex: 1; }
     .toolbar-right { flex-wrap: wrap; }
     table th:nth-child(2), table td:nth-child(2),
     table th:nth-child(3), table td:nth-child(3) { display: none; }
     table { font-size: 12px; }
     td, th { padding: 10px 10px !important; }
     .pagination { flex-direction: column; align-items: stretch; }
     .page-btns { justify-content: center; }
     .per-page-wrap { justify-content: center; }
     .form-row { grid-template-columns: 1fr; }
     .modal { align-items: flex-end !important; padding: 0 !important; }
     .modal-box { border-radius: 16px 16px 0 0 !important; max-width: 100% !important; max-height: 90vh; overflow-y: auto; }
     .modal-footer { flex-direction: column-reverse; gap: 8px; }
     .modal-footer .btn { width: 100%; justify-content: center; }
     
   }

@media (max-width: 640px) {
  .monitor-banner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    padding: 12px 14px !important;
  }
  .monitor-banner > span:last-child {
    margin-left: 0 !important;
    width: 100%;
  }
}

@media (min-width: 641px) {
  .monitor-banner > span:last-child {
    margin-left: auto;
  }
}

@media(max-width:768px) {
  .monitor-banner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }
  .monitor-banner > span:last-child {
    margin-left: 0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Incidents — Mobile Card Layout
   Desktop: normal table | Mobile (≤640px): each row = card
   Add this to incidents.html <style> block ya separate file mein
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

  /* ── Hide desktop table ── */
  .incidents-table-wrap { display: none !important; }

  /* ── Show card list ── */
  .incidents-card-list { display: flex !important; flex-direction: column; gap: 10px; padding: 12px; }

  /* ── Each card ── */
  .inc-card {
    background: #FCFBF9;
    border: 1.5px solid #EEEAE5;
    border-radius: 14px;
    padding: 14px 16px;
    border-left: 4px solid #EEEAE5;
    transition: box-shadow .15s;
  }
  .inc-card:active { box-shadow: 0 4px 16px rgba(0,0,0,.08); }

  /* Severity border color */
  .inc-card[data-sev="CRITICAL"] { border-left-color: #ef4444; }
  .inc-card[data-sev="HIGH"]     { border-left-color: #f97316; }
  .inc-card[data-sev="MEDIUM"]   { border-left-color: #f59e0b; }
  .inc-card[data-sev="LOW"]      { border-left-color: #22c55e; }

  /* ── Card top row: title + AUTO badge ── */
  .inc-card-title-row {
    display: flex; align-items: flex-start; gap: 8px;
    margin-bottom: 10px;
  }
  .inc-card-title {
    font-size: 13.5px; font-weight: 700; color: #2B2926;
    line-height: 1.4; flex: 1;
    cursor: pointer;
  }
  .inc-card-title:hover { color: #D88E72; }

  /* ── Meta row: service · env · time ── */
  .inc-card-meta {
    display: flex; align-items: center; gap: 8px;
    font-size: 11.5px; color: #A39E99;
    font-family: 'JetBrains Mono', monospace;
    margin-bottom: 10px; flex-wrap: wrap;
  }
  .inc-card-meta-sep { color: #D4D0CB; }

  /* ── Badges row: severity + status ── */
  .inc-card-badges {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 12px; flex-wrap: wrap;
  }

  /* ── Actions row ── */
  .inc-card-actions {
    display: flex; gap: 8px; border-top: 1px solid #F5F2EE;
    padding-top: 10px; margin-top: 2px;
  }
  .inc-card-actions .btn-icon {
    flex: 1; height: 34px; border-radius: 9px;
    justify-content: center;
    font-size: 11px; font-weight: 600; color: #706B66;
    display: flex; align-items: center; gap: 5px;
  }
  .inc-card-actions .btn-icon span { font-family: 'Sora', sans-serif; }
}

/* Desktop: hide card list */
@media (min-width: 641px) {
  .incidents-card-list { display: none !important; }
  .incidents-table-wrap { display: block !important; }
}

/* ══════════════════════════════════════════════
   incidents-details.min.css
   Complete mobile-responsive stylesheet for Incident Detail page
   ══════════════════════════════════════════════ */

/* ── RESET & BASE ── */


.main-wrapper {
  overflow-x: hidden;
  min-width: 0;
  max-width: 100%;
}

/* ══════════════════════════════════════════════
   INCIDENT HEADER CARD
══════════════════════════════════════════════ */
/* ══════════════════════════════════════════════
   INCIDENT HEADER CARD — REDESIGNED
══════════════════════════════════════════════ */
.incident-header-card {
  border: 1.5px solid #EEEAE5 !important;
  border-left: 4px solid #D88E72 !important;
  border-radius: 14px !important;
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff 0%, #FDFCFB 100%);
  box-shadow: 0 2px 12px rgba(29, 78, 216, 0.06);
}

/* ── Top row: chips left, buttons right ── */
.inc-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.inc-top-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}

/* ── Title — single line with ellipsis on mobile ── */
.inc-main-title {
  font-size: 18px;
  font-weight: 800;
  color: #1A1816;
  line-height: 1.35;
  margin: 10px 0 4px;
  /* Let it wrap naturally but look intentional */
  word-break: break-word;
  overflow-wrap: break-word;
  letter-spacing: -0.3px;
}

/* Title — highlight the file:line part */
.inc-main-title .inc-title-location {
  color: #D88E72;
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px;
  font-weight: 700;
  background: #FDF8F5;
  padding: 1px 7px;
  border-radius: 5px;
  margin-left: 4px;
  white-space: nowrap;
}

.inc-subtitle {
  font-size: 12.5px;
  color: #706B66;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.inc-subtitle-dot {
  color: #D4D0CB;
  font-size: 10px;
}

/* ── Chips ── */
.inc-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  border: 1.5px solid;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

/* ── Action buttons ── */
.analyze-btn-wrap {
  display: flex;
  gap: 7px;
  align-items: center;
  flex-shrink: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.analyze-btn-wrap::-webkit-scrollbar { display: none; }

.analyze-btn-wrap .btn {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 12.5px !important;
  height: 34px !important;
  padding: 0 14px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}

/* ── Meta row ── */
.detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 12px 0 0;
  border-top: 1px solid #EEEAE5;
  margin-top: 14px;
}

.detail-meta-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 28px 0 0;
  position: relative;
  min-width: 0;
}

.detail-meta-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 2px;
  height: calc(100% - 4px);
  width: 1px;
  background: #EEEAE5;
}

.detail-meta-label {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #A39E99;
  font-weight: 700;
}

.detail-meta-value {
  font-size: 13px;
  color: #2B2926;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ══════ MOBILE ══════ */
@media (max-width: 768px) {
  .incident-header-card {
    border-left-width: 3px !important;
  }

  .inc-header-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .inc-top-chips { width: 100%; }

  .analyze-btn-wrap {
    width: 100%;
    overflow-x: auto;
  }

  .analyze-btn-wrap .btn {
    font-size: 11.5px !important;
    padding: 0 10px !important;
    height: 32px !important;
  }

  .inc-main-title {
    font-size: 16px;
  }

  .inc-main-title .inc-title-location {
    font-size: 13px;
  }

  .detail-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding-top: 12px;
  }

  .detail-meta-item {
    padding: 0;
    min-width: 0;
  }

  .detail-meta-item:not(:last-child)::after { display: none; }
}

@media (max-width: 480px) {
  .inc-main-title { font-size: 14.5px; letter-spacing: -0.2px; }
  .inc-main-title .inc-title-location { font-size: 12px; }
}

/* ══════════════════════════════════════════════
   TABS
══════════════════════════════════════════════ */
.tab-nav {
  display: flex;
  gap: 2px;
  border-bottom: 2px solid #F8F6F3;
  margin-bottom: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.tab-nav::-webkit-scrollbar { display: none; }

.tab-btn {
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-500);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
  flex-shrink: 0;
}

.tab-btn:hover { color: var(--gray-700); }

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

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

/* ══════════════════════════════════════════════
   AI ANALYSIS STATUS BAR
══════════════════════════════════════════════ */
.ai-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px;
  background: #FDFCFB;
  border: 1px solid #EEEAE5;
  border-radius: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.ai-status-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

.ai-model-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #FDF8F5;
  color: #D88E72;
  border: 1px solid #F6E4DA;
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}

.ai-status-title {
  font-size: 13px;
  font-weight: 600;
  color: #4A4541;
}

.ai-gen-time {
  font-size: 11px;
  color: #A39E99;
  font-family: var(--font-mono);
  white-space: nowrap;
}

/* ══════════════════════════════════════════════
   IMPACT BANNER
══════════════════════════════════════════════ */
.rca-impact-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #FCF5F9;
  border: 1px solid #F0E3EC;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
}

.rca-impact-banner-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #9B6B8E;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rca-impact-inner { flex: 1; min-width: 0; }

.rca-impact-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #9B6B8E;
  margin-bottom: 5px;
}

.rca-impact-text {
  font-size: 13.5px;
  color: #5C3350;
  line-height: 1.65;
  font-weight: 500;
  word-break: break-word;
}

/* ══════════════════════════════════════════════
   METRICS STRIP
══════════════════════════════════════════════ */
.inc-metrics-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.metric-card {
  background: #FCFBF9;
  border: 1.5px solid #EEEAE5;
  border-radius: 12px;
  padding: 16px 18px;
  min-width: 0;
}

.metric-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #A39E99;
  margin-bottom: 8px;
}

.metric-value {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
  color: #1A1816;
  margin-bottom: 5px;
}

.metric-value.red { color: #dc2626; }
.metric-value.orange { color: #ea580c; }
.metric-value.green { color: #16a34a; }

.metric-sub {
  font-size: 11.5px;
  color: #A39E99;
  display: flex;
  align-items: center;
  gap: 3px;
}

.metric-up-arrow { color: #dc2626; font-weight: 700; }

/* ══════════════════════════════════════════════
   RCA GRID
══════════════════════════════════════════════ */
.rca-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.rca-grid > .card,
.rca-right-col {
  min-width: 0;
  overflow: hidden;
}

/* ── Root cause callout ── */
.rca-root-cause-callout {
  background: linear-gradient(135deg, #FDF8F5 0%, #F8F3F6 100%);
  border: 1px solid #F6E4DA;
  border-left: 4px solid #D88E72;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 4px;
  overflow: hidden;
}

.rca-root-cause-text {
  font-size: 14px;
  font-weight: 600;
  color: #7A3F2B;
  line-height: 1.7;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}

/* ── RCA Sections ── */
.rca-section { margin-bottom: 22px; }

.rca-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gray-400);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.rca-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ── Steps list ── */
.rca-steps-wrap { counter-reset: rca-step; }

.rca-steps-list {
  padding-left: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rca-steps-list li {
  position: relative;
  padding: 10px 12px 10px 42px;
  margin-bottom: 0;
  font-size: 13px;
  color: #4A4541;
  line-height: 1.65;
  background: #fafafa;
  border: 1px solid #F5F2EE;
  border-radius: 8px;
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
  max-width: 100%;
  transition: background .15s, border-color .15s;
}

.rca-steps-list li:hover {
  background: #FDF8F5;
  border-color: #F6E4DA;
}

.rca-steps-list li::before {
  content: counter(rca-step);
  counter-increment: rca-step;
  position: absolute;
  left: 10px;
  top: 10px;
  width: 20px;
  height: 20px;
  background: #D88E72;
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ── Fix suggestion ── */
.rca-fix-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid #F8F6F3;
}

.fix-block {
  background: #FDFCFB;
  border: 1px solid #EEEAE5;
  border-left: 3px solid var(--blue-500);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 16px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--gray-700);
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  overflow-x: auto;
}

/* ── File pills ── */
.file-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  overflow: hidden;
}

.file-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #FDF8F5;
  color: #8B4C35;
  border: 1px solid #F6E4DA;
  border-radius: 6px;
  padding: 2px 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
}

/* ══════════════════════════════════════════════
   CONFIDENCE RING
══════════════════════════════════════════════ */
.conf-card-inner {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.conf-ring-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.conf-ring-wrap {
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

.conf-ring-wrap svg {
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(-90deg);
}

.conf-ring-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 800;
  color: #1A1816;
  font-family: 'JetBrains Mono', monospace;
}

.conf-right {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.conf-hi-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 20px;
  padding: 4px 11px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 8px;
}

.conf-hi-badge.hi { background: #f0fdf4; color: #16a34a; border: 1.5px solid #bbf7d0; }
.conf-hi-badge.mid { background: #fffbeb; color: #d97706; border: 1.5px solid #fde68a; }
.conf-hi-badge.lo { background: #fef2f2; color: #dc2626; border: 1.5px solid #fecaca; }

.conf-desc {
  font-size: 12.5px;
  color: #5C5752;
  line-height: 1.55;
  word-break: break-word;
}

/* ══════════════════════════════════════════════
   GIT BLAME CARD
══════════════════════════════════════════════ */
.rca-blame-card { border-left: 3px solid #fecaca !important; }

.rca-blame-box {
  background: #fff5f5;
  border: 1px solid #fecaca;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  overflow: hidden;
}

.rca-blame-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.rca-blame-author {
  font-size: 14px;
  font-weight: 700;
  color: #dc2626;
  word-break: break-all;
}

.rca-blame-lines {
  font-size: 11.5px;
  font-family: var(--font-mono);
  color: #706B66;
  background: #F5F2EE;
  border: 1px solid #EEEAE5;
  padding: 2px 8px;
  border-radius: 4px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#rca-blame-detail {
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}

/* ══════════════════════════════════════════════
   SUSPECTED COMMITS
══════════════════════════════════════════════ */
.susp-commits-section {
  background: #FCFBF9;
  border: 1.5px solid #EEEAE5;
  border-radius: 14px;
  padding: 18px 20px;
  margin-top: 16px;
}

.susp-commits-title {
  font-size: 13px;
  font-weight: 700;
  color: #1A1816;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.commit-card {
  background: #FCFBF9;
  border: 1.5px solid #EEEAE5;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
}

.commit-card:last-child { margin-bottom: 0; }

.commit-card-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: #FDFCFB;
  border-bottom: 1px solid #EEEAE5;
}

.commit-card-hash {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  background: #FDF8F5;
  color: #D88E72;
  padding: 2px 9px;
  border-radius: 5px;
  border: 1px solid #F6E4DA;
  font-weight: 600;
  cursor: default;
  flex-shrink: 0;
}

.commit-badge-primary {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 4px;
  background: #fff1f2;
  color: #e11d48;
  border: 1px solid #fecdd3;
  flex-shrink: 0;
}

.commit-card-author {
  font-size: 11.5px;
  color: #A39E99;
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.commit-card-body {
  padding: 12px 16px;
  border-bottom: 1px solid #F8F6F3;
}

.commit-card-msg {
  font-size: 13px;
  font-weight: 600;
  color: #2B2926;
  margin-bottom: 10px;
  line-height: 1.45;
  word-break: break-word;
}

.commit-card-stats {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.commit-stat-add { font-size: 11.5px; font-weight: 700; color: #16a34a; font-family: 'JetBrains Mono', monospace; }
.commit-stat-del { font-size: 11.5px; font-weight: 700; color: #dc2626; font-family: 'JetBrains Mono', monospace; }
.commit-stat-files { font-size: 11.5px; color: #A39E99; }

.commit-card-foot {
  padding: 10px 16px;
  display: flex;
  justify-content: flex-end;
}

.commit-view-diff-btn {
  font-size: 12px;
  font-weight: 600;
  color: #D88E72;
  background: #FCFBF9;
  border: 1.5px solid #F6E4DA;
  border-radius: 8px;
  padding: 5px 14px;
  cursor: pointer;
  transition: background .15s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
}

.commit-view-diff-btn:hover { background: #FDF8F5; }

/* ══════════════════════════════════════════════
   AI EVENT TIMELINE
══════════════════════════════════════════════ */
.ai-evtl-section {
  background: #FCFBF9;
  border: 1.5px solid #EEEAE5;
  border-radius: 14px;
  padding: 18px 20px;
  margin-top: 16px;
}

.ai-evtl-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 8px;
}

.ai-evtl-title {
  font-size: 13px;
  font-weight: 700;
  color: #1A1816;
  display: flex;
  align-items: center;
  gap: 7px;
}

.ai-evtl-sub { font-size: 11.5px; color: #A39E99; }

.ai-evtl-item {
  display: flex;
  gap: 0;
  margin-bottom: 18px;
}

.ai-evtl-item:last-child { margin-bottom: 0; }

.ai-evtl-time-col {
  width: 56px;
  flex-shrink: 0;
  font-size: 10.5px;
  font-family: 'JetBrains Mono', monospace;
  color: #A39E99;
  font-weight: 600;
  padding-top: 2px;
  white-space: pre;
  line-height: 1.4;
}

.ai-evtl-dot-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 24px;
  flex-shrink: 0;
}

.ai-evtl-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #D4D0CB;
  background: #FCFBF9;
  flex-shrink: 0;
  margin-top: 2px;
}

.ai-evtl-line {
  width: 2px;
  flex: 1;
  background: #EEEAE5;
  margin: 4px 0;
  min-height: 12px;
}

.ai-evtl-content {
  flex: 1;
  padding-left: 10px;
  min-width: 0;
}

.ai-evtl-event {
  font-size: 13px;
  font-weight: 600;
  color: #2B2926;
  margin-bottom: 3px;
  word-break: break-word;
}

.ai-evtl-detail {
  font-size: 12px;
  color: #706B66;
  line-height: 1.5;
  word-break: break-all;
  overflow-wrap: anywhere;
}

/* ══════════════════════════════════════════════
   COMMIT DIFFS TAB
══════════════════════════════════════════════ */
.commit-box {
  background: #FCFBF9;
  border: 1px solid #EEEAE5;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}

.commit-header {
  padding: 12px 16px;
  background: #FDFCFB;
  border-bottom: 1px solid #EEEAE5;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.commit-hash {
  font-family: var(--font-mono);
  font-size: 12px;
  background: #FDF8F5;
  color: #D88E72;
  padding: 2px 9px;
  border-radius: 5px;
  border: 1px solid #F6E4DA;
  font-weight: 600;
}

.commit-meta-tag {
  font-size: 11px;
  background: #F8F6F3;
  color: #5C5752;
  border: 1px solid #EEEAE5;
  border-radius: 4px;
  padding: 1px 7px;
  white-space: nowrap;
}

/* Diff file */
.diff-file { border-bottom: 1px solid #F8F6F3; }
.diff-file:last-child { border-bottom: none; }

.diff-file-header {
  padding: 7px 16px;
  background: #FDFCFB;
  border-bottom: 1px solid #EEEAE5;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.diff-file-path {
  font-family: var(--font-mono);
  font-size: 12px;
  color: #D88E72;
  flex: 1;
  word-break: break-all;
  font-weight: 500;
  min-width: 0;
}

.diff-stat-add { font-size: 11.5px; font-weight: 700; color: #16a34a; font-family: var(--font-mono); }
.diff-stat-del { font-size: 11.5px; font-weight: 700; color: #dc2626; font-family: var(--font-mono); }

.diff-status-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.diff-status-badge.added { background: #dcfce7; color: #166534; }
.diff-status-badge.modified { background: #fef3c7; color: #92400e; }
.diff-status-badge.deleted { background: #fee2e2; color: #991b1b; }
.diff-status-badge.renamed { background: #F0E3EC; color: #7D4F70; }

/* Diff patch */
.diff-patch {
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.65;
  overflow-x: auto;
  background: #FCFBF9;
  -webkit-overflow-scrolling: touch;
}

.diff-line {
  padding: 1px 16px;
  white-space: pre;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.diff-line.add { background: #f0fdf4; color: #15803d; }
.diff-line.del { background: #fef2f2; color: #b91c1c; }
.diff-line.ctx { color: #4b5563; }
.diff-line.hunk {
  background: #FDF8F5;
  color: #7D4F70;
  border-top: 1px solid #E8DDE5;
  border-bottom: 1px solid #E8DDE5;
}

/* ══════════════════════════════════════════════
   LOGS TAB
══════════════════════════════════════════════ */
.logs-box {
  background: #FCFBF9;
  max-height: 500px;
  overflow-y: auto;
}
.incident-logs-table-wrap { width: 100%; overflow-x: auto; }
.incident-logs-table { width: 100%; border-collapse: collapse; min-width: 860px; }
.incident-logs-table thead th {
  font-size: 11px;
  letter-spacing: .08em;
  font-weight: 800;
  color: #2B2926;
  padding: 14px 16px;
  text-align: left;
  border-bottom: 2px solid #EEEAE5;
  background: #FCFBF9;
}
.incident-logs-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid #F0EDE8;
  vertical-align: top;
}
.incident-log-row { cursor: pointer; transition: background .12s ease; }
.incident-log-row:hover { background: #FDF8F5; }
.incident-log-time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: #2B2926;
  white-space: nowrap;
}
.incident-log-source {
  font-family: var(--font-mono);
  font-size: 11;
  letter-spacing: .02em;
  color: #D88E72;
  white-space: nowrap;
}
.incident-log-message {
  color: #dc2626;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.45;
}
.incident-log-expand-row td { padding: 0 !important; background: #FAF9F7; }

.log-entry {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 14px;
  border-bottom: 1px solid #F5F2EE;
  font-size: 11px;
  transition: background .1s;
  flex-wrap: wrap;
}

.log-entry:last-child { border-bottom: none; }
.log-entry:hover { background: #FDFCFB; }

.log-ts {
  font-family: var(--font-mono);
  font-size: 11px;
  color: #A39E99;
  flex-shrink: 0;
  white-space: nowrap;
}

.log-lvl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  border-radius: 4px;
  padding: 1px 6px;
  flex-shrink: 0;
  min-width: 44px;
  letter-spacing: .03em;
}

.log-lvl.ERROR, .log-lvl.FATAL { background: #fee2e2; color: #991b1b; }
.log-lvl.WARN { background: #fef3c7; color: #92400e; }
.log-lvl.INFO { background: #FBF2EC; color: #C97A5D; }
.log-lvl.DEBUG { background: #F5F2EE; color: #706B66; }

.log-msg {
  font-family: var(--font-mono);
  font-size: 12px;
  color: #2B2926;
  flex: 1;
  word-break: break-word;
  overflow-wrap: break-word;
  line-height: 1.5;
  min-width: 0;
}

/* ══════════════════════════════════════════════
   TIMELINE TAB
══════════════════════════════════════════════ */
.timeline-wrap {
  position: relative;
  padding-left: 44px;
}

.timeline-wrap::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #EEEAE5;
}

.tl-event {
  position: relative;
  margin-bottom: 22px;
}

.tl-dot {
  position: absolute;
  left: -30px;
  top: 3px;
  width: 20px;
  height: 20px;
  border-radius: 8px;
  border: 1.5px solid #EEEAE5;
  box-shadow: none;
}

.tl-dot.blue { background: #E2AA94; color: #E2AA94; }
.tl-dot.purple { background: #A87D9A; color: #A87D9A; }
.tl-dot.red { background: #ef4444; color: #ef4444; }
.tl-dot.amber { background: #f59e0b; color: #f59e0b; }
.tl-dot.green { background: #10b981; color: #10b981; }
.tl-dot.gray { background: #A39E99; color: #A39E99; }

.tl-time {
  font-size: 11px;
  color: #A39E99;
  font-family: var(--font-mono);
  margin-bottom: 3px;
}

.tl-label {
  font-size: 15px;
  font-weight: 700;
  color: #2B2926;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  word-break: break-word;
}

.tl-detail {
  font-size: 13px;
  color: #706B66;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  background: #FDFCFB;
  border: 1px solid #F5F2EE;
  border-radius: 6px;
  padding: 8px 12px;
  margin-top: 6px;
}

/* ══════════════════════════════════════════════
   JIRA TAB
══════════════════════════════════════════════ */
.jira-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

.jira-ticket-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--blue-600);
  text-decoration: none;
  word-break: break-word;
}

.jira-ticket-link:hover { text-decoration: underline; }

.create-jira-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ══════════════════════════════════════════════
   DROP ITEM
══════════════════════════════════════════════ */
.drop-item {
  display: block;
  width: 100%;
  padding: 8px 14px;
  text-align: left;
  background: none;
  border: none;
  font-size: 13px;
  color: #4A4541;
  cursor: pointer;
  transition: background .15s;
}

.drop-item:hover { background: #FDFCFB; }
#status-drop { z-index: 1200; }

/* ══════════════════════════════════════════════
   CHAT
══════════════════════════════════════════════ */
.chat-fab {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--blue-600);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(29,78,216,.3);
  z-index: 200;
  transition: transform .15s, box-shadow .15s;
}

.chat-fab:hover { transform: scale(1.06); }

.chat-panel {
  position: fixed;
  bottom: 92px;
  right: 28px;
  width: 380px;
  max-height: 560px;
  background: #FCFBF9;
  border: 1px solid #EEEAE5;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.12);
  z-index: 200;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: opacity .2s, transform .2s;
}

.chat-panel.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
}

.chat-header {
  padding: 12px 16px;
  border-bottom: 1px solid #EEEAE5;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--blue-600);
}

.chat-header-title { font-size: 14px; font-weight: 700; color: #fff; flex: 1; }

.chat-close {
  background: none;
  border: none;
  color: rgba(255,255,255,.7);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
}

.chat-close:hover { color: #fff; background: rgba(255,255,255,.15); }

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px 14px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-msg {
  max-width: 88%;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.55;
}

.chat-msg.user { background: var(--blue-600); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.chat-msg.ai { background: #F8F6F3; color: #2B2926; align-self: flex-start; border-bottom-left-radius: 4px; white-space: pre-wrap; }
.chat-msg.typing { background: #F5F2EE; color: #A39E99; font-style: italic; align-self: flex-start; }

.chat-input-row {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid #EEEAE5;
}

.chat-input-row input { flex: 1; height: 38px; border-radius: 8px; }
.chat-input-row button { height: 38px; padding: 0 14px; white-space: nowrap; font-size: 13px; }

/* ══════════════════════════════════════════════
   SHARE MODAL
══════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.5);
  backdrop-filter: blur(4px);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}

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

.share-modal {
  background: #FCFBF9;
  border-radius: 16px;
  padding: 28px;
  width: 440px;
  max-width: calc(100vw - 32px);
  box-shadow: 0 24px 64px rgba(0,0,0,.15);
  transform: translateY(8px);
  transition: transform .2s;
  max-height: 90vh;
  overflow-y: auto;
}

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

.share-modal-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.share-modal-title {
  font-size: 16px;
  font-weight: 800;
  color: #1A1816;
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-close {
  background: none;
  border: none;
  color: #A39E99;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
}

.modal-close:hover { background: #F8F6F3; color: #4A4541; }

.share-form-group { margin-bottom: 16px; }

.share-form-group label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #4A4541;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.share-form-group input, .share-form-group select {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1.5px solid #EEEAE5;
  border-radius: 8px;
  font-size: 13px;
  color: #1A1816;
  background: #FCFBF9;
  transition: border-color .15s;
  outline: none;
  font-family: 'Sora', sans-serif;
}

.share-form-group input:focus, .share-form-group select:focus { border-color: #D88E72; }

.expiry-pills { display: flex; gap: 6px; flex-wrap: wrap; }

.expiry-pill {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  border: 1.5px solid #EEEAE5;
  color: #706B66;
  cursor: pointer;
  background: #FCFBF9;
  transition: all .15s;
}

.expiry-pill:hover { border-color: #D88E72; color: #D88E72; }
.expiry-pill.active { background: #FDF8F5; border-color: #D88E72; color: #D88E72; }

.share-submit-btn {
  width: 100%;
  height: 42px;
  background: #D88E72;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background .15s;
  font-family: 'Sora', sans-serif;
  margin-top: 20px;
}

.share-submit-btn:hover { background: #D88E72; }
.share-submit-btn:disabled { background: #D4D0CB; cursor: default; }

.share-success {
  background: #f0fdf4;
  border: 1.5px solid #bbf7d0;
  border-radius: 12px;
  padding: 16px;
  margin-top: 16px;
}

.share-success-title {
  font-size: 13px;
  font-weight: 700;
  color: #15803d;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.share-link-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #FCFBF9;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  padding: 8px 10px;
}

.share-link-text {
  flex: 1;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #4A4541;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.copy-btn {
  flex-shrink: 0;
  background: #FDF8F5;
  border: 1px solid #F6E4DA;
  color: #D88E72;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
}

.copy-btn:hover { background: #FBF2EC; }

.active-tokens-section { margin-top: 20px; }

.active-tokens-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #A39E99;
  margin-bottom: 10px;
}

.token-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #FDFCFB;
  border: 1px solid #EEEAE5;
  border-radius: 8px;
  margin-bottom: 6px;
}

.token-email { font-size: 12px; color: #4A4541; font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.token-expiry { font-size: 11px; color: #A39E99; font-family: 'JetBrains Mono', monospace; flex-shrink: 0; }

.token-extend-btn {
  font-size: 11px;
  font-weight: 600;
  color: #D88E72;
  background: #FDF8F5;
  border: 1px solid #F6E4DA;
  border-radius: 6px;
  padding: 3px 9px;
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
  flex-shrink: 0;
}

.token-extend-btn:hover { background: #FBF2EC; }

/* ══════════════════════════════════════════════
   CARD BASE
══════════════════════════════════════════════ */
.card {
  overflow: hidden;
  min-width: 0;
}

/* ══════════════════════════════════════════════
   RESPONSIVE — ≤ 900px
══════════════════════════════════════════════ */
@media (max-width: 900px) {
  .rca-grid { grid-template-columns: 1fr; }
  .jira-grid { grid-template-columns: 1fr; }
  .inc-metrics-strip { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════
   RESPONSIVE — ≤ 768px  (MAIN MOBILE FIX)
══════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Page content */
  .page-content { padding: 10px !important; }
  .card { padding: 14px !important; }

  /* Header */
  .inc-header-top {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }

  .inc-top-chips { width: 100%; }

  /* Action buttons — scrollable row */
  .analyze-btn-wrap {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap !important;
    padding-bottom: 4px;
    gap: 6px !important;
  }

  .analyze-btn-wrap .btn {
    flex-shrink: 0 !important;
    font-size: 11.5px !important;
    padding: 0 10px !important;
    height: 32px !important;
    white-space: nowrap !important;
  }

  .inc-main-title { font-size: 17px; }

  /* Meta row — 2 col grid */
  .detail-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding-top: 12px;
  }

  .detail-meta-item {
    padding: 0;
    min-width: 0;
  }

  .detail-meta-item:not(:last-child)::after { display: none; }

  /* Metrics */
  .inc-metrics-strip {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
  }

  .metric-card { padding: 12px 14px; }
  .metric-value { font-size: 20px; }

  /* RCA grid single col */
  .rca-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  .rca-right-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100% !important;
  }

  /* Confidence ring — stack vertically on mobile */
  .conf-ring-row {
    flex-direction: row;
    gap: 12px;
    align-items: center;
  }

  .conf-ring-wrap {
    width: 70px;
    height: 70px;
  }

  .conf-ring-pct { font-size: 15px; }

  /* AI status bar wrap */
  .ai-status-bar { flex-direction: column; align-items: flex-start; gap: 6px; }

  /* Susp commits */
  .susp-commits-section, .ai-evtl-section { padding: 14px !important; }

  .commit-card-author {
    margin-left: 0;
    margin-top: 4px;
    width: 100%;
  }

  /* Timeline column smaller */
  .ai-evtl-time-col {
    width: 44px !important;
    font-size: 10px !important;
    min-width: 44px !important;
    max-width: 44px !important;
  }

  /* Jira grid */
  .jira-grid { grid-template-columns: 1fr !important; }

  /* Status dropdown */
  #status-drop { right: 0; min-width: 130px; }

  /* Logs */
  .logs-box { max-height: 360px; }

  .log-entry { font-size: 11px; padding: 6px 10px; gap: 6px; }
  .log-ts { font-size: 10px; }

  /* Diff */
  .diff-patch { font-size: 10.5px; }
  .diff-line { padding: 1px 10px; }

  /* Chat */
  .chat-panel {
    right: 10px;
    left: 10px;
    width: auto;
    bottom: 80px;
    max-height: 70vh;
  }

  .chat-fab { bottom: 16px; right: 16px; width: 46px; height: 46px; }
}

/* ══════════════════════════════════════════════
   RESPONSIVE — ≤ 480px
══════════════════════════════════════════════ */
@media (max-width: 480px) {

  .inc-main-title { font-size: 15px; }

  .inc-top-chips { gap: 5px; }

  .inc-chip { font-size: 10.5px; padding: 3px 8px; }

  .tab-btn { font-size: 11.5px; padding: 7px 10px; }

  .inc-metrics-strip {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px;
  }

  .metric-value { font-size: 18px; }

  .conf-ring-wrap { width: 64px; height: 64px; }
  .conf-ring-pct { font-size: 14px; }

  .fix-block { font-size: 11.5px; }

  .ai-evtl-time-col {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    font-size: 9.5px !important;
  }

  .rca-section-title { font-size: 10px; }

  .log-entry {
    font-size: 11px;
    padding: 5px 8px;
    gap: 5px;
    flex-wrap: wrap;
  }

  .log-ts { width: 100%; font-size: 9.5px; }

  .susp-commits-section, .ai-evtl-section { padding: 10px !important; }

  /* Diff file path wrap */
  .diff-file-path { font-size: 11px; }
}

/* ══════════════════════════════════════════════
   REPLAY TAB
══════════════════════════════════════════════ */
.replay-play-btn:disabled { background: #D4D0CB; cursor: default; }

@media (max-width: 480px) {
  #replay-content > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  #replay-content > div:first-child > div {
    gap: 12px !important;
  }

  .replay-play-btn { width: 100% !important; justify-content: center; }
}

@media (max-width: 768px) {
  .file-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .file-pills::-webkit-scrollbar { display: none; }

  .file-pill {
    flex-shrink: 0;
    max-width: none;
    white-space: nowrap;
  }
}
@media (max-width: 768px) {
  .logs-box {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .incident-logs-table { min-width: 760px; }
  .incident-logs-table thead th { font-size: 10px; padding: 10px 12px; }
  .incident-logs-table tbody td { padding: 10px 12px; }
  .incident-log-source { font-size: 12px; }
  .incident-log-message { font-size: 12px; }

  .log-entry {
    flex-wrap: nowrap;
    align-items: baseline;
    min-width: max-content;
    gap: 8px;
    /* remove overflow-x from here */
    overflow-x: unset;
  }

  .log-ts {
    width: auto;
    flex-shrink: 0;
    white-space: nowrap;
  }

  .log-lvl {
    flex-shrink: 0;
  }

  .log-msg {
    width: auto;
    flex: unset;
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
  }
}

#breadcrumb-title {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
  font-size: 13px;
  font-weight: 600;
  color: #1A1816;
}

@media (max-width: 480px) {
  #breadcrumb-title {
    max-width: 140px;
    font-size: 12px;
  }
}

/* ══════════════════════════════════════════════
       PAGE LAYOUT
    ══════════════════════════════════════════════ */

    /* Connections page layout — only when .conn-nav is present */
    .page-content:has(.conn-nav) {
      padding: 0 !important;
      display: flex !important;
      flex-direction: row !important;
      height: calc(100vh - 64px) !important;
      overflow: hidden !important;
      background: #F8F6F3 !important;
    }
    .page-content:has(.conn-nav) .conn-nav {
      flex-shrink: 0;
      overflow-y: auto;
      height: 100%;
    }
    .page-content:has(.conn-nav) .conn-body {
      flex: 1;
      min-width: 0;
      overflow-y: auto;
      height: 100%;
      padding: 28px 32px 60px;
    }

    /* ── Left nav ── */
    .conn-nav {
      width: 220px;
      flex-shrink: 0;
      background: #FCFBF9;
      border-right: 1.5px solid #EEEAE5;
      padding: 20px 12px;
      display: flex;
      flex-direction: column;
      gap: 2px;
      overflow-y: auto;
    }

    .conn-nav-section {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .8px;
      text-transform: uppercase;
      color: #A39E99;
      padding: 12px 10px 5px;
    }

    .conn-nav-item {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 8px 11px;
      border-radius: 9px;
      font-size: 13px;
      font-weight: 500;
      color: #5C5752;
      cursor: pointer;
      transition: all .14s;
      text-decoration: none;
      border: none;
      background: none;
      width: 100%;
      text-align: left;
    }

    .conn-nav-item:hover {
      background: #FDFCFB;
      color: #1A1816;
    }

    .conn-nav-item.active {
      background: #FDF8F5;
      color: #D88E72;
      font-weight: 600;
    }

    .conn-nav-item-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
      background: #EEEAE5;
    }

    .conn-nav-item.active .conn-nav-item-dot {
      background: #D88E72;
    }

    .conn-nav-item.connected .conn-nav-item-dot {
      background: #16a34a;
    }

    .conn-nav-item-logo {
      width: 22px;
      height: 22px;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      font-weight: 800;
      color: #fff;
      flex-shrink: 0;
    }

    .conn-nav-count {
      margin-left: auto;
      font-size: 10px;
      font-weight: 700;
      background: #F8F6F3;
      color: #706B66;
      padding: 1px 7px;
      border-radius: 20px;
    }

    /* ── Right content ── */
    .conn-body {
      flex: 1;
      min-width: 0;
      overflow-y: auto;
      /* ← yeh already hai, confirm karo */
      padding: 28px 32px 60px;
      height: 100%;
      /* ← add karo */
    }

    /* ══════════════════════════════════════════════
       SECTION HEADERS
    ══════════════════════════════════════════════ */
    .conn-section-head {
      margin-bottom: 22px;
    }

    .conn-section-head h2 {
      font-size: 18px;
      font-weight: 800;
      color: #1A1816;
      letter-spacing: -.3px;
      margin-bottom: 4px;
    }

    .conn-section-head p {
      font-size: 13px;
      color: #706B66;
      line-height: 1.6;
    }

    /* ══════════════════════════════════════════════
       PLATFORM CARDS (Log Platforms)
    ══════════════════════════════════════════════ */
    .platforms-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 14px;
      margin-bottom: 32px;
    }

    .platform-card {
      background: #FCFBF9;
      border: 1.5px solid #EEEAE5;
      border-radius: 16px;
      padding: 20px;
      transition: box-shadow .2s, border-color .2s, transform .15s;
      position: relative;
      overflow: hidden;
    }

    .platform-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: var(--card-accent, #EEEAE5);
      border-radius: 16px 16px 0 0;
      transition: background .2s;
    }

    .platform-card:hover {
      box-shadow: 0 6px 24px rgba(0, 0, 0, .08);
      transform: translateY(-2px);
      border-color: #D4D0CB;
    }

    .platform-card.connected {
      border-color: #b9e7c7;
      background: #FCFBF9;
    }

    .platform-card.connected::before {
      background: #16a34a;
    }

    .platform-card-top {
      display: flex;
      align-items: flex-start;
      gap: 13px;
      margin-bottom: 12px;
    }

    .platform-logo {
      width: 42px;
      height: 42px;
      border-radius: 11px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: 800;
      color: #fff;
      flex-shrink: 0;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
    }

    .platform-info {
      flex: 1;
      min-width: 0;
    }

    .platform-name {
      font-size: 14px;
      font-weight: 700;
      color: #1A1816;
      margin-bottom: 3px;
    }

    .platform-status {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 11px;
      font-weight: 600;
    }

    .platform-status.ok {
      color: #16a34a;
    }

    .platform-status.off {
      color: #A39E99;
    }

    .platform-status-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
    }

    .platform-status.ok .platform-status-dot {
      background: #16a34a;
    }

    .platform-status.off .platform-status-dot {
      background: #D4D0CB;
    }

    .platform-desc {
      font-size: 12px;
      color: #706B66;
      line-height: 1.6;
      margin-bottom: 14px;
    }

    .platform-sync {
      font-size: 11px;
      color: #16a34a;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .platform-actions {
      display: flex;
      gap: 8px;
    }

    .platform-btn-connect {
      flex: 1;
      height: 36px;
      border: none;
      border-radius: 9px;
      font-size: 12.5px;
      font-weight: 700;
      cursor: pointer;
      font-family: 'Sora', sans-serif;
      color: #fff;
      transition: opacity .15s, transform .1s;
      background: var(--card-accent, #D88E72);
    }

    .platform-btn-connect:hover {
      opacity: .88;
      transform: translateY(-1px);
    }

    .platform-btn-connect:disabled {
      opacity: .55;
      cursor: not-allowed;
      transform: none;
    }

    .platform-btn-disconnect {
      height: 36px;
      padding: 0 14px;
      border: 1.5px solid #fecaca;
      border-radius: 9px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      font-family: 'Sora', sans-serif;
      color: #dc2626;
      background: #FCFBF9;
      transition: all .15s;
    }

    .platform-btn-disconnect:hover {
      background: #fef2f2;
    }

    .platform-btn-help {
      height: 36px;
      padding: 0 12px;
      border: 1.5px solid #EEEAE5;
      border-radius: 9px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      font-family: 'Sora', sans-serif;
      color: #706B66;
      background: #FCFBF9;
      display: flex;
      align-items: center;
      gap: 5px;
      transition: all .15s;
    }

    .platform-btn-help:hover {
      border-color: #D4D0CB;
      color: #1A1816;
      background: #FDFCFB;
    }

    .platform-btn-help svg {
      width: 12px;
      height: 12px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.5;
    }

    /* ══════════════════════════════════════════════
       GIT REPOSITORIES
    ══════════════════════════════════════════════ */
    .git-section-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
    }

    .git-section-head h3 {
      font-size: 15px;
      font-weight: 700;
      color: #1A1816;
    }

    .git-section-head p {
      font-size: 12.5px;
      color: #706B66;
      margin-top: 2px;
    }

    .repos-table {
      background: #FCFBF9;
      border: 1.5px solid #EEEAE5;
      border-radius: 14px;
      overflow: hidden;
      margin-bottom: 32px;
    }

    .repos-table-head {
      display: grid;
      grid-template-columns: 1fr 100px 90px 80px;
      padding: 10px 20px;
      background: #FDFCFB;
      border-bottom: 1.5px solid #F8F6F3;
      font-size: 11px;
      font-weight: 700;
      color: #A39E99;
      text-transform: uppercase;
      letter-spacing: .5px;
    }

    .repo-row {
      display: grid;
      grid-template-columns: 1fr 100px 90px 80px;
      padding: 14px 20px;
      border-bottom: 1px solid #FDFCFB;
      align-items: center;
      transition: background .12s;
    }

    .repo-row:last-child {
      border-bottom: none;
    }

    .repo-row:hover {
      background: #FDFCFB;
    }

    .repo-row-name {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .repo-icon-wrap {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: #F8F6F3;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .repo-icon-wrap svg {
      width: 14px;
      height: 14px;
      fill: none;
      stroke: #706B66;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .repo-name-text {
      font-size: 13px;
      font-weight: 600;
      color: #2B2926;
    }

    .repo-owner-text {
      font-size: 11.5px;
      color: #A39E99;
      margin-top: 1px;
      font-family: 'JetBrains Mono', monospace;
    }

    .repo-branch-chip {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: #5C5752;
      background: #F8F6F3;
      padding: 3px 9px;
      border-radius: 6px;
      border: 1px solid #EEEAE5;
    }

    .provider-pill {
      display: inline-flex;
      align-items: center;
      font-size: 11px;
      font-weight: 600;
      padding: 3px 9px;
      border-radius: 6px;
    }

    .repo-status-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      font-weight: 600;
      color: #16a34a;
    }

    .repo-status-badge::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #16a34a;
    }

    .repo-remove-btn {
      width: 28px;
      height: 28px;
      border: 1.5px solid #EEEAE5;
      border-radius: 7px;
      background: #FCFBF9;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: #A39E99;
      transition: all .15s;
    }

    .repo-remove-btn:hover {
      border-color: #fecaca;
      color: #dc2626;
      background: #fef2f2;
    }

    .repo-remove-btn svg {
      width: 12px;
      height: 12px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* ══════════════════════════════════════════════
       SERVICE CARDS (Jira / Slack)
    ══════════════════════════════════════════════ */
    .services-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    @media (max-width: 800px) {
      .services-grid {
        grid-template-columns: 1fr;
      }
    }

    .service-card {
      background: #FCFBF9;
      border: 1.5px solid #EEEAE5;
      border-radius: 16px;
      overflow: hidden;
      transition: box-shadow .2s, border-color .2s;
    }

    .service-card:hover {
      box-shadow: 0 4px 16px rgba(0, 0, 0, .07);
    }

    .service-card-head {
      padding: 24px 28px 20px;
      border-bottom: 1.5px solid #F8F6F3;
    }

    .service-head-row {
      display: flex;
      align-items: center;
      gap: 13px;
      margin-bottom: 12px;
    }

    .service-logo {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 20px;
    }

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

    .service-name {
      font-size: 16px;
      font-weight: 800;
      color: #1A1816;
      margin-bottom: 2px;
    }

    .service-provider {
      font-size: 12px;
      color: #A39E99;
    }

    .service-connected-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 11px;
      font-weight: 700;
      padding: 4px 11px;
      border-radius: 20px;
    }

    .svc-badge-on {
      background: #f0fdf4;
      color: #16a34a;
      border: 1px solid #bbf7d0;
    }

    .svc-badge-off {
      background: #FDFCFB;
      color: #A39E99;
      border: 1px solid #EEEAE5;
    }

    .service-desc {
      font-size: 13px;
      color: #706B66;
      line-height: 1.65;
    }

    .service-card-body {
      padding: 22px 28px 26px;
    }

    /* Connect button */
    .svc-connect-btn {
      width: 100%;
      height: 48px;
      border: none;
      border-radius: 10px;
      font-size: 13.5px;
      font-weight: 700;
      cursor: pointer;
      font-family: 'Sora', sans-serif;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      transition: opacity .15s, transform .1s;
      margin-bottom: 10px;
    }

    .svc-connect-btn:hover {
      opacity: .88;
      transform: translateY(-1px);
    }

    .svc-connect-btn:disabled {
      opacity: .55;
      cursor: not-allowed;
      transform: none;
    }

    .svc-connect-btn svg {
      width: 15px;
      height: 15px;
      fill: none;
      stroke: #fff;
      stroke-width: 2;
    }

    .svc-oauth-note {
      font-size: 11.5px;
      color: #A39E99;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
    }

    .svc-oauth-note svg {
      width: 11px;
      height: 11px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
    }

    /* Connected state */
    .svc-connected-info {
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: 13px;
      color: #16a34a;
      font-weight: 500;
      margin-bottom: 14px;
      padding: 10px 14px;
      background: #f0fdf4;
      border-radius: 10px;
      border: 1px solid #bbf7d0;
    }

    .svc-connected-info svg {
      width: 14px;
      height: 14px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.5;
      flex-shrink: 0;
    }

    /* Settings rows */
    .svc-settings {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .svc-setting-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 14px 0;
      border-bottom: 1px solid #F8F6F3;
    }

    .svc-setting-row:last-child {
      border-bottom: none;
    }

    .svc-setting-lbl {
      font-size: 13px;
      font-weight: 500;
      color: #4A4541;
    }

    .svc-setting-sub {
      font-size: 11px;
      color: #A39E99;
      margin-top: 1px;
    }

    .svc-input {
      padding: 8px 14px;
      border: 1.5px solid #EEEAE5;
      border-radius: 9px;
      font-size: 13px;
      font-family: 'Sora', sans-serif;
      color: #2B2926;
      width: 220px;
      min-width: 0;
      transition: border-color .15s;
    }

    .svc-input:focus {
      outline: none;
      border-color: #E8B9A7;
      box-shadow: 0 0 0 3px rgba(96, 165, 250, .1);
    }

    .svc-select {
      padding: 8px 14px;
      border: 1.5px solid #EEEAE5;
      border-radius: 9px;
      font-size: 13px;
      font-family: 'Sora', sans-serif;
      color: #2B2926;
      background: #FCFBF9;
      cursor: pointer;
      width: 220px;
      transition: border-color .15s;
    }

    .svc-select:focus {
      outline: none;
      border-color: #E8B9A7;
    }

    /* Toggle */
    .svc-toggle {
      position: relative;
      width: 42px;
      height: 24px;
      flex-shrink: 0;
    }

    .svc-toggle input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .svc-toggle-track {
      position: absolute;
      cursor: pointer;
      inset: 0;
      background: #EEEAE5;
      border-radius: 24px;
      transition: .2s;
    }

    .svc-toggle-track::before {
      content: '';
      position: absolute;
      height: 18px;
      width: 18px;
      left: 3px;
      bottom: 3px;
      background: #FCFBF9;
      border-radius: 50%;
      transition: .2s;
      box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    }

    .svc-toggle input:checked+.svc-toggle-track {
      background: #D88E72;
    }

    .svc-toggle input:checked+.svc-toggle-track::before {
      transform: translateX(18px);
    }

    /* Card action row */
    .svc-action-row {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid #F8F6F3;
    }

    /* ══════════════════════════════════════════════
       EMPTY STATE
    ══════════════════════════════════════════════ */
    .conn-empty {
      text-align: center;
      padding: 40px 24px;
    }

    .conn-empty-icon {
      width: 52px;
      height: 52px;
      background: #FDF8F5;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 14px;
    }

    .conn-empty-icon svg {
      width: 22px;
      height: 22px;
      fill: none;
      stroke: #D88E72;
      stroke-width: 2;
      stroke-linecap: round;
    }

    .conn-empty h4 {
      font-size: 15px;
      font-weight: 700;
      color: #2B2926;
      margin-bottom: 6px;
    }

    .conn-empty p {
      font-size: 13px;
      color: #706B66;
      max-width: 300px;
      margin: 0 auto;
      line-height: 1.65;
    }

    /* ══════════════════════════════════════════════
       MODAL OVERRIDES
    ══════════════════════════════════════════════ */
    .git-provider-tabs {
      display: flex;
      gap: 6px;
      margin-bottom: 16px;
    }

    .git-tab {
      flex: 1;
      height: 38px;
      border: 1.5px solid #EEEAE5;
      border-radius: 9px;
      font-size: 12.5px;
      font-weight: 600;
      color: #5C5752;
      background: #FCFBF9;
      cursor: pointer;
      font-family: 'Sora', sans-serif;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: all .14s;
    }

    .git-tab:hover {
      border-color: #D4D0CB;
      color: #1A1816;
      background: #FDFCFB;
    }

    .git-tab.active {
      border-color: #D88E72;
      color: #D88E72;
      background: #FDF8F5;
    }

    .git-tab svg {
      width: 14px;
      height: 14px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.8;
    }

    .oauth-connect-bar {
      padding: 11px 14px;
      border-radius: 10px;
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .oauth-connect-bar.not-connected {
      background: #FDFCFB;
      border: 1.5px solid #EEEAE5;
    }

    .oauth-connect-bar.is-connected {
      background: #f0fdf4;
      border: 1.5px solid #bbf7d0;
    }

    .repo-picker {
      border: 1.5px solid #EEEAE5;
      border-radius: 10px;
      max-height: 200px;
      overflow-y: auto;
      margin-bottom: 12px;
    }

    .repo-picker-item {
      padding: 10px 13px;
      cursor: pointer;
      border-bottom: 1px solid #FDFCFB;
      transition: background .12s;
    }

    .repo-picker-item:last-child {
      border-bottom: none;
    }

    .repo-picker-item:hover {
      background: #FDFCFB;
    }

    .repo-picker-item.selected {
      background: #FDF8F5;
    }

    .rp-name {
      font-size: 13px;
      font-weight: 600;
      color: #2B2926;
    }

    .rp-meta {
      font-size: 11px;
      color: #A39E99;
      margin-top: 2px;
      font-family: 'JetBrains Mono', monospace;
    }

    .privacy-badge {
      font-size: 10px;
      font-weight: 600;
      padding: 2px 7px;
      border-radius: 5px;
    }

    /* ══════════════════════════════════════════════
       HELP OVERLAY
    ══════════════════════════════════════════════ */
    .help-overlay {
      position: fixed;
      inset: 0;
      z-index: 500;
      background: rgba(15, 23, 42, .45);
      display: flex;
      align-items: flex-start;
      justify-content: flex-end;
      backdrop-filter: blur(2px);
    }

    .help-panel {
      width: 460px;
      max-width: 96vw;
      height: 100vh;
      background: #FCFBF9;
      box-shadow: -8px 0 40px rgba(0, 0, 0, .14);
      display: flex;
      flex-direction: column;
      animation: slide-in .22s cubic-bezier(.34, 1.4, .64, 1);
    }

    @keyframes slide-in {
      from {
        transform: translateX(100%);
        opacity: 0;
      }
    }

    .help-header {
      padding: 22px 24px 18px;
      border-bottom: 1.5px solid #F8F6F3;
      display: flex;
      align-items: center;
      gap: 13px;
    }

    .help-header-icon {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      font-weight: 800;
      color: #fff;
      background: #D88E72;
      flex-shrink: 0;
    }

    .help-header-title {
      font-size: 15px;
      font-weight: 800;
      color: #1A1816;
    }

    .help-header-sub {
      font-size: 12px;
      color: #A39E99;
      margin-top: 1px;
    }

    .help-close {
      margin-left: auto;
      width: 32px;
      height: 32px;
      border: none;
      background: #FDFCFB;
      border-radius: 8px;
      cursor: pointer;
      color: #706B66;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .15s;
    }

    .help-close:hover {
      background: #F8F6F3;
      color: #1A1816;
    }

    .help-close svg {
      width: 14px;
      height: 14px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.5;
    }

    .connector-tabs {
      display: flex;
      padding: 10px 14px;
      gap: 4px;
      border-bottom: 1.5px solid #F8F6F3;
      flex-wrap: wrap;
    }

    .ctab {
      padding: 5px 13px;
      border-radius: 7px;
      font-size: 12px;
      font-weight: 600;
      border: 1.5px solid #EEEAE5;
      background: #FCFBF9;
      color: #5C5752;
      cursor: pointer;
      font-family: 'Sora', sans-serif;
      transition: all .13s;
    }

    .ctab:hover {
      border-color: #D4D0CB;
      color: #1A1816;
    }

    .ctab.active {
      border-color: #D88E72;
      color: #D88E72;
      background: #FDF8F5;
    }

    .help-body {
      flex: 1;
      overflow-y: auto;
      padding: 20px 24px;
    }

    .help-footer {
      padding: 16px 24px;
      border-top: 1.5px solid #F8F6F3;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .help-footer-text {
      font-size: 12.5px;
      color: #706B66;
    }

    .btn-got-it {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 16px;
      border-radius: 9px;
      background: #D88E72;
      color: #fff;
      border: none;
      font-size: 12.5px;
      font-weight: 700;
      cursor: pointer;
      font-family: 'Sora', sans-serif;
      transition: opacity .15s;
    }

    .btn-got-it:hover {
      opacity: .88;
    }

    .btn-got-it svg {
      width: 13px;
      height: 13px;
      fill: none;
      stroke: #fff;
      stroke-width: 2.5;
    }

    /* Help content styles */
    .conn-intro {
      margin-bottom: 20px;
    }

    .conn-intro-name {
      font-size: 16px;
      font-weight: 800;
      color: #1A1816;
      margin-bottom: 5px;
    }

    .conn-intro-desc {
      font-size: 13px;
      color: #5C5752;
      line-height: 1.65;
      margin-bottom: 10px;
    }

    .conn-intro-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }

    .conn-tag {
      font-size: 11px;
      font-weight: 600;
      padding: 3px 9px;
      border-radius: 6px;
      background: #F8F6F3;
      color: #5C5752;
    }

    .sec-hd {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .7px;
      color: #A39E99;
      margin-bottom: 12px;
    }

.steps-wrap {
  margin-bottom: 20px;
  position: relative;
}

.step-item {
  display: flex;
  flex-direction: row;      /* ← horizontal layout */
  gap: 14px;
  margin-bottom: 0;
  align-items: flex-start;
  position: relative;
}

.step-item + .step-item::before {
  content: '';
  position: absolute;
  left: 13px;               
  top: -20px;
  width: 2px;
  height: 20px;
  background: #EEEAE5;
}

/* Spacer between steps */
.step-item {
  margin-bottom: 20px;
}

.step-item:last-child {
  margin-bottom: 0;
}

/* Number circle */
.step-num {
  width: 28px;
  height: 28px;
  min-width: 28px;         
  border-radius: 50%;
  background: #FDF8F5;
  border: 2px solid #F6E4DA;
  color: #D88E72;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  margin-top: 0;
}

 
.step-item > div:last-child,
.step-item > .step-content {
  flex: 1;
  min-width: 0;
  padding-top: 3px;
}

.step-label {
  font-size: 13px;
  font-weight: 700;
  color: #2B2926;
  margin-bottom: 4px;
  line-height: 1.4;
}

.step-desc {
  font-size: 12px;
  color: #5C5752;
  line-height: 1.6;
}

.steps-wrap .step-item:not(:last-child) .step-num::after {
  display: none;
}

    .step-link {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 12px;
      font-weight: 600;
      color: #D88E72;
      text-decoration: none;
      margin-top: 6px;
    }

    .step-link svg {
      width: 11px;
      height: 11px;
    }

    .step-link:hover {
      text-decoration: underline;
    }

    .code-block {
      background: #1A1816;
      border-radius: 8px;
      padding: 10px 14px;
      margin-top: 8px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11.5px;
      line-height: 1.7;
      color: #D4D0CB;
    }

    .code-block .comment {
      color: #5C5752;
    }

    .code-block .url {
      color: #E8B9A7;
    }

    .code-block .val {
      color: #86efac;
    }

    .fields-wrap {
      margin-bottom: 20px;
    }

    .field-item {
      display: flex;
      gap: 10px;
      margin-bottom: 12px;
      align-items: flex-start;
    }

    .field-badge {
      font-size: 10px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 5px;
      flex-shrink: 0;
      margin-top: 2px;
    }

    .field-req {
      background: #fef2f2;
      color: #dc2626;
    }

    .field-opt {
      background: #FDFCFB;
      color: #706B66;
    }

    .field-name {
      font-size: 13px;
      font-weight: 700;
      color: #2B2926;
      margin-bottom: 2px;
    }

    .field-desc {
      font-size: 12px;
      color: #706B66;
      line-height: 1.55;
    }

    .field-example {
      font-size: 11.5px;
      color: #A39E99;
      font-family: 'JetBrains Mono', monospace;
      margin-top: 3px;
    }

    .perms-wrap {
      margin-bottom: 20px;
    }

    .perms-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12.5px;
    }

    .perms-table th {
      padding: 8px 12px;
      text-align: left;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .5px;
      color: #A39E99;
      background: #FDFCFB;
    }

    .perms-table td {
      padding: 9px 12px;
      color: #5C5752;
      border-top: 1px solid #F8F6F3;
    }

    .perm-scope {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11.5px;
      background: #F8F6F3;
      color: #3D3936;
      padding: 2px 7px;
      border-radius: 4px;
    }

    .tip-box {
      display: flex;
      gap: 11px;
      padding: 13px 15px;
      background: #fffbeb;
      border: 1px solid #fde68a;
      border-radius: 10px;
      align-items: flex-start;
    }

    .tip-box svg {
      width: 16px;
      height: 16px;
      fill: none;
      stroke: #d97706;
      stroke-width: 2;
      flex-shrink: 0;
      margin-top: 1px;
    }

    .tip-title {
      font-size: 12.5px;
      font-weight: 700;
      color: #92400e;
      margin-bottom: 3px;
    }

    .tip-text {
      font-size: 12px;
      color: #78350f;
      line-height: 1.6;
    }

    /* ══════════════════════════════════════════════
       SKELETON
    ══════════════════════════════════════════════ */
    .skel {
      background: linear-gradient(90deg, #F8F6F3 25%, #e9eef4 50%, #F8F6F3 75%);
      background-size: 200% 100%;
      animation: shimmer 1.5s infinite;
      border-radius: 7px;
    }


    /* ══════════════════════════════════════════════
       RESPONSIVE
    ══════════════════════════════════════════════ */
    @media (max-width: 768px) {
      .conn-nav {
        display: none;
      }

      .page-content:has(.conn-nav) {
        flex-direction: column;
        height: auto;
        overflow: auto;
      }

      .conn-body {
        padding: 16px 14px 40px;
      }

      .platforms-grid {
        grid-template-columns: 1fr;
      }

      .repos-table-head {
        display: none;
      }

      .repo-row {
        grid-template-columns: 1fr auto;
        gap: 8px;
      }
    }

    /* ── Mobile bottom nav ── */
    .mobile-bottom-nav {
      display: none;
    }

    @media (max-width: 768px) {
      .mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #FCFBF9;
        border-top: 1.5px solid #EEEAE5;
        z-index: 100;
        padding: 6px 4px;
        gap: 2px;
      }

      .mob-nav-btn {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        padding: 6px 2px;
        border: none;
        background: none;
        border-radius: 10px;
        font-size: 9px;
        font-weight: 600;
        color: #A39E99;
        cursor: pointer;
        font-family: 'Sora', sans-serif;
        transition: all .15s;
      }

      .mob-nav-btn.active {
        color: #D88E72;
        background: #FDF8F5;
      }

      .mob-nav-btn svg {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
      }

      .conn-body {
        padding-bottom: 80px !important;
        /* space for bottom nav */
      }
    }

    /* ── Connections page — Mobile fixes ── */
    @media (max-width: 768px) {

      .service-head-row {
        flex-wrap: wrap !important;
        gap: 10px !important;
        align-items: flex-start !important;
      }

      .service-title {
        flex: 1 1 140px !important;
        min-width: 0 !important;
      }

      .service-name {
        font-size: 15px !important;
      }

      .service-provider {
        white-space: normal !important;
        line-height: 1.4 !important;
      }

      .service-connected-badge {
        flex-shrink: 0 !important;
        align-self: flex-start !important;
        margin-top: 2px !important;
      }

      .service-card-head {
        padding: 16px 18px 14px !important;
      }

      .service-card-body {
        padding: 16px 18px 20px !important;
      }

      .svc-connect-btn {
        font-size: 13px !important;
        padding: 0 16px !important;
        height: 44px !important;
      }

      .conn-body {
        padding-bottom: 90px !important;
      }

      .platforms-grid {
        grid-template-columns: 1fr !important;
      }

      .repo-row {
        grid-template-columns: 1fr auto !important;
        gap: 10px !important;
        padding: 12px 16px !important;
      }

      /* Repo header hide */
      .repos-table-head {
        display: none !important;
      }
    }

    @media (max-width: 400px) {
      .service-head-row {
        flex-direction: column !important;
      }

      .service-logo {
        width: 38px !important;
        height: 38px !important;
      }
    }

    /* ── Step items fix ── */
.step-item {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  align-items: flex-start;   
  position: relative;
}

/* Step number circle */
.step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;            
  background: #FDF8F5;
  border: 2px solid #F6E4DA;
  color: #D88E72;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;                
  margin-top: 0;                 
  position: relative;
  z-index: 1;
}

/* Vertical connecting line between steps */
.steps-wrap .step-item:not(:last-child) .step-num::after {
  content: '';
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: calc(100% + 8px);     
  background: #EEEAE5;
  z-index: 0;
}

/* Step content */
.step-item > div:last-child {
  flex: 1;
  padding-top: 4px;
}

.step-label {
  font-size: 13.5px;
  font-weight: 700;
  color: #2B2926;
  margin-bottom: 4px;
  line-height: 1.4;
}

.step-desc {
  font-size: 12.5px;
  color: #5C5752;
  line-height: 1.65;
  margin-bottom: 0;
}

/* Help body padding */
.help-body {
  padding: 20px 24px;
}

/* Intro section */
.conn-intro {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #F8F6F3;
}

.conn-intro-name {
  font-size: 18px;
  font-weight: 800;
  color: #1A1816;
  margin-bottom: 6px;
}

.conn-intro-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.conn-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  background: #F8F6F3;
  color: #5C5752;
  border: 1px solid #EEEAE5;
}

/* Section heading */
.sec-hd {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #A39E99;
  margin-bottom: 14px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sec-hd::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #F8F6F3;
}

.perms-wrap {
  margin-bottom: 20px;
  overflow: hidden;           
}

.perms-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  table-layout: fixed;        
}

.perms-table th,
.perms-table td {
  word-wrap: break-word;      
  overflow-wrap: break-word;
}

/* Column widths fix */
.perms-table th:first-child,
.perms-table td:first-child {
  width: 40%;                /* Scope column */
}

.perms-table th:last-child,
.perms-table td:last-child {
  width: 60%;                 
}

.perms-table th {
  padding: 8px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #A39E99;
  background: #FDFCFB;
}

.perms-table td {
  padding: 9px 12px;
  color: #5C5752;
  border-top: 1px solid #F8F6F3;
}

.perm-scope {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;            
  background: #F8F6F3;
  color: #3D3936;
  padding: 2px 7px;
  border-radius: 4px;
  display: inline-block;      
  max-width: 100%;
  word-break: break-all;
}

@media (max-width: 480px) {
  .help-panel {
    width: 100vw;
    max-width: 100vw;
  }

  .help-body {
    padding: 16px 16px;    
  }

  .connector-tabs {
    padding: 8px 10px;
  }

  .ctab {
    font-size: 11px;
    padding: 4px 10px;
  }

  .perms-table th,
  .perms-table td {
    padding: 7px 8px;
    font-size: 11px;
  }

  .perm-scope {
    font-size: 10px;
  }
}

    html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
    body{font-family:'Sora',sans-serif;color:#1A1816;background:#FCFBF9;overflow-x:hidden}
    a{text-decoration:none;color:inherit}
    @keyframes gradientShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

    /* NAV */
    .nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.95);backdrop-filter:blur(20px);border-bottom:1px solid var(--gray-200);height:66px}
    .nav-inner{max-width:1200px;margin:0 auto;padding:0 24px;height:100%;display:flex;align-items:center;gap:32px}
    .nav-brand{display:flex;align-items:center;gap:10px}
    .nav-logo{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;}
    .nav-brand-text{font-size:19px;font-weight:800;color:var(--gray-900);letter-spacing:-.5px}
    .nav-links{flex:1;display:flex;gap:2px}
    .nav-links a{padding:7px 13px;font-size:14px;font-weight:500;color:var(--gray-600);border-radius:8px;transition:all .15s}
    .nav-links a:hover{color:var(--gray-900);background:var(--gray-100)}
    .nav-actions{display:flex;gap:8px}
    .btn-ghost{padding:7px 16px;font-size:13.5px;font-weight:600;color:var(--gray-700);border:1.5px solid var(--gray-200);border-radius:8px;background:none;cursor:pointer;font-family:'Sora',sans-serif;transition:all .15s}
    .btn-cta{padding:8px 18px;font-size:13.5px;font-weight:700;color:#fff;background:var(--blue-500);border-radius:8px;border:none;cursor:pointer;font-family:'Sora',sans-serif;box-shadow:0 2px 10px rgba(29,78,216,.3);transition:all .15s}
    .btn-cta:hover{background:#C97A5D;transform:translateY(-1px)}

    /* HERO */
    .hero{padding:80px 24px 60px;text-align:center;background:linear-gradient(180deg,var(--gray-50) 0%,#fff 100%)}
    .hero-tag{display:inline-flex;align-items:center;gap:8px;background:var(--blue-50);border:1px solid var(--blue-100);color:var(--blue-500);padding:6px 16px;border-radius:24px;font-size:12px;font-weight:700;margin-bottom:24px;letter-spacing:.5px;animation:fadeUp .4s ease both}
    .hero h1{font-size:clamp(34px,4.5vw,54px);font-weight:800;letter-spacing:-2px;color:var(--gray-900);margin-bottom:16px;animation:fadeUp .4s .08s ease both}
    .hero h1 span{background:linear-gradient(135deg,var(--blue-500),#9B6B8E);background-size:200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradientShift 4s infinite}
    .hero p{font-size:17px;color:var(--gray-500);max-width:520px;margin:0 auto;line-height:1.8;animation:fadeUp .4s .15s ease both}

    /* API STATUS BADGE */
    .api-status{display:inline-flex;align-items:center;gap:6px;margin-top:16px;padding:5px 12px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:.5px;animation:fadeUp .4s .2s ease both;border:1px solid}
    .api-status.loading{background:#fefce8;color:#ca8a04;border-color:#fef08a}
    .api-status.connected{background:#f0fdf4;color:#16a34a;border-color:#bbf7d0}
    .api-status.error{background:#fef2f2;color:#dc2626;border-color:#fecaca}
    .api-dot{width:6px;height:6px;border-radius:50%;background:currentColor}
    .api-dot.pulse{animation:pulse 1.5s infinite}

    /* SEARCH BAR */
    .search-bar{padding:0 24px 20px;display:flex;justify-content:center}
    .search-wrap{position:relative;width:100%;max-width:480px}
    .search-input{width:100%;padding:10px 16px 10px 40px;font-size:14px;font-family:'Sora',sans-serif;border:1.5px solid var(--gray-200);border-radius:12px;outline:none;transition:border-color .15s;color:var(--gray-900)}
    .search-input:focus{border-color:var(--blue-400)}
    .search-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--gray-400);pointer-events:none}

    /* FILTER TABS */
    .filter-bar{padding:0 24px 48px;display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
    .filter-btn{padding:8px 18px;font-size:13px;font-weight:600;border-radius:20px;border:1.5px solid var(--gray-200);background:#FCFBF9;color:var(--gray-600);cursor:pointer;font-family:'Sora',sans-serif;transition:all .15s}
    .filter-btn:hover,.filter-btn.active{background:var(--blue-500);color:#fff;border-color:var(--blue-500)}

    /* FEATURED */
    .featured{padding:0 24px 64px}
    .featured-inner{max-width:1100px;margin:0 auto}
    .featured-post{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--gray-900);border-radius:20px;overflow:hidden;transition:transform .25s,box-shadow .25s}
    .featured-post:hover{transform:translateY(-4px);box-shadow:0 24px 64px rgba(0,0,0,.18)}
    .featured-img{background:linear-gradient(135deg,#3D3936,#1F1D1B);display:flex;align-items:center;justify-content:center;min-height:300px;font-size:80px}
    .featured-content{padding:48px}
    .featured-tag{display:inline-block;background:rgba(29,78,216,.2);color:#E8B9A7;font-size:11px;font-weight:700;padding:4px 10px;border-radius:8px;margin-bottom:16px;letter-spacing:.5px}
    .featured-title{font-size:26px;font-weight:800;color:#fff;letter-spacing:-1px;line-height:1.2;margin-bottom:16px}
    .featured-excerpt{font-size:14px;color:rgba(255,255,255,.55);line-height:1.8;margin-bottom:24px}
    .featured-meta{display:flex;align-items:center;gap:12px}
    .featured-avatar{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;background:linear-gradient(135deg,#D88E72,#9B6B8E)}
    .featured-author{font-size:13px;font-weight:600;color:rgba(255,255,255,.8)}
    .featured-date{font-size:12px;color:rgba(255,255,255,.35)}
    .read-link{display:inline-flex;align-items:center;gap:6px;margin-top:20px;font-size:13px;font-weight:700;color:#E8B9A7;transition:gap .2s;cursor:pointer}
    .read-link:hover{gap:10px}

    /* POSTS GRID */
    .posts{padding:0 24px 80px}
    .posts-inner{max-width:1100px;margin:0 auto}
    .posts-label{font-size:12px;font-weight:700;color:var(--gray-400);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:28px;display:flex;align-items:center;justify-content:space-between}
    .posts-count{font-size:11px;font-weight:600;background:var(--gray-100);color:var(--gray-500);padding:3px 10px;border-radius:20px}
    .posts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
    .post-card{background:#FCFBF9;border:1.5px solid var(--gray-200);border-radius:16px;overflow:hidden;transition:all .25s;cursor:pointer}
    .post-card:hover{border-color:#EABFA6;box-shadow:0 8px 28px rgba(29,78,216,.1);transform:translateY(-4px)}
    .post-thumb{height:160px;display:flex;align-items:center;justify-content:center;font-size:48px}
    .post-body{padding:22px}
    .post-tag{display:inline-block;font-size:10px;font-weight:700;padding:3px 9px;border-radius:6px;margin-bottom:10px;letter-spacing:.4px}
    .post-tag.engineering{background:var(--blue-50);color:var(--blue-500)}
    .post-tag.product{background:#F8F3F6;color:#9B6B8E}
    .post-tag.tutorial{background:#f0fdf4;color:#16a34a}
    .post-tag.sre{background:#fff7ed;color:#f97316}
    .post-title{font-size:15px;font-weight:700;color:var(--gray-900);margin-bottom:8px;line-height:1.45}
    .post-excerpt{font-size:13px;color:var(--gray-500);line-height:1.7;margin-bottom:16px}
    .post-meta{display:flex;align-items:center;gap:10px;padding-top:14px;border-top:1px solid var(--gray-100)}
    .post-avatar{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:#fff;flex-shrink:0}
    .post-author{font-size:12px;font-weight:600;color:var(--gray-700)}
    .post-date{font-size:11px;color:var(--gray-400);margin-left:auto}

    /* LOADING SKELETON */
    .skeleton{background:linear-gradient(90deg,var(--gray-100) 25%,var(--gray-200) 50%,var(--gray-100) 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite}
    @keyframes skeleton-loading{0%{background-position:200% 0}100%{background-position:-200% 0}}
    .skel-card{border:1.5px solid var(--gray-200);border-radius:16px;overflow:hidden}
    .skel-thumb{height:160px}.skel-body{padding:22px}
    .skel-line{height:12px;border-radius:6px;margin-bottom:10px}
    .skel-short{width:40%}.skel-med{width:70%}.skel-full{width:100%}

    /* EMPTY STATE */
    .empty{text-align:center;padding:60px 24px;color:var(--gray-400)}
    .empty-icon{font-size:48px;margin-bottom:16px}
    .empty h3{font-size:18px;font-weight:700;color:var(--gray-600);margin-bottom:8px}
    .empty p{font-size:14px}

    /* POST MODAL */
    .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);z-index:200;display:none;align-items:center;justify-content:center;padding:24px}
    .modal-overlay.open{display:flex}
    .modal-header{padding:28px 28px 0;border-bottom:1px solid var(--gray-100);padding-bottom:20px}
    .modal-tag{font-size:11px;font-weight:700;padding:4px 10px;border-radius:6px;display:inline-block;margin-bottom:12px}
    .modal-title{font-size:22px;font-weight:800;letter-spacing:-1px;margin-bottom:12px;color:var(--gray-900)}
    .modal-meta{display:flex;align-items:center;gap:10px}
    .modal-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff}
    .modal-author{font-size:13px;font-weight:600;color:var(--gray-700)}
    .modal-date{font-size:12px;color:var(--gray-400)}
    .modal-body{padding:24px 28px 28px;font-size:14px;color:var(--gray-600);line-height:1.9;}
    .modal-close{float:right;margin-top:-4px;padding:6px 12px;font-size:12px;font-weight:700;background:var(--gray-100);border:none;border-radius:8px;cursor:pointer;font-family:'Sora',sans-serif;color:var(--gray-600)}
    .modal-close:hover{background:var(--gray-200)}

    /* NEWSLETTER */
    .newsletter{padding:80px 24px;background:linear-gradient(135deg,var(--blue-50),#F8F3F6);text-align:center}
    .newsletter h2{font-size:clamp(24px,3vw,36px);font-weight:800;letter-spacing:-1.5px;color:var(--gray-900);margin-bottom:12px}
    .newsletter p{font-size:15px;color:var(--gray-500);margin-bottom:28px}
    .newsletter-form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
    .newsletter-input{padding:12px 18px;font-size:14px;font-family:'Sora',sans-serif;border:1.5px solid var(--gray-200);border-radius:10px;outline:none;width:280px;transition:border-color .15s}
    .newsletter-input:focus{border-color:var(--blue-400)}
    .newsletter-btn{padding:12px 24px;font-size:14px;font-weight:700;color:#fff;background:var(--blue-500);border:none;border-radius:10px;cursor:pointer;font-family:'Sora',sans-serif}
    .newsletter-btn:hover{background:#C97A5D}

    .footer{background:var(--gray-900);padding:48px 24px 28px}
    .footer-inner{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
    .footer-brand{display:flex;align-items:center;gap:10px}
    .footer-logo{width:32px;height:32px;background:linear-gradient(135deg,var(--blue-500),#9B6B8E);border-radius:8px;display:flex;align-items:center;justify-content:center}
    .footer-name{font-size:17px;font-weight:800;color:#fff}
    .footer-copy{font-size:12px;color:rgba(255,255,255,.25)}

    @media(max-width:768px){
      .featured-post{grid-template-columns:1fr}
      .featured-img{min-height:160px}
      .posts-grid{grid-template-columns:1fr}
      .nav-links,.nav-actions{display:none}
    }


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

        body {
            font-family: var(--sans);
            background: var(--gray-50);
            color: var(--gray-900);
        }

        .page-content {
            padding: 24px;
            max-width: 1280px;
        }

        /* Banner */
        .monitor-banner {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            background: rgba(16, 185, 129, .06);
            border: 1px solid rgba(16, 185, 129, .18);
            border-radius: 10px;
            padding: 10px 16px;
            margin-bottom: 16px;
        }

        .monitor-pulse {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #10b981;
            box-shadow: 0 0 0 3px rgba(16, 185, 129, .2);
            flex-shrink: 0;
            margin-top: 5px;
            animation: mpulse 2s infinite;
        }


        .monitor-body {
            flex: 1;
            min-width: 0;
        }

        .monitor-period {
            height: 34px;
            padding: 0 12px;
            border: 1.5px solid #EEEAE5;
            border-radius: 8px;
            font-size: 12.5px;
            font-weight: 600;
            color: #4A4541;
            background: #FCFBF9;
            outline: none;
            cursor: pointer;
            font-family: var(--sans);
            flex-shrink: 0;
        }

        /* KPI */
        .kpi-strip {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 12px;
            margin-bottom: 24px;
        }

        .kpi-card {
            background: var(--card-bg);
            border: 1.5px solid var(--border);
            border-radius: 14px;
            padding: 18px 16px;
            display: flex;
            flex-direction: column;
            gap: 6px;
            transition: box-shadow .2s;
        }

        .kpi-card:hover {
            box-shadow: 0 4px 20px rgba(0, 0, 0, .06);
        }

        .kpi-icon {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 4px;
        }

        .kpi-icon svg {
            width: 18px;
            height: 18px;
            fill: none;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .kpi-val {
            font-size: 26px;
            font-weight: 800;
            letter-spacing: -.5px;
            line-height: 1;
        }

        .kpi-label {
            font-size: 11.5px;
            color: var(--gray-500);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: .4px;
        }

        .kpi-delta {
            font-size: 11px;
            font-weight: 600;
            margin-top: 2px;
        }

        .kpi-delta.up {
            color: var(--green);
        }

        .kpi-delta.down {
            color: var(--red);
        }

        .kpi-delta.neutral {
            color: var(--gray-400);
        }

        /* Charts */
        .charts-row {
            display: grid;
            grid-template-columns: 1.6fr 1fr;
            gap: 16px;
            margin-bottom: 24px;
        }

        .card {
            background: var(--card-bg);
            border: 1.5px solid var(--border);
            border-radius: 16px;
            padding: 20px 22px;
        }

        .card-hd {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 18px;
            flex-wrap: wrap;
            gap: 8px;
        }

        .card-title {
            font-size: 14px;
            font-weight: 700;
            color: var(--gray-900);
        }

        .card-badge {
            font-size: 11px;
            font-weight: 700;
            padding: 3px 10px;
            border-radius: 20px;
            background: var(--blue-bg);
            color: var(--blue);
        }

        .chart-wrap {
            position: relative;
        }

        /* Table */
        .user-table-section {
            margin-bottom: 24px;
        }

        .table-card {
            background: var(--card-bg);
            border: 1.5px solid var(--border);
            border-radius: 16px;
            overflow: hidden;
        }

        .table-toolbar {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 14px 16px;
            border-bottom: 1px solid var(--border);
            flex-wrap: wrap;
        }

        .search-box {
            display: flex;
            align-items: center;
            gap: 8px;
            background: var(--gray-50);
            border: 1.5px solid var(--border);
            border-radius: 9px;
            padding: 7px 12px;
            flex: 1;
            min-width: 140px;
            transition: border-color .15s;
        }

        .search-box:focus-within {
            border-color: var(--blue);
            background: #FCFBF9;
        }

        .search-box svg {
            width: 14px;
            height: 14px;
            stroke: var(--gray-400);
            fill: none;
            stroke-width: 2;
            flex-shrink: 0;
        }

        .search-box input {
            border: none;
            background: transparent;
            font-size: 13px;
            color: var(--gray-900);
            outline: none;
            width: 100%;
            font-family: var(--sans);
        }

        .filter-sel {
            height: 36px;
            padding: 0 10px;
            border: 1.5px solid var(--border);
            border-radius: 9px;
            font-size: 12px;
            font-weight: 600;
            color: var(--gray-700);
            background: var(--gray-50);
            outline: none;
            font-family: var(--sans);
            cursor: pointer;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
        }

        thead th {
            padding: 10px 16px;
            text-align: left;
            font-size: 10.5px;
            font-weight: 700;
            color: var(--gray-400);
            background: var(--gray-50);
            letter-spacing: .5px;
            text-transform: uppercase;
            border-bottom: 1px solid var(--border);
        }

        tbody td {
            padding: 13px 16px;
            border-bottom: 1px solid #F5F2EE;
            color: var(--gray-700);
            vertical-align: middle;
        }

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

        tbody tr {
            transition: background .1s;
            cursor: pointer;
        }

        tbody tr:hover td {
            background: #FDFCFB;
        }

        /* Avatar */
        .u-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 700;
            color: #fff;
            flex-shrink: 0;
        }

        .u-info {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .u-name {
            font-weight: 600;
            color: var(--gray-900);
            font-size: 13px;
        }

        /* Mini bar */
        .mini-bar-wrap {
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 90px;
        }

        .mini-bar-track {
            flex: 1;
            height: 6px;
            background: var(--gray-100);
            border-radius: 6px;
            overflow: hidden;
        }

        .mini-bar-fill {
            height: 100%;
            border-radius: 6px;
            transition: width .6s ease;
        }

        .mini-bar-val {
            font-size: 12px;
            font-weight: 700;
            color: var(--gray-900);
            width: 22px;
            text-align: right;
            font-family: var(--mono);
        }

        /* Risk */
        .risk-pill {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 3px 10px;
            border-radius: 20px;
            font-size: 11px;
            font-weight: 700;
        }

        .risk-pill.high {
            background: var(--red-bg);
            color: var(--red);
        }

        .risk-pill.medium {
            background: var(--orange-bg);
            color: var(--orange);
        }

        .risk-pill.low {
            background: var(--green-bg);
            color: var(--green);
        }

        .risk-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            flex-shrink: 0;
        }

        /* Bottom */
        .bottom-row {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 16px;
            margin-bottom: 24px;
        }

        .offender-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .offender-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 12px;
            border-radius: 10px;
            background: var(--gray-50);
            border: 1px solid var(--border);
            transition: background .15s;
            cursor: pointer;
        }

        .offender-item:hover {
            background: var(--blue-bg);
            border-color: rgba(29, 78, 216, .2);
        }

        .offender-rank {
            font-size: 11px;
            font-weight: 700;
            color: var(--gray-400);
            width: 18px;
            font-family: var(--mono);
        }

        .offender-info {
            flex: 1;
            min-width: 0;
        }

        .offender-name {
            font-size: 13px;
            font-weight: 600;
            color: var(--gray-900);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .offender-meta {
            font-size: 11px;
            color: var(--gray-400);
            margin-top: 1px;
        }

        .offender-count {
            font-size: 15px;
            font-weight: 800;
            color: var(--red);
            font-family: var(--mono);
        }

        .mttr-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .mttr-item {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .mttr-user {
            font-size: 12.5px;
            font-weight: 600;
            color: var(--gray-900);
            flex: 1;
            min-width: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .mttr-bar-wrap {
            flex: 1.5;
            height: 6px;
            background: var(--gray-100);
            border-radius: 6px;
            overflow: hidden;
        }

        .mttr-bar-fill {
            height: 100%;
            border-radius: 6px;
            background: linear-gradient(90deg, #D88E72, #9B6B8E);
            transition: width .7s ease;
        }

        .mttr-time {
            font-size: 11px;
            font-weight: 700;
            color: var(--gray-700);
            width: 36px;
            text-align: right;
            font-family: var(--mono);
        }

        .heatmap-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 3px;
            margin-top: 8px;
        }

        .heatmap-cell {
            aspect-ratio: 1;
            border-radius: 3px;
            cursor: pointer;
            transition: transform .1s;
        }

        .heatmap-cell:hover {
            transform: scale(1.2);
        }

        .heatmap-days {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 3px;
            margin-bottom: 4px;
        }

        .heatmap-day {
            font-size: 9px;
            color: var(--gray-400);
            text-align: center;
            font-family: var(--mono);
        }

        /* Skel */
        .skel {
            background: linear-gradient(90deg, #F8F6F3 25%, #EEEAE5 50%, #F8F6F3 75%);
            background-size: 200% 100%;
            animation: shimmer 1.5s infinite;
            border-radius: 7px;
            height: 16px;
        }


        /* Modal */
        .user-modal-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, .45);
            z-index: 200;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .user-modal-overlay.open {
            display: flex;
        }

        .user-modal {
            background: #FCFBF9;
            border-radius: 20px;
            width: 100%;
            max-width: 640px;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 24px 80px rgba(0, 0, 0, .18);
            animation: slideUp .2s ease;
        }

        @keyframes slideUp {
            from {
                transform: translateY(20px);
                opacity: 0
            }

            to {
                transform: none;
                opacity: 1
            }
        }

        .modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px 24px;
            border-bottom: 1px solid var(--border);
            gap: 12px;
        }

        .modal-close {
            width: 32px;
            height: 32px;
            border: none;
            background: var(--gray-100);
            border-radius: 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .modal-close svg {
            width: 14px;
            height: 14px;
            stroke: var(--gray-500);
            fill: none;
            stroke-width: 2;
        }

        .modal-body {
            padding: 6px;
        }

        .modal-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            margin-bottom: 20px;
        }

        .modal-stat {
            background: var(--gray-50);
            border-radius: 12px;
            padding: 14px 12px;
            text-align: center;
        }

        .modal-stat-val {
            font-size: 22px;
            font-weight: 800;
            color: var(--gray-900);
        }

        .modal-stat-lbl {
            font-size: 11px;
            color: var(--gray-400);
            font-weight: 600;
            margin-top: 3px;
            text-transform: uppercase;
            letter-spacing: .4px;
        }

        .modal-incident {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            border-radius: 10px;
            border: 1px solid var(--border);
            margin-bottom: 8px;
            cursor: pointer;
        }

        .modal-incident:hover {
            background: var(--gray-50);
        }

        .modal-inc-title {
            flex: 1;
            font-size: 12.5px;
            font-weight: 600;
            color: var(--gray-900);
            min-width: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .modal-inc-meta {
            font-size: 11px;
            color: var(--gray-400);
        }

        .empty-state {
            padding: 40px 24px;
            text-align: center;
        }

        .empty-state svg {
            width: 40px;
            height: 40px;
            stroke: var(--gray-100);
            fill: none;
            stroke-width: 1.5;
            margin: 0 auto 12px;
            display: block;
        }

        .empty-state p {
            font-size: 13px;
            color: var(--gray-400);
        }

        /* ── RESPONSIVE ── */
        @media(max-width:1100px) {
            .kpi-strip {
                grid-template-columns: repeat(3, 1fr);
            }

            .charts-row {
                grid-template-columns: 1fr;
            }

            .bottom-row {
                grid-template-columns: 1fr 1fr;
            }
        }

        @media(max-width:768px) {
            .page-content {
                padding: 12px;
            }

            .kpi-strip {
                grid-template-columns: 1fr 1fr;
            }

            .charts-row {
                grid-template-columns: 1fr;
            }

            .bottom-row {
                grid-template-columns: 1fr;
            }

            /* line chart */
            .chart-wrap {
                height: 180px !important;
            }

            .charts-row .card:nth-child(2) .chart-wrap {
                height: 220px !important;
            }

            /* doughnut — needs more height for legend */
            table thead th:nth-child(4),
            table tbody td:nth-child(4),
            table thead th:nth-child(5),
            table tbody td:nth-child(5) {
                display: none;
            }

            .modal-stats {
                grid-template-columns: 1fr 1fr;
            }

            /* period select full width on very small */
            .monitor-banner {
                flex-wrap: wrap;
            }

            .table-toolbar {
                flex-direction: column;
                align-items: stretch;
            }

            .search-box {
                min-width: unset;
                width: 100%;
            }

            .filter-sel {
                width: 100%;
            }
        }

        @media(max-width:480px) {
            .kpi-strip {
                grid-template-columns: 1fr 1fr;
            }

            .kpi-val {
                font-size: 20px;
            }

            .kpi-card {
                padding: 12px 10px;
            }

            .chart-wrap {
                height: 180px !important;
            }

            .charts-row .card:nth-child(2) .chart-wrap {
                height: 240px !important;
            }

            table thead th:nth-child(3),
            table tbody td:nth-child(3) {
                display: none;
            }

            .monitor-period {
                width: 100%;
                margin-top: 6px;
            }
        }


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

    html {
      scroll-behavior: smooth;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-size-adjust: 100%;
    }

    body {
      font-family: 'Sora', sans-serif;
      color: #1A1816;
      background: #FCFBF9;
      overflow-x: hidden;
    }

    a {
      text-decoration: none;
      color: inherit;
    }

    img {
      max-width: 100%;
      height: auto;
    }


    @keyframes float {

      0%,
      100% {
        transform: translateY(0px)
      }

      50% {
        transform: translateY(-8px)
      }
    }

    @keyframes marquee {
      0% {
        transform: translateX(0)
      }

      100% {
        transform: translateX(-50%)
      }
    }


    @keyframes slideDown {
      from {
        opacity: 0;
        transform: translateY(-8px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    @keyframes progressFill {
      from {
        width: 0%
      }

      to {
        width: var(--w)
      }
    }


    @keyframes tabSwitch {
      from {
        opacity: 0;
        transform: translateY(6px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    @keyframes incidentPop {
      0% {
        transform: scale(0.96);
        opacity: 0
      }

      100% {
        transform: scale(1);
        opacity: 1
      }
    }

    .reveal {
      opacity: 0;
      transform: translateY(26px);
      transition: opacity .65s ease, transform .65s ease
    }

    .reveal.visible {
      opacity: 1;
      transform: translateY(0)
    }

    .reveal-d1 {
      transition-delay: .1s
    }

    .reveal-d2 {
      transition-delay: .2s
    }

    .reveal-d3 {
      transition-delay: .3s
    }

    .reveal-d4 {
      transition-delay: .4s
    }

    .reveal-d5 {
      transition-delay: .5s
    }

    /* ══════════ NAV ══════════ */
    .nav {
      position: sticky;
      top: 0;
      z-index: 200;
      background: rgba(255, 255, 255, .96);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-bottom: 1px solid var(--gray-200);
      height: 60px;
      transition: box-shadow .2s
    }

    .nav.scrolled {
      box-shadow: 0 4px 24px rgba(0, 0, 0, .07)
    }

    .nav-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 16px;
      height: 100%;
      display: flex;
      align-items: center;
      gap: 24px;
      justify-content: space-between
    }

    .nav-brand {
      display: flex;
      align-items: center;
      gap: 9px;
      flex-shrink: 0
    }

    .nav-logo {
      width: 34px;
      height: 34px;
      background: linear-gradient(135deg, #D88E72, #9B6B8E);
      border-radius: 9px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 8px rgba(29, 78, 216, .35)
    }

    .nav-brand-text {
      font-size: 18px;
      font-weight: 800;
      color: var(--gray-900);
      letter-spacing: -.5px
    }

    .nav-links {
      flex: 1;
      display: flex;
      gap: 2px
    }

    .nav-links a {
      padding: 7px 12px;
      font-size: 14px;
      font-weight: 500;
      color: var(--gray-600);
      border-radius: 8px;
      transition: all .15s
    }

    .nav-links a:hover {
      color: var(--gray-900);
      background: var(--gray-100)
    }

    .nav-links a.active {
      color: var(--blue-500);
      background: var(--blue-50)
    }

    .nav-actions {
      display: flex;
      gap: 8px;
      flex-shrink: 0
    }

    .btn-ghost {
      padding: 7px 14px;
      font-size: 13.5px;
      font-weight: 600;
      color: var(--gray-700);
      border: 1.5px solid var(--gray-200);
      border-radius: 8px;
      background: none;
      cursor: pointer;
      font-family: 'Sora', sans-serif;
      transition: all .15s;
      white-space: nowrap
    }

    .btn-ghost:hover {
      border-color: var(--gray-300);
      background: var(--gray-50)
    }

    .btn-cta-sm {
      padding: 8px 16px;
      font-size: 13.5px;
      font-weight: 700;
      color: #fff;
      background: var(--blue-500);
      border-radius: 8px;
      border: none;
      cursor: pointer;
      font-family: 'Sora', sans-serif;
      box-shadow: 0 2px 10px rgba(29, 78, 216, .3);
      transition: all .15s;
      white-space: nowrap
    }

    .btn-cta-sm:hover {
      background: #C97A5D;
      transform: translateY(-1px)
    }

    .nav-mobile-btn {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      padding: 8px;
      border-radius: 8px;
      -webkit-tap-highlight-color: transparent
    }

    .nav-mobile-btn svg {
      width: 22px;
      height: 22px;
      stroke: var(--gray-700);
      fill: none;
      stroke-width: 2;
      display: block
    }

    .mobile-menu {
      display: none;
      position: fixed;
      top: 60px;
      left: 0;
      right: 0;
      background: #FCFBF9;
      border-bottom: 1px solid var(--gray-200);
      padding: 12px 16px;
      z-index: 199;
      box-shadow: 0 8px 32px rgba(0, 0, 0, .12);
      max-height: calc(100vh - 60px);
      overflow-y: auto
    }

    .mobile-menu.open {
      display: block;
      animation: slideDown .25s ease
    }

    .mobile-menu a {
      display: flex;
      align-items: center;
      padding: 13px 14px;
      font-size: 15px;
      font-weight: 600;
      color: var(--gray-700);
      border-radius: 10px;
      transition: all .15s;
      -webkit-tap-highlight-color: transparent
    }

    .mobile-menu a:hover,
    .mobile-menu a:active {
      color: var(--blue-500);
      background: var(--blue-50)
    }

    .mobile-menu-btns {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 12px;
      padding: 12px 0 8px;
      border-top: 1px solid var(--gray-100)
    }

    .mobile-menu-btns button {
      padding: 13px;
      font-size: 14px;
      font-weight: 700;
      border-radius: 10px;
      cursor: pointer;
      font-family: 'Sora', sans-serif;
      -webkit-tap-highlight-color: transparent
    }

    /* ══════════ HERO ══════════ */
    .hero {
      padding: 56px 16px 60px;
      background: #FCFBF9;
      position: relative;
      overflow: hidden
    }

    .hero-bg {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: radial-gradient(ellipse 800px 500px at 72% -5%, rgba(59, 130, 246, .07), transparent 55%),
        radial-gradient(ellipse 600px 400px at -5% 95%, rgba(139, 92, 246, .05), transparent 55%)
    }

    .hero-inner {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1.1fr;
      gap: 56px;
      align-items: center;
      position: relative;
      z-index: 1
    }

    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: linear-gradient(135deg, var(--blue-50), #F8F3F6);
      border: 1px solid var(--blue-100);
      color: #C97A5D;
      padding: 6px 14px;
      border-radius: 24px;
      font-size: 12px;
      font-weight: 700;
      margin-bottom: 20px;
      animation: fadeUp .5s ease both
    }

    .eyebrow-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--blue-400);
      animation: pulse 2s infinite;
      flex-shrink: 0
    }

    .hero-h1 {
      font-size: clamp(34px, 5vw, 58px);
      font-weight: 800;
      line-height: 1.06;
      letter-spacing: -2px;
      color: var(--gray-900);
      margin-bottom: 18px;
      animation: fadeUp .5s .08s ease both
    }

    .hl {
      background: linear-gradient(135deg, #D88E72 0%, #9B6B8E 60%, #C4A3B8 100%);
      background-size: 200% 200%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: gradientShift 4s ease infinite
    }

    .hero-sub {
      font-size: 16px;
      color: var(--gray-500);
      line-height: 1.8;
      max-width: 490px;
      margin-bottom: 32px;
      animation: fadeUp .5s .15s ease both
    }

    .hero-btns {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 36px;
      animation: fadeUp .5s .22s ease both
    }

    .btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 14px 26px;
      font-size: 15px;
      font-weight: 700;
      color: #fff;
      background: var(--blue-500);
      border-radius: 12px;
      border: none;
      cursor: pointer;
      box-shadow: 0 4px 20px rgba(29, 78, 216, .35);
      transition: all .2s;
      font-family: 'Sora', sans-serif;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation
    }

    .btn-primary:hover {
      background: #C97A5D;
      transform: translateY(-2px);
      box-shadow: 0 8px 30px rgba(29, 78, 216, .45)
    }

    .btn-primary:active {
      transform: translateY(0)
    }

    .btn-outline {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 13px 22px;
      font-size: 15px;
      font-weight: 600;
      color: var(--gray-700);
      background: #FCFBF9;
      border: 1.5px solid var(--gray-200);
      border-radius: 12px;
      cursor: pointer;
      transition: all .2s;
      font-family: 'Sora', sans-serif;
      -webkit-tap-highlight-color: transparent
    }

    .btn-outline:hover {
      border-color: var(--gray-300);
      background: var(--gray-50)
    }

    .hero-social-proof {
      display: flex;
      align-items: center;
      gap: 14px;
      font-size: 13px;
      color: var(--gray-500);
      animation: fadeUp .5s .3s ease both;
      flex-wrap: wrap
    }

    .avatars {
      display: flex
    }

    .avatars span {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 2.5px solid #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      font-weight: 800;
      color: #fff;
      margin-left: -8px
    }

    .avatars span:first-child {
      margin-left: 0
    }

    .avatars span:nth-child(1) {
      background: var(--blue-500)
    }

    .avatars span:nth-child(2) {
      background: #9B6B8E
    }

    .avatars span:nth-child(3) {
      background: var(--green-500)
    }

    .avatars span:nth-child(4) {
      background: var(--orange-500)
    }

    .stars {
      color: #E5A83B;
      letter-spacing: 1px
    }

    .proof-text strong {
      color: var(--gray-700)
    }

    /* Product window */
    .product-showcase {
      animation: fadeUp .6s .1s ease both;
      position: relative;
      min-width: 0;
      overflow: hidden
    }

    .product-showcase::before {
      content: '';
      position: absolute;
      inset: -24px;
      z-index: -1;
      background: radial-gradient(ellipse 420px 320px at 50% 50%, rgba(29, 78, 216, .07), transparent 70%)
    }

    .pw-frame {
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 28px 80px rgba(15, 23, 42, .16), 0 4px 16px rgba(15, 23, 42, .06), 0 0 0 1px rgba(0, 0, 0, .05);
      background: #FCFBF9;
      animation: float 7s ease-in-out infinite;
      max-width: 100%;
      width: 100%
    }

    .pw-titlebar {
      background: #1e2432;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      gap: 8px
    }

    .pw-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%
    }

    .pw-dot.r {
      background: #ef4444
    }

    .pw-dot.y {
      background: #f59e0b
    }

    .pw-dot.g {
      background: #22c55e
    }

    .pw-url {
      flex: 1;
      text-align: center;
      background: rgba(255, 255, 255, .08);
      border-radius: 5px;
      padding: 3px 8px;
      font-size: 10px;
      color: rgba(255, 255, 255, .4);
      font-family: 'JetBrains Mono', monospace;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .pw-live {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 10px;
      font-weight: 700;
      color: #22c55e;
      flex-shrink: 0
    }

    .pw-live-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #22c55e;
      animation: pulse 2s infinite
    }

    .pw-tabs {
      display: flex;
      background: #FDFCFB;
      border-bottom: 1px solid var(--gray-200);
      padding: 0 8px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none
    }

    .pw-tabs::-webkit-scrollbar {
      display: none
    }

    .pw-tab {
      padding: 10px 10px;
      font-size: 11.5px;
      font-weight: 600;
      color: var(--gray-500);
      cursor: pointer;
      border-bottom: 2px solid transparent;
      transition: all .15s;
      white-space: nowrap;
      display: flex;
      align-items: center;
      gap: 5px;
      -webkit-tap-highlight-color: transparent
    }

    .pw-tab:hover {
      color: var(--gray-700)
    }

    .pw-tab.active {
      color: var(--blue-500);
      border-bottom-color: var(--blue-500)
    }

    .pw-tab .tab-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: currentColor;
      opacity: .6
    }

    .pw-panel {
      display: none;
      padding: 14px;
      background: #FDFCFB;
      min-height: 300px
    }

    .pw-panel.active {
      display: block;
      animation: tabSwitch .25s ease
    }

    /* Dashboard stats */
    .dash-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
      margin-bottom: 8px
    }

    .dash-stat {
      background: #FCFBF9;
      border: 1px solid var(--gray-200);
      border-radius: 10px;
      padding: 10px 12px;
      display: flex;
      align-items: center;
      gap: 8px
    }

    .dash-stat-icon {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0
    }

    .dash-stat-icon svg {
      width: 14px;
      height: 14px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2
    }

    .dash-stat-icon.blue {
      background: var(--blue-50);
      color: var(--blue-500)
    }

    .dash-stat-icon.orange {
      background: #fff7ed;
      color: var(--orange-500)
    }

    .dash-stat-icon.green {
      background: var(--green-50);
      color: #16a34a
    }

    .dash-stat-val {
      font-size: 20px;
      font-weight: 800;
      color: var(--gray-900);
      line-height: 1
    }

    .dash-stat-lbl {
      font-size: 9.5px;
      color: var(--gray-500);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .4px;
      margin-top: 2px
    }

    .dash-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-bottom: 8px
    }

    .dash-card {
      background: #FCFBF9;
      border: 1px solid var(--gray-200);
      border-radius: 10px;
      padding: 12px 12px
    }

    .dash-card-title {
      font-size: 10.5px;
      font-weight: 700;
      color: var(--gray-700);
      margin-bottom: 9px
    }

    .sev-row {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 5px
    }

    .sev-label {
      font-size: 9.5px;
      font-weight: 700;
      width: 52px;
      flex-shrink: 0
    }

    .sev-bar-bg {
      flex: 1;
      height: 6px;
      background: var(--gray-100);
      border-radius: 3px;
      overflow: hidden
    }

    .sev-bar {
      height: 100%;
      border-radius: 3px;
      animation: progressFill .8s ease-out both
    }

    .sev-val {
      font-size: 9.5px;
      font-weight: 700;
      color: var(--gray-600);
      width: 12px;
      text-align: right
    }

    .sys-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5px
    }

    .sys-item {
      display: flex;
      align-items: center;
      gap: 5px;
      background: var(--green-50);
      border: 1px solid #bbf7d0;
      border-radius: 7px;
      padding: 6px 8px
    }

    .sys-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--green-500);
      animation: pulse 2.5s infinite;
      flex-shrink: 0
    }

    .sys-label {
      font-size: 9.5px;
      font-weight: 600;
      color: #15803d
    }

    .activity-item {
      display: flex;
      align-items: flex-start;
      gap: 7px;
      padding: 7px 0;
      border-bottom: 1px solid var(--gray-100)
    }

    .activity-item:last-child {
      border-bottom: none
    }

    .activity-icon {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 1px
    }

    .activity-icon.green {
      background: var(--green-50)
    }

    .activity-icon.orange {
      background: #fff7ed
    }

    .activity-icon svg {
      width: 11px;
      height: 11px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2.5
    }

    .activity-icon.green svg {
      stroke: #16a34a
    }

    .activity-icon.orange svg {
      stroke: var(--orange-500)
    }

    .activity-text {
      font-size: 10px;
      color: var(--gray-700);
      line-height: 1.5;
      flex: 1
    }

    .activity-text strong {
      font-weight: 700;
      color: var(--gray-900)
    }

    .activity-badge {
      font-size: 9px;
      font-weight: 800;
      padding: 2px 6px;
      border-radius: 4px;
      white-space: nowrap;
      flex-shrink: 0;
      margin-top: 2px
    }

    .activity-badge.green {
      background: var(--green-50);
      color: #16a34a
    }

    .activity-badge.amber {
      background: #fffbeb;
      color: #d97706
    }

    .activity-time {
      font-size: 9px;
      color: var(--gray-400);
      white-space: nowrap;
      margin-top: 3px
    }

    /* Incidents panel */
    .inc-banner {
      display: flex;
      align-items: center;
      gap: 7px;
      background: var(--green-50);
      border: 1px solid #bbf7d0;
      border-radius: 8px;
      padding: 8px 10px;
      margin-bottom: 10px;
      font-size: 10.5px;
      color: #15803d;
      font-weight: 600
    }

    .inc-banner-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--green-500);
      animation: pulse 2s infinite;
      flex-shrink: 0
    }

    .inc-filters {
      display: flex;
      gap: 4px;
      margin-bottom: 10px;
      flex-wrap: wrap
    }

    .inc-filter {
      padding: 5px 10px;
      font-size: 11px;
      font-weight: 600;
      border-radius: 6px;
      background: var(--gray-100);
      color: var(--gray-600);
      cursor: pointer;
      border: 1px solid transparent;
      font-family: 'Sora', sans-serif;
      transition: all .15s;
      -webkit-tap-highlight-color: transparent
    }

    .inc-filter.active {
      background: var(--blue-500);
      color: #fff
    }

    .inc-table-head {
      display: grid;
      grid-template-columns: 2fr .8fr .8fr .7fr;
      gap: 6px;
      padding: 5px 8px;
      font-size: 9px;
      font-weight: 700;
      color: var(--gray-400);
      text-transform: uppercase;
      letter-spacing: .5px
    }

    .inc-row {
      display: grid;
      grid-template-columns: 2fr .8fr .8fr .7fr;
      gap: 6px;
      padding: 8px 8px;
      background: #FCFBF9;
      border: 1px solid var(--gray-200);
      border-radius: 8px;
      margin-bottom: 6px;
      align-items: center;
      animation: incidentPop .3s ease both
    }

    .inc-title-cell {
      font-size: 10.5px;
      font-weight: 700;
      color: var(--blue-500);
      line-height: 1.3
    }

    .inc-title-auto {
      font-size: 9px;
      font-weight: 800;
      background: var(--blue-50);
      color: var(--blue-500);
      padding: 1px 5px;
      border-radius: 4px;
      margin-left: 4px
    }

    .inc-cell {
      font-size: 10px;
      color: var(--gray-600);
      font-weight: 500
    }

    .severity-badge {
      font-size: 9.5px;
      font-weight: 800;
      padding: 2px 7px;
      border-radius: 5px
    }

    .severity-badge.low {
      background: var(--green-50);
      color: #16a34a
    }

    .status-badge {
      font-size: 9.5px;
      font-weight: 700;
      padding: 2px 7px;
      border-radius: 5px
    }

    .status-badge.analyzed {
      background: #FDF8F5;
      color: var(--blue-500)
    }

    .inc-view-btn {
      font-size: 10px;
      font-weight: 700;
      padding: 4px 9px;
      background: var(--blue-500);
      color: #fff;
      border-radius: 5px;
      border: none;
      cursor: pointer;
      font-family: 'Sora', sans-serif;
      -webkit-tap-highlight-color: transparent
    }

    /* AI Analysis panel */
    .ai-breadcrumb {
      font-size: 10px;
      color: var(--gray-400);
      margin-bottom: 8px
    }

    .ai-breadcrumb a {
      color: var(--blue-500)
    }

    .ai-banner {
      display: flex;
      align-items: center;
      gap: 7px;
      background: var(--green-50);
      border: 1px solid #bbf7d0;
      border-radius: 8px;
      padding: 8px 10px;
      margin-bottom: 8px;
      font-size: 10px;
      color: #15803d;
      font-weight: 600
    }

    .ai-incident-header {
      background: #FCFBF9;
      border: 1px solid var(--gray-200);
      border-radius: 10px;
      padding: 12px;
      margin-bottom: 10px
    }

    .ai-incident-title {
      font-size: 13px;
      font-weight: 800;
      color: var(--gray-900);
      margin-bottom: 8px;
      letter-spacing: -.2px
    }

    .ai-badges {
      display: flex;
      align-items: center;
      gap: 7px;
      margin-bottom: 10px;
      flex-wrap: wrap
    }

    .ai-badge {
      font-size: 10px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 5px
    }

    .ai-badge.low {
      background: var(--green-50);
      color: #16a34a
    }

    .ai-badge.analyzed {
      background: var(--blue-50);
      color: var(--blue-500)
    }

    .ai-meta-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px
    }

    .ai-meta-item {
      font-size: 9.5px
    }

    .ai-meta-label {
      color: var(--gray-400);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .4px;
      margin-bottom: 2px
    }

    .ai-meta-val {
      color: var(--gray-800);
      font-weight: 600
    }

    .ai-tabs {
      display: flex;
      gap: 0;
      border-bottom: 1px solid var(--gray-200);
      margin-bottom: 10px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none
    }

    .ai-tabs::-webkit-scrollbar {
      display: none
    }

    .ai-tab {
      padding: 7px 11px;
      font-size: 10.5px;
      font-weight: 600;
      color: var(--gray-500);
      cursor: pointer;
      border-bottom: 2px solid transparent;
      transition: all .15s;
      white-space: nowrap;
      -webkit-tap-highlight-color: transparent
    }

    .ai-tab.active {
      color: var(--blue-500);
      border-bottom-color: var(--blue-500)
    }

    .ai-content {
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 8px
    }

    .ai-box {
      background: #FCFBF9;
      border: 1px solid var(--gray-200);
      border-radius: 10px;
      padding: 12px
    }

    .ai-box-title {
      font-size: 10.5px;
      font-weight: 800;
      color: var(--gray-800);
      margin-bottom: 9px;
      text-transform: uppercase;
      letter-spacing: .3px
    }

    .ai-section-label {
      font-size: 9px;
      font-weight: 800;
      color: var(--gray-400);
      text-transform: uppercase;
      letter-spacing: .5px;
      margin-bottom: 4px
    }

    .ai-summary-text {
      font-size: 10.5px;
      color: var(--gray-700);
      line-height: 1.65;
      margin-bottom: 9px
    }

    .ai-reasoning-text {
      font-size: 10px;
      color: var(--gray-600);
      line-height: 1.65;
      margin-bottom: 9px
    }

    .ai-tags {
      display: flex;
      gap: 4px;
      flex-wrap: wrap
    }

    .ai-tag {
      font-size: 9px;
      font-weight: 700;
      padding: 2px 7px;
      border-radius: 5px;
      background: var(--blue-50);
      color: var(--blue-500)
    }

    .fix-text {
      font-size: 10px;
      color: var(--gray-700);
      line-height: 1.6;
      margin-bottom: 9px
    }

    .confidence-row {
      display: flex;
      align-items: center;
      gap: 7px;
      margin-bottom: 9px
    }

    .conf-label {
      font-size: 9px;
      font-weight: 700;
      color: var(--gray-500);
      text-transform: uppercase;
      letter-spacing: .4px
    }

    .conf-bar {
      flex: 1;
      height: 7px;
      background: var(--gray-100);
      border-radius: 4px;
      overflow: hidden
    }

    .conf-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--blue-500), var(--blue-400));
      border-radius: 4px;
      --w: 95%;
      animation: progressFill 1s ease-out .5s both
    }

    .conf-val {
      font-size: 11px;
      font-weight: 800;
      color: var(--blue-500)
    }

    .suspected-file {
      font-size: 9.5px;
      font-family: 'JetBrains Mono', monospace;
      color: var(--purple-500);
      background: #F8F3F6;
      padding: 5px 8px;
      border-radius: 6px;
      margin-bottom: 5px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .suspected-time {
      font-size: 9px;
      color: var(--gray-400)
    }

    /* Log panel */
    .log-banner {
      display: flex;
      align-items: center;
      gap: 7px;
      background: var(--green-50);
      border: 1px solid #bbf7d0;
      border-radius: 8px;
      padding: 8px 10px;
      margin-bottom: 10px;
      font-size: 10px;
      color: #15803d;
      font-weight: 600;
      flex-wrap: wrap
    }

    .log-stats-row {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 5px;
      margin-bottom: 10px
    }

    .log-stat {
      background: #FCFBF9;
      border: 1px solid var(--gray-200);
      border-radius: 8px;
      padding: 8px 4px;
      text-align: center
    }

    .log-stat-icon {
      font-size: 14px;
      margin-bottom: 3px
    }

    .log-stat-val {
      font-size: 15px;
      font-weight: 800;
      color: var(--gray-900);
      line-height: 1
    }

    .log-stat-val.red {
      color: var(--red-500)
    }

    .log-stat-val.orange {
      color: var(--orange-500)
    }

    .log-stat-lbl {
      font-size: 8.5px;
      color: var(--gray-500);
      text-transform: uppercase;
      letter-spacing: .3px;
      font-weight: 600
    }

    .log-terminal {
      background: #1e2432;
      border-radius: 10px;
      overflow: hidden
    }

    .log-terminal-header {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 12px;
      border-bottom: 1px solid rgba(255, 255, 255, .06)
    }

    .log-terminal-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%
    }

    .log-terminal-title {
      font-size: 10px;
      font-family: 'JetBrains Mono', monospace;
      color: rgba(255, 255, 255, .45)
    }

    .log-terminal-live {
      margin-left: auto;
      font-size: 9px;
      font-weight: 700;
      color: #22c55e;
      display: flex;
      align-items: center;
      gap: 4px
    }

    .log-terminal-live::before {
      content: '';
      display: block;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #22c55e;
      animation: pulse 1.5s infinite
    }

    .log-search {
      display: flex;
      align-items: center;
      gap: 0;
      padding: 7px 12px;
      border-bottom: 1px solid rgba(255, 255, 255, .06)
    }

    .log-search input {
      flex: 1;
      background: rgba(255, 255, 255, .07);
      border: none;
      outline: none;
      font-size: 11px;
      font-family: 'JetBrains Mono', monospace;
      color: rgba(255, 255, 255, .6);
      padding: 4px 8px;
      border-radius: 5px
    }

    .log-table-head {
      display: grid;
      grid-template-columns: 150px 72px 152px 1fr;
      gap: 8px;
      padding: 5px 10px;
      font-size: 9px;
      font-weight: 700;
      color: rgba(255, 255, 255, .3);
      text-transform: uppercase;
      letter-spacing: .5px
    }

    .log-row {
      display: grid;
      grid-template-columns: 150px 72px 152px 1fr;
      gap: 8px;
      padding: 7px 10px;
      border-top: 1px solid rgba(255, 255, 255, .04);
      align-items: start
    }

    .log-ts {
      font-size: 9.5px;
      font-family: 'JetBrains Mono', monospace;
      color: rgba(255, 255, 255, .35)
    }

    .log-level {
      font-size: 9px;
      font-weight: 800;
      padding: 2px 6px;
      border-radius: 4px;
      text-align: center
    }

    .log-level.error {
      background: rgba(239, 68, 68, .2);
      color: #f87171
    }

    .log-source {
      font-size: 9px;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 4px;
      background: rgba(255, 255, 255, .08);
      color: rgba(255, 255, 255, .5)
    }

    .log-msg {
      font-size: 9.5px;
      font-family: 'JetBrains Mono', monospace;
      color: rgba(255, 255, 255, .6);
      line-height: 1.4;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .log-msg.red {
      color: #f87171
    }

    /* ══════════ LOGOS ══════════ */
    .logos-section {
      padding: 28px 0;
      background: var(--gray-50);
      border-top: 1px solid var(--gray-200);
      border-bottom: 1px solid var(--gray-200);
      overflow: hidden
    }

    .logos-label {
      text-align: center;
      font-size: 11px;
      font-weight: 700;
      color: var(--gray-400);
      text-transform: uppercase;
      letter-spacing: 2px;
      margin-bottom: 18px
    }

    .logos-track {
      display: flex;
      width: max-content;
      animation: marquee 24s linear infinite
    }

    .logos-track:hover {
      animation-play-state: paused
    }

    .logos-set {
      display: flex;
      align-items: center;
      gap: 40px;
      padding: 0 20px
    }

    .logo-pill {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 700;
      color: var(--gray-400);
      white-space: nowrap;
      transition: color .2s;
      padding: 6px 0
    }

    .logo-pill:hover {
      color: var(--gray-700)
    }

    .logo-pill .em {
      font-size: 17px
    }

    /* ══════════ SECTIONS ══════════ */
    .section {
      padding: 80px 16px
    }

    .section.bg-gray {
      background: var(--gray-50)
    }

    .container {
      max-width: 1200px;
      margin: 0 auto
    }

    .container-sm {
      max-width: 820px;
      margin: 0 auto
    }

    .eyebrow-tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 700;
      color: var(--blue-500);
      text-transform: uppercase;
      letter-spacing: 1.5px;
      background: var(--blue-50);
      border: 1px solid var(--blue-100);
      padding: 4px 12px;
      border-radius: 20px;
      margin-bottom: 14px
    }

    .section-heading {
      font-size: clamp(26px, 4vw, 44px);
      font-weight: 800;
      letter-spacing: -1.5px;
      color: var(--gray-900);
      line-height: 1.08;
      margin-bottom: 14px
    }

    .section-sub {
      font-size: 15px;
      color: var(--gray-500);
      line-height: 1.8;
      max-width: 560px;
      margin: 0 auto 48px
    }

    .text-center {
      text-align: center
    }

    /* ══════════ FEATURES ══════════ */
    .features-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px
    }

    .feat {
      background: #FCFBF9;
      border: 1.5px solid var(--gray-200);
      border-radius: 16px;
      padding: 26px;
      transition: all .25s;
      position: relative;
      overflow: hidden
    }

    .feat::after {
      content: '';
      position: absolute;
      inset: 0;
      opacity: 0;
      background: linear-gradient(135deg, var(--blue-50), transparent 60%);
      transition: opacity .25s
    }

    .feat:hover {
      border-color: var(--blue-200);
      box-shadow: 0 10px 36px rgba(29, 78, 216, .1);
      transform: translateY(-4px)
    }

    .feat:hover::after {
      opacity: 1
    }

    .feat-icon {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;
      position: relative;
      z-index: 1
    }

    .feat-icon svg {
      width: 21px;
      height: 21px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.8
    }

    .feat-icon.blue {
      background: var(--blue-50);
      color: var(--blue-500)
    }

    .feat-icon.purple {
      background: #F8F3F6;
      color: var(--purple-500)
    }

    .feat-icon.green {
      background: var(--green-50);
      color: #16a34a
    }

    .feat-icon.orange {
      background: #fff7ed;
      color: var(--orange-500)
    }

    .feat-icon.red {
      background: #fef2f2;
      color: var(--red-500)
    }

    .feat-icon.indigo {
      background: #F0E3EC;
      color: #9B6B8E
    }

    .feat-title {
      font-size: 15px;
      font-weight: 700;
      color: var(--gray-900);
      margin-bottom: 8px;
      position: relative;
      z-index: 1
    }

    .feat-desc {
      font-size: 13px;
      color: var(--gray-500);
      line-height: 1.75;
      position: relative;
      z-index: 1
    }

    /* ══════════ HOW IT WORKS ══════════ */
    .how-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      max-width: 900px;
      margin: 0 auto;
      position: relative
    }

    .how-grid::before {
      content: '';
      position: absolute;
      top: 26px;
      left: 20%;
      right: 20%;
      height: 2px;
      background: linear-gradient(90deg, var(--blue-200), var(--blue-400), var(--blue-200));
      border-radius: 2px
    }

    .how-step {
      text-align: center;
      padding: 0 28px
    }

    .how-num {
      width: 54px;
      height: 54px;
      border-radius: 50%;
      background: linear-gradient(135deg, #D88E72, #9B6B8E);
      color: #fff;
      font-size: 20px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 18px;
      position: relative;
      z-index: 1;
      box-shadow: 0 4px 20px rgba(29, 78, 216, .35);
      transition: transform .2s
    }

    .how-step:hover .how-num {
      transform: scale(1.1)
    }

    .how-title {
      font-size: 15px;
      font-weight: 700;
      color: var(--gray-900);
      margin-bottom: 9px
    }

    .how-desc {
      font-size: 13px;
      color: var(--gray-500);
      line-height: 1.75
    }

    /* ══════════ STATS ══════════ */
    .stats-section {
      background: linear-gradient(135deg, var(--gray-900), #1F1D1B);
      position: relative;
      overflow: hidden
    }

    .stats-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 800px 400px at 50% 50%, rgba(29, 78, 216, .12), transparent 70%);
      pointer-events: none
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      max-width: 1000px;
      margin: 0 auto;
      position: relative;
      z-index: 1
    }

    .stat-block {
      text-align: center;
      padding: 56px 16px;
      border-right: 1px solid rgba(255, 255, 255, .07)
    }

    .stat-block:last-child {
      border-right: none
    }

    .stat-num {
      font-size: 42px;
      font-weight: 800;
      line-height: 1;
      margin-bottom: 12px;
      background: linear-gradient(135deg, var(--blue-300), #C4A3B8);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text
    }

    .stat-label {
      font-size: 13px;
      color: rgba(255, 255, 255, .45);
      line-height: 1.55;
      font-weight: 500
    }

    /* ══════════ INTEGRATIONS ══════════ */
    .int-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 12px;
      max-width: 960px;
      margin: 0 auto 28px
    }

    .int-card {
      background: #FCFBF9;
      border: 1.5px solid var(--gray-200);
      border-radius: 14px;
      padding: 20px 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 7px;
      text-align: center;
      transition: all .22s
    }

    .int-card:hover {
      border-color: var(--blue-200);
      box-shadow: 0 6px 20px rgba(29, 78, 216, .1);
      transform: translateY(-3px)
    }

    .int-em {
      font-size: 26px;
      width: 50px;
      height: 50px;
      border-radius: 14px;
      background: var(--gray-50);
      border: 1px solid var(--gray-100);
      display: flex;
      align-items: center;
      justify-content: center
    }

    .int-name {
      font-size: 13px;
      font-weight: 700;
      color: var(--gray-900)
    }

    .int-type {
      font-size: 10px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 8px;
      background: var(--blue-50);
      color: #C97A5D
    }

    .int-more {
      text-align: center;
      font-size: 14px;
      color: var(--gray-400)
    }

    .int-more a {
      color: var(--blue-500);
      font-weight: 600;
      text-decoration: underline;
      text-underline-offset: 3px
    }

    /* ══════════ PRICING ══════════ */
    .pricing-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
      max-width: 980px;
      margin: 0 auto;
      align-items: start
    }

    .pcard {
      background: #FCFBF9;
      border: 2px solid var(--gray-200);
      border-radius: 20px;
      padding: 28px 24px;
      position: relative;
      transition: all .22s
    }

    .pcard:hover {
      box-shadow: 0 14px 48px rgba(0, 0, 0, .09);
      transform: translateY(-3px)
    }

    .pcard.pop {
      border-color: var(--blue-500);
      box-shadow: 0 16px 56px rgba(29, 78, 216, .18);
      transform: translateY(-10px)
    }

    .pcard.pop:hover {
      transform: translateY(-13px)
    }

    .pcard-badge {
      position: absolute;
      top: -13px;
      left: 50%;
      transform: translateX(-50%);
      background: linear-gradient(135deg, #D88E72, #9B6B8E);
      color: #fff;
      font-size: 11px;
      font-weight: 800;
      padding: 3px 16px;
      border-radius: 20px;
      white-space: nowrap;
      box-shadow: 0 2px 8px rgba(29, 78, 216, .35)
    }

    .pcard-name {
      font-size: 11px;
      font-weight: 700;
      color: var(--gray-400);
      text-transform: uppercase;
      letter-spacing: 1.3px;
      margin-bottom: 16px
    }

    .pcard-price {
      margin-bottom: 7px;
      line-height: 1
    }

    .pcard-price .cur {
      font-size: 17px;
      font-weight: 600;
      color: var(--gray-500);
      vertical-align: top;
      margin-top: 6px;
      display: inline-block
    }

    .pcard-price .amt {
      font-size: 46px;
      font-weight: 800;
      color: var(--gray-900);
      letter-spacing: -2px
    }

    .pcard-price .per {
      font-size: 13px;
      color: var(--gray-400);
      font-weight: 500;
      margin-left: 2px
    }

    .pcard-desc {
      font-size: 13px;
      color: var(--gray-500);
      margin-bottom: 22px;
      line-height: 1.65
    }

    .pcard-hr {
      height: 1px;
      background: var(--gray-100);
      margin: 0 -4px 18px
    }

    .pcard-features {
      list-style: none;
      margin-bottom: 24px
    }

    .pcard-features li {
      display: flex;
      align-items: flex-start;
      gap: 9px;
      padding: 6px 0;
      font-size: 13px;
      color: var(--gray-600);
      border-bottom: 1px solid var(--gray-50)
    }

    .pcard-features li:last-child {
      border-bottom: none
    }

    .pcard-features li svg {
      width: 14px;
      height: 14px;
      stroke: var(--green-500);
      fill: none;
      stroke-width: 2.5;
      flex-shrink: 0;
      margin-top: 2px
    }

    .pcard-features li.no svg {
      stroke: var(--gray-300)
    }

    .pcard-features li.no {
      color: var(--gray-400)
    }

    .btn-pcard {
      display: block;
      width: 100%;
      padding: 12px;
      font-size: 14px;
      font-weight: 700;
      border-radius: 11px;
      cursor: pointer;
      transition: all .15s;
      border: 2px solid;
      font-family: 'Sora', sans-serif;
      -webkit-tap-highlight-color: transparent
    }

    .btn-pcard.outline {
      background: none;
      color: var(--blue-500);
      border-color: var(--blue-200)
    }

    .btn-pcard.outline:hover {
      background: var(--blue-50)
    }

    .btn-pcard.filled {
      background: linear-gradient(135deg, var(--blue-500), #7D4F70);
      color: #fff;
      border-color: transparent;
      box-shadow: 0 4px 18px rgba(29, 78, 216, .3)
    }

    .btn-pcard.filled:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 24px rgba(29, 78, 216, .45)
    }

    .pcard-note {
      text-align: center;
      font-size: 12px;
      color: var(--gray-400);
      margin-top: 10px
    }

    /* ══════════ TESTIMONIALS ══════════ */
    .testimonials-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px
    }

    .tcard {
      background: #FCFBF9;
      border: 1.5px solid var(--gray-200);
      border-radius: 16px;
      padding: 24px;
      transition: all .22s;
      position: relative
    }

    .tcard::before {
      content: '"';
      position: absolute;
      top: 12px;
      right: 18px;
      font-size: 60px;
      color: var(--blue-100);
      font-family: Georgia, serif;
      line-height: 1
    }

    .tcard:hover {
      border-color: var(--blue-200);
      box-shadow: 0 8px 28px rgba(29, 78, 216, .08);
      transform: translateY(-3px)
    }

    .tcard-text {
      font-size: 13.5px;
      color: var(--gray-600);
      line-height: 1.78;
      margin-bottom: 18px;
      font-style: italic
    }

    .tcard-author {
      display: flex;
      align-items: center;
      gap: 11px
    }

    .tcard-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 800;
      color: #fff;
      flex-shrink: 0
    }

    .tcard-name {
      font-size: 13.5px;
      font-weight: 700;
      color: var(--gray-900)
    }

    .tcard-role {
      font-size: 12px;
      color: var(--gray-500)
    }

    .tcard-stars {
      color: #E5A83B;
      font-size: 12px;
      letter-spacing: 1px;
      margin-bottom: 12px
    }

    /* ══════════ FAQ ══════════ */
    .faq-list {
      max-width: 740px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 8px
    }

    .faq-item {
      background: #FCFBF9;
      border: 1.5px solid var(--gray-200);
      border-radius: 14px;
      overflow: hidden;
      transition: border-color .15s
    }

    .faq-item.open {
      border-color: var(--blue-200);
      box-shadow: 0 4px 16px rgba(29, 78, 216, .07)
    }

    .faq-q {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 20px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 600;
      color: var(--gray-900);
      background: none;
      border: none;
      width: 100%;
      text-align: left;
      gap: 12px;
      transition: color .15s;
      font-family: 'Sora', sans-serif;
      -webkit-tap-highlight-color: transparent
    }

    .faq-q:hover {
      color: #C97A5D
    }

    .faq-chevron {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
      stroke: var(--gray-400);
      fill: none;
      stroke-width: 2.2;
      transition: transform .28s, stroke .28s
    }

    .faq-item.open .faq-chevron {
      transform: rotate(180deg);
      stroke: var(--blue-500)
    }

    .faq-body {
      height: 0;
      overflow: hidden;
      transition: height .3s ease
    }

    .faq-body-inner {
      padding: 0 20px 18px;
      font-size: 14px;
      color: var(--gray-500);
      line-height: 1.8
    }

    /* ══════════ CTA ══════════ */
    .cta-section {
      padding: 88px 16px;
      text-align: center;
      background: linear-gradient(135deg, #FDF8F5, #F8F3F6, #FCF5F9);
      border-top: 1px solid var(--blue-100);
      position: relative;
      overflow: hidden
    }

    .cta-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 700px 400px at 50% 50%, rgba(29, 78, 216, .06), transparent 70%)
    }

    .cta-inner {
      position: relative;
      z-index: 1
    }

    .cta-h2 {
      font-size: clamp(28px, 4.2vw, 50px);
      font-weight: 800;
      letter-spacing: -1.8px;
      color: var(--gray-900);
      margin-bottom: 14px;
      line-height: 1.08
    }

    .cta-sub {
      font-size: 16px;
      color: var(--gray-500);
      margin: 0 auto 36px;
      max-width: 460px;
      line-height: 1.7
    }

    .cta-note {
      font-size: 13px;
      color: var(--gray-400);
      margin-top: 16px
    }

    /* ══════════ FOOTER ══════════ */
    .footer {
      background: var(--gray-900);
      padding: 60px 16px 24px;
      padding-bottom: calc(24px + var(--safe-bottom))
    }

    .footer-inner {
      max-width: 1200px;
      margin: 0 auto
    }

    .footer-top {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
      gap: 40px;
      margin-bottom: 40px
    }

    .footer-brand-row {
      display: flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 12px
    }

    .footer-logo {
      width: 30px;
      height: 30px;
      background: linear-gradient(135deg, #D88E72, #9B6B8E);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .footer-name {
      font-size: 17px;
      font-weight: 800;
      color: #fff
    }

    .footer-desc {
      font-size: 13px;
      color: rgba(255, 255, 255, .35);
      line-height: 1.75;
      max-width: 230px;
      margin-bottom: 20px
    }

    .footer-social {
      display: flex;
      gap: 8px
    }

    .footer-social a {
      width: 34px;
      height: 34px;
      border-radius: 8px;
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(255, 255, 255, .1);
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255, 255, 255, .4);
      transition: all .15s;
      -webkit-tap-highlight-color: transparent
    }

    .footer-social a:hover {
      background: rgba(255, 255, 255, .13);
      color: #fff
    }

    .footer-social a svg {
      width: 14px;
      height: 14px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2
    }

    .footer-col-title {
      font-size: 10px;
      font-weight: 700;
      color: rgba(255, 255, 255, .35);
      text-transform: uppercase;
      letter-spacing: 1.3px;
      margin-bottom: 16px
    }

    .footer-links {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 11px
    }

    .footer-links a {
      font-size: 13px;
      color: rgba(255, 255, 255, .38);
      transition: color .15s
    }

    .footer-links a:hover {
      color: rgba(255, 255, 255, .85)
    }

    .footer-hr {
      height: 1px;
      background: rgba(255, 255, 255, .07);
      margin-bottom: 22px
    }

    .footer-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
      font-size: 12px;
      color: rgba(255, 255, 255, .22)
    }

    .footer-bottom-links {
      display: flex;
      gap: 18px
    }

    .footer-bottom-links a {
      color: rgba(255, 255, 255, .22);
      transition: color .15s
    }

    .footer-bottom-links a:hover {
      color: rgba(255, 255, 255, .6)
    }

    /* ══════════ MOBILE STICKY CTA ══════════ */
    .mobile-sticky-cta {
      display: none;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: #FCFBF9;
      border-top: 1px solid var(--gray-200);
      padding: 12px 16px;
      padding-bottom: calc(12px + var(--safe-bottom));
      z-index: 150;
      box-shadow: 0 -8px 24px rgba(0, 0, 0, .08)
    }

    .mobile-sticky-cta a {
      display: block
    }

    .mobile-sticky-cta .btn-primary {
      width: 100%;
      justify-content: center;
      padding: 14px
    }

    /* ══════════ RESPONSIVE ══════════ */

    /* Tablet */
    @media(max-width:1024px) {
      .hero-inner {
        grid-template-columns: 1fr;
        gap: 36px
      }

      .features-grid {
        grid-template-columns: repeat(2, 1fr)
      }

      .stats-grid {
        grid-template-columns: repeat(2, 1fr)
      }

      .stat-block {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, .07)
      }

      .stat-block:nth-child(odd) {
        border-right: 1px solid rgba(255, 255, 255, .07)
      }

      .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 420px
      }

      .pcard.pop {
        transform: none
      }

      .testimonials-grid {
        grid-template-columns: 1fr 1fr
      }

      .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 28px
      }

      .how-grid::before {
        left: 16%;
        right: 16%
      }
    }

    /* Mobile */
    @media(max-width:768px) {
      .hero {
        padding: 44px 16px 52px
      }

      .nav-links,
      .nav-actions {
        display: none
      }

      .nav-mobile-btn {
        display: flex
      }

      .section {
        padding: 56px 16px
      }

      .features-grid {
        grid-template-columns: 1fr
      }

      .how-grid {
        grid-template-columns: 1fr;
        gap: 32px
      }

      .how-grid::before {
        display: none
      }

      .how-step {
        padding: 0 16px
      }

      .testimonials-grid {
        grid-template-columns: 1fr
      }

      .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 24px
      }

      .hero-inner {
        grid-template-columns: 1fr;
        gap: 32px
      }

      .hero-sub {
        font-size: 15px
      }

      .hero-btns {
        flex-direction: column
      }

      .hero-btns .btn-primary,
      .hero-btns .btn-outline {
        width: 100%;
        justify-content: center
      }

      /* Product window mobile */
      .pw-frame {
        animation: none;
        border-radius: 12px
      }

      .product-showcase::before {
        display: none
      }

      /* AI content stack */
      .ai-content {
        grid-template-columns: 1fr
      }

      .ai-meta-grid {
        grid-template-columns: repeat(2, 1fr)
      }

      /* Dash row stack */
      .dash-row {
        grid-template-columns: 1fr
      }

      /* Log table simplified */
      .log-table-head {
        grid-template-columns: 95px 48px 1fr
      }

      .log-row {
        grid-template-columns: 95px 48px 1fr
      }

      .log-table-head span:nth-child(3),
      .log-row .log-source {
        display: none
      }

      /* Incidents simplified */
      .inc-table-head {
        grid-template-columns: 1.5fr .8fr .7fr
      }

      .inc-row {
        grid-template-columns: 1.5fr .8fr .7fr
      }

      .inc-table-head span:nth-child(4),
      .inc-row .inc-view-btn {
        display: none
      }

      /* Stats */
      .stats-grid {
        grid-template-columns: 1fr 1fr
      }

      .stat-block {
        padding: 36px 12px;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, .07)
      }

      .stat-block:nth-child(odd) {
        border-right: 1px solid rgba(255, 255, 255, .07)
      }

      .stat-num {
        font-size: 34px
      }

      /* Pricing */
      .pricing-grid {
        max-width: 100%
      }

      .pcard.pop {
        transform: none;
        margin-top: 16px
      }

      /* Footer */
      .footer-top {
        grid-template-columns: 1fr 1fr
      }

      .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px
      }

      /* Mobile sticky CTA */
      .mobile-sticky-cta {
        display: block
      }

      .cta-section {
        padding-bottom: 100px
      }
    }

    /* Small phones */
    @media(max-width:420px) {
      .hero-h1 {
        font-size: 30px;
        letter-spacing: -1.5px
      }

      .hero {
        padding: 36px 14px 48px
      }

      .section {
        padding: 48px 14px
      }

      .features-grid {
        gap: 12px
      }

      .feat {
        padding: 20px
      }

      .dash-stats {
        grid-template-columns: 1fr 1fr;
        gap: 5px
      }

      .dash-stats .dash-stat:last-child {
        grid-column: 1/-1
      }

      .log-stats-row {
        grid-template-columns: repeat(3, 1fr)
      }

      .log-stats-row .log-stat:nth-child(n+4) {
        display: none
      }

      .pw-tab {
        font-size: 10.5px;
        padding: 8px 8px
      }

      .footer-top {
        grid-template-columns: 1fr
      }

      .int-grid {
        grid-template-columns: repeat(2, 1fr)
      }

      .pricing-grid {
        padding: 0 0
      }
    }

    /* Landscape mobile */
    @media(max-width:768px) and (orientation:landscape) {
      .hero {
        padding: 32px 16px 40px
      }

      .mobile-sticky-cta {
        display: none
      }
    }

    /* Touch friendly tap targets */
    @media(hover:none) {
      .feat:hover {
        transform: none;
        box-shadow: none
      }

      .int-card:hover {
        transform: none;
        box-shadow: none
      }

      .tcard:hover {
        transform: none;
        box-shadow: none
      }

      .pcard:hover {
        transform: none;
        box-shadow: none
      }

      .pcard.pop:hover {
        transform: none
      }
    }

/* ═══════════════════════════════════════════════════════════════
   PROFESSIONAL POLISH OVERRIDES (global, safe)
   ═══════════════════════════════════════════════════════════════ */

/* Smaller, cleaner app typography */
html { font-size: 14px; }
body { font-size: 14px; line-height: 1.5; }
.page-title { font-size: 1.65rem; letter-spacing: -0.02em; }
.section-title, .card-title { font-size: 1rem; }
.card-sub, .empty-desc, .stat-label, .tl-detail, .ai-evtl-detail { font-size: 0.875rem; }

/* Better spacing density */
.page-content { padding: 20px; }
.card, .table-card, .table-wrap, .susp-commits-section, .ai-evtl-section { border-radius: 14px; }
.card { padding: 18px; }

/* Timeline: stronger icon visuals + professional spacing */
.tl-spine {
  width: 48px !important;
  min-width: 48px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  overflow: visible !important;
}

.tl-item {
  overflow: visible !important;
}
.tl-dot {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}
.tl-dot svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
}
.tl-line {
  width: 1.5px;
  background: linear-gradient(to bottom, #DCCFC6, transparent);
}
.tl-body {
  padding: 10px 10px 14px 2px;
  border-bottom: 1px solid #EFEAE4;
}
.tl-label {
  font-size: 1.06rem;
  margin-bottom: 2px;
}
.tl-time {
  font-size: 0.8rem;
  letter-spacing: .02em;
}
.tl-chips { gap: 5px; margin-top: 7px; }
.tl-chip {
  font-size: 0.78rem;
  border-radius: 999px;
  padding: 3px 10px;
}

/* Incident detail timeline (ai-evtl) */
.ai-evtl-item { gap: 6px; }
.ai-evtl-time-col { font-size: 0.78rem; width: 62px; }
.ai-evtl-dot {
  width: 12px;
  height: 12px;
  border-width: 2px;
  background: #FDFCFB;
}
.ai-evtl-event { font-size: 0.96rem; }

/* Tables and filters: compact professional look */
thead th { font-size: 0.74rem; letter-spacing: .08em; }
tbody td { font-size: 0.88rem; }
.filter-tabs .ftab, .tab-btn, .btn, .btn-sm, .tb-btn { font-size: 0.85rem; }
.search-box input, .light-input, input, select, textarea { font-size: 0.9rem; }

/* Index GIF demo section */
.gif-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.gif-card {
  background: #fff;
  border: 1px solid #E8E5E0;
  border-radius: 12px;
  padding: 12px;
}
.gif-card h3 {
  font-size: 0.98rem;
  margin: 10px 0 6px;
  color: #1A1816;
}
.gif-card p {
  font-size: 0.88rem;
  color: #5C5752;
  line-height: 1.55;
  margin: 0;
}
.gif-media-wrap {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #EDE8E3;
  background: #FAF9F7;
  min-height: 178px;
  display: flex;
}
.gif-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gif-fallback {
  width: 100%;
  min-height: 178px;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 14px;
  color: #706B66;
  font-size: 0.86rem;
}
@media (max-width: 980px) {
  .gif-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* Responsive tightening */
@media (max-width: 1200px) {
  #stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  #stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dash-grid > .card, .dash-grid-3 > .card { min-height: 220px; }
}
@media (max-width: 768px) {
  html { font-size: 13px; }
  .page-content { padding: 12px !important; }
  #stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #stats-grid .stat-card {
    min-height: auto;
    grid-template-columns: 44px 1fr;
    padding: 10px 8px;
  }
  #stats-grid .stat-icon-wrap { width: 36px; height: 36px; }
  .timeline-wrap { padding-left: 36px; }
  .timeline-wrap::before { left: 16px; }
  .tl-dot { left: -24px; width: 16px; height: 16px; border-radius: 6px; }
  .tl-spine { width: 34px; }
  .tl-dot svg { width: 12px; height: 12px; }
}

    .lx-diff{padding:96px 0;background:#FCFBF9;position:relative;overflow:hidden}
.lx-diff::before{content:'';position:absolute;top:-120px;right:-200px;width:600px;height:600px;background:radial-gradient(circle,rgba(29,78,216,.04) 0%,transparent 70%);pointer-events:none}
.lx-diff .container{max-width:1100px;margin:0 auto;padding:0 24px}
.lx-diff-top{text-align:center;margin-bottom:56px}
.lx-diff-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;color:#D88E72;text-transform:uppercase;letter-spacing:1.2px;margin-bottom:20px}
.lx-diff-eyebrow::before{content:'';width:20px;height:2px;background:#D88E72;border-radius:2px;display:inline-block}
.lx-diff-h2{font-size:clamp(28px,4vw,44px);font-weight:800;color:#1A1816;line-height:1.15;margin:0 0 16px;letter-spacing:-0.5px}
.lx-diff-h2 span{color:#D88E72}
.lx-diff-sub{font-size:17px;color:#706B66;line-height:1.7;max-width:560px;margin:0 auto}
 
/* ── Table wrapper ── */
.lx-diff-table-wrap{border-radius:16px;overflow:hidden;border:1.5px solid #EEEAE5;box-shadow:0 4px 32px rgba(0,0,0,.06);margin-bottom:32px}
@media(max-width:640px){.lx-diff-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px}}
 
/* ── Table ── */
.lx-diff-table{width:100%;border-collapse:collapse;min-width:560px}
 
/* thead */
.lx-diff-table thead tr{background:#FDFCFB;border-bottom:1.5px solid #EEEAE5}
.lx-diff-table thead th{padding:14px 20px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:#A39E99;text-align:center}
.lx-diff-table thead th.lx-feat-h{text-align:left;width:36%}
.lx-diff-table thead th.lx-lexro-h{background:linear-gradient(135deg,#D88E72,#D88E72);color:#fff;font-size:12px;font-weight:800;letter-spacing:1px;width:16%}
 
/* tbody */
.lx-diff-table tbody tr{border-bottom:1px solid #F8F6F3;transition:background .15s}
.lx-diff-table tbody tr:last-child{border-bottom:none}
.lx-diff-table tbody tr:hover{background:#FDFCFB}
.lx-diff-table tbody td{padding:14px 20px;font-size:13.5px;color:#4A4541;vertical-align:middle;text-align:center}
.lx-diff-table tbody td.lx-feat-cell{text-align:left;font-weight:600;color:#2B2926;padding-left:20px}
.lx-diff-table tbody td.lx-feat-cell small{display:block;font-size:11.5px;font-weight:400;color:#A39E99;margin-top:2px}
.lx-diff-table tbody td.lx-lexro-cell{background:rgba(29,78,216,.03);border-left:1px solid rgba(29,78,216,.1);border-right:1px solid rgba(29,78,216,.1)}
 
/* icons */
.lx-check{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;background:#dcfce7;border-radius:50%;color:#15803d;font-size:13px;font-weight:700}
.lx-cross{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;background:#F8F6F3;border-radius:50%;color:#D4D0CB;font-size:13px}
.lx-partial{display:inline-flex;align-items:center;font-size:11px;font-weight:700;color:#b45309;background:#fef3c7;padding:2px 9px;border-radius:20px;white-space:nowrap}
.lx-green{font-size:13px;font-weight:800;color:#15803d}
.lx-muted{font-size:12px;color:#A39E99}
 
/* ── Stats strip ── */
.lx-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#EEEAE5;border-radius:16px;overflow:hidden;margin-bottom:32px}
@media(max-width:640px){.lx-stats{grid-template-columns:1fr}}
.lx-stat{background:#FCFBF9;padding:28px 24px;text-align:center}
.lx-stat-num{font-size:36px;font-weight:900;color:#D88E72;line-height:1;letter-spacing:-1px;font-family:'JetBrains Mono',monospace}
.lx-stat-lbl{font-size:13px;color:#706B66;margin-top:8px;line-height:1.5}
 
/* ── Quote ── */
.lx-quote{padding:32px 40px;background:linear-gradient(135deg,#FDF8F5,#FDF8F5);border-radius:20px;border:1.5px solid #F6E4DA;display:flex;align-items:flex-start;gap:20px}
@media(max-width:640px){.lx-quote{flex-direction:column;padding:24px 20px;gap:8px}}
.lx-quote-mark{font-size:72px;line-height:.6;color:#F6E4DA;font-family:Georgia,serif;flex-shrink:0;margin-top:4px}
@media(max-width:640px){.lx-quote-mark{font-size:48px}}
.lx-quote-body{}
.lx-quote-text{font-size:17px;font-weight:600;color:#2B2926;line-height:1.65;font-style:italic}
@media(max-width:640px){.lx-quote-text{font-size:14.5px}}
.lx-quote-author{margin-top:12px;font-size:13px;font-weight:700;color:#D88E72}
 
/* ── Mobile padding ── */
@media(max-width:768px){
  .lx-diff{padding:64px 0}
  .lx-diff .container{padding:0 16px}
  .lx-diff-top{margin-bottom:36px}
  .lx-diff-sub{font-size:15px}
}

@media (max-width: 768px) {
  .pricing-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
}

@media (max-width: 480px) {
  .pricing-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}
.btn-hero {
  height: 48px;
  padding: 0 26px;
  background: #D88E72 !important;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  color: #fff !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 4px 14px rgba(29,78,216,.3);
}
.btn-hero:hover { background: #C97A5D !important; }

@media (max-width: 768px) {
  .btn-hero, .btn-hero-out {
    width: 100%;
    justify-content: center;
  }
}

.video-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 15, 0.62);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease;
  z-index: 1200;
}
.video-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  width: min(920px, calc(100vw - 28px));
  transform: translate(-50%, -50%) scale(.98);
  background: #fff;
  border: 1px solid #E8E5E0;
  border-radius: 14px;
  box-shadow: 0 18px 70px rgba(0, 0, 0, .28);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 1201;
}
.video-modal.open,
.video-modal-overlay.open {
  opacity: 1;
  visibility: visible;
}
.video-modal.open {
  transform: translate(-50%, -50%) scale(1);
}
.video-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid #EEEAE5;
}
.video-modal-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #1A1816;
}
.video-modal-close {
  border: 1px solid #E8E5E0;
  background: #FCFBF9;
  color: #706B66;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1;
}
.video-modal-body {
  padding: 12px;
}
.video-modal-body video {
  display: block;
  width: 100%;
  max-height: min(72vh, 620px);
  border-radius: 10px;
  background: #111827;
}
.video-modal-note {
  margin: 10px 2px 2px;
  font-size: 12px;
  color: #706B66;
}

/* ── Reset & Base ── */
    html { scroll-behavior: smooth; }
    body {
      font-family: 'Sora', sans-serif;
      background: #FDFCFB;
      color: #1A1816;
      line-height: 1.6;
      overflow-x: hidden;
    }
    a { text-decoration: none; color: inherit; }
    button { cursor: pointer; font-family: inherit; }
    ul { list-style: none; }

    /* ── CSS Variables ── */
    :root {
      --blue: #D88E72;
      --blue-light: #E2AA94;
      --blue-dark: #D88E72;
      --blue-bg: #FDF8F5;
      --blue-bd: #F6E4DA;
      --purple: #9B6B8E;
      --green: #16a34a;
      --red: #dc2626;
      --text: #1A1816;
      --muted: #706B66;
      --border: #EEEAE5;
      --surface: #ffffff;
      --gray-bg: #F8F6F3;
      --radius: 14px;
      --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
      --shadow: 0 4px 16px rgba(0,0,0,.08);
      --shadow-lg: 0 8px 32px rgba(0,0,0,.10);
    }

    /* ── Container ── */
    .container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
    .container-sm { max-width: 760px; margin: 0 auto; padding: 0 24px; }

    /* ── Section ── */
    .section { padding: 88px 0; }
    .section-alt { background: #FDFCFB; }

    /* ── Typography ── */
    .eyebrow {
      display: inline-flex; align-items: center; gap: 7px;
      font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
      color: var(--blue); background: var(--blue-bg); border: 1px solid var(--blue-bd);
      padding: 5px 14px; border-radius: 30px; margin-bottom: 20px;
    }
    .eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); animation: blink 2s infinite; }

    h1 { font-size: clamp(36px,4.5vw,60px); font-weight: 900; line-height: 1.08; letter-spacing: -2px; color: var(--text); margin-bottom: 20px; }
    h1 .accent { color: var(--blue); }
    h2.section-h { font-size: clamp(26px,3vw,42px); font-weight: 800; line-height: 1.15; letter-spacing: -1px; color: var(--text); margin-bottom: 16px; }
    .section-sub { font-size: 16px; color: var(--muted); max-width: 560px; margin: 0 auto 48px; text-align: center; line-height: 1.75; }
    .text-center { text-align: center; }

    /* ── Buttons ── */
    .btn { display: inline-flex; align-items: center; gap: 8px; border: none; border-radius: 10px; font-family: inherit; font-weight: 700; font-size: 15px; padding: 0 26px; height: 48px; transition: all .15s; cursor: pointer; }
    .btn-primary { background: var(--blue-dark); color: #fff; box-shadow: 0 4px 14px rgba(29,78,216,.25); }
    .btn-primary:hover { background: var(--blue); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(29,78,216,.3); }
    .btn-outline { background: #FCFBF9; color: var(--text); border: 1.5px solid var(--border); }
    .btn-outline:hover { border-color: #A39E99; }
    .btn-ghost { background: transparent; color: var(--muted); border: none; font-size: 14px; font-weight: 600; padding: 0 14px; height: 38px; border-radius: 8px; }
    .btn-ghost:hover { background: var(--gray-bg); color: var(--text); }
    .btn-cta { background: var(--blue-dark); color: #fff; font-size: 14px; font-weight: 700; padding: 0 20px; height: 38px; border-radius: 8px; border: none; }
    .btn-cta:hover { background: var(--blue); }

    /* ── NAV ── */
    .nav {
      position: sticky; top: 0; z-index: 100;
      background: rgba(255,255,255,.9); backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border);
    }
    .nav-inner { max-width: 1160px; margin: 0 auto; padding: 0 24px; height: 64px; display: flex; align-items: center; gap: 32px; }
    .nav-brand { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; color: var(--text); }
    .nav-brand svg { width: 32px; height: 32px; }
    .nav-links { display: flex; align-items: center; gap: 4px; flex: 1; }
    .nav-links a { font-size: 14px; font-weight: 500; color: var(--muted); padding: 7px 12px; border-radius: 8px; transition: all .12s; }
    .nav-links a:hover { color: var(--text); background: var(--gray-bg); }
    .nav-links a.demo { color: var(--blue); font-weight: 700; }
    .nav-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
    .nav-hamburger { display: none; background: none; border: none; padding: 4px; cursor: pointer; }
    .nav-hamburger svg { width: 22px; height: 22px; stroke: var(--text); stroke-width: 2; fill: none; }

    /* Mobile Menu */
    .mobile-menu { display: none; position: fixed; top: 65px; left: 0; right: 0; background: #FCFBF9; border-bottom: 1px solid var(--border); z-index: 99; padding: 16px 24px 24px; flex-direction: column; gap: 4px; box-shadow: var(--shadow); }
    .mobile-menu.open { display: flex; }
    .mobile-menu a { font-size: 15px; font-weight: 500; color: var(--text); padding: 10px 12px; border-radius: 8px; }
    .mobile-menu a:hover { background: var(--gray-bg); }
    .mobile-menu-actions { display: flex; gap: 10px; margin-top: 12px; }

    @media (max-width: 768px) {
      .nav-links, .nav-actions { display: none; }
      .nav-hamburger { display: block; margin-left: auto; }
    }

    /* ── HERO ── */
    .hero { padding: 88px 0 72px; }
    .hero-grid { max-width: 1160px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
    @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }
    .hero-p { font-size: 16.5px; color: var(--muted); line-height: 1.75; max-width: 500px; margin-bottom: 32px; }
    .hero-p strong { color: var(--text); font-weight: 600; }
    .hero-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
    .hero-note { font-size: 13px; color: #A39E99; }
    .hero-proof { display: flex; align-items: center; gap: 12px; margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--border); }
    .avatars { display: flex; }
    .avatar { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; margin-left: -8px; }
    .avatar:first-child { margin-left: 0; }
    .stars { color: #f59e0b; font-size: 13px; letter-spacing: 1px; }
    .proof-text { font-size: 13px; color: var(--muted); margin-top: 2px; }
    .proof-text strong { color: var(--text); }

    /* Product Frame */
    .pw-frame { background: #FCFBF9; border: 1.5px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden; }
    .pw-titlebar { background: #FDFCFB; border-bottom: 1px solid var(--border); padding: 10px 14px; display: flex; align-items: center; gap: 8px; }
    .pw-dot { width: 10px; height: 10px; border-radius: 50%; }
    .pw-dot.r { background: #ef4444; }
    .pw-dot.y { background: #f59e0b; }
    .pw-dot.g { background: #22c55e; }
    .pw-url { flex: 1; text-align: center; font-size: 11px; font-family: 'JetBrains Mono', monospace; color: #A39E99; background: #FCFBF9; border: 1px solid var(--border); padding: 3px 10px; border-radius: 6px; max-width: 180px; margin: 0 auto; }
    .pw-live { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; color: var(--green); }
    .pw-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: blink 1.5s infinite; }

    .pw-tabs { display: flex; gap: 2px; padding: 10px 14px 0; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
    .pw-tabs::-webkit-scrollbar { display: none; }
    .pw-tab { font-size: 12px; font-weight: 600; color: var(--muted); padding: 8px 12px; border-radius: 8px 8px 0 0; cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: 6px; border: 1px solid transparent; border-bottom: none; transition: all .12s; }
    .pw-tab.active { color: var(--blue); background: #FCFBF9; border-color: var(--border); margin-bottom: -1px; }
    .tab-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .5; }
    .pw-tab.active .tab-dot { opacity: 1; }
    .pw-panels { background: #FCFBF9; padding: 14px; min-height: 320px; }
    .pw-panel { display: none; }
    .pw-panel.active { display: block; }

    /* ── LOGOS STRIP ── */
    .logos-section { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 22px 0; overflow: hidden; }
    .logos-label { text-align: center; font-size: 12px; font-weight: 700; color: #A39E99; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 16px; }
    .logos-track { display: flex; gap: 12px; animation: scroll-logos 28s linear infinite; width: max-content; }
    .logos-track:hover { animation-play-state: paused; }
    @keyframes scroll-logos { from { transform: translateX(0); } to { transform: translateX(-50%); } }
    .logo-pill { display: inline-flex; align-items: center; gap: 8px; background: #FDFCFB; border: 1px solid var(--border); border-radius: 30px; padding: 7px 18px; font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; }

    /* ── FEATURES ── */
    .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
    @media (max-width: 900px) { .features-grid { grid-template-columns: 1fr; } }
    @media (min-width: 600px) and (max-width: 900px) { .features-grid { grid-template-columns: repeat(2,1fr); } }
    .feat { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 28px; transition: box-shadow .2s, transform .2s; }
    .feat:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
    .feat-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
    .feat-icon.blue { background: var(--blue-bg); }
    .feat-icon.purple { background: #F8F3F6; }
    .feat-icon.green { background: #f0fdf4; }
    .feat-icon.orange { background: #fff7ed; }
    .feat-icon svg { width: 22px; height: 22px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .feat-icon.blue svg { stroke: var(--blue); }
    .feat-icon.purple svg { stroke: var(--purple); }
    .feat-icon.green svg { stroke: var(--green); }
    .feat-icon.orange svg { stroke: #ea580c; }
    .feat h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; color: var(--text); }
    .feat p { font-size: 14px; color: var(--muted); line-height: 1.7; }

    /* ── PIPELINE ── */
    .pipeline { display: flex; align-items: flex-start; justify-content: center; gap: 0; overflow-x: auto; margin: 48px 0 28px; padding: 4px 0 8px; scrollbar-width: none; }
    .pipeline::-webkit-scrollbar { display: none; }
    .pipe-step { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 1; min-width: 120px; max-width: 175px; text-align: center; }
    .pipe-icon { width: 60px; height: 60px; border-radius: 16px; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); }
    .pipe-icon svg { width: 24px; height: 24px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .pipe-time { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; color: #A39E99; background: var(--gray-bg); border: 1px solid var(--border); padding: 2px 9px; border-radius: 20px; }
    .pipe-label { font-size: 13px; font-weight: 700; color: var(--text); }
    .pipe-desc { font-size: 11.5px; color: var(--muted); line-height: 1.5; max-width: 110px; }
    .pipe-conn { display: flex; align-items: center; padding-bottom: 56px; flex-shrink: 0; width: 48px; min-width: 24px; }
    .pipe-line { flex: 1; height: 2px; background: var(--border); border-radius: 2px; position: relative; overflow: hidden; }
    .pipe-line::after { content: ''; position: absolute; top: -1px; left: -80%; width: 80%; height: 4px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--blue) 40%, #818cf8 60%, transparent); animation: pipe-flow 2.4s ease-in-out infinite; }
    @keyframes pipe-flow { from { left: -80%; } to { left: 100%; } }
    .pipe-arrow { width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 6px solid #D4D0CB; }
    @media (max-width: 768px) { .pipe-conn { display: none; } .pipe-step { min-width: 90px; } .pipe-desc { display: none; } }

    /* ── STATS ── */
    .stats-section { background: linear-gradient(135deg, #D88E72 0%, #7D4F70 100%); padding: 72px 0; }
    .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
    @media (max-width: 768px) { .stats-grid { grid-template-columns: repeat(2,1fr); } }
    .stat-item { text-align: center; }
    .stat-num { font-size: clamp(1.6rem, 2.4vw, 1.5rem); font-weight: 900; color: #fff; font-family: 'JetBrains Mono', monospace; line-height: 1; margin-bottom: 8px; }
    .stat-label { font-size: 13px; color: rgba(255,255,255,.75); font-weight: 500; line-height: 1.5; }

    /* ── INTEGRATIONS ── */
    .int-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 48px; }
    @media (max-width: 768px) { .int-grid { grid-template-columns: repeat(3,1fr); } }
    @media (max-width: 480px) { .int-grid { grid-template-columns: repeat(2,1fr); } }
    .int-card { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 24px 16px; text-align: center; transition: all .2s; }
    .int-card:hover { border-color: var(--blue-bd); background: var(--blue-bg); transform: translateY(-2px); box-shadow: var(--shadow); }
    .int-em { font-size: 28px; margin-bottom: 10px; }
    .int-name { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
    .int-type { font-size: 11px; color: var(--muted); font-weight: 500; }

    /* ── TESTIMONIALS ── */
    .test-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
    @media (max-width: 768px) { .test-grid { grid-template-columns: 1fr; } }
    .tcard { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 16px; transition: box-shadow .2s; }
    .tcard:hover { box-shadow: var(--shadow); }
    .tcard-stars { color: #f59e0b; font-size: 14px; letter-spacing: 2px; }
    .tcard-text { font-size: 14.5px; color: var(--text); line-height: 1.75; flex: 1; font-style: italic; }
    .tcard-author { display: flex; align-items: center; gap: 12px; }
    .tcard-avatar { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #fff; flex-shrink: 0; }
    .tcard-name { font-size: 14px; font-weight: 700; color: var(--text); }
    .tcard-role { font-size: 12px; color: var(--muted); margin-top: 1px; }

    /* ── BEFORE / AFTER ── */
    .vs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 48px; }
    @media (max-width: 768px) { .vs-grid { grid-template-columns: 1fr; } }
    .vs-card { border-radius: 20px; padding: 28px; border: 1.5px solid; }
    .vs-before { background: #fafafa; border-color: var(--border); }
    .vs-after { background: linear-gradient(145deg, #FDF8F5, #FDF8F5); border-color: var(--blue-bd); box-shadow: 0 8px 36px rgba(29,78,216,.09); }
    .vs-head { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
    .vs-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
    .vs-title { font-size: 17px; font-weight: 800; }
    .vs-subtitle { font-size: 12px; color: var(--muted); margin-top: 2px; }
    .vs-steps { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
    .vs-step { display: flex; align-items: flex-start; gap: 12px; }
    .vs-num { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; margin-top: 1px; }
    .vs-step-text strong { font-size: 13.5px; font-weight: 700; display: block; margin-bottom: 2px; }
    .vs-step-sub { font-size: 12px; color: var(--muted); line-height: 1.55; }
    .vs-footer { border-top: 1.5px solid; padding-top: 18px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
    .vs-mttr-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
    .vs-mttr-val { font-size: 26px; font-weight: 900; font-family: 'JetBrains Mono', monospace; line-height: 1.1; margin-top: 4px; }
    .vs-meta { font-size: 12px; font-weight: 500; margin-top: 3px; }

    /* ── COMPARISON TABLE ── */
    .compare-wrap { overflow-x: auto; margin-top: 48px; border-radius: 16px; border: 1.5px solid var(--border); box-shadow: var(--shadow-sm); }
    .compare-table { width: 100%; border-collapse: collapse; font-size: 14px; }
    .compare-table th { padding: 16px 20px; text-align: center; font-size: 13px; font-weight: 700; background: #FDFCFB; border-bottom: 1.5px solid var(--border); }
    .compare-table th:first-child { text-align: left; width: 35%; }
    .compare-table th.lexro-col { background: var(--blue-bg); color: var(--blue-dark); }
    .compare-table td { padding: 14px 20px; text-align: center; border-bottom: 1px solid var(--border); vertical-align: top; }
    .compare-table td:first-child { text-align: left; }
    .compare-table tr:last-child td { border-bottom: none; }
    .compare-table tr:hover td { background: #FDFCFB; }
    .compare-table tr:hover td.lexro-col { background: #FDF8F5; }
    .compare-table td.lexro-col { background: #f5f9ff; }
    .feat-name { font-weight: 700; font-size: 13.5px; color: var(--text); }
    .feat-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
    .check { color: var(--green); font-weight: 800; font-size: 15px; }
    .cross { color: #EEEAE5; font-weight: 800; font-size: 15px; }
    .partial { font-size: 11px; font-weight: 700; color: #d97706; background: #fffbeb; border: 1px solid #fde68a; padding: 2px 8px; border-radius: 20px; }
    .lx-val { font-size: 13px; font-weight: 800; color: var(--green); }
    .dim-val { font-size: 13px; color: var(--muted); }

    /* ── PRICING ── */
    .pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 48px; }
    @media (max-width: 1024px) { .pricing-grid { grid-template-columns: repeat(2,1fr); } }
    @media (max-width: 560px) { .pricing-grid { grid-template-columns: 1fr; } }
    .pcard { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 28px; position: relative; display: flex; flex-direction: column; transition: box-shadow .2s; }
    .pcard:hover { box-shadow: var(--shadow); }
    .pcard.popular { border-color: var(--blue-light); box-shadow: 0 0 0 3px rgba(59,130,246,.12); }
    .pcard-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--blue-dark), #9B6B8E); color: #fff; font-size: 11px; font-weight: 800; padding: 4px 14px; border-radius: 30px; white-space: nowrap; }
    .pcard-name { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px; }
    .pcard-price { display: flex; align-items: baseline; gap: 3px; margin-bottom: 10px; }
    .price-cur { font-size: 18px; font-weight: 700; color: var(--text); }
    .price-amt { font-size: 42px; font-weight: 900; color: var(--text); line-height: 1; font-family: 'JetBrains Mono', monospace; }
    .price-per { font-size: 13px; color: var(--muted); }
    .pcard-desc { font-size: 13px; color: var(--muted); line-height: 1.6; margin-bottom: 20px; }
    .pcard-divider { height: 1px; background: var(--border); margin-bottom: 20px; }
    .pcard-features { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; flex: 1; }
    .pcard-features li { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--text); }
    .pcard-features li svg { width: 15px; height: 15px; fill: none; stroke: var(--green); stroke-width: 2.5; stroke-linecap: round; flex-shrink: 0; margin-top: 2px; }
    .pcard-features li.no { color: var(--muted); }
    .pcard-features li.no svg { stroke: #D4D0CB; }
    .btn-plan { width: 100%; height: 44px; border-radius: 10px; font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer; border: none; transition: all .15s; }
    .btn-plan.outline { background: transparent; border: 1.5px solid var(--border); color: var(--text); }
    .btn-plan.outline:hover { border-color: #A39E99; background: var(--gray-bg); }
    .btn-plan.filled { background: var(--blue-dark); color: #fff; box-shadow: 0 4px 12px rgba(29,78,216,.25); }
    .btn-plan.filled:hover { background: var(--blue); }
    .pcard-note { text-align: center; font-size: 11.5px; color: #A39E99; margin-top: 10px; }

    /* ── FAQ ── */
    .faq-list { display: flex; flex-direction: column; gap: 10px; margin-top: 48px; }
    .faq-item { background: var(--surface); border: 1.5px solid var(--border); border-radius: 12px; overflow: hidden; transition: border-color .15s; }
    .faq-item.open { border-color: var(--blue-bd); }
    .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; background: none; border: none; font-family: inherit; font-size: 15px; font-weight: 700; color: var(--text); cursor: pointer; text-align: left; }
    .faq-q:hover { background: #fafafa; }
    .faq-chevron { width: 18px; height: 18px; flex-shrink: 0; stroke: var(--muted); stroke-width: 2.5; fill: none; transition: transform .25s; }
    .faq-item.open .faq-chevron { transform: rotate(180deg); }
    .faq-body { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
    .faq-body-inner { padding: 0 22px 20px; font-size: 14px; color: var(--muted); line-height: 1.75; }

    /* ── CTA BANNER ── */
    .cta-section { background: linear-gradient(135deg, #D88E72 0%, #7D4F70 100%); padding: 80px 0; }
    .cta-inner { text-align: center; }
    .cta-inner h2 { font-size: clamp(28px,3vw,44px); font-weight: 900; color: #fff; margin-bottom: 16px; letter-spacing: -1px; }
    .cta-inner p { font-size: 17px; color: rgba(255,255,255,.8); margin-bottom: 36px; }
    .cta-btns { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
    .btn-white { background: #FCFBF9; color: var(--blue-dark); height: 52px; padding: 0 32px; border-radius: 12px; font-size: 16px; font-weight: 800; border: none; cursor: pointer; font-family: inherit; box-shadow: 0 4px 16px rgba(0,0,0,.15); transition: all .15s; }
    .btn-white:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(0,0,0,.2); }
    .btn-white-outline { background: transparent; color: #fff; height: 52px; padding: 0 28px; border-radius: 12px; font-size: 16px; font-weight: 700; border: 2px solid rgba(255,255,255,.4); cursor: pointer; font-family: inherit; transition: all .15s; }
    .btn-white-outline:hover { border-color: #fff; background: rgba(255,255,255,.1); }

    /* ── FOOTER ── */
    .footer { background: #1A1816; color: rgba(255,255,255,.7); padding: 56px 0 32px; }
    .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
    @media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
    .footer-brand { font-size: 18px; font-weight: 800; color: #fff; display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
    .footer-tagline { font-size: 13.5px; line-height: 1.65; max-width: 280px; }
    .footer-h { font-size: 12px; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 14px; }
    .footer-links { display: flex; flex-direction: column; gap: 8px; }
    .footer-links a { font-size: 13.5px; color: rgba(255,255,255,.6); transition: color .12s; }
    .footer-links a:hover { color: #fff; }
    .footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding-top: 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 13px; }

    /* ── REVEAL ANIMATIONS ── */
    .reveal { opacity: 0; transform: translateY(20px); transition: opacity .55s ease, transform .55s ease; }
    .reveal.in-view { opacity: 1; transform: none; }
    .reveal-d1 { transition-delay: .1s; }
    .reveal-d2 { transition-delay: .2s; }
    .reveal-d3 { transition-delay: .3s; }

    /* ── UTILITY ── */
    .mono { font-family: 'JetBrains Mono', monospace; }
    .bg-surface { background: var(--surface); }

    /* Incident Simulation styles */
    .sim-step { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 8px 0; }
    .sim-ic { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0; transition: all .4s; }
    .sim-ic.done { background: #dcfce7; color: var(--green); }
    .sim-ic.active { background: #F0E3EC; color: var(--purple); animation: spin .8s linear infinite; }
    .sim-ic.pending { background: var(--gray-bg); color: #A39E99; }
    .sim-lbl { flex: 1; font-weight: 500; color: #4A4541; }
    .sim-lbl.done { color: var(--green); font-weight: 600; }
    .sim-lbl.active { color: var(--purple); font-weight: 600; }
    .sim-t { font-size: 11px; font-family: 'JetBrains Mono', monospace; color: #A39E99; }

    @media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
}

@media (max-width: 768px) {
  .hero-grid {
    padding: 44px 20px 40px !important;
    gap: 28px !important;
  }

  .hero h1 {
    font-size: 30px !important;
    letter-spacing: -1px !important;
  }

  .hero-p {
    font-size: 15px !important;
    max-width: 100% !important;
  }

  .hero-btns {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .hero-btns .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  .hero-proof {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .pw-frame {
    width: 100% !important;
    max-width: 100% !important;
    animation: none !important;
  }

  .pw-tabs {
    overflow-x: auto !important;
    white-space: nowrap !important;
  }

  .pw-tab {
    flex-shrink: 0 !important;
  }

  .pw-panels {
    overflow-x: hidden !important;
  }
}

@media (max-width: 480px) {
  .hero-grid {
    padding: 32px 16px 28px !important;
  }

  .hero h1 {
    font-size: 26px !important;
  }

  .hero-p {
    font-size: 14px !important;
  }

  .pw-url {
    display: none !important;
  }

  .pw-titlebar {
    padding: 8px 10px !important;
  }

  .pw-tab {
    font-size: 11px !important;
    padding: 7px 8px !important;
  }

  .pw-panels {
    padding: 10px !important;
    min-height: 260px !important;
  }
}

@media (max-width: 900px) {
  .hero { padding: 0 !important; }
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding: 36px 20px 40px !important;
  }
}

@media (max-width: 768px) {
  .hero { padding: 0 !important; background: #fff !important; }
  .hero-bg { display: none !important; }
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 32px 16px 36px !important;
  }
  .hero h1 { font-size: 30px !important; letter-spacing: -1px !important; }
  .hero-p { font-size: 15px !important; max-width: 100% !important; margin-bottom: 24px !important; }
  .hero-btns { flex-direction: column !important; }
  .hero-btns .btn { width: 100% !important; justify-content: center !important; }
  .hero-inner { grid-template-columns: 1fr !important; }
  .hero-social-proof { flex-wrap: wrap !important; }
  .product-showcase { display: block !important; }
  .pw-frame { animation: none !important; width: 100% !important; }
  .pw-tabs { overflow-x: auto !important; }
  .pw-tab { flex-shrink: 0 !important; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 26px !important; }
  .hero-p { font-size: 14px !important; }
  .pw-url { display: none !important; }
}

/* ── MOBILE HERO FIX ── */
@media (max-width: 900px) {
  .hero { padding: 0 !important; overflow: hidden !important; }
  .hero-grid, .hero-inner {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding: 36px 20px 40px !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .hero h1 { font-size: 28px !important; letter-spacing: -0.5px !important; }
  .hero-p { font-size: 15px !important; max-width: 100% !important; }
  .hero-btns { flex-direction: column !important; gap: 10px !important; }
  .hero-btns .btn, .hero-btns button {
    width: 100% !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  /* Product window fix */
  .product-showcase, .reveal.reveal-d2 > div {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .pw-frame {
    width: 100% !important;
    max-width: 100% !important;
    animation: none !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }
  .pw-panels {
    padding: 10px !important;
    overflow: hidden !important;
  }
  /* Inner panel grids ko fit karo */
  .pw-panel > div[style] {
    max-width: 100% !important;
    overflow: hidden !important;
  }
  /* 4-col grids ko 2-col karo */
  .pw-panel [style*="repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Monospace text overflow fix */
  .pw-panel * {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
  [style*="font-family:'JetBrains Mono'"],
  [style*="font-family: 'JetBrains Mono'"] {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
  }
  .pw-url { display: none !important; }
}

@media (max-width: 480px) {
  .hero-grid, .hero-inner {
    padding: 28px 16px 32px !important;
  }
  .hero h1 { font-size: 24px !important; }
}

/* ── HERO MOBILE FIX ── */
@media (max-width: 768px) {
  .hero-grid {
    grid-template-columns: 1fr !important;
    padding: 32px 20px 40px !important;
    gap: 28px !important;
    overflow: hidden !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
  .hero-grid > div:first-child {
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .hero-p {
    max-width: 100% !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
}

/* ── PW PANEL AI ANALYSIS FIX ── */
@media (max-width: 768px) {
  /* AI content grid — stack karo */
  #panel-2 > div[style*="grid-template-columns:1.2fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Root cause box — text overflow fix */
  #panel-2 [style*="border-left:3px solid #D88E72"] {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
  }

  /* Commit hash row — overflow */
  #panel-2 [style*="JetBrains Mono"] {
    word-break: break-all !important;
    white-space: normal !important;
    overflow: hidden !important;
  }

  /* pw-panels overall overflow */
  .pw-panels {
    overflow: hidden !important;
    padding: 10px !important;
  }

  /* panel-2 ke andar sab divs */
  #panel-2 > div {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Circular confidence chart — shrink */
  #panel-2 [style*="width:48px"][style*="height:48px"] {
    width: 40px !important;
    height: 40px !important;
  }

  /* commit row grid */
  #panel-2 > div:last-child {
    overflow: hidden !important;
  }
}

/* ── GENERAL OVERFLOW FIX ── */
@media (max-width: 768px) {
  body { overflow-x: hidden !important; }
  
  .pw-frame {
    width: 100% !important;
    max-width: calc(100vw - 40px) !important;
    overflow: hidden !important;
  }

  /* Mono font overflow */
  [style*="JetBrains Mono"] {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}
@media (max-width: 600px) {
  .ai-panel-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px) {
  .hero-grid {
    overflow: hidden;
    padding-right: 16px;
    padding-left: 16px;
  }
  .hero-grid > div {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }
  .pw-frame {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .pw-panels {
    overflow: hidden !important;
    padding: 10px !important;
    box-sizing: border-box !important;
  }
  .pw-panel > div {
    box-sizing: border-box !important;
    max-width: 100% !important;
  }
}



/* final alignment + neutralization */
.top-header{display:flex;align-items:center;justify-content:space-between}
.top-header .page-title{line-height:1;display:flex;align-items:center;margin:0}
.top-header .header-right{margin-left:auto}
.page-content,.card,.table-card,.table-wrap,.platform-card,.service-card{background:#FDFCFB}
#stats-grid .stat-card{background:#FDFCFB}
.nav-brand svg circle,.footer-brand svg circle,.sidebar-brand .logo-mark svg circle{fill:#E2AA94!important}


@media (max-width: 640px) {
  .col-head { grid-template-columns: 110px 52px 1fr; }
  .log-row  { grid-template-columns: 110px 52px 1fr; }
  .log-row .c-src, .col-head .c-src { display: none; }
}

@media (max-width: 480px) {
  .col-head { grid-template-columns: 52px 1fr; }
  .log-row  { grid-template-columns: 52px 1fr; }
  .log-row .c-ts, .col-head .c-ts { display: none; }
}

/* Dashboard stats — logs style se match */
#stats-grid {
  grid-template-columns: repeat(6, 1fr) !important;
}

#stats-grid .stat-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#stats-grid .stat-icon svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 1024px) {
  #stats-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 768px) {
  #stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 768px) {
  #stats-grid {
    display: none !important;
  }
}

/* ── Modal complete fix ── */
.modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  padding: 20px !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
}

.modal.open {
  display: flex !important;
}

.modal-box {
  position: relative !important;
  background: #FDFCFB !important;
  border-radius: 20px !important;
  width: 100% !important;
  max-width: 480px !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.18) !important;
  margin: auto !important;
  z-index: 1 !important;
}

/* Mobile — bottom sheet */
@media (max-width: 768px) {
  .modal {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  .modal-box {
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    margin: 0 !important;
  }
  .modal-footer {
    flex-direction: column-reverse !important;
    gap: 8px !important;
  }
  .modal-footer .btn {
    width: 100% !important;
    justify-content: center !important;
  }
  .form-row {
    grid-template-columns: 1fr !important;
  }
}
.newsletter-input {
  width: auto !important;
}