.ptf-widget {
  --ptf-purple: #6C5CFC;
  --ptf-ink: #1B1F2E;
  --ptf-muted: #4A5063;
  --ptf-cream: #FAF7F2;
  --ptf-line: #E7E5EE;
  --ptf-tint: #F1F0FF;
  --ptf-check: #F5A524;
  --ptf-tabs-gap: 4px;
  display: flex;
  gap: 4px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 3px;
  background: #fff;
  border: 1px solid var(--ptf-line);
  border-radius: 22px;
  box-shadow: 0 20px 50px -20px rgba(27,31,46,.18);
  font-family: inherit;
  color: var(--ptf-ink);
  box-sizing: border-box;
}

.ptf-widget * { box-sizing: border-box; }
.ptf-tabs { display: flex; flex-direction: column; gap: var(--ptf-tabs-gap); flex: 0 0 290px; }
.ptf-tab {
  all: unset;
  box-sizing: border-box;
  position: relative;
  flex: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 12px;
  background: var(--ptf-cream);
  border: 1px solid var(--ptf-line);
  border-radius: 16px;
  color: var(--ptf-ink);
  text-align: center;
  transition: background .2s ease, color .2s ease;
}
.ptf-tab:hover { background: #F3EEE5; }
.ptf-hover-none .ptf-tab:not(.is-active):hover { transform: none; box-shadow: none; }
.ptf-hover-subtle .ptf-tab:not(.is-active) { transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.ptf-hover-subtle .ptf-tab:not(.is-active):hover { transform: translateY(-2px); box-shadow: 0 8px 18px -12px rgba(27,31,46,.35); }
.ptf-hover-scale .ptf-tab:not(.is-active) { transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.ptf-hover-scale .ptf-tab:not(.is-active):hover { transform: scale(1.015); }
.ptf-hover-glow .ptf-tab:not(.is-active) { transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.ptf-hover-glow .ptf-tab:not(.is-active):hover { box-shadow: 0 0 0 3px rgba(108,92,252,.10), 0 8px 22px -14px rgba(108,92,252,.55); }
.ptf-tab:focus-visible { outline: 3px solid var(--ptf-purple); outline-offset: 2px; }
.ptf-tab.is-active { background: var(--ptf-purple); border-color: var(--ptf-purple); color: #fff; }
.ptf-tab.is-active::after {
  content: "";
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  border: 10px solid transparent;
  border-left-color: var(--ptf-purple);
  border-right: 0;
}
.ptf-ico { font-size: 34px; line-height: 1; flex: none; }
.ptf-txt { display: flex; flex-direction: column; align-items: center; line-height: 1.25; }
.ptf-num { font-size: 13px; font-weight: 800; }
.ptf-name { font-size: 18px; font-weight: 800; }
.ptf-sub { font-size: 12.5px; opacity: .85; }
.ptf-panels { flex: 1; min-width: 0; padding: 56px 56px 56px 64px; display: flex; align-items: center; }
.ptf-panel { width: 100%; }
.ptf-panel[hidden] { display: none; }
.ptf-panel.is-active { animation: ptfIn .25s ease; }
@keyframes ptfIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
.ptf-badge { display: inline-block; padding: 8px 14px; border-radius: 999px; background: var(--ptf-tint); color: #4B5BF0; font-size: 14px; font-weight: 600; }
.ptf-panel h3 { margin: 22px 0 14px; font-size: 30px; line-height: 1.2; font-weight: 800; color: var(--ptf-ink); }
.ptf-panel p { margin: 0 0 30px; max-width: 540px; font-size: 17px; line-height: 1.65; color: var(--ptf-muted); }
.ptf-list { list-style: none; margin: 0; padding: 0; max-width: 560px; display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: row; gap: 16px 40px; }
.ptf-list li { position: relative; padding-left: 26px; font-size: 16.5px; color: var(--ptf-ink); }
.ptf-list li::before { content: ""; position: absolute; left: 2px; top: .35em; width: 6px; height: 11px; border: solid var(--ptf-check); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }

@media (max-width: 820px) {
  .ptf-widget { flex-direction: column; }
  .ptf-tabs { flex: none; flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; }
  .ptf-tab { flex: 0 0 78%; scroll-snap-align: start; padding: 14px 10px; }
  .ptf-tab.is-active::after { right: auto; left: 50%; top: auto; bottom: -10px; transform: translateX(-50%); border: 10px solid transparent; border-top-color: var(--ptf-purple); border-bottom: 0; }
  .ptf-panels { padding: 32px 22px 28px; }
  .ptf-panel h3 { font-size: 24px; }
}

@media (max-width: 480px) { .ptf-list { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ptf-panel.is-active { animation: none; } }