/* ══════════════════════════════════════════════════════════════════════
   edum - nowy wygląd akademii (ustawienie "ui" = "v2")
   Ładowany PO style.css. Wszystkie reguły w zakresie body.ui2, więc
   akademie w obecnym wyglądzie nie są dotknięte.
   Kolor akcentu, fonty i kolor nagłówka przychodzą z ustawień akademii.
   ══════════════════════════════════════════════════════════════════════ */

body.ui2 {
  /* powierzchnie i tekst */
  --bg-root: #eef2f0; --bg-glass: #fff; --bg-glass2: #f5f8f6; --bg-glass3: #fff; --bg-input: #fff;
  --u2-panel: #fff; --u2-panel-2: #f5f8f6; --u2-panel-3: #e9efec;
  --tx: #12201b; --tx2: #33433d; --tx3: #5d6b66; --tx4: #8a9792;
  --u2-line: rgba(18,32,27,.08); --u2-line-2: rgba(18,32,27,.14);
  --br: var(--u2-line); --br2: var(--u2-line-2); --line: var(--u2-line); --line-soft: var(--u2-line);
  --paper: var(--bg-root); --panel: #fff; --panel-2: #f5f8f6; --ink: var(--tx); --ink-2: var(--tx2); --muted: var(--tx3);
  /* akcent i rodzina */
  --u2-ink: #12201b;
  --u2-acc2: color-mix(in oklab, var(--accent) 80%, #000);
  --u2-soft: color-mix(in oklab, var(--accent) 12%, transparent);
  --u2-soft-2: color-mix(in oklab, var(--accent) 6%, transparent);
  --acc1: var(--accent); --grad: var(--accent);
  --accent-tint: var(--u2-soft); --accent-line: color-mix(in oklab, var(--accent) 35%, transparent);
  --u2-coral: #ef7a67; --u2-coral-s: rgba(239,122,103,.14);
  --u2-amber: #f1b546; --u2-amber-s: rgba(241,181,70,.18);
  --u2-violet: #9b8cf0; --u2-violet-s: rgba(155,140,240,.16);
  --ok: #1c8d6c; --ok-s: rgba(34,169,130,.12); --err: #c0473a; --err-s: rgba(239,122,103,.14); --warn: #a3741a; --warn-s: rgba(241,181,70,.18);
  /* geometria */
  --u2-r-xl: 24px; --u2-r-lg: 18px; --u2-r-md: 14px; --u2-r-sm: 10px;
  --r-sm: 10px; --r: 14px; --r-lg: 18px; --r-xl: 24px;
  --sh-card: 0 1px 2px rgba(18,32,27,.04), 0 8px 24px -12px rgba(18,32,27,.10);
  --sh-sm: var(--sh-card); --sh: var(--sh-card);
  --sh-lift: 0 22px 44px -26px rgba(18,32,27,.4);
  --sh-glow: 0 0 0 4px var(--u2-soft);
  --u2-top: 68px; --u2-rail: 72px; --u2-gut: 28px;
  --u2-ease: cubic-bezier(.2,.8,.2,1);

  display: block; min-height: 100vh; margin: 0;
  font-family: var(--body); font-size: 15px; line-height: 1.55; color: var(--tx);
  background-color: var(--bg-root);
  background-image:
    radial-gradient(900px 500px at 0% -10%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 60%),
    radial-gradient(700px 500px at 100% 0%, rgba(155,140,240,.10), transparent 60%);
  background-attachment: fixed;
  overflow-x: clip;
}
html:has(body.ui2) { overflow-x: clip; scrollbar-gutter: auto; }
body.ui2 * { box-sizing: border-box; }
body.ui2 svg.i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
body.ui2 h1, body.ui2 h2, body.ui2 h3 { font-family: var(--display); font-weight: 500; letter-spacing: -.02em; color: var(--tx); }
body.ui2 h1 { font-size: clamp(1.7rem, 2.6vw, 2.15rem); line-height: 1.15; margin: 0 0 .35em; }
body.ui2 h2 { font-size: 1.1rem; line-height: 1.25; }
body.ui2 h3 { font-size: 1rem; line-height: 1.3; }
:where(body.ui2) a { color: var(--u2-acc2); }
:where(body.ui2) a:hover { text-decoration: none; }
body.ui2 :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.u2-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.u2-skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--u2-ink); color: #fff !important; padding: 10px 16px; border-radius: 99px; }
.u2-skip:focus { top: 12px; }

/* ── belka górna ─────────────────────────────────────────────────────── */
.u2-top { height: var(--u2-top); display: flex; align-items: center; gap: 16px; padding: 0 var(--u2-gut) 0 22px;
  position: sticky; top: 0; z-index: 40; background: rgba(238,242,240,.78);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: box-shadow .2s; }
.u2-top.scr { box-shadow: 0 1px 0 var(--u2-line), 0 10px 30px -22px rgba(18,32,27,.35); }
.u2-brand { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--tx) !important; font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: -.01em; }
.u2-brand:hover { text-decoration: none; }
.u2-logo { height: 32px; width: auto; max-width: 160px; object-fit: contain; }
.u2-mark { width: 32px; height: 32px; border-radius: 10px; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 15px; flex: none; }
.u2-bt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u2-seg { position: relative; isolation: isolate; display: inline-flex; gap: 2px; padding: 4px; margin: 0 auto;
  background: var(--u2-panel); border: 1px solid var(--u2-line); border-radius: 999px; }
.u2-seg a { padding: 8px 20px; border-radius: 999px; color: var(--tx3); font-size: 14.5px; white-space: nowrap; transition: color .15s; }
.u2-seg a:hover { color: var(--tx); }
.u2-seg a.on { color: #fff; }
.u2-seg .pill { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; background: var(--u2-ink); z-index: -1;
  transition: transform .32s var(--u2-ease), width .32s var(--u2-ease); pointer-events: none; }
.u2-seg:not(.js) a.on { background: var(--u2-ink); }
.u2-top-end { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.u2-seg + .u2-top-end { margin-left: 0; }
.u2-ibtn { width: 40px; height: 40px; border-radius: 50%; background: var(--u2-panel); border: 1px solid var(--u2-line); display: grid; place-items: center;
  position: relative; cursor: pointer; color: var(--tx); transition: background .15s, transform .15s; padding: 0; margin: 0; }
.u2-ibtn:hover { background: var(--u2-panel-2); transform: translateY(-1px); text-decoration: none; }
.u2-ibtn:hover svg.i { animation: u2ring .5s; }
.u2-ibtn.is-on { background: var(--u2-ink); color: #fff; }
@keyframes u2ring { 20% { transform: rotate(12deg) } 40% { transform: rotate(-10deg) } 60% { transform: rotate(6deg) } 80% { transform: rotate(-3deg) } }
.u2-dot { position: absolute; top: 9px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--u2-coral); box-shadow: 0 0 0 2px var(--u2-panel); }
.u2-avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 14px; flex: none;
  color: #fff !important; background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 80%, #fff), var(--u2-acc2));
  box-shadow: 0 0 0 2px var(--u2-panel), 0 0 0 4px var(--accent); transition: transform .2s; }
.u2-avatar:hover { transform: scale(1.05); text-decoration: none; }
.u2-avatar.sm { width: 32px; height: 32px; font-size: 12px; box-shadow: none; }
/* wyszukiwarka rozwijana z ikony */
.u2-search { display: flex; align-items: center; position: relative; margin: 0; }
.u2-search input[type=search] { width: 0; padding: 0; border: 0; opacity: 0; height: 40px; border-radius: 999px; transition: width .3s var(--u2-ease), opacity .2s, padding .3s;
  position: absolute; right: 0; top: 0; background: var(--u2-panel); box-shadow: 0 0 0 1px var(--u2-line-2); font-size: 14.5px; }
.u2-search:focus-within input[type=search], .u2-search.open input[type=search], .u2-search input[type=search]:not(:placeholder-shown) {
  width: min(320px, 60vw); opacity: 1; padding: 0 16px 0 42px; }
.u2-search label.u2-ibtn { position: relative; z-index: 2; margin: 0; }
.u2-search:focus-within label.u2-ibtn { background: transparent; border-color: transparent; }

/* ── rama: menu boczne + treść ───────────────────────────────────────── */
.u2-shell { display: grid; grid-template-columns: var(--u2-rail) minmax(0, 1fr); transition: grid-template-columns .28s var(--u2-ease); }
html.u2-menu-open .u2-shell { --u2-rail: 276px; }
.u2-rail { position: sticky; top: calc(var(--u2-top) + 6px); height: calc(100vh - var(--u2-top) - 30px); margin-left: 16px; width: 44px;
  border-radius: 24px; background: var(--u2-panel); border: 1px solid var(--u2-line); box-shadow: 0 12px 32px -18px rgba(18,32,27,.28);
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0 12px; z-index: 30;
  transition: width .28s var(--u2-ease), padding .28s; }
.u2-rail-top { display: flex; align-items: center; justify-content: center; width: 100%; margin-bottom: 6px; }
.u2-rail-name { display: none; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--tx4); font-weight: 500; }
.u2-rail-tog { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--u2-panel-2); display: grid; place-items: center; cursor: pointer; color: var(--tx3); flex: none; padding: 0; }
.u2-rail-tog:hover { background: var(--u2-panel-3); color: var(--tx); }
.u2-rail-tog .ix { display: none; }
.u2-rail a { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; gap: 12px; flex: none;
  color: var(--tx3); position: relative; white-space: nowrap; font-size: 14.5px; transition: background .15s, color .15s; }
.u2-rail a:hover { background: var(--u2-panel-2); color: var(--tx); text-decoration: none; }
.u2-rail a.on { background: var(--u2-ink); color: #fff; }
.u2-rail a svg.i { width: 17px; height: 17px; }
.u2-rail .rl, .u2-rail .rh, .u2-rail .nav-badge { display: none; }
.u2-rail .rb:not(.alert) { display: none; }
.u2-rail .rb { position: absolute; top: 3px; right: 3px; width: 8px; height: 8px; border-radius: 50%; background: var(--u2-coral); font-size: 0; font-style: normal; box-shadow: 0 0 0 2px var(--u2-panel); }
.u2-rail .sp { flex: 1; }
.u2-rail-user { margin: 4px 0; }
.u2-rail-user .rl b { display: block; font-weight: 500; font-size: 14px; color: var(--tx); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; }
.u2-rail-user .rl small { display: block; font-size: 12px; color: var(--tx3); overflow: hidden; text-overflow: ellipsis; }
.u2-rail .nav-progress { display: block; height: 3px; border-radius: 9px; background: var(--u2-panel-3); margin-top: 4px; overflow: hidden; }
.u2-rail .nav-progress i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.u2-rail a.on .nav-progress { background: rgba(255,255,255,.2); }
.u2-rail a.on .nav-progress i { background: #fff; }
html:not(.u2-menu-open) body:not(.u2-drawer) .u2-rail a[data-tip]:hover::after {
  content: attr(data-tip); position: absolute; left: 44px; top: 50%; transform: translateY(-50%); background: var(--u2-ink); color: #fff;
  font-size: 12.5px; padding: 5px 10px; border-radius: 8px; white-space: nowrap; z-index: 5; pointer-events: none; }
/* rozsunięte (komputer) i szuflada (telefon) */
html.u2-menu-open .u2-rail, body.u2-drawer .u2-rail { width: 244px; align-items: stretch; padding: 10px 10px 12px; overflow: hidden auto; scrollbar-width: none; }
html.u2-menu-open .u2-rail::-webkit-scrollbar, body.u2-drawer .u2-rail::-webkit-scrollbar { display: none; }
html.u2-menu-open .u2-rail-top, body.u2-drawer .u2-rail-top { justify-content: space-between; padding: 0 4px 0 10px; }
html.u2-menu-open .u2-rail-name, body.u2-drawer .u2-rail-name { display: block; }
html.u2-menu-open .u2-rail a, body.u2-drawer .u2-rail a { width: auto; height: 40px; border-radius: 12px; justify-content: flex-start; padding: 0 12px; }
html.u2-menu-open .u2-rail a.u2-path, body.u2-drawer .u2-rail a.u2-path { height: 46px; }
html.u2-menu-open .u2-rail .rl, body.u2-drawer .u2-rail .rl { display: block; min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; animation: u2in .25s ease both; }
html.u2-menu-open .u2-rail .rh, body.u2-drawer .u2-rail .rh { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--tx4); padding: 12px 12px 4px; font-weight: 500; animation: u2in .25s ease both; }
html.u2-menu-open .u2-rail .nav-badge, body.u2-drawer .u2-rail .nav-badge { display: block; font-size: 12px; color: var(--tx4); }
html.u2-menu-open .u2-rail a.on .nav-badge, body.u2-drawer .u2-rail a.on .nav-badge { color: rgba(255,255,255,.75); }
html.u2-menu-open .u2-rail .rb:not(.alert), body.u2-drawer .u2-rail .rb:not(.alert) { display: grid; background: var(--u2-panel-3); color: var(--tx3) !important; }
html.u2-menu-open .u2-rail .rb, body.u2-drawer .u2-rail .rb { position: static; width: auto; height: 20px; min-width: 20px; padding: 0 6px; border-radius: 99px; font-size: 11.5px; color: #fff; display: grid; place-items: center; box-shadow: none; }
html.u2-menu-open .u2-rail a.on .rb, body.u2-drawer .u2-rail a.on .rb { background: var(--accent); }
html.u2-menu-open .u2-rail-user, body.u2-drawer .u2-rail-user { height: auto !important; padding: 10px !important; background: var(--u2-panel-2); margin: 6px 0; }
html.u2-menu-open .u2-rail-tog .ip, body.u2-drawer .u2-rail-tog .ip { color: var(--tx); }
@keyframes u2in { from { opacity: 0; transform: translateX(-4px) } to { opacity: 1; transform: none } }
.u2-scrim { display: none; }

/* ── obszar treści ───────────────────────────────────────────────────── */
.u2-main { padding: 8px var(--u2-gut) 32px 12px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.u2-main > * { margin-top: 0 !important; margin-bottom: 0 !important; min-width: 0; }
.u2-main > h1 + .lead-under, .u2-main > h1 + p { margin-top: -12px !important; }
body.ui2 .lead-under, body.ui2 .sub { color: var(--tx3); }
body.ui2 .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 6px 0 0; }
body.ui2 .section-head h2 { font-size: 1.35rem; margin: 2px 0 0; }
body.ui2 .section-kicker, body.ui2 .eyebrow, body.ui2 .card-cat {
  font-family: var(--body); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--u2-acc2); font-weight: 600; }
body.ui2 .section-desc { color: var(--tx3); margin: -8px 0 0; }
body.ui2 .count { font-family: var(--body); font-size: 12.5px; color: var(--tx3); background: var(--u2-panel-2); border: 1px solid var(--u2-line); padding: 2px 10px; border-radius: 99px; }
body.ui2 .hint { color: var(--tx3); font-size: 13px; }
body.ui2 code { font-family: var(--data); font-size: .86em; background: var(--u2-panel-2); padding: 2px 6px; border-radius: 6px; }

/* panele */
body.ui2 .panel, body.ui2 .quiz-box, body.ui2 .table-wrap, body.ui2 .card, body.ui2 .side-panel, body.ui2 .stat {
  background: var(--u2-panel); border: 1px solid var(--u2-line); border-radius: var(--u2-r-xl); box-shadow: var(--sh-card);
  backdrop-filter: none; -webkit-backdrop-filter: none; }
body.ui2 .panel, body.ui2 .quiz-box { padding: 22px; }
body.ui2 .panel > h2, body.ui2 .panel-head h2, body.ui2 .quiz-box h2 { font-size: 1.05rem; margin: 0 0 12px; }
body.ui2 .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
body.ui2 .panel-head h2 { margin: 0; }
body.ui2 .panel-sub, body.ui2 .panel-empty { color: var(--tx3); }
body.ui2 .panel-empty { text-align: center; padding: 34px 22px; }
body.ui2 .account-grid { gap: 18px; }

/* przyciski */
body.ui2 .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 20px; border-radius: 999px;
  border: 1px solid var(--u2-line-2); background: var(--u2-panel); color: var(--tx); font-family: var(--body); font-size: 14.5px; font-weight: 500;
  line-height: 1; box-shadow: none; filter: none; transition: transform .15s, background .15s, box-shadow .2s, border-color .15s, color .15s; cursor: pointer; white-space: nowrap; }
body.ui2 .btn:not(.btn-primary):not(.btn-accent):not(.btn-danger):hover { background: var(--u2-panel-2); border-color: var(--tx4); color: var(--tx); transform: none; }
body.ui2 .btn-primary { background: var(--u2-ink); border-color: var(--u2-ink); color: #fff; box-shadow: none; }
body.ui2 .btn-primary:hover, body.ui2 .btn-primary:focus-visible { background: color-mix(in oklab, var(--u2-ink) 86%, #fff); color: #fff; filter: none; transform: translateY(-1px); box-shadow: 0 10px 22px -12px rgba(18,32,27,.6); }
body.ui2 .btn-accent, body.ui2 .btn-mint { background: var(--accent); border-color: var(--accent); color: #fff; }
body.ui2 .btn-accent:hover, body.ui2 .btn-mint:hover { background: var(--u2-acc2); color: #fff; transform: translateY(-1px); }
body.ui2 .btn-outline { background: var(--u2-panel); }
body.ui2 .btn-ghost { background: transparent; border-color: transparent; color: var(--tx2); }
body.ui2 .btn-ghost:hover { background: var(--u2-panel-2) !important; border-color: transparent !important; }
body.ui2 .btn-danger { background: var(--u2-coral); border-color: var(--u2-coral); color: #fff; }
body.ui2 .btn-sm { height: 34px; padding: 0 14px; font-size: 13.5px; }
body.ui2 .btn-lg { height: 52px; padding: 0 26px; font-size: 16px; }
body.ui2 .btn-block { width: 100%; }
body.ui2 .btn[disabled], body.ui2 .btn.is-disabled { opacity: .45; }
body.ui2 .btn svg.i { transition: transform .2s; }
body.ui2 .btn:hover svg.i:last-child:not(:first-child) { transform: translateX(3px); }
body.ui2 .actions, body.ui2 .form-actions { gap: 10px; margin-top: 18px; }

/* formularze */
body.ui2 label { font-size: 13.5px; color: var(--tx3); font-weight: 400; margin: 16px 0 6px; }
body.ui2 input[type=text], body.ui2 input[type=email], body.ui2 input[type=password], body.ui2 input[type=number], body.ui2 input[type=date],
body.ui2 input[type=datetime-local], body.ui2 input[type=url], body.ui2 input[type=search], body.ui2 select, body.ui2 textarea {
  min-height: 44px; border-radius: var(--u2-r-md); border: 1px solid var(--u2-line-2); background: #fff; padding: 10px 14px; font-size: 15px; color: var(--tx); }
body.ui2 textarea { min-height: 110px; }
body.ui2 input:focus, body.ui2 select:focus, body.ui2 textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--u2-soft); outline: none; }
body.ui2 .check { color: var(--tx); font-size: 14.5px; }

/* komunikaty i banery */
body.ui2 .flash { border-radius: var(--u2-r-md); padding: 12px 16px; font-size: 14.5px; border: 1px solid transparent; margin: 0; animation: u2drop .35s var(--u2-ease); }
body.ui2 .flash-ok { background: var(--u2-soft); color: var(--u2-acc2); border-color: color-mix(in oklab, var(--accent) 25%, transparent); }
body.ui2 .flash-err { background: var(--u2-coral-s); color: #b24636; border-color: rgba(239,122,103,.3); }
@keyframes u2drop { from { opacity: 0; transform: translateY(-6px) } }
.u2-banner { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; border-radius: 999px; font-size: 14px; flex-wrap: wrap; }
.u2-banner > svg.i { flex: none; }
.u2-banner > span { flex: 1; min-width: 200px; }
.u2-banner-ink { background: var(--u2-ink); color: #fff; }
.u2-banner-ink .btn { background: rgba(255,255,255,.12) !important; color: #fff !important; border-color: rgba(255,255,255,.2) !important; }
.u2-banner-amber { background: var(--u2-amber-s); color: #7d5a14; border-radius: var(--u2-r-md); }
.u2-banner-amber a { color: #7d5a14; text-decoration: underline; }

/* znaczniki */
body.ui2 .tag, body.ui2 .chip, body.ui2 .badge { font-family: var(--body); font-size: 12px; letter-spacing: 0; text-transform: none; height: 24px; padding: 0 10px; border-radius: 99px;
  display: inline-flex; align-items: center; gap: 6px; background: var(--u2-panel-2); border: 1px solid var(--u2-line); color: var(--tx3); }
body.ui2 .tag-on, body.ui2 .chip-access, body.ui2 .badge-accent, body.ui2 .badge-ok { background: var(--u2-soft); color: var(--u2-acc2); border-color: transparent; }
body.ui2 .tag-off, body.ui2 .badge-err { background: var(--u2-coral-s); color: #b24636; border-color: transparent; }
body.ui2 .badge-warn { background: var(--u2-amber-s); color: #8a6216; border-color: transparent; }

/* pasek postępu */
body.ui2 .progressbar { height: 6px; border-radius: 99px; background: var(--u2-panel-3); overflow: hidden; }
body.ui2 .progressbar > span, body.ui2 .progressbar > i, body.ui2 .progressbar > div { background: var(--accent); border-radius: inherit; transition: width 1s var(--u2-ease); }

/* tabele */
body.ui2 .table-wrap { border-radius: var(--u2-r-lg); overflow-x: auto; }
body.ui2 .panel .table-wrap { box-shadow: none; }
body.ui2 table.data th { font-family: var(--body); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--tx4); background: var(--u2-panel-2); padding: 10px 14px; font-weight: 500; }
body.ui2 table.data td { padding: 12px 14px; color: var(--tx2); border-bottom: 1px solid var(--u2-line); font-size: 14px; }
body.ui2 table.data tr:hover td { background: var(--u2-soft-2); }

/* treść stron i materiałów */
body.ui2 .material-body, body.ui2 .page-body { line-height: 1.7; color: var(--tx2); }
body.ui2 .material-body img, body.ui2 .page-body img { border-radius: var(--u2-r-lg); }
body.ui2 .paywall { background: var(--u2-panel); border: 1px dashed var(--u2-line-2); border-radius: var(--u2-r-xl); padding: 48px 24px; text-align: center; }
body.ui2 .paywall .lock-ico { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 20px; background: var(--u2-soft); display: grid; place-items: center; font-size: 26px; }
body.ui2 .paywall .actions { justify-content: center; }

/* ── nagłówek strony i okruszki ──────────────────────────────────────── */
.u2-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.u2-head h1 { margin: 0; }
.u2-head p { margin: 4px 0 0; color: var(--tx3); }
.u2-crumbs { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--tx3); flex-wrap: wrap; margin-bottom: -6px !important; }
.u2-crumbs a { color: var(--tx3); }
.u2-crumbs a:hover { color: var(--tx); }
.u2-crumbs svg.i { width: 14px; height: 14px; }
.u2-crumbs span { color: var(--tx); }
.u2-steps { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.u2-step { display: inline-flex; }
.u2-step i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12.5px; font-weight: 500;
  background: var(--u2-panel); border: 1px solid var(--u2-line-2); color: var(--tx3); transition: transform .15s, background .15s; }
.u2-step i svg.i { width: 14px; height: 14px; }
.u2-step + .u2-step::before { content: ""; width: 14px; height: 2px; border-radius: 2px; background: var(--u2-line-2); align-self: center; margin-right: 6px; }
.u2-step.done i { background: var(--accent); border-color: var(--accent); color: #fff; }
.u2-step.now i { background: var(--u2-ink); border-color: var(--u2-ink); color: #fff; box-shadow: 0 0 0 4px var(--u2-soft); }
.u2-step.lock i { border-style: dashed; color: var(--tx4); }
a.u2-step:hover i { transform: scale(1.1); }
.u2-steps-meta { margin-left: 8px; font-size: 13px; color: var(--tx3); }

/* ── kokpit ──────────────────────────────────────────────────────────── */
.u2-r1 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 18px; }
.u2-card { background: var(--u2-panel); border: 1px solid var(--u2-line); border-radius: var(--u2-r-xl); padding: 22px; box-shadow: var(--sh-card); min-width: 0; }
.u2-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.u2-card-head h2, .u2-card-head h3 { font-size: 16.5px; margin: 0; }
.u2-card-head p { margin: 1px 0 0; font-size: 13px; color: var(--tx3); }
.u2-spot { position: relative; overflow: hidden; }
.u2-spot::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), var(--u2-soft-2), transparent 45%); }
.u2-spot:hover::before { opacity: 1; }
.u2-cover { position: relative; border-radius: var(--u2-r-lg); overflow: hidden; aspect-ratio: 16/10; isolation: isolate;
  background: linear-gradient(135deg, var(--c1, var(--u2-acc2)), var(--c2, color-mix(in oklab, var(--accent) 45%, #fff))); }
.u2-cover::before { content: ""; position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; right: -18%; top: -30%; background: rgba(255,255,255,.22); transition: transform .6s var(--u2-ease); }
.u2-cover::after { content: ""; position: absolute; width: 46%; aspect-ratio: 1; border-radius: 38%; left: -10%; bottom: -24%; background: rgba(18,32,27,.10); transform: rotate(18deg); transition: transform .6s var(--u2-ease); }
.u2-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.u2-cover.has-img::before, .u2-cover.has-img::after { display: none; }
.u2-cover .tag-tl { position: absolute; top: 12px; left: 12px; z-index: 2; background: rgba(255,255,255,.92); border: 0; color: var(--tx); }
.u2-cover .glyph { position: absolute; left: 14px; bottom: 14px; z-index: 2; color: #fff; font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 8px;
  background: rgba(18,32,27,.32); backdrop-filter: blur(6px); padding: 5px 11px 5px 6px; border-radius: 999px; }
.u2-cover .glyph b { width: 22px; height: 22px; border-radius: 50%; background: #fff; color: var(--tx); display: grid; place-items: center; font-weight: 500; }
.u2-cover .glyph b svg.i { width: 10px; height: 10px; }
.u2-cover .lockb { position: absolute; top: 12px; right: 12px; z-index: 2; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.92); display: grid; place-items: center; color: var(--tx); }
.u2-cover .lockb svg.i { width: 15px; height: 15px; }
.u2-play { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%; background: #fff; color: var(--tx) !important; display: grid; place-items: center;
  z-index: 3; box-shadow: 0 10px 30px -8px rgba(0,0,0,.35); transition: transform .15s; }
.u2-play:hover { transform: scale(1.06); }
.u2-play svg.i { width: 22px; height: 22px; margin-left: 3px; fill: currentColor; stroke: none; }
.u2-play::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); animation: u2pulse 2.2s infinite; }
@keyframes u2pulse { 0% { transform: scale(.9); opacity: .9 } 100% { transform: scale(1.35); opacity: 0 } }
.c-1 { --c1: color-mix(in oklab, var(--accent) 85%, #000); --c2: color-mix(in oklab, var(--accent) 45%, #fff); }
.c-2 { --c1: #7c6be0; --c2: #cfc7fa; } .c-3 { --c1: #dd9a22; --c2: #f6dc9c; } .c-4 { --c1: #e06a57; --c2: #f7c2b6; }
.c-5 { --c1: #3d8fd1; --c2: #b6dcf5; } .c-6 { --c1: #12201b; --c2: #3d5a50; }

.u2-resume { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 22px; align-items: center; }
.u2-resume h2 { font-size: 24px; letter-spacing: -.015em; line-height: 1.2; margin: 10px 0 6px; }
.u2-resume h2 a { color: var(--tx); }
.u2-resume .row2 { display: flex; align-items: center; gap: 10px; margin: 18px 0 8px; font-size: 13.5px; color: var(--tx3); }
.u2-resume .row2 b { color: var(--tx); font-weight: 500; margin-left: auto; }
.u2-resume .btns { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.u2-empty { color: var(--tx3); font-size: 14.5px; padding: 6px 0; }
.u2-empty-big { text-align: center; padding: 26px 10px; }
.u2-empty-big .ic { width: 56px; height: 56px; border-radius: 18px; background: var(--u2-soft); color: var(--u2-acc2); display: grid; place-items: center; margin: 0 auto 12px; }

.u2-cert { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--u2-r-md); border: 1px solid var(--u2-line); background: var(--u2-panel-2); color: var(--tx); transition: transform .18s, border-color .15s, background .15s; }
.u2-cert + .u2-cert { margin-top: 10px; }
.u2-cert .ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--u2-amber-s); color: #a3741a; flex: none; }
.u2-cert .t { font-weight: 500; font-size: 14.5px; line-height: 1.3; }
.u2-cert .m { font-size: 12.5px; color: var(--tx3); }
.u2-cert .btn { margin-left: auto; }
.u2-cert.lock .ic { background: var(--u2-panel-3); color: var(--tx4); }
.u2-cert:not(.lock):hover { transform: translateY(-2px); border-color: var(--u2-amber); background: #fff; }
.u2-cert:not(.lock):hover .ic svg.i { animation: u2ring .6s; }

.u2-gauges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.u2-gauge { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 6px 4px; }
.u2-gauge .gw { position: relative; display: grid; place-items: center; }
.u2-gauge svg { width: 104px; height: 104px; }
.u2-gauge svg circle { fill: none; stroke-width: 7; stroke-linecap: round; }
.u2-gauge svg circle:first-child { stroke: var(--u2-panel-3); }
.u2-gauge svg circle + circle { transition: stroke-dasharray 1.3s var(--u2-ease); }
.u2-gauge .v { position: absolute; font-family: var(--display); font-size: 21px; font-weight: 500; letter-spacing: -.01em; }
.u2-gauge .l { font-size: 14px; margin-top: 6px; }
.u2-gauge .s { font-size: 12px; color: var(--tx3); }

.u2-paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.u2-col-h { height: 36px; border-radius: 999px; border: 1px solid var(--u2-line-2); display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; color: var(--tx3); padding: 0 14px; }
.u2-col-h b { font-weight: 500; color: var(--tx); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u2-col-h small { color: var(--tx4); flex: none; }
.u2-link { width: 1px; height: 14px; margin: 0 auto; border-left: 1px dashed var(--u2-line-2); position: relative; }
.u2-link::after { content: ""; position: absolute; left: -3px; bottom: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--u2-line-2); }
.u2-les { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid var(--u2-line); border-radius: var(--u2-r-md); background: var(--u2-panel-2); color: var(--tx);
  transition: border-color .15s, background .15s, transform .18s; }
.u2-les .n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 12.5px; font-weight: 500; background: var(--u2-panel-3); color: var(--tx3); }
.u2-les .n svg.i { width: 15px; height: 15px; }
.u2-les.done .n { background: var(--accent); color: #fff; }
.u2-les.now { background: #fff; border-color: var(--accent); box-shadow: 0 0 0 4px var(--u2-soft); }
.u2-les.now .n { background: var(--u2-ink); color: #fff; }
.u2-les.lock { opacity: .6; }
.u2-les .t { font-size: 14px; font-weight: 500; line-height: 1.25; }
.u2-les .m { font-size: 12px; color: var(--tx3); }
.u2-les .m em { font-style: normal; color: var(--u2-acc2); font-weight: 500; }
.u2-les .e { margin-left: auto; color: var(--tx4); transition: transform .2s; }
.u2-les .e svg.i { width: 15px; height: 15px; }
a.u2-les:hover { border-color: var(--u2-line-2); background: #fff; transform: translateX(3px); }
a.u2-les:hover .e { transform: translateX(3px); color: var(--tx); }
.u2-more { display: block; text-align: center; font-size: 13px; color: var(--tx3); margin-top: 10px; }

.u2-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.u2-filters button { height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--u2-line-2); background: var(--u2-panel); font-size: 13.5px; color: var(--tx3); cursor: pointer; font-family: var(--body); transition: background .15s, color .15s, border-color .15s; }
.u2-filters button:not(.on):hover { border-color: var(--tx4); color: var(--tx); }
.u2-filters button.on { background: var(--u2-ink); color: #fff; border-color: var(--u2-ink); }
.u2-courses { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.u2-course { display: flex; flex-direction: column; gap: 12px; padding: 10px 10px 16px; border-radius: var(--u2-r-xl); background: var(--u2-panel); border: 1px solid var(--u2-line); color: var(--tx);
  transition: transform .22s var(--u2-ease), box-shadow .22s, border-color .2s; min-width: 0; }
.u2-course:hover { transform: translateY(-3px); box-shadow: var(--sh-lift); border-color: var(--u2-line-2); }
.u2-course:hover .u2-cover::before { transform: scale(1.15) translate(-6%, 6%); }
.u2-course:hover .u2-cover::after { transform: rotate(30deg) scale(1.1); }
.u2-course .hovplay { position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; border-radius: 50%; background: #fff; color: var(--tx); display: grid; place-items: center; z-index: 3;
  opacity: 0; transform: scale(.7); transition: opacity .2s, transform .25s var(--u2-ease); box-shadow: 0 10px 30px -8px rgba(0,0,0,.35); }
.u2-course .hovplay svg.i { width: 18px; height: 18px; margin-left: 2px; fill: currentColor; stroke: none; }
.u2-course:hover .hovplay { opacity: 1; transform: none; }
.u2-course .body { padding: 0 6px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.u2-course h3 { font-size: 16px; line-height: 1.3; margin: 0; transition: color .15s; }
.u2-course h3 a { color: inherit; }
.u2-course:hover h3 { color: var(--u2-acc2); }
.u2-course .desc { font-size: 13.5px; color: var(--tx3); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.u2-course .meta { display: flex; gap: 12px; font-size: 12.5px; color: var(--tx3); flex-wrap: wrap; }
.u2-course .meta span { display: inline-flex; align-items: center; gap: 5px; }
.u2-course .meta svg.i { width: 14px; height: 14px; }
.u2-course .foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 4px; flex-wrap: wrap; }
.u2-course .pct { font-size: 13px; color: var(--tx3); }
.u2-course .foot .chip-voucher, .u2-course .foot .chip-buy { cursor: pointer; }
.u2-course.hide { display: none; }
.u2-courses-group { display: contents; }

/* hero dla gości */
.u2-hero { position: relative; overflow: hidden; border-radius: 28px; padding: clamp(28px, 5vw, 56px); background: var(--u2-panel); border: 1px solid var(--u2-line); box-shadow: var(--sh-card); isolation: isolate; }
.u2-hero::before { content: ""; position: absolute; width: 560px; height: 560px; right: -160px; top: -240px; border-radius: 50%; background: radial-gradient(circle, var(--u2-soft), transparent 65%); z-index: -1; }
.u2-hero.center { text-align: center; }
.u2-hero.has-img { background: linear-gradient(90deg, rgba(10,20,16,.78), rgba(10,20,16,.25)), var(--hero-img) center/cover; color: #fff; border: 0; }
.u2-hero.has-img h1, .u2-hero.has-img p, .u2-hero.has-img .eyebrow { color: #fff; }
.u2-hero h1 { font-size: clamp(2rem, 4.4vw, 3.4rem); letter-spacing: -.03em; line-height: 1.05; max-width: 18ch; margin: 10px 0 14px; }
.u2-hero.center h1 { margin-left: auto; margin-right: auto; }
.u2-hero p { font-size: 17px; color: var(--tx3); max-width: 56ch; margin: 0; }
.u2-hero.center p { margin: 0 auto; }
.u2-hero .btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.u2-hero.center .btns { justify-content: center; }
.u2-hero .stats { display: flex; gap: 28px; margin-top: 30px; flex-wrap: wrap; }
.u2-hero.center .stats { justify-content: center; }
.u2-hero .stats b { display: block; font-family: var(--display); font-size: 28px; font-weight: 500; letter-spacing: -.02em; line-height: 1; }
.u2-hero .stats span { font-size: 13px; color: var(--tx3); }
.u2-hero.has-img .stats span { color: rgba(255,255,255,.75); }
.u2-hero.has-img .btn:not(.btn-primary) { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.3); }

/* ── materiał ────────────────────────────────────────────────────────── */
body.ui2 .material-main { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
body.ui2 .material-main > div { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
body.ui2 .material-main > div > * { margin: 0 !important; }
body.ui2 .material-head h1 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 0; }
body.ui2 .material-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
body.ui2 .material-lead { color: var(--tx3); margin: 8px 0 0; }
body.ui2 .material-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding: 0; border: 0; }
body.ui2 .mb-item { font-size: 13px; color: var(--tx3); background: var(--u2-panel); border: 1px solid var(--u2-line); border-radius: 99px; padding: 4px 12px; font-family: var(--body); }
body.ui2 .mb-item.is-ok { background: var(--u2-soft); color: var(--u2-acc2); border-color: transparent; }
body.ui2 .mb-nav { margin-left: auto; display: flex; gap: 8px; }
body.ui2 .player-shell { border-radius: var(--u2-r-xl); border: 0; box-shadow: 0 30px 60px -36px rgba(10,20,16,.6); background: #0f1a16; }
body.ui2 .player-empty { padding: 60px 20px; text-align: center; color: rgba(255,255,255,.75); }
body.ui2 .player-empty strong { color: #fff; }
body.ui2 .player-shell + .progressbar { margin-top: -6px !important; height: 4px; }
body.ui2 .player-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; color: var(--tx3); }
body.ui2 .pb-progress strong { color: var(--tx); }
body.ui2 .pb-tools { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 4px; background: var(--u2-panel); border: 1px solid var(--u2-line); border-radius: 999px; }
body.ui2 .pb-label { font-size: 12px; color: var(--tx4); padding: 0 6px 0 8px; }
body.ui2 .speed-btn { border: 0; background: transparent; border-radius: 999px; padding: 6px 11px; font-family: var(--body); font-size: 13px; color: var(--tx3); }
body.ui2 .speed-btn:hover { color: var(--tx); background: var(--u2-panel-2); }
body.ui2 .speed-btn.active { background: var(--u2-ink); color: #fff; }
body.ui2 .kbd-hint { font-size: 12.5px; color: var(--tx4); }
body.ui2 kbd { font-family: var(--body); font-size: 11.5px; background: var(--u2-panel); border: 1px solid var(--u2-line-2); border-bottom-width: 2px; border-radius: 6px; padding: 1px 6px; }
body.ui2 .chapters-box { background: var(--u2-panel); border: 1px solid var(--u2-line); border-radius: var(--u2-r-lg); padding: 14px 18px; }
body.ui2 .chapters-box summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-weight: 500; list-style: none; }
body.ui2 .chapters-box summary::-webkit-details-marker { display: none; }
body.ui2 .chapter-chip { height: 36px; padding: 0 14px 0 6px; border-radius: 999px; border: 1px solid var(--u2-line-2); background: var(--u2-panel); font-size: 13.5px; color: var(--tx2); transition: background .15s, border-color .15s, transform .15s; }
body.ui2 .chapter-chip:hover { border-color: var(--tx4); color: var(--tx); transform: translateY(-1px); }
body.ui2 .ch-time { font-family: var(--body); font-size: 12px; background: var(--u2-soft); color: var(--u2-acc2); padding: 3px 8px; border-radius: 99px; }
body.ui2 .note-ts { padding: 0 4px; height: 28px; }
body.ui2 .note { padding: 12px 0; border-bottom: 1px solid var(--u2-line); display: flex; gap: 10px; align-items: flex-start; }
body.ui2 .note-text { flex: 1; margin: 2px 0; color: var(--tx2); }
body.ui2 .comment { padding: 14px 0; border-bottom: 1px solid var(--u2-line); }
body.ui2 .comment:last-child, body.ui2 .note:last-child { border-bottom: 0; }
body.ui2 .comment p { margin: 4px 0 0; color: var(--tx2); }
body.ui2 .comment-head { font-size: 13.5px; }
body.ui2 .quiz-q { border: 1px solid var(--u2-line); border-radius: var(--u2-r-md); padding: 14px 16px; margin: 0 0 10px; }
body.ui2 .quiz-q legend { font-weight: 500; padding: 0 6px; }
body.ui2 .material-aside { position: sticky; top: calc(var(--u2-top) + 10px); background: var(--u2-panel); border: 1px solid var(--u2-line); border-radius: var(--u2-r-xl); padding: 18px; box-shadow: var(--sh-card);
  max-height: calc(100vh - var(--u2-top) - 30px); overflow: auto; scrollbar-width: thin; }
body.ui2 .material-aside:empty { display: none; }
body.ui2 .material-aside h3 { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--tx4); font-weight: 500; margin: 6px 4px 10px; font-family: var(--body); }
body.ui2 .material-aside h3 ~ h3 { margin-top: 20px; }
body.ui2 .material-aside .list { gap: 4px; }
body.ui2 .material-aside .row { padding: 9px 10px; border: 1px solid transparent; box-shadow: none; background: transparent; border-radius: var(--u2-r-md); }
body.ui2 .material-aside .row::before { display: none; }
body.ui2 .material-aside .row:hover { background: var(--u2-panel-2); transform: translateX(2px); }
body.ui2 .material-aside .row.is-current { background: #fff; border-color: var(--accent); box-shadow: 0 0 0 4px var(--u2-soft); }
body.ui2 .material-aside .row-fill { display: none; }
body.ui2 .material-aside .row-check { width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--u2-panel-3); color: var(--tx3); font-size: 12px; }
body.ui2 .material-aside .row-check.on { background: var(--accent); color: #fff; }
body.ui2 .material-aside .row.is-current .row-check { background: var(--u2-ink); }
body.ui2 .material-aside .row-title { font-size: 14px; }
body.ui2 .material-aside .row-meta { font-family: var(--body); font-size: 12px; }
body.ui2 .material-aside .badge-accent { height: 20px; font-size: 11px; }
body.ui2 .material-aside > .progressbar { margin: 14px 4px 6px; }
body.ui2 .material-aside > .hint { margin: 0 4px; }
body.ui2 .attachments a { border-radius: var(--u2-r-md); border: 1px solid var(--u2-line); background: var(--u2-panel-2); padding: 12px; justify-content: space-between; transition: background .15s, border-color .15s; }
body.ui2 .attachments a:hover { background: #fff; border-color: var(--u2-line-2); }
body.ui2 .pdf-frame { border-radius: var(--u2-r-xl); border: 1px solid var(--u2-line); }

/* ── konto, powiadomienia, wyszukiwarka ──────────────────────────────── */
body.ui2 .cert-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
body.ui2 .cert-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--u2-r-md); background: var(--u2-panel-2); border: 1px solid var(--u2-line); flex-wrap: wrap; }
body.ui2 .cert-row-t { flex: 1; min-width: 200px; display: flex; flex-direction: column; }
body.ui2 .grid { gap: 18px; }
body.ui2 .grid > .panel h3 { margin-top: 0; }
body.ui2 .notif-list { gap: 6px; }
body.ui2 .notif { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: var(--u2-r-md); border: 1px solid var(--u2-line); color: var(--tx); background: var(--u2-panel-2); transition: background .15s, transform .15s; }
body.ui2 .notif:hover { background: #fff; transform: translateX(2px); }
body.ui2 .notif.is-unread { background: #fff; border-color: color-mix(in oklab, var(--accent) 40%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
body.ui2 .notif-date { font-size: 12.5px; color: var(--tx4); flex: none; }
body.ui2 .search-results { background: var(--u2-panel); border: 1px solid var(--u2-line); border-radius: var(--u2-r-xl); padding: 8px; box-shadow: var(--sh-card); }
body.ui2 .search-row { border-radius: var(--u2-r-md); color: var(--tx); transition: background .15s, transform .15s; }
body.ui2 .search-row:hover { background: var(--u2-panel-2); transform: translateX(2px); }
body.ui2 .sr-ico { background: var(--u2-soft); color: var(--u2-acc2); border-radius: 12px; }
body.ui2 .sr-meta { font-family: var(--body); display: flex; gap: 6px; flex-wrap: wrap; }

/* bloki treści */
body.ui2 .block { margin: 0; }
body.ui2 .tst, body.ui2 .faq-item, body.ui2 .block-text-sec { background: var(--u2-panel); border-radius: var(--u2-r-xl); border-color: var(--u2-line); }

/* ── stopka ──────────────────────────────────────────────────────────── */
.u2-foot { margin-top: 10px !important; background: var(--u2-panel); border: 1px solid var(--u2-line); border-radius: var(--u2-r-xl); padding: 28px 28px 18px; }
.u2-foot-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 28px; }
.u2-foot-brand p { color: var(--tx3); font-size: 14px; margin: 12px 0 14px; max-width: 36ch; }
.u2-soc { display: flex; gap: 8px; flex-wrap: wrap; }
.u2-soc a { width: 36px; height: 36px; border-radius: 50%; background: var(--u2-panel-2); border: 1px solid var(--u2-line); display: grid; place-items: center; color: var(--tx3); transition: background .15s, color .15s, transform .15s; }
.u2-soc a:hover { background: var(--u2-ink); color: #fff; transform: translateY(-2px); }
.u2-soc svg.i { width: 16px; height: 16px; }
.u2-foot nav { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.u2-foot b { font-weight: 500; font-size: 14px; display: block; margin-bottom: 4px; color: var(--tx); }
.u2-foot nav a { color: var(--tx3); width: fit-content; transition: color .15s, transform .15s; }
.u2-foot nav a:hover { color: var(--u2-acc2); transform: translateX(2px); }
.u2-foot-help { background: var(--u2-panel-2); border-radius: var(--u2-r-lg); padding: 16px; align-self: start; }
.u2-foot-help p { font-size: 13.5px; color: var(--tx3); margin: 0 0 12px; }
.u2-foot-help .btn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.u2-foot-bot, .u2-foot-mini { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--tx4); }
.u2-foot-bot { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--u2-line); }
.u2-foot-mini { padding: 20px var(--u2-gut); }
.u2-powered { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 99px; border: 1px solid var(--u2-line); color: var(--tx3) !important; transition: border-color .15s, color .15s; }
.u2-powered i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--u2-soft); }
.u2-powered:hover { border-color: var(--accent); color: var(--u2-acc2) !important; }

/* ── strony logowania ────────────────────────────────────────────────── */
.u2-auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; max-width: 1080px; margin: clamp(10px, 4vh, 40px) auto 0; padding: 0 var(--u2-gut);
  min-height: calc(100vh - var(--u2-top) - 120px); align-items: stretch; }
.u2-auth-side { position: relative; overflow: hidden; border-radius: 28px 0 0 28px; padding: clamp(28px, 4vw, 48px); color: #fff; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; isolation: isolate;
  background: linear-gradient(160deg, color-mix(in oklab, var(--accent) 60%, var(--u2-ink)), var(--u2-ink)); }
.u2-auth-side::before { content: ""; position: absolute; width: 480px; height: 480px; right: -180px; top: -200px; border-radius: 50%; background: radial-gradient(circle, color-mix(in oklab, var(--accent) 70%, transparent), transparent 65%); z-index: -1; opacity: .8; }
.u2-auth-side::after { content: ""; position: absolute; width: 260px; height: 260px; left: -80px; bottom: -120px; border-radius: 40%; background: rgba(255,255,255,.06); transform: rotate(20deg); z-index: -1; }
.u2-auth-side .eyebrow { color: rgba(255,255,255,.7) !important; }
.u2-auth-side b { font-family: var(--display); font-size: clamp(26px, 3vw, 36px); font-weight: 500; line-height: 1.1; letter-spacing: -.02em; }
.u2-auth-side p { color: rgba(255,255,255,.75); margin: 0; }
.u2-auth-side ul { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.u2-auth-side li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: rgba(255,255,255,.9); }
.u2-auth-side li svg.i { width: 30px; height: 30px; padding: 7px; border-radius: 10px; background: rgba(255,255,255,.12); }
.u2-auth-main { background: var(--u2-panel); border: 1px solid var(--u2-line); border-left: 0; border-radius: 0 28px 28px 0; padding: clamp(24px, 4vw, 48px); display: flex; flex-direction: column; justify-content: center; gap: 14px; box-shadow: var(--sh-card); }
body.ui2 .u2-auth-main .auth-box { max-width: none; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; }
body.ui2 .u2-auth-main .auth-box h1 { font-size: 30px; margin-bottom: 6px; }
body.ui2 .u2-auth-main .auth-box .sub { margin: 0 0 8px; }
body.ui2 .u2-auth-main .form-actions .btn-primary { min-width: 160px; }
body.ui2 .u2-auth-main .item-row { padding: 10px 0; border-bottom: 1px solid var(--u2-line); }

/* ── okno vouchera ───────────────────────────────────────────────────── */
body.ui2 .vmod { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; }
body.ui2 .vmod[hidden] { display: none; }
body.ui2 .vmod-bg { position: absolute; inset: 0; background: rgba(10,20,16,.55); backdrop-filter: blur(4px); }
body.ui2 .vmod-box { position: relative; width: min(440px, 100%); background: #fff; border-radius: var(--u2-r-xl); padding: 28px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.5); animation: u2pop .3s var(--u2-ease); }
@keyframes u2pop { from { opacity: 0; transform: scale(.96) translateY(8px) } }
body.ui2 .vmod-box h3 { font-size: 20px; margin: 10px 0 4px; }
body.ui2 .vmod-box .btn { margin-top: 14px; width: 100%; }
body.ui2 .vmod-x { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--u2-panel-2); display: grid; place-items: center; cursor: pointer; color: var(--tx3); }
.u2-vmod-ic { width: 48px; height: 48px; border-radius: 15px; background: var(--u2-soft); color: var(--u2-acc2); display: grid; place-items: center; }

/* ── nawigacja na telefonie ──────────────────────────────────────────── */
.u2-bnav { display: none; }

/* pojawianie się przy przewijaniu (włącza skrypt, gdy przeglądarka to obsługuje) */
html.u2-rv [data-rv] { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--u2-ease), transform .6s var(--u2-ease); }
html.u2-rv [data-rv].in { opacity: 1; transform: none; }

/* ── responsywność ───────────────────────────────────────────────────── */
@media (max-width: 1240px) {
  body.ui2 .material-main { grid-template-columns: minmax(0, 1fr) 300px; }
  .u2-foot-top { grid-template-columns: 1fr 1fr; }
  .u2-foot-brand, .u2-foot-help { grid-column: 1 / -1; }
}
@media (max-width: 1100px) { body.ui2 { --u2-gut: 20px; } }
@media (max-width: 980px) {
  .u2-r1 { grid-template-columns: minmax(0, 1fr); }
  .u2-gauges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.ui2 .material-main { grid-template-columns: minmax(0, 1fr); }
  body.ui2 .material-aside { position: static; max-height: none; }
  .u2-auth { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .u2-auth-side { border-radius: 24px 24px 0 0; min-height: 0; padding: 24px; }
  .u2-auth-side ul { display: none; }
  .u2-auth-main { border-left: 1px solid var(--u2-line); border-top: 0; border-radius: 0 0 24px 24px; }
}
@media (max-width: 820px) {
  body.ui2 { --u2-gut: 16px; --u2-top: 60px; }
  .u2-top { padding: 0 var(--u2-gut); gap: 10px; }
  .u2-seg { display: none; }
  .u2-hide-s { display: none !important; }
  .u2-shell { grid-template-columns: minmax(0, 1fr) !important; }
  .u2-rail { display: none; }
  .u2-rail-tog .ip { display: none; } .u2-rail-tog .ix { display: block; }
  body.u2-drawer .u2-rail { display: flex; position: fixed; left: 12px; top: 12px; bottom: 12px; height: auto; margin: 0; z-index: 60; width: min(300px, 84vw);
    box-shadow: 0 30px 60px -20px rgba(18,32,27,.45); animation: u2dr .28s var(--u2-ease); }
  body.u2-drawer .u2-scrim { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(18,32,27,.35); backdrop-filter: blur(2px); }
  body.u2-drawer { overflow: hidden; }
  @keyframes u2dr { from { transform: translateX(-30px); opacity: 0 } }
  .u2-main { padding: 4px var(--u2-gut) 96px; }
  .u2-bnav { display: flex; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 50; background: var(--u2-ink); border-radius: 999px; padding: 6px; justify-content: space-around; box-shadow: 0 10px 30px -10px rgba(18,32,27,.5); }
  .u2-bnav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; color: rgba(255,255,255,.62) !important; font-size: 11px; padding: 6px 0; border-radius: 999px; }
  .u2-bnav a.on { background: rgba(255,255,255,.12); color: #fff !important; }
  .u2-bnav a:hover { text-decoration: none; color: #fff !important; }
  .u2-search:focus-within input[type=search], .u2-search input[type=search]:not(:placeholder-shown) { width: calc(100vw - 120px); }
  body.ui2 .mb-nav { margin-left: 0; width: 100%; }
  body.ui2 .pb-tools { margin-left: 0; }
  body.ui2 .kbd-hint { display: none; }
  .u2-auth { padding: 0 var(--u2-gut); }
}
@media (max-width: 620px) {
  body.ui2 h1 { font-size: 26px; }
  .u2-resume { grid-template-columns: minmax(0, 1fr); }
  .u2-courses { grid-template-columns: minmax(0, 1fr); }
  .u2-gauge svg { width: 88px; height: 88px; }
  .u2-card, body.ui2 .panel, body.ui2 .quiz-box { padding: 18px; border-radius: 20px; }
  .u2-foot { padding: 20px 18px 14px; }
  .u2-foot-top { grid-template-columns: 1fr 1fr; gap: 20px; }
  .u2-steps-meta { width: 100%; margin: 4px 0 0; }
  body.ui2 .pb-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.ui2 *, body.ui2 *::before, body.ui2 *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* drobne zgodności ze starszymi znacznikami */
body.ui2 .mb-item::before, body.ui2 .mb-item::after { display: none !important; content: none !important; }
body.ui2 .kbd-hint, body.ui2 .pb-label, body.ui2 .pb-resume, body.ui2 .size, body.ui2 .row-meta { font-family: var(--body); letter-spacing: 0; text-transform: none; }
.u2-rail .nav-badge { font-family: var(--body); }
body.ui2 .u2-auth-main .form-actions { gap: 6px 4px; }
body.ui2 .u2-auth-main .form-actions .btn-primary { flex: 1 0 100%; height: 48px; margin-bottom: 4px; }
body.ui2 .u2-auth-main .form-actions .btn-ghost { padding: 0 12px; height: 36px; font-size: 14px; color: var(--u2-acc2); }
body.ui2 .u2-auth-main .form-actions .btn-ghost[style*="margin-left:auto"] { margin-left: auto; }

/* ── panel akademii ──────────────────────────────────────────────────── */
.u2-bt small { display: block; font-family: var(--body); font-size: 11.5px; font-weight: 400; color: var(--tx4); letter-spacing: 0; margin-top: 1px; }
.u2-admin .u2-brand { line-height: 1.15; }
.u2-banner-soft { background: var(--u2-soft); color: var(--u2-acc2); border-radius: var(--u2-r-md); }
.u2-rail-plan { display: none !important; }
html.u2-menu-open .u2-rail-plan, body.u2-drawer .u2-rail-plan { display: block !important; width: auto !important; height: auto !important; border-radius: 14px !important;
  padding: 12px !important; background: var(--u2-panel-2); margin: 6px 0; font-size: 12.5px; color: var(--tx); white-space: nowrap; }
.u2-rail-plan .rp-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.u2-rail-plan .rp-h b { font-weight: 500; font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
.u2-rail-plan .rp-h span { color: var(--tx4); font-size: 11.5px; }
.u2-rail-plan .rp-r { display: flex; justify-content: space-between; color: var(--tx3); margin: 6px 0 4px; }
.u2-rail-plan .progressbar { height: 5px; display: block; }
.u2-foot-panel { padding: 8px 0 0; }
body.ui2 .admin-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; min-height: 0; margin: 0; background: none; border: 0; box-shadow: none; padding: 0; }
body.ui2 .admin-head > h1 { height: auto; padding: 0; background: none; border: 0; box-shadow: none; font-size: clamp(1.6rem, 2.4vw, 2.05rem); line-height: 1.15; margin: 0; display: block; }
body.ui2 .admin-head > h1::before, body.ui2 .admin-head::before { display: none; }
body.ui2 .admin-head > *:not(h1) { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body.ui2 .admin-head + .lead-under, body.ui2 .admin-head + p { margin-top: -10px !important; }
body.ui2 .stat-grid { gap: 14px; margin: 0; }
body.ui2 .stat { padding: 18px 20px; border-radius: var(--u2-r-lg); transition: transform .2s var(--u2-ease), box-shadow .2s; }
body.ui2 .stat:hover { transform: translateY(-2px); box-shadow: var(--sh-lift); }
body.ui2 .stat .l, body.ui2 .stat-label { font-family: var(--body); font-size: 12.5px; letter-spacing: 0; text-transform: none; color: var(--tx3); font-weight: 400; }
body.ui2 .stat .n, body.ui2 .stat-value, body.ui2 .hstat-n { background: none; -webkit-text-fill-color: currentColor; color: var(--tx); font-family: var(--display); font-size: 30px; font-weight: 500; }
body.ui2 .dash3 { gap: 18px; }
body.ui2 .dash-card { border-radius: var(--u2-r-xl); padding: 22px; }
body.ui2 .dash-head h3 { font-size: 16px; margin: 0; }
body.ui2 .preset-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 6px 0 14px; }
body.ui2 .preset { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px; border-radius: var(--u2-r-md); border: 1px solid var(--u2-line-2); background: #fff; font-size: 13.5px; text-align: left; transition: border-color .15s, box-shadow .15s, transform .18s; }
body.ui2 .preset:hover { transform: translateY(-2px); border-color: var(--tx4); }
body.ui2 .preset.active { border-color: var(--accent); box-shadow: 0 0 0 4px var(--u2-soft); }
body.ui2 .preset-dots { gap: 0; height: 30px; border-radius: 9px; overflow: hidden; }
body.ui2 .preset-dots i { width: auto; height: 100%; border-radius: 0; flex: 1; transition: flex .3s; }
body.ui2 .preset:hover .preset-dots i:last-child { flex: 1.6; }
body.ui2 input[type=color] { width: 44px; height: 44px; padding: 3px; border-radius: 12px; border: 1px solid var(--u2-line-2); background: #fff; cursor: pointer; }
body.ui2 input[type=file] { min-height: 44px; border-radius: var(--u2-r-md); border: 1.5px dashed var(--u2-line-2); background: var(--u2-panel-2); padding: 8px 10px; font-size: 13.5px; width: 100%; }
body.ui2 input[type=file]:hover { border-color: var(--accent); background: var(--u2-soft-2); }
body.ui2 input[type=file]::file-selector-button { border: 0; background: var(--u2-ink); color: #fff; border-radius: 999px; padding: 7px 14px; margin-right: 10px; font: inherit; cursor: pointer; }
/* przełączniki zamiast pól wyboru */
body.ui2 label.check input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 40px; height: 24px; border-radius: 99px; background: var(--u2-panel-3);
  border: 1px solid var(--u2-line-2); position: relative; cursor: pointer; flex: none; transition: background .15s, border-color .15s; margin: 0; }
body.ui2 label.check input[type=checkbox]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .18s var(--u2-ease); }
body.ui2 label.check input[type=checkbox]:checked { background: var(--accent); border-color: var(--accent); }
body.ui2 label.check input[type=checkbox]:checked::after { transform: translateX(16px); }
body.ui2 label.check input[type=checkbox]:disabled { opacity: .5; cursor: not-allowed; }
body.ui2 label.check input[type=checkbox]:focus-visible { box-shadow: 0 0 0 4px var(--u2-soft); outline: none; }
body.ui2 label.check { gap: 12px; }
/* pasek zapisu */
body.ui2 .form-actions-sticky { position: sticky; bottom: 16px; z-index: 25; display: flex; align-items: center; gap: 12px; justify-content: flex-end;
  padding: 10px 10px 10px 20px; border-radius: 999px; background: var(--u2-ink); border: 0; box-shadow: 0 20px 40px -18px rgba(18,32,27,.6); color: #fff; backdrop-filter: none;
  transition: opacity .25s, transform .3s var(--u2-ease); }
body.ui2 .form-actions-sticky .btn-primary { background: var(--accent); border-color: var(--accent); height: 40px; font-size: 14.5px; padding: 0 20px; }
body.ui2 .form-actions-sticky .btn-primary:hover { background: var(--u2-acc2); }
body.ui2 .form-actions-sticky::before { content: "Masz niezapisane zmiany"; margin-right: auto; font-size: 14px; color: rgba(255,255,255,.8); display: none; }
html.u2-js body.ui2 form.u2-watch:not(.dirty) .form-actions-sticky { opacity: 0; transform: translateY(24px) scale(.98); pointer-events: none; }
html.u2-js body.ui2 form.u2-watch.dirty .form-actions-sticky::before { display: block; }
/* układ ustawień: spis sekcji, formularz, podgląd */
.u2-set { display: grid; grid-template-columns: 220px minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.u2-set > form { min-width: 0; }
.u2-subnav { position: sticky; top: calc(var(--u2-top) + 10px); background: var(--u2-panel); border: 1px solid var(--u2-line); border-radius: var(--u2-r-xl); padding: 10px; box-shadow: var(--sh-card); display: flex; flex-direction: column; gap: 2px; }
.u2-subnav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; color: var(--tx3); font-size: 14px; transition: background .15s, color .15s, transform .15s; }
.u2-subnav a:not(.on):hover { background: var(--u2-panel-2); color: var(--tx); transform: translateX(2px); }
.u2-subnav a.on { background: var(--u2-ink); color: #fff; }
.u2-subnav svg.i { width: 17px; height: 17px; }
.u2-sec-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--u2-soft); color: var(--u2-acc2); margin-right: 4px; }
.u2-sec-ic svg.i { width: 18px; height: 18px; }
body.ui2 .panel-head:has(.u2-sec-ic) { justify-content: flex-start; }
body.ui2 .stack-sections > section.panel { scroll-margin-top: calc(var(--u2-top) + 16px); transition: border-color .2s, box-shadow .2s; }
body.ui2 .stack-sections > section.panel:focus-within { border-color: color-mix(in oklab, var(--accent) 45%, transparent); box-shadow: 0 0 0 4px var(--u2-soft), var(--sh-card); }
.u2-prev { position: sticky; top: calc(var(--u2-top) + 10px); }
.u2-pv { border-radius: var(--u2-r-lg); overflow: hidden; border: 1px solid var(--u2-line); background: #f7f9f8; --pa: var(--accent); }
.u2-pv * { transition: background .35s, color .35s; }
.u2-pv-m { display: flex; align-items: center; gap: 8px; padding: 10px 12px; color: #fff; font-size: 13px; font-weight: 500; background: var(--u2-ink); }
.u2-pv-m i { width: 20px; height: 20px; border-radius: 6px; background: var(--pa); display: grid; place-items: center; font-style: normal; font-size: 11px; flex: none; }
.u2-pv-m span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u2-pv-h { padding: 18px 14px 16px; }
.u2-pv-h b { display: block; font-family: var(--display); font-size: 17px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.u2-pv-h p { font-size: 12px; color: var(--tx3); margin: 4px 0 12px; }
.u2-pv-btn { display: inline-block; padding: 7px 12px; border-radius: 99px; background: var(--pa); color: #fff; font-size: 12px; }
.u2-pv-c { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 14px 14px; }
.u2-pv-c div { background: #fff; border-radius: 10px; padding: 6px; font-size: 11px; }
.u2-pv-c div i { display: block; aspect-ratio: 16/10; border-radius: 7px; background: linear-gradient(135deg, var(--pa), color-mix(in oklab, var(--pa) 30%, #fff)); margin-bottom: 5px; }
.u2-pv-c em { display: block; height: 4px; border-radius: 9px; background: var(--u2-panel-3); margin-top: 5px; overflow: hidden; }
.u2-pv-c em::after { content: ""; display: block; height: 100%; width: var(--w); background: var(--pa); }
@media (max-width: 1320px) { .u2-set { grid-template-columns: 200px minmax(0, 1fr); } .u2-prev { display: none; } }
@media (max-width: 980px) {
  .u2-set { grid-template-columns: minmax(0, 1fr); }
  .u2-subnav { position: sticky; top: calc(var(--u2-top) + 6px); z-index: 20; flex-direction: row; overflow-x: auto; border-radius: 999px; padding: 6px; scrollbar-width: none; }
  .u2-subnav::-webkit-scrollbar { display: none; }
  .u2-subnav a { white-space: nowrap; border-radius: 999px; padding: 8px 14px; }
  body.ui2 .form-actions-sticky { bottom: 84px; }
}
@media (max-width: 620px) { body.ui2 .stat-grid { grid-template-columns: 1fr 1fr; } body.ui2 .stat .n, body.ui2 .stat-value { font-size: 24px; } }
body.ui2 .admin-head > h1 { white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
.u2-banner-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.u2-banner-new { background: var(--u2-panel); border: 1px solid var(--u2-line); border-radius: var(--u2-r-lg); padding: 14px 14px 14px 18px; box-shadow: var(--sh-card); }
.u2-banner-new > svg.i { color: var(--u2-acc2); }
.u2-preview-bar { border-radius: var(--u2-r-lg); }
.u2-preview-bar .btn-accent { background: var(--accent) !important; border-color: var(--accent) !important; }