/* ===================================================================
   REQUEST NEW — Krende Override
   Loaded AFTER request-new.css — swaps blue #2563eb/#38bdf8 → lime #c6f74e
   Scoped: body.page-request-new
   Fonts : Bricolage Grotesque · JetBrains Mono · Outfit
   =================================================================== */

body.page-request-new {
  --accent:        #c6f74e;
  --accent-hover:  #9fd313;
  --accent-on:     #0a0f04;
  --accent-alt:    #4fe6ff;
  --accent-soft:   rgba(198, 247, 78, 0.10);
  --lime-glow:     rgba(198, 247, 78, 0.14);
  --cyan:          #4fe6ff;
  --rose:          #ff5d72;
  --amber:         #ffce4f;
  --border:        rgba(132, 148, 170, 0.14);
  --border-strong: rgba(132, 148, 170, 0.28);
  --surface:       #12151c;
  --surface-2:     #171b24;
  --text-main:     #e9eef4;
  --text-soft:     #93a0b2;
  --bg-input:      rgba(255, 255, 255, 0.05);
  --bg-elevated:   #12151c;

  /* vars used by request-new.css */
  --radius-xl: 18px;
  --radius-lg: 14px;
  --radius-md: 10px;
  --shadow-soft: 0 8px 32px rgba(0,0,0,0.50);
  --shadow-soft-lg: 0 20px 60px rgba(0,0,0,0.70);

  --font-display: "Bricolage Grotesque", "Outfit", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;
  --font-body:    "Outfit", system-ui, sans-serif;
  color: var(--text-main);
  font-family: var(--font-body);
}

body.page-request-new ::selection {
  background: var(--accent);
  color: var(--accent-on);
}

/* ── header ── */
body.page-request-new .site-header {
  background: rgba(9, 11, 15, 0.88) !important;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
body.page-request-new .nav-menu a { color: var(--text-soft); }
body.page-request-new .nav-menu a:hover,
body.page-request-new .nav-menu a.active { color: var(--accent); }
body.page-request-new .logo-mark { background: var(--accent) !important; color: var(--accent-on) !important; }

/* ── footer ── */
body.page-request-new .site-footer {
  border-top: 1px solid var(--border);
  background: #0d1015;
}

/* ================================================================
   BREADCRUMB
   ================================================================ */
.page-request-new .breadcrumb { font-family: var(--font-mono); font-size: 0.74rem; }
.page-request-new .breadcrumb a { color: var(--text-soft); }
.page-request-new .breadcrumb a:hover { color: var(--accent); }
.page-request-new .breadcrumb-current { color: var(--accent); font-weight: 600; }

/* ================================================================
   STEP PROGRESS — blue gradient → lime
   ================================================================ */
.page-request-new .step-circle {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
}
.page-request-new .step-item.active .step-circle {
  background: var(--accent);
  border-color: transparent;
  color: var(--accent-on);
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(198, 247, 78, 0.35);
}
.page-request-new .step-item.completed .step-circle {
  background: rgba(198, 247, 78, 0.12);
  border-color: rgba(198, 247, 78, 0.40);
  color: var(--accent);
}
.page-request-new .step-item.active > span:not(.step-circle) { color: var(--accent); }
.page-request-new .step-line { background: var(--border); }
.page-request-new .step-line::after {
  background: linear-gradient(90deg, var(--accent), var(--cyan));
}

/* ================================================================
   FORM COLUMN CARD
   ================================================================ */
.page-request-new .request-form-column {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
  padding: 24px 20px;
}

/* Step titles */
.page-request-new .step-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 680;
  letter-spacing: -0.01em;
}

/* ================================================================
   PREVIEW COLUMN — blue radial gradient → lime
   ================================================================ */
.page-request-new .request-preview-column {
  background: radial-gradient(circle at top, rgba(198, 247, 78, 0.12), rgba(9, 11, 15, 0.98));
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft-lg);
}
.page-request-new .preview-header h3 {
  font-family: var(--font-display);
  font-weight: 650;
  color: var(--text-main);
}
.page-request-new .preview-mode-toggle {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
}
.page-request-new .preview-mode-btn.active {
  background: var(--accent-soft);
  color: var(--accent);
}

/* preview card */
.page-request-new .request-preview-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.80);
}
.page-request-new .preview-body {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
/* preview badges — blue → lime */
.page-request-new .preview-status-badge {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid rgba(198, 247, 78, 0.28);
}
.page-request-new .preview-tag-chip {
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.72rem;
}
.page-request-new .preview-stack-pill {
  background: rgba(79, 230, 255, 0.12);
  border: 1px solid rgba(79, 230, 255, 0.35);
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

/* ================================================================
   FORM INPUTS
   ================================================================ */
.page-request-new .input-field {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  color: var(--text-main);
  font-family: var(--font-body);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.page-request-new .input-field:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(198, 247, 78, 0.03);
  box-shadow: 0 0 0 3px rgba(198, 247, 78, 0.10);
}

/* ================================================================
   SUMMARY TOGGLE — blue → lime
   ================================================================ */
.page-request-new .summary-toggle {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
}
.page-request-new .summary-mode-btn.active {
  background: var(--accent-soft);
  color: var(--accent);
}
.page-request-new .summary-preview {
  background: rgba(9, 11, 15, 0.97);
  border: 1px dashed var(--border-strong);
}

/* ================================================================
   CATEGORY DROPDOWN — blue → lime
   ================================================================ */
.page-request-new .category-dropdown {
  background: rgba(12, 14, 20, 0.99);
  border: 1px solid var(--border-strong);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.80);
  border-radius: var(--radius-lg);
}
.page-request-new .category-search {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  color: var(--text-main);
  border-radius: 8px;
}
.page-request-new .category-list li { color: var(--text-soft); }
.page-request-new .category-list li:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

/* ================================================================
   TAGS — blue → lime
   ================================================================ */
.page-request-new .tags-input-wrapper {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.page-request-new .tags-input-wrapper:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(198, 247, 78, 0.10);
}
.page-request-new .tag-chip {
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  border: 1px solid rgba(198, 247, 78, 0.25);
  border-radius: 7px;
  padding: 3px 9px;
}
.page-request-new .tags-input { color: var(--text-main); }
.page-request-new .tag-suggest {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  color: var(--text-soft);
  border-radius: 7px;
  transition: all 0.18s;
}
.page-request-new .tag-suggest:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: rgba(198, 247, 78, 0.30);
}

/* ================================================================
   BUDGET — blue → lime
   ================================================================ */
.page-request-new .budget-range {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.page-request-new .budget-sliders input[type="range"]::-webkit-slider-thumb {
  background: var(--accent);
  border: 2px solid var(--accent-hover);
}
.page-request-new .budget-sliders input[type="range"]::-webkit-slider-runnable-track {
  background: rgba(255, 255, 255, 0.08);
}
.page-request-new .budget-preset {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-soft);
  border-radius: 8px;
  transition: all 0.18s;
}
.page-request-new .budget-preset:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

/* ================================================================
   DEADLINE TIMELINE — colors preserved, track updated
   ================================================================ */
.page-request-new .timeline-bar { background: rgba(255, 255, 255, 0.06); }

/* ================================================================
   OS OPTIONS — blue → lime
   ================================================================ */
.page-request-new .os-option {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-soft);
  transition: all 0.18s;
}
.page-request-new .os-option:hover {
  border-color: var(--border-strong);
  color: var(--text-main);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.40);
}
.page-request-new .os-option.selected {
  border-color: rgba(198, 247, 78, 0.55);
  background: rgba(198, 247, 78, 0.08);
  color: var(--accent);
  box-shadow: 0 0 0 3px rgba(198, 247, 78, 0.10);
}

/* ================================================================
   STACK CHIPS — blue → lime
   ================================================================ */
.page-request-new .stack-column {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.page-request-new .stack-chip {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-soft);
  border-radius: 8px;
  transition: all 0.15s;
}
.page-request-new .stack-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 4px 14px rgba(198, 247, 78, 0.12);
  transform: translateY(-1px);
}
.page-request-new .stack-chip-selected {
  background: var(--accent-soft);
  border-color: rgba(198, 247, 78, 0.45);
  color: var(--accent);
}

/* ================================================================
   UPLOAD ZONE
   ================================================================ */
.page-request-new .upload-zone {
  border: 1.5px dashed var(--border-strong);
  background: rgba(255, 255, 255, 0.025);
  border-radius: var(--radius-lg);
  transition: border-color 0.2s, background 0.2s;
}
.page-request-new .upload-zone:hover {
  border-color: var(--accent);
  background: rgba(198, 247, 78, 0.03);
}
.page-request-new .link-button { color: var(--accent); }
.page-request-new .upload-file-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.page-request-new .upload-progress-bar { background: rgba(255, 255, 255, 0.06); }
.page-request-new .upload-progress-fill {
  background: linear-gradient(90deg, var(--accent), var(--cyan));
}

/* ================================================================
   COLLAB CHIP — blue → lime
   ================================================================ */
.page-request-new .collab-chip {
  background: var(--accent-soft);
  border: 1px solid rgba(198, 247, 78, 0.35);
  color: var(--accent);
}
.page-request-new .collab-role-label { color: var(--accent); }

/* ================================================================
   SUBMIT OVERLAY — blue → lime
   ================================================================ */
.page-request-new .request-submit-overlay {
  background: rgba(9, 11, 15, 0.92);
}
.page-request-new .request-submit-dialog {
  background: radial-gradient(circle at top, rgba(198, 247, 78, 0.14), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 65px rgba(0, 0, 0, 0.90);
}
.page-request-new .submit-spinner {
  border: 3px solid rgba(132, 148, 170, 0.25);
  border-top-color: var(--accent);
}