:root {
  --ops-bg: #f7f9fb;
  --ops-bg-alt: #eef4f6;
  --ops-surface: #ffffff;
  --ops-surface-soft: #f2f6f8;
  --ops-ink: #172126;
  --ops-muted: #5f6c72;
  --ops-line: #d8e2e6;
  --ops-primary: #2f5d5f;
  --ops-primary-strong: #1f4547;
  --ops-accent: #9b7a3c;
  --ops-success: #2f6b4f;
  --ops-warning: #a66a2d;
  --ops-danger: #a64b45;
  --ops-shadow: 0 18px 48px rgba(23, 33, 38, 0.08);
}

html {
  scroll-behavior: smooth;
}

body.opsflow-premium {
  color: var(--ops-ink);
  background:
    linear-gradient(180deg, #fbfcfd 0%, var(--ops-bg) 42%, #eef3f5 100%),
    radial-gradient(circle at 82% 0%, rgba(155, 122, 60, 0.12), transparent 24rem);
  text-rendering: optimizeLegibility;
}

body.opsflow-premium::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(23, 33, 38, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 33, 38, 0.022) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.42), transparent 74%);
}

.opsflow-premium header,
.opsflow-premium nav,
.opsflow-premium aside {
  backdrop-filter: blur(18px) saturate(1.08);
}

.opsflow-premium header.fixed,
.opsflow-premium nav.fixed {
  border-bottom: 1px solid rgba(216, 226, 230, 0.84);
  box-shadow: 0 12px 34px rgba(23, 33, 38, 0.06);
}

.opsflow-premium aside {
  border-right: 1px solid rgba(216, 226, 230, 0.92) !important;
  background: rgba(244, 248, 250, 0.94) !important;
}

.opsflow-premium h1,
.opsflow-premium h2,
.opsflow-premium h3 {
  letter-spacing: 0;
}

.opsflow-premium p {
  color: var(--ops-muted);
}

.opsflow-premium a,
.opsflow-premium button,
.opsflow-premium input,
.opsflow-premium select,
.opsflow-premium textarea {
  transition-property: color, background-color, border-color, box-shadow, opacity, filter, transform;
  transition-duration: 180ms;
  transition-timing-function: ease;
}

.opsflow-premium a:focus-visible,
.opsflow-premium button:focus-visible,
.opsflow-premium input:focus-visible,
.opsflow-premium select:focus-visible,
.opsflow-premium textarea:focus-visible,
.opsflow-premium [tabindex]:focus-visible {
  outline: 2px solid var(--ops-accent);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(155, 122, 60, 0.16);
}

.opsflow-premium button,
.opsflow-premium a[href$=".html"] {
  cursor: pointer;
}

.opsflow-premium .bg-primary,
.opsflow-premium button[class*="bg-primary"],
.opsflow-premium a[class*="bg-primary"] {
  background: linear-gradient(135deg, var(--ops-primary), var(--ops-primary-strong));
}

.opsflow-premium .bg-primary:hover,
.opsflow-premium button[class*="bg-primary"]:hover,
.opsflow-premium a[class*="bg-primary"]:hover {
  background: linear-gradient(135deg, #386f70, #27484b);
  box-shadow: 0 14px 32px rgba(47, 93, 95, 0.18);
}

.opsflow-premium .bg-surface-container-lowest,
.opsflow-premium .bg-surface-container-low,
.opsflow-premium .bg-surface-container,
.opsflow-premium .bg-white {
  border-color: rgba(216, 226, 230, 0.9) !important;
}

.opsflow-premium .shadow-sm,
.opsflow-premium .shadow-lg,
.opsflow-premium .shadow-xl {
  box-shadow: var(--ops-shadow) !important;
}

.opsflow-premium table,
.opsflow-premium [data-ops-panel] {
  border: 1px solid rgba(216, 226, 230, 0.9);
  box-shadow: var(--ops-shadow);
}

.opsflow-premium [data-ops-panel] {
  background: rgba(255, 255, 255, 0.86);
}

.opsflow-premium [data-ops-row] {
  position: relative;
}

.opsflow-premium [data-ops-row]::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: transparent;
  transition: background-color 180ms ease;
}

.opsflow-premium [data-ops-row]:hover::before {
  background: var(--ops-primary);
}

.opsflow-premium input,
.opsflow-premium select,
.opsflow-premium textarea {
  color: var(--ops-ink);
}

.opsflow-premium input::placeholder,
.opsflow-premium textarea::placeholder {
  color: rgba(95, 108, 114, 0.74);
}

.opsflow-premium img {
  background-color: var(--ops-bg-alt);
}

.opsflow-premium [aria-current="page"] {
  color: var(--ops-primary-strong) !important;
  background-color: rgba(198, 233, 233, 0.72);
}

.opsflow-premium .material-symbols-outlined {
  line-height: 1;
}

.opsflow-premium .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes opsflow-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

@media (max-width: 1023px) {
  .opsflow-premium main {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}