@property --orbit-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes border-orbit {
  to { --orbit-angle: 360deg; }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111218;
  --line: #2b2d37;
}
:root[data-theme="dark"] body {
  min-height: 100vh;
  background:
    radial-gradient(ellipse 74rem 42rem at 83% -11%, rgba(113, 96, 218, .13), transparent 70%),
    radial-gradient(ellipse 58rem 34rem at 6% 25%, rgba(82, 92, 148, .08), transparent 68%),
    #111218;
  color: #f4f5fa;
}
:root[data-theme="dark"] .brand { color: #f4f5fa; }
:root[data-theme="dark"] .brand-description { color: #a9adba; }
:root[data-theme="dark"] .live-pill {
  border-color: #363844;
  background: rgba(255,255,255,.045);
  color: #c4c7d1;
}
:root[data-theme="dark"] .section-head h2 { color: #f4f5fa; }
:root[data-theme="dark"] .section-count { color: #888d9b; }
:root[data-theme="dark"] .sort-note span { color: #f4f5fa; }
:root[data-theme="dark"] footer a { color: #f4f5fa; }

.topbar-actions { display: flex; align-items: center; gap: 11px; flex: none; }
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid #dfe2e6;
  border-radius: 999px;
  background: #fff;
  color: #333741;
  font-size: .76rem;
  font-weight: 700;
  white-space: nowrap;
  transition: border-color .22s ease, background .22s ease, color .22s ease, transform .22s ease;
}
.theme-toggle:hover { transform: translateY(-1px); border-color: #a99aff; }
.theme-toggle:focus-visible { outline: 3px solid #9d8bff; outline-offset: 4px; }
.theme-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
:root[data-theme="dark"] .theme-toggle { border-color: #393b49; background: #1b1d26; color: #ececf4; }
:root[data-theme="dark"] .theme-toggle:hover { border-color: #a092ff; background: #222430; }
:root[data-theme="dark"] .theme-icon-moon { display: none; }
:root:not([data-theme="dark"]) .theme-icon-sun { display: none; }

.topbar {
  height: auto;
  min-height: 0;
  align-items: flex-start;
  gap: 30px;
  padding: 28px 0 27px;
}

.brand-cluster h1 {
  font-size: inherit;
  line-height: 1;
  margin: 0;
}

.brand {
  width: max-content;
  gap: 0;
  font: 800 clamp(3.35rem, 5.6vw, 4.35rem)/.9 Manrope, sans-serif;
  letter-spacing: -.085em;
}

.brand-wordmark {
  display: inline-flex;
  align-items: baseline;
  color: inherit;
}


.brand-description {
  max-width: 1060px;
  text-wrap: pretty;
  margin-top: 14px;
  color: #60666f;
  font-size: clamp(.95rem, 1.25vw, 1.08rem);
  line-height: 1.5;
}

.topbar > .live-pill { margin-top: 14px; }
.ranking { padding-top: 29px; }
.section-head { margin-bottom: 20px; }

.offer-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; gap: 16px; }
.offer-card,
.offer-card-featured {
  grid-column: auto;
  min-height: 356px;
  border: 4px solid #343747;
  color: #fff;
  background:
    radial-gradient(circle at 83% 8%, rgba(145, 124, 255, .13), transparent 36%),
    radial-gradient(circle at 18% 85%, rgba(200, 250, 105, .035), transparent 39%),
    linear-gradient(120deg, #20222d 0%, #191b24 67%, #1d1c29 100%);
}

.offer-card::before {
  content: "";
  position: absolute;
  inset: -40% -15% auto auto;
  width: 75%;
  height: 190%;
  transform: rotate(26deg);
  background: linear-gradient(90deg, transparent, rgba(114, 93, 238, .13), rgba(200, 250, 105, .045), transparent);
  pointer-events: none;
}

.offer-card:is(:hover, :focus-visible, .is-in-view) {
  border-color: transparent;
  background:
    radial-gradient(circle at 83% 8%, rgba(145, 124, 255, .19), transparent 39%) padding-box,
    linear-gradient(120deg, #222431, #1a1c27 67%, #221f31) padding-box,
    conic-gradient(from var(--orbit-angle), #73689f 0deg 225deg, #aa94ff 262deg, #dfceff 288deg, #e2ff97 317deg, #bb9dff 342deg, #73689f 360deg) border-box;
  box-shadow: 0 22px 48px rgba(26, 22, 56, .25), 0 0 0 1px rgba(180, 159, 255, .55), 0 0 40px rgba(149, 122, 255, .37);
  animation: border-orbit 2.5s linear infinite;
}

.offer-card .money-line strong {
  position: relative;
  font-size: clamp(5rem, 10vw, 9rem);
  font-variant-numeric: tabular-nums;
}
.offer-card .money-line strong::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -9px;
  height: 5px;
  border-radius: 10px;
  background: linear-gradient(90deg, #c8fa69, #d9ff99 45%, #a895ff);
  box-shadow: 0 0 16px rgba(200, 250, 105, .34);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  transition: transform .8s cubic-bezier(.2, .75, .2, 1), opacity .2s ease;
}
.offer-card:is(:hover, :focus-visible, .is-in-view) .money-line strong::after {
  transform: scaleX(1);
  opacity: 1;
}
.card-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  grid-template-areas: "logo breakdown" "name breakdown" "amount breakdown";
  grid-template-rows: auto auto auto;
  column-gap: clamp(28px, 5vw, 72px);
  align-content: center;
  align-items: center;
}
.card-main .bank-identity { grid-area: logo; }
.card-main .offer-name { grid-area: name; margin-top: 21px; }
.card-main .money-line { grid-area: amount; }
.card-offer-info {
  grid-area: breakdown;
  display: flex;
  flex-direction: column;
  align-self: center;
  gap: 21px;
  min-width: 0;
}
.card-breakdown {
  display: flex;
  flex-direction: column;
  gap: 17px;
  padding: 0;
  border: 0;
  background: none;
}
.card-breakdown-row {
  display: grid;
  grid-template-columns: 75px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  padding: 0;
  border: 0;
}
.card-breakdown-row strong {
  font: 800 1.27rem Manrope, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.045em;
  line-height: 1.1;
  white-space: nowrap;
}
.card-breakdown-row > span { color: #c8c8d5; font-size: .85rem; line-height: 1.42; }
.offer-card .rank { color: #aaa9c7; }
.offer-card .card-deadline { color: #c8c8d5; }
.offer-card .offer-name { color: #b7b8c5; }
.card-details {
  appearance: none;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  min-height: 62px;
  margin-top: 20px;
  padding: 15px 20px;
  border: 2px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(#20222d, #20222d) padding-box,
    linear-gradient(115deg, #776caf 0%, #a996ff 35%, #e2ff97 68%, #a996ff 100%) border-box;
  color: #f7f7fb;
  font: 800 1.16rem Manrope, sans-serif;
  text-align: center;
  cursor: pointer;
  transition: box-shadow .22s ease, transform .22s ease;
}
.card-details:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(155,132,255,.18), 0 0 0 1px rgba(226,255,151,.12); }
.card-details:focus-visible { outline: 3px solid #9d8bff; outline-offset: 4px; }
.bank-identity { width: max-content; }
.bank-logo {
  width: 220px;
  height: 70px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: none;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
.bank-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}
.mbank-logo { width: 200px; height: 74px; }
.ing-logo { width: 222px; padding: 9px 12px; border-radius: 4px; background: #fff; }
.alior-logo { width: 155px; height: 78px; }
.alior-logo img { height: 100%; }
.millennium-logo { width: 237px; height: 70px; background: transparent; }
.millennium-logo img { width: 100%; }
.pekao-logo { width: 260px; }

.glow-link {
  padding: 0;
  border: 2px solid transparent;
  background:
    linear-gradient(#1b1d26, #1b1d26) padding-box,
    conic-gradient(from var(--orbit-angle), #4c4e60 0deg 287deg, #9d8bff 311deg, #c8fa69 334deg, #a697ff 350deg, #4c4e60 360deg) border-box;
  animation: border-orbit 2.7s linear infinite;
  transition: box-shadow .25s ease, transform .25s ease;
}
.glow-link::before,
.glow-link::after { content: none; display: none; }
.glow-link span,
.glow-link:hover span { background: transparent; }
.glow-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 22px rgba(142, 122, 245, .22);
}

.reward-map {
  margin: 24px 28px 0;
  padding: 25px;
  border: 1px solid #e9ebef;
  border-radius: 22px;
  background: #fff;
}
.reward-map-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.reward-map-head h3 {
  margin: 5px 0 0;
  font: 800 1.6rem Manrope, sans-serif;
  letter-spacing: -.055em;
}
.reward-map-head > strong { font: 800 1rem Manrope, sans-serif; white-space: nowrap; }
.reward-track {
  height: 12px;
  margin: 22px 0 14px;
  overflow: hidden;
  border-radius: 100px;
  background: #e9ebf2;
}
.reward-track-fill {
  display: flex;
  gap: 4px;
  width: 100%;
  height: 100%;
  clip-path: inset(0 100% 0 0);
  animation: reward-fill 1.25s cubic-bezier(.2, .75, .2, 1) .12s forwards;
}
@keyframes reward-fill { to { clip-path: inset(0 0 0 0); } }
.reward-track-fill span { flex-basis: 0; min-width: 4px; background: #ab97ff; }
.reward-track-fill span:nth-child(2) { background: #c8fa69; }
.reward-track-fill span:nth-child(3) { background: #8cd9d5; }
.reward-track-fill span:nth-child(4) { background: #f2ba91; }
.reward-parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.reward-part {
  min-height: 97px;
  padding: 14px 15px;
  border: 1px solid #eef0f3;
  border-radius: 15px;
  background: #f7f8fa;
  display: flex;
  flex-direction: column;
  gap: 7px;
  transition: transform .25s ease, background .25s ease;
}
.reward-part:hover { transform: translateY(-2px); background: #f2f0ff; }
.reward-part strong { font: 800 1.35rem Manrope, sans-serif; letter-spacing: -.06em; }
.reward-part small { font-size: .65em; }
.reward-part > span { color: #777d87; font-size: .81rem; line-height: 1.4; }
.reward-part:nth-child(1) { border-top: 3px solid #ab97ff; }
.reward-part:nth-child(2) { border-top: 3px solid #c8fa69; }
.reward-part:nth-child(3) { border-top: 3px solid #8cd9d5; }
.reward-part:nth-child(4) { border-top: 3px solid #f2ba91; }

.steps.timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 13px;
  padding: 0 0 17px;
  border: 0;
}
.steps.timeline li:last-child { padding-bottom: 0; border: 0; }
.steps.timeline li:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 49px;
  bottom: -1px;
  left: 23px;
  width: 2px;
  background: #e1dffc;
}
.steps.timeline .step-number {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid #ded9ff;
  border-radius: 50%;
  background: #f0edff;
  color: #786afa;
}
.step-content {
  padding: 18px 20px 19px;
  border: 1px solid #e7e9ee;
  border-radius: 19px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(22,28,47,.025);
}
.step-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 11px; }
.step-meta > span { color: #8273e6; font: 800 .65rem Manrope, sans-serif; letter-spacing: .1em; }
.step-meta > strong {
  padding: 6px 10px;
  border-radius: 100px;
  background: #e8f8d1;
  color: #3a5321;
  font: 800 .77rem Manrope, sans-serif;
  white-space: nowrap;
}
.steps.timeline h4 { margin: 0 0 6px; }
.steps.timeline p { margin: 0; }
.timeline-note { margin: 14px 0 0 61px; color: #9a9ea6; font-size: .72rem; line-height: 1.5; }

@media (max-width: 980px) {
  .card-main {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "logo" "name" "amount" "breakdown";
  }
  .card-offer-info { width: 100%; margin-top: 24px; }
}

@media (max-width: 760px) {
  .topbar { padding: 22px 0 23px; }
  .brand { gap: 0; font-size: clamp(3rem, 11vw, 3.55rem); }
  .brand-description { max-width: 590px; margin-top: 12px; font-size: .94rem; }
  .topbar { align-items: center; gap: 16px; }
  .topbar-actions { gap: 0; }
  .topbar-actions .live-pill { display: none; }
  .ranking { padding-top: 23px; }
  .offer-card,
  .offer-card-featured { min-height: 312px; padding: 23px; }
  .offer-card .money-line strong { font-size: clamp(4.2rem, 14vw, 7rem); }
  .card-main { margin: 18px 0; }
  .card-main .offer-name { margin-top: 18px; }
  .card-breakdown {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px 20px;
    margin-top: 0;
  }
  .card-breakdown-row { display: flex; flex-direction: column; gap: 5px; padding: 0; }
  .card-breakdown-row strong { font-size: 1.12rem; }
  .card-breakdown-row > span { font-size: .78rem; }
}

@media (max-width: 730px) {
  .reward-map { margin: 15px 15px 0; padding: 20px; }
  .reward-map-head h3 { font-size: 1.35rem; }
  .reward-map-head > strong { font-size: .82rem; }
  .reward-parts { grid-template-columns: minmax(0, 1fr); }
  .reward-part { min-height: 70px; padding: 12px 14px; flex-direction: row; align-items: center; gap: 14px; }
  .reward-part strong { flex: 0 0 72px; font-size: 1.2rem; }
  .step-content { padding: 16px; }
}

@media (max-width: 420px) {
  .card-breakdown { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .card-breakdown-row { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 12px; }
  .money-line { gap: 6px; }
  .offer-card .money-line strong { font-size: clamp(3.2rem, 15vw, 4.7rem); }
  .up-to { font-size: .65rem; }
  .currency { font-size: 1.1rem; }
  .bank-logo { width: 190px; height: 62px; }
  .mbank-logo { width: 178px; height: 68px; }
  .ing-logo { width: 190px; }
  .alior-logo { width: 134px; height: 72px; }
  .millennium-logo { width: 205px; }
  .pekao-logo { width: 218px; }
}

@media (prefers-reduced-motion: reduce) {
  .offer-card:hover,
  .offer-card:focus-visible,
  .offer-card.is-in-view,
  .glow-link { animation: none; }
  .offer-card .money-line strong::after { transition: none; }
  .reward-track-fill { animation: none; clip-path: inset(0 0 0 0); }
}

:root[data-theme="dark"] .offer-dialog {
  color-scheme: dark;
  color: #f4f5fa;
  background: #151720;
  border-color: #303340;
}
:root[data-theme="dark"] .detail-top {
  background: #151720;
  border-bottom-color: #303340;
}
:root[data-theme="dark"] .detail-label,
:root[data-theme="dark"] .detail-section-head > span,
:root[data-theme="dark"] .step-number,
:root[data-theme="dark"] .step-meta > span { color: #aa9cff; }
:root[data-theme="dark"] .close-detail {
  color: #e7e8ef;
  background: #292c37;
}
:root[data-theme="dark"] .close-detail:hover { background: #363a48; }
:root[data-theme="dark"] .close-detail span {
  color: #f4f5fa;
  background: #1c1f29;
}
:root[data-theme="dark"] .reward-map {
  background: #191b25;
  border-color: #343743;
}
:root[data-theme="dark"] .reward-track { background: #2c2f3b; }
:root[data-theme="dark"] .reward-part {
  background: #20232e;
  border-color: #363945;
}
:root[data-theme="dark"] .reward-part:hover { background: #292a3b; }
:root[data-theme="dark"] .reward-part:nth-child(1) { border-top-color: #ab97ff; }
:root[data-theme="dark"] .reward-part:nth-child(2) { border-top-color: #c8fa69; }
:root[data-theme="dark"] .reward-part:nth-child(3) { border-top-color: #8cd9d5; }
:root[data-theme="dark"] .reward-part:nth-child(4) { border-top-color: #f2ba91; }
:root[data-theme="dark"] .reward-part > span,
:root[data-theme="dark"] .steps p,
:root[data-theme="dark"] .notice p { color: #bcc0cc; }
:root[data-theme="dark"] .steps.timeline li:not(:last-child)::before { background: #454059; }
:root[data-theme="dark"] .steps.timeline .step-number {
  color: #b8adff;
  background: #29263a;
  border-color: #494263;
}
:root[data-theme="dark"] .step-content {
  background: #1c1f29;
  border-color: #363945;
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
}
:root[data-theme="dark"] .step-meta > strong {
  color: #d8f7aa;
  background: #2d3825;
}
:root[data-theme="dark"] .detail-aside { background: #1c1f29; }
:root[data-theme="dark"] .fact { border-bottom-color: #363945; }
:root[data-theme="dark"] .fact > span,
:root[data-theme="dark"] .notice > span { color: #9ea4b2; }
:root[data-theme="dark"] .source-link { color: #c9c7e4; }
:root[data-theme="dark"] .verified,
:root[data-theme="dark"] .timeline-note { color: #9298a7; }

:root[data-theme="light"] .offer-card {
  color: #20232d;
  border-color: #e2e0eb;
  background:
    radial-gradient(circle at 83% 8%, rgba(155, 135, 245, .19), transparent 38%),
    radial-gradient(circle at 18% 85%, rgba(190, 227, 125, .14), transparent 42%),
    linear-gradient(120deg, #ffffff 0%, #faf9fe 67%, #f4f1fc 100%);
  box-shadow: 0 14px 32px rgba(35, 31, 79, .055);
}
:root[data-theme="light"] .offer-card::before {
  background: linear-gradient(90deg, transparent, rgba(132, 108, 230, .06), rgba(184, 221, 113, .065), transparent);
}
:root[data-theme="light"] .offer-card:is(:hover, :focus-visible, .is-in-view) {
  border-color: transparent;
  background:
    radial-gradient(circle at 83% 8%, rgba(151, 126, 248, .21), transparent 40%) padding-box,
    linear-gradient(120deg, #ffffff 0%, #f9f8ff 67%, #f1edfc 100%) padding-box,
    conic-gradient(from var(--orbit-angle), #d8d1f2 0deg 225deg, #a18bfa 262deg, #7964e9 288deg, #b7dc78 317deg, #a88ff6 342deg, #d8d1f2 360deg) border-box;
  box-shadow: 0 22px 48px rgba(43, 33, 105, .12), 0 0 0 1px rgba(149, 119, 236, .35), 0 0 34px rgba(149, 122, 255, .18);
}
:root[data-theme="light"] .offer-card .rank,
:root[data-theme="light"] .offer-card .card-deadline { color: #697082; }
:root[data-theme="light"] .offer-card .offer-name { color: #545d6d; }
:root[data-theme="light"] .offer-card .card-breakdown-row > span { color: #414a5c; }
:root[data-theme="light"] .offer-card .featured-tag { color: #644ab5; }
:root[data-theme="light"] .offer-card .money-line strong::after {
  background: linear-gradient(90deg, #755bd7, #a692f2 53%, #91c84b);
  box-shadow: 0 0 14px rgba(137, 105, 221, .2);
}
:root[data-theme="light"] .offer-card .card-details {
  color: #25283a;
  background:
    linear-gradient(#fbfaff, #fbfaff) padding-box,
    linear-gradient(115deg, #9587cf 0%, #a996ff 35%, #b3d76e 68%, #a996ff 100%) border-box;
}
:root[data-theme="light"] .offer-card .card-details:hover {
  box-shadow: 0 10px 28px rgba(111, 86, 194, .16), 0 0 0 1px rgba(128, 108, 210, .18);
}

:root[data-theme="light"] .detail-hero {
  border: 2px solid transparent;
  color: #20232d;
  background:
    radial-gradient(circle at 83% 10%, rgba(155, 135, 245, .2), transparent 40%) padding-box,
    linear-gradient(130deg, #ffffff 0%, #faf9fe 68%, #f3f0fc 100%) padding-box,
    linear-gradient(130deg, #e4e1ee, #d7cff4 70%, #e7efda) border-box;
  box-shadow: 0 15px 35px rgba(43, 33, 105, .065);
}
:root[data-theme="light"] .detail-amount > span { color: #654cb8; }
:root[data-theme="light"] .detail-hero .glow-link {
  color: #25283a;
  background:
    linear-gradient(#fbfaff, #fbfaff) padding-box,
    conic-gradient(from var(--orbit-angle), #cfc7ec 0deg 287deg, #9179e9 311deg, #a1cf5a 334deg, #a996ee 350deg, #cfc7ec 360deg) border-box;
}