@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Sora:wght@500;600;700;800&display=swap");

/* ==========================================================================
   JOBSEK PUBLIC THEME — Apple-Inspired Clean & Modern Design System
   ========================================================================== */

:root {
  /* Color Palette - Light (Default) */
  --paper: #fbfbfd;
  --paper-subtle: #f5f5f7;
  --card: #ffffff;
  --card-elevated: #ffffff;
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --subtle: #86868b;
  --line: rgba(0, 0, 0, 0.08);
  --line-strong: rgba(0, 0, 0, 0.14);
  
  /* Brand Accents */
  --accent: #0071e3;
  --accent-hover: #0077ed;
  --accent-soft: rgba(0, 113, 227, 0.08);
  --accent-gradient: linear-gradient(135deg, #0071e3 0%, #2997ff 100%);
  --green: #10b981;
  --green-soft: rgba(16, 185, 129, 0.1);
  --coral: #ef4444;
  --coral-soft: rgba(239, 68, 68, 0.1);

  /* Geometry & Shadows */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 980px;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.07);
  --shadow-glow: 0 8px 24px rgba(0, 113, 227, 0.25);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}

/* Dark Theme */
html[data-theme="dark"] {
  --paper: #080c14;
  --paper-subtle: #0e1422;
  --card: #121826;
  --card-elevated: #162032;
  --ink: #f5f5f7;
  --muted: #94a3b8;
  --subtle: #64748b;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);
  --accent: #2997ff;
  --accent-hover: #47a6ff;
  --accent-soft: rgba(41, 151, 255, 0.14);
  --accent-gradient: linear-gradient(135deg, #2997ff 0%, #60a5fa 100%);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 8px 28px rgba(41, 151, 255, 0.35);
  color-scheme: dark;
}

/* Reset & Global Base for Public */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body:not(.admin-body) {
  margin: 0;
  padding: 0;
  background-color: var(--paper);
  color: var(--ink);
  font-family: "DM Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  overflow-x: hidden;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}

body:not(.admin-body) h1,
body:not(.admin-body) h2,
body:not(.admin-body) h3,
body:not(.admin-body) h4,
body:not(.admin-body) .brand,
body:not(.admin-body) .eyebrow,
body:not(.admin-body) .kicker,
body:not(.admin-body) .pricing-amount .value,
body:not(.admin-body) .value-number {
  font-family: "Plus Jakarta Sans", "Sora", -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: -0.03em;
  color: var(--ink);
}

a {
  color: inherit;
  text-decoration: none;
}

button, input, select, textarea {
  font-family: inherit;
}

/* Container Shell */
.shell {
  width: min(1140px, calc(100% - 40px));
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   1. Site Header & Navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  background: rgba(251, 251, 253, 0.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

html[data-theme="dark"] .site-header {
  background: rgba(8, 12, 20, 0.82);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.04em;
  color: var(--ink);
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--accent);
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.site-nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  transition: color 0.15s ease;
}

.site-nav a:hover {
  color: var(--ink);
}

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

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s var(--ease);
}

.theme-toggle:hover {
  background: var(--paper-subtle);
  border-color: var(--line-strong);
}

.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #ffffff !important;
  font-size: 14px;
  font-weight: 600;
  border: 0;
  cursor: pointer;
  box-shadow: var(--shadow-glow);
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), background-color 0.18s var(--ease);
}

.primary:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(0, 113, 227, 0.35);
}

.primary:active {
  transform: scale(0.98);
}

.mobile-nav-toggle {
  display: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  flex-direction: column;
  gap: 4px;
}

.nav-bar {
  width: 18px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: all 0.2s ease;
}

/* Mobile Drawer */
.mobile-nav-drawer {
  position: fixed;
  top: 65px;
  left: 0;
  right: 0;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  padding: 24px 20px;
  box-shadow: var(--shadow-lg);
  z-index: 890;
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: drawer-fade-down 0.22s var(--ease);
}

.mobile-nav-drawer[hidden] {
  display: none;
}

@keyframes drawer-fade-down {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mobile-nav-link {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.mobile-nav-footer {
  margin-top: 8px;
}

.mobile-cta {
  width: 100%;
  padding: 13px;
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   2. Status Banners & Eyebrow
   -------------------------------------------------------------------------- */
.banner-alert {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  border-radius: var(--radius-md);
  margin: 20px 0;
  font-size: 14px;
}

.banner-alert p {
  margin: 4px 0 0;
  font-size: 13px;
}

.banner-success {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.28);
  color: #065f46;
}
html[data-theme="dark"] .banner-success {
  color: #6ee7b7;
}

.banner-warning {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #991b1b;
}
html[data-theme="dark"] .banner-warning {
  color: #fca5a5;
}

.banner-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: currentColor;
  color: var(--card);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 13px;
  flex-shrink: 0;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}

.eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
  animation: pulse-dot 2s infinite ease-in-out;
}

@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.7; }
}

/* --------------------------------------------------------------------------
   3. Hero Section & Dynamic Visual Representation
   -------------------------------------------------------------------------- */
.hero-section {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
  padding: 72px 0 64px;
}

.hero-content h1 {
  font-size: clamp(2.5rem, 5.2vw, 4.25rem);
  line-height: 1.05;
  margin: 0 0 20px;
  font-weight: 800;
  letter-spacing: -0.038em;
}

.hero-content h1 em {
  font-style: normal;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-copy {
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.55;
  color: var(--muted);
  max-width: 540px;
  margin: 0 0 32px;
}

.hero-copy strong {
  color: var(--ink);
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

.hero-cta {
  padding: 14px 28px;
  font-size: 15px;
}

.secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 24px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background: var(--card);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  transition: all 0.18s var(--ease);
}

.secondary-btn:hover {
  background: var(--paper-subtle);
  border-color: var(--ink);
}

.trust-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
}

.trust-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.trust-item svg {
  color: var(--green);
}

/* Dynamic Interactive Visual */
.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
}

.visual-container {
  width: 100%;
  max-width: 440px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 26px;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}

.source-job-card {
  background: var(--paper-subtle);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 16px;
  position: relative;
  box-shadow: var(--shadow-sm);
}

.source-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.source-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
}

.source-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--green);
}

.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}

.source-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
}

.source-meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

/* Hub Lines */
.distribution-hub {
  position: relative;
  height: 36px;
  margin: 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hub-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--accent) 0%, rgba(0, 113, 227, 0.2) 100%);
}

.hub-line-1 { left: 24%; transform: rotate(18deg); }
.hub-line-2 { left: 50%; width: 2px; }
.hub-line-3 { right: 24%; transform: rotate(-18deg); }

.destination-grid {
  display: grid;
  gap: 10px;
}

.dest-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s var(--ease), border-color 0.2s ease;
}

.dest-card:hover {
  transform: translateX(4px);
  border-color: var(--accent);
}

.dest-icon {
  font-size: 16px;
}

.dest-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.dest-info strong {
  font-size: 13px;
  color: var(--ink);
}

.dest-info small {
  font-size: 11px;
  color: var(--muted);
}

.dest-status {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--green-soft);
  color: var(--green);
}

/* --------------------------------------------------------------------------
   4. Trust & Value Section
   -------------------------------------------------------------------------- */
.trust-section {
  padding: 64px 0;
  border-top: 1px solid var(--line);
}

.section-intro {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 48px;
}

.section-intro h2 {
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  line-height: 1.15;
  margin: 0 0 12px;
}

.section-intro p {
  font-size: 16px;
  color: var(--muted);
  margin: 0;
}

.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
}

.value-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s ease;
}

.value-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
}

.value-number {
  font-size: 14px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}

.value-card h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--ink);
}

.value-card p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}

/* --------------------------------------------------------------------------
   5. How It Works Section (Timeline)
   -------------------------------------------------------------------------- */
.how-section {
  padding: 64px 0;
  border-top: 1px solid var(--line);
}

.steps-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
  margin-top: 40px;
}

.steps-timeline::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 40px;
  right: 40px;
  height: 2px;
  background: var(--line);
  z-index: 1;
}

.timeline-step {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
}

.timeline-marker {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--accent);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 15px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
}

.timeline-content h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 8px;
}

.timeline-content p {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}

/* --------------------------------------------------------------------------
   6. Communities Showcase Section
   -------------------------------------------------------------------------- */
.communities-section {
  padding: 64px 0;
  border-top: 1px solid var(--line);
}

.section-intro-split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

.section-intro-split h2 {
  font-size: clamp(1.85rem, 3.2vw, 2.5rem);
  margin: 0 0 6px;
}

.section-intro-split p {
  color: var(--muted);
  margin: 0;
  font-size: 15px;
}

.network-summary-pill {
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: var(--card);
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
  box-shadow: var(--shadow-sm);
}

.network-summary-pill strong {
  color: var(--ink);
}

.communities-showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.showcase-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s var(--ease), border-color 0.18s ease, box-shadow 0.18s ease;
}

.showcase-card:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}

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

.showcase-location {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.showcase-price {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  background: var(--paper-subtle);
  padding: 3px 8px;
  border-radius: var(--radius-xs);
}

.showcase-name {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 12px;
  line-height: 1.35;
  color: var(--ink);
}

.showcase-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 16px;
}

.showcase-actions {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.showcase-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.showcase-link:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   7. Pricing Section
   -------------------------------------------------------------------------- */
.pricing-section {
  padding: 64px 0;
  border-top: 1px solid var(--line);
}

.pricing-container {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.pricing-header h2 {
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  margin: 0 0 8px;
}

.pricing-header p {
  font-size: 15px;
  color: var(--muted);
  margin: 0 0 32px;
}

.pricing-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 40px 32px;
  box-shadow: var(--shadow-lg);
  text-align: center;
}

.pricing-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  margin-bottom: 20px;
}

.pricing-amount {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin-bottom: 16px;
}

.pricing-amount .currency {
  font-size: 28px;
  font-weight: 700;
  color: var(--ink);
}

.pricing-amount .value {
  font-size: 64px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--ink);
}

.pricing-amount .period {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  margin-left: 6px;
}

.pricing-desc {
  font-size: 14.5px;
  color: var(--muted);
  max-width: 440px;
  margin: 0 auto 28px;
  line-height: 1.5;
}

.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  text-align: left;
  display: inline-flex;
  flex-direction: column;
  gap: 12px;
}

.pricing-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--ink);
}

.pricing-features .check {
  color: var(--green);
  font-weight: 800;
}

.pricing-cta {
  width: 100%;
  padding: 14px;
  font-size: 15px;
}

/* --------------------------------------------------------------------------
   8. Job Posting Wizard Section (.app-card)
   -------------------------------------------------------------------------- */
.app-card {
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-xl);
  padding: clamp(24px, 5vw, 44px);
  margin: 64px 0;
}

.wizard-intro {
  margin-bottom: 28px;
}

.wizard-intro h2 {
  font-size: 24px;
  margin: 0 0 4px;
}

.wizard-intro p {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}

.flow-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 20px;
  margin-bottom: 30px;
}

.flow-step-label {
  display: flex;
  flex-direction: column;
}

.flow-step-label .kicker {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.1em;
}

.flow-step-label strong {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}

.progress-track {
  flex: 1;
  max-width: 380px;
  height: 5px;
  background: var(--paper-subtle);
  border-radius: var(--radius-pill);
  position: relative;
  overflow: hidden;
}

#progressBar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: var(--accent);
  border-radius: inherit;
  transition: width 0.3s var(--ease);
}

.stepper {
  display: flex;
  gap: 8px;
}

.step-dot {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--paper-subtle);
  color: var(--muted);
  font-weight: 700;
  font-size: 12px;
  transition: all 0.2s var(--ease);
}

.step-dot.is-active {
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.step-dot.is-complete {
  background: var(--green);
  color: #ffffff;
}

/* Step Presentation */
.step {
  display: none;
}

.step.active {
  display: block;
  animation: step-in 0.26s var(--ease);
}

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

.step-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 24px;
}

.step-heading h2 {
  font-size: 22px;
  margin: 4px 0 0;
}

.step-heading p {
  color: var(--muted);
  font-size: 13px;
  margin: 0;
  text-align: right;
  max-width: 320px;
}

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
}

.field-grid > label,
.step > label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.step > label {
  margin-top: 18px;
}

.field-grid input,
.field-grid select,
.step > label textarea,
.step > label input,
.group-tools input,
.group-tools select {
  border: 1px solid var(--line-strong);
  background: var(--card);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.field-grid input:focus,
.field-grid select:focus,
.step > label textarea:focus,
.step > label input:focus,
.group-tools input:focus,
.group-tools select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.group-tools {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 18px 0;
  padding: 10px;
  background: var(--paper-subtle);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  position: sticky;
  top: 68px;
  z-index: 10;
  backdrop-filter: blur(10px);
}

.group-tools input {
  flex: 1;
  min-width: 180px;
}

.group-tools button {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.group-tools button:hover {
  border-color: var(--ink);
}

.group-list {
  display: grid;
  gap: 10px;
  max-height: 480px;
  overflow-y: auto;
  padding-right: 4px;
}

.group-card {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line);
  background: var(--card);
  padding: 14px 16px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.18s var(--ease);
}

.group-card:hover {
  transform: translateY(-1px);
  border-color: var(--line-strong);
}

.group-card.is-selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.group-card input {
  accent-color: var(--accent);
  width: 18px;
  height: 18px;
}

.group-main {
  display: flex;
  flex-direction: column;
}

.group-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
}

.group-meta {
  color: var(--muted);
  font-size: 12px;
}

.group-link {
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
}

.group-link:hover {
  text-decoration: underline;
}

.group-price {
  text-align: right;
  font-weight: 700;
  font-size: 13px;
}

.group-price small {
  display: block;
  font-weight: 400;
  font-size: 11px;
  color: var(--muted);
}

.check-mark {
  opacity: 0;
  color: var(--accent);
  font-weight: 800;
}

.group-card.is-selected .check-mark {
  opacity: 1;
}

.summary {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  background: var(--paper-subtle);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-top: 18px;
}

.summary span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.summary strong {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
}

.summary-total {
  text-align: right;
}

.fine-print {
  color: var(--muted);
  font-size: 12px;
  margin-top: 10px;
}

/* Step 3 Tiers */
.tier-card {
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--line);
  background: var(--card);
  padding: 18px 20px;
  border-radius: var(--radius-md);
  margin-bottom: 14px;
  transition: all 0.18s var(--ease);
}

.tier-card.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.tier-card.muted {
  opacity: 0.6;
}

.tier-radio {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 12px;
}

.tier-card.muted .tier-radio {
  background: var(--line-strong);
  color: var(--muted);
}

.tier-card > div:nth-child(2) {
  flex: 1;
}

.tier-card h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 4px;
}

.tier-card p {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}

.soon {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--line);
  color: var(--muted);
}

/* Step 4 Preview & Safety */
.preview-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--card);
  margin-bottom: 18px;
}

.preview-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--paper-subtle);
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.fb-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #1877f2;
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 12px;
}

.post-preview {
  white-space: pre-wrap;
  background: var(--card);
  color: var(--ink);
  padding: 18px;
  font-size: 14px;
  line-height: 1.6;
  min-height: 160px;
}

.payment-notice-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  border: 1px solid rgba(0, 113, 227, 0.2);
  margin-bottom: 20px;
}

.payment-notice-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.payment-notice-text strong {
  display: block;
  font-size: 14px;
  color: var(--ink);
}

.payment-notice-text p {
  font-size: 13px;
  color: var(--muted);
  margin: 4px 0 0;
  line-height: 1.45;
}

.checks {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}

.checks label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  line-height: 1.45;
}

.checks input {
  accent-color: var(--accent);
  margin-top: 2px;
}

/* Actions */
.form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.text-button {
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  border-radius: var(--radius-pill);
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.16s ease;
}

.text-button:hover {
  background: var(--paper-subtle);
}

/* Success State */
.success-state {
  text-align: center;
  padding: 48px 20px;
}

.success-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green);
  display: grid;
  place-items: center;
  font-size: 28px;
  font-weight: 800;
  margin: 0 auto 20px;
}

.success-state h2 {
  font-size: 26px;
  margin: 8px 0;
}

.success-state p {
  color: var(--muted);
  max-width: 420px;
  margin: 0 auto 24px;
}

/* Toast Alerts */
.toast-host {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1000;
  display: grid;
  gap: 8px;
}

.toast {
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 18px;
  box-shadow: var(--shadow-lg);
  font-size: 13.5px;
  font-weight: 500;
  transform: translateY(12px);
  opacity: 0;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.toast-error {
  border-left: 4px solid var(--coral);
}

.toast-info {
  border-left: 4px solid var(--accent);
}

/* --------------------------------------------------------------------------
   9. Site Footer
   -------------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 60px 0 40px;
  margin-top: 60px;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 48px;
  margin-bottom: 40px;
}

.footer-brand .brand {
  margin-bottom: 12px;
}

.footer-tagline {
  font-size: 13.5px;
  color: var(--muted);
  max-width: 320px;
  margin: 0;
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.footer-nav-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-nav-col strong {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
  margin-bottom: 4px;
}

.footer-nav-col a {
  font-size: 13.5px;
  color: var(--muted);
  transition: color 0.15s ease;
}

.footer-nav-col a:hover {
  color: var(--accent);
}

.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--subtle);
  flex-wrap: wrap;
  gap: 12px;
}

/* --------------------------------------------------------------------------
   10. Responsive Media Queries
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .hero-section {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 48px 0 40px;
  }
  .visual-container {
    max-width: 100%;
  }
  .steps-timeline {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 20px;
  }
  .steps-timeline::before {
    display: none;
  }
  .footer-top {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (max-width: 768px) {
  .site-nav {
    display: none;
  }
  .mobile-nav-toggle {
    display: flex;
  }
  .header-cta {
    display: none;
  }
  .steps-timeline {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .field-grid {
    grid-template-columns: 1fr;
  }
  .summary {
    grid-template-columns: 1fr 1fr;
  }
  .summary-total {
    grid-column: 1 / -1;
    border-top: 1px solid var(--line);
    padding-top: 10px;
  }
  .step-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .step-heading p {
    text-align: left;
  }
  .group-card {
    grid-template-columns: auto 1fr auto;
  }
  .group-price {
    grid-column: 2;
    text-align: left;
  }
  .footer-nav {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}

@media (max-width: 480px) {
  .shell {
    width: min(100% - 28px, 1140px);
  }
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-actions button,
  .hero-actions a {
    width: 100%;
  }
  .value-grid {
    grid-template-columns: 1fr;
  }
  .footer-nav {
    grid-template-columns: 1fr;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
/* Shared owner operating system */
.admin-body{background:var(--paper)}.control-shell{padding-bottom:80px}.admin-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;padding:58px 0 38px}.admin-heading h1{font-size:clamp(40px,5vw,66px);margin-bottom:15px}.admin-heading p{color:var(--muted);max-width:620px}.control-section{margin:28px 0 52px}.section-title{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:18px}.section-title h2{font:600 27px 'Space Grotesk';letter-spacing:-.04em;margin:5px 0 0}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.metric-grid.compact{grid-template-columns:repeat(5,1fr)}.metric-card,.health-row,.admin-table,.audit-list,.job-admin-card,.dashboard-banner{background:var(--card);border:1px solid var(--line);border-radius:18px}.metric-card{padding:20px}.metric-card span,.metric-card small{display:block;color:var(--muted);font-size:12px}.metric-card strong{display:block;font:600 30px 'Space Grotesk';letter-spacing:-.06em;margin:12px 0 4px}.metric-card.small strong{font-size:25px}.dashboard-banner{display:flex;gap:12px;padding:16px 18px;background:color-mix(in srgb,var(--lime) 18%,var(--card));margin-bottom:25px}.two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:22px}.admin-table,.audit-list,.health-list{overflow:hidden}.table-head,.table-row{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:12px;padding:14px 18px;align-items:center}.table-head{background:var(--soft);color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.1em}.table-row{border-top:1px solid var(--line)}.table-row span:first-child{display:grid}.table-row small,.audit-row small{color:var(--muted);font-size:12px}.health-row{display:flex;align-items:center;gap:12px;padding:15px 17px;border-radius:0;border-width:0 0 1px}.health-row:last-child{border-bottom:0}.health-dot{width:8px;height:8px;border-radius:50%;background:#63c78d;box-shadow:0 0 0 4px #63c78d22}.health-row span{display:grid;flex:1}.health-row strong{font-size:12px;color:var(--muted)}.audit-row{display:flex;justify-content:space-between;gap:20px;padding:15px 18px;border-bottom:1px solid var(--line)}.audit-row:last-child{border:0}.audit-row span{display:grid}.audit-row time{color:var(--muted);font-size:12px}.job-list{display:grid;gap:15px}.job-admin-card{display:flex;justify-content:space-between;gap:25px;padding:22px}.job-admin-main h3{font:600 24px 'Space Grotesk';margin:6px 0}.job-admin-main p{color:var(--muted);margin:0}.job-admin-forms{display:grid;grid-template-columns:auto auto;gap:8px;align-content:start;min-width:320px}.job-admin-forms form{grid-column:1/-1;display:grid;gap:8px}.job-admin-forms button,.job-admin-forms>a{border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:10px;padding:10px 12px;text-align:center;text-decoration:none}.job-admin-forms .primary{background:var(--green);color:#fff}.queue-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}.queue-tag{background:var(--soft);border-radius:99px;padding:5px 9px;font-size:12px}.success-banner{background:var(--lime);color:var(--green-2);padding:14px 16px;border-radius:13px;margin-bottom:20px}.queue-empty,.empty-state{padding:25px;color:var(--muted);text-align:center;border:1px dashed var(--line);border-radius:16px}
@media(max-width:800px){.shell{width:min(100% - 28px,620px)}.site-header{padding:16px 0}.header-note{display:none}.header-actions{gap:8px}.header-actions>a:first-of-type{display:none}.hero{grid-template-columns:1fr;padding:45px 0 32px;gap:28px}.hero h1{font-size:54px}.hero-signal{min-height:210px}.app-card{padding:20px;margin-bottom:48px}.form-grid,.two-col{grid-template-columns:1fr}.field.full{grid-column:auto}.metric-grid,.metric-grid.compact{grid-template-columns:repeat(2,1fr)}.admin-heading{display:block;padding:35px 0 25px}.admin-heading .primary{margin-top:15px}.flow-top{align-items:flex-start;flex-direction:column}.progress-track{width:100%}.group-card{grid-template-columns:auto 1fr auto}.group-card-price{grid-column:2;text-align:left}.check-mark{grid-column:3;grid-row:1}.job-admin-card{display:block}.job-admin-forms{margin-top:18px;min-width:0}.table-head{display:none}.table-row{grid-template-columns:1fr 1fr;padding:14px}.table-row span:first-child{grid-column:1/-1}.summary-bar{align-items:flex-start;flex-direction:column}.hero-actions{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}
.step{display:none}.step.active{display:block}.form-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:26px}.text-button{border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:12px;padding:12px 16px}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field-grid>label,.step>label{display:grid;gap:7px;font-size:12px;font-weight:700}.field-grid input,.field-grid select,.step>label textarea,.step>label input{border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:12px;padding:12px 13px;outline:none}.step>label{margin-top:16px}.field-grid input:focus,.field-grid select:focus,.step>label textarea:focus,.step>label input:focus{border-color:var(--green);box-shadow:0 0 0 4px #174d4217}.group-main{display:grid}.group-name{font-weight:700}.group-meta{color:var(--muted);font-size:12px}.group-price small{display:block;color:var(--muted);font-weight:400;font-size:11px}.summary{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;background:var(--soft);border-radius:16px;padding:16px;margin-top:18px}.summary span{display:block;color:var(--muted);font-size:12px}.summary strong{font:600 24px 'Space Grotesk'}.summary-total{text-align:right}.fine-print{color:var(--muted);font-size:12px}.preview-card{border:1px solid var(--line);border-radius:16px;overflow:hidden}.preview-top{display:flex;align-items:center;gap:9px;padding:13px 16px;color:var(--muted);font-size:12px}.fb-dot{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#1877f2;color:#fff;font-weight:700}.checks{display:grid;gap:12px;margin-top:20px}.checks label{display:flex;gap:10px;align-items:flex-start;color:var(--muted);font-size:13px}.checks input{accent-color:var(--green)}.ambient{display:none}@media(max-width:800px){.field-grid{grid-template-columns:1fr}.summary{grid-template-columns:1fr 1fr}.summary-total{text-align:left}}
body:not(.admin-body) .site-footer{border-top-color:rgba(255,255,255,.35);color:rgba(255,255,255,.78)}
body:not(.admin-body) .site-footer a{color:var(--photo-ice)}
@keyframes jobsek-reference-flow{from{background-position:0% 40%}to{background-position:100% 58%}}
@keyframes jobsek-blue-sheen{from{background-position:0% 0}to{background-position:100% 0}}
@media(prefers-reduced-motion:reduce){body:not(.admin-body){animation:none}body:not(.admin-body) .hero::after{animation:none}}


/* JOBSEK Apple-style typography motion */
body:not(.admin-body) .hero h1{letter-spacing:-.045em;line-height:.98;font-optical-sizing:auto;animation:jobsek-type-in 720ms var(--ease-out) both}
body:not(.admin-body) .hero h1 em{display:inline-block;animation:jobsek-emphasis-in 850ms var(--ease-out) 90ms both}
body:not(.admin-body) .hero-copy{animation:jobsek-type-in 650ms var(--ease-out) 150ms both}
body:not(.admin-body) .hero-actions{animation:jobsek-type-in 600ms var(--ease-out) 260ms both}
body:not(.admin-body) .trust-row{animation:jobsek-type-in 600ms var(--ease-out) 340ms both}
body:not(.admin-body) .eyebrow,body:not(.admin-body) .kicker{letter-spacing:.14em;transition:letter-spacing 260ms var(--ease-out),color 260ms ease}
body:not(.admin-body) .step-heading h2{letter-spacing:-.025em;animation:jobsek-text-settle 520ms var(--ease-out) both}
body:not(.admin-body) .step-heading p{animation:jobsek-text-settle 520ms var(--ease-out) 70ms both}
body:not(.admin-body) .field-grid label,body:not(.admin-body) .checks label{transition:color 180ms ease}
@media (hover:hover) and (pointer:fine){body:not(.admin-body) .eyebrow:hover,body:not(.admin-body) .kicker:hover{letter-spacing:.19em;color:var(--photo-ice)}body:not(.admin-body) .hero h1:hover em{filter:brightness(1.12);text-shadow:0 0 40px rgba(185,228,240,.72)}}
@keyframes jobsek-type-in{from{opacity:0;transform:translateY(14px);filter:blur(8px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes jobsek-emphasis-in{from{opacity:0;transform:translateY(18px) scale(.98);filter:blur(10px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
@keyframes jobsek-text-settle{from{opacity:0;transform:translateY(8px);filter:blur(5px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@media(prefers-reduced-motion:reduce){body:not(.admin-body) .hero h1,body:not(.admin-body) .hero h1 em,body:not(.admin-body) .hero-copy,body:not(.admin-body) .hero-actions,body:not(.admin-body) .trust-row,body:not(.admin-body) .step-heading h2,body:not(.admin-body) .step-heading p{animation:none;filter:none;transform:none;opacity:1}}


/* JOBSEK theme-paired contrast correction */
:root{--jobsek-bg-page:#f5f7fb;--jobsek-bg-surface:rgba(255,255,255,.25);--jobsek-bg-surface-2:rgba(255,255,255,.16);--jobsek-text-primary:#18232b;--jobsek-text-secondary:#52616d;--jobsek-border:rgba(20,45,75,.22)}
html[data-theme="dark"]{--jobsek-bg-page:#0f1729;--jobsek-bg-surface:rgba(24,39,70,.78);--jobsek-bg-surface-2:rgba(19,33,60,.86);--jobsek-text-primary:#f5f7fb;--jobsek-text-secondary:#c1cbe0;--jobsek-border:rgba(191,224,255,.3)}
body:not(.admin-body){color:var(--jobsek-text-primary)}
html[data-theme="dark"] body:not(.admin-body){background:radial-gradient(ellipse at 12% 8%,rgba(11,183,215,.22),transparent 32%),radial-gradient(ellipse at 86% 12%,rgba(20,123,232,.3),transparent 36%),linear-gradient(145deg,#0f1729 0%,#132753 52%,#101c3b 100%);color:var(--jobsek-text-primary)}
html[data-theme="dark"] body:not(.admin-body) .site-header,html[data-theme="dark"] body:not(.admin-body) .hero h1,html[data-theme="dark"] body:not(.admin-body) .hero-copy,html[data-theme="dark"] body:not(.admin-body) .step-heading h2,html[data-theme="dark"] body:not(.admin-body) .step-heading p,html[data-theme="dark"] body:not(.admin-body) .field-grid label,html[data-theme="dark"] body:not(.admin-body) .checks label,html[data-theme="dark"] body:not(.admin-body) .trust-row,html[data-theme="dark"] body:not(.admin-body) .fine-print{color:var(--jobsek-text-primary)}
html[data-theme="dark"] body:not(.admin-body) .hero,html[data-theme="dark"] body:not(.admin-body) .app-card{background:linear-gradient(135deg,rgba(31,53,92,.82),rgba(17,31,61,.74)) padding-box,linear-gradient(120deg,rgba(191,224,255,.5),rgba(11,183,215,.5),rgba(20,123,232,.62)) border-box;border-color:transparent;box-shadow:0 32px 90px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.2)}
html[data-theme="dark"] body:not(.admin-body) .hero-signal,html[data-theme="dark"] body:not(.admin-body) .status-pill,html[data-theme="dark"] body:not(.admin-body) .group-card,html[data-theme="dark"] body:not(.admin-body) .step,html[data-theme="dark"] body:not(.admin-body) .summary,html[data-theme="dark"] body:not(.admin-body) .post-preview,html[data-theme="dark"] body:not(.admin-body) .success-state{background:linear-gradient(135deg,rgba(34,59,101,.82),rgba(19,36,70,.78)) padding-box,linear-gradient(120deg,rgba(191,224,255,.42),rgba(11,183,215,.4),rgba(20,123,232,.5)) border-box;border-color:transparent;color:var(--jobsek-text-primary);box-shadow:0 20px 52px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.18)}
html[data-theme="dark"] body:not(.admin-body) .hero-signal *,html[data-theme="dark"] body:not(.admin-body) .status-pill *,html[data-theme="dark"] body:not(.admin-body) .group-card *,html[data-theme="dark"] body:not(.admin-body) .step *,html[data-theme="dark"] body:not(.admin-body) .summary *,html[data-theme="dark"] body:not(.admin-body) .post-preview *,html[data-theme="dark"] body:not(.admin-body) .success-state *{color:inherit}
html[data-theme="dark"] body:not(.admin-body) input,html[data-theme="dark"] body:not(.admin-body) select,html[data-theme="dark"] body:not(.admin-body) textarea{background:var(--jobsek-bg-surface-2);color:var(--jobsek-text-primary);border-color:var(--jobsek-border);box-shadow:inset 0 1px rgba(255,255,255,.16),0 8px 24px rgba(0,0,0,.18)}
html[data-theme="dark"] body:not(.admin-body) input::placeholder,html[data-theme="dark"] body:not(.admin-body) textarea::placeholder{color:var(--jobsek-text-secondary);opacity:1}
html[data-theme="dark"] body:not(.admin-body) input:focus,html[data-theme="dark"] body:not(.admin-body) select:focus,html[data-theme="dark"] body:not(.admin-body) textarea:focus{background:rgba(29,49,88,.95);border-color:#b9e4f0;box-shadow:0 0 0 4px rgba(185,228,240,.2),0 12px 32px rgba(0,0,0,.26)}
html[data-theme="dark"] body:not(.admin-body) .progress-track{background:rgba(191,224,255,.2)}
html[data-theme="dark"] body:not(.admin-body) .progress-track i{background:linear-gradient(90deg,#0bb7d7,#b9e4f0);box-shadow:0 0 14px rgba(185,228,240,.45)}
html[data-theme="dark"] body:not(.admin-body) .site-footer{color:var(--jobsek-text-secondary);border-top-color:var(--jobsek-border)}
html[data-theme="dark"] body:not(.admin-body) .site-footer a{color:#b9e4f0}
@media(prefers-contrast:more){html[data-theme="dark"] body:not(.admin-body) .hero,html[data-theme="dark"] body:not(.admin-body) .app-card,html[data-theme="dark"] body:not(.admin-body) .step,html[data-theme="dark"] body:not(.admin-body) .group-card{background:#182746;border-color:#b9e4f0}}
@media(prefers-reduced-transparency:reduce){body:not(.admin-body) .hero,body:not(.admin-body) .app-card,body:not(.admin-body) .step,body:not(.admin-body) .group-card{backdrop-filter:none;-webkit-backdrop-filter:none}html[data-theme="dark"] body:not(.admin-body) .hero,html[data-theme="dark"] body:not(.admin-body) .app-card,html[data-theme="dark"] body:not(.admin-body) .step,html[data-theme="dark"] body:not(.admin-body) .group-card{background:#182746}}


/* JOBSEK default-mode contrast correction */
html[data-theme="light"] body:not(.admin-body){--jobsek-light-page:#dff3fa;--jobsek-light-surface:rgba(255,255,255,.72);--jobsek-light-surface-2:rgba(236,249,253,.86);--jobsek-light-text:#09234a;--jobsek-light-muted:#234566;--jobsek-light-border:rgba(9,35,74,.24);background:radial-gradient(ellipse at 12% 10%,rgba(185,228,240,.95),transparent 35%),radial-gradient(ellipse at 88% 16%,rgba(11,183,215,.5),transparent 34%),linear-gradient(145deg,#dff3fa 0%,#c9eafa 48%,#b8d8f2 100%);color:var(--jobsek-light-text)}
html[data-theme="light"] body:not(.admin-body) .site-header,html[data-theme="light"] body:not(.admin-body) .hero h1,html[data-theme="light"] body:not(.admin-body) .hero-copy,html[data-theme="light"] body:not(.admin-body) .step-heading h2,html[data-theme="light"] body:not(.admin-body) .step-heading p,html[data-theme="light"] body:not(.admin-body) .field-grid label,html[data-theme="light"] body:not(.admin-body) .checks label,html[data-theme="light"] body:not(.admin-body) .trust-row,html[data-theme="light"] body:not(.admin-body) .fine-print{color:var(--jobsek-light-text)}
html[data-theme="light"] body:not(.admin-body) .hero,html[data-theme="light"] body:not(.admin-body) .app-card{background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(225,244,252,.68)) padding-box,linear-gradient(120deg,rgba(255,255,255,.98),rgba(11,183,215,.5),rgba(20,123,232,.42),rgba(255,255,255,.96)) border-box;border-color:transparent;box-shadow:0 30px 80px rgba(15,64,120,.18),inset 0 1px rgba(255,255,255,.98)}
html[data-theme="light"] body:not(.admin-body) .hero-signal,html[data-theme="light"] body:not(.admin-body) .status-pill,html[data-theme="light"] body:not(.admin-body) .group-card,html[data-theme="light"] body:not(.admin-body) .step,html[data-theme="light"] body:not(.admin-body) .summary,html[data-theme="light"] body:not(.admin-body) .post-preview,html[data-theme="light"] body:not(.admin-body) .success-state{background:linear-gradient(135deg,rgba(255,255,255,.84),rgba(228,246,252,.7)) padding-box,linear-gradient(120deg,rgba(255,255,255,.96),rgba(11,183,215,.4),rgba(185,228,240,.75)) border-box;border-color:transparent;color:var(--jobsek-light-text);box-shadow:0 18px 44px rgba(15,64,120,.14),inset 0 1px rgba(255,255,255,.98)}
html[data-theme="light"] body:not(.admin-body) .hero-signal *,html[data-theme="light"] body:not(.admin-body) .status-pill *,html[data-theme="light"] body:not(.admin-body) .group-card *,html[data-theme="light"] body:not(.admin-body) .step *,html[data-theme="light"] body:not(.admin-body) .summary *,html[data-theme="light"] body:not(.admin-body) .post-preview *,html[data-theme="light"] body:not(.admin-body) .success-state *{color:inherit}
html[data-theme="light"] body:not(.admin-body) .hero h1 em{color:#153fd1;text-shadow:0 0 24px rgba(21,63,209,.2)}
html[data-theme="light"] body:not(.admin-body) input,html[data-theme="light"] body:not(.admin-body) select,html[data-theme="light"] body:not(.admin-body) textarea{background:var(--jobsek-light-surface-2);color:var(--jobsek-light-text);border-color:var(--jobsek-light-border);box-shadow:inset 0 1px rgba(255,255,255,.95),0 6px 20px rgba(15,64,120,.1)}
html[data-theme="light"] body:not(.admin-body) input::placeholder,html[data-theme="light"] body:not(.admin-body) textarea::placeholder{color:var(--jobsek-light-muted);opacity:1}
html[data-theme="light"] body:not(.admin-body) input:focus,html[data-theme="light"] body:not(.admin-body) select:focus,html[data-theme="light"] body:not(.admin-body) textarea:focus{background:#fff;border-color:#153fd1;box-shadow:0 0 0 4px rgba(21,63,209,.16),0 10px 28px rgba(15,64,120,.14)}
html[data-theme="light"] body:not(.admin-body) .progress-track{background:rgba(9,35,74,.2)}
html[data-theme="light"] body:not(.admin-body) .progress-track i{background:linear-gradient(90deg,#0bb7d7,#153fd1);box-shadow:0 0 12px rgba(21,63,209,.3)}
html[data-theme="light"] body:not(.admin-body) .site-footer{color:var(--jobsek-light-muted);border-top-color:var(--jobsek-light-border)}
html[data-theme="light"] body:not(.admin-body) .site-footer a{color:#153fd1}
html[data-theme="light"] body:not(.admin-body) .primary{color:#fff}


/* JOBSEK step panel and footer composition */
body:not(.admin-body) .step{padding:clamp(24px,4vw,40px);border-radius:24px}
body:not(.admin-body) .step-heading{padding:0 0 var(--space-sm);margin-bottom:var(--space-lg);border-bottom:1px solid currentColor;border-color:rgba(9,35,74,.16)}
body:not(.admin-body) .step-heading h2{margin:var(--space-xs) 0 0}
body:not(.admin-body) .step-heading p{margin:var(--space-xs) 0 0;max-width:38rem}
html[data-theme="dark"] body:not(.admin-body) .step-heading{border-color:rgba(191,224,255,.24)}
body:not(.admin-body) .site-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-sm) var(--space-lg);padding:var(--space-md) 0 var(--space-xl);margin-top:var(--space-xl)}
body:not(.admin-body) .site-footer span{line-height:1.4}
body:not(.admin-body) .site-footer a{display:inline-flex;align-items:center;min-height:36px;padding:8px 14px;border:1px solid currentColor;border-color:rgba(9,35,74,.18);border-radius:999px;background:rgba(255,255,255,.14);transition:transform 180ms var(--ease-out),background-color 180ms ease,border-color 180ms ease,box-shadow 180ms ease}
body:not(.admin-body) .site-footer a+a{margin-left:var(--space-xs)}
html[data-theme="dark"] body:not(.admin-body) .site-footer a{border-color:rgba(191,224,255,.3);background:rgba(255,255,255,.08)}
@media (hover:hover) and (pointer:fine){body:not(.admin-body) .site-footer a:hover{transform:translateY(-2px);background:rgba(185,228,240,.2);border-color:rgba(185,228,240,.72);box-shadow:0 10px 24px rgba(5,27,111,.18)}}
@media(max-width:640px){body:not(.admin-body) .step{padding:var(--space-md)}body:not(.admin-body) .site-footer{align-items:flex-start;flex-direction:column;gap:var(--space-xs);margin-top:var(--space-lg)}body:not(.admin-body) .site-footer a+a{margin-left:0}}


/* JOBSEK universal rounded-corner polish */
body:not(.admin-body) .hero,body:not(.admin-body) .app-card{border-radius:32px}
body:not(.admin-body) .hero-signal,body:not(.admin-body) .status-pill,body:not(.admin-body) .group-card,body:not(.admin-body) .step,body:not(.admin-body) .summary,body:not(.admin-body) .post-preview,body:not(.admin-body) .success-state{border-radius:24px}
body:not(.admin-body) input,body:not(.admin-body) select,body:not(.admin-body) textarea{border-radius:16px}
body:not(.admin-body) button,body:not(.admin-body) .primary,body:not(.admin-body) .button-link{border-radius:16px}
body:not(.admin-body) .status-pill,body:not(.admin-body) .step-dot,body:not(.admin-body) .site-footer a{border-radius:999px}
body:not(.admin-body) .progress-track{border-radius:999px;overflow:hidden}
body:not(.admin-body) .progress-track i{border-radius:inherit}
body:not(.admin-body) .fb-dot,body:not(.admin-body) .success-icon{border-radius:50%}
@media(max-width:640px){body:not(.admin-body) .hero,body:not(.admin-body) .app-card{border-radius:24px}body:not(.admin-body) .hero-signal,body:not(.admin-body) .status-pill,body:not(.admin-body) .group-card,body:not(.admin-body) .step,body:not(.admin-body) .summary,body:not(.admin-body) .post-preview,body:not(.admin-body) .success-state{border-radius:20px}}


/* JOBSEK policy page composition */
body:not(.admin-body):has(.policy-page){min-height:100vh;padding:24px;background:radial-gradient(ellipse at 8% 8%,rgba(11,183,215,.55),transparent 34%),radial-gradient(ellipse at 92% 14%,rgba(20,123,232,.5),transparent 36%),linear-gradient(145deg,#dff3fa 0%,#c9eafa 48%,#b8d8f2 100%);color:#09234a}
.policy-page{width:min(100%,920px);box-sizing:border-box;margin:clamp(16px,5vw,64px) auto;padding:clamp(28px,6vw,72px);border-radius:32px;background:linear-gradient(135deg,rgba(255,255,255,.86),rgba(225,244,252,.72)) padding-box,linear-gradient(120deg,rgba(255,255,255,.98),rgba(11,183,215,.5),rgba(20,123,232,.45)) border-box;border:1px solid transparent;box-shadow:0 30px 90px rgba(15,64,120,.2),inset 0 1px rgba(255,255,255,.98);backdrop-filter:blur(34px) saturate(145%);-webkit-backdrop-filter:blur(34px) saturate(145%);animation:jobsek-policy-in 620ms var(--ease-out) both}
.policy-page>a:first-child{display:inline-flex;align-items:center;margin-bottom:var(--space-lg);padding:9px 15px;border-radius:999px;color:#153fd1;background:rgba(255,255,255,.6);border:1px solid rgba(21,63,209,.18);transition:transform 180ms var(--ease-out),box-shadow 180ms ease}
.policy-page>h1{margin:0;color:#09234a;letter-spacing:-.035em;font-size:clamp(2rem,5vw,3.4rem);line-height:1.05}
.policy-page>h1+p{margin-top:var(--space-md);padding:var(--space-md);border-radius:20px;background:rgba(255,255,255,.58);color:#234566;line-height:1.7}
.policy-page>h2{margin:var(--space-xl) 0 var(--space-sm);padding-top:var(--space-md);border-top:1px solid rgba(9,35,74,.18);color:#153fd1;letter-spacing:-.02em}
.policy-page>p,.policy-page>ul{margin:0 0 var(--space-md);color:#182f4d;line-height:1.75}
.policy-page>ul{padding:var(--space-md) var(--space-md) var(--space-md) 2.5rem;border-radius:20px;background:rgba(255,255,255,.44)}
.policy-page a{color:#153fd1;font-weight:650}
.policy-page>p:last-child{margin-top:var(--space-xl);padding-top:var(--space-md);border-top:1px solid rgba(9,35,74,.18)}
@media (hover:hover) and (pointer:fine){.policy-page>a:first-child:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(15,64,120,.16)}.policy-page a:hover{text-decoration-thickness:2px}}
html[data-theme="dark"] body:not(.admin-body):has(.policy-page){background:radial-gradient(ellipse at 12% 8%,rgba(11,183,215,.22),transparent 32%),linear-gradient(145deg,#0f1729,#132753 55%,#101c3b);color:#f5f7fb}
html[data-theme="dark"] .policy-page{background:linear-gradient(135deg,rgba(31,53,92,.9),rgba(17,31,61,.84)) padding-box,linear-gradient(120deg,rgba(191,224,255,.5),rgba(11,183,215,.5),rgba(20,123,232,.62)) border-box;box-shadow:0 30px 90px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.2)}
html[data-theme="dark"] .policy-page>h1,html[data-theme="dark"] .policy-page>p,html[data-theme="dark"] .policy-page>ul,html[data-theme="dark"] .policy-page>h1+p{color:#f5f7fb}
html[data-theme="dark"] .policy-page>h2{color:#b9e4f0;border-color:rgba(191,224,255,.24)}
html[data-theme="dark"] .policy-page>h1+p,html[data-theme="dark"] .policy-page>ul{background:rgba(19,33,60,.66)}
@keyframes jobsek-policy-in{from{opacity:0;transform:translateY(18px);filter:blur(8px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@media(prefers-reduced-motion:reduce){.policy-page{animation:none}}


/* JOBSEK Control Center visual parity */
body.admin-body{--photo-cyan:#0bb7d7;--photo-electric:#147be8;--photo-cobalt:#153fd1;--photo-ice:#b9e4f0;background:radial-gradient(ellipse at 8% 8%,rgba(11,183,215,.68),transparent 34%),radial-gradient(ellipse at 88% 12%,rgba(20,123,232,.7),transparent 38%),radial-gradient(ellipse at 58% 92%,rgba(21,63,209,.66),transparent 42%),linear-gradient(145deg,#0bb7d7 0%,#147be8 44%,#153fd1 100%);background-size:160% 160%;color:#fff;animation:jobsek-admin-flow 20s ease-in-out infinite alternate}
body.admin-body .admin-header{background:rgba(8,36,105,.38);border-color:rgba(185,228,240,.35);box-shadow:0 12px 34px rgba(5,27,111,.2),inset 0 1px rgba(255,255,255,.4);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);border-radius:0 0 24px 24px}
body.admin-body .admin-nav,body.admin-body .admin-nav a{color:#fff}
body.admin-body .admin-nav a{border-radius:999px;transition:transform 180ms var(--ease-out),background-color 180ms ease,box-shadow 180ms ease}
body.admin-body .admin-nav a:hover{background:rgba(185,228,240,.2);box-shadow:0 8px 22px rgba(5,27,111,.22);transform:translateY(-2px)}
body.admin-body .control-shell{padding-top:var(--space-xl)}
body.admin-body .control-section,body.admin-body .attention-item,body.admin-body .job-row,body.admin-body .focus-card,body.admin-body .metric-card,body.admin-body .settings-card,body.admin-body .quick-view{background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(185,228,240,.08)) padding-box,linear-gradient(120deg,rgba(255,255,255,.72),rgba(185,228,240,.55),rgba(11,183,215,.55)) border-box;border:1px solid transparent;border-radius:24px;box-shadow:0 22px 54px rgba(5,27,111,.24),inset 0 1px rgba(255,255,255,.66);backdrop-filter:blur(28px) saturate(160%);-webkit-backdrop-filter:blur(28px) saturate(160%);color:#fff}
body.admin-body .control-section{padding:clamp(24px,4vw,40px);margin-bottom:var(--space-lg)}
body.admin-body .attention-item,body.admin-body .job-row,body.admin-body .focus-card,body.admin-body .metric-card,body.admin-body .settings-card,body.admin-body .quick-view{padding:var(--space-md)}
body.admin-body h1,body.admin-body h2,body.admin-body h3,body.admin-body p,body.admin-body label,body.admin-body .admin-header,body.admin-body .job-row *,body.admin-body .attention-item *,body.admin-body .metric-card *{color:#fff}
body.admin-body input,body.admin-body select,body.admin-body textarea,body.admin-body .searchbox{background:rgba(8,35,94,.5);border:1px solid rgba(185,228,240,.5);border-radius:16px;color:#fff;backdrop-filter:blur(16px) saturate(155%);-webkit-backdrop-filter:blur(16px) saturate(155%);box-shadow:inset 0 1px rgba(255,255,255,.28),0 8px 22px rgba(5,27,111,.16)}
body.admin-body input::placeholder,body.admin-body textarea::placeholder{color:rgba(255,255,255,.72)}
body.admin-body input:focus,body.admin-body select:focus,body.admin-body textarea:focus{border-color:#b9e4f0;box-shadow:0 0 0 4px rgba(185,228,240,.2),0 10px 28px rgba(5,27,111,.24);outline:none}
body.admin-body button,body.admin-body .primary,body.admin-body .button-link{border-radius:16px;transition:transform 180ms var(--ease-out),box-shadow 180ms ease,background-color 180ms ease}
body.admin-body button:hover,body.admin-body .primary:hover,body.admin-body .button-link:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(5,27,111,.24)}
body.admin-body .primary{background:linear-gradient(105deg,#0bb7d7,#147be8 48%,#153fd1);color:#fff;border:1px solid rgba(255,255,255,.66);box-shadow:0 14px 32px rgba(5,27,111,.28)}
body.admin-body .status-pill,body.admin-body .badge,body.admin-body .job-status,body.admin-body .payment-status{border-radius:999px}
body.admin-body .tabs a,body.admin-body .workspace-tabs a{border-radius:999px}
body.admin-body .admin-footer{color:rgba(255,255,255,.78);border-color:rgba(185,228,240,.3)}
@keyframes jobsek-admin-flow{from{background-position:0% 42%}to{background-position:100% 58%}}
@media(prefers-reduced-motion:reduce){body.admin-body{animation:none}body.admin-body button:hover,body.admin-body .primary:hover,body.admin-body .button-link:hover{transform:none}}


/* JOBSEK cinematic identity and calm motion */
body:not(.admin-body) .brand,body.admin-body .brand{display:inline-flex;align-items:center;gap:10px;letter-spacing:.08em;font-weight:760}
body:not(.admin-body) .brand-mark,body.admin-body .brand-mark{position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:14px;background:linear-gradient(145deg,#b9e4f0 0%,#0bb7d7 38%,#147be8 68%,#153fd1 100%);color:#fff;font-size:19px;font-weight:800;box-shadow:0 0 0 1px rgba(255,255,255,.72),0 10px 28px rgba(5,27,111,.28),inset 0 1px rgba(255,255,255,.9);isolation:isolate;animation:jobsek-mark-breathe 5s ease-in-out infinite}
body:not(.admin-body) .brand-mark::before,body.admin-body .brand-mark::before{content:"";position:absolute;inset:-5px;border-radius:18px;border:1px solid rgba(185,228,240,.65);box-shadow:0 0 24px rgba(185,228,240,.42);opacity:.72;animation:jobsek-mark-ring 7s ease-in-out infinite alternate;pointer-events:none}
body:not(.admin-body) .brand-mark::after,body.admin-body .brand-mark::after{content:"";position:absolute;inset:2px;border-radius:11px;background:linear-gradient(125deg,rgba(255,255,255,.72),transparent 38%,rgba(185,228,240,.12));mix-blend-mode:screen;pointer-events:none}
body:not(.admin-body) .brand-mark{color:#153fd1}
body:not(.admin-body) .brand:hover .brand-mark,body.admin-body .brand:hover .brand-mark{box-shadow:0 0 0 1px rgba(255,255,255,.9),0 14px 34px rgba(5,27,111,.36),inset 0 1px rgba(255,255,255,.96)}
body:not(.admin-body) .brand,body.admin-body .brand{transition:transform 220ms var(--ease-out),filter 220ms ease}
@media (hover:hover) and (pointer:fine){body:not(.admin-body) .brand:hover,body.admin-body .brand:hover{transform:translateY(-2px);filter:saturate(112%)}}
body:not(.admin-body) .hero::after,body.admin-body .admin-header::after{content:"";position:absolute;pointer-events:none;inset:0;border-radius:inherit;background:radial-gradient(circle at 20% 14%,rgba(185,228,240,.2),transparent 24%),radial-gradient(circle at 78% 80%,rgba(11,183,215,.16),transparent 26%);opacity:.85}
@keyframes jobsek-mark-breathe{0%,100%{transform:translateY(0);filter:saturate(100%)}50%{transform:translateY(-2px);filter:saturate(115%)}}
@keyframes jobsek-mark-ring{from{transform:scale(.96);opacity:.45}to{transform:scale(1.06);opacity:.88}}
@media(prefers-reduced-motion:reduce){body:not(.admin-body) .brand-mark,body.admin-body .brand-mark,body:not(.admin-body) .brand-mark::before,body.admin-body .brand-mark::before{animation:none}body:not(.admin-body) .brand,body.admin-body .brand{transition:none}}


/* JOBSEK Control Center contrast and spacing guarantee */
body.admin-body{color:#f8fbff}
body.admin-body .control-shell{padding-left:clamp(16px,3vw,32px);padding-right:clamp(16px,3vw,32px);padding-bottom:var(--space-2xl)}
body.admin-body .control-section{padding:clamp(28px,4vw,44px);margin-bottom:var(--space-lg);border-radius:28px}
body.admin-body .section-title{margin-bottom:var(--space-md);gap:var(--space-md)}
body.admin-body .metric-grid{gap:var(--space-md);margin-bottom:var(--space-lg)}
body.admin-body .metric-card{min-height:108px;padding:var(--space-md);border-radius:22px}
body.admin-body .attention-grid{gap:var(--space-md)}
body.admin-body .attention-item{min-height:86px;padding:var(--space-md);border-radius:20px}
body.admin-body .job-table-head{padding:0 var(--space-md) var(--space-sm);color:rgba(255,255,255,.78);border-color:rgba(185,228,240,.3)}
body.admin-body .job-row{display:grid;gap:var(--space-sm) var(--space-md);padding:var(--space-md)!important;margin-bottom:var(--space-sm);border-radius:20px}
body.admin-body .job-row span,body.admin-body .job-row b,body.admin-body .job-row small{color:#fff}
body.admin-body .admin-table{display:grid;gap:var(--space-xs)}
body.admin-body .table-head,body.admin-body .table-row{padding:var(--space-sm) var(--space-md);border-radius:16px}
body.admin-body .table-head{color:rgba(255,255,255,.8);background:rgba(8,35,94,.42)}
body.admin-body .table-row{background:rgba(255,255,255,.12);color:#fff}
body.admin-body .settings-form{display:grid;gap:var(--space-md)}
body.admin-body .settings-form label,body.admin-body .inline-form label{display:grid;gap:var(--space-xs);color:#fff}
body.admin-body .settings-form input,body.admin-body .settings-form select,body.admin-body .settings-form textarea{width:100%;box-sizing:border-box;padding:12px 16px}
body.admin-body .admin-nav{gap:var(--space-xs)}
body.admin-body .admin-nav a{padding:8px 12px}
body.admin-body .status-pill,body.admin-body .badge,body.admin-body .job-status,body.admin-body .payment-status{padding:6px 10px;background:rgba(8,35,94,.55);color:#fff;border:1px solid rgba(185,228,240,.4)}
@media(max-width:760px){body.admin-body .control-section{padding:var(--space-md)}body.admin-body .metric-grid{grid-template-columns:1fr 1fr}body.admin-body .job-row{grid-template-columns:1fr!important}body.admin-body .table-head{display:none}body.admin-body .table-row{grid-template-columns:1fr;gap:var(--space-xs)}}


/* JOBSEK admin spacing tokens */
body.admin-body{--space-xs:8px;--space-sm:16px;--space-md:24px;--space-lg:40px;--space-xl:64px;--space-2xl:96px}
body.admin-body .metric-card,body.admin-body .attention-item,body.admin-body .job-row,body.admin-body .focus-card,body.admin-body .settings-card,body.admin-body .quick-view{padding:24px!important}
body.admin-body .settings-form,body.admin-body .inline-form{gap:24px}
body.admin-body .job-row{margin-bottom:16px}


/* Control Center light-theme readability */
html[data-theme="light"] body.admin-body .control-section,html[data-theme="light"] body.admin-body .attention-item,html[data-theme="light"] body.admin-body .job-row,html[data-theme="light"] body.admin-body .focus-card,html[data-theme="light"] body.admin-body .metric-card,html[data-theme="light"] body.admin-body .settings-card,html[data-theme="light"] body.admin-body .quick-view{background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(225,244,252,.78)) padding-box,linear-gradient(120deg,rgba(255,255,255,.98),rgba(11,183,215,.42),rgba(20,123,232,.38)) border-box;color:#09234a;box-shadow:0 24px 58px rgba(15,64,120,.16),inset 0 1px rgba(255,255,255,.98)}
html[data-theme="light"] body.admin-body .control-section h1,html[data-theme="light"] body.admin-body .control-section h2,html[data-theme="light"] body.admin-body .control-section h3,html[data-theme="light"] body.admin-body .control-section p,html[data-theme="light"] body.admin-body .control-section label,html[data-theme="light"] body.admin-body .job-row *,html[data-theme="light"] body.admin-body .attention-item *,html[data-theme="light"] body.admin-body .metric-card *{color:#09234a}
html[data-theme="light"] body.admin-body .control-section .eyebrow,html[data-theme="light"] body.admin-body .job-table-head,html[data-theme="light"] body.admin-body .table-head{color:#234566}
html[data-theme="light"] body.admin-body .table-row{background:rgba(225,244,252,.78);color:#09234a;border-color:rgba(9,35,74,.16)}
html[data-theme="light"] body.admin-body .status-pill,html[data-theme="light"] body.admin-body .badge,html[data-theme="light"] body.admin-body .job-status,html[data-theme="light"] body.admin-body .payment-status{background:#e7f7fb;color:#09234a;border-color:rgba(9,35,74,.22)}
html[data-theme="light"] body.admin-body input,html[data-theme="light"] body.admin-body select,html[data-theme="light"] body.admin-body textarea,html[data-theme="light"] body.admin-body .searchbox{background:#f3fbfe;color:#09234a;border-color:rgba(9,35,74,.28)}
html[data-theme="light"] body.admin-body input::placeholder,html[data-theme="light"] body.admin-body textarea::placeholder{color:#234566}


/* Control Center dark-mode depth correction */
html[data-theme="dark"] body.admin-body{background:radial-gradient(ellipse at 12% 4%,rgba(11,183,215,.18),transparent 30%),radial-gradient(ellipse at 84% 12%,rgba(20,123,232,.26),transparent 34%),radial-gradient(ellipse at 48% 92%,rgba(21,63,209,.28),transparent 42%),linear-gradient(145deg,#071426 0%,#0b1d3a 52%,#081533 100%);color:#f5f7fb}
html[data-theme="dark"] body.admin-body .admin-header{background:rgba(5,18,45,.76);border-color:rgba(185,228,240,.28);box-shadow:0 14px 36px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.16)}
html[data-theme="dark"] body.admin-body .control-section,html[data-theme="dark"] body.admin-body .attention-item,html[data-theme="dark"] body.admin-body .job-row,html[data-theme="dark"] body.admin-body .focus-card,html[data-theme="dark"] body.admin-body .metric-card,html[data-theme="dark"] body.admin-body .settings-card,html[data-theme="dark"] body.admin-body .quick-view{background:linear-gradient(135deg,rgba(19,39,75,.9),rgba(8,22,50,.88)) padding-box,linear-gradient(120deg,rgba(185,228,240,.4),rgba(11,183,215,.34),rgba(20,123,232,.48)) border-box;color:#f5f7fb;box-shadow:0 26px 64px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.16)}
html[data-theme="dark"] body.admin-body .control-section h1,html[data-theme="dark"] body.admin-body .control-section h2,html[data-theme="dark"] body.admin-body .control-section h3,html[data-theme="dark"] body.admin-body .control-section p,html[data-theme="dark"] body.admin-body .control-section label,html[data-theme="dark"] body.admin-body .job-row *,html[data-theme="dark"] body.admin-body .attention-item *,html[data-theme="dark"] body.admin-body .metric-card *{color:#f5f7fb}
html[data-theme="dark"] body.admin-body input,html[data-theme="dark"] body.admin-body select,html[data-theme="dark"] body.admin-body textarea,html[data-theme="dark"] body.admin-body .searchbox{background:rgba(4,15,37,.82);color:#f5f7fb;border-color:rgba(185,228,240,.34);box-shadow:inset 0 1px rgba(255,255,255,.12),0 10px 24px rgba(0,0,0,.25)}
html[data-theme="dark"] body.admin-body .table-head{background:rgba(4,15,37,.65);color:#b9e4f0}
html[data-theme="dark"] body.admin-body .table-row{background:rgba(19,39,75,.82);color:#f5f7fb}


/* JOBSEK Calm Aurora Glass polish */
body:not(.admin-body),body.admin-body{--photo-lavender:#a9a7ff}
body:not(.admin-body){background-image:radial-gradient(ellipse at 18% 20%,rgba(169,167,255,.34),transparent 28%),radial-gradient(ellipse at 84% 76%,rgba(185,228,240,.34),transparent 30%),radial-gradient(ellipse at 48% 44%,rgba(11,183,215,.2),transparent 34%),linear-gradient(145deg,#dff3fa 0%,#c9eafa 48%,#b8d8f2 100%)}
body.admin-body{background-image:radial-gradient(ellipse at 16% 14%,rgba(169,167,255,.24),transparent 28%),radial-gradient(ellipse at 82% 78%,rgba(185,228,240,.2),transparent 30%),radial-gradient(ellipse at 50% 42%,rgba(11,183,215,.18),transparent 34%),linear-gradient(145deg,#071426 0%,#0b1d3a 52%,#081533 100%)}
body:not(.admin-body) .hero-signal{animation:jobsek-signal-float 7s ease-in-out infinite alternate}
body.admin-body .metric-card,body.admin-body .attention-item{transition:transform 220ms var(--ease-out),box-shadow 220ms ease,border-color 220ms ease}
@media (hover:hover) and (pointer:fine){body.admin-body .metric-card:hover,body.admin-body .attention-item:hover{transform:translateY(-3px);box-shadow:0 26px 60px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.22);border-color:rgba(185,228,240,.62)}body:not(.admin-body) .hero-signal:hover{transform:translateY(-3px);box-shadow:0 26px 58px rgba(15,64,120,.2),inset 0 1px rgba(255,255,255,.98)}}
@keyframes jobsek-signal-float{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-5px,0)}}
@media(prefers-reduced-motion:reduce){body:not(.admin-body) .hero-signal{animation:none}}


/* JOBSEK CINEMATIC AURORA — frontend-only visual layer */
body:not(.admin-body){background-color:#c9eafa!important;background-image:radial-gradient(ellipse 58% 42% at 8% 8%,rgba(185,228,240,.92),transparent 68%),radial-gradient(ellipse 52% 42% at 94% 18%,rgba(169,167,255,.72),transparent 68%),radial-gradient(ellipse 58% 52% at 50% 92%,rgba(11,183,215,.58),transparent 70%),linear-gradient(135deg,#dff7fb 0%,#b8d9f3 46%,#9da8ed 100%)!important;background-size:140% 140%;animation:jobsek-aurora-drift 22s ease-in-out infinite alternate}
body:not(.admin-body) .site-shell{position:relative}
body:not(.admin-body) .site-shell::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(circle at 28% 34%,rgba(255,255,255,.46),transparent 24%),radial-gradient(circle at 78% 62%,rgba(11,183,215,.18),transparent 22%);filter:blur(28px)}
body:not(.admin-body) .hero{position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(255,255,255,.7),rgba(185,228,240,.38) 44%,rgba(20,123,232,.22))!important;border:1px solid rgba(255,255,255,.88)!important;box-shadow:0 30px 80px rgba(21,63,209,.2),0 10px 30px rgba(5,36,110,.12),inset 0 1px rgba(255,255,255,.96)!important}
body:not(.admin-body) .hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(118deg,transparent 18%,rgba(255,255,255,.34) 42%,transparent 56%);transform:translateX(-110%);animation:jobsek-specular-sweep 9s ease-in-out infinite}
body:not(.admin-body) h1{color:#082457!important;text-shadow:0 2px 16px rgba(255,255,255,.34);letter-spacing:-.055em}
body:not(.admin-body) .hero p,body:not(.admin-body) .hero .eyebrow,body:not(.admin-body) .hero .trust-row{color:#15345f!important}
body:not(.admin-body) .hero-signal{background:linear-gradient(145deg,rgba(255,255,255,.62),rgba(185,228,240,.28),rgba(20,123,232,.24))!important;border:1px solid rgba(255,255,255,.86)!important;box-shadow:0 24px 50px rgba(21,63,209,.18),inset 0 1px rgba(255,255,255,.9)!important}
body:not(.admin-body) .app-card{background:linear-gradient(145deg,rgba(255,255,255,.76),rgba(185,228,240,.42),rgba(11,183,215,.22))!important;border:1px solid rgba(255,255,255,.9)!important;box-shadow:0 34px 90px rgba(21,63,209,.22),inset 0 1px rgba(255,255,255,.98)!important}
body:not(.admin-body) .step{background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(185,228,240,.28))!important;border:1px solid rgba(255,255,255,.82)!important;border-radius:28px!important;padding:40px 40px 44px!important;box-shadow:inset 0 1px rgba(255,255,255,.9),0 14px 34px rgba(21,63,209,.1)!important}
body:not(.admin-body) .step h2,body:not(.admin-body) .step h3,body:not(.admin-body) .field label{color:#092758!important}
body:not(.admin-body) .step p,body:not(.admin-body) .field small{color:#264a77!important}
body:not(.admin-body) .field input,body:not(.admin-body) .field select,body:not(.admin-body) .field textarea{background:rgba(255,255,255,.68)!important;color:#071d48!important;border:1px solid rgba(255,255,255,.9)!important;box-shadow:inset 0 1px 3px rgba(21,63,209,.08),0 8px 18px rgba(21,63,209,.06)!important}
body:not(.admin-body) .trust-row{display:flex!important;align-items:center!important;justify-content:flex-start!important;flex-wrap:wrap!important;gap:8px 16px!important;margin-top:24px!important}
body:not(.admin-body) .trust-row span{display:inline-flex!important;align-items:center!important;min-height:32px!important;line-height:1.35!important;white-space:nowrap}
@media(max-width:640px){body:not(.admin-body) .trust-row{display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;gap:8px!important;margin-top:16px!important}.trust-row span{min-height:0!important;white-space:normal!important}body:not(.admin-body) .step{padding:28px 20px 32px!important;border-radius:22px!important}body:not(.admin-body) .hero{border-radius:24px!important}}
@keyframes jobsek-aurora-drift{0%{background-position:0% 20%}100%{background-position:100% 80%}}
@keyframes jobsek-specular-sweep{0%,58%{transform:translateX(-110%)}78%,100%{transform:translateX(110%)}}
@media(prefers-reduced-motion:reduce){body:not(.admin-body){animation:none!important}body:not(.admin-body) .hero::after{animation:none!important}}


/* LIGHT THEME CONTRAST SAFETY OVERRIDE */
body:not(.admin-body){--ink-strong:#082457;--ink-body:#173b68;--ink-muted:#31557d;--surface-light:rgba(248,252,255,.92)}
body:not(.admin-body) .hero h1,body:not(.admin-body) .hero h2,body:not(.admin-body) .hero h3,body:not(.admin-body) .hero p,body:not(.admin-body) .hero .eyebrow,body:not(.admin-body) .hero .trust-row,body:not(.admin-body) .step h2,body:not(.admin-body) .step h3,body:not(.admin-body) .step p,body:not(.admin-body) .field label,body:not(.admin-body) .field small,body:not(.admin-body) .app-card,body:not(.admin-body) footer{color:var(--ink-body)!important}
body:not(.admin-body) .hero h1,body:not(.admin-body) .step h2,body:not(.admin-body) .step h3{color:var(--ink-strong)!important}
body:not(.admin-body) .hero .eyebrow,body:not(.admin-body) .step .eyebrow,body:not(.admin-body) .field label{color:#16406f!important;font-weight:760!important;text-shadow:none!important}
body:not(.admin-body) .hero p,body:not(.admin-body) .step p,body:not(.admin-body) footer{color:var(--ink-body)!important}
body:not(.admin-body) .field input,body:not(.admin-body) .field select,body:not(.admin-body) .field textarea{background:rgba(248,252,255,.96)!important;color:#071d48!important;border:1px solid rgba(8,36,87,.3)!important;box-shadow:inset 0 1px 2px rgba(8,36,87,.08),0 5px 16px rgba(21,63,209,.08)!important}
body:not(.admin-body) .field input::placeholder,body:not(.admin-body) .field textarea::placeholder{color:#456485!important;opacity:1!important}
body:not(.admin-body) .hero-signal,body:not(.admin-body) .app-card,body:not(.admin-body) .step{color:var(--ink-body)!important}
body:not(.admin-body) .trust-row span{color:#173b68!important;font-weight:650!important}
body:not(.admin-body) footer a{color:#123b6b!important}
body:not(.admin-body) .step{background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(224,244,252,.86),rgba(185,228,240,.56))!important}
body:not(.admin-body) footer{background:rgba(255,255,255,.18);border-radius:20px;padding:18px 22px}


/* FINAL THEME-SPECIFIC CONTRAST GUARANTEE */
html[data-theme="light"] body:not(.admin-body) .hero h1,html[data-theme="light"] body:not(.admin-body) .hero h2,html[data-theme="light"] body:not(.admin-body) .hero h3,html[data-theme="light"] body:not(.admin-body) .hero p,html[data-theme="light"] body:not(.admin-body) .hero .eyebrow,html[data-theme="light"] body:not(.admin-body) .step h2,html[data-theme="light"] body:not(.admin-body) .step h3,html[data-theme="light"] body:not(.admin-body) .step p,html[data-theme="light"] body:not(.admin-body) .field label,html[data-theme="light"] body:not(.admin-body) .field small{color:#082457!important;text-shadow:none!important}
html[data-theme="light"] body:not(.admin-body) .field input,html[data-theme="light"] body:not(.admin-body) .field select,html[data-theme="light"] body:not(.admin-body) .field textarea{background:#f8fcff!important;color:#071d48!important;border-color:rgba(8,36,87,.35)!important}
html[data-theme="light"] body:not(.admin-body) .field input::placeholder,html[data-theme="light"] body:not(.admin-body) .field textarea::placeholder{color:#456485!important;opacity:1!important}
html[data-theme="dark"] body:not(.admin-body) .hero h1,html[data-theme="dark"] body:not(.admin-body) .step h2,html[data-theme="dark"] body:not(.admin-body) .step h3,html[data-theme="dark"] body:not(.admin-body) .field label,html[data-theme="dark"] body:not(.admin-body) .field small{color:#f5f7fb!important}
html[data-theme="dark"] body:not(.admin-body) .field input,html[data-theme="dark"] body:not(.admin-body) .field select,html[data-theme="dark"] body:not(.admin-body) .field textarea{background:#13213c!important;color:#f5f7fb!important;border-color:rgba(185,228,240,.38)!important}


/* AMBIENT AI GLASS RING */
body:not(.admin-body) .hero::before{content:"";position:absolute;z-index:0;right:7%;top:12%;width:210px;height:210px;border-radius:50%;background:conic-gradient(from 20deg,rgba(185,228,240,.1),rgba(20,123,232,.76),rgba(86,72,190,.74),rgba(185,228,240,.12),rgba(11,183,215,.68),rgba(185,228,240,.1));filter:blur(1px);box-shadow:0 0 0 1px rgba(255,255,255,.7),0 0 34px rgba(21,63,209,.34),inset 0 0 28px rgba(255,255,255,.42);opacity:.72;animation:jobsek-ai-ring 18s linear infinite;pointer-events:none}
body:not(.admin-body) .hero::after{z-index:1}
body:not(.admin-body) .hero>*{position:relative;z-index:2}
body:not(.admin-body) .hero-signal{z-index:3!important}
@media(max-width:640px){body:not(.admin-body) .hero::before{width:132px;height:132px;right:4%;top:17%;opacity:.44;filter:blur(2px)}}
@keyframes jobsek-ai-ring{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){body:not(.admin-body) .hero::before{animation:none!important}}


/* RING COLLISION FIX */
html body:not(.admin-body) .hero::before{content:""!important;display:block!important;position:absolute!important;z-index:0!important;right:7%!important;top:12%!important;width:210px!important;height:210px!important;border-radius:50%!important;background:conic-gradient(from 20deg,rgba(185,228,240,.1),rgba(20,123,232,.76),rgba(86,72,190,.74),rgba(185,228,240,.12),rgba(11,183,215,.68),rgba(185,228,240,.1))!important;filter:blur(1px)!important;box-shadow:0 0 0 1px rgba(255,255,255,.7),0 0 34px rgba(21,63,209,.34),inset 0 0 28px rgba(255,255,255,.42)!important;opacity:.72!important;animation:jobsek-ai-ring 18s linear infinite!important;pointer-events:none!important}
@media(max-width:640px){html body:not(.admin-body) .hero::before{width:132px!important;height:132px!important;right:4%!important;top:17%!important;opacity:.44!important}}


/* MOBILE HERO COMPOSITION FIX */
@media(max-width:640px){body:not(.admin-body) .hero{display:block!important;height:auto!important;min-height:0!important;padding:24px!important}body:not(.admin-body) .hero-signal{display:none!important}body:not(.admin-body) .hero>div:first-child{min-height:0!important}body:not(.admin-body) .hero .trust-row{margin-bottom:0!important}}
/* HOLLOW MOVING BUBBLE RING */
html body:not(.admin-body) .hero::before{content:""!important;display:block!important;position:absolute!important;z-index:0!important;right:7%!important;top:12%!important;width:210px!important;height:210px!important;border-radius:50%!important;background:radial-gradient(circle at 50% 50%,transparent 0 56%,rgba(8,36,87,.08) 57%,rgba(185,228,240,.62) 59%,rgba(20,123,232,.82) 62%,rgba(86,72,190,.68) 66%,rgba(11,183,215,.36) 71%,transparent 76%)!important;filter:blur(.4px)!important;box-shadow:0 0 0 1px rgba(255,255,255,.72),0 0 28px rgba(21,63,209,.32),inset 0 0 22px rgba(255,255,255,.28)!important;opacity:.78!important;animation:jobsek-bubble-orbit 14s linear infinite!important;pointer-events:none!important}
@media(max-width:640px){html body:not(.admin-body) .hero::before{width:118px!important;height:118px!important;right:5%!important;top:15%!important;opacity:.5!important}}
@keyframes jobsek-bubble-orbit{0%{transform:translate3d(0,0,0) rotate(0deg)}25%{transform:translate3d(8px,-5px,0) rotate(90deg)}50%{transform:translate3d(0,5px,0) rotate(180deg)}75%{transform:translate3d(-8px,-3px,0) rotate(270deg)}100%{transform:translate3d(0,0,0) rotate(360deg)}}
@media(prefers-reduced-motion:reduce){html body:not(.admin-body) .hero::before{animation:none!important}}


/* SMOOTH HERO-WIDE BUBBLE ROAM */
html body:not(.admin-body) .hero::before{left:50%!important;right:auto!important;top:50%!important;transform:translate3d(-50%,-50%,0)!important;animation:jobsek-bubble-roam 24s cubic-bezier(.45,0,.55,1) infinite!important}
@media(max-width:640px){html body:not(.admin-body) .hero::before{left:50%!important;top:45%!important;transform:translate3d(-50%,-50%,0)!important;animation:jobsek-bubble-roam-mobile 20s cubic-bezier(.45,0,.55,1) infinite!important}}
@keyframes jobsek-bubble-roam{0%{transform:translate3d(-50%,-50%,0) rotate(0deg)}16%{transform:translate3d(-12%,-78%,0) rotate(58deg)}34%{transform:translate3d(132%,-54%,0) rotate(122deg)}52%{transform:translate3d(78%,48%,0) rotate(188deg)}70%{transform:translate3d(-112%,58%,0) rotate(252deg)}86%{transform:translate3d(-132%,-10%,0) rotate(310deg)}100%{transform:translate3d(-50%,-50%,0) rotate(360deg)}}
@keyframes jobsek-bubble-roam-mobile{0%{transform:translate3d(-50%,-50%,0) rotate(0deg)}20%{transform:translate3d(-18%,-112%,0) rotate(72deg)}42%{transform:translate3d(34%,-24%,0) rotate(150deg)}64%{transform:translate3d(-36%,42%,0) rotate(228deg)}82%{transform:translate3d(-82%,-32%,0) rotate(294deg)}100%{transform:translate3d(-50%,-50%,0) rotate(360deg)}}
@media(prefers-reduced-motion:reduce){html body:not(.admin-body) .hero::before{animation:none!important}}


/* 20X BUBBLE ROAM SPEED */
html body:not(.admin-body) .hero::before{animation-duration:1.2s!important}
@media(max-width:640px){html body:not(.admin-body) .hero::before{animation-duration:1s!important}}


/* TRANSPARENT WALKING SUBJECT */
html body:not(.admin-body) .hero{background-image:linear-gradient(135deg,rgba(255,255,255,.7),rgba(185,228,240,.38) 44%,rgba(20,123,232,.22))!important;background-repeat:no-repeat!important;background-position:0 0!important;background-size:min(34%,260px),cover!important}
@media(max-width:640px){html body:not(.admin-body) .hero{background-position:right 5% 32%,0 0!important;background-size:126px auto,cover!important}}


/* WALKING SUBJECT REMOVED — preserve all other hero styling */
html body:not(.admin-body) .hero{background-image:linear-gradient(135deg,rgba(255,255,255,.7),rgba(185,228,240,.38) 44%,rgba(20,123,232,.22))!important}


/* ORPHANED DECORATIVE PANEL REMOVED */
html body:not(.admin-body) .hero-signal{display:none!important}


/* RIGHT-SIDE HERO PANEL REMOVED */
html body:not(.admin-body) .hero .hero-signal{display:none!important;visibility:hidden!important;width:0!important;height:0!important;min-width:0!important;min-height:0!important;max-width:0!important;max-height:0!important;overflow:hidden!important;opacity:0!important;padding:0!important;margin:0!important;border:0!important}


/* CINEMATIC APPLE-STYLE SIGNAL CARD */
html body:not(.admin-body) .hero{grid-template-columns:minmax(0,1.35fr) minmax(260px,.72fr)!important;gap:clamp(28px,5vw,76px)!important;align-items:center!important}
html body:not(.admin-body) .hero .hero-signal{display:flex!important;visibility:visible!important;width:auto!important;height:auto!important;max-width:none!important;min-height:250px!important;position:relative!important;overflow:hidden!important;flex-direction:column!important;justify-content:space-between!important;gap:22px!important;padding:28px!important;border:1px solid rgba(255,255,255,.78)!important;border-radius:30px!important;background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(185,228,240,.3) 42%,rgba(86,72,190,.2) 100%)!important;box-shadow:0 24px 60px rgba(21,63,209,.22),inset 0 1px rgba(255,255,255,.95),inset 0 -1px rgba(8,36,87,.08)!important;backdrop-filter:blur(26px) saturate(1.5)!important;-webkit-backdrop-filter:blur(26px) saturate(1.5)!important;animation:jobsek-signal-drift 8s cubic-bezier(.77,0,.175,1) infinite alternate!important}
html body:not(.admin-body) .hero .hero-signal::before{content:"";position:absolute;inset:-35% -20%;background:linear-gradient(118deg,transparent 35%,rgba(255,255,255,.38) 48%,transparent 60%);transform:translate3d(-55%,0,0) rotate(8deg);animation:jobsek-signal-sheen 7s ease-in-out infinite;pointer-events:none}
html body:not(.admin-body) .hero .hero-signal>*{position:relative;z-index:1}
html body:not(.admin-body) .hero .hero-signal .eyebrow{color:#16406f!important;font-size:11px!important;letter-spacing:.16em!important;font-weight:800!important}
html body:not(.admin-body) .hero .hero-signal .signal-line{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;padding:11px 0!important;border-top:1px solid rgba(8,36,87,.28)!important;color:#173b68!important;font-size:13px!important}
html body:not(.admin-body) .hero .hero-signal .signal-value{font-size:clamp(24px,2.3vw,36px)!important;line-height:1.04!important;letter-spacing:-.045em!important;font-weight:780!important;color:#082457!important;text-wrap:balance!important}
html body:not(.admin-body) .hero .hero-signal b{color:#153fd1!important;font-size:18px!important}
html[data-theme="dark"] body:not(.admin-body) .hero .hero-signal{background:linear-gradient(145deg,rgba(19,39,75,.88),rgba(8,22,50,.82),rgba(21,63,209,.35))!important;border-color:rgba(185,228,240,.38)!important}
html[data-theme="dark"] body:not(.admin-body) .hero .hero-signal .eyebrow,html[data-theme="dark"] body:not(.admin-body) .hero .hero-signal .signal-line,html[data-theme="dark"] body:not(.admin-body) .hero .hero-signal .signal-value{color:#f5f7fb!important}
html[data-theme="dark"] body:not(.admin-body) .hero .hero-signal .signal-line{border-color:rgba(185,228,240,.32)!important}
@media(max-width:760px){html body:not(.admin-body) .hero{display:grid!important;grid-template-columns:1fr!important;gap:24px!important}html body:not(.admin-body) .hero .hero-signal{min-height:0!important;padding:22px!important;border-radius:24px!important;gap:16px!important;animation-duration:10s!important}}
@keyframes jobsek-signal-drift{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(0,-7px,0)}}
@keyframes jobsek-signal-sheen{0%,55%{transform:translate3d(-58%,0,0) rotate(8deg)}78%,100%{transform:translate3d(58%,0,0) rotate(8deg)}}
@media(prefers-reduced-motion:reduce){html body:not(.admin-body) .hero .hero-signal{animation:none!important}html body:not(.admin-body) .hero .hero-signal::before{animation:none!important}}


/* SIGNAL CARD — RESTORED ORGANIZED GLASS */
html body:not(.admin-body) .hero .hero-signal{display:flex!important;visibility:visible!important;opacity:1!important;width:auto!important;height:auto!important;min-height:250px!important;overflow:hidden!important;padding:28px!important;margin:0!important;border:1px solid rgba(255,255,255,.78)!important;border-radius:30px!important;background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(185,228,240,.3) 42%,rgba(86,72,190,.2) 100%)!important;box-shadow:0 24px 60px rgba(21,63,209,.22),inset 0 1px rgba(255,255,255,.95)!important;backdrop-filter:blur(26px) saturate(1.5)!important;animation:jobsek-signal-card-float 8s cubic-bezier(.77,0,.175,1) infinite alternate!important}
html body:not(.admin-body) .hero .hero-signal .eyebrow{color:#16406f!important;font-weight:800!important}
html body:not(.admin-body) .hero .hero-signal .signal-line{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;padding:11px 0!important;border-top:1px solid rgba(8,36,87,.28)!important;color:#173b68!important}
html body:not(.admin-body) .hero .hero-signal .signal-value{color:#082457!important;font-size:clamp(24px,2.3vw,36px)!important;line-height:1.04!important;font-weight:780!important}
html[data-theme="dark"] body:not(.admin-body) .hero .hero-signal{background:linear-gradient(145deg,rgba(19,39,75,.88),rgba(8,22,50,.82),rgba(21,63,209,.35))!important;border-color:rgba(185,228,240,.38)!important}
html[data-theme="dark"] body:not(.admin-body) .hero .hero-signal .eyebrow,html[data-theme="dark"] body:not(.admin-body) .hero .hero-signal .signal-line,html[data-theme="dark"] body:not(.admin-body) .hero .hero-signal .signal-value{color:#f5f7fb!important}
@media(max-width:760px){html body:not(.admin-body) .hero{display:grid!important;grid-template-columns:1fr!important;gap:24px!important}html body:not(.admin-body) .hero .hero-signal{min-height:0!important;padding:22px!important;border-radius:24px!important}}
@keyframes jobsek-signal-card-float{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(0,-7px,0)}}
@media(prefers-reduced-motion:reduce){html body:not(.admin-body) .hero .hero-signal{animation:none!important}}


/* SIGNAL CARD CLIPPING FIX */
html body:not(.admin-body) .hero .hero-signal{height:auto!important;min-height:290px!important;overflow:visible!important;justify-content:flex-start!important;gap:24px!important}
html body:not(.admin-body) .hero .hero-signal .signal-value{display:block!important;overflow:visible!important;padding:4px 0!important}
html body:not(.admin-body) .hero .hero-signal .signal-line{flex:0 0 auto!important}
@media(max-width:760px){html body:not(.admin-body) .hero .hero-signal{height:auto!important;min-height:0!important;gap:16px!important;overflow:visible!important;padding:22px!important}}


/* MOBILE SIGNAL CARD MAX-HEIGHT FIX */
html body:not(.admin-body) .hero .hero-signal{max-height:none!important;height:auto!important;overflow:visible!important}
@media(max-width:760px){html body:not(.admin-body) .hero .hero-signal{display:flex!important;max-height:none!important;height:auto!important;min-height:0!important;overflow:visible!important;padding:22px!important;gap:16px!important}}


/* CREATIVE AI TYPOGRAPHY */
html body:not(.admin-body){font-family:"DM Sans","Manrope","Avenir Next","Segoe UI",sans-serif!important}
html body:not(.admin-body) h1,html body:not(.admin-body) h2,html body:not(.admin-body) h3,html body:not(.admin-body) .signal-value,html body:not(.admin-body) .brand{font-family:"Sora","Plus Jakarta Sans","Manrope","Avenir Next",sans-serif!important;font-weight:700!important;letter-spacing:-.055em!important}
html body:not(.admin-body) h1{line-height:.98!important}
html body:not(.admin-body) .hero .signal-value{line-height:1.08!important;letter-spacing:-.06em!important}
html body:not(.admin-body) .hero-copy,html body:not(.admin-body) .field label,html body:not(.admin-body) .trust-row,html body:not(.admin-body) .status-pill{font-family:"DM Sans","Manrope","Avenir Next","Segoe UI",sans-serif!important}


/* DISPLAY TYPE RHYTHM */
html body:not(.admin-body) .hero h1{margin-bottom:34px!important}
html body:not(.admin-body) .hero .hero-copy{margin-top:0!important}
@media(max-width:760px){html body:not(.admin-body) .hero h1{margin-bottom:28px!important}}



/* JOBSEK MONOCHROME ACCESSIBILITY OVERRIDE */
:root{--ink:#111111;--muted:#4a4a4a;--paper:#f2f2f2;--card:#ffffff;--soft:#e7e7e7;--line:#bdbdbd;--green:#111111;--green-2:#000000;--lime:#e5e5e5;--coral:#555555;--shadow:0 20px 60px rgba(0,0,0,.14);color-scheme:light}
html[data-theme=dark]{--ink:#f5f5f5;--muted:#c4c4c4;--paper:#101010;--card:#1c1c1c;--soft:#292929;--line:#505050;--green:#f5f5f5;--green-2:#ffffff;--lime:#333333;--coral:#d0d0d0;--shadow:0 24px 70px rgba(0,0,0,.55);color-scheme:dark}
html body,html body.admin-body{background:var(--paper)!important;color:var(--ink)!important}
.hero,.hero-signal,.app-card,.metric-card,.health-row,.admin-table,.audit-list,.job-admin-card,.dashboard-banner,.attention-panel,.job-table,.login-card,.palette-card,.preview-card,.control-section{background:var(--card)!important;color:var(--ink)!important;border-color:var(--line)!important;box-shadow:var(--shadow)!important}
.hero-copy,.flow-step>p,.admin-heading p,.metric-card span,.metric-card small,.table-row small,.audit-row time,.job-admin-main p,.detail-facts span,.preview-top,.fine-print,.checks label,.header-note,.header-actions,.section-title p{color:var(--muted)!important}
.hero h1,.hero h2,.hero h3,.hero-signal,.signal-value,.flow-step h2,.section-title h2,.admin-heading h1,.job-admin-main h3,.job-detail h3,.login-card h1,.brand{color:var(--ink)!important}
.field input,.field select,.field textarea,.group-tools input,.group-tools select,.job-admin-forms input,.job-admin-forms select,.job-tools input,.job-tools select,.login-card input,.palette-card input{background:var(--paper)!important;color:var(--ink)!important;border-color:var(--line)!important}
.primary,.step-dot.is-active,.post-preview,.focus-card{background:var(--green-2)!important;color:#fff!important;border-color:var(--green-2)!important}
.step-dot.is-complete,.success-icon,.success-banner{background:var(--soft)!important;color:var(--ink)!important}
button,.theme-toggle,.status-pill,.group-tools button,.flow-actions button:not(.primary),.job-admin-forms button,.job-admin-forms>a,.quick-view,.pagination button,.command-trigger{color:var(--ink)!important;border-color:var(--line)!important}
.status-pill,.theme-toggle,.group-tools button,.flow-actions button:not(.primary),.job-admin-forms button,.job-admin-forms>a,.quick-view,.pagination button,.command-trigger{background:var(--card)!important}
.table-head,.progress-track,.queue-tag,.summary-bar,.summary,.group-card,.job-row,.job-table-head{background:var(--soft)!important;color:var(--ink)!important}
.fb-dot,.attention-icon{background:#222!important;color:#fff!important}
.error{background:#e0e0e0!important;color:#111!important}
.hero-signal:after{border-color:var(--line)!important}
::placeholder{color:var(--muted)!important;opacity:1!important}

html body{background-image:none!important;}
.hero,.app-card,.hero-signal{background-image:none!important;}
.hero h1,.hero h1 em,.signal-value{-webkit-text-fill-color:var(--ink)!important;}

html body:not(.admin-body){background:var(--paper)!important;background-image:none!important;}
html body:not(.admin-body) .hero{background:var(--card)!important;background-image:none!important;}
html body:not(.admin-body) .hero h1 em{-webkit-text-fill-color:var(--ink)!important;color:var(--ink);background-image:none!important;}
/* FINAL DARK SURFACE FIX */
html[data-theme="dark"] body,html[data-theme="dark"] body:not(.admin-body){background:#0a0a0a!important;background-image:none!important;color:#f5f5f5!important}
html[data-theme="dark"] body:not(.admin-body) .hero,html[data-theme="dark"] body:not(.admin-body) .app-card,html[data-theme="dark"] body:not(.admin-body) .hero .hero-signal{background:#171717!important;background-image:none!important;color:#f5f5f5!important;border-color:#3f3f3f!important;box-shadow:0 24px 70px rgba(0,0,0,.55)!important}
html[data-theme="dark"] body:not(.admin-body) .step,html[data-theme="dark"] body:not(.admin-body) .field-grid>label,html[data-theme="dark"] body:not(.admin-body) .step>label{color:#f5f5f5!important}
html[data-theme="dark"] body:not(.admin-body) .field-grid input,html[data-theme="dark"] body:not(.admin-body) .field-grid select,html[data-theme="dark"] body:not(.admin-body) .step>label input,html[data-theme="dark"] body:not(.admin-body) .step>label textarea{background:#242424!important;background-image:none!important;color:#f5f5f5!important;border-color:#5b5b5b!important}
html[data-theme="dark"] body:not(.admin-body) .hero h1,html[data-theme="dark"] body:not(.admin-body) .hero h1 em,html[data-theme="dark"] body:not(.admin-body) .hero h2,html[data-theme="dark"] body:not(.admin-body) .hero h3,html[data-theme="dark"] body:not(.admin-body) .hero .signal-value,html[data-theme="dark"] body:not(.admin-body) .step-heading h2,html[data-theme="dark"] body:not(.admin-body) .step-heading p,html[data-theme="dark"] body:not(.admin-body) label{color:#f5f5f5!important;-webkit-text-fill-color:#f5f5f5!important}
html[data-theme="dark"] body:not(.admin-body) .hero-copy,html[data-theme="dark"] body:not(.admin-body) .trust-row,html[data-theme="dark"] body:not(.admin-body) .header-note,html[data-theme="dark"] body:not(.admin-body) .signal-line,html[data-theme="dark"] body:not(.admin-body) .kicker,html[data-theme="dark"] body:not(.admin-body) .eyebrow{color:#cfcfcf!important}
html[data-theme="dark"] body:not(.admin-body) .primary{background:#fff!important;color:#000!important;border-color:#fff!important}
html[data-theme="dark"] body:not(.admin-body) .status-pill,html[data-theme="dark"] body:not(.admin-body) .theme-toggle{background:#1f1f1f!important;color:#f5f5f5!important;border-color:#565656!important}
html[data-theme="dark"] body:not(.admin-body) .progress-track,html[data-theme="dark"] body:not(.admin-body) .step-dot,html[data-theme="dark"] body:not(.admin-body) .summary,html[data-theme="dark"] body:not(.admin-body) .group-card{background:#242424!important;color:#f5f5f5!important;border-color:#505050!important}
html[data-theme="dark"] body:not(.admin-body) .hero-signal:after{display:block!important;border-color:#777!important}
@media (prefers-reduced-motion:reduce){html[data-theme="dark"] body:not(.admin-body) .hero-signal{animation:none!important}}

/* FINAL INNER SURFACE CONTRAST FIX */
html[data-theme="dark"] body:not(.admin-body) .app-card .step,
html[data-theme="dark"] body:not(.admin-body) .app-card .step.active,
html[data-theme="dark"] body:not(.admin-body) .preview-card,
html[data-theme="dark"] body:not(.admin-body) .tier-card{background:#171717!important;background-image:none!important;color:#f5f5f5!important;border-color:#3f3f3f!important}
html[data-theme="dark"] body:not(.admin-body) .step-heading h2,
html[data-theme="dark"] body:not(.admin-body) .step-heading p,
html[data-theme="dark"] body:not(.admin-body) .step-heading .kicker,
html[data-theme="dark"] body:not(.admin-body) .app-card .step label,
html[data-theme="dark"] body:not(.admin-body) .app-card .step label span{color:#f5f5f5!important;-webkit-text-fill-color:#f5f5f5!important}
html[data-theme="dark"] body:not(.admin-body) .trust-row,
html[data-theme="dark"] body:not(.admin-body) .trust-row span{color:#d8d8d8!important;-webkit-text-fill-color:#d8d8d8!important}
html[data-theme="dark"] body:not(.admin-body) .app-card .kicker,
html[data-theme="dark"] body:not(.admin-body) .app-card #stepName{color:#f5f5f5!important;-webkit-text-fill-color:#f5f5f5!important}

/* PREMIUM WORDMARK */
html body:not(.admin-body) .brand{font-family:"Sora","Plus Jakarta Sans","Manrope","Avenir Next",sans-serif!important;font-weight:800!important;font-size:clamp(20px,2.2vw,28px)!important;letter-spacing:-.075em!important;line-height:1!important;padding:6px 0!important;color:var(--ink)!important;text-shadow:0 1px 0 rgba(255,255,255,.35),0 0 22px rgba(120,150,255,.16);animation:jobsek-wordmark-breathe 6s ease-in-out infinite}
html[data-theme="dark"] body:not(.admin-body) .brand{color:#f5f5f5!important;text-shadow:0 1px 0 rgba(0,0,0,.7),0 0 22px rgba(120,160,255,.24)}
@keyframes jobsek-wordmark-breathe{0%,100%{opacity:.94;transform:translateY(0)}50%{opacity:1;transform:translateY(-1px)}}
@media (prefers-reduced-motion:reduce){html body:not(.admin-body) .brand{animation:none!important}}


/* PREMIUM DEPTH FIELD — replaces the flat left-to-right sweep */
html body:not(.admin-body) .hero::after{content:""!important;position:absolute!important;inset:-8%!important;z-index:0!important;pointer-events:none!important;border-radius:inherit!important;background:radial-gradient(ellipse at 18% 28%,rgba(255,255,255,.32),transparent 26%),radial-gradient(ellipse at 82% 72%,rgba(110,120,255,.22),transparent 30%),radial-gradient(ellipse at 58% 18%,rgba(80,210,230,.16),transparent 24%)!important;opacity:.72!important;mix-blend-mode:soft-light!important;filter:blur(18px) saturate(135%)!important;transform:perspective(900px) translate3d(-1.5%,1%,0) rotateX(0.8deg) rotateY(-1.2deg) scale(1.02)!important;transform-origin:50% 50%!important;animation:jobsek-depth-field 12s ease-in-out infinite alternate!important}
@keyframes jobsek-depth-field{0%{transform:perspective(900px) translate3d(-1.5%,1%,0) rotateX(.8deg) rotateY(-1.2deg) scale(1.02);opacity:.58}50%{transform:perspective(900px) translate3d(1%, -1%, 0) rotateX(-.6deg) rotateY(1.1deg) scale(1.045);opacity:.78}100%{transform:perspective(900px) translate3d(-.5%,.5%,0) rotateX(.45deg) rotateY(-.7deg) scale(1.025);opacity:.64}}
html body:not(.admin-body) .hero>*{position:relative;z-index:2}
@media(prefers-reduced-motion:reduce){html body:not(.admin-body) .hero::after{animation:none!important;transform:none!important;opacity:.6!important}}


/* REFINED 3D ORB FIELD — soft depth, no sweeping plane */
html body:not(.admin-body) .hero::after{content:""!important;position:absolute!important;inset:auto!important;left:34%!important;top:8%!important;width:62%!important;height:76%!important;z-index:0!important;pointer-events:none!important;border-radius:48%!important;background:radial-gradient(ellipse at 24% 34%,rgba(255,255,255,.24),transparent 38%),radial-gradient(ellipse at 76% 68%,rgba(110,120,255,.2),transparent 42%),radial-gradient(ellipse at 58% 16%,rgba(80,210,230,.14),transparent 34%)!important;opacity:.58!important;mix-blend-mode:soft-light!important;filter:blur(24px) saturate(135%)!important;transform:perspective(900px) translate3d(-1%,.5%,0) rotateX(.7deg) rotateY(-1deg) scale(1.02)!important;transform-origin:50% 50%!important;animation:jobsek-depth-orb 11s ease-in-out infinite alternate!important}
@keyframes jobsek-depth-orb{0%{transform:perspective(900px) translate3d(-1%,.5%,0) rotateX(.7deg) rotateY(-1deg) scale(1.02);opacity:.48}50%{transform:perspective(900px) translate3d(1%,-1%,0) rotateX(-.5deg) rotateY(1deg) scale(1.08);opacity:.68}100%{transform:perspective(900px) translate3d(0,.5%,0) rotateX(.35deg) rotateY(-.6deg) scale(1.04);opacity:.54}}
@media(max-width:640px){html body:not(.admin-body) .hero::after{left:8%!important;top:18%!important;width:84%!important;height:62%!important;opacity:.44!important}}
@media(prefers-reduced-motion:reduce){html body:not(.admin-body) .hero::after{animation:none!important;transform:none!important;opacity:.5!important}}


/* SIGNAL CARD 3D GLOW — replaces diagonal sheen sweep */
html body:not(.admin-body) .hero-signal::before{content:""!important;position:absolute!important;inset:-18%!important;pointer-events:none!important;border-radius:42%!important;background:radial-gradient(ellipse at 28% 30%,rgba(255,255,255,.28),transparent 32%),radial-gradient(ellipse at 74% 68%,rgba(110,120,255,.22),transparent 38%),radial-gradient(ellipse at 52% 48%,rgba(80,210,230,.12),transparent 54%)!important;opacity:.62!important;mix-blend-mode:soft-light!important;filter:blur(18px) saturate(140%)!important;transform:perspective(720px) rotateX(1deg) rotateY(-2deg) scale(1.04)!important;animation:jobsek-signal-depth 8s ease-in-out infinite alternate!important}
@keyframes jobsek-signal-depth{0%{transform:perspective(720px) rotateX(1deg) rotateY(-2deg) scale(1.04);opacity:.5}50%{transform:perspective(720px) rotateX(-1deg) rotateY(2deg) scale(1.1);opacity:.72}100%{transform:perspective(720px) rotateX(.6deg) rotateY(-1deg) scale(1.06);opacity:.58}}
@media(prefers-reduced-motion:reduce){html body:not(.admin-body) .hero-signal::before{animation:none!important;transform:none!important;opacity:.55!important}}


/* ==========================================================================
   JOBSEK CONTROL CENTER ADMIN SUITE — Modern WordPress/SaaS-Style Layout
   ========================================================================== */

:root {
  /* Admin Theme Tokens - Light Mode (Default) */
  --admin-bg-page: #f8fafc;
  --admin-bg-surface: #ffffff;
  --admin-bg-elevated: #ffffff;
  --admin-bg-subtle: #f1f5f9;
  --admin-bg-muted: #e2e8f0;
  
  --admin-text-primary: #0f172a;
  --admin-text-secondary: #334155;
  --admin-text-muted: #64748b;
  --admin-text-subtle: #94a3b8;
  
  --admin-border: #e2e8f0;
  --admin-border-strong: #cbd5e1;
  --admin-border-subtle: #f1f5f9;
  
  --admin-accent: #2563eb;
  --admin-accent-hover: #1d4ed8;
  --admin-accent-soft: rgba(37, 99, 235, 0.08);
  
  --admin-success: #10b981;
  --admin-success-soft: #ecfdf5;
  --admin-success-text: #065f46;
  --admin-success-border: #a7f3d0;
  
  --admin-warning: #f59e0b;
  --admin-warning-soft: #fffbeb;
  --admin-warning-text: #92400e;
  --admin-warning-border: #fde68a;
  
  --admin-danger: #ef4444;
  --admin-danger-soft: #fef2f2;
  --admin-danger-text: #991b1b;
  --admin-danger-border: #fecaca;
  
  --admin-info: #0284c7;
  --admin-info-soft: #f0f9ff;
  --admin-info-text: #075985;
  --admin-info-border: #bae6fd;
  
  --admin-input-bg: #ffffff;
  --admin-input-text: #0f172a;
  --admin-input-border: #cbd5e1;
  --admin-input-placeholder: #94a3b8;
  
  --admin-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05);
  --admin-shadow-md: 0 4px 16px rgba(15, 23, 42, 0.06);
  --admin-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.08);
  --admin-drawer-shadow: -16px 0 48px rgba(15, 23, 42, 0.16);
}

html[data-theme="dark"] {
  /* Admin Theme Tokens - Dark Mode */
  --admin-bg-page: #080c14;
  --admin-bg-surface: #111827;
  --admin-bg-elevated: #1e293b;
  --admin-bg-subtle: #1e293b;
  --admin-bg-muted: #334155;
  
  --admin-text-primary: #f8fafc;
  --admin-text-secondary: #e2e8f0;
  --admin-text-muted: #94a3b8;
  --admin-text-subtle: #64748b;
  
  --admin-border: #1f2937;
  --admin-border-strong: #374151;
  --admin-border-subtle: #1e293b;
  
  --admin-accent: #3b82f6;
  --admin-accent-hover: #60a5fa;
  --admin-accent-soft: rgba(59, 130, 246, 0.18);
  
  --admin-success: #34d399;
  --admin-success-soft: rgba(52, 211, 153, 0.16);
  --admin-success-text: #a7f3d0;
  --admin-success-border: rgba(52, 211, 153, 0.35);
  
  --admin-warning: #fbbf24;
  --admin-warning-soft: rgba(251, 191, 36, 0.16);
  --admin-warning-text: #fde68a;
  --admin-warning-border: rgba(251, 191, 36, 0.35);
  
  --admin-danger: #f87171;
  --admin-danger-soft: rgba(248, 113, 113, 0.16);
  --admin-danger-text: #fecaca;
  --admin-danger-border: rgba(248, 113, 113, 0.35);
  
  --admin-info: #38bdf8;
  --admin-info-soft: rgba(56, 189, 248, 0.16);
  --admin-info-text: #bae6fd;
  --admin-info-border: rgba(56, 189, 248, 0.35);
  
  --admin-input-bg: #1e293b;
  --admin-input-text: #f8fafc;
  --admin-input-border: #374151;
  --admin-input-placeholder: #64748b;
  
  --admin-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --admin-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
  --admin-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
  --admin-drawer-shadow: -16px 0 48px rgba(0, 0, 0, 0.7);
}

/* Base Layout Structure */
body.admin-body {
  background: var(--admin-bg-page) !important;
  color: var(--admin-text-primary) !important;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
}

body.admin-body * {
  box-sizing: border-box;
}

body.drawer-open {
  overflow: hidden !important;
}

.admin-layout {
  display: flex;
  min-height: 100vh;
  width: 100%;
  position: relative;
  overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   1. Left Admin Sidebar (Fixed, 260px wide)
   -------------------------------------------------------------------------- */
.admin-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 260px;
  height: 100vh;
  background: #0f172a;
  color: #f8fafc;
  display: flex;
  flex-direction: column;
  z-index: 1000;
  border-right: 1px solid #1e293b;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #334155 transparent;
  transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1);
}

html[data-theme="dark"] .admin-sidebar {
  background: #080c14;
  border-right-color: #1f2937;
}

.admin-sidebar::-webkit-scrollbar {
  width: 5px;
}
.admin-sidebar::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 4px;
}

/* Sidebar Header & Brand */
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 18px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.admin-sidebar .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #ffffff !important;
  font-family: "Sora", "Plus Jakarta Sans", sans-serif !important;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.04em;
}

.admin-sidebar .brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--admin-accent);
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
}

.sidebar-close-btn {
  display: none;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 6px;
  color: #94a3b8;
  cursor: pointer;
  line-height: 0;
  transition: all 0.15s ease;
}
.sidebar-close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

/* Environment Status Pill in Sidebar */
.sidebar-status-card {
  margin: 14px 14px 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.status-mode-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #94a3b8;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.status-pill.status-live {
  background: #064e3b !important;
  color: #6ee7b7 !important;
  border: 1px solid #059669 !important;
}

.status-pill.status-test {
  background: #78350f !important;
  color: #fde68a !important;
  border: 1px solid #d97706 !important;
}

.status-pill.status-disabled {
  background: #334155 !important;
  color: #94a3b8 !important;
  border: 1px solid #475569 !important;
}

/* Sidebar Navigation Items */
.admin-sidebar .admin-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px 20px;
  flex: 1 1 auto;
}

.nav-group-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #64748b;
  padding: 18px 12px 6px;
}

.admin-sidebar .nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 10px;
  color: #94a3b8;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s ease;
}

.admin-sidebar .nav-item:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
  transform: translateX(2px);
}

.admin-sidebar .nav-item.is-active {
  background: var(--admin-accent) !important;
  color: #ffffff !important;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}

.admin-sidebar .nav-icon {
  flex-shrink: 0;
  opacity: 0.85;
}

.admin-sidebar .nav-label {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-sidebar .nav-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 9999px;
  margin-left: auto;
}

.admin-sidebar .alert-badge {
  background: #ef4444;
  color: #ffffff;
}

.admin-sidebar .count-badge {
  background: rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
}

.admin-sidebar .nav-item.is-active .count-badge {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

/* Sidebar User Footer */
.sidebar-footer {
  margin-top: auto;
  padding: 14px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: #090e1a;
}

html[data-theme="dark"] .sidebar-footer {
  background: #05080e;
  border-top-color: #1f2937;
}

.admin-user-card {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--admin-accent);
  color: #ffffff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}

.admin-user-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.admin-user-name {
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-user-role {
  font-size: 11px;
  color: #64748b;
}

/* --------------------------------------------------------------------------
   2. Main Content Area & Topbar
   -------------------------------------------------------------------------- */
.admin-content-wrapper {
  margin-left: 260px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--admin-bg-page);
  color: var(--admin-text-primary);
  width: calc(100% - 260px);
  overflow-x: hidden;
}

.admin-topbar {
  height: 62px;
  min-height: 62px;
  background: var(--admin-bg-surface);
  border-bottom: 1px solid var(--admin-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  position: sticky;
  top: 0;
  z-index: 500;
  box-shadow: var(--admin-shadow-sm);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.mobile-menu-btn {
  display: none;
  background: var(--admin-bg-surface);
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  padding: 6px;
  cursor: pointer;
  color: var(--admin-text-secondary);
  line-height: 0;
  transition: all 0.15s ease;
}
.mobile-menu-btn:hover {
  background: var(--admin-bg-subtle);
  color: var(--admin-text-primary);
}

.topbar-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--admin-text-muted);
}

.crumb-root {
  color: var(--admin-text-muted);
}

.crumb-sep {
  color: var(--admin-border-strong);
}

.crumb-current {
  color: var(--admin-text-primary);
  font-weight: 700;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-topbar .command-trigger,
.admin-topbar .theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--admin-bg-surface) !important;
  border: 1px solid var(--admin-border) !important;
  color: var(--admin-text-secondary) !important;
  border-radius: 10px !important;
  padding: 7px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: all 0.15s ease;
}

.admin-topbar .command-trigger:hover,
.admin-topbar .theme-toggle:hover {
  background: var(--admin-bg-subtle) !important;
  color: var(--admin-text-primary) !important;
  border-color: var(--admin-border-strong) !important;
}

.topbar-divider {
  width: 1px;
  height: 24px;
  background: var(--admin-border);
  margin: 0 4px;
}

.topbar-logout-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--admin-danger) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none;
  padding: 7px 12px;
  border-radius: 10px;
  border: 1px solid var(--admin-danger-border);
  background: var(--admin-danger-soft);
  transition: all 0.15s ease;
}

.topbar-logout-btn:hover {
  background: var(--admin-danger) !important;
  color: #ffffff !important;
  border-color: var(--admin-danger) !important;
}

/* Main Workspace Content Shell */
.admin-main-shell {
  flex: 1 1 auto;
  padding: 32px 36px;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}

/* Section Cards & Panels */
body.admin-body .control-section {
  background: var(--admin-bg-surface) !important;
  color: var(--admin-text-primary) !important;
  border: 1px solid var(--admin-border) !important;
  border-radius: 20px !important;
  padding: 32px !important;
  box-shadow: var(--admin-shadow-md) !important;
  margin-bottom: 32px;
}

body.admin-body .admin-heading {
  padding: 0 0 28px !important;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

body.admin-body .admin-heading h1 {
  color: var(--admin-text-primary) !important;
  letter-spacing: -0.04em !important;
  font-size: clamp(24px, 2.5vw, 36px) !important;
  font-weight: 800 !important;
  margin: 4px 0 6px !important;
  font-family: "Sora", "Plus Jakarta Sans", sans-serif;
}

body.admin-body .admin-heading p {
  color: var(--admin-text-muted) !important;
  font-size: 14px;
  margin: 0;
  max-width: 680px;
}

body.admin-body .eyebrow {
  color: var(--admin-accent) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
}

body.admin-body .section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

body.admin-body .section-title h2 {
  font-family: "Sora", "Plus Jakarta Sans", sans-serif;
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  color: var(--admin-text-primary);
}

body.admin-body .section-note {
  color: var(--admin-text-muted);
  font-size: 13px;
}

/* --------------------------------------------------------------------------
   3. Summary Metric Cards Grid
   -------------------------------------------------------------------------- */
body.admin-body .summary-grid,
body.admin-body .metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

body.admin-body .summary-stat-card,
body.admin-body .metric-card {
  background: var(--admin-bg-subtle) !important;
  border: 1px solid var(--admin-border) !important;
  border-radius: 16px !important;
  padding: 18px 20px !important;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

body.admin-body .summary-stat-card:hover,
body.admin-body .metric-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--admin-shadow-sm);
}

body.admin-body .summary-stat-card .stat-label,
body.admin-body .metric-card span {
  color: var(--admin-text-muted) !important;
  font-size: 12px !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

body.admin-body .summary-stat-card .stat-value,
body.admin-body .metric-card strong {
  color: var(--admin-text-primary) !important;
  font-size: 26px !important;
  font-weight: 800;
  font-family: "Sora", "Plus Jakarta Sans", sans-serif;
  line-height: 1.2;
}

body.admin-body .summary-stat-card .stat-hint,
body.admin-body .metric-card small {
  color: var(--admin-text-subtle) !important;
  font-size: 12px;
}

/* Attention Banner */
body.admin-body .attention-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}

body.admin-body .attention-item {
  background: var(--admin-warning-soft) !important;
  border: 1px solid var(--admin-warning-border) !important;
  color: var(--admin-warning-text) !important;
  border-radius: 14px !important;
  padding: 14px 18px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  text-decoration: none;
  font-weight: 500;
  font-size: 13.5px;
}

body.admin-body .attention-item:hover {
  filter: brightness(0.96);
}

/* --------------------------------------------------------------------------
   4. Tables & Data Grids
   -------------------------------------------------------------------------- */
body.admin-body .admin-table,
body.admin-body .job-table {
  background: var(--admin-bg-surface) !important;
  border: 1px solid var(--admin-border) !important;
  border-radius: 16px !important;
  overflow: hidden;
  width: 100%;
  margin-bottom: 20px;
}

body.admin-body .table-head,
body.admin-body .job-table-head {
  background: var(--admin-bg-subtle) !important;
  color: var(--admin-text-secondary) !important;
  border-bottom: 1px solid var(--admin-border) !important;
  font-weight: 700 !important;
  font-size: 11.5px !important;
  text-transform: uppercase;
  letter-spacing: 0.06em !important;
  display: grid;
  padding: 12px 18px;
  align-items: center;
  gap: 12px;
}

body.admin-body .table-row,
body.admin-body .job-row {
  display: grid;
  padding: 14px 18px;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--admin-border-subtle) !important;
  transition: background 0.15s ease;
  color: var(--admin-text-primary);
  font-size: 13.5px;
}

body.admin-body .table-row:last-child,
body.admin-body .job-row:last-child {
  border-bottom: none !important;
}

body.admin-body .table-row:hover,
body.admin-body .job-row:hover {
  background: var(--admin-bg-subtle) !important;
}

body.admin-body .job-table-head,
body.admin-body .job-row {
  grid-template-columns: 2.2fr 1.8fr 1.2fr 1.2fr auto;
}

body.admin-body .pending-table-head,
body.admin-body .pending-row {
  grid-template-columns: 2.2fr 1.8fr 1.2fr 1.2fr auto;
}

body.admin-body .queue-table-head,
body.admin-body .queue-row {
  grid-template-columns: 2fr 1.5fr 1.2fr 1.2fr auto;
}

body.admin-body .customer-table-head,
body.admin-body .customer-row {
  grid-template-columns: 1.8fr 2fr 1fr 1fr 1fr auto;
}

body.admin-body .table-cell-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body.admin-body .table-cell-main b {
  font-weight: 600;
  color: var(--admin-text-primary);
}

body.admin-body .table-cell-main small {
  color: var(--admin-text-muted);
  font-size: 12px;
}

/* --------------------------------------------------------------------------
   5. Status Badges & Pills
   -------------------------------------------------------------------------- */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: capitalize;
  width: fit-content;
}

.badge-paid,
.badge-approved,
.badge-posted,
.badge-published,
.badge-active {
  background: var(--admin-success-soft) !important;
  color: var(--admin-success-text) !important;
  border: 1px solid var(--admin-success-border) !important;
}

.badge-review,
.badge-held,
.badge-warning {
  background: var(--admin-warning-soft) !important;
  color: var(--admin-warning-text) !important;
  border: 1px solid var(--admin-warning-border) !important;
}

.badge-pending,
.badge-pending_payment,
.badge-ready {
  background: var(--admin-info-soft) !important;
  color: var(--admin-info-text) !important;
  border: 1px solid var(--admin-info-border) !important;
}

.badge-rejected,
.badge-failed,
.badge-banned {
  background: var(--admin-danger-soft) !important;
  color: var(--admin-danger-text) !important;
  border: 1px solid var(--admin-danger-border) !important;
}

.badge-archived,
.badge-disabled,
.badge-skipped {
  background: var(--admin-bg-subtle) !important;
  color: var(--admin-text-muted) !important;
  border: 1px solid var(--admin-border) !important;
}

/* --------------------------------------------------------------------------
   6. Form Controls, Inputs & Filters
   -------------------------------------------------------------------------- */
body.admin-body .tool-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

body.admin-body .filter-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

body.admin-body input,
body.admin-body select,
body.admin-body textarea {
  background: var(--admin-input-bg) !important;
  color: var(--admin-input-text) !important;
  border: 1px solid var(--admin-input-border) !important;
  border-radius: 10px !important;
  padding: 9px 13px !important;
  font-size: 13px !important;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.admin-body input::placeholder,
body.admin-body textarea::placeholder {
  color: var(--admin-input-placeholder) !important;
  opacity: 1;
}

body.admin-body input:focus,
body.admin-body select:focus,
body.admin-body textarea:focus {
  border-color: var(--admin-accent) !important;
  box-shadow: 0 0 0 3px var(--admin-accent-soft) !important;
  outline: none !important;
}

body.admin-body .form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

body.admin-body label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--admin-text-secondary);
}

body.admin-body label.check {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

body.admin-body label.check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--admin-accent);
}

/* --------------------------------------------------------------------------
   7. Buttons & Action Links
   -------------------------------------------------------------------------- */
body.admin-body button,
body.admin-body .btn-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid var(--admin-border-strong);
  background: var(--admin-bg-surface);
  color: var(--admin-text-primary);
  transition: all 0.15s ease;
}

body.admin-body button:hover,
body.admin-body .btn-action:hover {
  background: var(--admin-bg-subtle);
  border-color: var(--admin-border-strong);
}

body.admin-body .primary,
body.admin-body button.primary {
  background: var(--admin-accent) !important;
  color: #ffffff !important;
  border-color: var(--admin-accent) !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

body.admin-body .primary:hover,
body.admin-body button.primary:hover {
  background: var(--admin-accent-hover) !important;
  border-color: var(--admin-accent-hover) !important;
}

body.admin-body .danger-button,
body.admin-body button.danger-button {
  background: var(--admin-danger-soft) !important;
  color: var(--admin-danger-text) !important;
  border-color: var(--admin-danger-border) !important;
}

body.admin-body .danger-button:hover,
body.admin-body button.danger-button:hover {
  background: var(--admin-danger) !important;
  color: #ffffff !important;
}

body.admin-body .quick-view {
  background: var(--admin-accent-soft);
  color: var(--admin-accent);
  border-color: transparent;
  padding: 6px 12px;
  font-size: 12.5px;
}

body.admin-body .quick-view:hover {
  background: var(--admin-accent);
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   8. Slide-Out Quick-View Detail Drawer
   -------------------------------------------------------------------------- */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 2400;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.drawer-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.job-drawer-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(640px, calc(100vw - 280px));
  height: 100vh;
  background: var(--admin-bg-surface);
  color: var(--admin-text-primary);
  border-left: 1px solid var(--admin-border);
  box-shadow: -16px 0 48px rgba(15, 23, 42, 0.25);
  z-index: 2500;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.job-drawer-panel.is-open {
  transform: translateX(0);
}

.drawer-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--admin-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--admin-bg-subtle);
}

.drawer-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--admin-accent);
  text-transform: uppercase;
}

.drawer-title {
  margin: 4px 0 0;
  font-family: "Sora", "Plus Jakarta Sans", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--admin-text-primary);
}

.drawer-close-btn {
  background: transparent !important;
  border: 1px solid var(--admin-border) !important;
  border-radius: 8px !important;
  width: 34px;
  height: 34px;
  padding: 0 !important;
  font-size: 18px;
  line-height: 1;
  color: var(--admin-text-muted) !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.drawer-close-btn:hover {
  background: var(--admin-bg-surface) !important;
  color: var(--admin-text-primary) !important;
  border-color: var(--admin-border-strong) !important;
}

.drawer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.drawer-meta-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  background: var(--admin-bg-subtle);
  border: 1px solid var(--admin-border);
  border-radius: 14px;
  padding: 16px;
}

.drawer-meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.drawer-meta-item .meta-label {
  color: var(--admin-text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.drawer-meta-item .meta-value {
  color: var(--admin-text-primary);
  font-size: 13.5px;
  font-weight: 600;
}

.drawer-section h3 {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--admin-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.drawer-desc-box {
  background: var(--admin-bg-page);
  border: 1px solid var(--admin-border);
  border-radius: 12px;
  padding: 14px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--admin-text-primary);
}

/* --------------------------------------------------------------------------
   9. Confirmation & Permanent Delete Modal
   -------------------------------------------------------------------------- */
.confirm-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 2600;
  display: grid;
  place-items: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.confirm-modal-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.confirm-modal-card {
  background: var(--admin-bg-surface);
  color: var(--admin-text-primary);
  border: 1px solid var(--admin-border);
  border-radius: 20px;
  width: min(520px, 100%);
  padding: 28px;
  box-shadow: var(--admin-shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.confirm-modal-card h3 {
  margin: 0;
  font-family: "Sora", "Plus Jakarta Sans", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--admin-text-primary);
}

.confirm-modal-card p {
  margin: 0;
  color: var(--admin-text-secondary);
  font-size: 14px;
  line-height: 1.6;
}

.confirm-modal-danger-box {
  background: var(--admin-danger-soft);
  border: 1px solid var(--admin-danger-border);
  border-radius: 12px;
  padding: 14px 16px;
  color: var(--admin-danger-text);
  font-size: 13px;
  line-height: 1.5;
}

.confirm-modal-danger-box strong {
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
}

.confirm-modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}

.btn-destructive {
  background: var(--admin-danger) !important;
  color: #ffffff !important;
  border-color: var(--admin-danger) !important;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25);
}

.btn-destructive:hover {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
}

.btn-cancel {
  background: var(--admin-bg-surface) !important;
  color: var(--admin-text-secondary) !important;
  border-color: var(--admin-border) !important;
}

.btn-cancel:hover {
  background: var(--admin-bg-subtle) !important;
  color: var(--admin-text-primary) !important;
}

/* --------------------------------------------------------------------------
   9B. Archive / Recycle Bin UI
   -------------------------------------------------------------------------- */
.archive-warning-banner {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--admin-text-primary);
  font-size: 13.5px;
  line-height: 1.5;
}

.archive-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--admin-border);
  padding-bottom: 12px;
}

.archive-tab-btn {
  background: transparent !important;
  border: 1px solid var(--admin-border) !important;
  color: var(--admin-text-secondary) !important;
  padding: 8px 18px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: all 0.15s ease;
}

.archive-tab-btn:hover {
  background: var(--admin-bg-subtle) !important;
  color: var(--admin-text-primary) !important;
}

.archive-tab-btn.is-active {
  background: var(--admin-accent) !important;
  color: #ffffff !important;
  border-color: var(--admin-accent) !important;
}

.btn-restore {
  background: var(--admin-success-soft) !important;
  color: var(--admin-success-text) !important;
  border: 1px solid var(--admin-success-border) !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  cursor: pointer;
}

.btn-restore:hover {
  background: var(--admin-success) !important;
  color: #ffffff !important;
}

.btn-perm-delete {
  background: var(--admin-danger-soft) !important;
  color: var(--admin-danger-text) !important;
  border: 1px solid var(--admin-danger-border) !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  cursor: pointer;
}

.btn-perm-delete:hover {
  background: var(--admin-danger) !important;
  color: #ffffff !important;
}


/* --------------------------------------------------------------------------
   10. Policy CMS & History
   -------------------------------------------------------------------------- */
body.admin-body .policy-card {
  background: var(--admin-bg-surface) !important;
  border: 1px solid var(--admin-border) !important;
  border-radius: 16px !important;
  padding: 20px !important;
  margin-bottom: 20px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.admin-body .policy-card[open] {
  border-color: var(--admin-accent) !important;
  box-shadow: var(--admin-shadow-sm) !important;
}

body.admin-body .policy-card summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  color: var(--admin-text-primary);
}

body.admin-body .policy-card summary::-webkit-details-marker {
  display: none;
}

body.admin-body .policy-version-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: var(--admin-bg-subtle);
  border-radius: 8px;
  font-size: 12px;
  margin-bottom: 6px;
  color: var(--admin-text-secondary);
}

/* --------------------------------------------------------------------------
   11. Responsive Breakpoints
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .admin-sidebar {
    transform: translateX(-100%);
    width: 280px;
    box-shadow: 12px 0 36px rgba(0, 0, 0, 0.35);
  }

  body.sidebar-open .admin-sidebar {
    transform: translateX(0);
  }

  .sidebar-close-btn {
    display: inline-flex;
  }

  .admin-content-wrapper {
    margin-left: 0;
    width: 100%;
  }

  .mobile-menu-btn {
    display: inline-flex;
  }

  .admin-topbar {
    padding: 0 20px;
  }

  .admin-main-shell {
    padding: 24px 20px;
  }
}

@media (max-width: 768px) {
  .admin-topbar {
    padding: 0 14px;
    height: 56px;
    min-height: 56px;
  }

  .topbar-breadcrumbs .crumb-root,
  .topbar-breadcrumbs .crumb-sep {
    display: none;
  }

  .crumb-current {
    font-size: 14px;
  }

  .admin-main-shell {
    padding: 16px 12px;
  }

  body.admin-body .control-section {
    padding: 20px 16px !important;
    border-radius: 16px !important;
    margin-bottom: 20px;
  }

  body.admin-body .table-head,
  body.admin-body .job-table-head,
  body.admin-body .queue-table-head,
  body.admin-body .customer-table-head {
    display: none !important;
  }

  body.admin-body .table-row,
  body.admin-body .job-row,
  body.admin-body .pending-row,
  body.admin-body .queue-row,
  body.admin-body .customer-row {
    grid-template-columns: 1fr !important;
    padding: 16px;
    gap: 8px;
    border: 1px solid var(--admin-border);
    border-radius: 12px;
    margin-bottom: 12px;
    background: var(--admin-bg-surface);
  }

  .job-drawer-panel {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    border-radius: 0;
  }

  .admin-topbar .command-trigger span,
  .topbar-logout-btn span {
    display: none;
  }
}