:root {
  --brand-bg-start: #0b6b5a;
  --brand-bg-end: #11998e;
  --brand-primary: #11998e;
  --brand-primary-rgb: 17, 153, 142;
  --brand-secondary: #38ef7d;
  --accent-danger: #ff5454;
  --accent-warning: #ff8400;
  --accent-caution: #f2c94c;
  --accent-success: #5cb85c;
  --accent-info: #667eea;
  --surface-app: #ffffffee;
  --surface-card: #ffffff;
  --surface-card-alt: #f8f9fa;
  --border-subtle: #e5e7eb;
  --border-strong: #d1d5db;
  --text-primary: #333333;
  --text-secondary: #555555;
  --text-light: #ffffff;
  --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-strong: 0 10px 40px rgba(0, 0, 0, 0.3);
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
}

body.dark-mode {
  --brand-bg-start: #1f2a2b;
  --brand-bg-end: #263334;
  --brand-primary: #20c8b5;
  --brand-primary-rgb: 32, 200, 181;
  --brand-secondary: #42e9a0;
  --surface-app: #2b3536ee;
  --surface-card: #2b3536;
  --surface-card-alt: #343f40;
  --border-subtle: #3f4b4c;
  --border-strong: #465253;
  --text-primary: #e6f1f0;
  --text-secondary: #c8d3d3;
  --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.app-frame {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  flex: 1 1 auto;
  min-height: 100%;
}

.hidden { display: none !important; }
.flex-row { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.align-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: var(--space-2); }
.gap-md { gap: var(--space-3); }
.gap-lg { gap: var(--space-4); }
.mt-sm { margin-top: var(--space-2); }
.mt-md { margin-top: var(--space-3); }
.mt-lg { margin-top: var(--space-4); }
.w-full { width: 100%; }

.inline-input,
.inline-select,
.inline-textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(0,0,0,0.15);
  background: var(--surface-card);
  color: var(--text-primary);
}

.inline-note {
  font-size: 0.85em;
  opacity: 0.85;
}

.section-title-small {
  font-size: 0.9em;
  font-weight: 600;
  margin-top: var(--space-2);
}

.loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(10,12,16,0.72);
  backdrop-filter: blur(6px);
}

.loading-overlay-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 22px 26px;
  border-radius: var(--radius-lg);
  background: rgba(24,28,38,0.72);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 12px 34px rgba(0,0,0,0.35);
}

.loading-overlay-text {
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-size: 14px;
  color: rgba(255,255,255,0.86);
}

.status-bg-critical { background: var(--accent-danger) !important; }
.status-bg-success { background: var(--accent-success) !important; }
.status-bg-warning { background: var(--accent-warning) !important; }
.status-bg-caution { background: var(--accent-caution) !important; }
.status-bg-info { background: var(--accent-info) !important; }
.status-text-critical { color: var(--accent-danger) !important; }
.status-text-success { color: var(--accent-success) !important; }
.status-segment-base { cursor: pointer; width: 0%; }

.hosted-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}