/* GŁÓWNY KONTENER */
.dfpc-wrapper {
  position: relative;
  width: 100%;
  max-width: none;              /* żadnego zawężania */
  box-sizing: border-box;       /* żeby padding nie „wychodził” poza szerokość */
  margin: 40px 0;               /* wyrównanie do pozostałych sekcji */
  padding: 28px 32px 30px;
  border-radius: 24px;
  border: 1px solid rgba(118, 214, 255, 0.18);
  background:
        repeating-linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.02) 0,
            rgba(255, 255, 255, 0.02) 1px,
            transparent 1px,
            transparent 6px
        ),
        radial-gradient(circle at top, #0b223f 0, #050b18 50%, #020614 100%);
  box-shadow:
    0 26px 60px rgba(0, 0, 0, 0.85);
  color: #f8fbff;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow: hidden;
}



.dfpc-wrapper::before {
    background:
        repeating-linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.02) 0,
            rgba(255, 255, 255, 0.02) 1px,
            transparent 1px,
            transparent 6px
        ),
        radial-gradient(circle at top, #0b223f 0, #050b18 50%, #020614 100%);
    border-radius: 24px;
    border: 1px solid rgba(141, 207, 255, 0.15);
    padding: 24px 24px 28px;
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.85);
    color: #f8fbff;
    box-sizing: border-box;
}

.dfpc-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at bottom right, rgba(0, 0, 0, 0.65), transparent 50%);
  pointer-events: none;
}


/* NAGŁÓWEK */
.dfpc-header {
  margin-bottom: 18px;
}

.dfpc-title {
  margin: 0 0 6px;
  font-size: 28px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #e8f6ff;
}

.dfpc-subtitle {
  margin: 0;
  font-size: 13px;
  color: rgba(207, 220, 255, 0.7);
}

/* TABS – TRYB PRACY */
.dfpc-tabs {
  display: inline-flex;
  padding: 2px;
  border-radius: 999px;
  background: radial-gradient(circle at top left, #0b2136, #040815);
  border: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 20px;
}

.dfpc-tab {
  min-width: 190px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: rgba(213, 226, 255, 0.8);
  font-size: 14px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s ease-out;
}

.dfpc-tab--active {
  background: linear-gradient(90deg, #21e6ff, #37f7c7);
  color: #04101b;
  box-shadow: 0 0 18px rgba(33, 215, 255, 0.45);
}

/* FORMULARZ */
.dfpc-form {
  margin-top: 6px;
  margin-bottom: 22px;
  max-width: 1100px;      /* NOWE – szeroki formularz */
  width: 100%;
}


/* Wiersze „Model / Precyzja” */
.dfpc-form-row {
  margin-bottom: 14px;
}

.dfpc-form-row label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(200, 215, 245, 0.8);
}

/* Sekcje parametrów (Trening / Inference) – pola jedno pod drugim */
.dfpc-form-section {
  margin-bottom: 14px;
}

/* DWIE KOLUMNY W SEKCJACH TRENING / INFERENCE (desktop) */
.dfpc-form-section[data-section="training"],
.dfpc-form-section[data-section="inference"] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 12px;
}

/* label w komórkach grida, bez dodatkowego marginesu na dole */
.dfpc-form-section[data-section="training"] > label,
.dfpc-form-section[data-section="inference"] > label {
  margin-bottom: 0;
}

/* panel suwaka mocy na pełną szerokość (obie kolumny) */
.dfpc-form-section .dfpc-powerbar {
  grid-column: 1 / -1;
}

/* na wąskich ekranach wracamy do jednej kolumny */
@media (max-width: 900px) {
  .dfpc-form-section[data-section="training"],
  .dfpc-form-section[data-section="inference"] {
    grid-template-columns: 1fr;
  }
}


.dfpc-form-section > label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(200, 215, 245, 0.8);
}

.dfpc-form-section--hidden {
  display: none;
}

/* INPUTY / SELECTY */
.dfpc-input {
  padding: 9px 11px;
  border-radius: 10px;
  border: 1px solid rgba(158, 187, 232, 0.28);
  background: radial-gradient(circle at top left, #06101c, #020611);
color: #f5f8ff;
  font-size: 13px;
  outline: none;
  transition: border 0.15s ease-out, box-shadow 0.15s ease-out, background 0.15s ease-out;
  width: 100%;
  box-sizing: border-box;
}

.dfpc-input:focus {
  border-color: #26d9ff;
  box-shadow: 0 0 0 1px rgba(38, 217, 255, 0.5);
  background: radial-gradient(circle at top left, #08182a, #02040a);
}

.dfpc-input::placeholder {
  color: #091118;
}

/* PRZYCISKI */
.dfpc-btn {
    border: none;
    border-radius: 999px;
    padding: 13px 36px;
    font-size: 14px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.dfpc-btn--primary {
  margin-top: 6px;
    background-image: linear-gradient(90deg, #21e6ff, #37f7c7);
  color: #051021;
  box-shadow: 0 12px 26px rgba(13, 218, 255, 0.5);
}

.dfpc-btn--primary:hover {
  transform: translateY(1px);
  box-shadow:
    0 0 0 6px rgba(41, 243, 255, 0.15),
    0 18px 50px rgba(0, 180, 255, 0.7);
filter: brightness(1.02);
  color: #002b3d;
}

.dfpc-btn--secondary {
  background: transparent;
  border: 1px solid rgba(147, 207, 255, 0.65);
  color: #e5f4ff;
  margin-top: 8px;
}

.dfpc-btn--secondary:hover {
  background: rgba(17, 74, 116, 0.6);
}

/* BŁĘDY / INFO */
.dfpc-error {
  margin-top: 4px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(187, 45, 69, 0.12);
  border: 1px solid rgba(255, 97, 130, 0.5);
  color: #ffd4e0;
  font-size: 12px;
}

.dfpc-error--hidden {
  display: none;
}

.dfpc-no-results {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(244, 203, 125, 0.65);
  background: radial-gradient(circle at top left, #30240c, #150f04);
  font-size: 12px;
  color: #ffecc2;
}

/* WYNIKI */
.dfpc-results-title {
  margin: 4px 0 10px;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(230, 242, 255, 0.9);
}

/* KARTY KLASTRÓW */
.dfpc-card {
  border-radius: 14px;
  padding: 14px 16px 13px;
  margin-bottom: 12px;
  background:
    linear-gradient(145deg, #0b223f, transparent),
    radial-gradient(circle at top left, rgba(38, 207, 255, 0.25), transparent 55%);
  border: 1px solid rgba(173, 206, 255, 0.3);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.6);
transition: transform 0.12s ease-out, box-shadow 0.12s ease-out, border-color 0.12s ease-out;
}

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

.dfpc-card-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #f4f8ff;
}

.dfpc-card-rank {
  font-size: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: radial-gradient(circle at top left, #12263f, #0a1423);
  border: 1px solid rgba(172, 205, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #fff;
}

.dfpc-card-list {
  margin: 6px 0 4px;
  padding-left: 18px;
  font-size: 12px;
  color: rgba(215, 227, 255, 0.9);
}

.dfpc-card-list li {
  margin-bottom: 2px;
}

.dfpc-card-price {
  font-size: 12px;
  font-weight: 600;
  margin-top: 4px;
  color: #f8f9ff;
}

.dfpc-card:hover {
  transform: translateY(-2px);
  border-color: rgba(175, 230, 255, 0.9);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.9),
    0 0 32px rgba(71, 215, 255, 0.7);
}

/* PANEL PORÓWNANIA 5090 vs 6000 */
.dfpc-compare {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 12px;
  background: radial-gradient(circle at top left, #091524, #02040a);
  border: 1px solid rgba(130, 181, 255, 0.45);
  font-size: 12px;
  color: rgba(211, 224, 255, 0.9);
}

.dfpc-compare h4 {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #dce9ff;
}

/* PANEL CELU MOCY */
.dfpc-powerbar {
  margin-bottom: 18px;
  padding: 12px 14px 10px;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(18, 43, 84, 0.85), rgba(5, 13, 32, 0.95));
  box-shadow: inset 0 0 0 1px rgba(124, 188, 255, 0.3);
}

.dfpc-powerbar-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}

.dfpc-powerbar-label {
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(200, 215, 245, 0.9);
}

.dfpc-powerbar-value {
  font-size: 13px;
  font-weight: 600;
  color: #e8fbff;
}

/* suwak + tryb (Ultra / Fast / Balanced / Eco) */
.dfpc-powerbar-range-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* CUSTOM RANGE – neonowy slider */
.dfpc-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #23d5ff, #8cfff0);
  outline: none;
  box-shadow: 0 0 16px rgba(53, 222, 255, 0.65);
  position: relative;
}

.dfpc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0, #b0ffff 40%, #3af1ff 70%, #00c8ff 100%);
  box-shadow:
    0 0 16px rgba(0, 255, 255, 0.95),
    0 0 40px rgba(79, 246, 255, 0.7);
  border: none;
  margin-top: -7px; /* centrowanie względem toru */
  cursor: pointer;
}

.dfpc-range::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #23d5ff, #8cfff0);
}

.dfpc-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: radial-gradient(circle, #ffffff 0, #b0ffff 40%, #3af1ff 70%, #00c8ff 100%);
  box-shadow:
    0 0 16px rgba(0, 255, 255, 0.95),
    0 0 40px rgba(79, 246, 255, 0.7);
  cursor: pointer;
}

.dfpc-powerbar-mode {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 100px;           /* więcej miejsca na BALANCED */
  padding: 4px 14px;
  border-radius: 999px;
  border: 1px solid rgba(163, 233, 255, 0.65);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;        /* <— kluczowe, nie łamie tekstu */
  color: #d9f9ff;
  background: radial-gradient(circle at top left,
    rgba(40, 128, 255, 0.5),
    rgba(4, 14, 39, 0.9)
  );
}



/* DWIE KOLUMNY – FORMULARZ + WYNIKI */
.dfpc-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); /* lewa trochę szersza */
  column-gap: 32px;
  align-items: flex-start;
}

/* lewa kolumna – formularz */
.dfpc-form {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
}

/* prawa kolumna – wyniki */
.dfpc-results {
  width: 100%;
}

/* Dwukolumnowy grid wewnątrz sekcji parametrów */
.dfpc-fields-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 24px;
  margin-top: 10px;
}

.dfpc-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(200, 215, 245, 0.8);
}

/* wyniki pod formularzem z oddechem */
.dfpc-results {
  margin-top: 26px;
}


/* Ciemny dropdown dla selektów w kalkulatorze */
select.dfpc-input {
  background-color: #020812 !important;
  color: #f5f8ff !important;
}

/* Tło i kolor opcji w rozwijanej liście */
select.dfpc-input option {
  background-color: #020812 !important;
  color: #f5f8ff !important;
}

/* Podświetlenie zaznaczonej opcji */
select.dfpc-input option:checked,
select.dfpc-input option:hover {
  background-color: #061525 !important;
  color: #ffffff !important;
}



/* Na wąskich ekranach wracamy do jednej kolumny */
@media (max-width: 900px) {
  .dfpc-layout {
    grid-template-columns: 1fr;
    row-gap: 20px;
  }
}



/* Na wąskich ekranach składamy wszystko w jedną kolumnę */
@media (max-width: 900px) {
  .dfpc-wrapper {
    padding: 20px 16px 22px;
    margin: 24px auto;
  }

  .dfpc-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .dfpc-results {
    margin-top: 4px;
  }
}



/* RESPONSYWNOŚĆ – trochę „powietrza” na małych ekranach */
@media (max-width: 640px) {
  .dfpc-wrapper {
    padding: 18px 16px 20px;
  }

  .dfpc-title {
    font-size: 22px;
  }

  .dfpc-tabs {
    width: 100%;
    justify-content: center;
  }

  .dfpc-tab {
    min-width: auto;
    flex: 1;
    font-size: 11px;
    padding-inline: 10px;
  }
}