/* ===================================================================================
   console-flex.css — a 6 tartalmi oldal RUGALMAS újraépítése.
   Tulaj-döntés (2026-08-03): a ChatGPT képpont-fénykép (mockup-fidelity.css) KI van kapcsolva,
   mert túl apró volt és a tartalom kilógott. Ezek az oldalak most a Főoldalhoz hasonló rugalmas
   felületek: olvashatóak, nem vágnak, bírják a magyar szöveget, változó tartalommal is állnak.
   A styles.css (eredeti, olvasható konzol) + skin.css (sötét bőr + hero + építőelemek) adja az
   alapot; ez a fájl a lap-szintű ELRENDEZÉST teszi rugalmassá.
   Betöltve LEGUTOLJÁRA → azonos szelektornál nyer.
   =================================================================================== */

/* ===================================================================================
   OLVASHATÓSÁGI ALAP — a referenciafotó vizuális irány, nem fix képernyőmagasság.

   A skin.css végén lévő mért desktop-blokk szándékosan egyetlen 1122×1402 képre sűrítette a
   teljes Főoldalt. Ez jó összehasonlító képhez, de egy valódi vezérlőpulton 7–11 px-es
   szöveget és merev kártyamagasságokat eredményezett. Ez a legutoljára betöltött réteg
   visszaállítja a természetes görgetést, a kényelmes érintési célokat és a 14–16 px-es
   törzsszöveget, miközben a jóváhagyott színek, képek és komponensek megmaradnak.
   =================================================================================== */

body.skin2 {
  font-size: 15px;
}

body.skin2 .panel-note,
body.skin2 .desc-block,
body.skin2 .muted,
body.skin2 .welcome-details,
body.skin2 .welcome-details .welcome-body {
  font-size: 14px;
  line-height: 1.55;
}

body.skin2 .small,
body.skin2 small {
  font-size: 12.5px;
  line-height: 1.45;
}

body.skin2 .panel-head {
  margin-bottom: 14px;
}

body.skin2 .panel-head h2 {
  font-size: 19px;
  line-height: 1.25;
}

body.skin2 .panel-head h3,
body.skin2 .rail-live h3 {
  font-size: 16px;
  line-height: 1.3;
}

body.skin2 .sec-label,
body.beta.skin2 .view .sec-block .sec-label {
  margin-bottom: 12px;
  font-size: 15px;
  line-height: 1.35;
}

body.skin2 .btn {
  min-height: 42px;
  padding: 0 18px;
  border-radius: 8px;
  font-size: 14px;
}

body.skin2 .btn.small {
  min-height: 36px;
  padding: 0 14px;
  font-size: 13px;
}

body.skin2 input,
body.skin2 select,
body.skin2 textarea,
body.skin2 .voice-picker-btn {
  min-height: 42px;
  font-size: 14px;
}

body.skin2 .toggle-label b,
body.skin2 .list-row .lr-text b,
body.skin2 .goal-set .lr-text b {
  font-size: 14px;
  line-height: 1.35;
}

body.skin2 .toggle-label .small,
body.skin2 .list-row .lr-text small,
body.skin2 .list-row .lr-val,
body.skin2 .goal-set .small {
  font-size: 12.5px;
  line-height: 1.45;
}

body.skin2 .list-row {
  min-height: 52px;
  padding: 10px 8px;
}

body.skin2 .panel,
body.skin2 .sec-block {
  overflow: visible;
}

@media (min-width: 1101px) {
  body.skin2 {
    --sidenav-w: 220px;
    --card-pad: 22px;
    --radius: 14px;
    --radius-sm: 10px;
  }

  body.skin2 .shell {
    grid-template-columns: 220px minmax(0, 1fr);
    grid-template-rows: 72px minmax(0, 1fr);
  }

  body.skin2 .sidenav {
    width: 220px;
    padding: 18px 12px 14px;
  }

  body.skin2 .sidenav .brand {
    margin: 0 8px 18px;
  }

  body.skin2 .nav-main {
    gap: 3px;
  }

  body.skin2 .nav-item {
    min-height: 46px;
    padding: 0 12px;
    gap: 10px;
    border-radius: 9px;
    font-size: 14px;
  }

  body.skin2 .nav-item .nav-ic {
    width: 28px;
    height: 28px;
    font-size: 17px;
  }

  body.skin2 .topbar {
    min-height: 72px;
    height: 72px;
    padding: 0 24px;
    gap: 14px;
  }

  body.skin2 .topbar-search {
    flex-basis: 420px;
    height: 42px;
    border-radius: 10px;
  }

  body.skin2 .topbar-search input {
    font-size: 14px;
  }

  body.skin2 .live-pill-label {
    font-size: 12.5px;
  }

  body.skin2 .content {
    padding: 24px 26px 72px;
    overflow-x: clip;
  }

  body.skin2 .panel,
  body.skin2 .hero,
  body.skin2 .footer-cta {
    border-radius: 14px;
  }
}

/* ===================================================================================
   FŐOLDAL — folyó tartalom, rugalmas főoszlop és valóban olvasható kísérő sáv.
   =================================================================================== */

body.skin2 .overview-page .page-grid {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
  gap: 20px;
}

body.skin2 .overview-page .page-main,
body.skin2 .overview-page .page-rail {
  gap: 18px;
}

body.skin2 .overview-page .page-rail {
  position: sticky;
  top: 92px;
}

body.skin2 .overview-page .page-main > .hero.hero-home {
  height: auto;
  min-height: 390px;
  padding: 30px 28px 86px;
  border-radius: 14px;
}

body.skin2 .overview-page .hero-home .hero-copy {
  width: min(58%, 560px);
}

body.skin2 .overview-page .hero-home .eyebrow {
  margin-bottom: 10px;
  font-size: 12px;
}

body.skin2 .overview-page .hero-home .hero-title {
  max-width: 460px;
  margin-bottom: 12px;
  font-size: clamp(34px, 3.1vw, 44px);
  line-height: 1.08;
}

body.skin2 .overview-page .hero-home .hero-lead {
  max-width: 460px;
  margin-bottom: 20px;
  font-size: 15px;
  line-height: 1.55;
}

body.skin2 .overview-page .hero-home .hero-actions {
  flex-wrap: wrap;
  gap: 10px;
}

body.skin2 .overview-page .hero-home .hero-actions .btn {
  min-height: 42px;
  height: auto;
  padding: 0 17px;
  font-size: 14px;
}

/* A legacy varázslógomb önálló panelként kapott 18 px felső margót. A főoldali hero-ban már
   egy közös gombsor része, ezért ugyanarra az alapvonalra kell kerülnie a LIVE gombbal. */
body.skin2 .overview-page .hero-home .hero-actions #ovWizard {
  margin-top: 0;
}

body.skin2 .overview-page .hero-home .hero-art {
  background-size: min(56vw, 540px) min(56vw, 540px);
}

body.skin2 .hero-health {
  left: 18px;
  right: 18px;
  bottom: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 10px;
  background: rgba(3, 10, 23, .68);
  backdrop-filter: blur(8px);
}

body.skin2 .hero-health > span {
  grid-template-columns: 30px minmax(0, 1fr);
  column-gap: 8px;
}

body.skin2 .hero-health i {
  width: 30px;
  height: 30px;
  font-size: 15px;
}

body.skin2 .hero-health b {
  font-size: 11.5px;
  line-height: 1.2;
}

body.skin2 .hero-health small {
  font-size: 10.5px;
  line-height: 1.2;
}

body.skin2 .overview-page .account-panel,
body.skin2 .overview-page .home-toolkit-panel,
body.skin2 .overview-page .home-glance-panel,
body.skin2 .overview-page .home-bottom-grid > .panel,
body.skin2 .overview-page .page-rail > .panel {
  height: auto;
  min-height: 0;
}

body.skin2 .overview-page .account-panel {
  padding: 22px;
}

body.skin2 .overview-page .account-panel .hero-id {
  margin: 0 0 18px;
  gap: 14px;
}

body.skin2 .overview-page .account-panel .avatar-ring {
  width: 64px;
  height: 64px;
}

body.skin2 .overview-page .account-panel .acct-nick {
  font-size: 20px;
}

body.skin2 .overview-page .account-panel .acct-bio,
body.skin2 .overview-page .account-panel .small,
body.skin2 .overview-page .acct-note {
  font-size: 12.5px;
}

body.skin2 .overview-page .account-metrics {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

body.skin2 .overview-page .account-metrics > span {
  min-width: 0;
  min-height: 72px;
  padding: 12px;
  gap: 5px 9px;
  border-radius: 9px;
}

body.skin2 .overview-page .account-metrics i {
  font-size: 17px;
}

body.skin2 .overview-page .account-metrics b {
  font-size: 20px;
}

body.skin2 .overview-page .account-metrics small {
  font-size: 11.5px;
}

body.skin2 .overview-page .home-toolkit-panel,
body.skin2 .overview-page .home-glance-panel {
  padding: 22px;
}

body.skin2 .overview-page .toolkit-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

body.skin2 .overview-page .tile {
  height: auto;
  min-height: 136px;
  padding: 16px 12px 14px;
  gap: 10px;
  border-radius: 10px;
}

body.skin2 .overview-page .tile-ic {
  width: 52px;
  height: 52px;
  font-size: 24px;
}

body.skin2 .overview-page .tile b {
  font-size: 14px;
}

body.skin2 .overview-page .tile-open {
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 12px;
}

body.skin2 .overview-page .stat-grid {
  gap: 10px;
}

body.skin2 .overview-page .stat {
  min-height: 104px;
  padding: 16px 14px 28px;
  border-radius: 9px;
}

body.skin2 .overview-page .stat-k {
  font-size: 12px;
}

body.skin2 .overview-page .stat-v {
  font-size: 24px;
}

body.skin2 .home-bottom-grid {
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, .92fr);
  gap: 18px;
}

body.skin2 .overview-page .setup-card {
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 18px;
  padding: 22px;
}

body.skin2 .overview-page .setup-card h2 {
  font-size: 21px;
}

body.skin2 .setup-checklist {
  gap: 8px;
  margin-bottom: 14px;
  font-size: 13px;
}

body.skin2 .overview-page .setup-preview {
  width: 150px;
  min-height: 230px;
}

body.skin2 .text-link,
body.skin2 .home-news-row b,
body.skin2 .home-news-row small,
body.skin2 .home-news-row em {
  font-size: 12px;
}

body.skin2 .home-news-row {
  min-height: 68px;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 10px;
}

body.skin2 .overview-page .rail-live {
  min-height: 390px;
  padding: 22px;
}

body.skin2 .overview-page .rail-live .panel-note {
  min-height: 0;
}

body.skin2 .overview-page .levelup-card {
  min-height: 280px;
  padding: 22px;
}

body.skin2 .overview-page .levelup-card .levelup-copy {
  max-width: 190px;
}

body.skin2 .overview-page .levelup-card h3 {
  font-size: 18px;
}

body.skin2 .overview-page .levelup-art {
  width: 170px;
  height: 160px;
}

body.skin2 .overview-page .list-row,
body.skin2 .overview-page .list-row small {
  font-size: 12.5px;
}

body.skin2 .overview-page .lr-ic {
  width: 32px;
  height: 32px;
}

body.skin2 .overview-page > .footer-cta {
  min-height: 88px;
  margin-top: 20px;
  padding: 18px 22px;
}

body.skin2 .overview-page > .footer-cta b {
  font-size: 18px;
}

body.skin2 .overview-page > .footer-cta span {
  font-size: 13.5px;
}

/* --- közös: a 6 oldal hero-ja a skin.css .hero-ját használja; a hero-beli jellemző-chipek --- */
body.skin2 .widget-hero-features {
  display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 18px;
  position: static; inset: auto; grid-template-columns: none;
}
body.skin2 .widget-hero-features > span {
  display: flex; align-items: center; gap: 9px; min-width: 0;
}
body.skin2 .widget-hero-features > span > i,
body.skin2 .widget-hero-features > span .ic { color: var(--eyebrow); font-size: 18px; flex: none; }
body.skin2 .widget-hero-features b { font-size: 13.5px; display: block; }
body.skin2 .widget-hero-features small { color: var(--muted); font-size: 12px; display: block; }

/* ===================================================================================
   WIDGETEK — fő tartalom + jobb kísérő oszlop, rugalmasan
   =================================================================================== */
body.skin2 .widgets-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
  align-items: start;
}
body.skin2 .widgets-main {
  grid-column: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
body.skin2 .widgets-main > .hero,
body.skin2 .widgets-main > .widgets-control-panel,
body.skin2 .widgets-main > .widgets-bottom-grid { margin-bottom: 0; }
body.skin2 .widgets-rail {
  grid-column: 2; grid-row: 1;
  display: flex; flex-direction: column; gap: 18px; position: sticky; top: 88px;
}
body.skin2 .widgets-rail > .panel { margin-bottom: 0; }

/* Széles képernyőn a két widget-oszlop külön munkaterület: a hosszú beállítások és a
   jobb oldali előnézet egymástól függetlenül görgethetők. Tablet/mobil alatt a későbbi
   töréspont visszaállítja a természetes, egyoszlopos oldalgörgetést. */
@media (min-width: 1101px) {
  body.skin2 .widgets-layout {
    height: calc(100dvh - 120px);
    min-height: 0;
    overflow: hidden;
    align-items: stretch;
  }
  body.skin2 .widgets-main,
  body.skin2 .widgets-rail {
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
  }
  body.skin2 .widgets-main { padding: 0 8px 18px 0; }
  body.skin2 .widgets-rail {
    position: static;
    top: auto;
    padding: 0 5px 18px 0;
  }
}

body.skin2 .widget-preview-card .widget-preview-screen {
  height: 184px;
  display: grid;
  place-items: center;
  margin: 14px 0;
  overflow: hidden;
  border: 1px solid #2b3a59;
  border-radius: 10px;
  background: radial-gradient(circle at center, rgba(145, 35, 176, .34), transparent 48%), #07111f;
}
body.skin2 .widget-preview-card .preview-heart {
  width: 108px;
  height: 108px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  border: 2px solid #ff4da6;
  border-radius: 16px;
  color: #ff63b2;
  box-shadow: 0 0 28px rgba(255, 55, 167, .35);
}
body.skin2 .widget-preview-card .preview-heart i { font-size: 30px; }
body.skin2 .widget-preview-card .preview-heart b { font-size: 18px; }
body.skin2 .widget-preview-card .btn + .btn { margin-top: 9px; }

body.skin2 .widget-quick-card button,
body.skin2 .widget-quick-card a {
  width: 100%;
  min-height: 46px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
body.skin2 .widget-quick-card button:last-child,
body.skin2 .widget-quick-card a:last-child { border-bottom: 0; }
body.skin2 .widget-quick-card button > i:first-child,
body.skin2 .widget-quick-card a > i:first-child { color: var(--eyebrow); font-size: 18px; }
body.skin2 .widget-quick-card button > i:last-child,
body.skin2 .widget-quick-card a > i:last-child { color: var(--muted); }

body.skin2 .widgets-rail .theme-picker {
  grid-template-columns: 1fr;
  gap: 9px;
}
body.skin2 .widgets-rail .theme-opt {
  min-width: 0;
  grid-template-columns: 46px minmax(0, 1fr);
  grid-template-areas: "sw name" "sw desc";
  gap: 3px 10px;
  padding: 11px;
}
body.skin2 .widgets-rail .theme-opt b { font-size: 13px; line-height: 1.3; }
body.skin2 .widgets-rail .theme-opt .small { font-size: 11.5px; }
body.skin2 .widget-pro-tip { background: radial-gradient(100% 80% at 100% 0%, rgba(80, 52, 221, .24), transparent), #0b1526; }

body.skin2 .widgets-main > .hero {
  min-height: 410px;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 40%);
}

body.skin2 .widgets-main > .hero .widget-hero-features {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* A vezérlőpanel szekciói (Célértékek, Nyereményjáték, Csapatverseny, téma): a beviteli mezők
   AUTO-FIT rácson tördelnek, nem szűk fix oszlopokban → a magyar címke sosem vágódik le. */
body.skin2 .widgets-control-panel > .sec-block { margin-bottom: 22px; }
body.skin2 .widgets-control-panel > .sec-block:last-child { margin-bottom: 0; }
body.skin2 .widgets-control-panel .gv-grid,
body.skin2 .widgets-control-panel .team-grid,
body.skin2 .widgets-control-panel > .sec-block > .text-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px 16px;
}
/* A címkék teljesen kiírva (tördelnek, nem vágnak). */
body.skin2 .widgets-control-panel label,
body.skin2 .widgets-control-panel .field > span,
body.skin2 .widgets-control-panel .toggle-label b {
  white-space: normal; overflow: visible; text-overflow: clip;
}

/* Nyereményjáték + Csapatverseny: valódi beállításkártyák. A korábbi általános
   AUTO-FIT szabály közvetlenül az ikonokat, szövegeket és mezőket rakta külön
   oszlopokba, ezért a két űrlap vizuálisan szétesett. Itt a kártya a rendezési
   egység, a hozzá tartozó mezők pedig egy közös belső rácsban maradnak. */
body.skin2 .widgets-control-panel > .widget-settings-section {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 12px;
  padding: 18px;
}
body.skin2 .widgets-control-panel > .widget-settings-section > .sec-label,
body.skin2 .widgets-control-panel > .widget-settings-section > p,
body.skin2 .widgets-control-panel > .widget-settings-section > .toggle-row,
body.skin2 .widgets-control-panel > .widget-settings-section > .form-msg {
  grid-column: 1 / -1;
}
body.skin2 .widgets-control-panel > .widget-settings-section > .sec-label,
body.skin2 .widgets-control-panel > .widget-settings-section > p { margin: 0; }
body.skin2 .widgets-control-panel > .widget-settings-section > p { max-width: none; }
body.skin2 .widgets-control-panel > .widget-settings-section > .toggle-row {
  justify-content: flex-start;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(35, 50, 76, .46);
}
body.skin2 .widgets-control-panel > .widget-settings-section > .toggle-row label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 650;
}
body.skin2 .widgets-control-panel > .widget-settings-section > .goal-set,
body.skin2 .widgets-control-panel > .widget-settings-section > .link-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-content: start;
  align-items: start;
  gap: 10px 11px;
  min-width: 0;
  min-height: 100%;
  margin: 0;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #101b2c;
}
body.skin2 .widgets-control-panel > .widget-settings-section > .link-row:hover {
  border-color: var(--line-2);
  background: #122037;
}
body.skin2 .widgets-control-panel > .widget-settings-section > :is(.goal-set, .link-row) > .ic {
  grid-column: 1;
  grid-row: 1;
}
body.skin2 .widgets-control-panel > .widget-settings-section > :is(.goal-set, .link-row) > .lr-text {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
body.skin2 .widgets-control-panel > .widget-settings-section .lr-text b {
  font-size: 14px;
  line-height: 1.35;
}
body.skin2 .widgets-control-panel > .widget-settings-section .lr-text .small {
  font-size: 12px;
  line-height: 1.45;
}
body.skin2 .widgets-control-panel .widget-setting-fields {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 9px;
  width: 100%;
  min-width: 0;
  margin-top: 2px;
}
body.skin2 .widgets-control-panel .widget-setting-fields > :is(input, select) {
  width: 100%;
  min-width: 0;
}
body.skin2 .widgets-control-panel .widget-setting-fields > .btn {
  grid-column: 1 / -1;
  width: 100%;
}
body.skin2 .widgets-control-panel .widget-setting-fields:has(#teamRoundMin) > input {
  grid-column: 1 / -1;
}

@media (max-width: 700px) {
  body.skin2 .widgets-control-panel > .widget-settings-section {
    grid-template-columns: minmax(0, 1fr);
    padding: 14px;
  }
}

/* Widget-katalógus: olvasható kártyák, minden widget látszik (a rács a hely szerint tördel). */
body.skin2 .widgets-page #widgetList {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 4px;
}
body.skin2 .widgets-page #widgetList .widget-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: #0f1a2c;
  height: auto; overflow: visible;
}
body.skin2 .widgets-page #widgetList .wc-head { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 650; }
body.skin2 .widgets-page #widgetList .wc-head .ic { width: 34px; height: 34px; font-size: 17px; flex: none; }
body.skin2 .widgets-page #widgetList .wc-desc { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
body.skin2 .widgets-page #widgetList .wc-demo { height: 150px; overflow: hidden; border-radius: 10px; background: #070d19; }
body.skin2 .widgets-page #widgetList .wc-demo iframe { width: 100%; height: 100% !important; border: 0; transform: none; filter: none; }
body.skin2 .widgets-page #widgetList .wc-link { display: flex; align-items: center; gap: 8px; }
body.skin2 .widgets-page #widgetList .wc-link input { flex: 1; min-width: 0; height: 38px; padding: 0 11px; font-size: 12.5px; border-radius: 9px; }
body.skin2 .widgets-page #widgetList .wc-link .btn { min-height: 38px; padding: 0 14px; font-size: 13px; }

/* Alsó rács (támogatók / top-ajándékozók / téma): rugalmas oszlopok. */
body.skin2 .widgets-bottom-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 18px;
}
body.skin2 .widgets-bottom-grid > .panel { height: auto; margin-bottom: 0; overflow: visible; }

/* A katalógus fölötti szűrő/kereső sor: rugalmas. */
body.skin2 .widget-catalog-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
body.skin2 .widget-catalog-tools > span { padding: 6px 12px; border-radius: 999px; font-size: 12.5px; cursor: pointer; }
body.skin2 .widget-catalog-tools > span.active { color: #fff; background: linear-gradient(110deg, #2468ee, #8d3ce3); }
body.skin2 .widget-catalog-tools label { margin-inline-start: auto; display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: #081321; }
body.skin2 .widget-catalog-tools input { border: 0; background: transparent; color: var(--text); font-size: 13px; }
body.skin2 .widget-more { display: none; } /* nincs rá szükség: minden widget látszik */

/* Minden tartalmi panel/sec-block: természetes magasság, nem vág (a mért fix magasságok helyett). */
body.skin2 .videos-page .panel, body.skin2 .videos-page .sec-block,
body.skin2 .tts-page .panel, body.skin2 .tts-page .sec-block,
body.skin2 .effects-page .panel, body.skin2 .guide-page .panel,
body.skin2 .apps-page .panel {
  height: auto !important; min-height: 0 !important; overflow: visible !important;
}
body.skin2 .videos-page .hero, body.skin2 .tts-page .hero,
body.skin2 .effects-page > .hero, body.skin2 .guide-main > .hero,
body.skin2 .apps-page > .hero { height: auto !important; min-height: 0 !important; }

/* --- közös: bármely „mező-rács" (input-oszlopok) AUTO-FIT-re → a magyar címke sosem vágódik --- */
body.skin2 .text-grid,
body.skin2 .videos-page .source-steps,
body.skin2 .tts-audience-panel .aud-grid,
body.skin2 .apps-page .benefit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px 16px;
}
body.skin2 .videos-page label, body.skin2 .tts-page label,
body.skin2 .videos-page .field > span, body.skin2 .tts-page .field > span {
  white-space: normal; overflow: visible; text-overflow: clip;
}

/* ===================================================================================
   VIDEÓK
   =================================================================================== */
body.skin2 .videos-page #videoHub { display: flex; flex-direction: column; gap: 18px; }
body.skin2 .videos-page #videoHub > .panel { margin-bottom: 0; }
/* Videótípus-kártyák (belépő/MVP/booster/snipe/szintlépés/vereség): rugalmas rács. */
body.skin2 .videos-page .vid-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px;
}
body.skin2 .videos-page .vid-card { height: auto; }
/* A 4 számozott lépés: rugalmas rács. */
body.skin2 .videos-page .video-steps-block .steps,
body.skin2 .videos-page .source-steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px;
}
/* Teszt-panel: a szöveg + gomb rugalmasan. */
body.skin2 .videos-page .video-test-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

/* ===================================================================================
   FELOLVASÓ (TTS)
   =================================================================================== */
/* Fő elrendezés: beállítások (bal, széles) + előnézet/tippek (jobb kísérő). */
body.skin2 .tts-config-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start;
}
body.skin2 .tts-preview-stack {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
body.skin2 .tts-config-grid > .panel,
body.skin2 .tts-preview-stack > .panel { margin-bottom: 0; }
/* Közönség-kapcsolók (Mindenki/Követők/…): rugalmas rács. */
body.skin2 .tts-audience-panel .aud-grid,
body.skin2 .tts-audience-panel .switch-list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px;
}

/* Parancs-mód: a bal oldali kapcsoló/mező és a jobb oldali magyarázat a két
   rendezési egység. A panel közvetlen gyerekeit nem szabad auto-fit cellákra bontani. */
body.skin2 .tts-command-panel { display: block; }
body.skin2 .tts-command-panel > p { margin: -2px 0 16px; }
body.skin2 .tts-command-layout {
  display: grid;
  grid-template-columns: minmax(260px, .82fr) minmax(0, 1.18fr);
  gap: 18px;
  align-items: stretch;
}
body.skin2 .tts-command-settings {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
body.skin2 .tts-command-settings > .toggle-row {
  min-height: 64px;
  margin: 0;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
}
body.skin2 .tts-command-settings > .text-grid { display: block; }
body.skin2 .tts-command-settings .text-field {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 12.5px;
}
body.skin2 .tts-command-settings .text-field input { width: 100%; }
body.skin2 .command-explainer {
  min-width: 0;
  padding: 17px 18px;
  border: 1px solid #4a3972;
  border-radius: 12px;
  background: radial-gradient(100% 100% at 100% 100%, rgba(116, 32, 179, .18), transparent), #0a1425;
}
body.skin2 .command-explainer h3 { margin: 0 0 12px; font-size: 16px; }
body.skin2 .command-explainer ol {
  margin: 0 0 14px;
  padding-left: 22px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}
body.skin2 .command-explainer code {
  display: block;
  max-width: 100%;
  padding: 11px 12px;
  overflow-wrap: anywhere;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(4, 10, 20, .55);
  color: #dce6f5;
  font-size: 12px;
  line-height: 1.5;
}

/* A hang-előnézetnek a régi, kikapcsolt makettrétegben volt csak teljes stílusa. */
body.skin2 .tts-preview-panel {
  min-width: 0;
  padding: 22px;
}
body.skin2 .tts-preview-select {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 14px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
}
body.skin2 .tts-preview-select b {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.skin2 .tts-wave {
  position: relative;
  height: 144px;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid #4b3972;
  border-radius: 10px;
  background: #081528;
}
body.skin2 .tts-wave button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid #5aa1ff;
  border-radius: 50%;
  background: #162541;
  color: #fff;
  cursor: pointer;
}
body.skin2 .tts-wave button:hover { border-color: var(--cyan); background: #1b3154; }
body.skin2 .tts-wave button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
body.skin2 .tts-wave button:disabled { cursor: wait; opacity: .58; }
body.skin2 .tts-wave > span {
  height: 56px;
  background: repeating-linear-gradient(90deg, #297cfb 0 3px, transparent 3px 7px);
  -webkit-mask-image: linear-gradient(0deg, transparent, #000 22% 78%, transparent);
  mask-image: linear-gradient(0deg, transparent, #000 22% 78%, transparent);
  box-shadow: inset -55px 0 30px rgba(232, 44, 182, .32);
}
body.skin2 .tts-wave.is-loading > span { opacity: .48; }
body.skin2 .tts-wave.is-playing > span { animation: tts-wave-live .7s ease-in-out infinite alternate; }
@keyframes tts-wave-live {
  from { transform: scaleY(.72); filter: saturate(.85); }
  to { transform: scaleY(1); filter: saturate(1.35) brightness(1.18); }
}
body.skin2 .tts-wave small {
  position: absolute;
  right: 12px;
  bottom: 9px;
  color: var(--muted);
  font-size: 11px;
}
body.skin2 .tts-preview-status {
  min-height: 20px;
  margin-top: 8px;
  font-size: 12px;
}
body.skin2 .tts-quality {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}
body.skin2 .tts-quality > span {
  min-width: 0;
  min-height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: #38d9a9;
  text-align: center;
}
body.skin2 .tts-quality i { font-size: 18px; }
body.skin2 .tts-quality b { font-size: 11px; line-height: 1.25; }
body.skin2 .tts-tips-panel { padding: 20px 22px; }
body.skin2 .tts-tips-panel ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
body.skin2 .tts-tips-panel li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 8px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}
body.skin2 .tts-tips-panel li::before {
  content: "✓";
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 1px solid #18c88a;
  border-radius: 50%;
  color: #18c88a;
  font-size: 10px;
  font-weight: 800;
}

@media (max-width: 700px) {
  body.skin2 .tts-command-layout { grid-template-columns: minmax(0, 1fr); }
  body.skin2 .tts-wave { height: 126px; }
}

@media (prefers-reduced-motion: reduce) {
  body.skin2 .tts-wave.is-playing > span { animation: none; }
}

/* ===================================================================================
   EFFEKTEK
   =================================================================================== */
body.skin2 .effects-page .studio-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start;
}
body.skin2 .effects-page .fx-overlay-guide {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin-bottom: 20px;
  padding: 20px 22px;
  overflow: hidden;
  border-color: rgba(73, 224, 146, .34);
  background:
    radial-gradient(circle at 5% 50%, rgba(43, 220, 132, .16), transparent 32%),
    linear-gradient(120deg, rgba(8, 32, 35, .98), rgba(16, 18, 48, .96));
  box-shadow: inset 3px 0 0 #3be18d, 0 14px 36px rgba(2, 9, 23, .22);
}
body.skin2 .effects-page .fx-overlay-guide::after {
  content: '';
  position: absolute;
  right: 18%;
  bottom: -70px;
  width: 190px;
  height: 130px;
  border: 1px solid rgba(73, 224, 146, .2);
  border-radius: 50%;
  pointer-events: none;
}
body.skin2 .effects-page .fx-overlay-guide-icon {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid rgba(73, 224, 146, .34);
  border-radius: 16px;
  color: #75efad;
  background: rgba(43, 220, 132, .12);
  box-shadow: 0 0 28px rgba(43, 220, 132, .14);
  font-size: 28px;
}
body.skin2 .effects-page .fx-overlay-guide-copy { position: relative; z-index: 1; min-width: 0; }
body.skin2 .effects-page .fx-overlay-guide-kicker {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 8px;
}
body.skin2 .effects-page .fx-overlay-guide-kicker .chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
}
body.skin2 .effects-page .fx-overlay-guide h2 { margin: 0 0 7px; font-size: 19px; line-height: 1.25; }
body.skin2 .effects-page .fx-overlay-guide p { margin: 0; color: var(--text); font-weight: 700; line-height: 1.45; }
body.skin2 .effects-page .fx-overlay-guide small {
  display: block;
  max-width: 820px;
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
body.skin2 .effects-page .fx-overlay-guide-action {
  position: relative;
  z-index: 1;
  min-width: 198px;
  justify-content: center;
}
body.skin2 .effects-page .studio-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
body.skin2 .effects-page .studio-rail { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 88px; }
body.skin2 .effects-page .studio-main > .panel, body.skin2 .effects-page .studio-rail > .panel { margin-bottom: 0; }
/* Effekt-kártya rács (10 effekt): rugalmas. */
body.skin2 .effects-page .effect-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px;
}
body.skin2 .effects-page .effect-card { height: auto; }
body.skin2 .effects-page .effect-card.is-selected {
  border-color: #9b70ff;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, .2), 0 10px 28px rgba(68, 34, 145, .2);
}
body.skin2 .effects-page .effect-card:focus-visible {
  outline: 2px solid #bda7ff;
  outline-offset: 2px;
}
body.skin2 .effects-page .mini-dashboard-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px;
}
body.skin2 .effects-page .fx-preview-stage {
  min-height: 330px;
  isolation: isolate;
}
body.skin2 .effects-page .fx-preview-stage .logo { position: relative; z-index: 1; }
body.skin2 .effects-page .console-fx-preview-layer {
  position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none;
}
body.skin2 .effects-page .fx-preview-hint {
  position: absolute; inset: auto 14px 14px; z-index: 4; padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.12); border-radius: 9px;
  background: rgba(4,10,21,.76); color: var(--muted); text-align: center; font-size: 11.5px;
  backdrop-filter: blur(8px);
}
body.skin2 .effects-page .fx-live-preview { gap: 12px; }
body.skin2 .effects-page .fx-label-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
body.skin2 .effects-page .fx-label-row output { color: var(--text); font-weight: 750; }
body.skin2 .effects-page .settings-preview input[type="range"] { accent-color: var(--violet); }
body.skin2 .effects-page .fx-settings-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 9px;
}
body.skin2 .effects-page .fx-settings-actions .btn {
  min-width: 0; padding-inline: 10px; white-space: normal;
}
body.skin2 .effects-page .fx-pin-panel,
body.skin2 .effects-page .fx-source-panel { display: flex; flex-direction: column; gap: 12px; }
body.skin2 .effects-page .fx-pin-panel .panel-head,
body.skin2 .effects-page .fx-source-panel .panel-head { margin-bottom: 0; }
body.skin2 .effects-page .fx-pin-panel .form-msg { min-height: 18px; margin: 0; }

/* ===================================================================================
   ÚTMUTATÓ
   =================================================================================== */
body.skin2 .guide-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start;
}
body.skin2 .guide-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
body.skin2 .guide-rail { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 88px; }
body.skin2 .guide-main > .panel, body.skin2 .guide-rail > .panel { margin-bottom: 0; }
/* A videó-előnézeti kártyák: rugalmas rács. */
body.skin2 .guide-page .guide-list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; padding: 0; list-style: none;
}
body.skin2 .guide-page .guide-card { height: auto; }
body.skin2 .guide-page .guide-tabs { display: flex; flex-wrap: wrap; gap: 8px; }

body.skin2 .guide-page .guide-tabs button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0a1526;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
body.skin2 .guide-page .guide-tabs button:hover { color: var(--text); border-color: var(--line-2); }
body.skin2 .guide-page .guide-tabs button.active { color: #fff; border-color: transparent; background: var(--grad); }

body.skin2 .guide-topic-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}
body.skin2 .guide-topic-head h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 5px;
  font-size: 20px;
}
body.skin2 .guide-topic-head h2 i { color: var(--eyebrow); }
body.skin2 .guide-topic-head p { margin: 0; color: var(--muted); font-size: 13.5px; }
body.skin2 .guide-page .guide-card { min-width: 0; padding: 10px; }
body.skin2 .guide-page .guide-card-text h3 { font-size: 15px; line-height: 1.35; }
body.skin2 .guide-page .guide-card-text p { font-size: 12.5px; line-height: 1.5; }

body.skin2 .guide-trouble-grid { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 16px; }
body.skin2 .guide-browse {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #0a1525;
  color: var(--text);
  font: inherit;
  text-align: center;
  cursor: pointer;
}
body.skin2 .guide-browse i { font-size: 26px; color: var(--eyebrow); }
body.skin2 .guide-browse span { color: var(--muted); font-size: 12.5px; }
body.skin2 .guide-browse em { padding: 7px 12px; border: 1px solid #503876; border-radius: 6px; color: #bb7cff; font-size: 12px; font-style: normal; }

body.skin2 .guide-tip-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
body.skin2 .guide-tip-grid > div { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 5px 9px; padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
body.skin2 .guide-tip-grid i { color: var(--eyebrow); font-size: 19px; }
body.skin2 .guide-tip-grid b { font-size: 14px; }
body.skin2 .guide-tip-grid span,
body.skin2 .guide-tip-grid em { grid-column: 1 / -1; }
body.skin2 .guide-tip-grid span { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
body.skin2 .guide-tip-grid em { justify-self: start; padding: 3px 7px; border-radius: 5px; background: rgba(37, 123, 205, .2); color: #5ab2ff; font-size: 11px; font-style: normal; }

body.skin2 .guide-quick-help hr { margin: 16px 0; border: 0; border-top: 1px solid var(--line); }
body.skin2 .guide-quick-help > h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 8px; font-size: 16px; }
body.skin2 .guide-quick-help .btn { text-decoration: none; }

body.skin2 .guide-faq > button {
  width: 100%;
  min-height: 50px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}
body.skin2 .guide-faq > button i { color: var(--muted); }
body.skin2 .guide-faq > .guide-faq-all { margin-top: 8px; border-bottom: 0; color: var(--eyebrow); font-weight: 700; }

body.skin2 .guide-progress-ring {
  width: 132px;
  height: 132px;
  display: grid;
  place-items: center;
  align-content: center;
  margin: 14px auto;
  border: 10px solid transparent;
  border-radius: 50%;
  background: linear-gradient(#0b1627, #0b1627) padding-box, conic-gradient(#4c4aff 0 75%, #251a51 75%) border-box;
}
body.skin2 .guide-progress-ring b { font-size: 22px; }
body.skin2 .guide-progress-ring span { color: var(--muted); font-size: 11px; }
body.skin2 .guide-progress-label { display: flex; justify-content: space-between; font-size: 12.5px; }
body.skin2 .guide-progress-bar { height: 7px; margin: 8px 0 14px; overflow: hidden; border-radius: 7px; background: var(--surface-2); }
body.skin2 .guide-progress-bar i { display: block; width: 75%; height: 100%; background: var(--grad); }

body.skin2 .guide-popular ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
body.skin2 .guide-popular li { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 9px; }
body.skin2 .guide-popular li span { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--muted); font-size: 11px; }
body.skin2 .guide-popular li b { font-size: 12.5px; font-weight: 500; }

/* ===================================================================================
   APPOK
   =================================================================================== */
body.skin2 .apps-page .download-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px;
}
body.skin2 .apps-page .download-card { height: auto; }
body.skin2 .apps-page .benefit-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px;
}
body.skin2 .apps-page .apps-bottom-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }

/* ===================================================================================
   PROFIL ÉS ELŐFIZETÉS — valódi fiókműveletek, rugalmas kétoszlopos elrendezés
   =================================================================================== */
body.skin2 .profile-page { max-width: 1180px; margin: 0 auto; }
body.skin2 .profile-hero {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 250px;
  background:
    radial-gradient(80% 170% at 92% 0%, rgba(92, 66, 225, .28), transparent 60%),
    radial-gradient(65% 120% at 10% 100%, rgba(30, 122, 255, .12), transparent 66%),
    var(--panel);
}
body.skin2 .profile-back {
  display: inline-flex; align-items: center; gap: 7px; margin: 0 0 24px; padding: 0;
  border: 0; background: transparent; color: #9eb4d2; cursor: pointer; font-size: 13px; font-weight: 700;
}
body.skin2 .profile-back:hover { color: #fff; }
body.skin2 .profile-identity {
  min-width: 270px; display: flex; align-items: center; gap: 16px; padding: 20px;
  border: 1px solid rgba(154, 175, 214, .18); border-radius: 16px;
  background: rgba(7, 16, 32, .68); box-shadow: 0 18px 44px rgba(0, 0, 0, .2);
}
body.skin2 .profile-avatar {
  width: 64px; height: 64px; flex: none; display: grid; place-items: center; border-radius: 20px;
  color: #fff; font: 700 27px/1 var(--font); background: linear-gradient(145deg, #266cff, #9c2dd9);
  box-shadow: 0 12px 32px rgba(70, 83, 231, .35);
}
body.skin2 .profile-identity div { min-width: 0; display: grid; gap: 4px; }
body.skin2 .profile-identity b { max-width: 230px; overflow: hidden; text-overflow: ellipsis; font-size: 18px; }
body.skin2 .profile-identity small { max-width: 230px; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }

body.skin2 .profile-grid {
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(310px, .75fr); gap: 20px; align-items: start;
}
body.skin2 .profile-main,
body.skin2 .profile-rail { display: grid; gap: 20px; }
body.skin2 .profile-rail { position: sticky; top: 92px; }
body.skin2 .profile-page .panel { padding: 24px; }
body.skin2 .profile-page .panel-head { align-items: flex-start; }
body.skin2 .profile-page .panel-head > div { min-width: 0; }
body.skin2 .profile-page .panel-head h2 { margin-bottom: 5px; }
body.skin2 .profile-page .panel-head p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }

body.skin2 .profile-plan-panel {
  overflow: hidden; position: relative;
  background:
    radial-gradient(120% 150% at 100% 0%, rgba(128, 57, 224, .23), transparent 55%),
    linear-gradient(150deg, #101f36, #0d1728);
}
body.skin2 .profile-plan-panel::after {
  content: ""; position: absolute; width: 210px; height: 210px; right: -92px; bottom: -118px;
  border: 28px solid rgba(71, 113, 255, .07); border-radius: 50%; pointer-events: none;
}
body.skin2 .profile-plan-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
body.skin2 .profile-kicker { display: block; margin-bottom: 6px; color: #9eb4d2; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; }
body.skin2 .profile-plan-head h2 { margin: 0; font: 700 clamp(28px, 3vw, 38px)/1.1 var(--font); }
body.skin2 .profile-plan-head .sub-pill { margin-top: 4px; }
body.skin2 .profile-plan-date {
  display: flex; align-items: center; gap: 12px; width: fit-content; margin: 24px 0 12px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 11px; background: rgba(5, 14, 27, .46);
}
body.skin2 .profile-plan-date > i { color: #79a6ff; font-size: 23px; }
body.skin2 .profile-plan-date div { display: grid; gap: 2px; }
body.skin2 .profile-plan-date span { color: var(--muted); font-size: 11px; }
body.skin2 .profile-plan-date b { font-size: 15px; }
body.skin2 .profile-plan-panel .panel-note { min-height: 22px; margin: 0 0 18px; }
body.skin2 .profile-plan-panel .btn { position: relative; z-index: 1; width: fit-content; }

body.skin2 .profile-verified {
  flex: none; padding: 5px 9px; border-radius: 999px; color: #72dfa0; background: rgba(38, 179, 100, .13);
  font-size: 11px; font-weight: 800;
}
body.skin2 .profile-verified.bad { color: #ffbd73; background: rgba(244, 150, 42, .13); }
body.skin2 .profile-form { display: grid; gap: 15px; }
body.skin2 .profile-form label { display: grid; gap: 7px; color: #d8e2f0; font-size: 13px; font-weight: 700; }
body.skin2 .profile-form input,
body.skin2 .profile-form select {
  width: 100%; min-height: 48px; padding: 0 15px; border: 1px solid rgba(142, 165, 205, .2);
  border-radius: 12px; outline: none; color: #f4f7ff; background: rgba(6, 15, 29, .72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 8px 22px rgba(0, 0, 0, .12);
  font: 600 14px/1.2 var(--font); transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
body.skin2 .profile-form input::placeholder { color: #6f8099; font-weight: 500; }
body.skin2 .profile-form input:hover,
body.skin2 .profile-form select:hover { border-color: rgba(130, 158, 221, .38); background: rgba(9, 21, 39, .82); }
body.skin2 .profile-form input:focus,
body.skin2 .profile-form select:focus {
  border-color: #5c7cff; background: #0b172b;
  box-shadow: 0 0 0 3px rgba(76, 103, 255, .17), inset 0 1px 0 rgba(255, 255, 255, .04);
}
body.skin2 .profile-form input:-webkit-autofill,
body.skin2 .profile-form input:-webkit-autofill:hover,
body.skin2 .profile-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: #f4f7ff; box-shadow: 0 0 0 1000px #111e34 inset, 0 0 0 3px rgba(76, 103, 255, .13);
  caret-color: #fff; transition: background-color 9999s ease-out 0s;
}
body.skin2 .profile-form-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
body.skin2 .profile-form-actions { display: flex; align-items: center; gap: 14px; }
body.skin2 .profile-form-actions small { max-width: 360px; color: var(--muted); }
body.skin2 .profile-form .form-msg { margin: 0; }

body.skin2 .profile-channel-limit {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0 12px;
  padding: 9px 11px; border: 1px solid rgba(97, 132, 210, .2); border-radius: 10px;
  color: #9db0ca; background: rgba(45, 77, 145, .08); font-size: 12px; font-weight: 700;
}
body.skin2 .profile-channel-limit b { color: #cfdcff; font-size: 12px; }
body.skin2 .profile-channel-limit.is-full { border-color: rgba(255, 184, 77, .25); background: rgba(216, 135, 33, .08); }
body.skin2 .profile-channel-limit.is-full b { color: #ffc86f; }
body.skin2 .profile-channel-list { display: grid; gap: 9px; margin-bottom: 12px; }
body.skin2 .profile-channel-item {
  display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px;
  border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, .025);
}
body.skin2 .profile-channel-item.is-active {
  border-color: rgba(69, 214, 144, .3); background: linear-gradient(100deg, rgba(31, 158, 103, .1), rgba(55, 89, 160, .05));
  box-shadow: inset 3px 0 0 #37d893;
}
body.skin2 .profile-channel-item.is-inactive { grid-template-columns: 38px minmax(0, 1fr); }
body.skin2 .profile-channel-item > i {
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px;
  color: #ff85c1; background: rgba(217, 69, 145, .12); font-size: 19px;
}
body.skin2 .profile-channel-item div { min-width: 0; display: grid; gap: 2px; }
body.skin2 .profile-channel-item b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
body.skin2 .profile-channel-item small { color: var(--muted); }
body.skin2 .profile-channel-item .chip { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; white-space: nowrap; }
body.skin2 .profile-channel-switch {
  grid-column: 1 / -1; width: 100%; min-height: 36px; padding: 0 10px; border-radius: 9px;
  font-size: 11px; white-space: normal;
}
body.skin2 .profile-channel-form { margin-top: 15px; padding-top: 17px; border-top: 1px solid var(--line); }
body.skin2 .profile-channels-panel > .form-msg { margin: 10px 0 0; }

body.skin2 .profile-language-panel select { cursor: pointer; }

@media (max-width: 1100px) {
  body.skin2 .profile-grid { grid-template-columns: 1fr; }
  body.skin2 .profile-rail { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===================================================================================
   TÖRÉSPONTOK — a jobb kísérő oszlop a tartalom alá csúszik szűk helyen
   =================================================================================== */
@media (max-width: 1100px) {
  body.skin2 .shell { grid-template-columns: 76px minmax(0, 1fr); }
  body.skin2 .sidenav { width: auto; padding: 18px 12px; }
  body.skin2 .content { padding: 22px 22px 64px; }
  body.skin2 .overview-page .page-grid { grid-template-columns: 1fr; }
  body.skin2 .overview-page .page-rail { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.skin2 .widgets-layout,
  body.skin2 .tts-config-grid,
  body.skin2 .effects-page .studio-grid,
  body.skin2 .guide-layout { grid-template-columns: 1fr; }
  body.skin2 .widgets-layout > .widgets-rail,
  body.skin2 .widgets-rail,
  body.skin2 .effects-page .studio-rail,
  body.skin2 .guide-rail { grid-column: 1; grid-row: auto; position: static; }
  body.skin2 .widgets-main { grid-column: 1; }
}

@media (max-width: 700px) {
  body.skin2 .shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  body.skin2 .topbar {
    grid-column: 1;
    min-height: 104px;
    height: auto;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 42px;
    grid-template-rows: 42px 42px;
    gap: 8px 10px;
    padding: 8px 14px;
  }
  body.skin2 .topbar-burger { grid-column: 1; grid-row: 1; width: 40px; height: 42px; }
  body.skin2 .topbar-search { grid-column: 2; grid-row: 1; width: 100%; height: 42px; min-width: 0; padding: 0 11px; }
  body.skin2 .topbar-search input { min-width: 0; min-height: 0; font-size: 13px; }
  body.skin2 .topbar-search kbd { display: none; }
  body.skin2 .topbar-av { grid-column: 3; grid-row: 1; width: 40px; height: 40px; }
  body.skin2 .topbar .channel-pick { grid-column: 1 / 3; grid-row: 2; min-width: 0; }
  body.skin2 .topbar #channelSelect { width: 100%; max-width: none; height: 42px; }
  body.skin2 .topbar-spacer,
  body.skin2 .topbar-decor { display: none; }
  body.skin2 .live-pill {
    grid-column: 3;
    grid-row: 2;
    width: 42px;
    height: 42px;
    min-width: 42px;
    padding: 5px;
    justify-content: center;
  }
  body.skin2 .live-pill > .dot-live,
  body.skin2 .live-pill-text { display: none; }
  body.skin2 .live-pill-btn { width: 32px; height: 32px; }

  body.skin2 .content { grid-column: 1; padding: 16px 16px 56px; overflow-x: clip; }
  body.skin2 #promoBanner { margin-bottom: 16px; }
  body.skin2 .panel { padding: 18px; }
  body.skin2 .panel-head h2 { font-size: 18px; }
  body.skin2 .profile-hero { grid-template-columns: 1fr; padding: 22px; }
  body.skin2 .profile-identity { min-width: 0; width: 100%; }
  body.skin2 .profile-grid,
  body.skin2 .profile-rail,
  body.skin2 .profile-form-columns { grid-template-columns: 1fr; }
  body.skin2 .profile-page .panel { padding: 18px; }
  body.skin2 .profile-plan-head,
  body.skin2 .profile-form-actions { align-items: flex-start; flex-direction: column; }
  body.skin2 .profile-plan-panel .btn { width: 100%; }

  body.skin2 .overview-page .page-grid,
  body.skin2 .overview-page .page-rail,
  body.skin2 .home-bottom-grid { grid-template-columns: 1fr; }
  body.skin2 .overview-page .page-rail { display: flex; position: static; }
  body.skin2 .overview-page .page-main > .hero.hero-home {
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
    padding: 24px 22px;
  }
  body.skin2 .overview-page .hero-home .hero-copy { width: 100%; }
  body.skin2 .overview-page .hero-home .hero-title { font-size: 34px; }
  body.skin2 .overview-page .hero-home .hero-lead { font-size: 14px; }
  body.skin2 .overview-page .hero-home .hero-art { min-height: 210px; background-size: contain; }
  body.skin2 .hero-health {
    position: static;
    grid-column: 1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 4px;
    padding: 12px;
  }
  body.skin2 .overview-page .account-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.skin2 .overview-page .toolkit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.skin2 .overview-page .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.skin2 .overview-page .setup-card { grid-template-columns: 1fr; }
  body.skin2 .overview-page .setup-preview { width: min(100%, 240px); min-height: 260px; }

  body.skin2 .widgets-main > .hero {
    min-height: 0;
    grid-template-columns: 1fr;
  }
  body.skin2 .widgets-main > .hero .widget-hero-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.skin2 .widgets-page #widgetList,
  body.skin2 .guide-page .guide-list,
  body.skin2 .guide-tip-grid,
  body.skin2 .guide-trouble-grid { grid-template-columns: 1fr; }
  body.skin2 .guide-page .guide-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  body.skin2 .guide-page .guide-tabs button { flex: none; }
}

@media (max-width: 440px) {
  body.skin2 .effects-page .fx-settings-actions { grid-template-columns: 1fr; }
  body.skin2 .effects-page .fx-overlay-guide {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px;
    padding: 18px;
  }
  body.skin2 .effects-page .fx-overlay-guide-icon { width: 48px; height: 48px; border-radius: 14px; font-size: 24px; }
  body.skin2 .effects-page .fx-overlay-guide-action { grid-column: 1 / -1; width: 100%; }
}

/* The top-right account shortcut is a real Profile action, not a decorative avatar. */
body.skin2 button.topbar-profile {
  width: auto;
  min-width: 92px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid rgba(var(--accent-cyan-rgb), .34);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: none;
}
body.skin2 button.topbar-profile i { color: var(--accent-cyan); font-size: 17px; }
body.skin2 button.topbar-profile:hover {
  border-color: rgba(var(--accent-cyan-rgb), .7);
  background: rgba(var(--accent-cyan-rgb), .1);
}

@media (max-width: 700px) {
  body.skin2 button.topbar-profile {
    width: 40px;
    min-width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
  }
  body.skin2 button.topbar-profile span { display: none; }
}

/* ===================================================================================
   VALÓDI FELSŐ KERESŐ — API-ból érkező fiók/csatorna-index + azonnali helyi typeahead.
   =================================================================================== */
body.skin2 .topbar-search {
  position: relative;
  overflow: visible;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
body.skin2 .topbar-search:focus-within {
  border-color: rgba(var(--accent-cyan-rgb), .72);
  background: #0d192a;
  box-shadow: 0 0 0 3px rgba(var(--accent-cyan-rgb), .1), 0 16px 44px rgba(0, 0, 0, .18);
}
body.skin2 .topbar-search input[type='search'] {
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 0;
}
body.skin2 .topbar-search input[type='search']::-webkit-search-cancel-button { opacity: .6; }

body.skin2 .topbar-search-results {
  position: absolute;
  z-index: 1200;
  top: calc(100% + 10px);
  left: 0;
  width: min(620px, calc(100vw - 280px));
  max-height: min(520px, calc(100vh - 104px));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px;
  border: 1px solid #30415f;
  border-radius: 14px;
  background: rgba(9, 18, 33, .985);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .025) inset;
  backdrop-filter: blur(18px);
}
body.skin2 .topbar-search-results[hidden] { display: none; }

body.skin2 .global-search-result {
  width: 100%;
  min-height: 62px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto 20px;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  text-align: left;
  font: inherit;
  cursor: pointer;
}
body.skin2 .global-search-result:hover,
body.skin2 .global-search-result.is-active {
  border-color: rgba(var(--accent-cyan-rgb), .27);
  background: linear-gradient(90deg, rgba(var(--accent-cyan-rgb), .12), rgba(122, 85, 255, .07));
}
body.skin2 .global-search-result[aria-disabled='true'] {
  cursor: default;
  opacity: .58;
}
body.skin2 .global-search-result[aria-disabled='true']:hover { border-color: transparent; background: transparent; }
body.skin2 .global-search-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--accent-cyan-rgb), .18);
  border-radius: 10px;
  background: rgba(var(--accent-cyan-rgb), .09);
  color: var(--accent-cyan);
  font-size: 19px;
}
body.skin2 .global-search-copy { min-width: 0; display: grid; gap: 3px; }
body.skin2 .global-search-copy b,
body.skin2 .global-search-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.skin2 .global-search-copy b { font-size: 14px; line-height: 1.25; }
body.skin2 .global-search-copy small { color: var(--muted); font-size: 11.5px; line-height: 1.3; }
body.skin2 .global-search-kind {
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}
body.skin2 .global-search-arrow { color: var(--muted); }
body.skin2 .global-search-lock { color: #f8b84e; }
body.skin2 .global-search-empty {
  min-height: 86px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--muted);
  font-size: 13px;
}

body.skin2 .effects-page .fx-version-chip {
  border-color: rgba(246, 87, 182, .55);
  background: linear-gradient(120deg, rgba(246, 87, 182, .2), rgba(91, 107, 255, .15));
  color: #fff;
  box-shadow: 0 0 24px rgba(246, 87, 182, .12);
}
body.skin2 .effects-page .fx-version-chip i { color: #ff8bd0; }

/* The Effects release is product information, not a temporary "new" flag: keep it visible in the
   persistent navigation too. The base nav-badge sizing already handles collapsed/mobile states. */
body.skin2 .sidenav .nav-version-badge {
  min-width: 32px;
  color: #dff8ff;
  background: linear-gradient(135deg, rgba(53, 198, 255, .28), rgba(226, 82, 171, .32));
  border-color: rgba(125, 220, 255, .34);
}

@media (max-width: 700px) {
  body.skin2 .topbar-search-results {
    position: fixed;
    top: 58px;
    right: 14px;
    left: 14px;
    width: auto;
    max-height: min(520px, calc(100vh - 74px));
  }
  body.skin2 .global-search-result {
    grid-template-columns: 38px minmax(0, 1fr) 18px;
    gap: 9px;
  }
  body.skin2 .global-search-kind { display: none; }
  body.skin2 .global-search-icon { width: 38px; height: 38px; }
}