/* Kalkulator opłacalności IdoSell. Look borrowed from idomobile.pl: dark glass panels,
   green accent, uppercase micro labels, square corners. Everything is scoped under .ko-app. */

.ko-app {
  --ko-fg: #fff;
  --ko-on: rgba(255, 255, 255, .72);
  --ko-muted: rgba(255, 255, 255, .58);
  --ko-line: rgba(255, 255, 255, .09);
  --ko-line-2: rgba(255, 255, 255, .16);
  --ko-glass: rgba(255, 255, 255, .035);
  --ko-glass-2: rgba(255, 255, 255, .06);
  --ko-bg: #060607;
  --ko-panel: #0d0d0f;
  --ko-accent: #00ab59;
  --ko-accent-bg: rgba(0, 171, 89, .12);
  --ko-accent-line: rgba(0, 171, 89, .3);
  --ko-warn: #f2b440;
  --ko-bad: #ff6b6b;
  --ko-head: var(--hh, 'Helvetica Neue', Helvetica, sans-serif);
  /* Cost groups, stacking order. Validated for colour-blind separation on the dark surface. */
  --ko-c-platform: #3987e5;
  --ko-c-payments: #d95926;
  --ko-c-marketplaces: #199e70;
  --ko-c-apps: #c98500;
  --ko-c-upkeep: #d55181;
  color: var(--ko-on);
  background: var(--ko-bg);
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  max-width: 1120px;
  margin: 0 auto;
  padding: 32px 16px 64px;
}
.ko-app h1 { font-family: var(--ko-head); font-weight: 800; font-size: clamp(30px, 4vw, 44px); line-height: 1.1; letter-spacing: -.5px; margin: 0 0 12px; color: #fff; }
.ko-app h2 { font-family: var(--ko-head); font-weight: 800; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.2; letter-spacing: -.3px; margin: 0 0 10px; color: #fff; }
.ko-app h3 { font-family: var(--ko-head); font-weight: 800; font-size: 17px; line-height: 1.3; margin: 24px 0 8px; color: #fff; }
.ko-app h4 { font-family: var(--ko-head); font-weight: 800; color: #fff; }
.ko-app p, .ko-app ul, .ko-app dl { margin: 0 0 12px; }
.ko-app a { color: var(--ko-accent); }
.ko-app strong { color: #fff; }
.ko-app .ko-intro { margin-bottom: 10px; color: var(--ko-on); max-width: 64ch; font-size: 17px; }
.ko-app .ko-intro-note { margin-bottom: 32px; color: var(--ko-muted); max-width: 64ch; font-size: 14px; }
.ko-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; background: var(--ko-accent-bg); border: 1px solid rgba(0, 171, 89, .25); color: var(--ko-accent); font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin: 0 0 18px; }
.ko-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Micro label, as .sec-label on idomobile.pl */
.ko-kicker { font-size: 11px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--ko-accent); margin: 0 0 10px; }

/* Wizard: question card on the left, answers and "what you get" on the right */
.ko-wiz { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.ko-step { position: relative; background: rgba(17, 17, 17, .55); border: 1px solid var(--ko-line); padding: 36px 40px 32px; overflow: hidden; }
.ko-step::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #4ff09a, var(--ko-accent) 60%, rgba(0, 171, 89, 0)); }
.ko-meter { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 0 0 22px; }
.ko-meter span { height: 4px; background: rgba(255, 255, 255, .1); }
.ko-meter .ko-meter-done { background: var(--ko-accent); }
.ko-meter .ko-meter-cur { background: linear-gradient(90deg, var(--ko-accent) 50%, rgba(0, 171, 89, .35) 50%); }
.ko-step-refine .ko-meter { display: none; }
.ko-progress { font-size: 11px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--ko-accent); margin: 0 0 12px; }
.ko-app .ko-step h2 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.18; margin: 0 0 12px; max-width: 32ch; }
.ko-step-refine h2 { max-width: none; }
.ko-why { color: var(--ko-on); font-size: 16px; max-width: 62ch; margin-bottom: 26px; }
.ko-step .ko-fields > * + * { margin-top: 26px; }
.ko-step fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.ko-step legend { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--ko-muted); padding: 0; margin-bottom: 12px; }
.ko-field { margin: 0; }
.ko-field label { display: block; font-weight: 700; color: #fff; margin-bottom: 8px; }
.ko-input { display: inline-flex; align-items: center; gap: 10px; }
.ko-suffix { color: var(--ko-muted); font-weight: 700; }
.ko-app input[type=text], .ko-app select {
  background: rgba(255, 255, 255, .05); color: #fff; border: 1px solid var(--ko-line-2); border-radius: 0;
  padding: 10px 12px; font: inherit; min-width: 0; max-width: 100%; min-height: 44px; transition: border-color .2s, background .2s;
}
.ko-app input[type=text]:hover, .ko-app select:hover { border-color: rgba(255, 255, 255, .3); }
.ko-app input[type=text]:focus, .ko-app select:focus { border-color: var(--ko-accent); background: rgba(0, 171, 89, .06); }
.ko-app input::placeholder { color: rgba(255, 255, 255, .35); }
.ko-app select option { background: #111; color: #fff; }
.ko-step input[type=text] { width: 14ch; }
.ko-step input[name=invoicingName], .ko-step input[name=currentPlatform] { width: 28ch; }
.ko-field-big label { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--ko-muted); }
.ko-app .ko-field-big input[type=text] { width: 240px; min-height: 68px; padding: 10px 18px; font-family: var(--ko-head); font-size: 32px; font-weight: 800; letter-spacing: -.5px; }
.ko-app .ko-field-big input::placeholder { color: rgba(255, 255, 255, .22); }
.ko-field-big .ko-suffix { font-family: var(--ko-head); font-size: 24px; font-weight: 800; color: var(--ko-on); }
.ko-app input:focus-visible, .ko-app select:focus-visible, .ko-app button:focus-visible, .ko-app summary:focus-visible, .ko-app a:focus-visible, .ko-app [tabindex="-1"]:focus-visible { outline: 2px solid var(--ko-accent); outline-offset: 3px; }
.ko-app input[type=radio], .ko-app input[type=checkbox] { accent-color: var(--ko-accent); width: 18px; height: 18px; vertical-align: -3px; }
.ko-hint { color: var(--ko-muted); font-size: 14px; margin: 8px 0 0; max-width: 64ch; }

/* Quick picks under a number */
.ko-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.ko-presets-l { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--ko-muted); margin-right: 4px; }
.ko-preset {
  min-height: 36px; padding: 6px 14px; background: transparent; color: var(--ko-on); border: 1px solid var(--ko-line-2);
  font: inherit; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; transition: border-color .2s, color .2s, background .2s;
}
.ko-preset[aria-pressed=true] { background: var(--ko-accent-bg); border-color: var(--ko-accent); color: #fff; }

/* Answers as selectable cards; the native input stays for keyboard and screen readers */
.ko-choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.ko-choice-grid-2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ko-choice {
  position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 64px; cursor: pointer;
  background: var(--ko-glass); border: 1px solid var(--ko-line-2); padding: 18px 48px 18px 18px; transition: border-color .2s, background .2s;
}
.ko-choice-input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.ko-choice-mark { position: absolute; top: 18px; right: 18px; width: 20px; height: 20px; border: 2px solid rgba(255, 255, 255, .35); border-radius: 50%; transition: border-color .2s, background .2s; }
.ko-choice-check .ko-choice-mark { border-radius: 0; }
.ko-choice-input:checked ~ .ko-choice-mark { border-color: var(--ko-accent); background: var(--ko-accent); box-shadow: inset 0 0 0 4px #0b1a12; }
.ko-choice-check .ko-choice-input:checked ~ .ko-choice-mark { box-shadow: none; background: var(--ko-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%2304140b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.ko-choice-input:focus-visible ~ .ko-choice-mark { outline: 2px solid var(--ko-accent); outline-offset: 3px; }
.ko-choice:has(.ko-choice-input:checked) { border-color: var(--ko-accent); background: rgba(0, 171, 89, .08); }
.ko-choice:has(.ko-choice-input:focus-visible) { outline: 2px solid var(--ko-accent); outline-offset: 2px; }
.ko-choice-ic { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--ko-accent-bg); color: var(--ko-accent); margin-bottom: 6px; }
.ko-choice-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ko-choice-t { color: #fff; font-weight: 700; font-size: 16px; line-height: 1.3; }
.ko-choice-h { color: var(--ko-muted); font-size: 13.5px; line-height: 1.5; }
.ko-fields > .ko-choice-check { max-width: 560px; }
.ko-own { display: grid; gap: 16px; padding: 20px; border: 1px solid var(--ko-line); background: rgba(255, 255, 255, .02); }
.ko-row { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: flex-end; }
.ko-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; align-items: start; }

/* Marketplaces as toggle chips */
.ko-toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.ko-toggle { position: relative; cursor: pointer; }
.ko-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ko-toggle span {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px; border: 1px solid var(--ko-line-2);
  color: var(--ko-on); font-weight: 700; font-size: 14px; transition: border-color .2s, background .2s, color .2s;
}
.ko-toggle span::before { content: "+"; color: var(--ko-accent); font-weight: 800; width: 10px; }
.ko-toggle input:checked + span { background: var(--ko-accent-bg); border-color: var(--ko-accent); color: #fff; }
.ko-toggle input:checked + span::before { content: "✓"; }
.ko-toggle input:focus-visible + span { outline: 2px solid var(--ko-accent); outline-offset: 2px; }

/* Examples for the "nietypowe potrzeby" question */
.ko-examples { border-left: 2px solid var(--ko-accent); padding: 2px 0 2px 16px; }
.ko-examples p { margin: 0 0 6px; color: #fff; font-weight: 700; }
.ko-examples ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.ko-examples li { color: var(--ko-on); font-size: 15px; }
.ko-examples li::before { content: ""; display: inline-block; width: 8px; height: 2px; background: var(--ko-accent); margin: 0 10px 4px 0; }

/* Plain controls (optional questions) */
.ko-radio, .ko-check { margin: 8px 0; }
.ko-radio input, .ko-check input { margin-right: 10px; }
.ko-check label, .ko-radio label { font-weight: normal; color: var(--ko-on); display: inline; }
.ko-check .ko-hint { margin-left: 28px; }
.ko-step-refine .ko-fields > fieldset { border: 1px solid var(--ko-line); background: rgba(255, 255, 255, .02); padding: 18px 20px 20px; }
.ko-step-refine .ko-fields > fieldset > legend { float: left; width: 100%; font-family: var(--ko-head); font-size: 17px; font-weight: 800; letter-spacing: 0; text-transform: none; color: #fff; margin-bottom: 4px; }
.ko-step-refine .ko-fields > fieldset > legend + * { clear: both; }
.ko-step-refine .ko-field { margin: 14px 0 0; }
.ko-step-refine .ko-radios { margin-top: 14px; }
.ko-step-refine .ko-radios legend { margin-bottom: 4px; }
.ko-per-mp, .ko-model { margin: 0; }
.ko-per-mp > summary, .ko-model > summary { list-style: none; cursor: pointer; color: #fff; font-weight: 700; min-height: 44px; display: flex; align-items: center; gap: 10px; }
.ko-per-mp > summary::-webkit-details-marker, .ko-model > summary::-webkit-details-marker { display: none; }
.ko-per-mp > summary::before, .ko-model > summary::before { content: "+"; color: var(--ko-accent); font-weight: 800; font-size: 18px; width: 12px; }
.ko-per-mp[open] > summary::before, .ko-model[open] > summary::before { content: "−"; }
.ko-per-mp .ko-field { display: inline-block; margin: 8px 16px 0 0; }
.ko-per-mp .ko-field input[type=text] { width: 9ch; }
.ko-error:empty { display: none; }
.ko-error { color: var(--ko-bad); font-weight: 700; margin: 18px 0 0; }
.ko-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--ko-line); }
.ko-nav-main { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; }
.ko-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

/* Hover only where there is a pointer: on touch screens hover sticks after a tap */
@media (hover: hover) {
  .ko-choice:hover { border-color: rgba(0, 171, 89, .55); background: rgba(255, 255, 255, .05); }
  .ko-preset:hover { border-color: var(--ko-accent); color: #fff; }
  .ko-toggle:hover span { border-color: rgba(0, 171, 89, .55); color: #fff; }
}

/* Side panel */
.ko-aside { display: grid; gap: 16px; position: sticky; top: 100px; }
.ko-aside-box { background: var(--ko-glass); border: 1px solid var(--ko-line); padding: 22px 22px 18px; }
.ko-aside .ko-kicker { margin-bottom: 14px; }
.ko-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ko-steps-row { display: flex; gap: 12px; align-items: flex-start; width: 100%; padding: 8px 6px; text-align: left; background: none; border: 0; font: inherit; color: inherit; }
button.ko-steps-row { cursor: pointer; }
button.ko-steps-row:hover { background: rgba(255, 255, 255, .04); }
.ko-steps-n { flex: none; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--ko-line-2); font-size: 12px; font-weight: 700; color: var(--ko-muted); }
.ko-steps-n svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ko-steps-t { display: flex; flex-direction: column; font-size: 14px; line-height: 1.4; color: var(--ko-muted); padding-top: 2px; min-width: 0; }
.ko-steps-t small { font-size: 13px; color: var(--ko-on); overflow-wrap: anywhere; }
.ko-steps-done .ko-steps-n { background: var(--ko-accent-bg); border-color: var(--ko-accent-line); color: var(--ko-accent); }
.ko-steps-done .ko-steps-t { color: #fff; font-weight: 700; }
.ko-steps-done .ko-steps-t small { font-weight: 400; }
.ko-steps-current .ko-steps-n { background: var(--ko-accent); border-color: var(--ko-accent); color: #04140b; }
.ko-steps-current .ko-steps-t { color: #fff; font-weight: 700; }
.ko-get { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ko-get li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--ko-on); }
.ko-get b { color: #fff; }
.ko-get-ic { flex: none; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--ko-accent-bg); color: var(--ko-accent); }
.ko-get-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.ko-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  background: var(--ko-accent); color: #04140b; border: 1px solid var(--ko-accent); border-radius: 0;
  padding: 12px 24px; font: inherit; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  cursor: pointer; transition: background .2s, border-color .2s;
}
.ko-btn:hover { background: #00c966; border-color: #00c966; }
.ko-btn-secondary { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .25); }
.ko-btn-ghost { background: transparent; color: var(--ko-on); border-color: transparent; padding-left: 0; padding-right: 0; }
.ko-btn-ghost:hover { background: transparent; border-color: transparent; color: #fff; }
.ko-btn-next { gap: 10px; padding: 14px 26px; }
.ko-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.ko-btn-next:hover svg { transform: translateX(3px); }
.ko-btn-secondary:hover { background: transparent; border-color: var(--ko-accent); }
.ko-link-btn { background: none; border: 0; padding: 0; color: var(--ko-accent); text-decoration: underline; cursor: pointer; font: inherit; font-size: .9rem; }

/* Results: shared */
.ko-section { margin: 56px 0 0; }
.ko-sub { color: var(--ko-on); max-width: 68ch; margin-bottom: 20px; }
.ko-note { display: block; color: var(--ko-muted); font-size: 13.5px; }
.ko-lead { font-size: 17px; color: #fff; }
.ko-warnings { border-left: 2px solid var(--ko-warn); padding-left: 16px; }

/* Status badge: icon + label, never colour alone */
.ko-bd {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; padding: 4px 9px 4px 7px;
}
.ko-bd svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ko-bd-yes { color: var(--ko-accent); background: rgba(0, 171, 89, .14); }
.ko-bd-mid { color: var(--ko-warn); background: rgba(242, 180, 64, .12); }
.ko-bd-no { color: var(--ko-bad); background: rgba(255, 107, 107, .12); }

/* Hero: verdict, one sentence, three numbers */
.ko-hero { position: relative; background: rgba(17, 17, 17, .55); border: 1px solid var(--ko-line); padding: 36px 32px 30px; overflow: hidden; }
.ko-hero::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--ko-state, var(--ko-accent)); }
.ko-state-good { --ko-state: var(--ko-accent); }
.ko-state-borderline { --ko-state: var(--ko-warn); }
.ko-state-not_a_fit { --ko-state: var(--ko-bad); }
.ko-hero .ko-kicker { color: var(--ko-state); display: inline-flex; align-items: center; gap: 8px; }
.ko-hero .ko-kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ko-state); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ko-state) 22%, transparent); }
.ko-hero h2 { font-size: clamp(30px, 4vw, 46px); line-height: 1.05; margin-bottom: 14px; }
.ko-hero-lead { font-size: 18px; line-height: 1.6; color: #fff; max-width: 60ch; margin-bottom: 26px; }

.ko-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px; background: var(--ko-line); border: 1px solid var(--ko-line); margin: 0 0 22px; }
.ko-tile { background: var(--ko-panel); padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 4px; }
.ko-tile small { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--ko-muted); }
.ko-tile b { font-family: var(--ko-head); font-size: 28px; font-weight: 800; line-height: 1.15; color: #fff; font-variant-numeric: tabular-nums; }
.ko-tile span { font-size: 13px; line-height: 1.5; color: var(--ko-muted); }
.ko-tile-hi { box-shadow: inset 0 2px 0 var(--ko-accent); }
.ko-tile-hi small { color: var(--ko-accent); }
.ko-tile-hero small { color: #fff; }
.ko-tile-cheaper { background: color-mix(in srgb, var(--ko-accent) 9%, var(--ko-panel)); }
.ko-tile-cheaper small { color: var(--ko-accent); }
.ko-tile-hero b { font-size: 34px; }

.ko-points { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 8px; max-width: 76ch; }
.ko-points li { position: relative; padding-left: 20px; font-size: 15px; color: var(--ko-on); }
.ko-points li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 2px; background: var(--ko-state, var(--ko-accent)); }

/* Cost chart: one series, value labels, thin bars, square baseline, rounded data end */
.ko-bars { margin: 0; }
.ko-bars-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--ko-line); }
.ko-bar { display: grid; grid-template-columns: minmax(150px, 240px) minmax(0, 1fr) minmax(120px, auto); align-items: center; gap: 4px 18px; padding: 14px 0; border-bottom: 1px solid var(--ko-line); }
.ko-bar-label { color: #fff; font-weight: 700; font-size: 15px; line-height: 1.35; }
.ko-bar-tag { display: table; margin-top: 4px; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ko-on); border: 1px solid var(--ko-line-2); padding: 1px 6px; vertical-align: 2px; }
.ko-bar-track { position: relative; height: 22px; border-left: 1px solid var(--ko-line-2); }
.ko-bar-fill, .ko-bar-range { position: absolute; top: 3px; bottom: 3px; left: 0; border-radius: 0 4px 4px 0; }
.ko-bar-fill { background: rgba(255, 255, 255, .34); min-width: 2px; }
.ko-bar-accent .ko-bar-fill { background: var(--ko-accent); }
.ko-bar-today .ko-bar-fill { background: transparent; border: 2px dashed rgba(255, 255, 255, .5); border-left: 0; }
.ko-bar-range { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .28) 0 3px, transparent 3px 7px); border: 1px solid rgba(255, 255, 255, .28); border-left: 0; }
.ko-bar-fill + .ko-bar-range { border-radius: 0 4px 4px 0; }
.ko-bar:has(.ko-bar-range) .ko-bar-fill { border-radius: 0; }
.ko-bar-value { text-align: right; color: #fff; font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ko-bar-value small { font-weight: 400; color: var(--ko-muted); font-size: 12.5px; }
.ko-bar-note { grid-column: 2 / -1; font-size: 12.5px; color: var(--ko-muted); }
.ko-seg { position: absolute; top: 3px; bottom: 3px; border-right: 2px solid var(--ko-bg); }
.ko-seg:last-of-type { border-right: 0; border-radius: 0 4px 4px 0; }
.ko-bar:has(.ko-bar-range) .ko-seg:last-of-type { border-radius: 0; border-right: 2px solid var(--ko-bg); }
.ko-g-platform { background: var(--ko-c-platform); }
.ko-g-payments { background: var(--ko-c-payments); }
.ko-g-marketplaces { background: var(--ko-c-marketplaces); }
.ko-g-apps { background: var(--ko-c-apps); }
.ko-g-upkeep { background: var(--ko-c-upkeep); }
.ko-sw { display: inline-block; width: 10px; height: 10px; flex: none; }
.ko-legend { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--ko-on); }
.ko-legend li { display: inline-flex; align-items: center; gap: 8px; }
.ko-bar-parts { grid-column: 2 / -1; list-style: none; padding: 0; margin: 2px 0 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--ko-on); font-variant-numeric: tabular-nums; }
.ko-bar-parts li { display: block; }
.ko-bar-parts .ko-sw { width: 8px; height: 8px; margin-right: 6px; vertical-align: 1px; }
.ko-bar-parts span { color: var(--ko-muted); }
.ko-bar-accent { background: linear-gradient(90deg, rgba(0, 171, 89, .07), transparent 70%); box-shadow: inset 2px 0 0 var(--ko-accent); margin-left: -14px; padding-left: 14px; }

/* Benefit cards, as .card on idomobile.pl */
.ko-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 0 0 18px; }
.ko-card { background: rgba(12, 12, 12, .62); border: 1px solid var(--ko-line); padding: 26px 24px; transition: border-color .2s; }
.ko-card:hover { border-color: var(--ko-accent-line); }
.ko-card-ic { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--ko-accent-bg); color: var(--ko-accent); margin-bottom: 18px; }
.ko-card-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ko-app .ko-card h3 { margin: 0 0 8px; }
.ko-card p { font-size: 14.5px; line-height: 1.65; color: var(--ko-on); margin: 0; }
.ko-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ko-chips-label { font-size: 13px; color: var(--ko-muted); margin-right: 4px; }
.ko-chipname { border: 1px solid var(--ko-line-2); color: var(--ko-on); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 6px 10px; }

/* Verdict strip: one chip per scenario */
.ko-strip { margin: 0 0 26px; }
.ko-strip figcaption { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--ko-muted); margin-bottom: 10px; }
.ko-strip-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.ko-chip { position: relative; background: var(--ko-glass); border: 1px solid var(--ko-line); padding: 16px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.ko-chip-current { border-color: var(--ko-accent-line); background: rgba(0, 171, 89, .06); }
.ko-chip-you { position: absolute; top: -9px; left: 12px; background: var(--ko-accent); color: #04140b; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 2px 7px; }
.ko-chip-top { color: #fff; font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.ko-chip-diff { color: var(--ko-muted); font-size: 13px; font-variant-numeric: tabular-nums; }

/* Collapsed details, as "Zobacz pełne porównanie" on idomobile.pl */
.ko-more { border-bottom: 1px solid var(--ko-line); }
.ko-acc { border-top: 1px solid var(--ko-line); }
.ko-acc > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; min-height: 44px; cursor: pointer; }
.ko-acc > summary::-webkit-details-marker { display: none; }
.ko-acc-t b { display: block; font-family: var(--ko-head); font-size: 18px; font-weight: 800; color: #fff; }
.ko-acc-t span { display: block; font-size: 14px; color: var(--ko-muted); margin-top: 2px; }
.ko-acc-ic { flex: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--ko-accent-line); color: var(--ko-accent); transition: background .2s; }
.ko-acc-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s; }
.ko-acc > summary:hover .ko-acc-ic { background: var(--ko-accent-bg); }
.ko-acc[open] > summary .ko-acc-ic svg { transform: rotate(180deg); }
.ko-acc-body { padding: 0 0 32px; }
.ko-acc-body > div > h3:first-child { margin-top: 0; }
.ko-sub-acc { border: 1px solid var(--ko-line); background: var(--ko-glass); padding: 0 16px; margin: 0 0 8px; }
.ko-sub-acc > summary, .ko-assumption-group > summary, .ko-confirm-more > summary {
  list-style: none; cursor: pointer; padding: 12px 0; color: #fff; font-weight: 700; min-height: 44px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.ko-sub-acc > summary::-webkit-details-marker, .ko-assumption-group > summary::-webkit-details-marker, .ko-confirm-more > summary::-webkit-details-marker { display: none; }
.ko-sub-acc > summary::after, .ko-assumption-group > summary::after, .ko-confirm-more > summary::after { content: "+"; color: var(--ko-accent); font-weight: 800; font-size: 18px; line-height: 1; }
.ko-sub-acc[open] > summary::after, .ko-assumption-group[open] > summary::after, .ko-confirm-more[open] > summary::after { content: "−"; }
.ko-sub-acc[open] > summary { border-bottom: 1px solid var(--ko-line); margin-bottom: 12px; }

/* Comparison grid, as .cmpx on idomobile.pl */
.ko-cmpx { display: grid; gap: 8px; }
.ko-cx-head, .ko-cx-row { display: grid; grid-template-columns: minmax(0, .85fr) repeat(4, minmax(0, 1fr)); align-items: stretch; }
.ko-cx-head span { padding: 0 16px 6px; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--ko-muted); }
.ko-cx-head .ko-cx-app { color: var(--ko-accent); background: none; }
.ko-cx-row { background: var(--ko-glass); border: 1px solid var(--ko-line); }
.ko-app .ko-cx-row h4 { margin: 0; padding: 16px; font-size: 15px; line-height: 1.35; display: flex; align-items: center; }
.ko-cx { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; border-left: 1px solid var(--ko-line); min-width: 0; }
.ko-cx-app { background: rgba(0, 171, 89, .08); border-left-color: var(--ko-accent-line); }
.ko-cx p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ko-on); }
.ko-cx-app p { color: #fff; }
.ko-cx-num { color: #fff; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ko-cmpx .ko-note { margin: 6px 0 0; }

/* Tables inside the details */
.ko-scroll { overflow-x: auto; margin: 0 0 18px; }
.ko-table { border-collapse: collapse; width: 100%; font-size: 14px; }
.ko-table caption { text-align: left; font-family: var(--ko-head); font-weight: 800; padding: 6px 0 10px; color: #fff; }
.ko-table th, .ko-table td { border-bottom: 1px solid var(--ko-line); padding: 10px 12px; text-align: left; vertical-align: top; }
.ko-table thead th { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ko-muted); white-space: nowrap; }
.ko-table th[scope=row] { font-weight: 700; color: #fff; }
.ko-num { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ko-row-ido > * { background: rgba(0, 171, 89, .06); }
.ko-detail-row > td { background: #0c0c0e; }
.ko-details { padding: 4px 0 8px; }
.ko-current > * { background: rgba(0, 171, 89, .06); font-weight: 700; color: #fff; }
.ko-src { list-style: none; padding: 0; margin: 0; font-size: 12.5px; color: var(--ko-muted); }
.ko-src li + li { margin-top: 4px; }

.ko-conf { font-size: 11px; font-weight: 700; letter-spacing: .5px; padding: 1px 6px; white-space: nowrap; }
.ko-conf-official { color: #6fdc9f; background: rgba(0, 171, 89, .12); }
.ko-conf-soft { color: #f2cf7a; background: rgba(242, 180, 64, .1); }
.ko-conf-estimate { color: #f2b07a; background: rgba(242, 140, 64, .1); }
.ko-conf-unverified { color: #ff8f8f; background: rgba(255, 107, 107, .1); }

.ko-dl { display: grid; grid-template-columns: max-content 1fr; gap: 1px; background: var(--ko-line); border: 1px solid var(--ko-line); }
.ko-dl dt, .ko-dl dd { background: var(--ko-panel); padding: 10px 14px; margin: 0; }
.ko-dl dt { color: var(--ko-muted); font-size: 14px; }
.ko-dl dd { font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }

.ko-assumption-group { border: 1px solid var(--ko-line); background: var(--ko-glass); padding: 0 16px; margin: 0 0 8px; }
.ko-assumptions input[type=text] { width: 10ch; padding: 6px 8px; min-height: 36px; }
.ko-overridden > * { background: rgba(242, 180, 64, .08); }
.ko-confirm li { margin-bottom: 8px; }

/* Footer of the result */
.ko-share { margin-top: 36px; }
.ko-share .ko-actions { margin-top: 0; }
.ko-copy-status { color: var(--ko-accent); font-size: 14px; min-height: 1.4em; margin: 10px 0 0; }
.ko-disclosure { color: var(--ko-muted); font-size: 13.5px; border-top: 1px solid var(--ko-line); padding-top: 16px; margin-top: 16px; max-width: 90ch; }

@media (max-width: 960px) {
  .ko-wiz { grid-template-columns: minmax(0, 1fr); }
  .ko-aside { position: static; }
  .ko-aside-steps, .ko-aside-get:not(.ko-aside-first) { display: none; }
}

@media (max-width: 860px) {
  .ko-cx-head { display: none; }
  .ko-cx-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ko-app .ko-cx-row h4 { grid-column: 1 / -1; padding: 14px 14px 4px; }
  .ko-cx { border-left: none; padding: 10px 14px 14px; }
  .ko-cx::before { content: attr(data-l); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ko-muted); }
  .ko-cx-app { border-left: 1px solid var(--ko-accent-line); }
  .ko-cx-app::before { color: var(--ko-accent); }
}

@media (max-width: 640px) {
  .ko-step { padding: 26px 18px 22px; }
  .ko-app .ko-field-big input[type=text] { width: 180px; font-size: 28px; min-height: 60px; }
  .ko-choice-grid, .ko-choice-grid-2 { grid-template-columns: minmax(0, 1fr); }
  .ko-choice { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 12px; padding: 14px 44px 14px 14px; min-height: 56px; }
  .ko-choice-ic { width: 36px; height: 36px; margin: 0; }
  .ko-choice-t { flex: 1; }
  .ko-choice-h { flex-basis: 100%; }
  .ko-choice-mark { top: 50%; margin-top: -10px; right: 14px; }
  .ko-nav-main { margin-left: 0; width: 100%; }
  .ko-grid2 { grid-template-columns: minmax(0, 1fr); }
  .ko-nav-main .ko-btn { flex: 1; }
  .ko-hero { padding: 28px 18px 22px; }
  .ko-hero-lead { font-size: 16.5px; }
  .ko-tiles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ko-tile { padding: 14px 14px 16px; }
  .ko-tile-hero, .ko-tile:only-child { grid-column: 1 / -1; }
  .ko-tile b { font-size: 22px; }
  .ko-tile-hero b { font-size: 28px; }
  .ko-bar { grid-template-columns: minmax(0, 1fr) auto; }
  .ko-bar-label { grid-column: 1; grid-row: 1; }
  .ko-bar-value { grid-column: 2; grid-row: 1; }
  .ko-bar-track { grid-column: 1 / -1; grid-row: 2; }
  .ko-bar-note, .ko-bar-parts { grid-column: 1 / -1; }
  .ko-dl { grid-template-columns: 1fr; }
  .ko-dl dd { padding-top: 0; }
  .ko-acc-t b { font-size: 16.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .ko-acc-ic, .ko-acc-ic svg, .ko-card, .ko-btn, .ko-btn svg, .ko-choice, .ko-preset, .ko-toggle span { transition: none; }
}

@media print {
  .topbar, nav, #mnav, .breadcrumb, footer, .popup-overlay, .ko-actions, .ko-share, .ko-link-btn, .ko-acc-ic { display: none !important; }
  .ko-app { color: #000; background: #fff; max-width: none; padding: 0; }
  .ko-app *, .ko-app *::before { color: #000 !important; background: transparent !important; border-color: #bbb !important; box-shadow: none !important; }
  .ko-bar-fill, .ko-bar-accent .ko-bar-fill, .ko-hero::before, .ko-cx-app { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ko-bar-fill { background: #888 !important; }
  .ko-seg, .ko-sw { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ko-g-platform { background: #3987e5 !important; } .ko-g-payments { background: #d95926 !important; }
  .ko-g-marketplaces { background: #199e70 !important; } .ko-g-apps { background: #c98500 !important; }
  .ko-g-upkeep { background: #d55181 !important; }
  .ko-bar-accent .ko-bar-fill { background: #00ab59 !important; }
  .ko-bar-today .ko-bar-fill { background: transparent !important; border-color: #888 !important; }
  .ko-hero::before { background: #000 !important; }
  .ko-app input[type=text] { border: 0; padding: 0; }
  .ko-hero, .ko-section > figure, .ko-cx-row, .ko-card { break-inside: avoid; }
}